/* Abelix — UI pass (2026-11-12): tighter type scale, 8-pt spacing, product-like components (pills, segmented controls, chips,
   glass cards, bento grids), story widgets (chapter rail, flat card, dock) and section layouts. Loaded after site.css by index.html.
   Brand colours stay in site.css («БРЕНД»): ночь #0C0E13 · закат #E08A4C · окно #F4C27A · бумага #F2EFEA. */
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --maxw:1200px;
  --gutter:clamp(16px,4vw,48px);
  --sun-ink:#A9592A;                       /* sunset on paper (AA contrast) */
  --line-d:rgba(242,239,234,.10);--line-d2:rgba(242,239,234,.16);
  --line-l:rgba(12,14,19,.09);--line-l2:rgba(12,14,19,.14);
  --glass-d:rgba(18,21,28,.62);--glass-d2:rgba(24,28,36,.72);
  --card-d:#13161D;--card-d2:#181C24;--card-l:#FBFAF7;
  --shadow-d:0 1px 0 rgba(255,255,255,.04) inset,0 18px 48px rgba(0,0,0,.32);
  --shadow-l:0 1px 2px rgba(12,14,19,.04),0 12px 32px rgba(12,14,19,.06);
  --fs-body:16px;
  --t-fast:.18s;--t-mid:.32s;
}
@media (min-width:1200px){ :root{ --fs-body:17px } }
body{font-weight:400;font-size:var(--fs-body)}
/* native cursor: a product site keeps the system pointer (tooltips, text selection) */
#cursor{display:none!important}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:auto}
html.has-cursor a,html.has-cursor button,html.has-cursor [role=button],html.has-cursor summary,html.has-cursor label{cursor:pointer}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--brand-window);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--sun-ink)}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:var(--r-pill);background:var(--brand-paper);color:var(--brand-ink);font:600 14px/1 var(--font-ui);transition:top .2s}
.skip:focus{top:16px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- icons ---------- */
svg use{pointer-events:none}
.ic,.b-ic,.bc-ic svg,.chip svg,.badge svg,.addr svg,.callout svg,.c-row svg,.cta-cities svg,.icon-btn svg,.chip-float svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- eyebrow → chip ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s3);padding:7px 14px 7px 8px;border-radius:var(--r-pill);
  font:600 11px/1 var(--font-ui);letter-spacing:.14em;color:var(--brand-window);background:rgba(224,138,76,.1);border:1px solid rgba(224,138,76,.24)}
.eyebrow .num{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--brand-accent);color:var(--brand-ink);letter-spacing:.02em;opacity:1;font-size:10.5px}
.eyebrow .num::after{display:none}
.light .eyebrow{color:var(--sun-ink);background:rgba(224,138,76,.1);border-color:rgba(169,89,42,.2)}
.cap.ink .eyebrow,.hero .eyebrow{background:rgba(242,239,234,.66);border-color:rgba(169,89,42,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}
.cap:not(.ink) .eyebrow{background:rgba(12,14,19,.46);border-color:rgba(242,239,234,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}

/* ---------- type scale ---------- */
.sec-h,.cta-h,.end-h,.hero-line,.cap-h h2{font-family:var(--font-ui);font-weight:600;letter-spacing:-.028em}
.sec-h em,.cta-h em,.end-h em,.hero-line em,.cap-h h2 em{font-family:var(--font-display);font-weight:400;font-style:italic;letter-spacing:-.01em;font-size:1.1em;line-height:.9}
.sec-h,.sec-h.big{font-size:clamp(30px,3.4vw,46px);line-height:1.06}
.sec-sub{max-width:34em;margin:var(--s2) 0 0;font:400 clamp(15px,1.15vw,17px)/1.6 var(--font-ui);opacity:.72}
.sec-sub span{display:block;margin-top:8px}
.hero-line{font-size:clamp(26px,3.4vw,48px);line-height:1.08}
.cap-h h2{font-size:clamp(32px,4.2vw,60px);line-height:1.02}
.cap-h .sub{font-size:16px;line-height:1.55;margin-top:var(--s2)}
.end-h{font-size:clamp(34px,4.6vw,64px);line-height:1.02}
.cta-h{font-size:clamp(32px,3.8vw,52px);line-height:1.04}
h3{letter-spacing:-.01em}

/* ---------- layout ---------- */
.wrap{max-width:calc(var(--maxw) + 2 * var(--gutter));padding:clamp(64px,10vh,104px) var(--gutter)}
.sec-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s3) var(--s8);align-items:end;margin-bottom:var(--s6)}
.sec-top .sec-sub{margin:0 0 6px}
@media (max-width:900px){ .sec-top{grid-template-columns:1fr;margin-bottom:var(--s4)} }
.reveal{transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}

