/* Волос’ОК — public site styles. Direction A-light «Кинематограф, светлый»: full-bleed photo hero
   with a light wash, floating glass header, heavy Onest headlines with a teal gradient accent,
   frosted glass and white cards on an airy mint-white page, one deep-teal band (booking) and a deep
   footer.
   Motion policy: short UI transitions — hover colour/shadow/lift, the «Услуга» dropdown, listboxes,
   switches, segment thumbs, the FAQ accordion, the mobile menu fade — run for everyone, including
   visitors with «reduce motion» turned on in the OS. Only large or continuous motion (entrance
   travel, scroll reveals, parallax, the slow photo zoom, floating chips, sheen, pulse, count-up) is
   limited to prefers-reduced-motion: no-preference. There is no global «animation:none» switch. */

/* Onest (OFL, see fonts/OFL-onest.txt): one variable family for headings and text */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-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}
/* the ruble sign is outside the cyrillic/latin subsets: a one-glyph file cut from Onest latin-ext,
   and Inter's one-glyph file as a second line of defence before the system fonts */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/onest-ruble.woff2") format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Ruble Fallback";font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/fonts/inter-ruble.woff2") format("woff2");unicode-range:U+20BD}
/* metric-matched local fallback: the text does not jump when Onest arrives */
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:103.87%;ascent-override:93.39%;descent-override:29.36%;line-gap-override:0%}

:root{
  /* page and surfaces */
  --page:#F6FBF9;
  --page-2:#EEF7F3;
  --wash:#E6F5EE;
  --white:#FFFFFF;
  --mint:#7FE3C4;
  --mint-2:#C4F2E2;
  --mint-3:#E3F7EF;
  --peach:#FFB98A;
  --peach-2:#FFD9BF;
  --peach-3:#FFF2E8;
  /* text (all AA on the page, the washes and white) */
  --ink:#0E2A27;
  --ink-2:#4A625E;
  --ink-3:#587069;
  --placeholder:#5F7570;
  /* accent */
  --teal:#0F9E8E;              /* icons, large text, fills — not for small text */
  --teal-ink:#0B6F65;          /* teal for small text and links (AA) */
  --apricot:#A64A18;           /* the peach family on light surfaces (icons, small text, AA on --peach-3) */
  --error:#B23A26;
  --error-bg:#FFF4F1;
  /* deep band and footer */
  --deep:#0B3B37;
  --on-dark:#F7F4EE;
  --on-dark-2:rgba(247,244,238,.8);
  --on-dark-3:rgba(247,244,238,.64);
  --line-dark:rgba(247,244,238,.14);
  /* lines */
  --line:rgba(14,42,39,.08);
  --line-2:rgba(14,42,39,.14);
  --control:#7A8F8A;
  /* gradients */
  --grad:linear-gradient(118deg,#12A594 0%,#3CCFAE 50%,#A6F0D6 100%);
  --grad-hi:linear-gradient(118deg,#17AE9C 0%,#4CDAB8 50%,#BFF7E3 100%);
  --grad-text:linear-gradient(100deg,#0B6F65 0%,#0E968A 46%,#12937E 72%,#23937A 100%);
  --grad-text-dark:linear-gradient(100deg,#5FE3C0 0%,#B4F7DD 52%,#FFD3A3 100%);
  --grad-deep:linear-gradient(165deg,#0E4741 0%,#0B3935 50%,#082B28 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .18 0 0 0 0 .17 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --font:"Onest","Ruble Fallback","Onest Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* layout */
  --wrap:1200px;
  --gutter:clamp(16px,4vw,40px);
  --header-h:70px;
  --header-top:18px;
  --r-sm:14px;
  --r:18px;
  --r-lg:24px;
  --r-xl:30px;
  /* depth */
  --sh-xs:0 1px 2px rgba(14,42,39,.05);
  --sh-sm:0 1px 2px rgba(14,42,39,.04),0 12px 26px -18px rgba(14,42,39,.26);
  --sh:0 2px 4px rgba(14,42,39,.03),0 24px 50px -30px rgba(14,42,39,.34);
  --sh-lg:0 2px 6px rgba(14,42,39,.04),0 40px 84px -42px rgba(14,42,39,.46);
  --glow:0 14px 30px -14px rgba(15,158,142,.72);
  --glow-lg:0 22px 46px -16px rgba(15,158,142,.82);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-top) + var(--header-h) + 16px);background:var(--page);scrollbar-color:#B9D2CA var(--page)}
/* the floating bottom bar (up to 960px, see «mobile bottom bar»): focus and in-page scrolling keep
   controls clear of it instead of stopping with them underneath */
@media (max-width:60em){html{scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
body{position:relative;margin:0;color:var(--ink);background:var(--page);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (min-width:1024px){body{font-size:1.09375rem}}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
p,li,dd,td{text-wrap:pretty}
::selection{background:var(--mint-2);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--page)}
::-webkit-scrollbar-thumb{background:#C2D8D1;border-radius:999px;border:3px solid var(--page)}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--white);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
.num{font-variant-numeric:tabular-nums lining-nums}
.nowrap{white-space:nowrap}
.ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spot{width:100%;height:100%}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;isolation:isolate;padding-block:clamp(72px,8.6vw,124px);overflow-x:clip}
/* section glows fade out before the section edges, so neighbouring sections never show a seam */
.approach::before,.how::before,.cycle-sec::before,.prices::before,.calc-band::before,.faq-section::before,.page::before{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.section.has-pop{z-index:6}

/* ---------- type ---------- */
h1{font-weight:800;font-size:min(clamp(2.65rem,1.25rem + 6.3vw,6.75rem),11.2vh);line-height:.93;letter-spacing:-.052em}
@media (max-width:760px){h1{font-size:clamp(2.65rem,1.25rem + 6.3vw,6.75rem)}}
h2{font-weight:800;font-size:clamp(2.1rem,1.1rem + 4.15vw,4.75rem);line-height:.98;letter-spacing:-.048em;text-wrap:balance}
/* the longest heading word («конфиденциально») fits the narrowest phones (320px, or 1280px at 400% zoom) */
@media (max-width:360px){h2{font-size:min(2.1rem,9.6vw)}}
h3{font-weight:700;font-size:1.25rem;line-height:1.25;letter-spacing:-.022em;text-wrap:balance}
.h2-sm{font-size:clamp(2rem,1.2rem + 2.9vw,3.6rem);line-height:1.02}
/* the accent phrase: a deep teal gradient (≥ 3:1 at every stop, these are large headings) and a soft
   mint halo underneath it */
.accent,.h1-accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em;filter:drop-shadow(0 10px 22px rgba(15,158,142,.16))}
/* the hero phrase also gets a mint → peach highlighter bar (decorative, behind the glyphs) */
.h1-accent{position:relative;display:inline-block;filter:none} /* no filter here: it would lift the bar over the glyphs */
.h1-accent::after{content:"";position:absolute;z-index:-1;left:.02em;right:.08em;bottom:.02em;height:.14em;border-radius:1em;background:linear-gradient(90deg,rgba(127,227,196,.9),rgba(196,242,226,.9) 45%,rgba(255,185,138,.95));transform-origin:0 50%}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px;font:650 .8125rem/1.2 var(--font);letter-spacing:.17em;text-transform:uppercase;color:var(--teal-ink)}
.eyebrow::before{content:"";flex:none;width:34px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(15,158,142,0),var(--teal))}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:20px 56px;margin-bottom:clamp(36px,4.6vw,60px)}
.sec-head h2{max-width:12.5em}
.sec-lead{justify-self:end;max-width:28rem;margin-bottom:6px;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.6}
.sec-stack{display:grid;justify-items:start}
.sec-stack > p:not(.eyebrow){margin-top:22px;max-width:34rem;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .2vw,1.15rem)}
@media (max-width:900px){
  .sec-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .sec-lead{justify-self:start}
}

/* ---------- surfaces ---------- */
/* frosted glass over photos: white veil + blur + a white→teal hairline */
.glass{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 2px rgba(14,42,39,.05),0 24px 50px -28px rgba(14,42,39,.42),inset 0 1px 0 rgba(255,255,255,.95)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.45) 40%,rgba(15,158,142,.16) 70%,rgba(127,227,196,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* cards on the page: near-white, a hairline and a soft long shadow (no blur needed on flat colour) */
.card{position:relative;background:linear-gradient(170deg,rgba(255,255,255,.94),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(14,42,39,.045),var(--sh)}
.glass-dark{background:rgba(8,32,30,.42);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.16)}
.ic-tile{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:var(--teal-ink);background:linear-gradient(150deg,#F0FBF7,#CDF2E3);
  box-shadow:inset 0 0 0 1px rgba(15,158,142,.18),0 8px 16px -12px rgba(15,158,142,.7);transition:transform .3s var(--ease-out),box-shadow .3s,background .3s,color .3s}
.ic-tile .ic{width:21px;height:21px}
.ic-tile-lg{width:54px;height:54px;border-radius:16px}
.ic-tile-lg .ic{width:25px;height:25px}
.ic-tile-peach{color:var(--apricot);background:linear-gradient(150deg,#FFF7F1,#FFE0CA);box-shadow:inset 0 0 0 1px rgba(255,185,138,.45),0 8px 16px -12px rgba(217,119,63,.6)}
.ic-tile-grad{color:var(--ink);background:var(--grad);box-shadow:0 12px 24px -12px rgba(15,158,142,.8),inset 0 1px 0 rgba(255,255,255,.6)}
/* soft spotlight that follows the pointer (ui.js sets --mx / --my) */
.card-glow{position:relative;isolation:isolate}
.card-glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(280px circle at var(--mx,80%) var(--my,0%),rgba(127,227,196,.24),transparent 65%)}
.card-glow:hover::after{opacity:1}

/* controls people click several times in a row: their text is not selected by a double or triple click
   (ui.js also stops such a click from selecting the text next to them) */
.btn,.icon-btn,.faq summary,.segmented label,.switch-card,.tariff,.check,.cs-trigger,.cs-opt{-webkit-user-select:none;user-select:none}

/* ---------- buttons and links ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:15px;border:0;
  font:650 1rem/1.15 var(--font);letter-spacing:-.01em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s}
.btn .ic{width:19px;height:19px}
.btn-arrow{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out)}
.btn:hover .btn-arrow{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.btn-sm{min-height:44px;padding:0 16px;border-radius:13px;font-size:.9375rem}
.btn-lg{min-height:58px;padding:0 26px;border-radius:17px;font-size:1.0625rem}
.btn-xl{min-height:64px;padding:0 26px;border-radius:19px;font-size:1.0625rem}
/* the dark square with the arrow inside the big gradient buttons */
.btn-tile{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ink);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(127,227,196,.2);transition:transform .25s var(--ease-out),background-color .2s}
.btn-tile .btn-arrow{width:19px;height:19px}
.btn:hover .btn-tile .btn-arrow{transform:translateX(2px)}
.btn-lg:has(.btn-tile){padding:0 6px 0 24px;gap:16px}
.btn-xl:has(.btn-tile){padding:0 9px 0 28px;gap:18px}
.btn-lg .btn-tile{width:44px;height:44px;border-radius:13px}
.mm-cta .btn-tile,.btn-sm .btn-tile{width:38px;height:38px;border-radius:11px}
.btn-primary{color:var(--ink);background:var(--grad);overflow:hidden;
  box-shadow:0 16px 36px -16px rgba(15,158,142,.78),0 0 0 1px rgba(255,255,255,.35) inset,0 1px 0 rgba(255,255,255,.7) inset}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hi);opacity:0;transition:opacity .25s}
.btn-primary::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(15,158,142,.88),0 0 0 1px rgba(255,255,255,.45) inset,0 1px 0 rgba(255,255,255,.8) inset}
.btn-primary:hover::before{opacity:1}
.btn-primary:active{transform:translateY(0) scale(.98);box-shadow:0 8px 18px -10px rgba(15,158,142,.8)}
.btn-glass{color:var(--ink);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(14,42,39,.1),inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px -20px rgba(14,42,39,.4)}
.btn-glass .ic{color:var(--teal)}
.btn-glass:hover{background:rgba(255,255,255,.95);transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(15,158,142,.32),inset 0 1px 0 #fff,0 18px 34px -20px rgba(14,42,39,.45)}
.btn-ghost{color:var(--teal-ink);background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.32),var(--sh-xs)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.6),0 14px 28px -18px rgba(14,42,39,.4)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:progress;transform:none;opacity:.9}
.btn-spin{display:none;width:18px;height:18px;border-radius:50%;border:2.2px solid rgba(14,42,39,.25);border-top-color:var(--ink);animation:spin .8s linear infinite}
[data-submit]:is([disabled],[aria-disabled="true"]) .btn-spin{display:block}
[data-submit]:is([disabled],[aria-disabled="true"]) .btn-tile{display:none}
@media (max-width:400px){.btn-lg,.btn-xl{padding-inline:18px}}
.link{color:var(--teal-ink);text-decoration:none;font-weight:600;
  background:linear-gradient(var(--peach),var(--peach)) 0 100%/0 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:1px;transition:background-size .3s var(--ease-out),color .2s}
