/* ============================================================
   FONTS - self-hosted, pruned to what this page can actually render.

   Fraunces and Plus Jakarta Sans were dropped: neither ships Cyrillic, so
   every RU/UA glyph fell through to Playfair Display / Manrope anyway, and
   the leftover Latin words rendered in a different typeface mid-sentence.
   Subsets kept: cyrillic (covers Ukrainian є і ї ґ), latin, plus Manrope
   cyrillic-ext for ₴. Dropped: greek, vietnamese, latin-ext.

   690 KB in 28 files  ->  see tools/fonts.mjs to change this.
   ============================================================ */
/* Playfair Display: один файл на стиль, кириллица и знаки вместе.
   ------------------------------------------------------------------
   Раньше здесь было четыре объявления: кириллический сабсет и латинский, на
   каждый стиль. Кириллические файлы не содержат ни точки, ни запятой, ни цифр
   - только буквы и пробел. Поэтому русский заголовок с запятой тянул ЛАТИНСКИЙ
   файл, и оба латинских (76 КБ) грузились на страницу, где Playfair не рисует
   ни одной латинской буквы. Замерено: они приходили с 981-й по 2614-ю мс, то
   есть ровно в окно LCP, отбирая полосу у картинки первого экрана.

   Теперь один файл на стиль: кириллица + цифры + знаки. 120 КБ -> 66 КБ и два
   запроса вместо четырёх. Файлы собраны Google Fonts под конкретный набор
   символов, оси веса сохранены (400-900).

   unicode-range намеренно НЕ указан: файл и так нужен, как только на странице
   появляется Playfair, а перечислять диапазон вручную - лишний способ
   разойтись с содержимым файла.

   Латинских букв в этих файлах НЕТ. Если они появятся в тексте, набранном
   Playfair (заголовок, цена, цитата), браузер молча отрисует их Georgia.
   Против этого стоит tools/font-coverage.mjs: он падает, если на странице
   встретился символ, которого нет в поставляемом файле. Гонять после любой
   правки видимого текста. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/playfair-ru.woff2") format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/playfair-ru-italic.woff2") format('woff2');
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   METRIC-MATCHED FALLBACKS
   Held to the same size as the web fonts so nothing reflows when
   font-display:swap swaps them in. Regenerate with
   node tools/font-fallbacks.mjs after changing either font.
   ============================================================ */
/* Playfair Display -> Georgia, metrics measured by tools/font-fallbacks.mjs */
@font-face{
  font-family:"Playfair Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Noto Serif"),local("Droid Serif");
  size-adjust:101.23%;
  ascent-override:106.89%;
  descent-override:24.80%;
  line-gap-override:0.00%;
}
/* Manrope -> Arial, metrics measured by tools/font-fallbacks.mjs */
@font-face{
  font-family:"Manrope Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Noto Sans");
  size-adjust:98.55%;
  ascent-override:108.17%;
  descent-override:30.44%;
  line-gap-override:0.00%;
}