/* ---------- buttons ---------- */
.btn{gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font:600 14px/1 var(--font-ui);letter-spacing:.005em;text-transform:none;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-mid),color var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid)}
.btn::before{display:none!important}
.btn:active{transform:scale(.965)!important;transition-duration:.08s}
.btn .b-ic{width:18px;height:18px;flex:none;position:relative;z-index:1}
.btn-gold{background:var(--brand-accent);color:#16110C;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px rgba(224,138,76,.28)}
.btn-gold:hover{background:#EA9A5E;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 30px rgba(224,138,76,.4)}
.btn-glass,.btn-line{background:rgba(242,239,234,.08);color:var(--paper);border:1px solid var(--line-d2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-glass:hover,.btn-line:hover{background:rgba(242,239,234,.14);border-color:rgba(242,239,234,.28);color:var(--paper)}
.light .btn-glass,.light .btn-line{background:rgba(12,14,19,.04);color:var(--ink);border-color:var(--line-l2)}
.light .btn-glass:hover,.light .btn-line:hover{background:rgba(12,14,19,.08);border-color:rgba(12,14,19,.24);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 18px;font-size:13.5px}
.btn-lg{min-height:56px;padding:0 28px;font-size:15px}
.nav-cta{min-height:40px;padding:0 18px;font-size:13.5px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-d2);background:rgba(242,239,234,.06);color:var(--paper);transition:background var(--t-mid),transform var(--t-fast)}
.icon-btn:hover{background:rgba(242,239,234,.14)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px}

/* ---------- tooltips ---------- */
.tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:7px 10px;border-radius:var(--r-xs);background:#F2EFEA;color:#0C0E13;
  font:600 12px/1 var(--font-ui);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:5}
.tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#F2EFEA}
:hover > .tip,:focus-visible > .tip,.tip-on > .tip{opacity:1;transform:translate(-50%,0)}
.tip .tip-b{display:none}.tip-ok .tip .tip-a{display:none}.tip-ok .tip .tip-b{display:inline}

/* ---------- chips / badges ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:var(--s2) 0 0;padding:0}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);font:500 12.5px/1 var(--font-ui);letter-spacing:.01em;
  background:rgba(242,239,234,.06);border:1px solid var(--line-d2);color:rgba(242,239,234,.86);white-space:nowrap;font-style:normal}
.light .chip{background:rgba(12,14,19,.035);border-color:var(--line-l2);color:rgba(12,14,19,.78)}
.chip svg{width:14px;height:14px}
.st-free::before,.st-booked::before,.st-sold::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.st-free::before{background:#B9D37A;box-shadow:0 0 0 3px rgba(185,211,122,.18)}
.st-booked::before{background:#EE9C46;box-shadow:0 0 0 3px rgba(238,156,70,.18)}
.st-sold::before{background:#8C9099}
.chips-xs .chip{min-height:24px;padding:0 9px;font-size:11px;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);font:600 10.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;font-style:normal;
  background:rgba(242,239,234,.1);color:rgba(242,239,234,.8);border:1px solid var(--line-d2);white-space:nowrap}
.badge svg{width:13px;height:13px}
.badge.st-free{color:#CFE29A;background:rgba(185,211,122,.12);border-color:rgba(185,211,122,.28)}
.badge-glass{background:rgba(12,14,19,.56);color:var(--paper);border-color:rgba(242,239,234,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.badge-sun{background:rgba(224,138,76,.16);color:var(--brand-window);border-color:rgba(224,138,76,.36)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#B9D37A;box-shadow:0 0 0 0 rgba(185,211,122,.6);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(185,211,122,.55)}70%{box-shadow:0 0 0 7px rgba(185,211,122,0)}100%{box-shadow:0 0 0 0 rgba(185,211,122,0)}}

/* ---------- segmented controls ---------- */
.seg{position:relative;display:inline-flex;padding:4px;gap:2px;border-radius:var(--r-pill);background:rgba(242,239,234,.07);border:1px solid var(--line-d2)}
.light .seg{background:rgba(12,14,19,.05);border-color:var(--line-l)}
.seg button{position:relative;min-height:40px;padding:0 16px;border-radius:var(--r-pill);font:600 13.5px/1 var(--font-ui);color:inherit;opacity:.66;transition:opacity var(--t-mid),background var(--t-mid),color var(--t-mid),box-shadow var(--t-mid)}
.seg button:hover{opacity:1}
.seg button[aria-pressed="true"]{opacity:1;background:var(--brand-paper);color:var(--brand-ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.12)}
.light .seg button[aria-pressed="true"]{background:#fff}
.seg-sm button{min-height:34px;padding:0 12px;font-size:12.5px}

/* ---------- cards ---------- */
.glass-card{border-radius:var(--r-lg);border:1px solid var(--line-d);background:linear-gradient(180deg,rgba(242,239,234,.05),rgba(242,239,234,.02));box-shadow:var(--shadow-d);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}
.light .glass-card{background:var(--card-l);border-color:var(--line-l);box-shadow:var(--shadow-l)}
.tilt{--mx:50%;--my:0%;position:relative;transition:transform .5s var(--ease),border-color var(--t-mid),box-shadow var(--t-mid)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(244,194,122,.12),transparent 60%);z-index:2}
.tilt:hover::after{opacity:1}
.tilt.reveal{transition:opacity .7s var(--ease),transform .8s var(--ease),border-color var(--t-mid),box-shadow var(--t-mid)}
.light .tilt::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(224,138,76,.09),transparent 60%)}
.bc-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);color:var(--brand-window);background:rgba(224,138,76,.1);border:1px solid rgba(224,138,76,.22);flex:none}
.bc-ic svg{width:20px;height:20px}
.light .bc-ic{color:var(--sun-ink)}