.link:hover{background-size:100% 2px,100% 1px}
.pill-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(14,42,39,.12);
  color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;transition:box-shadow .2s,color .2s,background-color .2s,transform .25s var(--ease-out)}
.pill-link .ic{width:18px;height:18px;color:var(--teal)}
.pill-link:hover{background:var(--white);color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,158,142,.5);transform:translateY(-1px)}

/* ================= header ================= */
.site-header{position:sticky;top:0;z-index:50;padding-top:var(--header-top);transition:transform .35s var(--ease-out)}
.site-header.is-tucked:not(:focus-within){transform:translateY(calc(-100% - 8px))}
.header-shell{position:relative}
.header-bar{position:relative;z-index:2;display:flex;align-items:center;gap:18px;height:var(--header-h);padding:0 10px 0 16px;border-radius:22px;
  background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 40px -28px rgba(14,42,39,.5);transition:background-color .3s,box-shadow .3s}
.header-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,1),rgba(255,255,255,.5) 45%,rgba(15,158,142,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.site-header.scrolled .header-bar{background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 #fff,0 18px 44px -24px rgba(14,42,39,.42),0 2px 8px -4px rgba(14,42,39,.08)}
.logo{display:inline-flex;align-items:center;gap:11px;font:800 1.3rem/1 var(--font);letter-spacing:-.035em;color:var(--ink);text-decoration:none;white-space:nowrap;border-radius:12px}
.logo-mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 8px 14px rgba(15,158,142,.32));transition:transform .3s var(--ease-out)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.03)}

/* nav: a sliding hover pill and an underline for the section on screen (positions from ui.js) */
.nav{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 14px;border:0;border-radius:12px;background:none;
  font:560 .96rem/1 var(--font);color:var(--ink-2);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s}
.nav-link .ic{width:16px;height:16px;stroke-width:2.1;transition:transform .3s var(--ease-out)}
.nav-link:hover,.nav-link.is-active,.nav-drop.is-open .nav-trigger{color:var(--ink)}
.nav-drop.is-open .nav-trigger .ic{transform:rotate(180deg)}
html:not(.ui) .nav-link:hover{background:rgba(14,42,39,.06)}
.nav-hover{position:absolute;z-index:0;left:0;top:50%;height:42px;width:var(--w,0);transform:translate(var(--x,0),-50%);border-radius:12px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(14,42,39,.07),0 6px 14px -10px rgba(14,42,39,.35);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease-out),width .3s var(--ease-out),opacity .2s}
.nav-hover.is-on{opacity:1}
.nav-indicator{position:absolute;z-index:2;left:0;bottom:3px;height:2.5px;width:var(--w,0);transform:translateX(var(--x,0));border-radius:3px;background:linear-gradient(90deg,#0F9E8E,#7FE3C4);box-shadow:0 2px 8px rgba(15,158,142,.45);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease-out),width .35s var(--ease-out),opacity .25s}
.nav-indicator.is-on{opacity:1}
.no-glide{transition:none!important}

/* dropdown panel: scale-fade (for everyone) */
.nav-drop{position:relative}
.nav-panel{position:absolute;z-index:5;top:100%;left:-24px;width:min(600px,calc(100vw - 2 * var(--gutter)));padding-top:16px;
  visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:70px 0;pointer-events:none;
  transition:opacity .15s ease,transform .2s var(--ease-out),visibility 0s linear .2s}
.nav-drop.is-open .nav-panel,html:not(.ui) .nav-drop:is(:hover,:focus-within) .nav-panel{visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity .2s ease,transform .28s var(--ease-out),visibility 0s}
.nav-panel::before{content:"";position:absolute;top:10px;left:64px;width:14px;height:14px;border-radius:3px;background:#fff;transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(14,42,39,.06)}
.nav-panel-card{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;padding:8px;border-radius:24px;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(14,42,39,.06),0 34px 70px -30px rgba(14,42,39,.48),0 10px 24px -14px rgba(14,42,39,.16)}
.nav-sub-list{display:grid;gap:2px}
.nav-sub{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background-color .2s}
.nav-sub-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(150deg,#F0FBF7,#D3F3E6);color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,158,142,.14);
  transition:background .25s,color .25s,transform .3s var(--ease-out),box-shadow .25s}
.nav-sub-ic .ic{width:21px;height:21px}
.nav-sub-text{display:grid;gap:2px;min-width:0}
.nav-sub-text b{font-weight:650;font-size:.975rem;line-height:1.25}
.nav-sub-text small{font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.nav-sub .btn-arrow{margin-left:auto;color:var(--teal);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease-out)}
.nav-sub:hover,.nav-sub:focus-visible{background:var(--page-2)}
.nav-sub:hover .nav-sub-ic,.nav-sub:focus-visible .nav-sub-ic{background:var(--grad);color:var(--ink);transform:rotate(-4deg);box-shadow:var(--glow)}
.nav-sub:hover .btn-arrow,.nav-sub:focus-visible .btn-arrow{opacity:1;transform:none}
.nav-sub.is-current .nav-sub-text b{color:var(--teal-ink)}
.nav-sub.is-current .nav-sub-ic{box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.5)}
.nav-sub:focus-visible{outline-offset:-2px}
.nav-promo{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:space-between;gap:16px;padding:18px;border-radius:18px;color:var(--ink);text-decoration:none;
  background:linear-gradient(160deg,#ECFBF5 0%,#D3F4E8 55%,#FFE7D5 100%);box-shadow:inset 0 0 0 1px rgba(15,158,142,.14)}
.nav-promo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 100% 0%,rgba(127,227,196,.55),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(255,185,138,.4),transparent 70%);transition:transform .45s var(--ease-out)}
.nav-promo:hover::before{transform:scale(1.08)}
.nav-promo-tag{justify-self:start;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.75);font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-ink)}
.nav-promo-price{font-size:.875rem;color:var(--ink-2);line-height:1.3}
.nav-promo-price b{display:block;font-size:1.65rem;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.nav-promo-link{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:.875rem;white-space:nowrap;color:var(--teal-ink)}
.nav-promo:hover .btn-arrow{transform:translateX(3px)}

.header-hours{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:550;color:var(--ink-2);white-space:nowrap}
.header-hours .ic{width:17px;height:17px;color:var(--teal)}
.header-contacts{display:flex;align-items:center;gap:6px}
.header-phone{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:12px;font-weight:650;font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .2s}
.header-phone .ic,.icon-link .ic{color:var(--teal)}
.header-phone:hover{background:rgba(255,255,255,.85)}
.icon-link{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(14,42,39,.1);transition:background-color .2s,box-shadow .2s,transform .25s var(--ease-out)}
.icon-link:hover{background:var(--white);box-shadow:inset 0 0 0 1px rgba(15,158,142,.5);transform:translateY(-1px)}
.header-cta{flex:none}
.menu-toggle{display:none;position:relative;width:46px;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(14,42,39,.12);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background-color .2s,box-shadow .2s}
.menu-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease-out),opacity .2s}
.menu-toggle span:nth-child(3){width:13px;margin-right:7px}
.menu-toggle[aria-expanded="true"]{background:var(--white);box-shadow:inset 0 0 0 1px rgba(15,158,142,.45)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle[aria-expanded="true"] span:nth-child(3){width:20px;margin-right:0;transform:translateY(-7px) rotate(-45deg)}

/* mobile menu: a dimmed backdrop and a floating card under the header bar; it fades in for everyone */
.mobile-menu{position:fixed;z-index:1;inset:0;display:flex;justify-content:flex-end;align-items:flex-start;padding:calc(var(--header-top) + var(--header-h) + 10px) var(--gutter) 16px;
  background:rgba(14,42,39,.22);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}
.mm-card{width:100%;max-width:460px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:10px;border-radius:26px;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(14,42,39,.06),0 40px 80px -36px rgba(14,42,39,.55);transform-origin:calc(100% - 24px) 0;animation:menuIn .26s var(--ease-out)}
.mm-nav{display:grid;gap:2px}
.mm-label{padding:8px 12px 4px;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mm-sub{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background-color .2s}
.mm-sub:active,.mm-sub:hover{background:var(--page-2)}
.mm-links{display:grid;gap:2px;margin:8px 0 4px;padding-top:8px;border-top:1px solid var(--line)}
.mm-link{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 14px;border-radius:16px;font-size:1.125rem;font-weight:650;color:var(--ink);text-decoration:none;transition:background-color .2s}
.mm-link .ic{width:22px;height:22px;color:var(--teal)}
.mm-link .btn-arrow{margin-left:auto;color:var(--ink-3)}
.mm-link:active,.mm-link:hover{background:var(--page-2)}
.mm-cta{width:100%;min-height:58px;margin-top:8px;justify-content:space-between;padding:0 8px 0 20px}
.mobile-contacts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 4px 4px}
.mm-foot{display:flex;align-items:center;gap:8px;padding:12px 10px 6px;font-size:.875rem;color:var(--ink-2)}
.mm-foot .ic{width:18px;height:18px;color:var(--teal)}
/* the header collapses at em breakpoints (1180px / 960px at the default font size): with a larger
   browser font the text grows, so the header switches to the menu earlier instead of overflowing */
@media (max-width:73.75em){
  .header-hours{display:none}
  .nav-link{padding-inline:11px}
  .header-contacts .icon-link{display:none}
  .header-phone{width:42px;padding:0;justify-content:center;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(14,42,39,.1)}
  .header-phone span{display:none}
}
@media (max-width:60em){
  :root{--header-h:62px;--header-top:12px}
  .nav,.header-cta{display:none}
  .logo{margin-right:auto}
  .menu-toggle{display:inline-flex}
  .header-bar{gap:8px;padding:0 8px 0 12px;border-radius:19px}
  .logo{font-size:1.2rem;gap:10px}
  .logo-mark{width:36px;height:36px}
}
/* without JavaScript the toggle is a link that opens the menu through :target (base.html) */
.menu-toggle.is-close span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-close span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle.is-close span:nth-child(3){width:20px;margin-right:0;transform:translateY(-7px) rotate(-45deg)}
/* the open menu is modal: the page behind it does not scroll (site.js sets .menu-open) */
html.menu-open{overflow:hidden;scrollbar-gutter:stable}
.mobile-menu{overscroll-behavior:contain;touch-action:none}
.mm-card{touch-action:pan-y}

/* ================= hero: full-bleed photo with a light wash on the text side ================= */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:max(760px,100svh);
  margin-top:calc(-1 * (var(--header-top) + var(--header-h)));padding-top:calc(var(--header-top) + var(--header-h) + clamp(22px,5vh,64px));padding-bottom:clamp(20px,3.4vh,34px);background:var(--page)}
