@font-face {
  font-family: 'Fixel Display';
  src: url('/assets/fonts/FixelDisplay-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/assets/fonts/FixelDisplay-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Text';
  src: url('/assets/fonts/FixelText-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Text';
  src: url('/assets/fonts/FixelText-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #10130f;
  --forest: #273226;
  --milk: #f2efe5;
  --mist: #d8d7ca;
  --olive: #667058;
  --skin: #b99b82;
  --brass: #b79a58;
  --line: rgba(183, 154, 88, .28);
  --ease: cubic-bezier(.22, .72, .2, 1);
  --display: 'Fixel Display', system-ui, sans-serif;
  --text: 'Fixel Text', system-ui, sans-serif;
}

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

html {
  background: var(--ink);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--milk);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button,
select,
a,
summary {
  font: inherit;
}

button,
summary {
  color: inherit;
}

button {
  border: 0;
}

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

figure,
h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.koi-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 68px);
  border-bottom: 1px solid rgba(183, 154, 88, .48);
  color: var(--milk);
}

.koi-wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.koi-wordmark-mark {
  display: block;
  width: clamp(78px, 7vw, 102px);
  aspect-ratio: 162.9 / 96.41;
  background: var(--brass);
  -webkit-mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
  mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
}

.header-menu {
  position: relative;
}

.menu-button {
  display: none;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.menu-button::-webkit-details-marker {
  display: none;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 44px);
  font-size: 13px;
}

.header-nav a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.header-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.header-nav a:hover::after,
.header-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-book {
  margin-left: 12px;
}

.hero-stage {
  position: relative;
  min-height: clamp(720px, 100svh, 980px);
  overflow: hidden;
  background: var(--ink);
  color: var(--milk);
  isolation: isolate;
}

.hero-media,
.hero-layer,
.hero-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-layer {
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 900ms var(--ease), transform 1400ms var(--ease);
}

.hero-layer[data-active='true'] {
  z-index: 1;
  opacity: 1;
  transform: scale(1.025);
}

.hero-layer video {
  object-fit: cover;
}

[data-mobile-hero-video] {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

[data-mobile-hero-video][data-mobile-active='true'] {
  z-index: 1;
  opacity: 1;
}

[data-variant='quiet-catalog'] [data-hero-state='space'] video {
  object-position: 50% 44%;
}

[data-variant='quiet-catalog'] [data-hero-state='four-hands'] video {
  object-position: 50% 48%;
}

.hero-copy {
  position: absolute;
  z-index: 4;
  bottom: clamp(128px, 16vh, 172px);
  left: clamp(24px, 4vw, 68px);
  width: min(720px, calc(100% - 330px));
  padding: clamp(22px, 3vw, 38px);
  background: rgba(16, 19, 15, .68);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 680px;
  margin-top: 19px;
  font-family: var(--display);
  font-size: clamp(52px, 6.3vw, 92px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero-support {
  max-width: 545px;
  margin-top: 25px;
  color: rgba(242, 239, 229, .84);
  font-size: clamp(15px, 1.3vw, 18px);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 30px;
}

.button-light,
.text-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.button-light {
  padding: 0 22px;
  background: var(--milk);
  color: var(--ink);
}

.text-action {
  border-bottom: 1px solid currentColor;
  border-bottom-color: var(--brass);
}

.hero-controls {
  position: absolute;
  z-index: 5;
  right: clamp(24px, 4vw, 68px);
  bottom: clamp(128px, 16vh, 172px);
  display: grid;
  width: min(220px, 20vw);
  padding: 10px 14px;
  border-top: 1px solid rgba(242, 239, 229, .38);
  background: rgba(16, 19, 15, .88);
}

.hero-controls button {
  display: grid;
  min-height: 59px;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid rgba(242, 239, 229, .38);
  background: transparent;
  color: rgba(242, 239, 229, .84);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  transition: color 240ms var(--ease), padding-left 240ms var(--ease);
}

.hero-controls button span {
  font-size: 9px;
}

.hero-controls button[data-active='true'] {
  padding-left: 10px;
  color: var(--milk);
}

.hero-controls button:focus-visible {
  outline: 2px solid var(--milk);
  outline-offset: -4px;
}

.workspace {
  display: grid;
  min-height: 820px;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2.28fr);
  background: var(--mist);
}

.workspace-nav {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(56px, 7vw, 108px) clamp(24px, 3.5vw, 60px);
  border-right: 1px solid var(--line);
  background: var(--olive);
  color: var(--milk);
}

.workspace-nav button {
  display: grid;
  min-height: 67px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 23px);
  text-align: left;
}

.workspace-nav button:first-child {
  border-top: 1px solid var(--line);
}

.workspace-nav button span {
  font-family: var(--text);
  font-size: 9px;
  opacity: .48;
}

.workspace-nav button::after {
  justify-self: end;
  color: var(--brass);
  content: '—';
  opacity: 0;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  transform: translateX(-8px);
}

.workspace-nav button[data-active='true']::after {
  opacity: 1;
  transform: translateX(0);
}

.workspace-stage {
  min-width: 0;
  background: var(--mist);
}

.workspace-panel {
  min-height: 820px;
  padding: clamp(56px, 7vw, 108px) clamp(24px, 5vw, 82px);
  background: var(--mist);
}

.workspace-panel:focus {
  outline: none;
}

.workspace-panel:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -8px;
}

.panel-heading {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
  align-items: end;
  gap: 24px;
  padding-bottom: clamp(30px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  max-width: 740px;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.types-panel .panel-heading .eyebrow {
  color: var(--brass);
}

.massages-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, .96fr);
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(32px, 4vw, 58px);
}

.service-list {
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  width: 100%;
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 20px;
  padding: 13px clamp(12px, 1.25vw, 20px);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.service-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.service-main strong {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.service-main small,
.service-duration {
  color: rgba(16, 19, 15, .64);
  font-size: 12px;
}

.row-arrow {
  color: var(--brass);
  font-size: 18px;
  transition: transform 220ms var(--ease);
}

.service-row:hover .row-arrow,
.service-row:focus-visible .row-arrow {
  transform: translate(3px, -3px);
}

.panel-media,
.master-media,
.location-media,
.drawer-media {
  position: relative;
  overflow: hidden;
  background: var(--forest);
}

.panel-media video,
.panel-media img,
.master-media video,
.master-media img,
.location-media video,
.drawer-media video,
.drawer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-media-tall {
  min-height: 488px;
}

[data-variant='quiet-catalog'] .massages-panel .panel-media-tall img {
  object-position: 50% 72%;
}

[data-variant='quiet-catalog'] .massages-panel .panel-media-tall {
  width: min(100%, 680px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-self: end;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

@media (max-width: 1280px) {
  .massages-layout {
    grid-template-columns: 1fr;
  }

  [data-variant='quiet-catalog'] .massages-panel .panel-media-tall {
    /* 64px of bleed, not 96. The circle is centred on a column that sits to the right of the
       page's own centre, so a bleed wider than the gap on that side pushes the page sideways:
       at 768px it stuck out by 10px and the whole site scrolled horizontally. This band runs
       from 761px up to 1280px, and below about 960px the min() no longer clamps to 680px, so
       the bleed is what decides the width. Above that nothing changes - the circle is 680px
       either way. */
    width: min(calc(100% + 64px), 680px);
    justify-self: center;
  }
}

.panel-media figcaption,
.master-media figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 8px 10px;
  background: rgba(16, 19, 15, .72);
  color: var(--milk);
  font-size: 10px;
}

[data-media-error='true']::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: var(--forest);
  color: var(--milk);
  content: 'Медіа KOI буде оновлено';
  font-size: 12px;
  text-align: center;
}

/* Розділові лінії малює сама картка, а не залитий фон під сіткою. Заливка була видна в
   порожніх клітинках останнього ряду — у студіях по 5, 7 і 1 майстру при трьох колонках таких
   клітинок п'ять, і кожна читалася як порожня картка. */
.master-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(32px, 4vw, 58px);
}

/* Майстри згруповані по студіях. Заголовок групи тримається того самого набірного ряду, що
   й підзаголовки розділів, щоб група читалася як частина сторінки, а не як окремий банер. */
/* Опис майстра в його картці. Той самий набірний ряд, що й у характеристик масажу поруч,
   тільки списком — рядки короткі й читаються швидше, ніж суцільний абзац. */
.master-bio {
  margin-top: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 12px;
  list-style: none;
}

.master-bio li {
  position: relative;
  padding-left: 20px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
}

.master-bio li::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

.master-studio + .master-studio {
  margin-top: clamp(38px, 4.5vw, 68px);
}

.master-studio-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.master-studio-head h3 {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: -.02em;
}

.master-studio-head p {
  color: rgba(16, 19, 15, .58);
  font-size: 12px;
  letter-spacing: .04em;
}

/* Картка з описом — це кнопка. Скидаємо все, що браузер додає кнопці, щоб вона нічим не
   відрізнялася від сусідньої картки без опису. */
.master-slot {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  /* Кільце в 1px замість заливки під сіткою: у проміжку сусідні кільця стають однією лінією,
     а там, де картки немає, не малюється нічого. */
  box-shadow: 0 0 0 1px var(--line);
  background: var(--mist);
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
}

button.master-slot {
  cursor: pointer;
}

.master-media {
  height: clamp(310px, 36vw, 510px);
}

.master-slot > div {
  padding: 22px clamp(12px, 1.25vw, 20px) 18px;
}

.master-slot h4 {
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.master-slot p {
  margin-top: 8px;
  font-size: 13px;
}

.master-slot small {
  display: inline-block;
  margin-top: 2px;
  color: rgba(16, 19, 15, .58);
  font-size: 11px;
}

.needs-list {
  margin-top: clamp(32px, 4vw, 58px);
  border-top: 1px solid var(--line);
}

.needs-list a {
  display: grid;
  min-height: 102px;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .3fr) 24px;
  align-items: center;
  gap: 24px;
  padding-right: clamp(12px, 1.25vw, 20px);
  padding-left: clamp(12px, 1.25vw, 20px);
  border-bottom: 1px solid var(--line);
}

.needs-list span {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 40px);
  letter-spacing: -.035em;
}

.needs-list small {
  color: rgba(16, 19, 15, .58);
  font-size: 12px;
}

.needs-list b {
  color: var(--brass);
  font-size: 18px;
  font-weight: 400;
  transition: transform 220ms var(--ease);
}

.needs-list a:hover b,
.needs-list a:focus-visible b {
  transform: translate(3px, -3px);
}

.location-atmosphere {
  position: relative;
  height: clamp(360px, 38vw, 540px);
  margin-top: clamp(32px, 4vw, 58px);
  overflow: hidden;
  background: var(--forest);
}

.location-atmosphere::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(16, 19, 15, .58));
  content: '';
  pointer-events: none;
}