/* skeleton shimmer for heavy media until the image is in */
.sk{background-color:#1A1E26}
.light .sk{background-color:#E7E2D9}
.sk:not(.sk-done){background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:skl 1.4s linear infinite}
.light .sk:not(.sk-done){background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%)}
@keyframes skl{from{background-position:120% 0}to{background-position:-120% 0}}
img[data-lazy]{transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
img[data-lazy]:not(.is-in){opacity:0}

/* ================================================================ header */
.nav{height:var(--nav-h);transition:height .35s var(--ease),color .5s var(--ease),background-color .4s,border-color .4s,box-shadow .4s}
.nav.compact{height:60px}
.nav-brand{width:96px;transition:width .35s var(--ease)}
.nav.compact .nav-brand{width:88px}
.nav-links{gap:2px!important;letter-spacing:0!important;text-transform:none;font:500 14px/1 var(--font-ui)!important}
.nav-links a{padding:10px 12px;border-radius:var(--r-pill);opacity:.82;transition:opacity var(--t-mid),background var(--t-mid)}
.nav-links a::after{display:none}
.nav-links a:hover{opacity:1;background:rgba(242,239,234,.1)}
.nav.on-light .nav-links a:hover{background:rgba(12,14,19,.06)}
.nav-links a[aria-current="true"]{opacity:1;background:rgba(242,239,234,.12)}
.nav.on-light .nav-links a[aria-current="true"]{background:rgba(12,14,19,.07)}
.lang{padding:3px;border-radius:var(--r-pill);border:1px solid rgba(242,239,234,.18);gap:0!important;letter-spacing:.06em!important}
.nav.on-light .lang{border-color:rgba(12,14,19,.14)}
.lang i{display:none}
.lang button{min-width:40px;min-height:32px;padding:0 10px!important;border-radius:var(--r-pill);font:600 11.5px/1 var(--font-ui)}
.lang button[aria-pressed="true"]{background:var(--brand-paper);color:var(--brand-ink)!important;opacity:1}
.nav.on-light .lang button[aria-pressed="true"]{background:var(--brand-ink);color:var(--brand-paper)!important}
.nav-cta.btn-gold{box-shadow:0 6px 18px rgba(224,138,76,.24)}
.nav.solid{background:rgba(12,14,19,.72);box-shadow:0 1px 0 rgba(242,239,234,.06),0 10px 30px rgba(0,0,0,.18)}
.nav.solid.on-light{background:rgba(246,244,240,.82);box-shadow:0 1px 0 rgba(12,14,19,.06),0 10px 30px rgba(12,14,19,.05)}
.nav.tuck{transform:none}
.nav-burger{width:44px!important;height:44px!important;border-radius:var(--r-pill);border:1px solid rgba(242,239,234,.18)}
.nav.on-light .nav-burger{border-color:rgba(12,14,19,.14)}
.nav-burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
@media (max-width:520px){ .nav{gap:10px} .lang button{min-width:40px;min-height:36px} }
/* menu sheet */
.menu{gap:0;font:600 22px/1.2 var(--font-ui)!important;letter-spacing:-.01em;padding-left:var(--gutter);padding-right:var(--gutter)}
.menu a{font-size:22px!important;padding:14px 4px;border-bottom:1px solid var(--line-d);display:flex;justify-content:space-between;align-items:center}
.menu a::after{content:"";width:8px;height:8px;border-top:1.6px solid var(--gold);border-right:1.6px solid var(--gold);transform:rotate(45deg);opacity:.8}
.menu .menu-sm{font:500 15px/1.3 var(--font-ui)!important;text-transform:none;letter-spacing:0;color:var(--paper-dim)}
.menu-cta{display:flex;gap:10px;margin-top:var(--s3);flex-wrap:wrap}
.menu-cta .btn{flex:1;border-bottom:0!important}
.menu-cta .btn::after{display:none!important}

/* ================================================================ story */
.hero .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:clamp(20px,3vh,32px)}
.hero-logo{width:clamp(180px,24vw,340px)}
.hero-line{margin-top:clamp(20px,3.5vh,36px)}
.hero-skip{gap:10px;min-height:44px;padding:0 16px 0 20px;border-radius:var(--r-pill);background:rgba(242,239,234,.7);border:1px solid rgba(12,14,19,.12);
  font:600 13.5px/1 var(--font-ui);letter-spacing:0;text-transform:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(12,14,19,.08);transition:opacity 1.2s var(--ease) .9s,background .3s,transform .18s}
html.ready .hero-skip{opacity:1}
.hero-skip:hover{background:rgba(255,255,255,.9)}
.hero-skip:active{transform:scale(.97)}
.hero-skip span{border:0;padding:0}
.hero-skip i{width:22px;height:22px;border-radius:50%;background:var(--brand-accent);display:grid;place-items:center}
.hero-skip i::after{position:static;width:6px;height:6px;border-color:#16110C;border-width:1.6px;transform:translateY(-1px) rotate(135deg)}
.hero-skip:hover i{width:22px}
.scroll-hint{font:600 10.5px/1 var(--font-ui);letter-spacing:.2em}

.cap-h{bottom:clamp(88px,14vh,140px);max-width:min(620px,52vw)}
.cap-h[data-b="5"]{max-width:min(520px,38vw)}
/* flight cards */
.fcards{width:min(340px,28vw);bottom:clamp(88px,14vh,140px)}
.fcard{padding:16px 18px 18px;border-radius:var(--r-lg);background:rgba(14,17,22,.6);border:1px solid rgba(242,239,234,.12);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px rgba(0,0,0,.32)}
.fcard header{margin-bottom:10px}
.fc-n{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:var(--r-pill);background:rgba(224,138,76,.16);color:var(--brand-window);font:700 10.5px/1 var(--font-ui);letter-spacing:.04em}
.fc-i{width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(224,138,76,.1);border:1px solid rgba(224,138,76,.22);stroke-width:1.6}
.fcard b{font:600 18px/1.25 var(--font-ui);letter-spacing:-.01em}
.fcard p{font-size:14px}
.fc-legend li{min-height:28px;padding:0 11px;font-size:12px}
.fc-legend .free::before{background:#B9D37A}
/* День / Вечер — segmented control with a sliding thumb */
.fc-toggle{position:relative;gap:0;padding:4px;border-radius:var(--r-pill);background:rgba(242,239,234,.07);border:1px solid rgba(242,239,234,.16);font:600 13px/1 var(--font-ui);letter-spacing:0}
.fc-toggle span{position:relative;z-index:1;min-width:84px;min-height:36px;display:inline-grid;place-items:center;padding:0 14px;opacity:.6;transition:opacity .3s,color .3s}
.fc-toggle i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);height:auto;border-radius:var(--r-pill);background:var(--brand-paper);transition:transform .45s var(--ease),background .45s}
.fc-toggle i::after{display:none}
.fc-toggle.eve i{transform:translateX(100%);background:#C9D2F2}
.fc-toggle:not(.eve) span:first-child,.fc-toggle.eve span:last-child{opacity:1;color:var(--brand-ink)}
.fc-toggle:active i{filter:brightness(.95)}
/* mini floor widget (fcard 03): flats of floor 7, demo statuses from masks/L_story.json */
.mini-floor{margin-top:14px;padding:10px;border-radius:var(--r-sm);background:rgba(242,239,234,.05);border:1px solid rgba(242,239,234,.1)}
.mini-floor .mf-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:600 11px/1 var(--font-ui);letter-spacing:.06em;color:rgba(242,239,234,.7)}
.mini-floor .mf-cells{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.mini-floor .mf-cells i{height:22px;border-radius:6px;display:grid;place-items:center;font:600 9.5px/1 var(--font-ui);font-style:normal;color:rgba(242,239,234,.82);background:rgba(185,211,122,.18);border:1px solid rgba(185,211,122,.35)}
.mini-floor .mf-cells i.sold{background:rgba(140,144,153,.18);border-color:rgba(140,144,153,.35);color:rgba(242,239,234,.5)}
.mini-floor .mf-cells i.hot{background:var(--brand-window);border-color:var(--brand-window);color:#16110C;box-shadow:0 0 12px rgba(244,194,122,.6)}
/* flat 87 card */
#flat-tag{gap:10px;padding:16px;border-radius:var(--r-lg);border:1px solid rgba(242,239,234,.16);background:rgba(14,17,22,.66);min-width:240px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px rgba(0,0,0,.4)}
#flat-tag::before{left:-28px;bottom:30px;width:28px;background:rgba(244,194,122,.8)}
#flat-tag .ft-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
#flat-tag b{font:700 22px/1 var(--font-ui);letter-spacing:-.02em}
#flat-tag em.badge{font:600 10.5px/1 var(--font-ui);letter-spacing:.06em;color:#CFE29A}
#flat-tag em::before{width:7px;height:7px;margin:0;background:#B9D37A}
#flat-tag .ft-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-sm);background:rgba(242,239,234,.05);border:1px solid rgba(242,239,234,.08)}
#flat-tag .ft-plan{width:52px;height:38px;flex:none;fill:none;stroke:var(--brand-window);stroke-width:1.4;stroke-linejoin:round}
#flat-tag .ft-row span{font:500 13px/1.35 var(--font-ui);white-space:normal;max-width:12em;color:rgba(242,239,234,.86)}
#flat-tag .ft-price{display:flex;justify-content:space-between;gap:12px;font:500 12.5px/1.2 var(--font-ui);color:rgba(242,239,234,.7)}
#flat-tag .ft-price small{font:inherit;letter-spacing:0;text-transform:none;color:rgba(242,239,234,.5);margin:0}
#flat-tag .ft-go{margin-top:2px;align-self:stretch;justify-content:center;min-height:44px;font:600 14px/1 var(--font-ui);letter-spacing:0;transition:filter .2s,transform .15s}
#flat-tag .ft-go:active{transform:scale(.97)}
#flat-tag > small{text-align:center}
/* renovation levels — segmented control */
.reno{border-radius:var(--r-lg);padding:14px;width:min(440px,34vw);bottom:clamp(88px,14vh,140px);background:rgba(14,17,22,.62);border:1px solid rgba(242,239,234,.12);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.reno-k{display:flex;justify-content:space-between;margin:2px 4px 10px;font:600 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,234,.55)}
.reno ol{gap:4px;margin:0 0 12px;padding:4px;border-radius:var(--r-md);background:rgba(242,239,234,.05);border:1px solid rgba(242,239,234,.08)}
.reno li{display:grid;place-items:center;min-height:40px;padding:0 6px;border-radius:var(--r-sm);font:600 12.5px/1.15 var(--font-ui);letter-spacing:0;text-align:center;color:rgba(242,239,234,.62);transition:background .3s,color .3s,box-shadow .3s}
.reno li::after{display:none}
.reno li.on{color:rgba(242,239,234,.86)}
.reno li:hover{background:rgba(242,239,234,.08);color:var(--paper)}
.reno li.cur,.reno li.cur:hover{background:var(--brand-paper);color:var(--brand-ink);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.reno li.eve.cur{background:#C9D2F2}
.reno li:focus-visible{outline:2px solid var(--brand-window);outline-offset:1px}
.reno-bar{height:4px;border-radius:4px;background:rgba(242,239,234,.12);overflow:hidden;margin:0 4px}
.reno-bar i{top:0;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand-accent),var(--brand-window))}
/* hud: chapter text moves to the rail; the demo note sits bottom-right */
.hud{justify-content:flex-end;bottom:22px}
.hud-ch{display:none}
.hud-demo{font:500 10.5px/1 var(--font-ui);letter-spacing:.12em}
.rail{display:none}
.demo-pill{display:none!important}
/* end panel */
.end-panel{max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto}
.end-sub{font-size:16px;margin-top:var(--s2)}
.end-btns{gap:var(--s2);margin-top:var(--s4);max-width:960px}
.big-btn{border-radius:var(--r-lg);min-height:clamp(180px,26vh,240px);padding:var(--s3);border:1px solid rgba(242,239,234,.16);box-shadow:var(--shadow-d);transition:transform .5s var(--ease),border-color .3s}
.big-btn::before{display:none}
.big-btn:hover{border-color:rgba(244,194,122,.5)}
.big-btn--gold{border-color:rgba(224,138,76,.55)}
.bb-k{font:600 11px/1.3 var(--font-ui);letter-spacing:.1em}
.bb-t{font:600 clamp(22px,2vw,30px)/1.1 var(--font-ui);letter-spacing:-.02em}
.big-btn > .bb-t::after{display:none}
.bb-arr{right:var(--s3);top:var(--s3);width:40px;height:40px;background:rgba(242,239,234,.12);border:1px solid rgba(242,239,234,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.big-btn:active{transform:scale(.985)!important}
.end-note{font-size:12px}

/* chapter rail: bottom-centre glass stepper (desktop), clickable chapters + skip */
.chapters{position:absolute;left:50%;bottom:16px;transform:translate(-50%,8px);display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-pill);
  background:rgba(14,17,22,.58);border:1px solid rgba(242,239,234,.12);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 12px 40px rgba(0,0,0,.25);pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s;color:var(--paper)}
.chapters.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chapters ol{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.ch-btn{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:84px;min-height:44px;padding:9px 12px 8px;border-radius:var(--r-pill);font:600 12.5px/1 var(--font-ui);color:rgba(242,239,234,.62);transition:background .3s,color .3s}
.ch-btn:hover{background:rgba(242,239,234,.08);color:var(--paper)}
.ch-btn[aria-current="step"]{color:var(--paper);background:rgba(242,239,234,.1)}
.ch-btn .ch-bar{display:block;height:3px;border-radius:3px;background:rgba(242,239,234,.16);overflow:hidden}
.ch-btn .ch-bar i{display:block;height:100%;width:100%;background:var(--brand-accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ch-skip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--brand-accent);color:#16110C;font:600 13px/1 var(--font-ui);white-space:nowrap;transition:background .2s,transform .15s}
.ch-skip:hover{background:#EA9A5E}
.ch-skip:active{transform:scale(.96)}
.ch-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chapters .tip{bottom:calc(100% + 12px)}
.chapters.on-light{background:rgba(246,244,240,.72);border-color:rgba(12,14,19,.1);color:var(--ink)}
.chapters.on-light .ch-btn{color:rgba(12,14,19,.6)}
.chapters.on-light .ch-btn:hover,.chapters.on-light .ch-btn[aria-current="step"]{color:var(--ink);background:rgba(12,14,19,.06)}
.chapters.on-light .ch-bar{background:rgba(12,14,19,.12)}

/* phone dock: thumb-reachable, one row */
#dock{display:none}
@media (max-width:760px){
  .chapters{display:none}
  #dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;align-items:center;gap:8px;padding:6px;border-radius:var(--r-pill);
    background:rgba(14,17,22,.74);border:1px solid rgba(242,239,234,.12);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 12px 40px rgba(0,0,0,.35);
    color:var(--paper);transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
  html.ready #dock{transform:none}
  html.menu-on #dock{transform:translateY(calc(100% + 24px))}
  #dock .d-story,#dock .d-site{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
  #dock .d-site{display:none}
  #dock.after .d-story{display:none}
  #dock.after .d-site{display:flex}
  .d-ch{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:0 6px 0 10px;background:none;border:0;color:inherit;text-align:left;min-height:44px;justify-content:center}
  .d-ch b{font:600 13px/1 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d-dots{display:flex;gap:4px}
  .d-dots i{flex:1;height:3px;border-radius:3px;background:rgba(242,239,234,.18);overflow:hidden;position:relative}
  .d-dots i::after{content:"";position:absolute;inset:0;background:var(--brand-accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
  #dock .btn{min-height:44px;padding:0 16px;font-size:13.5px;box-shadow:none}
  #dock .d-site .btn-gold{flex:1}
  #dock .icon-btn{flex:none}
  .cap-h{top:calc(var(--nav-h) + 12px)}
  .cap-h h2{font-size:clamp(30px,8.6vw,38px)}
  .cap-h .sub{font-size:14.5px}
  .fcards{bottom:84px;left:12px;right:12px}
  .fcard{padding:14px 14px 16px;border-radius:20px}
  .fcard b{font-size:17px}
  .reno{left:12px;right:12px;width:auto;bottom:84px;padding:10px}
  .reno-k{margin:2px 4px 8px}
  .reno li{min-height:44px;font-size:12px}
  .hud{display:none}
  .end-panel{padding-bottom:96px}
  .big-btn{min-height:132px;padding:var(--s2)}
  .bb-arr{right:var(--s2);top:var(--s2)}
  .bb-t{font-size:22px}
  #flat-tag{min-width:0;padding:12px;gap:8px}
  #flat-tag b{font-size:18px}
  #flat-tag .ft-row{padding:8px}
  #flat-tag .ft-plan{width:40px;height:30px}
  .hero-logo{width:clamp(180px,52vw,260px)}
  .hero-line{font-size:clamp(26px,7.4vw,32px)}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ================================================================ sections */
.bento{display:grid;gap:var(--s2)}
/* services */
.svc-bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense}
.bcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card-d);border:1px solid var(--line-d);overflow:hidden;box-shadow:var(--shadow-d);isolation:isolate}
.bcard:hover{border-color:rgba(242,239,234,.18)}
.bc-media{position:relative;flex:1;min-height:200px;overflow:hidden;isolation:isolate;margin:6px 6px 0;border-radius:calc(var(--r-lg) - 6px)}
.bc-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.bcard:hover .bc-media > img{transform:scale(1.05)}
.bc-body{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:var(--s2) var(--s3) var(--s3)}
.bc-body .bc-ic{grid-row:span 2}
.bc-body h3{font:600 17px/1.3 var(--font-ui);align-self:center}
.bc-body p{grid-column:2;margin:0;font:400 14.5px/1.55 var(--font-ui);color:rgba(242,239,234,.66)}
.bc-1{grid-column:span 2;grid-row:span 2}
.bc-1 .bc-media{min-height:380px}
.bc-2{grid-column:span 2}
.bc-7{grid-column:span 2}
.bc-2 .bc-media,.bc-7 .bc-media{min-height:190px}
.ui-float{position:absolute;z-index:3;border-radius:var(--r-md);background:rgba(14,17,22,.7);border:1px solid rgba(242,239,234,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--paper);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.chess{left:14px;top:14px;padding:12px;width:220px}
.uf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:600 11.5px/1 var(--font-ui);color:rgba(242,239,234,.8)}
.uf-head .badge{padding:4px 8px;font-size:9.5px}
.chess-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-bottom:10px}
.chess-grid i{aspect-ratio:1.3;border-radius:3px;background:rgba(185,211,122,.6)}
.chess-grid i.b{background:rgba(238,156,70,.75)}
.chess-grid i.s{background:rgba(140,144,153,.45)}
.chess-grid i.h{background:var(--brand-window);box-shadow:0 0 8px rgba(244,194,122,.9)}
.chess .chips{margin:0;gap:5px}
.mini87{right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.mini87 b{font:700 16px/1 var(--font-ui)}
.mini87 span{font:500 12px/1.3 var(--font-ui);color:rgba(242,239,234,.75)}
.mini87 .badge{align-self:flex-start}
.seg-demo{left:50%;bottom:14px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border-radius:var(--r-pill);width:min(92%,440px)}
.seg-demo span{position:relative;z-index:1;display:grid;place-items:center;min-height:30px;padding:0 6px;font:600 11.5px/1 var(--font-ui);color:rgba(242,239,234,.66);animation:segTxt 12s infinite}
.seg-demo span:nth-of-type(2){animation-delay:3s}.seg-demo span:nth-of-type(3){animation-delay:6s}.seg-demo span:nth-of-type(4){animation-delay:9s}
@keyframes segTxt{0%,4%{color:rgba(242,239,234,.66)}8%,27%{color:#0C0E13}31%,100%{color:rgba(242,239,234,.66)}}
.seg-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px) / 4);border-radius:var(--r-pill);background:var(--brand-paper);animation:segMove 12s infinite var(--ease)}
@keyframes segMove{0%,23%{transform:translateX(0)}27%,48%{transform:translateX(100%)}52%,73%{transform:translateX(200%)}77%,98%{transform:translateX(300%)}100%{transform:translateX(0)}}
.seg-mini{right:14px;top:14px;display:flex;padding:3px;border-radius:var(--r-pill)}
.seg-mini span{min-height:26px;display:grid;place-items:center;padding:0 10px;border-radius:var(--r-pill);font:600 11px/1 var(--font-ui);color:rgba(242,239,234,.7)}
.seg-mini span:first-child{background:var(--brand-paper);color:var(--brand-ink)}
.chip-float{left:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-pill);font:600 12px/1 var(--font-ui)}
.chip-float svg{width:16px;height:16px;color:var(--brand-window)}
.media-kiosk .kiosk{width:34%;border-width:5px;border-radius:12px}
.media-site .browser{width:84%;border-radius:10px}
.b-bar{height:24px}
.b-url{margin-left:10px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(242,239,234,.08);font:500 9.5px/1 var(--font-ui);color:rgba(242,239,234,.7)}
.browser img{top:24px!important;height:calc(100% - 24px)!important}
.b-cta{position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 10px;border-radius:var(--r-pill);background:var(--brand-accent);color:#16110C;font:600 9.5px/1 var(--font-ui)}
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.media-pair img{position:relative!important;width:100%;height:100%;object-fit:cover}
@media (max-width:1060px){
  .svc-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-1{grid-row:auto}
  .bc-1 .bc-media{min-height:320px}
}
@media (max-width:640px){
  .svc-bento{grid-template-columns:1fr}
  .bc-1,.bc-2,.bc-7{grid-column:auto}
  .bc-media,.bc-2 .bc-media,.bc-7 .bc-media{min-height:200px}
  .bc-1 .bc-media{min-height:300px}
  .chess{width:196px;left:10px;top:10px;padding:10px}
  .mini87{right:10px;bottom:10px;padding:10px 12px}
  .bc-body{padding:var(--s2) var(--s2) var(--s3)}
  .seg-demo span{font-size:10.5px}
}

/* studio (light) */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:0}
.lcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card-l);border:1px solid var(--line-l);box-shadow:var(--shadow-l);overflow:hidden;isolation:isolate}
.lcard:hover{border-color:var(--line-l2);box-shadow:0 1px 2px rgba(12,14,19,.04),0 18px 44px rgba(12,14,19,.09)}
.lc-media{position:relative;aspect-ratio:16/10;margin:6px 6px 0;border-radius:calc(var(--r-lg) - 6px);overflow:hidden}
.lc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lcard:hover .lc-media img{transform:scale(1.04)}
.lc-media .badge,.cat-pic .badge{position:absolute;left:12px;top:12px;z-index:2;text-transform:none;letter-spacing:.01em;font-size:12px;padding:7px 11px}
.lc-body{padding:var(--s3)}
.lc-body h3{font:600 18px/1.3 var(--font-ui)}
.lc-body > p:not(.get){margin:10px 0 0;font:400 15px/1.6 var(--font-ui);color:rgba(12,14,19,.68)}
.get{margin:var(--s3) 0 var(--s1);font:600 11px/1 var(--font-ui)!important;letter-spacing:.1em!important;color:var(--sun-ink)!important}
.checks{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;font:400 14.5px/1.5 var(--font-ui);color:rgba(12,14,19,.74)}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(224,138,76,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23A9592A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.dark .checks li,.pc-gold .checks li{color:rgba(242,239,234,.74)}
.dark .checks li::before,.pc-gold .checks li::before{background-color:rgba(224,138,76,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23F4C27A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (max-width:1000px){ .st-grid{grid-template-columns:1fr} .lc-media{aspect-ratio:16/9} }

/* why */
#why .wrap{padding-top:clamp(64px,10vh,104px)}
.why-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.fcell{grid-column:span 2;padding:var(--s3);border-radius:var(--r-lg);background:var(--card-d);border:1px solid var(--line-d);box-shadow:var(--shadow-d)}
.fcell:nth-child(4),.fcell:nth-child(5){grid-column:span 3}
.fcell h3{margin-top:var(--s2);font:600 17px/1.3 var(--font-ui)}
.fcell p{margin:8px 0 0;font:400 14.5px/1.55 var(--font-ui);color:rgba(242,239,234,.66)}
.fcell:hover{border-color:rgba(242,239,234,.18)}
.phones-card{grid-column:1/-1!important;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:var(--s4);align-items:center}
.pc-head h3{margin-top:var(--s2);font:600 22px/1.25 var(--font-ui);letter-spacing:-.015em;max-width:12em}
.phones{gap:var(--s2)}
.phones .ph{border-radius:20px;box-shadow:0 0 0 1px rgba(242,239,234,.12),0 20px 44px rgba(0,0,0,.4)}
.phones figcaption{margin-top:10px;font:500 13px/1.4 var(--font-ui);text-align:center}
@media (max-width:1060px){ .why-bento{grid-template-columns:repeat(2,minmax(0,1fr))} .fcell,.fcell:nth-child(4),.fcell:nth-child(5){grid-column:span 1} .fcell:nth-child(5){grid-column:1/-1} .phones-card{grid-template-columns:1fr} }
@media (max-width:640px){ .why-bento{grid-template-columns:1fr} .fcell:nth-child(5){grid-column:auto} .phones li{width:44vw} .fcell{padding:var(--s3) var(--s2)} }

/* catalog */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.tb-count{margin:0;font:500 14px/1 var(--font-ui);color:rgba(12,14,19,.6)}
.tb-count b{color:var(--ink)}
.cat-grid{gap:var(--s2);margin-top:0}
.cat{border:1px solid var(--line-l);background:var(--card-l)}
.cat.is-off{display:none}
.cat-pic{aspect-ratio:16/10;margin:6px 6px 0;border-radius:calc(var(--r-lg) - 6px)}
.cat-pic .ph-mark{border-radius:inherit}
.cat-pic .ph-mark svg{width:56px;height:56px}
.cat-tag{display:none}
.cat-txt{padding:var(--s3)}
.cat h3{font:600 18px/1.3 var(--font-ui)}
.cat .addr{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:6px 10px;border-radius:var(--r-pill);background:rgba(224,138,76,.08);font:600 12.5px/1 var(--font-ui);letter-spacing:0;color:var(--sun-ink)}
.cat .addr svg{width:14px;height:14px}
.cat-txt > p:not(.addr){font-size:14.5px;margin-top:12px}
.cat .chips{margin-top:var(--s2)}
.cat .acts{gap:8px;padding-top:var(--s3)}
.cat .btn{min-height:44px;padding:0 18px;font-size:13.5px}
.cat .btn .b-ic{width:15px;height:15px}
.progress{margin-top:var(--s3);height:6px;border-radius:6px;background:rgba(12,14,19,.07);overflow:hidden}
.progress i{display:block;height:100%;width:40%;border-radius:6px;background:linear-gradient(90deg,rgba(224,138,76,.4),var(--brand-accent));animation:prog 2.6s var(--ease-io) infinite alternate}
@keyframes prog{from{width:30%}to{width:62%}}
.cat-you{border-style:dashed;border-color:rgba(169,89,42,.3);background:rgba(251,250,247,.6)}

/* how */
.steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin:0;border:0;counter-reset:none}
.steps li.step{margin:0;padding:var(--s3);border:1px solid var(--line-d);border-radius:var(--r-lg);background:var(--card-d);box-shadow:var(--shadow-d)}
.steps li::before{display:none!important}
.steps li.step:not(:last-child)::before{display:block!important;content:"";position:absolute;left:auto;right:calc(-1 * var(--s2) - 1px);top:44px;width:var(--s2);height:1px;background:linear-gradient(90deg,rgba(224,138,76,.6),rgba(224,138,76,.1));box-shadow:none;border-radius:0}
.steps .st-n{display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:var(--s2);border-radius:50%;font:700 14px/1 var(--font-ui);font-style:normal;color:#16110C;background:var(--brand-accent);box-shadow:0 0 0 5px rgba(224,138,76,.14)}
.steps b{font:600 16.5px/1.3 var(--font-ui)}
.steps li > span:not(.st-n){margin:8px 0 0;font:400 14px/1.55 var(--font-ui)}
.steps i.chip span{margin:0;font:inherit;color:inherit}
.steps i.chip{margin-top:auto;align-self:flex-start;text-transform:none;letter-spacing:0;color:var(--brand-window);border-color:rgba(224,138,76,.26);background:rgba(224,138,76,.08)}
.steps li.step > i.chip{margin-top:var(--s2)}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s2);margin-top:var(--s2);align-items:stretch}
.callout{display:flex;gap:14px;margin:0;padding:var(--s3);border-radius:var(--r-lg);background:rgba(224,138,76,.08);border:1px solid rgba(224,138,76,.22);font:400 15px/1.6 var(--font-ui);color:rgba(242,239,234,.86)}
.callout svg{width:22px;height:22px;flex:none;color:var(--brand-window);margin-top:1px}
.need{display:block;margin:0;padding:var(--s3);border-top:1px solid var(--line-d)}
.need h3{font:600 17px/1.3 var(--font-ui)}
.need .checks{grid-template-columns:1fr 1fr;gap:12px var(--s3)}
@media (max-width:1100px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .steps li.step::before{display:none!important} .steps li.step:last-child{grid-column:1/-1} .how-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .steps{grid-template-columns:1fr} .steps li.step:last-child{grid-column:auto} .need .checks{grid-template-columns:1fr} .steps li.step{padding:var(--s2) var(--s3) var(--s3)} }

/* price */
.prices{gap:var(--s2);margin-top:0}
.pc{padding:var(--s3);border-radius:var(--r-lg);background:var(--card-l);border:1px solid var(--line-l);box-shadow:var(--shadow-l)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex-wrap:wrap}
.pc h3{font:600 12px/1.3 var(--font-ui);letter-spacing:.08em;color:rgba(12,14,19,.6)}
.pc .pc-v{margin:var(--s3) 0 var(--s1);font:700 clamp(30px,2.8vw,40px)/1.05 var(--font-ui);letter-spacing:-.035em}
.pc p{font-size:14.5px}
.pc .checks{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-l)}
.pc .pay{display:none}
.pc[data-pay="launch"] .pay-launch,.pc[data-pay="month"] .pay-month{display:block;animation:fadeUp .35s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pc-gold{background:var(--brand-ink);border-color:var(--brand-ink);box-shadow:0 24px 60px rgba(12,14,19,.25)}
.pc-gold h3{color:var(--brand-window)}
.pc-gold .checks{border-top-color:rgba(242,239,234,.12)}
.pc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.pc-btns .btn{margin:0;min-height:44px;padding:0 16px;font-size:13.5px;flex:1 1 auto}
.pc .btn{margin-top:0}
.kit{margin-top:var(--s2);padding:var(--s3);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:var(--s2) var(--s4);align-items:center}
.kit-head h3{font:600 18px/1.3 var(--font-ui)}
.kit-head p{margin:6px 0 0;font:400 14.5px/1.55 var(--font-ui);color:rgba(12,14,19,.64)}
.kit-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-tg{min-height:40px;padding:0 14px 0 10px;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .12s}
.chip-tg svg{width:16px;height:16px;padding:2px;border-radius:50%;border:1.4px solid currentColor;opacity:.45;stroke-width:2.4}
.chip-tg:hover{border-color:rgba(12,14,19,.28)}
.chip-tg:active{transform:scale(.96)}
.chip-tg[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--brand-paper)}
.chip-tg[aria-pressed="true"] svg{opacity:1;background:var(--brand-accent);border-color:var(--brand-accent);color:#16110C}
.kit-foot{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.kit-n{margin:0;font:500 14px/1 var(--font-ui);color:rgba(12,14,19,.6)}
.kit-n b{color:var(--ink)}
@media (max-width:900px){ .prices{grid-template-columns:1fr} .kit{grid-template-columns:1fr} .kit-foot{grid-column:auto} .kit-foot .btn{width:100%} }

/* faq */
.faq-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--s4) var(--s8)}
.faq-head{top:calc(60px + var(--s4))}
.ask{margin-top:var(--s3);padding:var(--s3);max-width:340px}
.ask p{margin:0 0 var(--s2);font:400 14.5px/1.55 var(--font-ui);color:rgba(242,239,234,.72)}
.faq-list{border:0;display:grid;gap:var(--s1)}
.faq-list details{border:1px solid var(--line-d);border-radius:var(--r-md);background:var(--card-d);transition:border-color .3s,background .3s}
.faq-list details:hover{border-color:rgba(242,239,234,.18)}
.faq-list details[open]{background:var(--card-d2);border-color:rgba(224,138,76,.3)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px;padding:16px 16px 16px var(--s3);font:600 16px/1.4 var(--font-ui)!important;border-radius:var(--r-md)}
.faq-list summary::before,.faq-list summary::after{display:none}
.faq-list summary:hover{color:inherit}
.acc-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:rgba(242,239,234,.07);border:1px solid var(--line-d2);transition:transform .35s var(--ease),background .3s}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:2px;background:var(--brand-window);transition:transform .35s var(--ease)}
.acc-ic::after{transform:rotate(90deg)}
details[open] > summary .acc-ic{transform:rotate(180deg);background:rgba(224,138,76,.16)}
details[open] > summary .acc-ic::after{transform:rotate(0)}
.acc-body{overflow:hidden}
.faq-list details p{padding:0 var(--s3) var(--s3);max-width:44em;font:400 15px/1.65 var(--font-ui)}
@media (max-width:900px){ .faq-wrap{grid-template-columns:1fr} .ask{max-width:none} .faq-list summary{padding-left:var(--s2)} .faq-list details p{padding:0 var(--s2) var(--s2)} }

/* home (renovation for owners) */
.home-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s4);padding:var(--s4);align-items:center}
.home-txt .sec-sub{margin-top:var(--s2)}
.home-txt .checks{margin-top:var(--s3)}
.home-btns{margin-top:var(--s3);gap:8px}
.home-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden}
.home-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-media .hm-after{clip-path:inset(0 0 0 var(--x,50%))}
.home-media::after{content:"";position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--brand-paper);box-shadow:0 0 16px rgba(0,0,0,.35);z-index:2;pointer-events:none}
.home-media::before{content:"";position:absolute;left:var(--x,50%);top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:3;pointer-events:none;
  background:var(--brand-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%230C0E13' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hm-b1,.hm-b2{position:absolute;top:12px;z-index:3;text-transform:none;letter-spacing:.01em;font-size:12px}
.hm-b1{left:12px}.hm-b2{right:12px}
.hm-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.hm-range:focus-visible + *,.home-media:focus-within::before{box-shadow:0 0 0 3px var(--sun-ink),0 6px 18px rgba(0,0,0,.3)}
@media (max-width:900px){ .home-card{grid-template-columns:1fr;padding:var(--s3) var(--s2)} .home-media{order:-1} }

/* contact */
.cta{min-height:auto;padding-top:clamp(96px,16vh,180px)}
.cta::before{background:linear-gradient(0deg,rgba(12,14,19,.96) 0%,rgba(12,14,19,.7) 45%,rgba(12,14,19,.35) 100%)}
.cta-in{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter) var(--s8)}
.cta-card{max-width:640px;padding:var(--s5);background:rgba(14,17,22,.62)}
.cta-sub{font-size:16px;margin-top:var(--s2)}
.cta-btns{gap:10px;margin-top:var(--s4)}
.cta-btns .btn{min-height:56px}
.cta-rows{margin-top:var(--s3);border-top:1px solid var(--line-d)}
.c-row{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--line-d);font:500 14px/1.3 var(--font-ui)}
.c-row > svg{width:18px;height:18px;color:var(--brand-window);flex:none}
.c-row > span{color:rgba(242,239,234,.55);min-width:80px}
.c-row a{color:var(--paper);font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.c-row a:hover{border-color:var(--brand-window)}
.c-row .icon-btn{margin-left:auto;width:40px;height:40px}
.c-row .icon-btn .tip{left:auto;right:0;transform:translate(0,4px)}
.c-row .icon-btn .tip::after{left:auto;right:14px}
.c-row .icon-btn:hover > .tip,.c-row .icon-btn:focus-visible > .tip,.c-row .icon-btn.tip-on > .tip{transform:none}
.cta-demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s3)}
.cta-demo > span{font:600 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,234,.5);margin-right:4px}
.chip-link{min-height:36px;transition:background .2s,border-color .2s}
.chip-link:hover{background:rgba(242,239,234,.12);border-color:rgba(242,239,234,.28)}
.chip-link svg{width:13px;height:13px;opacity:.7}
.cta-cities{display:flex;gap:8px;align-items:flex-start;margin-top:var(--s3)!important;font-size:13px!important}
.cta-cities svg{width:16px;height:16px;flex:none;color:var(--brand-window);margin-top:1px}
.cta-direct{display:none}
.foot{max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;width:100%;align-items:center;padding:var(--s3) var(--gutter);font-size:12.5px;letter-spacing:0;border-top:1px solid var(--line-d)}
.foot-logo{width:88px;color:var(--paper)}
.foot nav{gap:4px 4px}
.foot nav a{padding:8px 10px;border-radius:var(--r-pill);transition:background .2s,color .2s}
.foot nav a:hover{background:rgba(242,239,234,.08)}
.foot-note{flex-basis:100%;color:rgba(242,239,234,.4)}
@media (max-width:760px){ .cta-card{padding:var(--s3) var(--s2)} .cta-btns .btn{width:100%} .c-row > span{min-width:64px} .cta-in{padding-bottom:var(--s5)} }