.hero-figure{position:absolute;inset:0;z-index:-3;margin:0;pointer-events:none}
.hero-shift{position:absolute;inset:0;transform:translate3d(0,var(--py,0px),0)}
.hero-img{position:absolute;left:27%;top:-5%;width:108%;height:110%;max-width:none;object-fit:cover;object-position:30% 34%;transform-origin:62% 44%;
  filter:saturate(1.06) brightness(1.04) contrast(.97);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
/* warm grade over the photo: a peach glow in soft-light */
.hero-figure::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(34% 46% at 74% 40%,rgba(255,185,138,.75),transparent 72%),linear-gradient(90deg,transparent 40%,rgba(255,217,191,.35))}
.hero-wash{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(30% 32% at 6% 64%,rgba(127,227,196,.32),transparent 70%),
  radial-gradient(26% 28% at 30% 14%,rgba(127,227,196,.2),transparent 70%),
  /* stops follow the centred text column (720px from the wrap's left edge), not the viewport width */
  linear-gradient(90deg,var(--page) 0,var(--page) calc(50% - 300px),rgba(246,251,249,.95) calc(50% - 120px),rgba(246,251,249,.88) calc(50% + 40px),rgba(246,251,249,.55) calc(50% + 150px),rgba(246,251,249,.16) calc(50% + 300px),rgba(246,251,249,0) calc(50% + 420px)),
  linear-gradient(0deg,var(--page) 0%,rgba(246,251,249,.8) 13%,rgba(246,251,249,0) 36%),
  linear-gradient(180deg,rgba(246,251,249,.6) 0%,rgba(246,251,249,0) 18%)}
.hero-in{position:relative}
.hero-copy{max-width:720px;display:flex;flex-direction:column;align-items:flex-start}
.hero-tag{display:inline-flex;align-items:center;gap:12px;padding:9px 16px 9px 12px;border-radius:999px;font-size:.875rem;font-weight:500;line-height:1.3;color:var(--ink-2)}
.hero-tag b{color:var(--ink);font-weight:650}
.pulse{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(15,158,142,.18)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal);opacity:0}
.hero h1{margin-top:clamp(16px,3.2vh,28px)}
.hero .lead{margin-top:clamp(16px,3vh,26px);max-width:33rem;font-size:clamp(1.0625rem,.98rem + .4vw,1.2rem);line-height:1.6;color:var(--ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,4vh,36px)}
.hero-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(14px,2.4vh,22px)}
.hero-contacts-label{flex-basis:100%;font-size:.9375rem;color:var(--ink-2)}
/* a frosted pill: its text keeps AA whatever part of the photo sits behind it */
.tools-note{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2.6vh,24px);padding:5px 16px 5px 5px;border-radius:16px;font-size:.9375rem;line-height:1.4;color:var(--ink-2);
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 24px -18px rgba(14,42,39,.4)}
.tools-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.85);color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,158,142,.18),var(--sh-xs)}
.tools-ic .ic{width:19px;height:19px}
.hero-comb{display:flex;align-items:center;gap:12px;margin-top:14px;padding:6px 14px 6px 6px;border-radius:16px;background:rgba(255,255,255,.8);box-shadow:var(--sh-sm);font-size:.875rem;font-weight:600;color:var(--ink-2)}
.hero-comb img{width:48px;height:60px;object-fit:cover;border-radius:11px}
.hero-bar{display:flex;align-items:stretch;gap:12px;margin-top:auto;padding-top:clamp(22px,4.6vh,44px)}
.facts{display:flex;flex-wrap:wrap;gap:12px}
.stat{border-radius:20px}
.stat dd{display:flex;align-items:center;gap:14px;height:100%;padding:13px 22px 13px 13px}
.stat b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);white-space:nowrap}
.stat small{display:block;font-size:.8125rem;line-height:1.3;color:var(--ink-3)}
.hero-cue{margin-left:auto;align-self:center;display:flex;align-items:center;gap:14px;font-size:.75rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;white-space:nowrap;transition:color .2s}
.hero-cue:hover{color:var(--teal-ink)}
.hero-cue i{position:relative;width:1.5px;height:46px;overflow:hidden;border-radius:2px;background:linear-gradient(var(--teal),rgba(15,158,142,.1))}
.hero-cue i::after{content:"";position:absolute;left:0;top:-30%;width:100%;height:30%;background:var(--white);opacity:0}
@media (max-width:1180px){
  .hero-cue{display:none}
}
/* common laptop heights (1366×768, 1280×720, 1440×800): the first screen still ends with the facts row */
@media (min-width:901px) and (max-height:860px){
  .hero{min-height:100svh;padding-top:calc(var(--header-top) + var(--header-h) + clamp(12px,2.5vh,24px));padding-bottom:16px}
  .hero h1{margin-top:2vh;font-size:min(clamp(2.65rem,1.25rem + 6.3vw,6.75rem),9.5vh)}
  .hero .lead{margin-top:2vh}
  .hero-actions{margin-top:2.6vh}
  .hero-actions .btn-xl{min-height:56px}
  .hero-actions .btn-xl .btn-tile{width:42px;height:42px;border-radius:13px}
  .hero-contacts{margin-top:2vh}
  .tools-note{margin-top:1.6vh}
  .hero-bar{padding-top:2.6vh}
  .facts{gap:10px}
  .stat dd{padding:9px 18px 9px 9px}
  .stat .ic-tile{width:40px;height:40px}
}
/* with the contact pills the hero is a row taller: up to 960px of height the pills go without their label
   and the tools note steps aside (the same tools are named again in «Как проходит визит») */
@media (min-width:901px) and (max-height:960px){
  .hero-contacts-label,.hero-contacts ~ .tools-note{display:none}
  .hero:has(.hero-contacts) .hero-bar{padding-top:2.6vh}
}
@media (max-width:1180px){
  .hero-img{left:32%;width:112%}
  .hero-wash{background:
    radial-gradient(40% 34% at 6% 66%,rgba(127,227,196,.32),transparent 70%),
    linear-gradient(90deg,var(--page) 0%,var(--page) 26%,rgba(246,251,249,.95) 40%,rgba(246,251,249,.86) 52%,rgba(246,251,249,.5) 61%,rgba(246,251,249,.12) 72%,rgba(246,251,249,0) 80%),
    linear-gradient(0deg,var(--page) 0%,rgba(246,251,249,.8) 16%,rgba(246,251,249,0) 40%),
    linear-gradient(180deg,rgba(246,251,249,.6) 0%,rgba(246,251,249,0) 18%)}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:640px}
}
/* phones and portrait tablets: the photo is a band on top (the smile above the wash), the text below */
@media (max-width:900px){
  .hero{min-height:0;padding-top:calc(var(--header-top) + var(--header-h) + 238px);padding-bottom:28px}
  .hero-figure{bottom:auto;height:520px;overflow:hidden}
  .hero-img{left:calc(50% - 470px);top:-150px;width:900px;height:600px;object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
  .hero-figure::after{background:radial-gradient(60% 50% at 62% 40%,rgba(255,185,138,.6),transparent 72%)}
  .hero-wash{bottom:auto;height:520px;background:
    linear-gradient(0deg,var(--page) 0%,var(--page) 22%,rgba(246,251,249,.9) 38%,rgba(246,251,249,.5) 52%,rgba(246,251,249,0) 70%),
    linear-gradient(180deg,rgba(246,251,249,.7) 0%,rgba(246,251,249,0) 22%)}
}
@media (min-width:761px) and (max-width:900px){
  .hero-img{left:0;width:100%;height:640px;top:-170px;object-fit:cover;object-position:50% 50%}
}
/* phones in landscape: a short photo band, so the headline starts on the first screen (the floating
   bar carries «Записаться» while the hero buttons are below the fold) */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero{padding-top:calc(var(--header-top) + var(--header-h) + 44px)}
  .hero-figure,.hero-wash{height:260px}
  .hero-img{left:0;width:100%;height:520px;top:-170px;object-fit:cover;object-position:50% 40%}
  .hero h1{margin-top:14px;font-size:min(clamp(2.65rem,1.25rem + 6.3vw,6.75rem),10vh)}
}
@media (max-width:760px){
  .hero-tag{font-size:.8125rem;padding:8px 14px 8px 11px}
  .hero h1{margin-top:18px}
  .hero .lead{margin-top:18px}
  .hero-actions{width:100%;flex-direction:column;margin-top:26px;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-primary{justify-content:space-between}
  .btn-xl{min-height:60px}
  .tools-note{margin-top:20px;font-size:.875rem}
  .hero-bar{padding-top:26px}
  .facts{gap:10px}
  .stat{border-radius:18px}
  .stat dd{gap:10px;padding:11px 10px}
  .stat .ic-tile{width:34px;height:34px;border-radius:10px}
  .stat .ic-tile .ic{width:18px;height:18px}
  .stat b{font-size:.9375rem;letter-spacing:-.03em}
  .stat small{font-size:.75rem}
}
@media (max-width:380px){
  .stat b{font-size:.875rem;white-space:normal}
  .stat dd{padding:10px 8px}
}

/* ================= approach: photo + value cards (bento) ================= */
.approach{background:linear-gradient(180deg,var(--page) 0%,var(--page-2) 100%)}
.approach::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 100% 0%,rgba(127,227,196,.22),transparent 70%),radial-gradient(30% 40% at 0% 100%,rgba(255,185,138,.14),transparent 70%)}
.bento{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,2fr);gap:16px;align-items:stretch}
.bento-photo{position:relative;min-height:440px;margin:0;border-radius:30px;overflow:hidden;background:var(--wash);box-shadow:var(--sh-lg)}
.bento-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.bento-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);background:linear-gradient(0deg,rgba(14,42,39,.28),transparent 42%)}
.bento-cap{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;font-size:.875rem;line-height:1.35;color:var(--ink-2)}
.bento-cap b{display:block;font-size:1rem;color:var(--ink)}
.value-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.value{display:grid;align-content:start;gap:18px;padding:26px 26px 28px;border-radius:26px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.value h3{margin-bottom:8px}
.value p{color:var(--ink-2);font-size:.975rem;line-height:1.6}
.value-num{position:absolute;top:24px;right:26px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;color:rgba(14,42,39,.32);transition:color .25s}
.value:last-child{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:22px}
.value:last-child .value-link{align-self:end;margin-top:30px}
.value-link{display:grid;justify-items:start;gap:4px;padding:16px 20px;border-radius:18px;background:linear-gradient(150deg,#EEFBF5,#D6F4E8);box-shadow:inset 0 0 0 1px rgba(15,158,142,.16);color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease-out),box-shadow .25s}
.value-price{font-size:.875rem;color:var(--ink-2)}
.value-price b{font-size:1.4rem;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.value-go{display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:650;color:var(--teal-ink)}
.value-link:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(15,158,142,.4),var(--glow)}
.value-link:hover .btn-arrow{transform:translateX(3px)}
@media (hover:hover){
  .value:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(15,158,142,.16),0 30px 60px -32px rgba(14,42,39,.4),0 18px 36px -26px rgba(15,158,142,.5)}
  .value:hover .ic-tile{transform:rotate(-5deg);background:var(--grad);color:var(--ink)}
  .value:hover .value-num{color:var(--teal-ink)}
}
@media (max-width:960px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento-photo{min-height:0;aspect-ratio:16/9}
}
@media (max-width:640px){
  .value-list{grid-template-columns:minmax(0,1fr);gap:12px}
  .value,.value:last-child{grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:start;padding:20px;border-radius:22px}
  .value .ic-tile-lg{width:48px;height:48px;border-radius:14px}
  .value h3{font-size:1.125rem;padding-right:30px;margin-bottom:6px}
  .value-num{top:20px;right:20px}
  .value:last-child .value-link{grid-column:1 / -1;justify-self:stretch;white-space:normal}
  .bento-photo{aspect-ratio:4/3}
}

/* ================= how a visit goes: wide photo with glass cards + a 5-step strip ================= */
.how{background:linear-gradient(180deg,var(--page-2) 0%,var(--page) 100%)}
.how::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 36% at 92% 10%,rgba(127,227,196,.26),transparent 70%),radial-gradient(36% 30% at 4% 70%,rgba(255,185,138,.14),transparent 70%)}
.how-photo{position:relative;margin:0;height:clamp(440px,40vw,560px);border-radius:36px;overflow:hidden;background:var(--wash);box-shadow:0 50px 100px -56px rgba(14,42,39,.6),0 0 0 1px rgba(14,42,39,.05)}
.how-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(1.04) brightness(1.03)}
.how-photo::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  background:radial-gradient(30% 45% at 72% 30%,rgba(255,196,140,.22),transparent 70%),linear-gradient(0deg,rgba(14,42,39,.22) 0%,rgba(14,42,39,0) 40%)}
.gcard{position:absolute;z-index:2;border-radius:24px}
.g-duration{left:24px;top:24px;padding:20px 26px 22px}
.g-label{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.g-big{margin:8px 0 8px;font-size:clamp(2rem,1.4rem + 1.6vw,2.9rem);font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-text{max-width:18rem;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.g-kit{right:24px;bottom:24px;width:min(470px,calc(100% - 48px));display:flex;gap:16px;align-items:flex-start;padding:20px 24px 22px 20px}
.g-kit h3{font-size:1.15rem;margin-bottom:6px}
.g-kit p{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}

.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(32px,3.6vw,48px);--p:0}
.steps::before,.steps::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:2px}
.step{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:start;gap:16px}
.step-num{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--white);color:var(--teal-ink);font-weight:750;font-size:1rem;
  box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.3),0 10px 20px -14px rgba(14,42,39,.35);transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--ease-out)}
