:root{
  /* "Estudio" world — measured from crystalgreenestudio.com (26.09.2026),
     read twice and cross-checked: once from the custom properties in its own
     site.css, once sampled pixel-for-pixel off a screenshot of the live page.
     Both agree, which matters — earlier in this project a text description of
     a reference page was wrong about its hero and its typefaces.

       --lightAccent-hsl 37.5,8.7%,81.96%  -> #D5D2CD   page ground
       --darkAccent-hsl  0,0%,20.39%       -> #343434   ink, button fill
       --accent-hsl      28.8,10.92%,55.1% -> #998C80   decorative only

     The taupe is 2.17:1 on the ground — it can hold a hairline or a wash and
     must never hold text. There is no coloured type anywhere in the reference,
     so the previous world's burgundy is gone rather than restyled: prices,
     focus rings and legends are all ink now.

     Faces: their display is garamond-premier-pro-display (Adobe Fonts —
     licensed, and no Cyrillic route) and their body is Questrial, which ships
     latin / latin-ext / vietnamese only, verified in their own @font-face.
     This site is bilingual ES/RU, so both are substituted: Cormorant for the
     Garamond (same family lineage, real Cyrillic) and Jost for Questrial
     (geometric sans, real Cyrillic). Their measured type treatment carries
     over literally — see the h1–h4 and body rules below. */
  --ground:#D5D2CD; --ground-tint:#C6C2BA;
  /* ink mixed 78% into the ground: 4.8:1, clears AA for body copy */
  --ink:#343434; --ink-soft:#575756; --ink-faint:#4F4E4C;
  --line:#BFBCB6; --line-soft:#C8C5BF;
  /* interactive edges (inputs, calendar cells, tabs) need the 3:1 non-text
     contrast WCAG asks of an active control boundary; the hairline above is
     for decorative rules only */
  --line-strong:#767369;
  --header-h:84px;
  --taupe:#998C80;
  --wash:rgba(153,140,128,.16);
  --on-dark:#F2F0EC;
  --shadow:0 2px 4px rgba(52,52,52,.06), 0 20px 40px -24px rgba(52,52,52,.20);
  --display:"Cormorant","Times New Roman",serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;
  --tracking-label:.16em; --tracking-button:.2em;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Body tracking and leading are the reference's own --body-font-* values:
   .06em and 1.4. The wide tracking is most of what makes their pages read
   calm rather than dense, and it costs nothing to carry over. */
body{
  background:var(--ground); color:var(--ink);
  /* Замер их страницы: основной текст 12.8px / вес 400 / трекинг .06em /
     интерлиньяж 17.92px. Раньше здесь стояло 16px. */
  font-family:var(--body); font-size:12.8px; line-height:1.4;
  letter-spacing:.06em;
  margin:0; padding:0; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
/* Их страница не сидит в колонке: заголовки секций, «о себе» и подвал все
   начинаются с x=26 при ширине 1282, а ширину строки ограничивает каждый
   блок отдельно. Было max-width:1080px с центрированием (x=101). */
.wrap{max-width:none; margin:0 auto; padding-inline:22px}
@media (min-width:760px){ .wrap{padding-inline:26px} }
/* text-transform:capitalize was copied from the reference's own token, but
   their content is short English titles/nav items — applied to full
   Spanish/Russian sentences it title-cases every word ("Realzamos Tu
   Belleza Natural"), which reads as a mistake in both languages. Sentence
   casing is set correctly at the content level instead; headings just
   render it as written. */
/* Heading treatment measured from the reference: --heading-font-font-weight
   300, --heading-font-letter-spacing .08em, --heading-font-line-height 1.25em,
   text-transform none. The light weight plus the open tracking is the whole
   effect; at weight 400 with 0 tracking the same words read ordinary. */
/* Замер: их заголовки набраны прописными — MEET CRYSTAL, OUR PHILOSOPHY.
   У нас стояли строчные. */
h1,h2,h3,h4{
  text-transform:uppercase;
  font-family:var(--display); font-weight:300; text-wrap:balance; margin:0;
  letter-spacing:.08em; line-height:1.25;
}
p{margin:0}
a{color:inherit}
em{font-style:italic}
::selection{background:var(--wash); color:var(--ink)}
::-webkit-scrollbar{height:8px; width:8px}
::-webkit-scrollbar-thumb{background:var(--line)}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
input{caret-color:var(--ink)}

/* ---------- header ----------
   A solid sticky bar on both pages: nothing full-bleed sits under it any
   more, since the slogan block — not the photo — opens the page.
   No backdrop-filter here on purpose: per spec, a filter/backdrop-filter
   on an element makes it a containing block for its position:fixed
   descendants. The full-screen nav drawer lives inside this header, so
   the blur was silently confining its inset:0 to the header's own ~60px
   strip instead of the viewport — the menu opened but only its top row
   was visible, the rest invisible/clipped. Plain translucent colour
   instead, no blur, and the drawer covers the whole screen correctly. */
/* Замерено на crystalgreenestudio.com при 1282×891: шапка 70px (84px на
   390px), содержимое в 26px от края, без нижней границы. */
header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:color-mix(in srgb, var(--ground) 97%, transparent);
}
.bar{position:relative; display:flex; align-items:center; gap:10px; min-height:var(--header-h); padding-block:14px}
header .wrap.bar{max-width:none; width:100%; padding-inline:22px}
@media (min-width:760px){ header .wrap.bar{padding-inline:26px} }
@media (min-width:760px){ :root{--header-h:70px} .bar{min-height:70px; padding-block:7px} }
@media (min-width:760px){ .bar{gap:16px} }

.nav-toggle{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:32px; height:32px; padding:0;
  background:none; border:0; color:var(--ink); cursor:pointer;
}
/* Меню в строку помещается только с 820px: на 760 шапка вылезала
   за экран на 38px. Бургер держим до 820. */
@media (min-width:820px){ .nav-toggle{display:none} }

/* Mobile: the logo can't be truly centered on the viewport when the two
   side groups (a 32px hamburger vs. a language pill + full-text button)
   are such different widths — true centering put the wordmark's midpoint
   right on top of the ES/RU pill. flex:1 + text-align:center centers it
   within whatever space is actually left instead, which never overlaps. */
/* Wordmark — back to the lockup from the user's own original brand
   mockups (JULIA large / thin accent rule / GUMA small-tracked), not bare
   stacked text. One rule, the site's own accent colour, no second "brand
   gold" invented on top of the measured palette.
   Left-aligned, not centered: sits at the header's left, after the
   hamburger, on both pages. Compact inside the bar so the three stacked
   parts (JULIA / rule / GUMA) don't push the bar taller than its 64px. */
.mark{
  text-decoration:none; color:inherit; line-height:1; text-align:left;
}
/* The reference sets its own wordmark in the same light, widely tracked
   serif caps as its headings. The two-line JULIA / GUMA lockup stays —
   it is a recorded brand commitment, not a styling choice — but it picks
   up that treatment: weight 300 and .08em, matching the heading rule. */
.mark{font-family:var(--display); font-weight:400; font-size:clamp(18px,2.65vw,34px); letter-spacing:.055em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap; margin-right:auto}

.header-right{display:flex; align-items:center; flex:0 0 auto; gap:8px; margin-left:auto}
@media (min-width:760px){ .header-right{gap:16px} }

/* Their header carries the booking action as a solid dark block at the far
   right — the only filled element on the page, which is what makes it read
   as the one thing to do. Compact enough to sit inside the 64px bar. */
/* Замер: их кнопка в шапке 210×56, отступы 15.4/46.1; кнопки на
   странице 248×64, отступы 0/38.4 — заметно крупнее наших прежних. */
.bar .btn{padding:11px 20px; font-size:11px}
@media (max-width:479px){ .bar .btn{padding:9px 12px; font-size:11px; letter-spacing:.10em} }

/* Desktop: plain inline links, always visible, no toggle, no drawer chrome.
   Mobile: a full-screen drawer (matching the reference's own mobile menu —
   close button + centred mark, a block of large tracked-caps primary
   links with hairline dividers, a quieter secondary-links block, social
   icons at the bottom), not a small strip dropped under the bar. */
nav.primary-nav{display:flex; align-items:center; gap:26px}
/* Desktop shows only the primary links, inline, as before; the drawer-only
   chrome (close button, secondary links, social icons) stays out of the
   header entirely rather than leaking into the inline nav. */
.nav-primary-links{display:contents}
.nav-drawer-top, .nav-secondary-links, .nav-social{display:none}
@media (max-width:819px){
  nav.primary-nav{
    display:none; position:fixed; inset:0; z-index:60;
    flex-direction:column; align-items:stretch; background:var(--ground); overflow-y:auto;
    padding-bottom:32px;
  }
  nav.primary-nav.is-open{display:flex}
  .nav-drawer-top, .nav-primary-links, .nav-secondary-links, .nav-social{display:flex}

  /* Same trick as the header's own .mark: a real centered flex item
     between two equal-width bookends, not position:absolute fighting a
     centered sibling for the same pixels — that was the overlap bug. */
  .nav-drawer-top{
    align-items:center; gap:6px;
    min-height:52px; padding:10px 16px; flex:0 0 auto;
    border-bottom:1px solid var(--line-soft);
  }
  .nav-close{
    flex:0 0 auto; display:flex; width:22px; height:22px; padding:0; background:none; border:0; color:var(--ink); cursor:pointer;
  }
  .nav-drawer-mark{
    flex:1 1 auto; min-width:0; text-align:center;
    font-family:var(--display); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  }
  .nav-drawer-spacer{flex:0 0 auto; width:22px}

  .nav-primary-links{flex-direction:column; padding:8px 22px 0}
  .nav-primary-links a{
    padding-block:18px; font-family:var(--display); font-size:24px; text-transform:uppercase; letter-spacing:.02em;
    border-bottom:1px solid var(--line-soft);
  }

  .nav-secondary-links{flex-direction:column; align-items:flex-start; padding:22px 22px 0}
  /* .primary-nav a below sets text-transform:uppercase globally and — same
     specificity, later in the file — was winning the tie over this rule,
     which is why "Contacto" was rendering as "CONTACTO". Scoped under
     .primary-nav here so it actually wins. */
  .primary-nav .nav-secondary-links a{
    display:block; width:100%; text-align:left;
    padding-block:7px; font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none;
  }

  .nav-social{gap:18px; padding:26px 22px 0; margin-top:auto}
  .nav-social a{color:var(--ink); display:flex}
}
.primary-nav a{
  font-family:var(--body); font-size:12.8px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); transition:color .15s ease;
}
.primary-nav a:hover{color:var(--ink)}