/* ============================================================
   TAILWIND v3.4.16 - precompiled, ONLY the classes this markup uses.
   Never reintroduce cdn.tailwindcss.com: it is a ~3 MB render-blocking
   JIT compiler meant for prototyping.

   Consequence to remember: a Tailwind class that is not already in this
   sheet does NOTHING. When adding markup (voices, cookie banner, video
   modal) either write plain CSS in the design system below - which is how
   the design system is built anyway - or recompile against
   tools/tailwind.config.js.
   ============================================================ */
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Manrope,'Manrope Fallback',system-ui, -apple-system, Segoe UI, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.left-\[-96px\]{left:-96px}.top-4{top:1rem}.-bottom-6{bottom:-1.5rem}.-left-3{left:-0.75rem}.right-0{right:0px}.top-0{top:0px}.m-0{margin:0px}.mx-auto{margin-left:auto;margin-right:auto}.mb-0{margin-bottom:0px}.mb-7{margin-bottom:1.75rem}.mt-10{margin-top:2.5rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.mb-1\.5{margin-bottom:0.375rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:0.5rem}.mb-2\.5{margin-bottom:0.625rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-7{margin-top:1.75rem}.mt-9{margin-top:2.25rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-16{height:4rem}.h-full{height:100%}.w-\[250px\]{width:250px}.w-full{width:100%}.w-16{width:4rem}.w-\[46\%\]{width:46%}.max-w-\[33rem\]{max-width:33rem}.max-w-shell{max-width:1240px}.max-w-3xl{max-width:48rem}.max-w-\[15\.5rem\]{max-width:15.5rem}.max-w-\[24rem\]{max-width:24rem}.max-w-\[42rem\]{max-width:42rem}.shrink-0{flex-shrink:0}.translate-x-4{--tw-translate-x:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-4{--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-3{gap:0.75rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-x-4{column-gap:1rem}.gap-y-1\.5{row-gap:0.375rem}.gap-x-6{column-gap:1.5rem}.gap-x-7{column-gap:1.75rem}.gap-y-2{row-gap:0.5rem}.gap-y-3{row-gap:0.75rem}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}.space-y-9 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.25rem * var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-\[22px\]{border-radius:22px}.rounded-\[26px\]{border-radius:26px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:0.75rem}.object-cover{object-fit:cover}.p-0{padding:0px}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.pt-2{padding-top:0.5rem}.pt-8{padding-top:2rem}.pt-\[calc\(var\(--nav-h\)\+2\.2rem\)\]{padding-top:calc(var(--nav-h) + 2.2rem)}.pb-12{padding-bottom:3rem}.pb-8{padding-bottom:2rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-7{padding-top:1.75rem}.text-center{text-align:center}.text-\[\.78rem\]{font-size:.78rem}.text-\[\.83rem\]{font-size:.83rem}.text-\[\.66rem\]{font-size:.66rem}.text-\[\.72rem\]{font-size:.72rem}.text-\[\.79rem\]{font-size:.79rem}.text-\[\.85rem\]{font-size:.85rem}.text-\[\.86rem\]{font-size:.86rem}.text-\[\.88rem\]{font-size:.88rem}.text-\[\.92rem\]{font-size:.92rem}.text-\[\.94rem\]{font-size:.94rem}.text-\[\.95rem\]{font-size:.95rem}.text-\[\.96rem\]{font-size:.96rem}.text-\[\.9rem\]{font-size:.9rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-\[\.16em\]{letter-spacing:.16em}.tracking-\[\.2em\]{letter-spacing:.2em}.text-\[\#6B7874\]{--tw-text-opacity:1;color:rgb(107 120 116 / var(--tw-text-opacity, 1))}.opacity-\[\.3\]{opacity:.3}.opacity-\[\.09\]{opacity:.09}.shadow-\[0_50px_90px_-50px_rgba\(28\2c 40\2c 38\2c \.5\)\]{--tw-shadow:0 50px 90px -50px rgba(28,40,38,.5);--tw-shadow-colored:0 50px 90px -50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_46px_80px_-48px_rgba\(28\2c 40\2c 38\2c \.44\)\]{--tw-shadow:0 46px 80px -48px rgba(28,40,38,.44);--tw-shadow-colored:0 46px 80px -48px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_46px_84px_-46px_rgba\(28\2c 40\2c 38\2c \.46\)\]{--tw-shadow:0 46px 84px -46px rgba(28,40,38,.46);--tw-shadow-colored:0 46px 84px -46px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\:translate-y-\[-2px\]:hover{--tw-translate-y:-2px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 640px){.sm\:left-\[-2\.2rem\]{left:-2.2rem}.sm\:block{display:block}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:p-9{padding:2.25rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width: 1024px){.lg\:sticky{position:sticky}.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:inline-flex{display:inline-flex}.lg\:hidden{display:none}.lg\:grid-cols-\[1\.06fr_\.94fr\]{grid-template-columns:1.06fr .94fr}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:grid-cols-\[\.85fr_1\.15fr\]{grid-template-columns:.85fr 1.15fr}.lg\:grid-cols-\[\.88fr_1\.12fr\]{grid-template-columns:.88fr 1.12fr}.lg\:grid-cols-\[\.8fr_1\.2fr\]{grid-template-columns:.8fr 1.2fr}.lg\:grid-cols-\[\.92fr_1\.08fr\]{grid-template-columns:.92fr 1.08fr}.lg\:grid-cols-\[\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:gap-8{gap:2rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:pb-24{padding-bottom:6rem}.lg\:pt-\[calc\(var\(--nav-h\)\+3\.6rem\)\]{padding-top:calc(var(--nav-h) + 3.6rem)}}@media (min-width: 1280px){.xl\:block{display:block}}

/* ============================================================
   DESIGN SYSTEM - plain CSS so the brand identity survives even
   if the Tailwind CDN is slow, blocked, or offline.
   ============================================================ */
:root{
  --cream:#FDFBF7; --cream-2:#F5EFE4; --cream-3:#EDE4D6;
  --ink:#1C2826; --ink-2:#4C5B57; --ink-3:#6B7874;
  --sage:#7A8B7B; --sage-1:#E4E9E2;
  --ochre:#C87D55; --ochre-1:#F6E7DC;
  --nav-h:78px; --top-h:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Manrope','Manrope Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.72; font-weight:350;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* NOTE: the `body` prefix is deliberate. Tailwind's Preflight resets
   `p{margin:0}` and `h1..h6{font-weight:inherit}` at the same specificity
   as a bare element selector, and the CDN injects its sheet AFTER this one -
   so bare `p{}` / `h1{}` rules here would lose. `body p` (0,0,2) wins. */
body h1,body h2,body h3,body h4,body blockquote,body .display{
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif;
  font-weight:400; letter-spacing:-.015em; line-height:1.12; color:var(--ink);
}
body h1 em,body h2 em,body .display em{font-style:italic; color:var(--ochre); font-weight:400}
body p{margin:0 0 1.15em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
section{scroll-margin-top:calc(var(--nav-h) + 14px)}
::selection{background:var(--ochre); color:#fff}

/* focus visibility - keyboard only */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--ochre); outline-offset:3px; border-radius:6px;
}

/* ---------- typographic scale ---------- */
.h-hero{font-size:clamp(2.6rem,6.6vw,5.1rem); line-height:1.04; letter-spacing:-.03em}
.h-sec{font-size:clamp(2rem,4vw,3.35rem); line-height:1.08; letter-spacing:-.025em}
.h-sub{font-size:clamp(1.28rem,2vw,1.6rem); line-height:1.24}
.lead{font-size:clamp(1.06rem,1.35vw,1.22rem); color:var(--ink-2); line-height:1.75}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.735rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage);
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; opacity:.6; flex:none}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.75rem; border:1px solid transparent; border-radius:999px;
  background:var(--bg); color:var(--fg); cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:600; letter-spacing:.02em; line-height:1;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn svg{width:17px; height:17px; flex:none}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(28,40,38,.45)}
.btn:active{transform:translateY(0)}
.btn-ochre{--bg:var(--ochre); --fg:#fff}
.btn-ochre:hover{--bg:var(--ochre); box-shadow:0 16px 34px -12px rgba(200,125,85,.6)}
.btn-outline{--bg:transparent; --fg:var(--ink); border-color:rgba(28,40,38,.22)}
.btn-outline:hover{--bg:var(--ink); --fg:#fff; border-color:var(--ink)}
.btn-ghost{--bg:transparent; --fg:var(--ink); padding-left:.4rem; padding-right:.4rem}
.btn-ghost:hover{--fg:var(--ochre); transform:none; box-shadow:none}
.btn-sm{padding:.72rem 1.3rem; font-size:.82rem}
.btn-lg{padding:1.15rem 2.1rem; font-size:.95rem}

/* arrow link */
.alink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600; letter-spacing:.03em; color:var(--ochre);
  /* Замерено: без этого высота ссылки 23px - для пальца мало, промахнуться
     легко. Отрицательный margin гасит padding, поэтому зона нажатия
     вырастает до 43px, а вёрстка карточки не сдвигается ни на пиксель. */
  padding:.62rem 0; margin:-.62rem 0;
}
.alink svg{width:16px; height:16px; transition:transform .35s var(--ease)}
.alink:hover svg{transform:translate(4px,-4px)}

/* ---------- floating badge on the method photo ---------- */
.method-badge{
  position:absolute; bottom:-2rem; right:-1rem; display:none;
  width:9.5rem; height:9.5rem; border-radius:50%; padding:.6rem;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.18rem;
  background:var(--ochre); color:#fff; border:6px solid var(--cream);
  box-shadow:0 26px 46px -26px rgba(28,40,38,.5);
}
@media(min-width:640px){ .method-badge{display:flex} }
@media(min-width:1024px){ .method-badge{width:11rem; height:11rem; right:-1.6rem} }
.method-badge svg{width:21px; height:21px; margin-bottom:.28rem; opacity:.92}
.method-badge-n{font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:.95rem; line-height:1.2}
.method-badge-d{font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; opacity:.85}

/* ---------- practice story ---------- */
.story{
  display:flex; gap:1.5rem; align-items:flex-start;
  margin-top:3.5rem; padding:2.2rem 2.3rem;
  background:#fff; border:1px solid var(--cream-3); border-radius:24px;
  box-shadow:0 30px 60px -44px rgba(28,40,38,.3);
}
.story-ico{
  display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:16px;
  background:var(--sage-1); color:var(--sage);
}
.story-ico svg{width:24px; height:24px}
.story-body{max-width:46rem}
.story p{font-size:.98rem; line-height:1.8; color:var(--ink-2); margin:0 0 .9rem}
.story p:last-child{margin-bottom:0}
.story-lead{
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif !important;
  font-size:clamp(1.2rem,1.8vw,1.45rem) !important; line-height:1.3 !important;
  color:var(--ink) !important; margin-bottom:1rem !important;
}
@media(max-width:640px){ .story{margin-top:2.5rem; padding:1.7rem 1.4rem; border-radius:20px; gap:1.1rem; flex-direction:column} .story-ico{width:46px; height:46px; border-radius:14px} }

/* ---------- crisis notice ---------- */
.crisis{border-radius:24px; padding:1.9rem; background:rgba(200,125,85,.1); border:1px solid rgba(200,125,85,.3)}
.crisis-head{display:flex; gap:1.15rem; align-items:flex-start}
.crisis-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:14px; flex:none; background:var(--ochre); color:#fff}
.crisis-t{color:#fff; font-size:1.08rem; margin:.15rem 0 .5rem}
.crisis-p{font-size:.88rem; line-height:1.62; margin:0; color:rgba(253,251,247,.72); max-width:52rem}
.crisis-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.7rem; margin:1.5rem 0 1.1rem}
.crisis-card{
  display:flex; flex-direction:column; gap:.28rem; padding:.95rem 1.1rem; border-radius:15px;
  background:rgba(253,251,247,.07); border:1px solid rgba(253,251,247,.13);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.crisis-card:hover{background:rgba(253,251,247,.12); border-color:rgba(200,125,85,.5); transform:translateY(-2px)}
.crisis-num{font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:1.24rem; line-height:1.1; color:#fff}
.crisis-d{font-size:.79rem; line-height:1.45; color:rgba(253,251,247,.66)}
.crisis-note{font-size:.81rem; margin:0; color:rgba(253,251,247,.5)}
@media(max-width:560px){ .crisis{padding:1.5rem 1.25rem} .crisis-head{gap:.9rem} }

/* ---------- credentials strip ---------- */
.cred-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--cream-3); border-radius:20px; padding:1.5rem 1.4rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cred-card:hover{transform:translateY(-4px); box-shadow:0 28px 52px -34px rgba(28,40,38,.32)}
.cred-card .cred-ico{margin-bottom:1rem}
.cred-t{font-weight:650; font-size:.95rem; line-height:1.3; color:var(--ink); margin-bottom:.35rem}
.cred-d{font-size:.83rem; line-height:1.55; color:var(--ink-3)}

/* ---------- pricing ---------- */
.price-row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem;
  padding:1.55rem 0; border-bottom:1px solid var(--cream-3);
}
.price-row:last-of-type{border-bottom:0}
.price-meta{font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ochre); margin-bottom:.5rem}
.price-name{font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.2; margin:0}
.price-val{font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:clamp(1.35rem,2.2vw,1.75rem); white-space:nowrap; color:var(--ink)}
/* На телефоне цена всегда под названием.
   Раньше раскладка была одна на все ширины: строка flex с align-items:baseline,
   где цена вставала на базовую линию ПОДПИСИ ("60 минут"), а не названия. Пока
   места хватало, это выглядело задумкой. На 390px длинное "Индивидуальная
   консультация" занимало всю строку и цена переносилась вниз - а у двух
   коротких названий оставалась наверху. Получалось, что из трёх позиций одна
   свёрстана иначе, чем две другие. Колонка убирает саму возможность такого
   расхождения: порядок всегда один - длительность, название, цена. */
@media(max-width:640px){
  .price-row{flex-direction:column; align-items:flex-start; gap:.25rem}
}
/* Ханипот. Не display:none и не hidden: часть ботов такие поля пропускает
   именно потому, что их пропустил бы и человек. Поле остаётся в потоке, но
   уезжает за пределы экрана и не принимает ни клик, ни Tab. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
.pay{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem}
/* Тоже обычная насыщенность - см. .badge-val. Полужирным "Wise" читался
   тяжелее, чем "Банковская карта" рядом, хотя вес у них один и тот же. */
.pay-chip{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:400;
  padding:.5rem .85rem; border-radius:999px; background:#fff; border:1px solid var(--cream-3); color:var(--ink);
}
.pay-chip svg{width:15px; height:15px; color:var(--ochre)}

/* ---------- header / nav ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(253,251,247,0); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, box-shadow .4s, height .4s var(--ease);
}
.site-head.is-stuck{
  height:66px;
  background:rgba(253,251,247,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom-color:rgba(28,40,38,.09);
  box-shadow:0 10px 40px -28px rgba(28,40,38,.5);
}
/* Кто из элементов шапки виден на какой ширине.

   Задано здесь, а не утилитами hidden / lg:inline-flex / sm:inline-flex из
   разметки. Те объявлены выше в файле, в выжимке Tailwind, и проигрывают по
   каскаду правилам .btn и .burger из этой дизайн-системы: у одиночных
   классов специфичность одинаковая, побеждает то правило, что ниже в файле.
   Селектор из двух классов сильнее любого одиночного, поэтому эти правила
   работают независимо от порядка.

   Без них на телефоне в строку набивались бренд, "Стоимость", "Записаться" и
   бургер. Замерено при вьюпорте 375: правый край "Стоимости" приходился на
   465, "Записаться" на 621, бургера на 673 - то есть меню, единственное на
   телефоне, целиком уезжало за экран и открыть его было нельзя. Сам документ
   при этом не расширялся: .site-head фиксирован и в scrollWidth не входит,
   так что остальная страница была в порядке - ломалась только шапка.

   Утилиты в разметке оставлены: они выражают ту же самую задумку и теперь ей
   не противоречат. */
@media (max-width:1023.98px){
  .site-head .btn-outline{display:none}   /* "Стоимость" - только с 1024 */
}
@media (max-width:639.98px){
  .site-head .btn-ochre{display:none}     /* "Записаться" - только с 640 */
}
@media (min-width:1024px){
  .site-head .burger{display:none}        /* бургер - только до 1024 */
}
.brand-name{
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif;
  font-size:1.02rem; letter-spacing:.19em; text-transform:uppercase; line-height:1;
}
.brand-sub{font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--sage); margin-top:.34rem}
.navlink{
  position:relative; font-size:.87rem; font-weight:500; color:var(--ink-2);
  padding:.35rem 0; transition:color .3s;
}
.navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--ochre); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlink:hover{color:var(--ink)}
.navlink:hover::after,.navlink.is-active::after{transform:scaleX(1)}
.navlink.is-active{color:var(--ink); font-weight:600}

/* Волосяная линия вместо жирной: 1px в приглушённом --ink-2 читается легче и
   ближе к типографике страницы, где основной текст тоже не чёрный. Зона
   нажатия остаётся 44px - это минимум, ниже которого попадать пальцем тяжело.
   Сдвиг в крестике равен расстоянию между центрами полос: 1px высота + 5px
   зазор = 6px. При смене высоты или зазора это число надо пересчитать. */
/* flex, а не grid: у grid три строки растягивались на всю высоту кнопки
   ((44 - 2*5) / 3 = 11.33px на строку), поэтому центры полос стояли в 16.33px
   друг от друга, а не в 6px, и крестик не складывался - полосы сходились в
   "галочку". В колонке flex полосы занимают ровно свою высоту, и расстояние
   между центрами равно высоте плюс зазор, то есть тем самым 6px. */
.burger{width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:0; cursor:pointer}
.burger span{display:block; width:20px; height:1px; background:var(--ink-2); border-radius:2px; transition:transform .4s var(--ease), opacity .3s, background-color .3s}
.burger:hover span{background:var(--ink)}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Кнопка в самом меню закрывает его, поэтому она сразу крестик: три полоски
   там читались как "открыть меню", хотя меню уже открыто. Класс is-open ей не
   ставится - меню и так открыто, когда она видна, - поэтому вид задан здесь. */
.drawer .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.drawer .burger span:nth-child(2){opacity:0}
.drawer .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- mobile drawer ---------- */
.scrim{
  position:fixed; inset:0; z-index:70; background:rgba(28,40,38,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.scrim.is-open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; z-index:80; width:min(88vw,380px); height:100%;
  background:var(--cream); padding:1.5rem 1.6rem 2.2rem;
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .5s var(--ease);
  box-shadow:-30px 0 70px -40px rgba(28,40,38,.6); overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer-link{
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:1.5rem;
  padding:.72rem 0; border-bottom:1px solid var(--cream-3); transition:color .3s, padding-left .3s;
}
.drawer-link:hover{color:var(--ochre); padding-left:.4rem}

/* ---------- organic frames ---------- */
.frame-arch{border-radius:min(50%,260px) min(50%,260px) 26px 26px; overflow:hidden}
.frame-blob{border-radius:56% 44% 52% 48% / 46% 42% 58% 54%; overflow:hidden}
.frame-soft{border-radius:26px; overflow:hidden}
.frame-pill{border-radius:200px 26px 200px 26px; overflow:hidden}
.frame-arch img,.frame-blob img,.frame-soft img,.frame-pill img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s;
}
.hoverzoom:hover img{transform:scale(1.045)}

/* warm grade over cool stock photography */
.grade{position:relative}
.grade::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,rgba(200,125,85,.14),transparent 45%,rgba(122,139,123,.16));
  mix-blend-mode:multiply;
}

/* ---------- cards ---------- */
.card{
  position:relative; background:#fff; border:1px solid var(--cream-3); border-radius:22px;
  padding:2rem 1.85rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--ochre);
  box-shadow:0 30px 60px -34px rgba(28,40,38,.34);
}
.card-ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--sage-1); color:var(--sage); margin-bottom:1.3rem;
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.card-ico svg{width:24px; height:24px}
.card:hover .card-ico{background:var(--ochre); color:#fff; transform:rotate(-6deg) scale(1.06)}

/* ---------- hero trust badges ---------- */
.badge-lbl{display:block; font-size:.6rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.22rem}
/* Обычная насыщенность, а не 600: это факты под подписью, а не акцент.
   Полужирным латиница ("Google Meet") выпирала из кириллических соседей. */
.badge-val{display:block; font-size:.845rem; font-weight:400; line-height:1.32; color:var(--ink)}

/* ---------- messenger intercept modal ---------- */
.mm-back{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:1.1rem; background:rgba(28,40,38,.52); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); opacity:0; transition:opacity .32s var(--ease)}
.mm-back.is-open{display:flex}
.mm-back.is-in{opacity:1}
.mm{position:relative; width:100%; max-width:29.5rem; max-height:calc(100vh - 2.2rem); overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--cream); border-radius:26px; padding:2.1rem 1.9rem 1.8rem; box-shadow:0 60px 110px -40px rgba(28,40,38,.6); transform:translateY(16px) scale(.985); transition:transform .38s var(--ease)}
.mm-back.is-in .mm{transform:none}
.mm-x{position:absolute; top:.95rem; right:.95rem; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:transparent; color:var(--ink-3); border:0; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease)}
.mm-x:hover{background:var(--cream-3); color:var(--ink)}
.mm-x svg{width:19px; height:19px}
.mm h3{font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:1.72rem; line-height:1.16; margin:.55rem 0 .8rem}
.mm-note{font-size:.92rem; line-height:1.65; color:var(--ink-2); margin:0}
.mm-list{list-style:none; padding:0; margin:1.35rem 0 1.5rem; display:flex; flex-direction:column; gap:.85rem}
.mm-list li{display:flex; gap:.7rem; font-size:.88rem; line-height:1.6; color:var(--ink-2); padding-top:.85rem; border-top:1px solid var(--cream-3)}
.mm-list li:first-child{padding-top:0; border-top:0}
.mm-list .ico{width:17px; height:17px; color:var(--sage); flex:none; margin-top:.24rem}
.mm-list b{color:var(--ink); font-weight:650}
.mm-acts{display:flex; flex-direction:column; gap:.6rem}
.mm-copy{margin-top:1.4rem; padding-top:1.25rem; border-top:1px solid var(--cream-3)}
.mm-copy p{font-size:.8rem; line-height:1.55; color:var(--ink-3); margin:0 0 .7rem}
.mm-copy-row{display:flex; gap:.6rem; align-items:stretch}
.mm-copy-txt{flex:1; background:var(--cream-2); border:1px solid var(--cream-3); border-radius:13px; padding:.7rem .85rem; font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-style:italic; font-size:.87rem; line-height:1.45; color:var(--ink-2)}
.mm-copy-btn{flex:none; align-self:center; font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:.7rem .95rem; border-radius:12px; background:transparent; border:1px solid rgba(28,40,38,.2); color:var(--ink); cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.mm-copy-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
@media(max-width:480px){ .mm{padding:1.8rem 1.25rem 1.5rem; border-radius:22px} .mm h3{font-size:1.5rem} .mm-copy-row{flex-direction:column} .mm-copy-btn{align-self:stretch} }

/* ---------- tabs ---------- */
.tab{
  padding:.6rem 1.2rem; border-radius:999px; border:1px solid var(--cream-3);
  background:transparent; color:var(--ink-2); cursor:pointer;
  font-family:inherit; font-size:.83rem; font-weight:600; letter-spacing:.02em;
  transition:all .35s var(--ease);
}
.tab:hover{border-color:var(--sage); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.spec-item{transition:opacity .45s var(--ease), transform .45s var(--ease)}
.spec-item.is-hidden{display:none}
.spec-item.is-entering{opacity:0; transform:translateY(14px) scale(.985)}

/* ---------- process ---------- */
.phase{position:relative; padding-left:0}
.phase-num{
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:.95rem;
  letter-spacing:.14em; color:var(--ochre);
}
.step{position:relative; padding-left:3.4rem}
.step::before{
  content:''; position:absolute; left:1.05rem; top:2.4rem; bottom:-1.9rem;
  width:1px; background:linear-gradient(var(--cream-3),transparent);
}
.step:last-child::before{display:none}
.step-dot{
  position:absolute; left:0; top:.35rem; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--cream-2); color:var(--sage);
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:.78rem; letter-spacing:.06em;
  border:1px solid var(--cream-3); transition:all .4s var(--ease);
}
.step:hover .step-dot{background:var(--ochre); color:#fff; border-color:var(--ochre)}

/* ---------- credentials ---------- */
.cred{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 0; border-bottom:1px solid var(--cream-3);
}
.cred:last-child{border-bottom:0}
.cred-ico{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--ochre-1); color:var(--ochre);
}
.cred-ico svg{width:17px; height:17px}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid var(--cream-3);
  transition:background .4s var(--ease);
}
.faq-item:first-child{border-top:1px solid var(--cream-3)}
.faq-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  padding:1.5rem .4rem; background:none; border:0; cursor:pointer; text-align:left;
  font-family:'Playfair Display','Playfair Fallback',Georgia,serif; font-size:clamp(1.03rem,1.5vw,1.2rem);
  line-height:1.35; color:var(--ink); transition:color .3s;
}
.faq-q:hover{color:var(--ochre)}
.faq-mark{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--cream-3); color:var(--sage); margin-top:.1rem;
  transition:transform .45s var(--ease), background .35s, color .35s, border-color .35s;
}
.faq-mark svg{width:16px; height:16px}
.faq-item.is-open .faq-mark{transform:rotate(180deg); background:var(--ochre); border-color:var(--ochre); color:#fff}
.faq-item.is-open .faq-q{color:var(--ochre)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 3.2rem 1.6rem .4rem; margin:0; color:var(--ink-2); font-size:1rem}

/* ---------- form ---------- */
.field{position:relative; margin-bottom:1.15rem}
.label{display:block; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem}
.input,.select,.textarea{
  width:100%; padding:.95rem 1.1rem; border:1px solid var(--cream-3); border-radius:14px;
  background:#fff; color:var(--ink); font-family:inherit; font-size:1rem; line-height:1.5;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.textarea{resize:vertical; min-height:132px}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8B7B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.05rem center; padding-right:2.6rem}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--ochre); box-shadow:0 0 0 4px rgba(200,125,85,.12);
}
.input::placeholder,.textarea::placeholder{color:#A9B2AF}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:#C0534A; box-shadow:0 0 0 4px rgba(192,83,74,.1)}
.err{display:none; font-size:.79rem; color:#C0534A; margin-top:.4rem; font-weight:500}
.field.has-error .err{display:block}
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--ink-3); line-height:1.55; cursor:pointer}
.check input{margin-top:.24rem; width:17px; height:17px; accent-color:var(--ochre); flex:none; cursor:pointer}

/* ---------- footer ---------- */
.foot-link{font-size:.9rem; color:rgba(253,251,247,.66); transition:color .3s, padding-left .3s}
.foot-link:hover{color:#fff; padding-left:.25rem}
.social{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(253,251,247,.2); color:rgba(253,251,247,.75);
  transition:all .35s var(--ease);
}
.social svg{width:17px; height:17px}
.social:hover{background:var(--ochre); border-color:var(--ochre); color:#fff; transform:translateY(-3px)}

/* ---------- decorative ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{position:fixed; top:0; left:0; z-index:90; height:2px; width:0; background:var(--ochre); transition:width .12s linear}
.blur-orb{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* Не считать вёрстку того, что за кадром.
   ------------------------------------------------------------------
   Страница высотой 16 500px из 814 элементов раскладывалась целиком, хотя
   видно только первый экран. Замерено Lighthouse: Style & Layout 755 мс, и это
   умножается на четырёхкратный троттлинг процессора - отсюда пустой экран до
   2.3 с при том, что все файлы скачаны к 600 мс.

   content-visibility:auto разрешает браузеру пропускать раскладку и отрисовку
   секции, пока она не подошла к экрану. contain-intrinsic-size даёт оценку
   высоты, чтобы полоса прокрутки не прыгала; auto означает "запомни настоящую
   высоту после первой раскладки и дальше используй её".

   Первый экран (#top) сюда НЕ входит: его надо посчитать сразу.

   Оценка высоты подобрана по замеру, а не на глаз: страница целиком - 10 455px
   на десктопе и 16 421px на телефоне при восьми секциях, то есть примерно
   1400px и 2100px на секцию. С заведомо маленькой оценкой полоса прокрутки
   поначалу короче настоящей и подрастает по мере прокрутки. Скачка вёрстки при
   этом нет - привязка прокрутки в браузере держит содержимое на месте, CLS в
   замерах остался нулевым, - но и врать о высоте без нужды не стоит. */
#specialties, #approach, #about, #voices, #pricing, #faq, #contact, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}
/* На телефоне секции расходятся по высоте почти втрое, поэтому одна оценка на
   всех врёт в обе стороны: с 2100px документ вышел 20 098px вместо настоящих
   16 421px. Замеренные высоты: запросы 2607, метод 2568, обо мне 2551, истории
   890, цены 1022, вопросы 1476, контакт 1495. Отсюда две группы. */
@media (max-width:640px){
  #specialties, #approach, #about { contain-intrinsic-size: auto 2570px }
  #voices, #pricing, #faq, #contact, footer { contain-intrinsic-size: auto 1250px }
}

/* Первый экран не проявляется - он и так перед глазами, когда страница
   открылась. Проявляться ему нечем и незачем, а цена этому была велика.

   Замерено Lighthouse: LCP-элементом оказался H1, а не картинка, и его
   "задержка отрисовки" составляла 3199 мс при времени до первого байта 6 мс.
   Заголовок лежал с opacity:0 и ждал сразу двух вещей: пока разберётся
   site.js и сработает IntersectionObserver, и пока доиграет переход на 0.9 с.
   На слабом процессоре это давало LCP 5.6 с при FCP 1.5 с - четыре секунды
   пустого экрана с уже полученным текстом.

   Селектор из id и класса сильнее и .reveal, и .reveal.is-in, поэтому
   разметку трогать не нужно: классы остаются, ниже первого экрана всё
   по-прежнему проявляется по скроллу. */
#top .reveal{opacity:1; transform:none; transition:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}

/* skip link */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.85rem 1.3rem; border-radius:0 0 12px 0; font-size:.85rem}
.skip:focus{left:0}

/* ============================================================
   BLOCKS PORTED FROM PRODUCTION
   Plain CSS on purpose: assets/site.css ships a precompiled Tailwind
   sheet containing only the classes the original markup used, so a new
   utility class here would silently do nothing.
   ============================================================ */

/* ---------- voices carousel ---------- */
.voices-track{
  --pad:1.25rem;
  display:flex; gap:1.4rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);
  -webkit-overflow-scrolling:touch;
  /* bleed to the container edges so the next card is visibly cut off - that
     peek is what tells people the row scrolls at all */
  margin:0 calc(-1 * var(--pad));
  padding:.4rem var(--pad) 1.7rem;
  scrollbar-width:none; cursor:grab;
}
.voices-track::-webkit-scrollbar{display:none}
.voices-track.is-dragging{cursor:grabbing; scroll-snap-type:none}
@media(min-width:640px){ .voices-track{--pad:2rem} }

.voice-card{
  flex:0 0 26rem; max-width:84vw; min-height:19rem;
  scroll-snap-align:start; user-select:none;
  display:flex; flex-direction:column; margin:0;
  background:#fff; border:1px solid var(--cream-3); border-radius:22px;
  padding:2rem 1.85rem;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.voice-card:hover{border-color:var(--ochre); box-shadow:0 30px 60px -34px rgba(28,40,38,.3)}
.voice-mark{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--sage-1); color:var(--sage); margin-bottom:1.2rem; flex:none;
}
.voice-mark svg{width:21px; height:21px}
/* Body sans, not the display serif. The quotes are long and the italic serif
   was hard to read at that length. Deliberately different from the pull-quote
   band above, which stays serif because it is one short line. */
.voice-card blockquote{
  font-family:'Manrope','Manrope Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.02rem; line-height:1.72; font-style:normal; font-weight:350;
  letter-spacing:0; color:var(--ink-2); margin:0 0 auto;
}
.voice-name{
  margin-top:1.5rem; padding-top:1.05rem; border-top:1px solid var(--cream-3);
  font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ochre);
}
.voices-nav{display:flex; gap:.6rem}
.voices-nav button{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(28,40,38,.2); color:var(--ink);
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.voices-nav button:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.voices-nav svg{width:18px; height:18px}
@media(max-width:640px){
  .voice-card{flex-basis:82vw; min-height:16rem; padding:1.6rem 1.4rem; border-radius:20px}
  .voice-card blockquote{font-size:.98rem; line-height:1.68}
  .voices-nav{display:none} /* touch swipe is the affordance on phones */
}

/* text button that reads as a link (hero "как это работает") */
.linkish{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:inherit; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .3s var(--ease);
}
.linkish:hover{color:var(--ochre)}

/* ---------- video modal ---------- */
.vm-back{
  position:fixed; inset:0; z-index:130; display:none;
  align-items:center; justify-content:center; padding:1.1rem;
  background:rgba(28,40,38,.74);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .32s var(--ease);
}
.vm-back.is-open{display:flex}
.vm-back.is-in{opacity:1}
.vm{
  position:relative; background:#000; border-radius:26px; overflow:hidden; line-height:0;
  box-shadow:0 60px 110px -40px rgba(0,0,0,.75);
  transform:translateY(16px) scale(.985); transition:transform .38s var(--ease);
}
.vm-back.is-in .vm{transform:none}
.vm-box{
  position:relative; aspect-ratio:9/16; max-width:92vw; background:#000;
  /* vh first, dvh second: on iOS < 15.4 and Chrome < 108 the dvh line is
     dropped as invalid, and with no height at all the frame collapses */
  height:min(86vh,760px);
  height:min(86dvh,760px);
}
.vm-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vm-x{
  position:absolute; top:-3.1rem; right:0; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:#fff;
  cursor:pointer; opacity:.85; transition:opacity .3s var(--ease), background .3s var(--ease);
}
.vm-x:hover{opacity:1; background:rgba(255,255,255,.14)}
.vm-x svg{width:22px; height:22px}
@media(max-width:560px){
  /* no room above the frame on a phone - move the button inside and give it
     a scrim so it stays visible over the video */
  .vm-x{top:.6rem; right:.6rem; background:rgba(0,0,0,.5); width:44px; height:44px}
}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:100;
  max-width:max-content; margin:0 auto;
  display:flex; align-items:center; gap:.85rem;
  padding:.6rem .6rem .6rem 1.35rem;
  background:var(--cream); border:1px solid var(--cream-3); border-radius:999px;
  box-shadow:0 26px 54px -28px rgba(28,40,38,.5);
  transform:translateY(160%); opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.cookie.is-in{transform:none; opacity:1}
/* Preflight's [hidden] rule has the same specificity as .cookie and loses on
   source order, so the attribute needs its own rule to keep working here. */
.cookie[hidden]{display:none}
.cookie p{margin:0; font-size:.84rem; line-height:1.35; color:var(--ink-2)}
.cookie-accept{
  flex:none; cursor:pointer; border:0; border-radius:999px;
  padding:.6rem 1.15rem; background:var(--ochre); color:#fff;
  font:inherit; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s var(--ease);
}
.cookie-accept:hover{background:var(--ochre-600,#B06A45)}
.cookie-x{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--ink-3);
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease);
}
.cookie-x:hover{background:var(--cream-3); color:var(--ink)}
.cookie-x svg{width:17px; height:17px}
@media(max-width:560px){
  .cookie{border-radius:20px; padding:.85rem .85rem .85rem 1.1rem; gap:.6rem}
  .cookie p{font-size:.8rem}
}

/* ---------- icon sprite ---------- */
/* Sizing is mostly done by the parent rules above (.btn svg, .card-ico svg,
   and so on); this is the fallback plus the stroke presentation, which has
   to live on the referencing element because that is what <use> inherits
   from. 1.6 is the stroke width the Lucide runtime was configured with. */
.ico{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- responsive images ---------- */
/* <picture> is inline by default, so height:100% on the <img> inside resolves
   against a box with no height and collapses the image. Every picture on this
   page wraps a photo that fills its frame. */
picture{display:block; width:100%; height:100%}

/* Contact-block texture. Desktop only and purely decorative, so it lives here
   instead of in an <img>: a `hidden lg:block` image is still downloaded on
   phones. The plain url() line is the fallback for browsers without image-set. */
.contact-texture{display:none}
@media(min-width:1024px){
  .contact-texture{
    display:block; position:absolute; top:0; right:0; width:46%; height:100%;
    opacity:.09; pointer-events:none;
    background-position:right center; background-size:cover; background-repeat:no-repeat;
    background-image:url("../images/contact-texture-700.webp");
    background-image:image-set(
      url("../images/contact-texture-700.avif") type("image/avif"),
      url("../images/contact-texture-700.webp") type("image/webp"));
    -webkit-mask-image:linear-gradient(to right,transparent,#000 62%);
    mask-image:linear-gradient(to right,transparent,#000 62%);
  }
}