/* ==========================================================================
   Полутон - салон света
   Aesthetic: cold-luxury graphite + bone. Native CSS, no framework.
   Theme lock: dark only. The brand is light in a dark room; a light-mode
   variant would invert the product story, so the page ships single-mode.
   Radius lock: 2px on every surface, image, input and button.
   Accent lock: bone (#F2EFE9). The only chromatic values on the page are the
   Kelvin swatches, which render real colour temperatures as data.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-cyrillic.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --ink:        #0A0A0B;
  --ink-2:      #121214;
  --ink-3:      #191A1C;

  --bone:       #F2EFE9;
  --bone-70:    rgba(242, 239, 233, 0.70);
  --bone-52:    rgba(242, 239, 233, 0.52);
  --muted:      #97938B;

  --line:       rgba(242, 239, 233, 0.10);
  --line-2:     rgba(242, 239, 233, 0.20);

  --r:          2px;
  --maxw:       1360px;
  --gutter:     clamp(20px, 5vw, 64px);
  --sec-y:      clamp(72px, 11vw, 152px);

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:      68px;

  /* z-scale: 10 sticky nav, 20 nav overlay, 30 skip link */
  --z-nav:      10;
  --z-menu:     20;
  --z-skip:     30;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: 'Onest', 'Golos Text', system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: var(--z-skip);
  padding: 10px 16px; background: var(--bone); color: var(--ink);
  border-radius: var(--r); transform: translateY(-200%);
}
.skip:focus { transform: none; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; white-space: nowrap;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: 'Onest', sans-serif; font-size: 0.97rem; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .12s ease;
}
.btn--solid { background: var(--bone); color: #101012; }
.btn--solid:hover { background: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--bone); background: rgba(242, 239, 233, 0.07); }
.btn:active { transform: translateY(1px); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Navigation ---------- */
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  height: var(--nav-h);
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: 100%; width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 5px rgba(242, 239, 233, 0.09);
  /* Flex centring aligns the dot to the middle of the text line box, but the
     wordmark is all caps and uses no descender space, so its optical centre
     sits higher. Measured offset is 1.04px at 16.32px; kept in em so it holds
     if the brand size ever changes. */
  transform: translateY(-0.064em);
}
.brand__word {
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.03em; text-transform: uppercase;
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav__links a {
  position: relative; font-size: 0.93rem; color: var(--bone-70);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--bone); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }

.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
}
.burger span {
  display: block; width: 22px; height: 1px; background: var(--bone);
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); width: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(56px, 9vh, 96px);
  overflow: hidden;
}
/* Own stacking context so the clip layers below stay contained and cannot
   paint over the scrim or the hero copy. */
.hero__media { position: absolute; inset: 0; background: #08080A; z-index: 0; }
/* Both parts are stacked. The incoming clip fades in on the higher layer while
   the outgoing one keeps painting underneath, so the handover never exposes the
   background. The frames match at both seams, so the fade is only insurance
   against a slow first decode. */
.hero__clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0; z-index: 1;
  pointer-events: none;
  transition: opacity .2s linear;
}
.hero__clip.is-live { opacity: 1; z-index: 2; }
.hero__clip.is-standby { opacity: 1; z-index: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(110% 70% at 50% 68%, rgba(10, 10, 11, 0.46) 0%, rgba(10, 10, 11, 0.14) 58%, rgba(10, 10, 11, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 11, 0.52) 0%, rgba(10, 10, 11, 0.08) 30%, rgba(10, 10, 11, 0.42) 80%, var(--ink) 100%);
}