/* Plain tracked text, no pill/border — a boxed toggle was exactly the
   "boxy" weight the reference doesn't carry in its own header icons. */
.langs{display:flex; align-items:center; gap:5px}
.langs button{
  font:inherit; font-family:var(--body); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  background:none; border:0; padding:2px; cursor:pointer; color:var(--ink-soft);
}
.langs button[aria-pressed="true"]{color:var(--ink)}
.langs-sep{color:var(--line-strong); font-size:11px}
.langs button:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* Buttons — the reference's own hero/CTA buttons (BOOK A PRIVATE VISIT,
   DISCOVER) are thin outlined rectangles, not filled blocks: 1px border,
   transparent ground, small tracked caps-weight text. That's the default
   here now. .solid is the one filled variant, reserved for the booking
   flow's own decisive actions (Continuar, Confirmar turno) where a heavier
   affordance earns its keep. Both keep the reference's real hover
   behaviour: invert, don't fade. */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--body); font-size:13px; font-weight:400; letter-spacing:var(--tracking-button);
  padding:14px 26px; text-transform:none;
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{background:var(--ink); color:var(--ground)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--ground)}
/* Замер обеих их залитых кнопок — в шапке и в блоке «о нас»: #363636,
   текст белый. У нас стоял --ink #343434 с текстом цвета фона. */