.location-atmosphere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 69%;
}

.location-atmosphere figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 2.5vw, 36px);
  bottom: clamp(18px, 2.5vw, 30px);
  left: clamp(20px, 2.5vw, 36px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: rgba(242, 239, 229, .78);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.location-atmosphere figcaption span:first-child {
  color: var(--brass);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -.03em;
}

/* Набранное слово «KOI» заменено самим знаком студии.
   Файл логотипа — лежачий блок: сверху «KOI» с рыбой, снизу подпись «massage studio».
   В такой мелочи подпись не читается и только грязнит, поэтому режем её маской: ширина маски
   равна ширине элемента, а высота элемента задана пропорцией верхней части — 162.9 / 69.
   Ниже линии y=69 в файле начинается подпись; замерено по фигурам внутри самого SVG.
   Текст остаётся в разметке для читалок, просто не рисуется. */
.hero-frame-label span:first-child,
.location-atmosphere figcaption span:first-child {
  display: block;
  aspect-ratio: 162.9 / 69;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url('/assets/koi-logo-white.svg') top center / 100% auto no-repeat;
  mask: url('/assets/koi-logo-white.svg') top center / 100% auto no-repeat;
}

.hero-frame-label span:first-child { width: 38px; }
.location-atmosphere figcaption span:first-child { width: 46px; }

.location-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.location-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: transparent;
}

.location-card:last-child {
  border-right: 0;
}

.location-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 272px;
  padding: clamp(24px, 2.4vw, 34px) clamp(18px, 2.2vw, 32px) 24px;
}

.location-copy h3 {
  min-height: 3em;
  margin-top: 15px;
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 27px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.location-copy > p:not(.eyebrow) {
  margin-top: 9px;
  color: rgba(16, 19, 15, .58);
  font-size: 12px;
}

.location-copy button {
  min-height: 48px;
  margin-top: auto;
  padding: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}

.booking-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr);
  align-items: start;
  gap: clamp(36px, 7vw, 112px);
}

.booking-heading {
  display: block;
  padding: 0;
  border: 0;
}

.booking-heading h2 {
  margin-top: 20px;
}

.booking-form {
  border-top: 1px solid var(--line);
}