.step-body{align-self:stretch;width:100%;padding:22px 22px 24px;border-radius:24px;background:linear-gradient(170deg,rgba(255,255,255,.95),rgba(255,255,255,.72));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(14,42,39,.045),var(--sh-sm);transition:transform .3s var(--ease-out),box-shadow .3s,background-color .3s}
.step-body::after{background:radial-gradient(300px circle at var(--mx,20%) var(--my,0%),rgba(127,227,196,.22),transparent 65%)}
.step h3{margin-bottom:8px;font-size:1.15rem}
.step p{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.step .step-note{display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:14px;padding:7px 12px 7px 9px;border-radius:12px;font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--teal-ink);background:var(--mint-3);box-shadow:inset 0 0 0 1px rgba(15,158,142,.2)}
.step-note .ic{width:16px;height:16px}
.step.is-passed .step-num{background:var(--grad);color:var(--ink);box-shadow:0 0 0 5px rgba(127,227,196,.24),0 12px 26px -10px rgba(15,158,142,.75)}
.step.is-on .step-body{transform:translateY(-6px);background:linear-gradient(165deg,#FFFFFF 0%,#E6F8F0 100%);box-shadow:0 0 0 1px rgba(15,158,142,.26),0 30px 60px -32px rgba(15,158,142,.62)}
/* the rail: row on wide screens, a column on narrow ones (ui.js measures it and sets is-row) */
.steps.is-row::before,.steps.is-row::after{left:var(--rail-x,0);top:var(--rail-y,26px);width:var(--rail-w,0);height:2px;margin-top:-1px}
.steps.is-row::before{background:repeating-linear-gradient(90deg,rgba(15,158,142,.32) 0 6px,transparent 6px 12px)}
.steps.is-row::after{background:linear-gradient(90deg,#0F9E8E,#7FE3C4);box-shadow:0 0 10px rgba(15,158,142,.45);transform:scaleX(var(--p));transform-origin:0 50%;transition:transform .25s linear}
.steps:not(.is-row)::before,.steps:not(.is-row)::after{left:25px;top:var(--rail-top,26px);height:var(--rail-h,0);width:2px}
.steps:not(.is-row)::before{background:repeating-linear-gradient(180deg,rgba(15,158,142,.32) 0 6px,transparent 6px 12px)}
.steps:not(.is-row)::after{background:linear-gradient(#0F9E8E,#7FE3C4);box-shadow:0 0 10px rgba(15,158,142,.45);transform:scaleY(var(--p));transform-origin:50% 0;transition:transform .25s linear}
@media (hover:hover){
  .step-body:hover{box-shadow:0 0 0 1px rgba(15,158,142,.2),0 26px 50px -30px rgba(14,42,39,.42)}
}
@media (max-width:1100px){
  .steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .step{grid-template-columns:52px minmax(0,1fr);grid-template-rows:none;align-items:start}
  .steps:not(.is-row) .step.is-on .step-body{transform:translateX(4px)}
}
@media (max-width:760px){
  .how-photo{height:auto;display:flex;flex-direction:column;border-radius:28px;background:var(--white)}
  .how-photo > img{position:relative;height:280px;object-position:44% 30%}
  .how-photo::after{display:none}
  .gcard{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:0 12px 12px}
  .g-duration{margin-top:-44px;padding:16px 18px}
  .g-kit{padding:16px;gap:12px;background:var(--page-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .g-kit::before{display:none}
  .steps:not(.is-row)::before,.steps:not(.is-row)::after{left:21px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .step-num{width:44px;height:44px;border-radius:13px;font-size:.9375rem}
  .step-body{padding:18px 18px 20px;border-radius:20px}
}

/* ================= life cycle ================= */
.cycle-sec{background:linear-gradient(180deg,var(--page) 0%,var(--peach-3) 60%,var(--page) 100%)}
.cycle-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 100% 50%,rgba(255,185,138,.2),transparent 70%),radial-gradient(30% 40% at 0% 10%,rgba(127,227,196,.2),transparent 70%)}
.cycle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(32px,5vw,72px);align-items:center}
.cycle-copy{display:grid;gap:clamp(28px,3vw,40px)}
.cycle-photo{position:relative;margin:0;aspect-ratio:2/1;border-radius:28px;overflow:hidden;background:var(--peach-3);box-shadow:var(--sh-lg)}
.cycle-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.96) brightness(1.06)}
.cycle-photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:linear-gradient(0deg,rgba(14,42,39,.26),transparent 50%)}
.cycle-photo-cap{position:absolute;z-index:1;left:14px;bottom:14px;right:auto;max-width:calc(100% - 28px);display:flex;align-items:center;gap:12px;padding:11px 18px 11px 11px;border-radius:18px;font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.cycle-photo-cap b{display:block;font-size:.975rem;color:var(--ink)}
.cycle{display:grid;gap:18px;padding:clamp(20px,3vw,34px);border-radius:var(--r-xl)}
.cycle-caption{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.125rem;letter-spacing:-.015em}
.cycle-chart{display:grid;gap:8px}
.cycle-marks{display:flex}
.mark-0{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.mark-0::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 4px rgba(255,185,138,.3)}
.cycle-track{position:relative;height:88px;border-radius:var(--r);overflow:hidden;background:var(--page-2);box-shadow:inset 0 1px 3px rgba(14,42,39,.08)}
.seg{position:absolute;top:0;bottom:0;left:calc(var(--from) / 28 * 100%);width:calc((var(--to) - var(--from)) / 28 * 100%);display:flex;flex-direction:column;justify-content:center;gap:2px;padding-inline:14px;line-height:1.2;white-space:nowrap;overflow:hidden}
.seg b,.seg span{position:relative;z-index:3}
.seg b{font-weight:700;font-size:1rem}
.seg span{font-size:.8125rem;font-variant-numeric:tabular-nums}
.seg-egg{background:linear-gradient(135deg,#FFEADB,#FFCFAE);color:var(--ink)}
.seg-nymph{background:linear-gradient(135deg,#DDF7ED,#B4EBD7);color:var(--ink);border-left:3px solid var(--white);padding-left:calc(3 / 28 * 100% + 14px)}
.seg-adult{background:linear-gradient(135deg,#0E7D72,#0A5C55);color:var(--white);border-left:3px solid var(--white)}
.hatch{position:absolute;top:0;bottom:0;z-index:2;left:calc(var(--from) / 28 * 100% + 3px);width:calc((var(--to) - var(--from)) / 28 * 100% - 3px);background:repeating-linear-gradient(135deg,rgba(217,119,63,.42) 0 3px,transparent 3px 8px);border-right:2px solid #D9773F}
.cycle-axis{position:relative;height:26px}
.cycle-axis span{position:absolute;top:0;left:calc(var(--at) / 28 * 100%);transform:translateX(-50%);padding-top:8px;font-size:.8125rem;line-height:18px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cycle-axis span::before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:6px;background:var(--line-2)}
.cycle-axis span:first-child{transform:none}
.cycle-axis span:first-child::before{left:0}
.cycle-axis span:last-child{transform:translateX(-100%)}
.cycle-axis span:last-child::before{left:auto;right:0}
.cycle-under{position:relative;height:30px}
.hatch-label{position:absolute;top:2px;left:calc(var(--from) / 28 * 100%);display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ink);white-space:nowrap}
.hatch-label::before{content:"";flex:none;width:18px;height:18px;border-radius:5px;border:2px solid #D9773F;background:repeating-linear-gradient(135deg,rgba(217,119,63,.5) 0 3px,transparent 3px 7px)}
.cycle-legend{display:none;flex-wrap:wrap;gap:8px 18px;font-size:.875rem;color:var(--ink-2)}
.cycle-legend li{display:inline-flex;align-items:center;gap:8px}
.cycle-legend b{color:var(--ink);font-weight:650}
.sw{flex:none;width:14px;height:14px;border-radius:4px}
.sw-egg{background:#FFD6B8}
.sw-nymph{background:#B4EBD7}
.sw-adult{background:#0E7D72}
.cycle-foot{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);background:var(--page-2);font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.cycle-foot .ic{color:var(--teal-ink);margin-top:2px}
@media (max-width:1024px){.cycle-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .cycle-under{height:auto}
  .hatch-label{position:static;white-space:normal}
  .cycle-photo{aspect-ratio:16/10;border-radius:22px}
}
@media (max-width:560px){
  .cycle-track{height:64px;border-radius:12px}
  .seg{padding-inline:7px}
  .seg-nymph{padding-left:calc(3 / 28 * 100% + 7px)}
  .seg b{font-size:.8125rem}
  .seg span{display:none}
  .cycle-legend{display:flex}
}
@media (max-width:420px){.cycle-axis span:nth-child(4){display:none}}

/* ================= prices: glass tariff cards with a picked state ================= */
.prices{padding-bottom:0;background:linear-gradient(180deg,var(--page) 0%,var(--page-2) 100%)}
.prices::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 30% at 30% 12%,rgba(127,227,196,.24),transparent 72%),radial-gradient(30% 24% at 100% 30%,rgba(255,185,138,.14),transparent 70%)}
.tariffs-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:18px}
.tariffs-head h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:1.3rem}
.tariffs-head h3 small{padding:5px 12px;border-radius:999px;background:var(--mint-3);color:var(--teal-ink);font-size:.8125rem;font-weight:650;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(15,158,142,.16)}
.tariffs-hint{display:none;align-items:center;gap:8px;font-size:.875rem;color:var(--ink-3)}
.tariffs-hint .ic{width:18px;height:18px;color:var(--teal)}
.ui .tariffs-hint{display:inline-flex}
.tariffs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tariff-item{display:flex}
.tariff{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;min-height:286px;padding:20px 18px 18px;border-radius:26px;color:var(--ink);text-decoration:none;
  background:linear-gradient(170deg,rgba(255,255,255,.95),rgba(255,255,255,.74));border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(14,42,39,.05),var(--sh-sm);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background-color .3s}
.tariff::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(140deg,#7FE3C4,rgba(15,158,142,.35) 50%,#FFB98A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.t-range{padding:4px 10px;border-radius:999px;background:var(--mint-3);font-size:.8125rem;font-weight:700;letter-spacing:.01em;color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,158,142,.16)}
.t-desc{margin-top:12px;font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink-2)}
.t-price{margin-top:auto;padding-top:18px;font-size:clamp(1.6rem,1.2rem + .7vw,2rem);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.t-per{margin-top:6px;font-size:.8125rem;color:var(--ink-3)}
.t-foot{display:flex;align-items:flex-end;gap:10px;width:100%;margin-top:14px}
.t-art{flex:none;display:grid;place-items:end center;width:40px;height:46px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#F2FBF7,#D9F4E9)}
.t-art .hairline{width:28px;height:39px}
.t-ruler{position:relative;flex:1;height:6px;margin-bottom:8px;border-radius:6px;background:var(--page-2);box-shadow:inset 0 0 0 1px rgba(14,42,39,.06)}
.t-ruler i{position:absolute;top:0;bottom:0;left:calc(var(--from) * 1%);width:max(6px,calc((var(--to) - var(--from)) * 1%));border-radius:6px;background:linear-gradient(90deg,#0F9E8E,#7FE3C4)}
.t-pick{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:var(--ink);opacity:0;transform:scale(.6);box-shadow:0 0 18px rgba(127,227,196,.7);transition:opacity .2s,transform .3s var(--ease-spring)}
.t-pick .ic{width:15px;height:15px;stroke-width:2.6}
.t-go{display:none;align-items:center;gap:6px;margin-top:12px;font-size:.875rem;font-weight:650;color:var(--teal-ink);opacity:.75;transition:opacity .2s}
.ui .t-go{display:inline-flex}
.tariff:hover,.tariff:focus-visible{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(15,158,142,.18),0 34px 64px -34px rgba(14,42,39,.42),0 20px 40px -26px rgba(15,158,142,.55)}
.tariff:hover .t-go,.tariff:focus-visible .t-go{opacity:1}
.tariff:hover .t-go .btn-arrow{transform:translateX(3px)}
.tariff:focus-visible{outline-offset:4px;border-radius:26px}
.tariff.is-picked{background:linear-gradient(165deg,#FFFFFF 0%,#E3F8EF 100%);box-shadow:0 0 0 1px rgba(15,158,142,.12),0 34px 64px -34px rgba(15,158,142,.7)}
.tariff.is-picked::before{opacity:1}
.tariff.is-picked .t-pick{opacity:1;transform:none}
.tariff.is-picked .t-price{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.term{padding:22px 22px 24px;border-radius:24px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.term-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:14px}
.term-head h3{font-size:1.0625rem;line-height:1.3}
.term-price{padding:6px 12px;border-radius:999px;background:var(--mint-3);font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--teal-ink);white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(15,158,142,.16)}
.term-price-peach{background:var(--peach-3);color:var(--apricot);box-shadow:inset 0 0 0 1px rgba(255,185,138,.5)}
.term p{font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.term p + p,.term .chips + p{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips li{padding:4px 11px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,42,39,.12);color:var(--ink);font-size:.8125rem;font-weight:600;transition:transform .25s var(--ease-out),background-color .2s,box-shadow .2s}
.chips li:hover{transform:translateY(-2px);background:var(--peach-3);box-shadow:inset 0 0 0 1px rgba(255,185,138,.7)}
@media (hover:hover){
  .term:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(15,158,142,.16),0 30px 56px -32px rgba(14,42,39,.4)}
  .term:hover .ic-tile{transform:rotate(-5deg)}
}
.price-foot{display:flex;gap:10px;align-items:flex-start;width:fit-content;max-width:100%;margin-top:18px;padding:12px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(14,42,39,.06);font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.price-foot .ic{color:var(--teal-ink);margin-top:2px}
@media (max-width:1180px){
  .tariffs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .terms{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tariffs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tariff{min-height:236px;padding:16px 14px 14px;border-radius:22px}
  .t-pick{top:10px;right:10px;width:26px;height:26px}
  .t-desc{font-size:.9375rem;margin-top:10px}
  .t-range{font-size:.75rem;padding:3px 8px}
  .tariff:hover,.tariff:focus-visible{transform:translateY(-3px)}
  .term{padding:18px}
  .term-head{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .term-head .ic-tile{grid-row:span 2}
  .term-price{grid-column:2;justify-self:start}
}

/* ================= calculator ================= */
.calc-band{position:relative;isolation:isolate;margin-top:clamp(56px,7vw,96px);padding-block:clamp(56px,7vw,104px);background:linear-gradient(180deg,rgba(228,245,238,0) 0%,#E4F5EE 16%,#EAF7F2 100%)}
.calc-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(36% 40% at 4% 40%,rgba(255,255,255,.8),transparent 70%),radial-gradient(40% 40% at 100% 70%,rgba(127,227,196,.3),transparent 70%)}
.calc{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:20px;align-items:start}
.measure{position:sticky;top:calc(var(--header-top) + var(--header-h) + 24px);padding:clamp(20px,3vw,30px);border-radius:var(--r-xl)}
.measure figure{display:grid;gap:22px}
.measure-stage{position:relative;display:grid;place-items:center;padding:18px 0 8px;border-radius:22px;background:radial-gradient(60% 70% at 50% 60%,#FFF1E6,transparent 72%),linear-gradient(180deg,#F4FBF8,#EAF7F1)}
.measure-art{width:150px;height:auto}
.m-body{fill:#BDEBDB}
.m-skin{fill:#F6CDB0}
.m-hair{fill:#B9773F}
.m-hair-line{fill:none;stroke:#9A6236;stroke-width:2.5;stroke-linecap:round}
.m-ruler-bg{fill:none;stroke:rgba(255,255,255,.8);stroke-width:7;stroke-linecap:round}
.m-ruler{fill:none;stroke:var(--teal-ink);stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.m-dot{fill:var(--teal-ink)}
.m-dot-end{transform-box:fill-box;transform-origin:50% 50%}
.m-lbl{font:600 12.5px var(--font);fill:var(--ink)}
.measure figcaption{display:grid;gap:10px;justify-items:start}
.measure-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 8px;border-radius:999px;background:var(--mint-3);color:var(--teal-ink);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(15,158,142,.16)}
.measure-tag .ic{width:16px;height:16px}
.measure strong{font-size:1.3rem;font-weight:750;line-height:1.3;letter-spacing:-.02em}
.measure p{font-size:.9375rem;color:var(--ink-2)}
.measure .measure-rule{padding:12px 14px;border-radius:var(--r-sm);background:var(--peach-3);box-shadow:inset 0 0 0 1px rgba(255,185,138,.4);color:var(--ink)}
.calc-panel{display:grid;gap:20px;padding:clamp(20px,3vw,34px);border-radius:var(--r-xl);box-shadow:0 0 0 1px rgba(14,42,39,.045),var(--sh-lg)}
.calc-head{display:flex;gap:16px;align-items:flex-start}
.calc-head div{display:grid;gap:4px}
.calc-head h3{font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.calc-head p{font-size:.9375rem;color:var(--ink-2)}

/* segmented control with a sliding thumb (real radios underneath) */
.segmented{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:5px;border-radius:18px;background:var(--page-2);box-shadow:inset 0 1px 3px rgba(14,42,39,.1),inset 0 0 0 1px rgba(14,42,39,.05);width:100%;max-width:520px;isolation:isolate}
.segmented::before{content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:14px;background:var(--grad);
  box-shadow:0 10px 20px -10px rgba(15,158,142,.85),inset 0 1px 0 rgba(255,255,255,.6);opacity:0;transform:scale(.94);
  transition:transform .32s var(--ease-out),opacity .2s}
.segmented:has(input:checked)::before{opacity:1;transform:none}
.segmented:has(label:nth-child(2) input:checked)::before{transform:translateX(100%)}
.segmented label{position:relative;z-index:1;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.segmented input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.segmented span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:14px;text-align:center;font-size:.9375rem;font-weight:650;line-height:1.25;color:var(--ink-2);transition:color .2s,transform .15s var(--ease-out)}
.segmented span .ic{width:19px;height:19px;transition:transform .3s var(--ease-out)}
.segmented label:hover span{color:var(--ink)}
.segmented label:active span{transform:scale(.97)}
.segmented input:checked + span{color:var(--ink)}
.segmented input:checked + span .ic{transform:rotate(-8deg)}
.segmented input:focus-visible + span{outline:3px solid var(--teal-ink);outline-offset:2px}
@supports not selector(:has(*)){.segmented input:checked + span{background:var(--mint)}}
.segmented-wide{max-width:none}
fieldset:has(.field-error:not([hidden])) .segmented{box-shadow:inset 0 0 0 1.5px var(--error);background:var(--error-bg)}

/* people in the calculator */
.calc-persons{display:grid;gap:12px}
.persons{display:grid;gap:12px}
/* smooth reflow (ui.js) holds a block at its old height while it glides: the grids keep their rows at
   their own height (align-content:start) instead of sharing the difference out, so nothing above the
   change moves; their children are positioned so a fading ghost (prepended) paints under every real
   block; and a block with an open list is never clipped */
.form-grid,.calc-panel,.calc-persons,.persons,.form-actions{align-content:start}
.ui :is(.form-grid,[data-calc],.calc-persons,.form-card) > *{position:relative}
.ui :is(.form-grid,[data-calc],.calc-persons,.form-card):has(.cs.is-open){overflow:visible!important}
/* all ten rows taken and a tariff card clicked: a hint where «Добавить человека» was */
.calc-max-note{padding:12px 16px;border-radius:var(--r-sm);background:var(--mint-3);box-shadow:inset 0 0 0 1px rgba(15,158,142,.24);color:var(--teal-ink);font-size:.9375rem;font-weight:600;line-height:1.45}
/* the row a tariff card filled (or pointed at) flashes once: colour only, short UI feedback */
.person.is-flash{animation:rowFlash 1.2s var(--ease-out)}
.person.is-new.is-flash{animation:personIn .26s .12s var(--ease-out) backwards,rowFlash 1.2s var(--ease-out)}
.person{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px;padding:16px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,42,39,.12),var(--sh-xs);transition:box-shadow .25s}
.person:hover{box-shadow:inset 0 0 0 1px rgba(14,42,39,.22),var(--sh-xs)}
.person:focus-within{box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.5),0 0 0 4px rgba(127,227,196,.22)}
.person-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.person-title{display:inline-flex;align-items:center;gap:10px;font-weight:720;font-size:1rem}
.person-title::before{content:"";flex:none;width:32px;height:32px;border-radius:10px;
  background:var(--mint-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6F65' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.6' r='3.6'/%3E%3Cpath d='M5.4 19.6c.6-3.9 3.2-6 6.6-6s6 2.1 6.6 6'/%3E%3C/svg%3E") center/19px no-repeat;box-shadow:inset 0 0 0 1px rgba(15,158,142,.16)}
.person-price{font-weight:800;font-size:1.375rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.person > :not(.person-top):not(.person-actions){grid-column:1 / -1}
.person:not(:has(.person-actions)) .person-top{grid-column:1 / -1}
.person-actions{grid-column:2;grid-row:1;display:flex;align-items:center}
.icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 10px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 .875rem/1 var(--font);cursor:pointer;transition:background-color .2s,color .2s}
.icon-btn::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/contain no-repeat}
.icon-btn:hover{background:var(--error-bg);color:var(--error)}
.add-person{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 18px;border-radius:18px;border:1.5px dashed rgba(15,158,142,.45);background:rgba(227,247,239,.5);
  color:var(--teal-ink);font:650 .975rem/1 var(--font);cursor:pointer;transition:background-color .2s,border-color .2s,transform .25s var(--ease-out),box-shadow .25s}
.add-person-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--grad);color:var(--ink);box-shadow:var(--glow);transition:transform .3s var(--ease-out)}
.add-person-ic .ic{width:16px;height:16px;stroke-width:2.4}
.add-person:hover{background:var(--mint-3);border-color:var(--teal);border-style:solid;transform:translateY(-1px)}
.add-person:hover .add-person-ic{transform:rotate(90deg)}
.add-person:active{transform:scale(.98)}
/* phones: «Убрать» is the cross alone (its aria-label still names the person), the price gets the room
   and goes under the title only when even that does not fit */
@media (max-width:440px){
  .person-top{flex-wrap:wrap;column-gap:10px;row-gap:2px;min-width:0}
  .person-title{white-space:nowrap;gap:8px}
  .person-title::before{width:28px;height:28px;border-radius:9px;background-size:17px}
  .person-price{margin-left:auto;font-size:1.1875rem}
  .person .icon-btn{width:40px;padding:0;justify-content:center;gap:0;font-size:0}
}
@media (max-width:359px){.person-title::before{display:none}}

/* toggle switches (the real checkbox stays, visually hidden and focusable) */
.check{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:44px;font-size:.9375rem;line-height:1.5;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.check > input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.check strong{color:var(--ink);font-weight:680}
.switch{position:relative;flex:none;width:50px;height:30px;border-radius:999px;background:#C5D3CF;box-shadow:inset 0 1px 3px rgba(14,42,39,.22);transition:background-color .25s,box-shadow .25s}
.switch::before{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff center/14px no-repeat;box-shadow:0 2px 6px rgba(14,42,39,.3);transition:transform .3s var(--ease-out),width .15s var(--ease-out)}
.check > input:checked + .switch{background:var(--teal);background-image:linear-gradient(118deg,#0F9E8E,#2FC4A6);box-shadow:0 8px 16px -8px rgba(15,158,142,.85),inset 0 1px 2px rgba(0,0,0,.12)}
.check > input:checked + .switch::before{transform:translateX(20px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6F65' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.6l4.2 4.2 8.8-9.2'/%3E%3C/svg%3E")}
.check:active > input:not(:checked) + .switch::before{width:30px}
.check:active > input:checked + .switch::before{width:30px;transform:translateX(14px)}
.check > input:focus-visible + .switch,.check > input:focus-visible + .cbox{outline:3px solid var(--teal);outline-offset:3px}
.switch-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border-radius:15px;background:var(--page-2);transition:background-color .25s,box-shadow .25s}
.switch-row .switch{grid-column:2;grid-row:1}
.switch-row .switch-text{grid-column:1;grid-row:1}
.switch-row:hover{background:#E6F2ED}
.switch-row:has(> input:checked){background:var(--mint-3);box-shadow:inset 0 0 0 1px rgba(15,158,142,.22)}
.switch-text{display:grid;gap:1px;line-height:1.35}
.switch-text small{font-size:.875rem;color:var(--ink-2)}
.switch-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,42,39,.12);transition:box-shadow .25s,background-color .25s}
.switch-card .switch{grid-column:3;grid-row:1}
.switch-card .ic-tile{grid-column:1;grid-row:1}
.switch-card .switch-text{grid-column:2;grid-row:1}
.switch-card:hover{box-shadow:inset 0 0 0 1px rgba(15,158,142,.5)}
/* the checked state only recolours: no outer ring or rotation, so the card does not look like it grows */
.switch-card:has(> input:checked){background:linear-gradient(180deg,#F4FCF8,#E3F7EF);box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.5)}
.switch-card:has(> input:checked) .ic-tile{background:var(--grad);color:var(--ink)}

/* summary: a deep «receipt» card (the one dark accent inside the calculator) */
.calc-summary{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:12px;padding:22px 24px;border-radius:22px;color:var(--on-dark-2);background:var(--grad-deep);box-shadow:0 26px 50px -26px rgba(8,43,40,.75)}
.calc-summary::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 100% 0%,rgba(47,196,166,.42),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(255,185,138,.2),transparent 70%)}
.calc-summary::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.5;mix-blend-mode:soft-light}
.calc-lines{display:grid;gap:8px;font-size:.9375rem}
.calc-lines li{display:flex;justify-content:space-between;gap:16px}
.calc-lines li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--on-dark);font-weight:650}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.22)}
.calc-total > span:first-child{font-weight:700;font-size:1.0625rem;color:var(--on-dark)}
.calc-total strong,.total-view{font-weight:800;font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem);line-height:1.05;letter-spacing:-.04em;color:#fff}
.total-box{position:relative;display:inline-block}
.total-view{display:none;text-shadow:0 0 28px rgba(127,227,196,.35)}
.ui .total-box [data-total]{position:absolute;inset:0;opacity:0;pointer-events:none}
.ui .total-view{display:inline-block}
.calc-summary .calc-note{color:var(--on-dark-3)}
.calc-note{font-size:.875rem;color:var(--ink-2)}
.calc-note-box{padding:14px 16px;border-radius:var(--r-sm);background:var(--peach-3);box-shadow:inset 0 0 0 1px rgba(255,185,138,.45);color:var(--ink);font-size:.9375rem}
.calc-panel > .btn{width:100%;justify-content:space-between}
@media (max-width:1024px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .measure{position:static}
  .measure figure{grid-template-columns:150px minmax(0,1fr);align-items:center}
  .measure-art{width:120px}
}
@media (max-width:520px){
  .measure figure{grid-template-columns:minmax(0,1fr);gap:16px}
  .calc-panel{padding:20px 14px}
  .calc-head .ic-tile-lg{width:44px;height:44px;border-radius:14px}
  .calc-head h3{font-size:1.3rem}
  .person{padding:12px}
  .switch-card{gap:12px;padding:12px}
  .calc-summary{padding:18px}
  .segmented span{flex-direction:column;gap:4px;font-size:.875rem;padding:8px 6px}
}

/* ================= custom select (ui.js) ================= */
.cs{position:relative}
/* an open list always paints above the blocks that follow its row or field */
.cs.is-open{z-index:40}
.person:has(.cs.is-open),.field:has(.cs.is-open){position:relative;z-index:40}
.cs > select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.cs-trigger{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:7px 10px 7px 8px;border-radius:15px;border:1.5px solid var(--control);background:var(--white);
  color:var(--ink);font:400 1.0625rem/1.3 var(--font);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s,background-color .2s}
.cs--search .cs-trigger{min-height:54px}
.cs-trigger:hover{border-color:var(--teal)}
.cs-trigger:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(127,227,196,.4)}
.cs.is-open .cs-trigger{border-color:var(--teal);box-shadow:0 0 0 4px rgba(127,227,196,.3)}
.cs.is-invalid .cs-trigger{border-color:var(--error);background:var(--error-bg)}
.cs-value{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.cs-value.is-new{animation:valueIn .3s var(--ease-out)}
.cs-label,.cs-placeholder{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-placeholder{color:var(--placeholder)}
.cs-chev{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--mint-3);color:var(--teal-ink);transition:transform .3s var(--ease-out),background .2s,color .2s}
.cs-chev .ic{width:18px;height:18px;stroke-width:2.2}
.cs-trigger:hover .cs-chev{background:var(--mint-2)}
.cs.is-open .cs-chev{transform:rotate(180deg);background:var(--grad);color:var(--ink)}
.cs-hair{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,#F2FBF7,#D9F4E9);overflow:hidden}
.cs-hair .hairline{width:26px;height:36px;margin-top:6px}
.cs-hair-empty{background:var(--page-2);color:var(--ink-3)}
.cs-hair-empty .ic{width:22px;height:22px}
.cs-main{display:grid;gap:1px;min-width:0;line-height:1.25}
.cs-main b{font-weight:700;font-size:1rem;color:var(--ink)}
.cs-main small{font-size:.875rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-pin{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mint-3);color:var(--teal-ink)}
.cs-pin .ic{width:19px;height:19px}
.cs.is-empty .cs-pin{background:var(--page-2);color:var(--ink-3)}
/* the listbox scale-fades for everyone */
.cs-pop{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);padding:6px;border-radius:20px;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(14,42,39,.07),0 30px 64px -24px rgba(14,42,39,.46),0 8px 18px -10px rgba(14,42,39,.16);
  visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:50% 0;pointer-events:none;
  transition:opacity .14s ease,transform .18s var(--ease-out),visibility 0s linear .18s}
.cs.is-open .cs-pop{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .18s ease,transform .26s var(--ease-out),visibility 0s}
.cs.is-up .cs-pop{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%;transform:translateY(6px) scale(.98)}
.cs.is-up.is-open .cs-pop{transform:none}
.cs-list{position:relative;display:grid;gap:2px;max-height:var(--cs-max,360px);overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin;scrollbar-color:var(--mint-2) transparent}
.cs-opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 10px;border-radius:14px;cursor:pointer;color:var(--ink);transition:background-color .12s}
.cs--tariff .cs-opt{min-height:62px}
.cs-opt.is-active{background:var(--page-2)}
.cs-opt[aria-selected="true"]{background:var(--mint-3)}
.cs-opt[aria-selected="true"] .cs-main b,.cs-opt[aria-selected="true"] .cs-label{color:var(--teal-ink);font-weight:700}
.cs-opt .cs-label{flex:1;font-size:1rem}
.cs-price{margin-left:auto;padding-left:10px;font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.cs-check{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-left:4px;border-radius:50%;background:var(--grad);color:var(--ink);opacity:0;transform:scale(.5);transition:opacity .15s,transform .25s var(--ease-out)}
.cs-check .ic{width:14px;height:14px;stroke-width:3}
.cs-opt:not(:has(.cs-price)) .cs-check{margin-left:auto}
.cs--tariff .cs-opt{position:relative}
.cs--tariff .cs-check{position:absolute;left:40px;top:6px;width:20px;height:20px;margin:0;box-shadow:0 0 0 2px #fff}
.cs--tariff .cs-check .ic{width:12px;height:12px}
.cs--tariff .cs-price{padding-right:6px}
.cs-opt[aria-selected="true"] .cs-check{opacity:1;transform:none}
.cs-opt mark{background:rgba(255,185,138,.55);color:inherit;border-radius:4px;padding:0 1px}
.cs-search{position:relative;margin:2px 2px 6px}
.cs-search .ic{position:absolute;left:13px;top:50%;width:18px;height:18px;color:var(--ink-3);transform:translateY(-50%);pointer-events:none}
.cs-search-input{width:100%;min-height:46px;padding:10px 12px 10px 40px;border-radius:13px;border:1px solid var(--line-2);background:var(--page);color:var(--ink);font:400 1rem/1.3 var(--font);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.cs-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cs-search-input::placeholder{color:var(--placeholder)}
.cs-search-input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(127,227,196,.35)}
.cs-empty{padding:14px 12px;font-size:.9375rem;color:var(--ink-2)}

/* ================= form controls ================= */
.field{display:grid;gap:8px;align-content:start}
.field label,.field legend{font-size:.975rem;font-weight:650;color:var(--ink);padding:0}
.field legend{margin-bottom:8px}
.field .opt{font-weight:400;color:var(--ink-2)}
.field .hint{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.field input[type="text"],.field input[type="tel"],.field select,.field textarea,.person select{width:100%;min-height:54px;padding:14px 16px;border-radius:15px;border:1.5px solid var(--control);background:var(--white);color:var(--ink);font:400 1.0625rem/1.4 var(--font);transition:border-color .2s,box-shadow .2s,background-color .2s}
.field ::placeholder{color:var(--placeholder);opacity:1;text-overflow:ellipsis}
@media (max-width:560px){.field ::placeholder{font-size:.9375rem}}
.field textarea{min-height:120px;resize:vertical}
.ui .field textarea{resize:none;max-height:340px;transition:border-color .2s,box-shadow .2s,background-color .2s,height .18s var(--ease-out)}
.field select,.person select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%230B6F65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:46px;cursor:pointer}
.field input[type="text"]:hover,.field input[type="tel"]:hover,.field select:hover,.field textarea:hover,.person select:hover{border-color:var(--teal)}
.field input[type="text"]:focus-visible,.field input[type="tel"]:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.person select:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(127,227,196,.4)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error);background-color:var(--error-bg)}
.field-error{display:flex;align-items:flex-start;gap:8px;font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--error)}
.field-error::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--error);color:var(--white);font-size:.8125rem;font-weight:800;line-height:1}
.field-error:not([hidden]){animation:errIn .25s var(--ease-out)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}

/* consent: a custom box with a drawn check-mark */
.check-consent{gap:12px;padding-block:4px;font-size:.9375rem;font-weight:400;color:var(--ink-2)}
.field .check{font-weight:400}
.cbox{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:8px;border:1.5px solid var(--control);background:var(--white);transition:background .2s,border-color .2s,box-shadow .25s,transform .2s var(--ease-out)}
.cbox svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cbox path{stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease-out) .04s}
.check-consent:hover .cbox{border-color:var(--teal)}
.check > input:checked + .cbox{background:var(--grad);border-color:transparent;box-shadow:var(--glow)}
.check > input:checked + .cbox path{stroke-dashoffset:0}
.check:active .cbox{transform:scale(.92)}
.check > input[aria-invalid="true"] + .cbox{border-color:var(--error);background:var(--error-bg)}

/* ================= deep band: booking ================= */
.band-deep{isolation:isolate;color:var(--on-dark-2);background:var(--grad-deep)}
.band-deep::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 56% at 8% 0%,rgba(47,196,166,.3),transparent 64%),radial-gradient(40% 50% at 100% 100%,rgba(47,196,166,.16),transparent 66%),radial-gradient(26% 30% at 80% 12%,rgba(255,185,138,.1),transparent 70%)}
.band-deep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.5;mix-blend-mode:soft-light}
.band-deep h2,.band-deep h3{color:var(--on-dark)}
.band-deep .eyebrow{color:#9BEBD3}
.band-deep .eyebrow::before{background:linear-gradient(90deg,rgba(127,227,196,0),var(--mint))}
.band-deep .accent{background:var(--grad-text-dark);-webkit-background-clip:text;background-clip:text;filter:none}
.band-deep :focus-visible{outline-color:var(--on-dark)}
.band-deep .btn-ghost{color:var(--on-dark);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.band-deep .btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
/* …but the white form card inside the band keeps the light-surface ghost button («Отправить ещё одну заявку») */
.band-deep .form-card .btn-ghost{color:var(--teal-ink);background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.32),var(--sh-xs)}
.band-deep .form-card .btn-ghost:hover{background:var(--mint-3);box-shadow:inset 0 0 0 1.5px rgba(15,158,142,.6),0 14px 28px -18px rgba(14,42,39,.4)}
.booking-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,72px);align-items:start}
.booking-copy{display:grid;gap:20px;justify-items:start;position:sticky;top:calc(var(--header-top) + var(--header-h) + 24px)}
.booking-copy .eyebrow{margin-bottom:0}
.booking-lead{color:var(--on-dark-2);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);max-width:30rem}
.contact-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:4px}
.contact-list > div{display:grid;gap:3px;padding:15px 18px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .25s,box-shadow .25s}
.contact-list > div:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(127,227,196,.3)}
.contact-list dt{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:650;letter-spacing:.02em;color:var(--on-dark-3)}
.contact-list dt .ic{width:18px;height:18px;color:var(--mint)}
.contact-list dd{font-size:1.0625rem;font-weight:620;color:var(--on-dark);line-height:1.4}
.contact-list a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(247,244,238,.45);transition:text-decoration-color .2s}
.contact-list a:hover{text-decoration-color:var(--mint)}
.contact-list a[href^="tel:"]{white-space:nowrap} /* the number never breaks at a hyphen */
.contact-list .messengers{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.contact-list .messengers a{text-decoration:none}
.booking-photo{position:relative;width:100%;margin:6px 0 0;aspect-ratio:16/10;border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.booking-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.98) brightness(1.02)}
.booking-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,43,40,.82) 0%,rgba(8,43,40,.3) 46%,rgba(8,43,40,0) 70%)}
.booking-note{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;font-size:.9rem;line-height:1.5;color:var(--on-dark-2)}
.booking-note strong{color:var(--on-dark)}
.booking-note .ic-tile{background:rgba(127,227,196,.14);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(127,227,196,.3)}
.form-card{position:relative;padding:clamp(20px,4vw,40px);border-radius:var(--r-xl);color:var(--ink);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(127,227,196,.95),rgba(255,255,255,.4) 40%,rgba(255,185,138,.75)) border-box;border:1.5px solid transparent;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.65),0 0 0 8px rgba(255,255,255,.04)}
.form-card :focus-visible{outline-color:var(--teal)}
.form-card .cs-trigger:focus-visible,.form-card input:focus-visible,.form-card textarea:focus-visible{outline:none}
.form-head{display:flex;gap:16px;align-items:center;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.form-head div{display:grid;gap:4px}
.form-head h3{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.form-head p{font-size:.9375rem;color:var(--ink-2)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.form-grid .full{grid-column:1 / -1}
.estimate-box{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:14px 16px;border-radius:var(--r);background:linear-gradient(135deg,#F0FBF6,#E0F6EC);box-shadow:inset 0 0 0 1px rgba(15,158,142,.2);font-size:.9375rem}
.estimate-box .ic-tile{grid-row:span 2}
.estimate-text{color:var(--ink-2)}
.estimate-box strong{grid-row:span 2;font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.estimate-box .link{justify-self:start;font-size:.875rem}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);background:var(--peach-3);box-shadow:inset 0 0 0 1px rgba(255,185,138,.45);font-size:.9375rem;line-height:1.5}
.notice .ic{color:var(--apricot);margin-top:1px}
.form-actions{display:grid;gap:12px}
.form-actions .btn{width:100%;justify-content:space-between}
.form-actions .btn-spin{order:3;margin-right:14px}
.form-status{font-size:.9375rem}
.form-status.is-error{padding:12px 14px;border-radius:var(--r-sm);background:var(--error-bg);color:var(--error);font-weight:600}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-success{display:grid;gap:14px;justify-items:start;padding-block:12px}
.success-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--mint-3);box-shadow:0 0 0 10px rgba(227,247,239,.6)}
.success-mark svg{width:58px;height:58px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success-mark circle{stroke:var(--teal);stroke-width:3;stroke-dasharray:1 2;stroke-dashoffset:0;opacity:.4}
.success-mark path{stroke:var(--teal-ink);stroke-width:4.5;stroke-dasharray:1 2;stroke-dashoffset:0}
.form-success:not([hidden]) .success-mark circle{animation:draw .6s var(--ease-out) .05s backwards}
.form-success:not([hidden]) .success-mark path{animation:draw .45s var(--ease-out) .35s backwards}
.form-success h3{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.form-success p{color:var(--ink-2)}
.form-success:focus-visible{outline-offset:8px}
@media (max-width:960px){.booking-grid{grid-template-columns:minmax(0,1fr)}.booking-copy{position:static}}
@media (max-width:560px){
  .contact-list{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .form-card{border-radius:var(--r-lg)}
  .form-head{gap:12px;margin-bottom:20px;padding-bottom:18px}
  .form-head .ic-tile-lg{width:44px;height:44px;border-radius:14px}
  .form-head h3{font-size:1.25rem}
  .estimate-box{grid-template-columns:auto minmax(0,1fr)}
  .estimate-box strong{grid-row:auto;grid-column:2}
  .estimate-box .link{grid-column:2}
}
/* a narrow booking column (961–1180px) and phones: the «Без лишних глаз» note would cover the faces,
   so it moves under the photo, as the lower part of the same card */
@media (min-width:961px) and (max-width:1180px),(max-width:560px){
  .booking-photo{display:flex;flex-direction:column;aspect-ratio:auto}
  .booking-photo img{position:relative;inset:auto;flex:none;height:auto;aspect-ratio:16/10}
  .booking-photo::after{display:none}
  .booking-note{position:relative;left:auto;right:auto;bottom:auto;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0}
}
@media (min-width:961px) and (max-width:1180px){
  .contact-list > div{padding:14px}
  .contact-list dd{font-size:1rem}
}
@media (max-width:380px){.booking-note .ic-tile{display:none}}

/* ================= faq ================= */
.faq-section{background:linear-gradient(180deg,var(--page) 0%,var(--page-2) 100%)}
.faq-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(36% 40% at 0% 20%,rgba(127,227,196,.2),transparent 70%),radial-gradient(30% 30% at 100% 90%,rgba(255,185,138,.12),transparent 70%)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-aside{position:sticky;top:calc(var(--header-top) + var(--header-h) + 24px);display:grid;gap:32px}
.faq-photo{position:relative;aspect-ratio:4/5;max-height:520px;border-radius:30px;overflow:hidden;background:var(--wash);box-shadow:var(--sh-lg)}
.faq-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.faq-photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);background:linear-gradient(0deg,rgba(14,42,39,.32),transparent 42%)}
.faq-cta{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 18px;border-radius:20px}
.faq-cta-text{font-size:.8125rem;line-height:1.35;color:var(--ink-2)}
.faq-cta-text b{display:block;font-size:1rem;color:var(--ink)}
.faq{display:grid;gap:10px}
.faq-item{border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 0 0 1px rgba(14,42,39,.06),var(--sh-xs);transition:box-shadow .25s var(--ease-out),background-color .25s}
.faq-item:hover{box-shadow:0 0 0 1px rgba(15,158,142,.22),var(--sh-sm)}
.faq-item[open]:not(.is-closing){background:var(--white);box-shadow:0 0 0 1px rgba(15,158,142,.28),0 24px 48px -28px rgba(14,42,39,.36),0 0 0 4px rgba(127,227,196,.14)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:66px;padding:16px 16px 16px 22px;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:620;line-height:1.4;border-radius:20px;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:-3px}
.faq-q{transition:color .2s}
.faq summary:hover .faq-q{color:var(--teal-ink)}
.faq-icon{position:relative;flex:none;width:36px;height:36px;border-radius:12px;background:var(--mint-3);box-shadow:inset 0 0 0 1px rgba(15,158,142,.16);transition:transform .3s var(--ease-out),background .25s,box-shadow .25s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:2px;background:var(--teal-ink);transition:background-color .25s}
.faq-icon::after{transform:rotate(90deg)}
.faq summary:hover .faq-icon{background:var(--mint-2)}
.faq-item[open]:not(.is-closing) .faq-icon{transform:rotate(135deg);background:var(--grad);box-shadow:var(--glow)}
.faq-item[open]:not(.is-closing) .faq-icon::before,.faq-item[open]:not(.is-closing) .faq-icon::after{background:var(--ink)}
.faq-body{overflow:hidden}
.faq .answer{padding:0 22px 22px;color:var(--ink-2)}
.faq-item[open] .answer{animation:answerIn .3s var(--ease-out)}
/* the pinned aside fits under the header on laptop heights: the photo gives up height (cropped, the
   «Остались вопросы?» card stays at its bottom) instead of pushing that card below the fold */
@media (min-width:961px){
  .faq-aside{display:flex;flex-direction:column;max-height:calc(100svh - var(--header-top) - var(--header-h) - 48px)}
  .faq-aside > .sec-stack{flex:none}
  .faq-photo{flex:0 1 auto;min-height:220px}
}
/* ui.js: a side column still taller than the screen is not pinned at all */
.faq-aside.is-unpinned,.booking-copy.is-unpinned{position:static;max-height:none}
@media (max-width:960px){
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-aside{position:static}
  .faq-photo{display:none}
}

/* ================= footer ================= */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(170deg,#0D403B 0%,#0A322F 55%,#072623 100%);color:var(--on-dark-2);padding-block:64px 28px}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 70% at 0% 0%,rgba(47,196,166,.24),transparent 70%),radial-gradient(34% 64% at 100% 100%,rgba(47,196,166,.12),transparent 70%)}
.site-footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.5;mix-blend-mode:soft-light}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 48px;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.footer-brand .logo{color:var(--on-dark)}
.footer-brand .logo-mark{filter:none}
.footer-brand p{margin-top:14px;max-width:18rem;font-size:.9375rem}
.footer-cta{margin-top:22px}
.footer-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.footer-info dt{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}
.footer-info dd{margin-top:8px;color:var(--on-dark);font-weight:520}
.footer-info dd.footer-contacts{display:grid;gap:0;justify-items:start;margin-top:0}
.footer-contacts a{display:inline-block;padding-block:8px;color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(247,244,238,.35);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.footer-contacts a:hover{text-decoration-color:var(--mint)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-top:22px;font-size:.875rem}
.footer-links{display:flex;flex-wrap:wrap;gap:0 24px}
.footer-links a{display:inline-block;padding-block:10px;color:var(--on-dark-2);text-decoration:underline;text-decoration-color:rgba(247,244,238,.3);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.footer-links a:hover{color:var(--on-dark);text-decoration-color:var(--on-dark)}
.site-footer :focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
@media (max-width:900px){
  .footer-main{grid-template-columns:minmax(0,1fr)}
  .footer-info{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* ================= mobile bottom bar (floating glass) ================= */
/* shown wherever the header has no «Записаться» button (the same 60em = 960px breakpoint), so tablets
   and landscape phones keep a booking button on screen too */
.mobile-bar{display:none}
@media (max-width:60em){
  .mobile-bar{display:flex;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;max-width:540px;margin-inline:auto;padding:8px;border-radius:22px;
    background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 22px 44px -18px rgba(14,42,39,.45),0 2px 8px rgba(14,42,39,.06);transition:transform .3s var(--ease-out),opacity .25s}
  .mobile-bar .btn{flex:1;min-height:52px;padding:0 16px}
  .mobile-bar .btn-icon{flex:0 0 auto;gap:8px;padding:0 16px}
  .mobile-bar .btn-icon .ic{width:20px;height:20px}
  .mobile-bar.is-hidden,body:has(#mobile-menu:not([hidden])) .mobile-bar,body:has(.cs.is-open) .mobile-bar{transform:translateY(calc(100% + 28px));opacity:0}
  /* room for the floating bar comes from the deep footer itself, so no light strip shows under it */
  .site-footer{padding-bottom:calc(28px + 84px + env(safe-area-inset-bottom,0px))}
}
/* phones in landscape: a slimmer bar, the screen is short */
@media (max-width:60em) and (max-height:500px) and (orientation:landscape){
  .mobile-bar{padding:6px;border-radius:19px}
  .mobile-bar .btn{min-height:44px}
}
@media (max-width:440px){
  .cs-trigger{gap:8px}
  .cs-value{gap:8px}
  .cs-label,.cs-placeholder{font-size:.94em}
  .mobile-bar .btn-icon{width:52px;padding:0}
  .mobile-bar .btn-icon-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:379px){
  .cs-value .cs-hair-empty,.cs-value .cs-pin{display:none}
}
/* narrow phones: the hair-length options keep the range on one line and show the whole description */
@media (max-width:400px){
  .cs-pop{padding:4px}
  .cs--tariff .cs-opt{gap:10px;min-height:50px;padding:6px 8px} /* all six lengths fit from mid-screen down */
  .cs--tariff .cs-opt .cs-hair{display:none}
  .cs--tariff .cs-check{display:none} /* sat on the hidden thumbnail; the picked row keeps its mint fill */
  .cs-main b{white-space:nowrap}
  .cs-opt .cs-main small{white-space:normal;overflow:visible;text-overflow:clip}
  .cs--tariff .cs-price{padding-left:6px}
  .cs-placeholder{white-space:normal;line-height:1.25}
}

/* ================= plain pages: 404, request result, privacy ================= */
.page{position:relative;isolation:isolate;padding-block:clamp(40px,7vw,96px) clamp(64px,8vw,112px)}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 100% 0%,rgba(127,227,196,.26),transparent 70%),radial-gradient(34% 40% at 0% 60%,rgba(255,185,138,.16),transparent 70%)}
.page-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;max-width:60rem;margin-inline:auto;border-radius:var(--r-xl);overflow:hidden}
.page-card.is-plain{grid-template-columns:minmax(0,1fr);max-width:42rem}
.page-photo{position:relative;min-height:320px;background:var(--wash)}
.page-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.page-body{display:grid;gap:16px;align-content:center;justify-items:start;padding:clamp(24px,4vw,48px)}
.page-body .eyebrow{margin-bottom:0}
.page-body h1{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);line-height:1;letter-spacing:-.045em}
.page-body p{color:var(--ink-2)}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.page-errors{list-style:disc;padding-left:1.25em;display:grid;gap:6px;color:var(--error);font-weight:600}
.prose-card{max-width:52rem;margin-inline:auto;padding:clamp(24px,4.5vw,56px);border-radius:var(--r-xl)}
/* minmax(0,1fr): the column never grows to the longest word, so the text wraps inside the card */
.prose{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:start}
.prose .eyebrow{margin-bottom:0}
.prose h1{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.5rem);line-height:1;letter-spacing:-.045em;overflow-wrap:break-word;max-width:100%}
/* «конфиденциальности» is one long word: on phones the heading shrinks so it fits the card */
@media (max-width:480px){.prose h1{font-size:clamp(1.5rem,10vw - 9px,2.2rem)}}
.prose h2{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);line-height:1.2;letter-spacing:-.025em;margin-top:20px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{list-style:disc;padding-left:1.25em;display:grid;gap:6px}
.placeholder{background:var(--peach-2);padding:0 6px;border-radius:6px;color:var(--ink)}
@media (max-width:760px){
  .page-card{grid-template-columns:minmax(0,1fr)}
  .page-photo{min-height:0;aspect-ratio:16/10}
}

/* ================= motion: small UI feedback, for everyone ================= */
/* the new row fades in once the «Добавить человека» button below has slid out of its way */
/* backwards, not both: a held transform after the animation would make each row its own stacking context
   and an open length list would slide under the cards below it */
.person.is-new{animation:personIn .26s .12s var(--ease-out) backwards}
.person-price.is-bump{animation:bump .35s var(--ease-out)}
.total-view.is-bump{animation:totalPop .45s var(--ease-out)}
.calc-total strong.tick{animation:tick .3s var(--ease)}

/* ================= motion: large and continuous, only without «reduce motion» ================= */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* hero entrance: tag → headline → text → actions → facts; the photo settles slowly */
  .rise{animation:rise .9s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
  .hero-img{animation:kenburns 22s var(--ease) both}
  .pulse::after{animation:pulse 2.4s var(--ease-out) 1.2s infinite}
  .hero-cue i::after{animation:drip 2.2s ease-in 1.5s infinite}
  .btn-primary::after{animation:sheen 5.2s var(--ease) 2.2s infinite}
  .h1-accent::after{animation:barIn 1s var(--ease-out) .75s backwards}
  .header-bar{animation:headerIn .7s var(--ease-out) backwards}
  /* scroll reveals (site.js adds .js-reveal and .is-in); translate keeps transform free for hover */
  .js-reveal .reveal:not(.is-in){opacity:0;translate:0 24px}
  .js-reveal .reveal.is-in{animation:reveal .8s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 80ms)}
  .js-reveal :is(.sec-head,.sec-stack,.booking-copy).reveal.is-in{animation:none}
  .js-reveal :is(.sec-head,.sec-stack,.booking-copy).reveal.is-in > *{animation:reveal .8s var(--ease-out) backwards}
  .js-reveal :is(.sec-head,.sec-stack,.booking-copy).reveal.is-in > :nth-child(2){animation-delay:.08s}
  .js-reveal :is(.sec-head,.sec-stack,.booking-copy).reveal.is-in > :nth-child(3){animation-delay:.16s}
  .js-reveal :is(.sec-head,.sec-stack,.booking-copy).reveal.is-in > :nth-child(n+4){animation-delay:.24s}
  .js-reveal .how-photo.is-in > img,.js-reveal .bento-photo.is-in img,.js-reveal .cycle-photo.is-in img,.js-reveal .faq-photo.is-in img{animation:photoIn 1.4s var(--ease-out) backwards}
  .js-reveal .how-photo.is-in .gcard{animation:chipIn .8s var(--ease-spring) backwards;animation-delay:.45s}
  .js-reveal .how-photo.is-in .g-kit{animation-delay:.6s}
  .js-reveal .term-double.is-in .chips li{animation:chipPop .45s var(--ease-spring) backwards;animation-delay:calc(var(--i,0) * 50ms + 400ms)}
  .js-reveal .cycle.is-in .seg{animation:segGrow 1s var(--ease-out) backwards;animation-delay:calc(var(--k,0) * 220ms + 300ms)}
  .js-reveal .cycle.is-in .hatch,.js-reveal .cycle.is-in .hatch-label{animation:fadeIn .6s ease 1.1s backwards}
  .js-reveal .measure.is-in .m-ruler{animation:rulerGrow 1.2s var(--ease-out) .35s backwards}
  .js-reveal .measure.is-in .m-dot-end{animation:dotPop .5s var(--ease-spring) 1.3s backwards}
  .js-reveal .step.is-in .step-num{animation:numPop .6s var(--ease-spring) backwards;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
  .ui .nav-drop.is-open :is(.nav-sub,.nav-promo){animation:subIn .34s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 40ms + 30ms)}
  .ui .cs.is-open .cs-opt{animation:optIn .3s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 16ms)}
  .mobile-menu:not([hidden]) :is(.mm-label,.mm-sub,.mm-link,.mm-cta,.mobile-contacts,.mm-foot){animation:itemIn .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 32ms + 70ms)}
  .field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.cs.is-invalid .cs-trigger,.check > input[aria-invalid="true"] + .cbox{animation:shake .4s var(--ease)}
  .form-success:not([hidden]) .success-mark{animation:chipIn .6s var(--ease-spring) backwards}
  .form-success:not([hidden]) > :not(.success-mark){animation:rise .6s var(--ease-out) .2s backwards}
  .is-counting{color:var(--teal-ink)}
  .tariff:hover .t-art,.tariff:focus-visible .t-art{animation:sway .6s var(--ease-out)}
}
/* with «reduce motion» the hero still arrives: a short plain fade, no travel, no blur */
@media (prefers-reduced-motion:reduce){
  .rise{animation:fadeIn .45s ease backwards;animation-delay:calc(var(--i,0) * 50ms)}
}
@keyframes rise{from{opacity:0;translate:0 22px;filter:blur(6px)}}
@keyframes reveal{from{opacity:0;translate:0 24px}}
@keyframes fadeIn{from{opacity:0}}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes barIn{from{transform:scaleX(0);opacity:0}}
@keyframes headerIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes pulse{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.6)}}
@keyframes drip{0%{opacity:1;top:-30%}100%{opacity:1;top:110%}}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-18deg)}36%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes photoIn{from{transform:scale(1.06)}}
@keyframes chipPop{from{opacity:0;transform:scale(.7)}}
@keyframes segGrow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rulerGrow{from{transform:scaleY(0)}}
@keyframes dotPop{from{transform:scale(0)}}
@keyframes numPop{from{transform:scale(.6);opacity:0}}
@keyframes sway{40%{transform:rotate(-5deg)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes itemIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes subIn{from{opacity:0;transform:translateY(-5px)}}
@keyframes optIn{from{opacity:0;transform:translateY(-4px)}}
@keyframes valueIn{from{opacity:0;transform:translateX(-6px)}}
@keyframes personIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes rowFlash{0%,30%{background-color:#F0FBF6;box-shadow:inset 0 0 0 2px var(--teal),0 0 0 6px rgba(127,227,196,.45)}}
@keyframes bump{40%{transform:scale(1.05);color:var(--teal-ink)}}
@keyframes totalPop{30%{transform:translateY(-2px);text-shadow:0 0 34px rgba(127,227,196,.9)}}
@keyframes tick{from{opacity:.3;transform:translateY(4px)}}
@keyframes answerIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}}
@keyframes shake{20%{translate:-5px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes spin{to{transform:rotate(360deg)}}