.btn.solid{background:#363636; color:#fff; border-color:#363636}
/* 14.4px / 34.5px — их замер. На 390px в строку не влезает ни при каких
   условиях: бургер + название + ES/RU + кнопка вылезали на 43px за экран. */
/* Замер их кнопки в шапке: #363636, белый текст. Раньше здесь стоял
   taupe — я взял его из выборки, которая фильтровала элементы ниже
   y=800 и шапку не включала вовсе, то есть это был цвет другой кнопки. */
.bar .btn.solid{font-size:12px; letter-spacing:.02em; padding:10px 13px; border-radius:0; width:auto; min-height:0;
  font-weight:300; background:#363636; border-color:#363636; color:#fff}
.bar .btn.solid:hover{background:transparent; color:var(--ink); border-color:var(--ink)}
@media (min-width:760px){
  /* Замер самой кнопки BOOK NOW, а не соседней: 143×42, padding
     11.52/34.56, вес 300. Ширина у них по тексту, а не фиксированная —
     210×56 были моей выдумкой. У нас подпись длиннее, поэтому при тех же
     отступах кнопка шире: правый край всё равно упирается в 1256. */
  .bar .btn.solid{
    font-size:14.4px; padding:0 34.56px; width:auto; min-height:42px;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
}
.btn.solid:hover{background:transparent; color:var(--ink)}
/* An ink outline against an ink fill is invisible. The filled button keeps
   the ink ring but gains a ground-coloured inner ring, so the focus state
   reads on the ground AND on the fill (WCAG 2.4.11). */
.btn.solid:focus-visible{box-shadow:inset 0 0 0 2px var(--ground)}

/* ---------- hero: the room, full screen, dark, with the words centred on
   it. Measured against the reference, which opens on a deliberately
   underexposed photograph of its own treatment room carrying four short
   centred lines and no button at all — its booking action lives in the
   header instead, so this one does too. ---------- */
/* Замер: их фото начинается с y=0 и уходит под шапку; видно 632 из 702.
   У нас оно начиналось под шапкой, с y=84 — из-за этого вся страница
   была сдвинута вниз на её высоту. */
.hero-studio{
  position:relative; overflow:hidden; background:var(--ink);
  margin-top:calc(-1 * var(--header-h));
  /* Их фото занимает 702px из 891 (78%) на десктопе и 557 из 844 (66%) на
     телефоне — то есть заканчивается, и под ним виден фон страницы. На
     весь экран оно не разворачивается никогда. */
  height:66svh; min-height:420px;
  display:flex; align-items:center; justify-content:center;
}
.hero-studio picture{position:absolute; inset:0; display:block}
@media (min-width:760px){ .hero-studio{height:78.8svh; min-height:520px} }
.hero-studio img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  /* Кадр теперь отдельный для каждой ширины (см. <picture>), центрировать
     по умолчанию. */
  object-position:50% 34%;
  filter:contrast(1.03);
}
.hero-studio::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Виньетка по краям гасила ровно то, ради чего кадр делался: свечи и
     тёплое пятно стоят у верхнего края. Вместо неё мягкий скрим по центру,
     под самим текстом — та же техника, что на карточке превью. */
  background:
    radial-gradient(ellipse 64% 44% at 50% 54%, rgba(14,10,7,.66) 0%, rgba(14,10,7,.38) 60%, rgba(14,10,7,0) 100%),
    radial-gradient(ellipse 108% 104% at 50% 44%, rgba(18,13,9,0) 46%, rgba(18,13,9,.26) 100%);
}
.hero-studio-copy{
  position:relative; z-index:1; width:100%; max-width:821px;
  padding:clamp(72px,12vh,120px) 22px; text-align:center; color:var(--on-dark);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px,2.5vw,32px);
}
/* Крупного заголовка в их первом экране нет вовсе: четыре строки одного
   размера, 20.6px / вес 300 / трекинг .08em / интерлиньяж 25.46px. Размер
   h1 3.3rem взят из их переменной, но сами они его здесь не применяют —
   он у них живёт в заголовке блока «о себе». h1 остаётся h1 ради
   семантики и выглядит как остальные три строки. */
.hero-studio-copy h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(16px,1.62vw,20.6px); line-height:1.236; letter-spacing:.08em;
  max-width:none; color:var(--on-dark);
}
.hero-studio-copy p{
  margin:0; max-width:none;
  font-family:var(--display); font-weight:300;
  font-size:clamp(16px,1.62vw,20.6px); line-height:1.236; letter-spacing:.08em;
  color:var(--on-dark); opacity:.92;
}

/* The one authored moment on the site. The first screen asks to be looked at
   rather than acted on, so the four lines settle onto the photograph instead
   of arriving with it — once, on load, and never again. The resting state is
   the visible one: with reduced motion preferred the media query never
   applies and the lines are simply there. */
@media (prefers-reduced-motion:no-preference){
  .hero-studio-copy h1,
  .hero-studio-copy p{animation:hero-settle .95s cubic-bezier(.22,.61,.36,1) both}
  .hero-studio-copy h1{animation-delay:.12s}
  .hero-studio-copy p:nth-of-type(1){animation-delay:.42s}
  .hero-studio-copy p:nth-of-type(2){animation-delay:.56s}
  .hero-studio-copy p:nth-of-type(3){animation-delay:.70s}
}
@keyframes hero-settle{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:none}
}
/* `both` holds the keyframe's final opacity:1, which would wipe out the
   paragraphs' .92 — they animate to their own resting value instead. */
@keyframes hero-settle-p{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:.92; transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero-studio-copy p{animation-name:hero-settle-p}
}

/* ---------- the "meet her" beat the reference runs straight after its
   hero: a portrait beside a short paragraph and one plain text link, on
   the page ground rather than over a photograph. ---------- */