.booking-form > label {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.booking-form label > span,
.booking-summary > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.booking-form select {
  width: 100%;
  min-height: 50px;
  padding: 0 40px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(17px, 1.8vw, 25px);
}

.koi-select {
  position: relative;
  min-width: 0;
}

.booking-form .koi-native-select {
  position: absolute;
  width: 1px;
  min-height: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.koi-select-trigger {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 1.8vw, 25px);
  text-align: left;
}

.koi-select-arrow {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transition: transform 220ms var(--ease);
}

.koi-select-arrow::before,
.koi-select-arrow::after {
  position: absolute;
  top: 8px;
  width: 10px;
  height: 1px;
  background: var(--brass);
  content: '';
}

.koi-select-arrow::before {
  left: 1px;
  transform: rotate(40deg);
}

.koi-select-arrow::after {
  right: 1px;
  transform: rotate(-40deg);
}

.koi-select[data-open='true'] .koi-select-arrow {
  transform: rotate(180deg);
}

.koi-select-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid rgba(183, 154, 88, .62);
  background: var(--milk);
  box-shadow: 0 18px 46px rgba(16, 19, 15, .16);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.koi-select-popover[data-active='true'] {
  opacity: 1;
  transform: translateY(0);
}

.koi-select-option {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.25;
  text-align: left;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.koi-select-option:last-child {
  border-bottom: 0;
}

.koi-select-option[aria-selected='true'] {
  background: var(--brass);
}

.koi-select-option:not([aria-selected='true']):hover,
.koi-select-option:not([aria-selected='true']):focus-visible {
  background: var(--mist);
}

.koi-select-trigger:focus-visible,
.koi-select-option:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.booking-summary {
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.booking-summary p {
  margin-top: 11px;
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: -.03em;
}

.booking-form > p {
  margin-top: 18px;
  color: rgba(16, 19, 15, .58);
  font-size: 12px;
}

.booking-handoff {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(32px, 5vw, 72px);
}

.booking-form > .booking-intro {
  max-width: 620px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.booking-form > .booking-note {
  max-width: 520px;
  margin-top: 22px;
  color: rgba(16, 19, 15, .64);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.55;
}

.booking-handoff .booking-submit {
  max-width: 520px;
  margin-top: 38px;
}

.booking-submit,
.drawer-book {
  width: 100%;
  min-height: 58px;
  margin-top: 32px;
  padding: 0 22px;
  background: var(--brass);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.booking-fallback {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  font-size: 13px;
}

.booking-fallback p + p {
  margin-top: 6px;
}

.booking-fallback a {
  border-bottom: 1px solid currentColor;
}

.service-drawer {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  padding-left: 12vw;
  /* Dimmed to .38 from .68. The sheet already separates itself from the page with its own
     background and shadow, so the scrim does not have to do that work alone - and at .68 the
     section tabs down the left side (Масажі / Майстри / Види / Локації / Запис) went too dark to
     read while the drawer was open, which is exactly where the reader looks next. On phones this
     is moot: there the page behind is hidden outright. */
  background: rgba(16, 19, 15, .38);
}

.drawer-sheet {
  position: relative;
  display: grid;
  width: min(760px, 88vw);
  min-height: 100%;
  /* min-content, а не auto, для строки с видео — и обычный 1fr для текста.
     Было auto 1fr: строка с текстом требовала своей высоты и отбирала её у строки выше, та
     сжималась с 520 до 307px, а круг с жёстким соотношением сторон не сжимался и наезжал на
     заголовок. Стало minmax(0,1fr): круг выжил, но текст перестал помещаться в свою строку и
     вылезал за молочный фон на зелёный лист — до 277px наружу.
     min-content закрепляет за кругом его собственную высоту, 1fr отдаёт тексту всё остальное,
     а если содержимого больше, чем помещается, прокручивается сам лист — у него overflow-y:auto.
     Проверено на девяти размерах в двух языках: круг круглый, текст всегда на своём фоне. */
  grid-template-rows: min-content 1fr;
  overflow-y: auto;
  background: var(--forest);
  box-shadow: -18px 0 40px rgba(16, 19, 15, .16);
}

.drawer-media {
  z-index: 1;
  width: min(520px, calc(100% - 64px));
  aspect-ratio: 1;
  justify-self: center;
  margin: 32px auto -32px;
  border-radius: 50%;
  box-shadow: 0 24px 70px rgba(16, 19, 15, .24);
}

.drawer-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  cursor: pointer;
  font-size: 27px;
  line-height: 1;
}

.drawer-content {
  position: relative;
  padding: calc(clamp(30px, 5vw, 72px) + 32px) clamp(30px, 5vw, 72px) clamp(30px, 5vw, 72px);
  background: var(--milk);
}

.drawer-content h2 {
  margin-top: 15px;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1;
}

.drawer-need {
  max-width: 500px;
  margin-top: 18px;
  color: rgba(16, 19, 15, .67);
}

.service-meta {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.service-meta div {
  display: grid;
  grid-template-columns: minmax(115px, .45fr) 1fr;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.service-meta dt {
  color: rgba(16, 19, 15, .56);
  font-size: 11px;
}

.service-meta dd {
  font-size: 13px;
}

.compact-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 28px clamp(26px, 5vw, 80px);
  padding: 38px clamp(24px, 4vw, 68px) 32px;
  background: var(--forest);
  color: var(--milk);
}

.footer-brand {
  min-width: 0;
}

.compact-footer-logo {
  display: block;
  width: 88px;
  aspect-ratio: 162.9 / 96.41;
  background: var(--brass);
  -webkit-mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
  mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
}

.footer-brand > span:last-child {
  display: block;
  margin-top: 5px;
  color: rgba(242, 239, 229, .65);
  font-size: 11px;
}

/* A filled button rather than brass text on a dark ground, where it was the quietest thing in
   the footer and read as a caption. It is the last chance to book on the page, so it gets the
   same treatment as the button inside the booking section. */
.footer-book {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  padding: 0 22px;
  border: 0;
  background: var(--brass);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* On the booking section itself the footer button would sit a few centimetres under an identical
   one, so it stands down there and only there. Driven by the attribute openPanel() writes on
   <html>, which is rewritten on every switch - flipping between sections cannot desync it. */
html[data-active-panel='booking'] .footer-book {
  display: none;
}

.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(190, 161, 91, .34);
}

.footer-meta a,
.footer-meta .footer-link {
  border: 0;
  padding: 0;
  color: rgba(242, 239, 229, .68);
  font-size: 12px;
}

.footer-meta a:last-child {
  margin-left: auto;
  color: var(--brass);
  font-weight: 600;
  letter-spacing: .08em;
}

.proxy-note {
  padding: 14px clamp(24px, 4vw, 68px);
  background: var(--ink);
  color: rgba(242, 239, 229, .66);
  font-size: 9px;
  letter-spacing: .02em;
}

@media (max-width: 1060px) {
  .massages-layout {
    grid-template-columns: 1fr;
  }

  .panel-media-tall {
    min-height: 420px;
  }

  .master-list {
    grid-template-columns: 1fr 1fr;
  }

  .location-list {
    grid-template-columns: 1fr;
  }

  .location-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .location-card:last-child {
    border-bottom: 0;
  }

  .location-copy {
    min-height: 0;
  }

  .booking-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html {
    scroll-behavior: auto;
  }

  .koi-header {
    position: absolute;
    min-height: 70px;
    padding: 13px 18px;
  }

  .koi-wordmark-mark {
    width: 74px;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: 12px;
  }

  .menu-button::after {
    margin-left: 8px;
    content: '+';
  }

  .menu-disclosure[open] .menu-button::after {
    content: '−';
  }

  .header-nav {
    position: fixed;
    z-index: 30;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: 100%;
    min-height: calc(100svh - 70px);
    grid-auto-rows: minmax(70px, auto);
    align-content: start;
    padding: clamp(34px, 7vh, 62px) 28px calc(28px + env(safe-area-inset-bottom));
    background: rgba(16, 19, 15, .54);
    -webkit-backdrop-filter: blur(18px) saturate(.82);
    backdrop-filter: blur(18px) saturate(.82);
    color: var(--milk);
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms;
    visibility: hidden;
  }

  .menu-disclosure[open] + .header-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .header-nav a {
    min-height: 70px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: clamp(27px, 7.4vw, 34px);
    font-weight: 400;
    letter-spacing: -.035em;
  }

  .header-nav a::after {
    display: none;
  }

  .header-book {
    width: 100%;
    min-height: 58px !important;
    justify-content: space-between;
    margin: 24px 0 0;
    padding: 0 18px;
    border-bottom: 0 !important;
    background: var(--brass);
    color: var(--ink);
    font-family: var(--text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
  }

  .hero-stage {
    min-height: 86svh;
  }

  .hero-copy {
    right: 18px;
    bottom: 84px;
    left: 18px;
    width: auto;
    padding: 19px 18px 20px;
  }

  .hero-copy h1 {
    margin-top: 13px;
    font-size: clamp(39px, 12.4vw, 52px);
    line-height: .98;
  }

  .hero-support {
    margin-top: 17px;
    font-size: 13px;
  }

  .hero-actions {
    gap: 20px;
    margin-top: 21px;
  }

  .button-light,
  .text-action {
    min-height: 44px;
    font-size: 12px;
  }

  .button-light {
    padding: 0 15px;
  }

  .hero-controls {
    right: 18px;
    bottom: 19px;
    left: 18px;
    display: grid;
    width: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(242, 239, 229, .42);
  }

  .hero-controls button {
    min-height: 47px;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 7px 8px 4px;
    border-right: 1px solid rgba(242, 239, 229, .26);
    border-bottom: 0;
    font-size: 9px;
  }

  .hero-controls button:last-child {
    border-right: 0;
  }

  .hero-controls button[data-active='true'] {
    padding-left: 8px;
  }

  .workspace {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-nav {
    position: sticky;
    z-index: 12;
    top: 0;
    display: flex;
    max-width: 100vw;
    min-height: 64px;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    padding: 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--olive);
    scrollbar-width: none;
  }

  .workspace-nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-nav button {
    min-width: max-content;
    min-height: 63px;
    grid-template-columns: auto 1fr;
    gap: 7px;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid var(--line);
    font-family: var(--text);
    font-size: 12px;
  }

  .workspace-nav button:first-child {
    padding-left: 0;
    border-top: 0;
  }

  .workspace-nav button::after {
    display: none;
  }

  .workspace-panel {
    min-height: 0;
    padding: 42px 18px 62px;
  }

  .panel-heading {
    display: block;
    padding-bottom: 28px;
  }

  .panel-heading h2 {
    margin-top: 14px;
    font-size: clamp(34px, 10vw, 46px);
  }

  .massages-layout {
    gap: 28px;
    padding-top: 28px;
  }

  .service-row {
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 10px;
  }

  .service-main strong {
    font-size: 20px;
  }

  .service-main small {
    max-width: 210px;
    font-size: 10px;
  }

  .service-duration {
    font-size: 10px;
  }

  .panel-media-tall {
    min-height: 430px;
  }

  .master-list {
    grid-template-columns: 1fr;
    gap: 34px;
    background: transparent;
  }

  .master-media {
    height: 420px;
  }

  .location-atmosphere {
    height: clamp(340px, 100vw, 460px);
    margin-top: 28px;
  }

  .location-atmosphere img {
    object-position: 50% 71%;
  }

  .location-list {
    gap: 0;
    background: transparent;
  }

  .location-copy {
    padding: 24px 0 22px;
  }

  .location-copy h3 {
    min-height: 0;
  }

  .needs-list a {
    min-height: 102px;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 12px;
  }

  .needs-list span {
    font-size: 23px;
  }

  .needs-list small {
    display: none;
  }

  .booking-panel {
    gap: 0;
  }

  .booking-handoff {
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(48px, 13vw, 56px);
  }

  .booking-form select,
  .koi-select-trigger {
    font-size: 17px;
  }

  .koi-select-popover {
    top: calc(100% + 8px);
  }

  .koi-select-option {
    min-height: 52px;
    padding: 14px 15px;
    font-size: 15px;
  }

  .service-drawer {
    align-items: flex-end;
    padding: 8vh 0 0;
  }

  body[data-service-open='true'] > .koi-header,
  body[data-service-open='true'] > main,
  body[data-service-open='true'] > .compact-footer {
    visibility: hidden;
  }

  .drawer-sheet {
    width: 100%;
    min-height: 92vh;
    max-height: 92vh;
    /* Same reason as the desktop rule above, and it bites harder here: the sheet is capped at
       92vh, so there is even less room for the text row to take from the circle. */
    grid-template-rows: min-content 1fr;
    border-radius: 0;
    box-shadow: none;
  }

  .drawer-media {
    width: min(410px, calc(100vw - 30px));
    margin: 20px auto -22px;
    box-shadow: none;
  }

  .drawer-close {
    position: fixed;
    z-index: 70;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 12px;
  }

  .drawer-content {
    padding: 52px 18px calc(34px + env(safe-area-inset-bottom));
  }

  .drawer-content h2 {
    font-size: clamp(39px, 12vw, 52px);
  }

  .compact-footer {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px 16px;
    padding: 30px 24px calc(26px + env(safe-area-inset-bottom));
  }

  .footer-meta {
    gap: 12px 18px;
    padding-top: 16px;
  }

  .footer-meta a:last-child {
    margin-left: 0;
  }

  .proxy-note {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }
}

[data-variant='quiet-catalog'] .header-nav a::after {
  background: var(--brass);
}

[data-variant='quiet-catalog'] .button-light {
  background: var(--brass);
  color: var(--ink);
}

[data-variant='quiet-catalog'] .hero-frame-label span:first-child {
  color: var(--brass);
}

/* Variant B: living-menu */
[data-variant='living-menu'] .hero-stage {
  min-height: clamp(720px, 100svh, 980px);
}

[data-variant='living-menu'] .hero-media {
  display: flex;
  gap: 2px;
}

[data-variant='living-menu'] .hero-slice {
  position: relative;
  min-width: 0;
  flex: .68;
  overflow: hidden;
  background: var(--forest);
  filter: none;
  transition: flex 900ms var(--ease), filter 900ms var(--ease);
}

[data-variant='living-menu'] .hero-slice[data-active='true'] {
  flex: 2.64;
}

[data-variant='living-menu'] .hero-slice:not([data-active='true']) {
  filter: saturate(.62) brightness(.68);
}

[data-variant='living-menu'] .hero-slice::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(16, 19, 15, .16);
  content: '';
  pointer-events: none;
}

[data-variant='living-menu'] .hero-slice > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease);
}

[data-variant='living-menu'] .hero-slice[data-active='true'] > video {
  transform: scale(1.025);
}

[data-variant='living-menu'] .hero-slice-controls {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

[data-variant='living-menu'] .hero-slice-control {
  position: relative;
  flex: .68;
  align-self: end;
  margin: 0 clamp(16px, 2vw, 30px) 24px;
  display: grid;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid rgba(242, 239, 229, .58);
  background: rgba(16, 19, 15, .72);
  color: var(--milk);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  transition: flex 900ms var(--ease);
}

[data-variant='living-menu'] .hero-slice-control[data-active='true'] {
  flex: 2.64;
}

[data-variant='living-menu'] .hero-slice-control span {
  font-size: 9px;
  opacity: .72;
}

[data-variant='living-menu'] .hero-slice-control strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-variant='living-menu'] .hero-slice-control i {
  font-style: normal;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

[data-variant='living-menu'] .hero-slice-control[data-active='true'] i {
  opacity: 1;
  transform: translate(0, 0);
}

[data-variant='living-menu'] .hero-slice-control:focus-visible {
  outline: 2px solid var(--milk);
  outline-offset: 4px;
}

[data-variant='living-menu'] .hero-copy {
  bottom: 108px;
  left: clamp(24px, 4vw, 68px);
  width: min(660px, 55vw);
  padding: clamp(20px, 2.5vw, 32px);
  background: rgba(16, 19, 15, .78);
  transition: left 900ms var(--ease), opacity 420ms var(--ease), transform 900ms var(--ease);
}

[data-variant='living-menu'] .mobile-header-book {
  display: none;
}

[data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(2)[data-active='true']) .hero-copy {
  left: calc(17% + clamp(24px, 3vw, 50px));
}

[data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(3)[data-active='true']) .hero-copy {
  left: calc(34% + clamp(24px, 3vw, 50px));
}

[data-variant='living-menu'] .hero-copy h1 {
  font-size: clamp(48px, 5.6vw, 82px);
}

[data-variant='living-menu'] .hero-support {
  max-width: 500px;
}

[data-variant='living-menu'] .workspace {
  display: block;
  min-height: 0;
  background: var(--milk);
}

[data-variant='living-menu'] .workspace-nav {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  min-height: 76px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 clamp(24px, 4vw, 68px);
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: var(--milk);
}

[data-variant='living-menu'] .workspace-nav button {
  min-height: 75px;
  grid-template-columns: 34px 1fr;
  padding: 0 clamp(12px, 2vw, 28px);
  border: 0;
  border-right: 1px solid var(--line);
  font-size: clamp(15px, 1.35vw, 20px);
}

[data-variant='living-menu'] .workspace-nav button:first-child {
  border-top: 0;
  border-left: 1px solid var(--line);
}

[data-variant='living-menu'] .workspace-nav button::after {
  content: '↘';
}

[data-variant='living-menu'] .workspace-nav button[data-active='true'] {
  background: var(--forest);
  color: var(--milk);
}

[data-variant='living-menu'] .workspace-panel {
  min-height: 780px;
  padding: clamp(54px, 6vw, 88px) clamp(24px, 5vw, 78px) clamp(72px, 8vw, 120px);
  opacity: 0;
  clip-path: inset(0 0 12% 0);
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), clip-path 720ms var(--ease), transform 720ms var(--ease);
}

[data-variant='living-menu'] .workspace-panel[data-active='true'] {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

@starting-style {
  [data-variant='living-menu'] .workspace-panel[data-active='true'] {
    opacity: 0;
    clip-path: inset(0 0 12% 0);
    transform: translateY(18px);
  }
}

[data-variant='living-menu'] .panel-heading {
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1.65fr);
}

[data-variant='living-menu'] .panel-heading h2 {
  max-width: 900px;
  font-size: clamp(43px, 5.4vw, 78px);
}

[data-variant='living-menu'] .living-service-list {
  margin-top: clamp(34px, 4vw, 58px);
  border-top: 1px solid var(--line);
}

[data-variant='living-menu'] .living-service {
  display: grid;
  width: 100%;
  min-height: 150px;
  grid-template-columns: clamp(150px, 20vw, 300px) 40px minmax(250px, 1fr) auto 24px;
  align-items: center;
  gap: clamp(14px, 2.5vw, 38px);
  padding: 12px clamp(12px, 1.25vw, 20px);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

[data-variant='living-menu'] .living-service-media {
  display: block;
  height: 124px;
  overflow: hidden;
  background: var(--forest);
}

[data-variant='living-menu'] .living-service-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72);
  transform: scale(1.01);
  transition: filter 420ms var(--ease), transform 700ms var(--ease);
}

[data-variant='living-menu'] .living-service-index {
  align-self: start;
  padding-top: 9px;
  font-size: 9px;
  opacity: .5;
}

[data-variant='living-menu'] .living-service .service-main small {
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 320ms var(--ease);
}

[data-variant='living-menu'] .living-service:hover .service-main small,
[data-variant='living-menu'] .living-service:focus-visible .service-main small {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

[data-variant='living-menu'] .living-service:hover .living-service-media video,
[data-variant='living-menu'] .living-service:focus-visible .living-service-media video {
  filter: saturate(1);
  transform: scale(1.045);
}

[data-variant='living-menu'] .living-service .service-main strong {
  font-size: clamp(25px, 3vw, 44px);
}

[data-variant='living-menu'] .master-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
}

[data-variant='living-menu'] .master-slot {
  display: grid;
  min-height: 224px;
  grid-template-columns: minmax(360px, 1.45fr) minmax(260px, .55fr);
  border-bottom: 1px solid var(--line);
}

[data-variant='living-menu'] .master-slot:first-child {
  border-top: 1px solid var(--line);
}

[data-variant='living-menu'] .master-media {
  height: 224px;
}

[data-variant='living-menu'] .master-media video {
  filter: saturate(.68);
}

[data-variant='living-menu'] .master-media img {
  filter: saturate(.68);
}

[data-variant='living-menu'] .master-slot[data-master-id='yampos-3613'] .master-media img {
  transform: none;
}

[data-variant='living-menu'] .master-slot > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px clamp(20px, 3.5vw, 54px);
}

[data-variant='living-menu'] .master-slot h3 {
  font-size: clamp(28px, 3.2vw, 46px);
}

[data-variant='living-menu'] .needs-list a {
  min-height: 116px;
}

[data-variant='living-menu'] .needs-list a:hover,
[data-variant='living-menu'] .needs-list a:focus-visible {
  padding-right: 18px;
  padding-left: 18px;
  background: var(--skin);
}

[data-variant='living-menu'] .location-list {
  align-items: start;
  gap: clamp(12px, 2vw, 28px);
  background: transparent;
}

[data-variant='living-menu'] .location-card {
  border-top: 1px solid var(--line);
}

[data-variant='living-menu'] .location-card:nth-child(2) {
  margin-top: 70px;
}

[data-variant='living-menu'] .location-card:nth-child(3) {
  margin-top: 28px;
}

[data-variant='living-menu'] .location-media {
  height: clamp(300px, 35vw, 500px);
}

[data-variant='living-menu'] .location-card:nth-child(2) .location-media {
  height: clamp(250px, 29vw, 410px);
}

[data-variant='living-menu'] .location-card:nth-child(3) .location-media {
  height: clamp(280px, 32vw, 460px);
}

[data-variant='living-menu'] .booking-panel {
  background: var(--mist);
}

[data-variant='living-menu'] .compact-footer {
  background: var(--ink);
}

@media (max-width: 1060px) {
  [data-variant='living-menu'] .hero-copy {
    width: min(590px, 62vw);
  }

  [data-variant='living-menu'] .living-service {
    grid-template-columns: clamp(140px, 22vw, 220px) 28px minmax(180px, 1fr) auto 20px;
  }

  [data-variant='living-menu'] .location-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-variant='living-menu'] .hero-stage {
    min-height: 82svh;
  }

  [data-variant='living-menu'] .hero-media {
    display: block;
  }

  [data-variant='living-menu'] .hero-slice {
    display: contents;
  }

  [data-variant='living-menu'] .hero-slice::after {
    display: none;
  }

  [data-variant='living-menu'] .hero-slice > video {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    filter: saturate(.72) brightness(.7);
    transform: scale(1);
    transition: opacity 520ms var(--ease), visibility 520ms var(--ease), transform 900ms var(--ease);
  }

  [data-variant='living-menu'] .hero-slice[data-active='true'] > video {
    opacity: 1;
    visibility: visible;
    transform: scale(1.025);
  }

  [data-variant='living-menu'] .hero-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(16, 19, 15, .24);
    content: '';
    pointer-events: none;
  }

  [data-variant='living-menu'] .hero-copy,
  [data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(2)[data-active='true']) .hero-copy,
  [data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(3)[data-active='true']) .hero-copy {
    right: 18px;
    bottom: 80px;
    left: 18px;
    width: auto;
    padding: 17px 17px 15px;
    background: rgba(16, 19, 15, .78);
  }

  [data-variant='living-menu'] .hero-copy h1 {
    margin-top: 10px;
    font-size: clamp(37px, 11.8vw, 50px);
  }

  [data-variant='living-menu'] .hero-support {
    margin-top: 12px;
    font-size: 12px;
  }

  [data-variant='living-menu'] .hero-actions {
    gap: 16px;
    margin-top: 14px;
  }

  [data-variant='living-menu'] .button-light {
    padding: 0 13px;
  }

  [data-variant='living-menu'] .hero-slice-control {
    position: absolute;
    z-index: 5;
    right: auto;
    bottom: 12px;
    left: 18px;
    width: calc((100% - 36px) / 3);
    min-height: 54px;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px 8px 5px;
    border: 1px solid rgba(242, 239, 229, .44);
    background: rgba(16, 19, 15, .9);
  }

  [data-variant='living-menu'] .mobile-header-book {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid rgba(242, 239, 229, .54);
    font-size: 10px;
  }

  [data-variant='living-menu'] .header-menu {
    margin-left: 8px;
  }

  [data-variant='living-menu'] .hero-slice-controls [data-hero-control='massage'] {
    left: calc(18px + ((100% - 36px) / 3));
  }

  [data-variant='living-menu'] .hero-slice-controls [data-hero-control='four-hands'] {
    left: calc(18px + (2 * ((100% - 36px) / 3)));
  }

  [data-variant='living-menu'] .hero-slice-control[data-active='true'] {
    background: var(--milk);
    color: var(--ink);
  }

  [data-variant='living-menu'] .hero-slice-control strong {
    font-size: 9px;
  }

  [data-variant='living-menu'] .hero-slice-control i {
    display: none;
  }

  [data-variant='living-menu'] .workspace-nav {
    display: grid;
    width: 100%;
    max-width: none;
    min-height: 64px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow-x: visible;
    padding: 0 18px;
  }

  [data-variant='living-menu'] .workspace-nav button {
    min-width: 0;
    min-height: 63px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px;
    padding: 0 4px;
    border-right: 1px solid var(--line);
    font-family: var(--text);
    font-size: clamp(9px, 2.5vw, 10px);
    line-height: 1.15;
    white-space: nowrap;
  }

  [data-variant='living-menu'] .workspace-nav button:first-child {
    padding-left: 4px;
    border-left: 1px solid var(--line);
  }

  [data-variant='living-menu'] .workspace-panel {
    min-height: 0;
    padding: 42px 18px 62px;
  }

  [data-variant='living-menu'] .panel-heading {
    display: block;
  }

  [data-variant='living-menu'] .panel-heading h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  [data-variant='living-menu'] .living-service {
    min-height: 142px;
    grid-template-columns: 100px 22px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 10px 12px;
  }

  [data-variant='living-menu'] .living-service-media {
    height: 120px;
  }

  [data-variant='living-menu'] .living-service .service-main strong {
    font-size: 21px;
  }

  [data-variant='living-menu'] .living-service .service-main small {
    margin-top: 5px;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  [data-variant='living-menu'] .living-service .service-duration {
    display: none;
  }

  [data-variant='living-menu'] .master-slot {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  [data-variant='living-menu'] .master-media {
    height: 260px;
  }

  [data-variant='living-menu'] .master-slot > div {
    min-height: 146px;
    padding: 22px 0 30px;
  }

  [data-variant='living-menu'] .location-list {
    grid-template-columns: 1fr;
  }

  [data-variant='living-menu'] .location-card:nth-child(2),
  [data-variant='living-menu'] .location-card:nth-child(3) {
    margin-top: 0;
  }

  [data-variant='living-menu'] .location-media,
  [data-variant='living-menu'] .location-card:nth-child(2) .location-media,
  [data-variant='living-menu'] .location-card:nth-child(3) .location-media {
    height: 420px;
  }

  [data-variant='living-menu'] .compact-footer a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

/* Preserve an image-led hero when an Instagram proxy video cannot decode. */
[data-hero-state] {
  background: var(--forest) url('/assets/two-mirrors.jpg') center / cover no-repeat;
}

[data-hero-state][data-media-error='true']::after {
  background: rgba(16, 19, 15, .18);
  content: '';
}

@media (min-width: 761px) {
  [data-variant='quiet-catalog'] .hero-copy {
    bottom: 55px;
  }

  [data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(2)[data-active='true']) .hero-copy {
    left: clamp(24px, 4vw, 68px);
  }
}

@media (max-width: 760px) {
  .hero-copy,
  [data-variant='living-menu'] .hero-copy,
  [data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(2)[data-active='true']) .hero-copy,
  [data-variant='living-menu'] .hero-stage:has(.hero-slice:nth-child(3)[data-active='true']) .hero-copy {
    background: var(--ink);
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Quiet catalog: three restrained hero studies for the 1080 × 1920 source. */
.hero-layout-switcher {
  position: fixed;
  z-index: 45;
  right: 18px;
  bottom: 18px;
  display: none;
  padding: 4px;
  border: 1px solid rgba(183, 154, 88, .52);
  background: rgba(16, 19, 15, .82);
  box-shadow: 0 16px 50px rgba(16, 19, 15, .2);
  color: var(--milk);
  backdrop-filter: blur(18px);
}

html[data-review='true'][data-embed='false'] .hero-layout-switcher {
  display: flex;
}

.hero-layout-switcher a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: rgba(242, 239, 229, .62);
  font-size: 10px;
  letter-spacing: .04em;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.hero-layout-switcher a span {
  font-size: 8px;
  opacity: .66;
}

.hero-layout-switcher a[aria-current='true'] {
  background: var(--brass);
  color: var(--ink);
}

.hero-frame-label {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(242, 239, 229, .64);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Только цвет: сам знак рисуется маской выше по файлу, набранный текст здесь больше не виден,
   поэтому шрифт и межбуквенное расстояние отсюда убраны — они перебивали ту маску. */
.hero-frame-label span:first-child {
  color: var(--milk);
}

html[data-hero-layout] [data-variant='quiet-catalog'] .hero-stage {
  background: #667058;
}

html[data-hero-layout] [data-variant='quiet-catalog'] .hero-layer[data-active='true'] {
  transform: none;
}

html[data-hero-layout] [data-variant='quiet-catalog'] .hero-copy {
  background: transparent;
}

/* 01 — editorial split: the portrait source is never wider than 880px. */
html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-stage {
  display: grid;
  min-height: clamp(760px, 100svh, 1080px);
  grid-template-columns: minmax(0, 1fr) minmax(420px, min(38vw, 720px));
  padding: 112px clamp(36px, 4vw, 76px) 42px;
}

html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-media {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 720px;
  height: min(calc(100svh - 154px), 900px);
  align-self: end;
  justify-self: end;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(24, 29, 21, .18);
}

html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-copy {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: min(650px, calc(100% - 54px));
  align-self: end;
  padding: 0 0 46px;
}

html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-copy h1 {
  font-size: clamp(58px, 5.5vw, 94px);
}

html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-frame-label {
  right: clamp(36px, 4vw, 76px);
  bottom: 17px;
}

/* 02 — cinematic window: a capped 1080px film plane inside the brand field. */
html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-stage {
  display: grid;
  min-height: clamp(800px, 100svh, 1080px);
  grid-template-rows: auto minmax(330px, 1fr);
  padding: 108px clamp(36px, 4vw, 76px) 42px;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-copy {
  position: relative;
  inset: auto;
  z-index: 4;
  grid-row: 1;
  width: min(760px, 64vw);
  padding: 20px 0 32px;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-copy h1 {
  font-size: clamp(52px, 5vw, 84px);
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-support {
  max-width: 510px;
  margin-top: 17px;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-actions {
  margin-top: 20px;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-media {
  position: relative;
  inset: auto;
  grid-row: 2;
  width: min(100%, 900px);
  height: clamp(330px, 47svh, 560px);
  align-self: end;
  justify-self: end;
  overflow: hidden;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] [data-hero-state='space'] video {
  object-position: 50% 39%;
}

html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-frame-label {
  bottom: 17px;
  left: clamp(36px, 4vw, 76px);
}

/* 03 — portrait object: source proportions stay visible and pristine. */
html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-stage {
  display: grid;
  min-height: clamp(760px, 100svh, 1080px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  padding: 112px clamp(36px, 6vw, 112px) 46px;
  background: #1b2119;
}

.hero-watermark {
  display: contents;
  color: var(--milk);
  pointer-events: none;
}

.hero-watermark-fish {
  position: absolute;
  z-index: 2;
  top: clamp(126px, 14vh, 170px);
  right: calc(clamp(28px, 4vw, 76px) + min(56vw, 800px) - clamp(72px, 4.8vw, 96px));
  display: block;
  width: clamp(124px, 10.8vw, 166px);
  aspect-ratio: 143.16 / 117.61;
  background: currentColor;
  opacity: .048;
  -webkit-mask: url('/assets/koi-sign-green.svg') center / contain no-repeat;
  mask: url('/assets/koi-sign-green.svg') center / contain no-repeat;
}

/* The studio's own lockup, not the three letters K-O-I set in the display face. Drawn the same
   way as the fish above it - the SVG is a mask over currentColor - so it inherits the hero's
   colour and stays a watermark rather than becoming an image with its own black. */
.hero-watermark-word {
  position: absolute;
  z-index: 0;
  /* Held clear of both edges. The three letters this replaced were meant to bleed off the corner,
     but a lockup with readable words under it does not read as a bleed - it reads as a logo that
     got cut, which is what happened the first time this shipped.

     Kept small enough to sit below the hero buttons rather than behind them - the old
     three-letter version was allowed to run through them because it was texture, not a legible
     logo. 12vw is not a guess: the clear band between the buttons and the label below them was
     measured across the range, and it is narrowest around 1200-1280px, where only ~160px of
     width fits with a 20px gap top and bottom. Anything wider collides there even though it
     looks fine at 1440 and on a phone. */
  bottom: clamp(16px, 3vh, 32px);
  left: clamp(20px, 2.5vw, 56px);
  display: block;
  width: min(12vw, 260px);
  aspect-ratio: 162.9 / 96.41;
  background: currentColor;
  opacity: .07;
  -webkit-mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
  mask: url('/assets/koi-logo-white.svg') center / contain no-repeat;
}

html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-media {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  max-width: 480px;
  height: min(calc(100svh - 164px), 860px);
  aspect-ratio: 9 / 16;
  align-self: center;
  justify-self: end;
  overflow: hidden;
}

html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-copy {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: min(700px, calc(100% - 72px));
  align-self: center;
  padding: 0;
}

html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-copy h1 {
  font-size: clamp(60px, 5.9vw, 102px);
}

html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-frame-label {
  right: clamp(36px, 6vw, 112px);
  bottom: 19px;
}

html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-stage {
  grid-template-columns: minmax(0, 1fr) minmax(500px, 800px);
  padding-right: clamp(28px, 4vw, 76px);
  padding-left: clamp(28px, 4vw, 76px);
}

html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-media {
  width: min(56vw, 800px);
  max-width: 800px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}

html[data-hero-layout='circle'] [data-variant='quiet-catalog'] [data-hero-state='space'] video {
  object-position: 50% 42%;
}

html[data-hero-layout='rounded'] [data-variant='quiet-catalog'] .hero-stage {
  grid-template-columns: minmax(0, 1fr) minmax(460px, 680px);
  padding-right: clamp(28px, 4vw, 76px);
  padding-left: clamp(28px, 4vw, 76px);
}

html[data-hero-layout='rounded'] [data-variant='quiet-catalog'] .hero-media {
  width: min(50vw, 680px);
  max-width: 680px;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}

html[data-hero-layout='rounded'] [data-variant='quiet-catalog'] [data-hero-state='space'] video {
  object-position: 50% 40%;
}

html[data-hero-layout='oval'] [data-variant='quiet-catalog'] .hero-stage {
  grid-template-columns: minmax(0, 1fr) minmax(460px, 720px);
  padding-right: clamp(28px, 4vw, 76px);
  padding-left: clamp(28px, 4vw, 76px);
}

html[data-hero-layout='oval'] [data-variant='quiet-catalog'] .hero-media {
  width: min(52vw, 720px);
  max-width: 720px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 50%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}

html[data-hero-layout='oval'] [data-variant='quiet-catalog'] [data-hero-state='space'] video {
  object-position: 50% 40%;
}

html:is([data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-copy {
  width: min(700px, calc(100% - 16px));
}

@media (max-width: 1060px) and (min-width: 761px) {
  html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-stage,
  html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 44vw);
  }

  html[data-hero-layout='split'] [data-variant='quiet-catalog'] .hero-copy,
  html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-copy {
    width: calc(100% - 32px);
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-stage {
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 52vw);
  }

  html[data-hero-layout='rounded'] [data-variant='quiet-catalog'] .hero-stage {
    grid-template-columns: minmax(280px, 1fr) minmax(400px, 50vw);
  }

  html[data-hero-layout='oval'] [data-variant='quiet-catalog'] .hero-stage {
    grid-template-columns: minmax(280px, 1fr) minmax(410px, 51vw);
  }

  html:is([data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-copy {
    width: calc(100% - 16px);
  }
}

@media (max-width: 760px) {
  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-stage {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 26px;
    padding: 76px 18px 30px;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-media,
  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-copy {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    grid-column: 1;
    justify-self: stretch;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-media {
    grid-row: 1;
    aspect-ratio: 4 / 5;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-copy {
    grid-row: 2;
    padding: 0 0 6px;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-copy h1 {
    max-width: 350px;
    margin-top: 13px;
    font-size: clamp(40px, 12.1vw, 50px);
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-support {
    max-width: 340px;
    margin-top: 16px;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-actions {
    margin-top: 20px;
  }

  html[data-hero-layout] [data-variant='quiet-catalog'] .hero-frame-label {
    right: 18px;
    bottom: 29px;
    left: auto;
  }

  html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-stage {
    background: #667058;
  }

  html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] .hero-media {
    aspect-ratio: 5 / 4;
  }

  html[data-hero-layout='cinema'] [data-variant='quiet-catalog'] [data-hero-state='space'] video {
    object-position: 50% 40%;
  }

  html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-stage {
    background: #1b2119;
  }

  html:is([data-hero-layout='portrait'], [data-hero-layout='circle'], [data-hero-layout='rounded'], [data-hero-layout='oval']) [data-variant='quiet-catalog'] .hero-media {
    width: min(62vw, 244px);
    aspect-ratio: 9 / 16;
    justify-self: end;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-watermark-fish {
    position: absolute;
    z-index: 2;
    top: clamp(136px, 36vw, 142px);
    right: 8px;
    width: clamp(96px, 27vw, 116px);
    min-width: 0;
    opacity: .048;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-watermark-word {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    /* Sized to the gap it actually has on a phone: the hero buttons close above it and the
       "body practice · Dnipro / Kyiv" label sits right below, and at 210px wide the mark ran
       21px into that label. */
    width: min(40vw, 160px);
    grid-column: 1;
    grid-row: 6;
    margin: 18px 0 0;
    justify-self: start;
    opacity: .07;
    transform: none;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-media {
    position: relative;
    z-index: 1;
    width: min(calc(100vw - 16px), 410px);
    max-width: none;
    height: auto;
    grid-column: 1;
    grid-row: 3;
    margin-top: 18px;
    aspect-ratio: 1;
    justify-self: center;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-stage {
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
    gap: 0;
    min-height: 100svh;
    padding-top: 92px;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-copy {
    display: contents;
    padding: 0;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-copy > .eyebrow,
  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-copy h1,
  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-support,
  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-actions {
    position: relative;
    grid-column: 1;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-copy > .eyebrow {
    z-index: 3;
    grid-row: 1;
    color: #b79a58;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-copy h1 {
    z-index: 3;
    grid-row: 2;
    color: #d8d7ca;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-support {
    grid-row: 4;
    margin-top: 22px;
  }

  html[data-hero-layout='circle'] [data-variant='quiet-catalog'] .hero-actions {
    grid-row: 5;
    margin-top: 20px;
  }

  [data-variant='quiet-catalog'] .massages-panel .panel-media-tall {
    width: min(calc(100% + 36px), 680px);
    max-width: none;
    min-height: 0;
    justify-self: center;
  }

  html[data-hero-layout='rounded'] [data-variant='quiet-catalog'] .hero-media {
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    justify-self: center;
  }

  html[data-hero-layout='oval'] [data-variant='quiet-catalog'] .hero-media {
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 50%;
    justify-self: center;
  }
}

@media (max-width: 480px) {
  [data-variant='quiet-catalog'] .massages-panel .panel-media-tall {
    /* 24px of margin rather than 16. The circle is centred inside a column that is not centred on
       the screen, so subtracting only the gutter still left it 2px wider than the room it had -
       enough for the page to scroll sideways on every phone size checked. */
    width: min(calc(100vw - 24px), 410px);
  }
}

.preview-mobile {
  position: fixed;
  z-index: 95;
  right: 16px;
  bottom: 16px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(242, 239, 229, .28);
  border-radius: 999px;
  background: rgba(16, 19, 15, .86);
  box-shadow: 0 15px 40px rgba(0, 0, 0, .26);
  color: var(--milk);
  cursor: pointer;
  font-size: 11px;
}

.preview-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  align-items: start;
  justify-items: center;
  padding: 22px;
  background: rgba(8, 11, 8, .94);
  backdrop-filter: blur(18px);
  overflow: auto;
}

.preview-overlay.open {
  display: grid;
}

.preview-frame {
  display: grid;
  gap: 11px;
  justify-items: center;
  margin-block: auto;
}

.preview-bar {
  display: flex;
  width: 454px;
  justify-content: space-between;
  color: var(--milk);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.preview-bar button {
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.preview-frame iframe {
  box-sizing: content-box;
  width: 440px;
  height: 956px;
  border: 7px solid #161a15;
  border-radius: 30px;
  background: var(--ink);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .55);
}

@media (max-width: 760px) {
  .preview-mobile {
    display: none;
  }
}