/* phones: 44 px targets */
@media (pointer:coarse){ .chip-tg,.seg button,.chip-link{min-height:44px} .faq-list summary{min-height:64px} }
@media (prefers-reduced-motion:reduce){
  .seg-thumb,.seg-demo span,.live-dot,.progress i,.sk:not(.sk-done){animation:none!important}
  .tilt{transition:none}
}
.end-panel .eyebrow,.ss-hero .eyebrow{align-self:flex-start}
html.rm .ss-hero .eyebrow{align-self:center}
#flat-tag .ft-row span{max-width:14em}
.cat .addr{align-self:flex-start}
@media (max-width:760px){
  .cap-h,.cap-h[data-b="5"]{max-width:none;bottom:auto}
  .fcards{width:auto}
  .hero .eyebrow{font-size:10px;letter-spacing:.06em;padding:6px 12px 6px 6px}
  #flat-tag .ft-price,#flat-tag .ft-plan,#flat-tag > small{display:none}
  #flat-tag .ft-row{padding:0;background:none;border:0}
  #flat-tag .ft-row span{font-size:12px;max-width:11em}
  #flat-tag .ft-go{min-height:40px;font-size:13px}
}
.nav-brand,.foot-logo{display:block;padding:11px 0}
.c-row a{padding:12px 0}

/* «Почему мы» (2026-11-12): 5 причин — компактные пилюли рядом с телефонами вместо сетки текстовых карточек; полный текст — в title */
.why-pills{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0 0;padding:0;list-style:none;max-width:22em}
.why-pills .chip{min-height:34px;padding:0 13px 0 11px;cursor:help;color:rgba(242,239,234,.86)}
.why-pills svg{width:15px;height:15px;flex:none;color:var(--brand-window,#F4C27A)}
@media (max-width:1060px){ .why-pills{max-width:none} }
@media (max-width:640px){ .why-pills{gap:6px} .why-pills .chip{min-height:32px;font-size:12px;padding:0 11px 0 9px} }