/* ---------- страница «о нас» ----------
   Замер их /about: блок 1048px, фото 480×809 прижато к левому краю
   страницы, текстовая колонка начинается с x=647, текст 14.4px
   (на главной 12.8). */
.about-page{display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:clamp(48px,7vh,80px)}
.about-page-copy{padding:clamp(40px,6vh,64px) 22px 0}
.ph-about-page{aspect-ratio:480/809}
@media (min-width:880px){
  .about-page{grid-template-columns:480px 1fr; gap:0; align-items:start; padding-bottom:0; min-height:1048px}
  /* Замер их /about: фото на y=155, заголовок на y=305 — от верха
     страницы, а шапка у них 70px. Отсчитываем от неё. */
  .ph-about-page{margin-top:85px; height:809px; aspect-ratio:auto}
  .about-page-copy{padding:235px 26px 0 167px}
}
.about-page-copy p{margin:0 0 22px; font-size:14.4px; line-height:1.4; max-width:403px}
/* На этой странице своего правила для h2 не было, и он падал в
   браузерное умолчание — 19.2px вместо 51.4. */
/* ---------- страница «философия» --------------------------------------
   Замер их /philosophy при 1282: фото 636×845 @x646 y70 в правый край,
   заголовок @x26 y148, курсивная строка @y259, абзацы @x26 шириной 403
   с зазором 16, кнопка @y813. Шапка 70, поэтому отступ сверху 78. */
.phil-page{display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:clamp(48px,7vh,80px)}
.phil-copy{padding:clamp(40px,6vh,64px) 22px 0}
.ph-phil{aspect-ratio:636/845}
.phil-copy h2{margin:0 0 clamp(28px,4vh,53px); font-size:clamp(34px,4vw,51.4px);
  line-height:1.134; letter-spacing:.08em}
.phil-lead{font-style:italic}
.phil-copy p{margin:0 0 16px; font-size:14.4px; line-height:1.4; max-width:403px}
.phil-copy p:last-of-type{margin-bottom:49px}
.phil-copy p.phil-lead{margin-bottom:17px}
@media (min-width:880px){
  .phil-page{grid-template-columns:minmax(0,1fr) minmax(0,636px); gap:0;
    align-items:start; padding-bottom:0; min-height:898px}
  .phil-copy{padding:78px 217px 0 26px}
  .phil-copy h2{margin-bottom:53px}
  .ph-phil{margin-top:0; height:845px; aspect-ratio:auto}
}

.about-page-copy h2{
  font-size:clamp(30px,4vw,51.4px); line-height:1.134; letter-spacing:.08em;
  margin-bottom:clamp(28px,4vh,44px);
}
.tx-p1{min-height:20px}
.tx-p2{min-height:40px}
.tx-p3{min-height:60px}
.tx-p4{min-height:81px}
.tx-p7{min-height:141px}

/* ---------- пустые слоты под будущий текст ----------
   Подписаны числом строк и кеглем — по замеру соответствующего блока у
   референса. Держат ту же высоту, что займёт текст, чтобы пропорции
   секций не поехали, пока текста нет. */
.tx{
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; border:1px dashed var(--line-strong); background:transparent;
}
/* Высоты сняты с референса: строка 12.8px занимает 17.92px, строка
   20.6px — 25.46px. Слот держит ровно столько, сколько займёт текст. */
.tx-l1{min-height:26px}
.tx-l2{min-height:36px}
.tx-l3{min-height:54px}
.tx-l6{min-height:92px}
/* Их колонки под знаками: 125 / 36 / 72 — самая высокая задаёт
   высоту полосы, 588 ровно. */
.tx-l4{min-height:72px}
.tx-l7{min-height:125px}
/* слоты под заголовки: высота строки при том же кегле, что у референса */
.tx-h1{min-height:58px}
.tx-h2{min-height:29px}
.tx-note{
  font-family:var(--body); font-size:11px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-faint); text-align:center;
}
.tx-dark{border-color:rgba(242,240,236,.34)}
.tx-dark .tx-note{color:rgba(242,240,236,.62)}
.tx-narrow{max-width:58ch; margin-inline:auto}

.hero-studio-copy .tx{width:100%; min-height:198px}

/* ---------- пустые слоты под будущие фото ----------
   Размеры взяты у референса один в один: 1282×702 в шапке, 506×557 в
   блоке «о себе», 636×588 на полосе записи. Слот подписан своим
   размером — под него и снимаем. */
.ph{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--ground-tint); border:1px solid var(--line-strong);
}
.ph-note{
  font-family:var(--body); font-size:11px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-faint);
}
.ph-hero{
  position:absolute; inset:0; background:var(--ink); border:0;
  align-items:flex-end; justify-content:flex-end; padding:22px 26px;
}
.ph-hero .ph-note{color:rgba(242,240,236,.55)}
.ph-book{aspect-ratio:636/588}

/* ---------- «о себе» ----------
   Замер референса: текст у левого края x=26, фото справа x=698 шириной
   506 и высотой 557, оба выровнены по верху. Было зеркально: фото слева
   на 48%, текст справа, по центру по вертикали.
   Блок собран одним куском — прошлая правка легла медиазапросом ВЫШЕ
   базовых правил, и поздние .about-copy{padding} и .about-photo{aspect-
   ratio} её молча перебивали. */
.about-band{display:grid; grid-template-columns:1fr; align-items:stretch}
.about-photo{position:relative; overflow:hidden; background:var(--ground-tint); aspect-ratio:506/557}
/* Съёмка на белом фоне читалась светлым прямоугольником, вырезанным из
   тёплой страницы, — на два фотографических регистра от героя выше. */
.about-photo img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.72) contrast(1.02) brightness(.96) sepia(.10)}
.about-copy{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,7vw,88px) 22px}
.about-copy h2{font-size:clamp(30px,4vw,51.4px); line-height:1.134; letter-spacing:.08em}
.about-copy p{margin-top:0; max-width:52ch; color:var(--ink-soft)}