.hero__content {
  position: relative; z-index: 1;
  width: 100%; max-width: 700px;
  text-align: center;
}
.hero__eyebrow {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-size: clamp(0.7rem, 0.85vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.62);
}
.hero__title {
  font-size: clamp(2.25rem, 5.8vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero__lead {
  margin: clamp(14px, 1.8vw, 20px) auto 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: rgba(242, 239, 233, 0.82);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: clamp(22px, 2.8vw, 30px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.hero__unmute {
  position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%);
  padding: 10px 20px; border-radius: var(--r);
  background: rgba(10, 10, 11, 0.7); border: 1px solid var(--line-2);
  font-size: 0.88rem; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ---------- Section shell ---------- */
.section { padding-block: var(--sec-y); }
.section--flush { padding-bottom: calc(var(--sec-y) * 0.72); }

.head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 64px); }
.head--tight { margin-bottom: clamp(28px, 4vw, 44px); }
.head__title {
  font-size: clamp(1.85rem, 4vw, 3.1rem);
  line-height: 1.06;
}
.head__title--alone { margin-bottom: clamp(38px, 5vw, 64px); }
.head__lead {
  margin-top: 18px; max-width: 58ch;
  color: var(--muted); text-wrap: pretty;
}

/* ---------- Assortment showcase ----------
   Every photograph in this set shares one ratio, so the stage is a fixed
   16:9 frame and the list decides what stands on it. Nothing is recropped,
   and the light rooms read as lit plates against the dark page. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.showcase__list { display: flex; flex-direction: column; }

.room {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: clamp(14px, 1.55vw, 19px) 0;
  background: none; border: 0; border-top: 1px solid var(--line);
  text-align: left; cursor: pointer;
  color: var(--bone-70);
  transition: color .35s var(--ease);
}
.showcase__list .room:last-child { border-bottom: 1px solid var(--line); }
/* The active marker rides the top rule, so switching draws a line rather than
   moving a block around. */
.room::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px;
  background: var(--bone);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.room:hover, .room:focus-visible { color: var(--bone); }
.room.is-active { color: var(--bone); }
.room.is-active::before { transform: scaleX(1); }

.room__name {
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(1.1rem, 1.65vw, 1.4rem); letter-spacing: -0.025em;
  line-height: 1.15;
}
.room__note {
  font-size: 0.86rem; line-height: 1.4; color: var(--muted);
  transition: color .35s var(--ease);
}
.room.is-active .room__note { color: var(--bone-70); }

.showcase__stage {
  position: relative;
  aspect-ratio: 5504 / 3072;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-2);
}
.shot { position: absolute; inset: 0; margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot[hidden] { display: none; }
.shot figcaption { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Entry only: the incoming room settles in, the outgoing one is already gone.
     Communicates the state change without animating anything but transform. */
  .shot.is-active img { animation: shotIn .7s var(--ease) both; }
}
@keyframes shotIn {
  from { opacity: 0; transform: scale(1.025); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Catalog: product grid ----------
   Cards are 3:2 because every product frame is cut from the same 5504x3072
   photography at that ratio: the image fills the card exactly, so nothing is
   recropped by the browser. Light plates against the dark page, matching the
   showcase above. */
.goods {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.good__link { display: flex; flex-direction: column; height: 100%; }
.good__media {
  display: block; overflow: hidden;
  background: #EFEDE8;
  border: 1px solid var(--line); border-radius: var(--r);
  aspect-ratio: 3 / 2;
}
.good__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.good__link:hover .good__media img { transform: scale(1.035); }

.good__body { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; flex: 1; }
.good__name {
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.14rem); letter-spacing: -0.02em;
  background-image: linear-gradient(var(--bone), var(--bone));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .4s var(--ease);
  align-self: flex-start;
}
.good__link:hover .good__name { background-size: 100% 1px; }
.good__spec { font-size: 0.86rem; color: var(--muted); line-height: 1.5; flex: 1; }
.good__price {
  margin-top: 10px;
  font-family: 'Onest', sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

.goods__more {
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
  max-width: 68ch; color: var(--muted); font-size: 0.92rem;
}
.goods__more a {
  color: var(--bone);
  box-shadow: inset 0 -1px 0 var(--line-2);
  transition: box-shadow .3s var(--ease);
}
.goods__more a:hover { box-shadow: inset 0 -1px 0 var(--bone); }

/* ---------- Terms accordion ---------- */
.terms {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.terms__aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.terms__contact {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.terms__phone {
  font-family: 'Onest', sans-serif; font-size: 1.02rem;
  color: var(--bone-70); transition: color .3s var(--ease);
}
.terms__phone:hover { color: var(--bone); }

.term { border-top: 1px solid var(--line); }
.term:last-child { border-bottom: 1px solid var(--line); }
.term summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: clamp(20px, 2.4vw, 26px);
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem); letter-spacing: -0.02em;
  transition: color .3s var(--ease);
}
.term summary::-webkit-details-marker { display: none; }
.term summary:hover { color: #FFFFFF; }
/* Plus / minus drawn in CSS so no icon asset is needed for a control glyph. */
.term summary::after {
  content: ''; flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--bone-70), var(--bone-70)) center / 13px 1px no-repeat,
    linear-gradient(var(--bone-70), var(--bone-70)) center / 1px 13px no-repeat;
  transition: transform .35s var(--ease), background-size .35s var(--ease);
}
.term[open] summary::after {
  background:
    linear-gradient(var(--bone), var(--bone)) center / 13px 1px no-repeat,
    linear-gradient(var(--bone), var(--bone)) center / 1px 0 no-repeat;
  transform: rotate(180deg);
}
.term__body { padding-bottom: clamp(20px, 2.4vw, 28px); }
.term__body p { max-width: 62ch; color: var(--muted); text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .term[open] .term__body { animation: termIn .45s var(--ease); }
}
@keyframes termIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Kelvin scale ---------- */
.kelvin { position: relative; min-height: 330px; }
.kelvin__bar {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 3px; margin-top: -1.5px; border-radius: var(--r);
  background: linear-gradient(90deg, #FFB169 0%, #FFC58F 18%, #FFD9B2 48%, #FDF1E4 82%, #EEF3FA 100%);
}
.kelvin__stops { list-style: none; margin: 0; padding: 0; }
/* Stops hang off a single axis: odd ones above the bar, even ones below, so
   the scale reads as one line instead of three equal cards. */
.kelvin__stop {
  position: absolute; left: var(--pos);
  bottom: calc(50% + 36px);
  width: min(250px, 36vw);
  display: flex; flex-direction: column; gap: 2px;
  transform: translateX(-14px);
}
.kelvin__stop--down { bottom: auto; top: calc(50% + 36px); }
.kelvin__dot {
  position: absolute; left: 0; bottom: -43px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cct);
  box-shadow: 0 0 0 3px var(--ink), 0 0 26px 3px color-mix(in srgb, var(--cct) 60%, transparent);
}
.kelvin__stop--down .kelvin__dot { bottom: auto; top: -43px; }

.kelvin__value {
  font-family: 'Onest', sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); letter-spacing: -0.03em;
  line-height: 1.1;
}
.kelvin__name { font-size: 0.95rem; }
.kelvin__where { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

/* ---------- Service ----------
   Contained on the page grid. Three variants of the same parts are kept here
   while the composition is being chosen: v-grid, v-rail, v-inset. */
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
}
.service__head { grid-column: 1 / -1; margin-bottom: 0; }
.survey { grid-column: 1 / -1; margin: clamp(34px, 4.2vw, 56px) 0 clamp(36px, 4.4vw, 60px); }
.steps  { grid-column: 1 / -1; }

.survey__frame {
  overflow: hidden;
  border-radius: var(--r);
  transform-origin: center top;
  will-change: transform;
}
.survey__frame img { width: 100%; height: auto; }

/* A. Everything on the container width. */
.v-grid .survey { grid-column: 1 / -1; }

/* B. Narrow text rail on the left, photograph indented beside it. */
.v-rail .service__head { grid-column: 1 / 5; }
.v-rail .survey { grid-column: 5 / -1; margin-top: 6px; }

/* C. The photograph sits inside the scale, so the rule runs wider than the
   object standing on it. */
.v-inset .survey { grid-column: 2 / 12; }

/* Scroll-driven, so it runs on the compositor without a scroll listener.
   Browsers without support get the photograph at full size straight away. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .survey__frame {
      animation: surveyOpen linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 36%;
    }
  }
}
@keyframes surveyOpen {
  from { transform: scale(0.93); opacity: 0.5; }
  to   { transform: none; opacity: 1; }
}

/* The scale. One rule across the three steps, a tick where each one starts. */
.steps {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 52px);
}
.steps__row {
  position: relative;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}
.steps__row::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 1px; height: 11px;
  background: var(--bone-52);
  transition: height .45s var(--ease), background-color .45s var(--ease);
}
/* Same marker language as the assortment list: the rule draws in from the left. */
.steps__row::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px;
  background: var(--bone);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.steps__row:hover::before { transform: scaleX(1); }
.steps__row:hover::after { height: 18px; background: var(--bone); }

.steps__row dt {
  font-family: 'Onest', sans-serif; font-weight: 500;
  font-size: clamp(1.12rem, 1.55vw, 1.34rem); letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.steps__row dd { margin: 0; color: var(--muted); text-wrap: pretty; max-width: 40ch; }

/* ---------- Reviews ----------
   The average sits on its own line above the grid. Below it, six identical
   cells: same width, same height, footers on one baseline across the row. */
.score {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 10px clamp(16px, 2vw, 26px);
  margin-bottom: clamp(30px, 3.6vw, 46px);
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.score__value {
  font-family: 'Onest', sans-serif; font-weight: 600;
  font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 0.86;
  letter-spacing: -0.055em; font-variant-numeric: tabular-nums;
}
.score__of { font-size: 0.95rem; color: var(--muted); }
.score__meta {
  max-width: 42ch;
  font-size: 0.86rem; line-height: 1.5; color: var(--muted);
}

.rev {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 1fr rows, so every block is exactly the same height as the tallest one. */
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}

.rev__card {
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.8vw, 24px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.rev__card:hover { background: var(--ink-3); border-color: var(--line-2); }

.rev__card blockquote {
  margin: 0;
  font-size: clamp(0.9rem, 0.98vw, 0.95rem);
  line-height: 1.58; color: rgba(242, 239, 233, 0.88);
  text-wrap: pretty;
}

/* Pinned to the bottom so the footers sit on one baseline across the row. */
.rev__by {
  margin-top: auto;
  padding-top: clamp(16px, 1.7vw, 22px);
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 8px 16px;
}
/* Full width so it forces the line break, but only the first 26px are inked. */
.rev__by::before {
  content: ''; flex: 0 0 100%; height: 1px;
  background: linear-gradient(to right, var(--line-2) 0 24px, transparent 24px);
  margin-bottom: clamp(10px, 1.1vw, 13px);
}
.rev__who-block { display: flex; flex-direction: column; gap: 3px; }
.rev__name { font-size: 0.88rem; }
.rev__ctx { font-size: 0.79rem; color: var(--muted); }
/* Per review rating, kept typographic: no bars, no stars. */
.rev__rate {
  font-family: 'Onest', sans-serif; font-size: 0.8rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------- Request ---------- */
.request { position: relative; padding-block: clamp(80px, 12vw, 148px); overflow: hidden; }
.request__bg { position: absolute; inset: 0; }
.request__bg img { width: 100%; height: 100%; object-fit: cover; }
.request__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.86) 44%, rgba(10, 10, 11, 0.62) 100%);
}
.request__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}

.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 0.9rem; color: rgba(242, 239, 233, 0.88); }
.field__input {
  height: 52px; padding: 0 16px;
  background: rgba(10, 10, 11, 0.72);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field__input::placeholder { color: rgba(242, 239, 233, 0.58); }
.field__input:hover { border-color: rgba(242, 239, 233, 0.32); }
.field__input:focus { outline: none; border-color: var(--bone); background: rgba(10, 10, 11, 0.9); }
.field__input.is-invalid { border-color: #F0A08A; }
.field__help { font-size: 0.83rem; color: rgba(242, 239, 233, 0.62); }
.field__error { font-size: 0.83rem; color: #F0A08A; }
.form__done {
  padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(10, 10, 11, 0.72);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__tag { margin-top: 16px; max-width: 30ch; color: var(--muted); font-size: 0.9rem; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h3 {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.footer__col a, .footer__col p { font-size: 0.92rem; color: var(--bone-70); margin: 0; }
.footer__col a { transition: color .3s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--bone); }
.footer__col--contacts a:first-of-type { font-size: 1.02rem; color: var(--bone); }

.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 22px 28px;
  border-top: 1px solid var(--line);
  font-size: 0.83rem; color: var(--muted);
}
.footer__legal a:hover { color: var(--bone); }

/* ---------- Motion (MOTION_INTENSITY 6) ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-stagger] { opacity: 0; transform: translateY(18px); }
.hero.is-ready [data-stagger] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero.is-ready [data-stagger="1"] { transition-delay: .12s; }
.hero.is-ready [data-stagger="2"] { transition-delay: .26s; }
.hero.is-ready [data-stagger="3"] { transition-delay: .40s; }
.hero.is-ready [data-stagger="4"] { transition-delay: .54s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --nav-h: 62px; }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto; z-index: var(--z-menu);
    flex-direction: column; align-items: flex-start; gap: 0;
    margin: 0; padding: 8px var(--gutter) 24px;
    background: rgba(10, 10, 11, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { width: 100%; padding-block: 15px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav__links a::after { display: none; }
  .nav__cta { margin-left: auto; }
  .burger { display: flex; }

  /* One column of parts on tablet: rail and inset collapse to full width and
     the scale becomes a stack, since three columns of body text get too narrow. */
  .v-rail .service__head, .v-rail .survey,
  .v-inset .survey { grid-column: 1 / -1; }
  .v-rail .survey { margin-top: clamp(30px, 4vw, 48px); }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps__row { padding-block: clamp(18px, 3vw, 26px); }
  .steps__row:last-child { border-bottom: 1px solid var(--line); }

  .goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms { grid-template-columns: 1fr; }
  .terms__aside { position: static; }
  .rev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request__inner { grid-template-columns: 1fr; }
  .form { max-width: 460px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* The stage becomes a swipeable row of the same untouched frames. */
  .showcase { grid-template-columns: 1fr; gap: 22px; }
  .showcase__list { display: none; }
  .showcase__stage {
    aspect-ratio: auto; border: 0; border-radius: 0; background: none;
    overflow: visible;
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .showcase__stage::-webkit-scrollbar { display: none; }
  .shot {
    position: static;
    flex: 0 0 min(78%, 560px);
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 12px;
  }
  .shot[hidden] { display: flex; }
  .shot img {
    aspect-ratio: 5504 / 3072; height: auto;
    border: 1px solid var(--line); border-radius: var(--r);
  }
  .shot figcaption { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
  .shot figcaption b {
    display: block; font-family: 'Onest', sans-serif; font-weight: 500;
    font-size: 1.02rem; letter-spacing: -0.02em; color: var(--bone);
  }
  .shot.is-active img { animation: none; }

  .goods { grid-template-columns: 1fr; }
  /* One per row, and rows size to content: equal heights on a phone would
     only add empty space. */
  .rev { grid-template-columns: 1fr; grid-auto-rows: auto; }
  /* A phone-width photo is already small; a deep entry scale would make it
     look like a thumbnail on the way in. */
  @keyframes surveyOpen {
    from { transform: scale(0.95); opacity: 0.7; }
    to   { transform: none; opacity: 1; }
  }

  /* Kelvin scale becomes a vertical list below the tablet breakpoint */
  .kelvin { min-height: 0; }
  .kelvin__bar { display: none; }
  .kelvin__stops { display: grid; gap: 28px; }
  .kelvin__stop,
  .kelvin__stop--down {
    position: relative; inset: auto;
    width: 100%; transform: none;
    padding-left: 30px;
  }
  .kelvin__stop .kelvin__dot,
  .kelvin__stop--down .kelvin__dot { top: 9px; bottom: auto; left: 0; }
}

@media (max-width: 620px) {
  .shot { flex: 0 0 88%; }

  .hero { padding-bottom: 64px; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* The same "Подобрать свет" action is already the hero's secondary button,
     so the nav keeps only the brand and the menu on small screens. */
  .nav__cta { display: none; }
  .burger { margin-left: auto; margin-right: -10px; }



  .footer__inner { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], [data-stagger] { opacity: 1 !important; transform: none !important; }
  .cat__media img { transform: none !important; }
}

/* ---------- Reduced transparency fallback ---------- */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck,
  .nav__links,
  .hero__unmute {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(10, 10, 11, 0.96);
  }
}