@media (min-width:760px){
  .about-band{
    grid-template-columns:minmax(0,1fr) 506px; align-items:start;
    /* Замер: их фото стоит при x=698 — правое поле 78px, а не 26. */
    /* Замер: фото начинается на +122 от верха секции, заголовок на +127.
       Отступ сверху больше, чем снизу — при симметричном блок вставал
       на 24px выше нужного. Сумма та же, высота секции не меняется. */
    gap:clamp(40px,5vw,72px);
    padding:clamp(70px,9.9vw,127px) 78px clamp(52px,6.6vw,84px) 26px;
  }
  /* Их фото начинается на 5px выше заголовка: 824 против 829. */
  .about-photo{order:2; aspect-ratio:506/557; margin-top:-5px}
  /* Замер: их кнопка «ABOUT CRYSTAL» прижата к низу колонки, вровень с
     нижним краем фото, а не идёт сразу под текстом. */
  /* Замер самой кнопки, а не первого попавшегося элемента: заголовок
     829–888, текст 899, кнопка ABOUT CRYSTAL 1279–1343, фото 824–1381.
     То есть заголовок с текстом вверху, кнопка внизу колонки, её низ
     на 38px выше низа фото. Колонка от 829 до 1343 — это 514px. */
  .about-copy{order:1; justify-content:space-between; padding:0; min-height:514px}
  .about-copy-top{display:flex; flex-direction:column; gap:11px}

}

/* Their one link style: plain tracked caps on a hairline, no button chrome. */
/* Замер их кнопок на странице: 248×64, отступы 0/38.4, 16px, трекинг
   .1em. Четыре залитых стиля — в шапке taupe, «ABOUT CRYSTAL» чернила,
   «LEARN MORE» на тёмной полосе белая, «RESERVE NOW» белая. Прежнее
   правило «ровно один залитый элемент» было моей выдумкой, а не их. */
.btn-page{
  min-height:64px; display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start; width:auto; flex:0 0 auto;
  padding:0 38.4px; font-size:16px; letter-spacing:.1em; border-radius:0;
}
/* Кнопки — ровно их размеры: 210×56 в шапке, 248×64 и 299×64 на странице. */
.btn-210{width:210px; min-height:56px; padding:0; display:flex; align-items:center; justify-content:center; text-align:center}
.btn-248{width:248px; min-height:64px; padding:0; justify-content:center; text-align:center}
.btn-299{width:299px; min-height:64px; padding:0; justify-content:center; text-align:center}
.btn-note{font-family:var(--body); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; opacity:.7}
/* Их «RESERVE NOW» — белая кнопка на фоне страницы. */
/* Их кнопка BOOK WITH CRYSTAL на странице «о себе» — контурная:
   прозрачная, рамка и текст чёрные. Замер: bg rgba(0,0,0,0),
   border 1px solid rgb(0,0,0), color rgb(0,0,0). */
.btn-outline{background:transparent; color:#000; border-color:#000}
.btn-outline:hover{background:#000; color:#fff}
.btn-light{background:#fff; color:var(--ink); border-color:#fff}
.btn-light:hover{background:transparent; border-color:var(--ink)}
.btn-on-dark{background:#fff; color:var(--ink); border-color:#fff}
.btn-on-dark:hover{background:transparent; color:var(--on-dark); border-color:var(--on-dark)}
.principles-cta{margin-top:24px; display:flex; justify-content:center}

/* ---------- полоса на месте их «FEATURED IN» -------------------------
   Замер их полосы: 1906–2494, высота 588. Подпись 23.7px начинается на
   +138 от верха, ссылка 12.8px справа с правым краем на 1256, ряд знаков
   на +213 (бокс 101 высотой, сам знак 92×37), тексты на +325, низ полосы
   на +588. Отсюда padding-block:138px и внутренние отступы 46 и 11.
   Колонки у них на x=26 / 491 / 853 — это 403 / 303 / 403 с зазором ~60.
   Раньше здесь были две секции с заголовками «Tratamientos» и
   «Cosmética»; косметику владелец просил убрать со страницы. */
.band-press{padding-block:138px}
.press-top{display:flex; align-items:baseline; justify-content:space-between; gap:24px}
/* Их подпись «FEATURED IN» — 23.69px, ссылка справа 12.8px. */
.press-head{flex:1 1 auto; margin:0; font-size:23.7px; line-height:1.24;
  letter-spacing:.08em; font-weight:300}
.press-link{flex:0 0 auto; font-family:var(--body); font-size:12.8px;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor;
  padding-bottom:2px; white-space:nowrap}
.press-link:hover{color:var(--ink-faint)}
.press-cols{display:grid; grid-template-columns:1fr; gap:34px; margin-top:46px}
.press-col{display:flex; flex-direction:column; gap:11px}
.ph-mark{height:101px}
@media (min-width:880px){
  .press-cols{grid-template-columns:403fr 303fr 403fr; gap:60px}
}

/* Скульптура в полосе записи: тот же слот 636×588, что и был. */
.ph-book-img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:636/588}
@media (min-width:880px){ .ph-book-img{align-self:stretch; height:100%} }

/* Их единственный стиль ссылки: 16px, трекинг .1em, капитель на волоске. */
.text-link{
  align-self:flex-start; margin-top:28px; font-size:16px; letter-spacing:.1em;
  font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px;
  transition:color .2s ease, border-color .2s ease;
}
.text-link:hover{color:var(--ink-soft); border-bottom-color:var(--ink-soft)}

/* ---------- price-page title ---------- */
.page-head{padding-block:52px 32px}
.page-head h1{font-size:clamp(28px,5.2vw,37px)}
.page-head .lede{margin-top:16px; max-width:46ch; color:var(--ink-soft); font-size:12.8px}

/* ---------- principles ---------- */
/* Замер их страницы: она стоит на ТРЁХ фонах, а не на одном. Полоса
   «философия» — #343434 высотой 441px во всю ширину; полоса записи —
   #998C80 высотой 588px. Без них страница читается одним бесконечным
   бежевым столбцом. Это и была главная причина, почему наша копия не
   походила на оригинал. */
/* Замер их полосы 1465–1906 (441): заголовок 1547–1605, курсивная
   строка 1654–1672 — она 12.8px, а не 20.6px, как я раньше поставил;
   абзац 1688–1742 (3 строки), кнопка 1766–1830. Колонка 713px по центру.
   Отсюда 82 сверху, 76 снизу и зазоры 49 / 16 / 24. */
.principles{
  background:var(--ink); color:var(--on-dark);
  padding-block:82px 76px; border-top:0;
}
.principles-head{color:var(--on-dark)}
.principle{border-top-color:rgba(242,240,236,.28)}
.principle h3{color:var(--on-dark)}
/* Замер: их «OUR PHILOSOPHY» стоит по центру (x=284 из 1282), 51.4px,
   под ним короткая строка и ссылка — тоже по центру. Было слева и 27px. */
/* Их полоса «философия»: 441px, короткий заголовок в одну строку,
   под ним строка 20.6px, узкий абзац 12.8px и кнопка — всё по центру.
   У нас тут стояли три колонки, отчего полоса вырастала до 615px. */
.principles-head{
  font-size:clamp(30px,4vw,51.4px); line-height:1.134; letter-spacing:.08em;
  margin:0 auto; text-align:center;
}
.principles-line{
  font-size:12.8px; line-height:1.4; font-style:italic; text-align:center;
  max-width:713px; margin:49px auto 0; color:var(--on-dark);
}
.principles-body{
  font-size:12.8px; line-height:1.4; text-align:center;
  max-width:713px; margin:16px auto 0; color:rgba(242,240,236,.80);
}
.principles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
@media (max-width:760px){ .principles-grid{grid-template-columns:1fr; gap:32px} }
.principle{padding-top:20px; border-top:1px solid var(--line)}
.principle h3{font-size:clamp(18px,1.85vw,23.7px); font-weight:300; line-height:1.225; letter-spacing:.08em; margin-bottom:14px}
.principle p{color:rgba(242,240,236,.80); font-size:12.8px}

/* ---------- gallery: two treatment photos, no frame or caption — the
   reference drops full photos into the scroll the same unadorned way.
   Both shots graded with the same filter so their native (mauve-toned)
   stock-photo colour reads as one deliberate, muted palette instead of
   two random sources. ---------- */
.gallery{display:grid; grid-template-columns:1fr; gap:2px}
@media (min-width:640px){ .gallery{grid-template-columns:1fr 1fr} }
.gallery figure{margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--ground-tint)}
.gallery img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* These are the real room under ceiling fluorescents, not a lit set: the
     grade pulls the colour out, warms what is left and drops the exposure
     so they sit in the same light as the hero. */
  filter:grayscale(.62) sepia(.16) contrast(1.06) brightness(.88) saturate(.85);
}

/* ---------- section heads ---------- */
.sec{padding-block:clamp(56px,10.8vh,125px)}
/* two stacked sections used to add both paddings into a dead band */
.sec + .sec, .sec + .contact, .gallery + .sec{padding-top:0}
.sec-head{margin-bottom:38px}
/* Two bands ran their copy down the left 40% of a 1282px page with nothing
   beside it. The second column is content that was already in the section,
   moved out from under the paragraph. */
@media (min-width:880px){
  .sec-split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,88px); align-items:start}
  .sec-split > *{min-width:0}
  .sec-split .sec-head{margin-bottom:0; border-top:1px solid var(--line); padding-top:32px}
  .sec-split .indic{margin-top:0}
}
.sec-head h2{font-size:clamp(30px,4vw,51.4px); margin:0}
.sec-head p{color:var(--ink-soft); margin-top:14px; max-width:54ch}

/* ---------- indications: a thin top rule, not a boxed panel ---------- */
.indic{border-top:1px solid var(--line); padding-top:32px; margin-top:clamp(48px,6vw,72px)}
.indic-head{font-size:clamp(17px,1.85vw,23.7px); font-weight:300; line-height:1.225; letter-spacing:.08em}
.indic ul{list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 26px}
.indic li{padding-left:18px; position:relative; color:var(--ink-soft); font-size:12.8px}
.indic li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--ink)}

/* ---------- price page ---------- */
.price-cat{border-bottom:1px solid var(--line)}
.price-cat-toggle{
  font:inherit; width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:0; cursor:pointer; padding-block:26px; text-align:left; color:var(--ink);
}
.price-cat:first-child .price-cat-toggle{padding-top:0}
.price-cat-toggle:hover .price-cat-name{color:var(--ink)}
.price-cat-name{font-family:var(--display); font-weight:500; font-size:clamp(19px,2.8vw,24px); transition:color .15s ease}
.price-cat-badge{
  font-family:var(--body); font-size:12px; color:var(--ink); background:transparent;
  border:1px solid var(--ink);
  min-width:22px; height:22px; padding:0 7px; display:flex; align-items:center; justify-content:center;
}
.price-cat-chevron{
  margin-left:auto; flex:0 0 auto; width:9px; height:9px; border-right:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft);
  transform:rotate(-45deg); transition:transform .2s ease;
}
.price-cat-toggle[aria-expanded="true"] .price-cat-chevron{transform:rotate(45deg)}
.price-cat-body{padding-bottom:32px}
.price-cat-desc{color:var(--ink-soft); font-size:15px; margin-top:-4px; margin-bottom:22px; max-width:60ch}
.price-items{display:flex; flex-direction:column; gap:0}
.price-item{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 12px;
  padding:13px 4px; border-bottom:1px solid var(--line-soft);
}
.price-item-name{font-size:15px; color:var(--ink); flex:1 1 220px}
.price-item-price{font-family:var(--body); font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink)}
.price-item-btn{margin-left:auto; padding:8px 18px; font-size:11px}
@media (max-width:480px){ .price-item-btn{margin-left:0; flex:1 1 100%; justify-content:center} }

.price-item.is-selectable{cursor:pointer}
.price-item.is-selectable:hover{background:var(--wash)}
.price-item input[type="checkbox"]{
  width:19px; height:19px; flex:0 0 auto; accent-color:var(--ink); cursor:pointer;
}
.price-item:has(input:checked){background:var(--wash)}

.price-cart{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--ground); border-top:1px solid var(--line); box-shadow:var(--shadow);
}
.price-cart-inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px 20px;
  padding-block:16px;
}
.price-cart-info{flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:14px; color:var(--ink-soft)}
.price-cart-inner .btn{flex:0 0 auto}
.price-cart-info strong{color:var(--ink); font-weight:500}

/* ---------- cosmetics: plain tracked names, no bordered pills ---------- */
/* The taupe wash: provisioned in the palette from this world's first day and
   never once spent. The named lines are the page's only product claim, so
   they get the only tinted panel on the site. */
.brands-panel{
  background:var(--wash); border-top:1px solid var(--line);
  padding:32px clamp(22px,3vw,34px) clamp(26px,3vw,34px);
}
.brands-label{
  font-family:var(--body); font-size:11px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-faint); margin:0;
}
.brands-panel .brands{margin-top:18px}
.brands-panel .brands span{font-size:16px; color:var(--ink)}
.brands{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px}
.brands span{font-family:var(--body); font-size:14px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-soft)}
.brands span + span{border-left:1px solid var(--line); padding-left:14px}

/* ---------- contact ---------- */
/* Полоса записи — вторая из трёх у референса: taupe #998C80 во всю
   ширину, крупный заголовок. Мелкого текста на ней нет намеренно:
   белый на taupe даёт 3.27:1, для 12.8px этого мало, а для заголовка
   от 24px норма 3:1 и он проходит. */
/* Их полоса записи 588px: крупный заголовок слева, фото 636×588 справа,
   от края до края по высоте полосы. */
.band-book{background:var(--taupe); padding-block:0}
.band-book-grid{display:grid; grid-template-columns:1fr; gap:0}
.band-book h2{padding-block:0}
.band-book-copy{display:flex; flex-direction:column; gap:28px; padding-block:clamp(48px,8vh,80px)}
.band-book-top{display:flex; flex-direction:column; gap:20px}
@media (min-width:880px){
  /* Замер: их фото при x=646 шириной 636 — правый край ровно на 1282,
     то есть в край страницы, без поля. */
  .band-book .wrap{padding-right:0}
  .band-book-grid{grid-template-columns:minmax(0,1fr) minmax(0,636px); gap:clamp(32px,4vw,64px); align-items:stretch}
  /* Их полоса 2494–3082. Заголовок начинается на +113, строка текста на
     +300, кнопка 248×64 на +412 — её низ на 112px выше низа полосы.
     Отсюда колонка: сверху 113, снизу 112, между ними space-between.
     Кнопка раньше стояла отдельной секцией ПОД полосой (y=3140). */
  .band-book-copy{justify-content:space-between; gap:0; padding:113px 0 112px}
  .band-book-top{gap:70px}
  .ph-book{aspect-ratio:636/588; align-self:stretch}
}
/* Строка под заголовком полосы записи: белым по taupe, 12.8px. */
.band-book-line{margin:0; font-size:12.8px; line-height:1.4; max-width:44ch;
  color:#fff}
.band-book h2{
  color:#fff; font-size:clamp(34px,4vw,51.4px); line-height:1.134;
  letter-spacing:.08em; max-width:22ch; margin:0;
}
.contact{padding-block:clamp(56px,8vh,96px)}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start}
/* The booking flow used to sit inside this grid's left column: a ~1500px
   form running down 40% of the page while the details column sat stranded
   at the top right. It is its own band now, and the form holds a measure
   wide enough for the calendar to breathe without running edge to edge. */
.contact .booking{margin-top:clamp(40px,6vh,64px); max-width:760px}
.contact-grid > *{min-width:0}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr} }
.contact h2{font-size:clamp(30px,4vw,51.4px)}
.contact .lede{color:var(--ink-soft); margin-top:16px; max-width:44ch}
.details{display:grid; gap:20px}
.detail .k{font-family:var(--body); font-size:11px; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-faint)}
.detail .v{font-size:17px; margin-top:4px}
.detail .v a{text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:1px}
.map-directions{
  display:inline-block; margin-top:10px; font-size:14px; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:1px;
}
.contact .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* ---------- booking ---------- */
.booking{margin-top:36px}
.booking-soon{
  border:1px solid var(--line); padding:26px 28px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
}
.booking-soon p{color:var(--ink-soft); font-size:15px; margin:0; flex:1 1 240px}

.booking-noselection{
  border:1px solid var(--line); padding:26px 28px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
}
.booking-noselection p{color:var(--ink-soft); font-size:15px; margin:0; flex:1 1 240px}

.bk-selection{
  background:var(--wash); padding:18px 20px; margin-bottom:24px;
  display:flex; flex-direction:column; gap:7px;
}
.bk-selection-item{display:flex; justify-content:space-between; gap:14px; font-size:14px}
.bk-selection-item span:first-child{color:var(--ink)}
.bk-selection-item span:last-child{color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.bk-selection-total{
  display:flex; justify-content:space-between; gap:14px; font-size:14.5px; font-weight:600;
  border-top:1px solid var(--line); margin-top:5px; padding-top:9px;
}

.booking-form{
  background:var(--ground); border:1px solid var(--line);
  padding:30px;
}
@media (max-width:620px){ .booking-form{padding:22px} }
.bk-step{border:0; margin:0; padding:0; min-width:0}
.bk-step + .bk-step{margin-top:24px}
.bk-step legend{
  font-family:var(--body); font-size:12px; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--ink); padding:0; margin-bottom:16px;
}

.bk-cal{margin-bottom:18px}
.bk-cal-range{
  font-family:var(--body); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px;
}
.bk-cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px}
.bk-cal-weekdays span{display:block; text-align:center; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.bk-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.bk-day-empty{visibility:hidden}
.bk-day{
  font:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; background:var(--ground); border:1px solid var(--line-strong);
  color:var(--ink-soft); transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.bk-day:hover{border-color:var(--ink)}
.bk-day[aria-current="true"]{
  border-color:var(--ink); color:var(--ink); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.bk-day:disabled{opacity:.35; cursor:default; border-style:dashed}
.bk-day:disabled:hover{border-color:var(--line)}
.bk-day{flex-direction:column; gap:1px}
.bk-day-n{font-family:var(--body); font-size:15px; line-height:1}
.bk-day-m{font-family:var(--body); font-size:10px; letter-spacing:.06em; text-transform:uppercase; line-height:1; color:var(--ink-faint)}
.bk-day[aria-current="true"] .bk-day-m{color:var(--ink)}

.bk-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px}
.bk-slot{
  font:inherit; font-size:14px; font-variant-numeric:tabular-nums; cursor:pointer;
  background:var(--ground); border:1px solid var(--line-strong); padding:10px 0; text-align:center;
  color:var(--ink); transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.bk-slot:hover{border-color:var(--ink)}
.bk-slot[aria-current="true"]{
  border-color:var(--ink); color:var(--ink); font-weight:500;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.bk-slot:disabled{opacity:.35; cursor:default; border-style:dashed; text-decoration:line-through; color:var(--ink-faint)}
.bk-slot:disabled:hover{border-color:var(--line)}
.bk-empty{color:var(--ink-faint); font-size:14px}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px; font-size:14px}
.field span{color:var(--ink-soft); font-size:12.5px; letter-spacing:.04em}
.field input{
  font:inherit; font-size:16px; background:var(--ground); color:var(--ink);
  border:1px solid var(--line-strong); padding:12px 13px;
}
.field input:focus-visible{outline:2px solid var(--ink); outline-offset:1px}
/* The field named by a validation error. No colour — a doubled ink edge. */
.field input[aria-invalid="true"],
.bk-phone-input-wrap:has(input[aria-invalid="true"]){
  border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}

.bk-contact-tabs{display:flex; border:1px solid var(--line-strong); overflow:hidden; width:fit-content}
.bk-contact-tab{
  font:inherit; font-size:13px; cursor:pointer; background:transparent; border:0; padding:9px 20px;
  color:var(--ink-soft); transition:background .15s ease, color .15s ease;
}
.bk-contact-tab[aria-pressed="true"]{
  color:var(--ink); font-weight:500;
  box-shadow:inset 0 -2px 0 0 var(--ink);
}
.bk-phone-row{display:flex; gap:8px; min-width:0}
.bk-phone-row select{
  font:inherit; font-size:16px; background:var(--ground); color:var(--ink);
  border:1px solid var(--line-strong); padding:12px 8px; flex:0 0 auto; max-width:40%;
}
/* The fixed mobile prefix (e.g. Argentina's "9") used to sit in its own
   bordered box — read as a second, confusingly empty field before typing
   anything. It's not a field; it's a fixed part of the number. One bordered
   wrap now holds both, so it reads as one input with a prefix, not two. */
.bk-phone-input-wrap{
  display:flex; align-items:stretch; flex:1 1 auto; min-width:0;
  border:1px solid var(--line-strong); background:var(--ground);
}
.bk-phone-input-wrap:focus-within{outline:2px solid var(--ink); outline-offset:1px}
.bk-phone-fixed{
  font:inherit; font-size:16px; color:var(--ink-faint);
  padding:12px 0 12px 13px; flex:0 0 auto; display:flex; align-items:center;
}
.bk-phone-input-wrap input{
  font:inherit; font-size:16px; background:transparent; color:var(--ink);
  border:0; padding:12px 13px; flex:1 1 auto; min-width:0;
}
.bk-phone-input-wrap input:focus-visible{outline:0}
.bk-phone-row select:focus-visible{outline:2px solid var(--ink); outline-offset:1px}
.bk-phone-hint{font-size:12px; color:var(--ink-faint); margin:4px 0 0}

.bk-summary{
  background:var(--wash); padding:18px 20px; margin-top:24px;
  display:grid; gap:9px;
}
.bk-summary-row{display:flex; justify-content:space-between; gap:16px; font-size:14.5px}
.bk-summary-row span{color:var(--ink-soft)}
.bk-summary-row strong{font-weight:600; text-align:right}

/* No coloured type anywhere, errors included — the reference has none and
   the world bans it. Salience comes from the taupe wash and a 2px ink rule
   down the left edge, not from red. */
.bk-error{
  color:var(--ink); font-size:13.5px; margin-top:16px; padding:11px 15px;
  background:var(--wash); border:1px solid var(--line-strong);
  border-left:2px solid var(--ink);
}

.bk-actions{display:flex; gap:10px; margin-top:26px}
.bk-actions .btn[disabled]{opacity:.5; cursor:default}

.booking-done{
  background:var(--ground); border:1px solid var(--line);
  padding:30px; display:grid; gap:9px;
}
.bk-done-title{
  font-family:var(--display); font-weight:500; font-size:28px; color:var(--ink); margin-bottom:8px;
}
.bk-done-note{color:var(--ink-soft); font-size:13.5px; margin-top:12px}

/* Замер: подвал у них — две колонки с дисплейными заголовками 20.6px
   (STUDIO / CONTACT) и мелкими строками под ними. */
footer{border-top:1px solid var(--line-soft); padding-block:clamp(44px,6vw,72px); color:var(--ink-faint); font-size:12.8px}
.foot{display:grid; grid-template-columns:1fr; gap:26px 40px; align-items:start}
@media (min-width:760px){ .foot{grid-template-columns:1fr 1fr} }
.foot h2{font-family:var(--display); font-weight:300; font-size:20.6px; line-height:1.236;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 14px}
.foot p{margin:0 0 6px; color:var(--ink-faint)}
.foot a{color:var(--ink-faint); text-decoration:none; border-bottom:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }