/* ============================================================
SOKOLOVSKA ESTATE — shared design system
Editorial luxury · warm limestone + espresso ink + antique gold
Used across every page. Home-specific blocks at the bottom.
============================================================ */
:root{
/* soft green-tinted paper / surfaces (whole site shifted to green) */
--bone: #EEF1E9;
--bone-2: #E6EBDF;
--surface: #F4F7EF;
--paper-edge: #D9E0CE;
/* deep forest-green darks */
--ink: #14201A;
--ink-soft: #1C2A22;
--espresso: #0B120D;
/* green-gray neutrals */
--muted: #626E60;
--muted-2: #656F63; /* 4.59:1 on bone, 4.84:1 on surface — #6A7568 only reached 4.22 */
--muted-3: #7A8874; /* large text only: 3.46:1 on surface, 3.28:1 on bone — step numerals */
--line: #D2DAC8;
--line-soft: #E1E7D8;
--line-dark: rgba(238,241,233,.12);
--line-dark-2: rgba(238,241,233,.22);
/* accent — deep green #213324 (client request) + on-dark sibling.
Token names kept as --gold-* to avoid churn across 80+ refs; they now
hold the green accent scale. */
--gold-ink: #213324; /* exact client color; on bone ~9.7:1 */
--gold: #2F4A38; /* mid green */
--gold-bright: #74A98D; /* on dark only: lightened same-hue green, ~7.2:1 on espresso */
--gold-glow: rgba(116,169,141,.5);
/* type — Brygada 1918 (warm Polish antiqua, characterful italics) + Manrope */
--display: "Brygada 1918", "Iowan Old Style", "Times New Roman", Georgia, serif;
--body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--wrap: 1320px;
--gut: clamp(20px, 5vw, 72px);
--ease: cubic-bezier(.2,.72,.18,1);
--ease-out: cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; scroll-padding-top:clamp(74px,10vh,96px); overflow-x:clip; }
body{
font-family:var(--body);
background:var(--bone);
color:var(--ink);
font-size:17px; line-height:1.6; font-weight:400;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x:clip;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--ink);color:var(--bone)}
/* ---------- focus visibility (a11y) ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav:not(.scrolled) :focus-visible,.hero :focus-visible,.statement :focus-visible,
.stats :focus-visible,.process :focus-visible,.cta :focus-visible,.footer :focus-visible,
.mobile-menu :focus-visible,.on-dark:focus-visible{outline-color:var(--bone)}
/* ---------- skip link ---------- */
.skip-link{
position:fixed;top:14px;left:14px;z-index:200;
background:var(--ink);color:var(--bone);padding:12px 20px;border-radius:100px;
font-size:13px;font-weight:600;letter-spacing:.02em;
transform:translateY(-180%);transition:transform .3s var(--ease);
}
.skip-link:focus{transform:none;outline:2px solid var(--bone);outline-offset:2px}
/* ---------- visually hidden ---------- */
/* The logo is a mask, i.e. a background — so the name it draws has to live in the
DOM as real text for screen readers, search engines and no-CSS rendering. */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ---------- type utilities ---------- */
.eyebrow{
font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
color:var(--muted);
}
.eyebrow .dot{color:var(--gold-ink)}
.display{
font-family:var(--display); font-weight:500; line-height:1.0;
letter-spacing:-.016em; color:var(--ink);
}
/* text-wrap:balance evens out the rag, which otherwise breaks differently in each
of the four languages; break-word is the last-resort guard so a long Ukrainian
compound can never push out of its column. */
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.012em;line-height:1.04;
text-wrap:balance;overflow-wrap:break-word}
h4,h5,h6,blockquote,figcaption,.eyebrow{text-wrap:balance}
p,li,dd,.lead{text-wrap:pretty;overflow-wrap:break-word}
.serif-italic{font-style:italic;font-weight:400}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(80px,12vh,160px)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);line-height:1.55;max-width:60ch}
/* ---------- buttons ---------- */
.btn{
--bg:var(--ink); --fg:var(--bone);
display:inline-flex;align-items:center;gap:.6em;
background:var(--bg);color:var(--fg);
font-size:14px;font-weight:600;letter-spacing:.01em;
padding:15px 26px;border:1px solid var(--bg);border-radius:100px;
transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease);
will-change:transform;
}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,19,13,.22)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn.outline{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn.outline:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn.on-dark{--bg:var(--bone);--fg:var(--ink)}
.btn.on-dark.outline{--bg:transparent;--fg:var(--bone);border-color:var(--line-dark-2)}
.btn.on-dark.outline:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.link-arrow{
display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:14px;
border-bottom:1px solid currentColor;padding-bottom:3px;
transition:gap .4s var(--ease),opacity .3s;
}
.link-arrow:hover{gap:.85em}
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:120;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;
padding:18px var(--gut);
color:var(--bone);
transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
border-bottom:1px solid transparent;
}
.nav>.brand{justify-self:start}
.nav>.nav-links{justify-self:center}
.nav>.nav-actions{justify-self:end}
.nav.scrolled{
background:color-mix(in srgb, var(--bone) 80%, transparent);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
backdrop-filter:blur(18px) saturate(1.4);
color:var(--ink);
padding-block:12px;
border-bottom:1px solid var(--line);
box-shadow:0 12px 40px -28px rgba(23,19,13,.5);
}
.brand{display:flex;align-items:center}
/* One logo file, both nav states: the wordmark is a mask painted with currentColor,
so it flips bone -> ink together with the rest of the nav instead of needing a
second asset and a swap. aspect-ratio comes from each SVG's own viewBox.
The nav carries the name alone — at nav scale the "REAL ESTATE" line of the full
lockup collapses to a 4px smear — and the footer gets the full lockup. */
.brand-logo,.f-logo{display:block;background:currentColor}
.brand-logo{
height:26px;aspect-ratio:1363/222;
-webkit-mask:url("../brand/wordmark-solo.svg") left center/contain no-repeat;
mask:url("../brand/wordmark-solo.svg") left center/contain no-repeat;
transition:height .5s var(--ease);
}
.f-logo{
aspect-ratio:1363/320;
-webkit-mask:url("../brand/wordmark.svg") left center/contain no-repeat;
mask:url("../brand/wordmark.svg") left center/contain no-repeat;
}
.nav.scrolled .brand-logo{height:23px}
.nav-links{display:flex;align-items:center;gap:2px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:100px;padding:4px;transition:border-color .5s var(--ease)}
.nav-links a{font-size:13.5px;font-weight:500;letter-spacing:.015em;padding:9px 18px;border-radius:100px;position:relative;transition:background .3s var(--ease),color .3s var(--ease)}
.nav-links>a:hover,.nav-dd>a:hover{background:color-mix(in srgb,currentColor 13%,transparent)}
.nav-dd{position:relative}
.nav-dd>a{padding-right:14px}
.nav-dd>a::after{content:"";display:inline-block;position:relative;top:-1px;
width:7px;height:7px;margin-left:7px;vertical-align:middle;background:currentColor;opacity:.42;transform:none;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center/contain no-repeat;
transition:transform .35s var(--ease),opacity .3s var(--ease)}
.nav-dd:hover>a::after{transform:rotate(180deg);opacity:.8}
.nav-dd-menu{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
background:var(--surface);color:var(--ink);
border:1px solid var(--line);border-radius:18px;padding:8px;
min-width:260px;display:flex;flex-direction:column;gap:2px;
opacity:0;visibility:hidden;pointer-events:none;
box-shadow:0 30px 70px -30px rgba(23,19,13,.5);
transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* invisible bridge across the gap so hover doesn't drop between link and menu */
.nav-dd-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dd-menu a{padding:12px 16px;border-radius:12px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:background .25s var(--ease),padding-left .25s var(--ease),color .25s var(--ease)}
.nav-dd-menu a span{font-family:var(--display);font-style:italic;color:var(--muted-2);font-size:13px;transition:color .25s var(--ease)}
.nav-dd-menu a:hover{background:var(--bone-2);padding-left:20px}
.nav-dd-menu a:hover span{color:var(--gold-ink)}
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-actions .kontakt{position:relative;font-size:13.5px;font-weight:600;padding-left:18px}
.nav-actions .kontakt::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:color-mix(in srgb,currentColor 26%,transparent)}
.nav-cta{
font-size:13px;font-weight:600;padding:11px 20px;border-radius:100px;white-space:nowrap;
border:1px solid color-mix(in srgb,currentColor 30%,transparent);
transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
/* mid-desktop: declutter so the centered menu keeps room */
@media(max-width:1180px){
.nav{column-gap:16px}
.nav-links a{padding:9px 13px;font-size:13px}
.nav-actions{gap:13px}
.nav-actions .kontakt{display:none}
}
.nav.scrolled .nav-cta{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.nav.scrolled .nav-cta:hover{background:var(--gold-ink);border-color:var(--gold-ink)}
.nav:not(.scrolled) .nav-cta:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.nav-burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;color:var(--bone);border:1px solid rgba(238,241,233,.28);border-radius:50%;background:rgba(16,11,8,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* language switcher (adapts to nav color via currentColor) */
.lang-switch{display:flex;align-items:center;gap:1px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:100px;padding:3px}
/* .78, not .62: at .62 the inactive languages measured 3.35:1 over the hero photo
and 4.52:1 on the scrolled cream header — the active one is still marked by its
pill, so the muting does not have to be carried by opacity alone. */
.lang-switch a{padding:5px 9px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:inherit;opacity:.78;transition:background .3s var(--ease),opacity .3s var(--ease)}
.lang-switch a:hover{opacity:1}
.lang-switch a.active{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.mobile-menu .mm-lang{margin-top:26px;display:flex;gap:8px;border:0;padding:0}
.mobile-menu .mm-lang a{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);padding:10px 18px;border-radius:100px;opacity:.75;color:var(--ink)}
.mobile-menu .mm-lang a.active{opacity:1;background:var(--gold-bright);color:var(--ink);border-color:var(--gold-bright)}
.nav-burger span{width:17px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
/* Burger sits over the white drawer when open -> dark icon + morph to X. */
.nav-burger[aria-expanded="true"]{background:rgba(16,11,8,.92);border-color:rgba(238,241,233,.2)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu :focus-visible{outline-color:var(--ink)}
/* mobile overlay menu */
.mobile-menu{
position:fixed;top:0;right:0;bottom:0;left:auto;z-index:115;
width:min(86vw,380px);background:var(--bone);color:var(--ink);
display:flex;flex-direction:column;justify-content:center;gap:10px;
padding:108px var(--gut) 44px;overflow-y:auto;
transform:translateX(105%);box-shadow:-34px 0 90px -34px rgba(8,6,4,.55);
transition:transform .55s var(--ease-out), visibility .55s;
pointer-events:none;visibility:hidden;
}
.mobile-menu.open{transform:none;pointer-events:auto;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu nav a{font-family:var(--display);font-size:clamp(26px,6.4vw,38px);font-weight:500;letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateX(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-menu.open nav a{opacity:1;transform:none}
.mobile-menu.open nav a:nth-child(1){transition-delay:.12s}
.mobile-menu.open nav a:nth-child(2){transition-delay:.18s}
.mobile-menu.open nav a:nth-child(3){transition-delay:.24s}
.mobile-menu.open nav a:nth-child(4){transition-delay:.30s}
.mobile-menu.open nav a:nth-child(5){transition-delay:.36s}
.mobile-menu.open nav a:nth-child(6){transition-delay:.42s}
.mobile-menu .mm-sub{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px}
.mobile-menu .mm-sub a{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);padding:9px 16px;border-radius:100px;transition:background .25s var(--ease),color .25s var(--ease)}
.mobile-menu .mm-sub a:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
/* ============================================================
PLACEHOLDERS — warm architectural "photography", never gray
============================================================ */
.ph{
position:relative;overflow:hidden;background:#131E17;
isolation:isolate;
}
.ph::after{ /* grain + vignette */
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
background:
radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(8,6,4,.42) 100%),
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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
background-size:cover,180px 180px;
mix-blend-mode:multiply;opacity:.16;
}
.ph .ph-fill{ /* the parallaxing image layer */
position:absolute;inset:-14% 0;z-index:1;
background-size:cover;background-position:center;
filter:saturate(1.08) contrast(1.05);
will-change:transform;
}
.ph .ph-label{
position:absolute;left:0;bottom:0;z-index:4;padding:18px 20px;
font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:rgba(247,243,235,.78);
}
.ph .ph-fill::before{ /* soft directional light shaft */
content:"";position:absolute;inset:0;
background:radial-gradient(80% 60% at 72% 8%, rgba(255,228,176,.34), transparent 60%);
z-index:2;
}
/* texture variants (deep-green interiors / facades) */
.ph--hero .ph-fill{background-image:
radial-gradient(90% 70% at 70% 6%, rgba(160,205,180,.42), transparent 55%),
linear-gradient(168deg,#22342a 0%, #16241b 42%, #0b120d 100%),
repeating-linear-gradient(94deg, rgba(180,215,195,.045) 0 2px, transparent 2px 90px);}
.ph--villa .ph-fill{background-image:
radial-gradient(85% 65% at 78% 12%, rgba(150,200,172,.4), transparent 55%),
linear-gradient(160deg,#26382c,#182619 60%,#0d1610);}
.ph--apartment .ph-fill{background-image:
radial-gradient(100% 80% at 28% 14%, rgba(214,226,216,.4), transparent 52%),
linear-gradient(152deg,#3a4a3c,#1f3226 58%,#0f1a12);}
.ph--facade .ph-fill{background-image:
repeating-linear-gradient(90deg, rgba(180,215,190,.07) 0 7px, transparent 7px 26px),
repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 34px),
linear-gradient(178deg,#2e3f3a 0%, #294a34 64%, #10231a);}
.ph--historic .ph-fill{background-image:
radial-gradient(90% 70% at 60% 14%, rgba(160,205,175,.36), transparent 55%),
linear-gradient(165deg,#2e4432,#20321f 60%,#121c14);}
.ph--marble .ph-fill{background-image:
radial-gradient(60% 40% at 30% 30%, rgba(255,255,255,.16), transparent 60%),
conic-gradient(from 120deg at 60% 40%, #cdd6c6, #bfc9b3 25%, #d4dcc8 50%, #b8c2a6 75%, #cdd6c6),
linear-gradient(160deg,#c3ccb5,#aab399);}
.ph--marble::after{mix-blend-mode:soft-light;opacity:.35}
.ph--loft .ph-fill{background-image:
radial-gradient(90% 70% at 18% 10%, rgba(190,220,200,.32), transparent 50%),
linear-gradient(155deg,#34443a,#1e2a1e 62%,#0d160f);}
.ph--dusk .ph-fill{background-image:
linear-gradient(180deg,#243c34 0%, #26492f 56%, #0e2016 100%),
radial-gradient(60% 40% at 80% 78%, rgba(120,200,140,.3), transparent 60%);}
/* ============================================================
REVEAL / MOTION primitives
============================================================ */
[data-reveal]{
opacity:0;transform:translateY(30px) scale(.99);
transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
/* Never travel further than the page gutter. A flat 40px pushed gutter-inset blocks
20px past the viewport on a 390px screen (scrollWidth 410 vs clientWidth 390) until
the reveal finished — real overflow that only `overflow-x:clip` was swallowing. */
[data-reveal="left"]{transform:translateX(calc(-1 * min(40px, var(--gut))))}
[data-reveal="right"]{transform:translateX(min(40px, var(--gut)))}
.parallax{will-change:transform}
/* draw-on line icons — self-drawing micro-detail across the whole site */
.draw-ic{display:inline-flex;line-height:0;color:currentColor}
.draw-ic svg{display:block;overflow:visible}
.draw-ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) var(--dl,.12s)}
.draw-ic.drawn svg *{stroke-dashoffset:0}
/* contextual placements */
.svc-card .sc-ic{color:var(--gold-ink);margin-bottom:16px}
.svc-card .sc-ic svg{width:clamp(30px,3vw,38px);height:clamp(30px,3vw,38px)}
.why .ic svg{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px)}
.mvv .cell .m-ic{display:block;color:var(--gold-bright);margin-bottom:16px}
.mvv .cell .m-ic svg{width:30px;height:30px}
/* anywhere (not break-word) so the unbreakable e-mail also shrinks the flex item's
min-content size — otherwise it spills ~55px past its footer column. */
.f-cols .f-col a:has(.f-ic){display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.f-addr:has(.f-ic){display:flex;align-items:flex-start;gap:10px}
.f-col .f-ic{color:var(--gold-bright);flex:0 0 auto}
.f-col .f-ic svg{width:15px;height:15px}
.f-addr .f-ic svg{margin-top:2px}
/* ============================================================
FOOTER
============================================================ */
.footer{background:var(--ink);color:var(--bone);padding-block:clamp(70px,9vh,120px) 40px;border-top:1px solid var(--line-dark);box-shadow:0 -1px 0 rgba(8,6,4,.6)}
.footer .wrap{display:grid;gap:60px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:48px;align-items:start}
.footer .f-brand .f-logo{height:42px}
/* 16px, not 6px: the lockup already ends in a small-caps "REAL ESTATE" line, so at
6px this descriptor read as a third line of the logo instead of a caption. */
.footer .f-brand p{color:rgba(238,241,233,.55);font-size:13px;letter-spacing:.16em;margin-top:16px;text-transform:uppercase}
.footer .f-brand .f-line{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.12;color:var(--bone);margin-top:26px;max-width:18ch;letter-spacing:-.02em}
.f-contacts{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.f-contacts a{font-size:14px;color:rgba(238,241,233,.82);width:max-content;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.f-contacts a:hover{color:var(--gold-bright);border-color:rgba(116,169,141,.5)}
.f-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,233,.5);font-family:var(--body);font-weight:600;margin-bottom:18px}
.f-col a{display:block;padding:7px 0;font-size:14.5px;color:rgba(238,241,233,.82);transition:color .3s,padding-left .3s}
.f-col a:hover{color:var(--gold-bright);padding-left:6px}
/* premium footer: brand block + clean columns + ghost wordmark */
.f-main{display:grid;grid-template-columns:1.15fr 2fr;gap:clamp(40px,6vw,96px);align-items:start}
.f-brand .btn{margin-top:30px}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.f-cols h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);font-weight:600;margin-bottom:20px;font-family:var(--body)}
.f-cols .f-col a{display:block;padding:6px 0;font-size:14.5px;color:rgba(238,241,233,.78);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.f-cols .f-col a:hover{color:var(--gold-bright);padding-left:6px}
.f-addr{margin:0;padding:6px 0;font-size:14.5px;color:rgba(238,241,233,.78)}
@media(max-width:900px){
.f-main{grid-template-columns:1fr;gap:48px}
.f-cols{grid-template-columns:1fr 1fr;gap:34px 28px}
}
@media(max-width:460px){ .f-cols{grid-template-columns:1fr} }
.footer .f-cta .btn{margin-top:6px;color:var(--fg)}
.footer .f-cta .btn:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-top:26px;font-size:13px;color:rgba(238,241,233,.66);letter-spacing:.04em}
/* .52, not .46: .46 on --ink is 4.14:1, below the 4.5 needed for 12.5px text. */
.author-signature{margin:0;text-align:center;font-size:12.5px;letter-spacing:.04em;color:rgba(238,241,233,.52)}
.author-signature a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid rgba(116,169,141,.4);padding-bottom:1px;transition:border-color .3s var(--ease)}
.author-signature a:hover{border-color:var(--gold-bright)}
/* sticky mobile action bar (one-tap call + list a property) */
.m-actionbar{display:none}
@media(max-width:760px){
.m-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1.25fr;gap:9px;
padding:10px 14px calc(12px + env(safe-area-inset-bottom));
background:rgba(14,11,8,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
border-top:1px solid var(--line-dark-2)}
.mab-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:100px;font-size:14px;font-weight:600;line-height:1}
.mab-call{color:var(--bone);border:1px solid var(--line-dark-2)}
.mab-cta{background:var(--bone);color:var(--ink)}
.footer{padding-bottom:104px}
}
/* ============================================================
HOME — HERO
============================================================ */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;display:flex;align-items:flex-end;color:var(--bone)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media .ph{position:absolute;inset:0;height:100%}
.hero-media::after{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(180deg, rgba(10,7,4,.55) 0%, rgba(10,7,4,.1) 32%, rgba(10,7,4,.18) 62%, rgba(10,7,4,.82) 100%)}
/* fine cinematic film grain over the hero (overlay blend = tasteful, not muddy) */
.hero::after{
content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
background-size:160px 160px;
mix-blend-mode:overlay;opacity:.13;
}
.hero-inner{position:relative;z-index:6;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(46px,8vh,92px)}
.hero .eyebrow{
margin-bottom:28px;
color:var(--bone);font-weight:600;font-size:12px;letter-spacing:.26em;
text-shadow:0 1px 20px rgba(8,6,4,.62);
}
.hero h1{font-size:clamp(42px,7.6vw,100px);line-height:1.04;letter-spacing:-.018em;color:var(--bone);max-width:22ch;text-shadow:0 2px 40px rgba(8,6,4,.35)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(110%);transition:transform 1.1s var(--ease-out)}
.hero.ready h1 .ln i{transform:none}
.hero h1 .ln:nth-child(2) i{transition-delay:.09s}
.hero h1 .gold{font-style:italic;font-weight:400;color:var(--gold-ink)}
/* Brand-green accent word sits on a dark photo → give it a cream highlight so the exact --gold-ink reads (same dark-green-on-cream as the badges). fit-content keeps the block reveal animation intact while hugging the text. */
.hero h1 .ln i.gold{color:var(--gold-bright);text-shadow:0 2px 30px rgba(8,6,4,.6)}
.hero-sub{margin-top:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-sub p{max-width:46ch;color:rgba(244,240,231,.92);font-size:clamp(15px,1.5vw,18px);text-shadow:0 1px 18px rgba(8,6,4,.4)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.hero-badge{
position:absolute;top:clamp(96px,14vh,140px);right:var(--gut);z-index:6;
font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:rgba(238,241,233,.8);border:1px solid var(--line-dark-2);border-radius:100px;padding:10px 18px;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.scroll-cue{position:absolute;left:var(--gut);bottom:30px;z-index:6;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,233,.6)}
.scroll-cue .bar{width:1px;height:42px;background:linear-gradient(var(--gold-bright),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold-bright);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}
/* ---------- intro two-col ---------- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:end}
/* 16ch, not 13: "odpowiedzialność" / "відповідальність" are ~16 characters and at 13ch
they were forced onto a line of their own, past the measure. */
.intro h2{font-size:clamp(30px,4.2vw,56px);max-width:16ch}
.intro .intro-body p{color:var(--muted);font-size:clamp(16px,1.4vw,19px);margin-bottom:18px;max-width:46ch}
.intro .intro-body p:first-child{color:var(--ink)}
/* ---------- pinned word-fill statement ---------- */
.statement{position:relative;height:230vh;background:var(--espresso)}
.statement-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.statement-sticky .glow{position:absolute;width:80vw;height:80vw;max-width:900px;max-height:900px;border-radius:50%;
background:radial-gradient(circle, rgba(116,169,141,.16), transparent 65%);left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(20px)}
.statement-text{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--gut);
font-family:var(--display);font-weight:500;letter-spacing:-.012em;
font-size:clamp(30px,5.6vw,80px);line-height:1.16}
/* .38, not .16: at .16 the not-yet-lit half of the sentence sat at 1.52:1 and was
effectively invisible while the section entered the screen. .38 gives 3.26:1 —
readable as large text — and the fill to full bone still reads as the same effect. */
.statement-text .w{color:rgba(238,241,233,.38);transition:color .3s var(--ease)}
.statement-text .w.lit{color:var(--bone)}
/* Italic is permanent on gold words so the line wraps once at load and never
reflows mid-scroll (a font-style swap is a layout change — the source of the
"jump"/flicker on fast scroll, and the extra Cyrillic line on RU). Only color
animates on .lit. */
.statement-text .w.gold{font-style:italic}
.statement-text .w.gold.lit{color:var(--gold-bright)}
.statement-tag{position:absolute;left:var(--gut);bottom:9vh;color:rgba(238,241,233,.5);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
/* ---------- values (branded: parallax glow, draw-on badge icons, editorial) ---------- */
.values{position:relative;overflow:hidden;color:var(--bone);padding-block:clamp(88px,12vh,152px);
background:radial-gradient(128% 116% at 50% -8%, #17271d 0%, #0c130e 60%);border-block:1px solid var(--line-dark)}
.values-glow{position:absolute;width:82vw;height:82vw;max-width:940px;max-height:940px;border-radius:50%;
background:radial-gradient(circle, rgba(116,169,141,.20), transparent 60%);left:50%;top:34%;transform:translate(-50%,-50%);filter:blur(30px);pointer-events:none;will-change:transform}
.values .wrap{position:relative}
.values-head{text-align:center;max-width:640px;margin:0 auto clamp(52px,6.4vw,88px)}
.values-head .eyebrow{color:var(--gold-bright);margin-bottom:18px}
.values-head h2{font-size:clamp(32px,5vw,62px);color:var(--bone);letter-spacing:-.02em;line-height:1.04}
.values-head h2 .gold{font-style:italic;font-weight:400;color:var(--gold-bright)}
.values-lead{margin-top:20px;color:rgba(238,241,233,.6);font-size:clamp(15px,1.5vw,17px);line-height:1.55}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(46px,4.6vw,66px) clamp(30px,3.6vw,60px);max-width:1000px;margin:0 auto}
.val-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.val-ic{width:clamp(58px,5.4vw,72px);height:clamp(58px,5.4vw,72px);border-radius:50%;border:1px solid rgba(116,169,141,.34);
display:grid;place-items:center;color:var(--gold-bright);margin-bottom:24px;flex:0 0 auto;
transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),transform .6s var(--ease-out)}
.val-ic svg{width:46%;height:46%;display:block;overflow:visible}
.val-ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s var(--ease-out) .3s}
.val-item.in .val-ic svg *{stroke-dashoffset:0}
.val-item:hover .val-ic{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink);transform:translateY(-5px)}
.val-t{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.9vw,24px);color:var(--bone);letter-spacing:-.01em;margin-bottom:10px}
.val-d{color:rgba(238,241,233,.56);font-size:14.5px;line-height:1.56;max-width:31ch}
@media(max-width:820px){.val-grid{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,52px) clamp(24px,4vw,42px)}}
@media(max-width:520px){.val-grid{grid-template-columns:1fr;max-width:430px}.val-item{align-items:center;text-align:center}.val-d{max-width:36ch}}
/* ---------- stats ---------- */
.stats{background:var(--espresso);color:var(--bone);padding-block:clamp(60px,8vh,110px)}
.stats .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark)}
.stat{background:var(--espresso);padding:36px clamp(20px,2.4vw,40px) 40px}
.stat .s-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,241,233,.5);margin-bottom:20px}
.stat .s-num{font-family:var(--display);font-weight:600;font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:-.018em;display:flex;align-items:baseline;gap:.12em;font-feature-settings:"tnum" 1}
.stat .s-num .unit{font-size:.32em;font-family:var(--body);font-weight:600;letter-spacing:.02em;color:rgba(238,241,233,.7)}
.stat .s-sub{margin-top:14px;font-size:13px;color:var(--gold-bright);font-weight:600;letter-spacing:.04em}
/* Flagship metric: lead with one number, the other three support it. */
.stat:first-child{display:flex;flex-direction:column;justify-content:flex-end;padding-right:clamp(28px,3vw,56px)}
.stat:first-child .s-label{color:var(--gold-bright)}
.stat:first-child .s-num{font-size:clamp(76px,9vw,124px)}
.stat:first-child .s-sub{font-size:14px}
/* ---------- horizontal pinned gallery ---------- */
/* Featured properties: plain responsive grid (no scroll-hijack / horizontal scroll). */
.hpin{position:relative;background:var(--bone);padding-block:clamp(64px,9vh,120px)}
.hpin-sticky{position:static;display:block}
.hpin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--gut) 36px}
.hpin-head h2{font-size:clamp(30px,4.2vw,58px)}
.hpin-progress{display:none}
.hpin-progress i{position:absolute;inset:0;width:0;background:var(--gold-ink);border-radius:2px}
.hpin-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,30px);
max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hpin-track .estate-card{width:auto}
.estate-card{position:relative;flex:0 0 auto;width:min(78vw,460px);background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(23,19,13,.05), 0 26px 52px -38px rgba(23,19,13,.34);transition:box-shadow .55s var(--ease),transform .55s var(--ease),border-color .55s var(--ease)}
.estate-card:hover{transform:translateY(-6px);box-shadow:0 44px 90px -50px rgba(23,19,13,.6);border-color:rgba(116,169,141,.5)}
.estate-card .ph{position:relative;height:clamp(280px,42vh,420px);overflow:hidden}
.estate-card .ph::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(10,7,4,.42),rgba(10,7,4,0) 46%);opacity:.85;transition:opacity .5s var(--ease)}
/* Cards own their image transform (excluded from JS parallax) so it can zoom on hover. */
.estate-card .ph-fill{transform:none !important;transition:transform .7s var(--ease),filter .6s var(--ease);filter:saturate(1.02)}
.estate-card:hover .ph-fill{transform:scale(1.08) !important;filter:saturate(1.08) contrast(1.03)}
.estate-card:hover .ph::after{opacity:1}
/* Circular reveal button on the image (premium micro-interaction). */
.estate-card .ph::before{content:"→";position:absolute;z-index:4;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--bone);color:var(--ink);box-shadow:0 12px 28px rgba(8,6,4,.34);opacity:0;transform:translateY(10px) scale(.85);transition:opacity .4s var(--ease),transform .45s var(--ease);pointer-events:none}
.estate-card:hover .ph::before{opacity:1;transform:none}
.estate-card .ec-body{padding:24px 26px 28px}
.estate-card .ec-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:2px}
.estate-card h3{font-size:clamp(22px,2.2vw,28px);line-height:1.06}
.estate-card .ec-price{font-family:var(--display);font-size:clamp(21px,2vw,27px);white-space:nowrap;color:var(--gold-ink)}
.estate-card .ec-price .ec-per{font-size:.56em;font-family:var(--body);font-weight:600;color:var(--muted-2);letter-spacing:.01em;margin-left:1px}
.estate-card .ec-tag{position:absolute;top:16px;left:16px;z-index:6;background:var(--ink);color:var(--bone);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 15px;border-radius:100px;box-shadow:0 10px 24px rgba(8,6,4,.34)}
.estate-card .ec-tag.ec-done{background:var(--gold-ink);color:var(--bone)}
.estate-card dl{display:grid;grid-template-columns:1fr auto;margin-top:20px;border-top:1px solid var(--line)}
.estate-card dt{padding:11px 0;color:var(--muted);border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.estate-card .ec-spec-icon{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--gold-ink);opacity:.88}
.estate-card .ec-spec-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.estate-card .ec-spec-label{min-width:0}
.estate-card dd{padding:11px 0;font-weight:600;border-bottom:1px solid var(--line);font-family:var(--display);font-size:16px;display:flex;align-items:center;justify-content:flex-end}
.estate-card dt:last-of-type,.estate-card dd:last-of-type{border-bottom:0}
.estate-card .ec-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--gold-ink);letter-spacing:.1em;transition:gap .4s var(--ease)}
.estate-card:hover .ec-go{gap:14px}
.hpin-cap{max-width:var(--wrap);margin:0 auto;width:100%;padding:30px var(--gut) 0;font-size:13.5px;color:var(--muted);letter-spacing:.04em}
/* ---------- services stacking cards ---------- */
.svc{background:var(--bone)}
.svc-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.svc-head h2{font-size:clamp(30px,4.4vw,60px);max-width:14ch;margin-top:18px}
.svc-stack{max-width:1080px;margin:40px auto 0;padding:0 var(--gut);position:relative}
.svc-card{position:sticky;top:calc(14vh + var(--i,0) * 16px);background:var(--surface);border:1px solid var(--line);border-radius:24px;
padding:clamp(28px,4vw,56px);margin-bottom:30px;
display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,52px);align-items:center;
box-shadow:0 30px 70px -56px rgba(23,19,13,.6);overflow:hidden;
}
.svc-card::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);opacity:.18;pointer-events:none}
/* The step number is text, not ornament: --paper-edge on --surface was 1.25:1.
--muted-3 is the lightest tone that still clears 3:1 for large text (3.46:1 here).
tabular-nums + a fixed column keep 01/02/03 the same width, so the headings next
to them all start on the same left edge instead of 437/442/448px. */
.svc-card .sc-num{font-family:var(--display);font-size:clamp(40px,5vw,70px);color:var(--muted-3);font-weight:500;line-height:1;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;min-width:1.9em;display:block}
.svc-card .sc-main h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.svc-card .sc-main p{color:var(--muted);max-width:48ch;font-size:16px}
.svc-card .sc-go{width:58px;height:58px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);flex:0 0 auto}
.svc-card:hover .sc-go{background:var(--ink);color:var(--bone);transform:rotate(-45deg)}
/* ---------- process ---------- */
.process{background:var(--ink);color:var(--bone)}
.process .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start}
.process-sticky{position:sticky;top:16vh}
.process-sticky .eyebrow{color:rgba(238,241,233,.55)}
.process-sticky h2{font-size:clamp(30px,4vw,54px);color:var(--bone);margin-top:18px;max-width:11ch}
.steps{display:grid;gap:0}
.step{padding:38px 0;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
.step:last-child{border-bottom:1px solid var(--line-dark)}
.step .st-no{font-family:var(--display);font-size:14px;color:var(--gold-bright);font-weight:500;letter-spacing:.06em;padding-top:6px}
.step h3{font-size:clamp(21px,2.2vw,28px);color:var(--bone);margin-bottom:12px}
.step p{color:rgba(238,241,233,.62);max-width:46ch}
/* ---------- testimonials ---------- */
.tmoni{background:var(--bone)}
.tmoni-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);text-align:center}
.tmoni-head h2{font-size:clamp(30px,4.4vw,60px);max-width:16ch;margin:18px auto 0}
.tmoni-grid{max-width:var(--wrap);margin:54px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 32px;display:flex;flex-direction:column}
.tcard .stars{color:var(--gold);letter-spacing:.18em;font-size:14px;margin-bottom:22px}
.tcard blockquote{font-family:var(--display);font-size:clamp(18px,1.7vw,21px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);flex:1}
.tcard .t-author{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.tcard .t-av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bone);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.04em;flex:0 0 auto}
.tcard .t-meta strong{display:block;font-family:var(--body);font-size:14.5px;font-weight:600}
.tcard .t-meta span{font-size:13px;color:var(--muted)}
/* ---------- blog teaser ---------- */
.blog{background:var(--bone)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.bcard:hover{transform:translateY(-6px);box-shadow:0 40px 80px -56px rgba(23,19,13,.5)}
.bcard .ph{height:200px}
.bcard .b-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.bcard .cat{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid color-mix(in srgb,var(--gold-ink) 45%,var(--line));padding:6px 12px;border-radius:100px;margin-bottom:18px}
.bcard h3{font-size:clamp(19px,1.9vw,23px);line-height:1.18;margin-bottom:12px}
.bcard p{color:var(--muted);font-size:15px;flex:1}
.bcard .read{margin-top:20px;font-size:13.5px;font-weight:600;color:var(--ink);display:inline-flex;gap:7px;align-items:center;transition:gap .4s var(--ease)}
.bcard:hover .read{gap:13px;color:var(--gold-ink)}
/* ---------- contact CTA ---------- */
.cta{background:var(--espresso);color:var(--bone);position:relative;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start;position:relative;z-index:2}
.cta-glow{position:absolute;z-index:1;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,rgba(116,169,141,.14),transparent 65%);right:-12vw;top:-16vw;pointer-events:none}
.cta h2{font-size:clamp(32px,4.6vw,62px);color:var(--bone);max-width:14ch}
.cta .lead{color:rgba(238,241,233,.66);margin-top:24px}
/* Spam honeypot: off-screen but still focusable-by-bots; hidden from humans + AT. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.cta-form{display:grid;gap:14px}
.cta-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:0}
.field select,.field input,.field textarea{
width:100%;background-color:transparent;border:1px solid var(--line-dark-2);border-radius:14px;
color:var(--bone);font-family:inherit;font-size:15px;padding:15px 18px;
transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
/* Floating labels: input keeps placeholder=" " so the field looks empty while the
label rests like a placeholder, then floats up on focus/fill so context stays. */
.field{position:relative}
.field input,.field textarea,.field select{padding-top:21px;padding-bottom:9px}
.field > label{
/* .52, not .45: while the field is empty this label is the only name the field has,
so it is content, not decoration. .45 gave 4.11:1 on --espresso, .52 gives 4.99:1. */
position:absolute;left:19px;top:17px;font-size:15px;color:rgba(238,241,233,.52);
pointer-events:none;transform-origin:left top;
transition:transform .22s var(--ease),color .22s var(--ease);
}
.field input:focus ~ label,.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label{
transform:translateY(-10px) scale(.72);color:var(--gold-bright);
}
/* Custom-styled select: drop native chrome, add a gold/bone chevron. */
.field select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
padding-right:46px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2374A98D'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 18px center;background-size:15px;
}
.field select:invalid,.field select option[value=""]{color:rgba(238,241,233,.42)}
.field select option{color:#14201A;background:#EEF1E9}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(238,241,233,.42)}
/* Focus, both halves in one place. The ring comes off for pointer focus only — there
the coloured border is the affordance — and the keyboard ring is restored on the very
next line. Written as `:focus:not(:focus-visible)`, an `outline:none` can no longer
leave a control without a visible focus even if someone forgets the second rule. */
.cta-form input:focus,.cta-form textarea:focus,.cta-form select:focus{border-color:var(--gold-bright);background-color:rgba(116,169,141,.05)}
.cta-form input:focus:not(:focus-visible),.cta-form textarea:focus:not(:focus-visible),.cta-form select:focus:not(:focus-visible){outline:none}
.cta-form input:focus-visible,.cta-form textarea:focus-visible,.cta-form select:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.cta-form .check{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(238,241,233,.6)}
.cta-form .check input{accent-color:var(--gold-bright)}
.cta-form .form-note{font-size:13px;color:var(--gold-bright);min-height:18px;font-weight:600}
/* Validation states (warm terracotta error, tinted to the palette). */
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#d2714f}
.field-error{display:block;margin-top:7px;font-size:12px;font-weight:600;letter-spacing:.01em;color:#e69373}
/* Пустой блок ошибки остаётся в DOM после успешной проверки — без этого его
margin-top держал 7px пустоты под каждым валидным полем. */
.field-error:empty{display:none}
.cta-form .check.invalid{color:#e69373}
.cta-form .check + .field-error{margin-top:4px}
.pside .askbox .field.invalid input,.pside .askbox .field.invalid textarea{border-color:#b8492c}
.pside .askbox .field-error{color:#b8492c}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:1080px){
.footer-top{grid-template-columns:1fr 1fr}
.footer .f-brand,.footer .f-cta{grid-column:span 2}
.process .wrap{grid-template-columns:1fr}
.process-sticky{position:static}
}
@media(max-width:900px){
.nav-links,.nav-actions .kontakt,.nav-cta,.nav-actions .lang-switch{display:none}
.nav{grid-template-columns:1fr auto} /* brand | burger -> burger pinned right */
.brand-logo{height:23px}
.nav.scrolled .brand-logo{height:21px}
.footer .f-brand .f-logo{height:36px}
.nav-burger{display:flex}
.intro{grid-template-columns:1fr;gap:20px}
.stats .wrap{grid-template-columns:1fr 1fr}
.tmoni-grid,.blog-grid{grid-template-columns:1fr}
.cta .wrap{grid-template-columns:1fr}
.svc-card{grid-template-columns:auto 1fr;gap:18px}
.svc-card .sc-go{display:none}
/* featured gallery -> two-column grid on tablet */
.hpin-track{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.brand-logo{height:21px}
.nav.scrolled .brand-logo{height:19px}
.hpin-track{grid-template-columns:1fr}
.stats .wrap{grid-template-columns:1fr 1fr}
.stat{padding:26px clamp(16px,4vw,24px) 28px}
.stat .s-num{font-size:clamp(34px,8.5vw,46px)}
.stat:first-child{justify-content:flex-start;padding-right:clamp(16px,4vw,24px)}
.stat:first-child .s-num{font-size:clamp(38px,9.5vw,52px)}
.cta-form .row{grid-template-columns:1fr}
.hero-sub{flex-direction:column;align-items:flex-start;gap:22px}
.hero-inner{padding-bottom:clamp(64px,14vh,110px)}
.hero-actions{width:100%;flex-direction:column;align-items:stretch;gap:12px}
.hero-actions .btn{justify-content:center;padding-block:16px}
/* Narrow screens crop the hero photo differently: the subhead lands on sunlit
glass and grass instead of the dark facade it sits on at desktop widths, and
dropped to 4.29:1 (worst pixel 2.66). Same scrim, denser through the middle
band where the copy actually stands. Desktop keeps the original gradient. */
.hero-media::after{background:linear-gradient(180deg,
rgba(10,7,4,.58) 0%, rgba(10,7,4,.26) 30%, rgba(10,7,4,.50) 62%, rgba(10,7,4,.86) 100%)}
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
[data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
.hero h1 .ln i{transform:none !important}
.parallax,.ph-fill{transform:none !important}
.statement{height:auto}
.statement-sticky{position:static;height:auto;padding-block:120px}
.statement-text .w{color:var(--bone)}
.statement-text .w.gold{color:var(--gold-bright)}
.scroll-cue .bar::after{animation:none}
}
/* ============================================================
PARALLAX BAND — full-bleed architectural interlude (added)
============================================================ */
.band{
position:relative;min-height:clamp(440px,72vh,720px);
display:flex;align-items:center;justify-content:center;
overflow:hidden;background:var(--espresso);color:var(--bone);isolation:isolate;
}
.band .band-media{position:absolute;inset:0;z-index:0;height:100%}
.band .band-media .ph-fill{inset:-16% 0}
/* The quote sits in the middle of the band, exactly where the scrim used to thin out
to .30 — over the lit Warsaw skyline that left the green italic at 2.37:1 and the
signature at 3.17:1. .52 through the middle puts both over the line. */
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(10,7,4,.62), rgba(10,7,4,.52) 45%, rgba(10,7,4,.70))}
.band-inner{position:relative;z-index:2;max-width:1000px;text-align:center;padding:clamp(64px,12vh,128px) var(--gut)}
.band-inner .eyebrow{color:var(--gold-bright);justify-content:center;margin-bottom:24px}
.band-quote{font-family:var(--display);font-weight:500;letter-spacing:-.012em;
font-size:clamp(26px,4.4vw,58px);line-height:1.2;color:var(--bone)}
.band-quote i{font-style:italic;color:var(--gold-bright)}
/* .80, not .55: 12px uppercase needs 4.5:1 and the scrim alone does not get it there. */
.band-sign{margin-top:30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,233,.80)}
/* ============================================================
NEIGHBOURHOODS — Warsaw districts, photo tiles (added)
============================================================ */
.hoods{background:var(--bone)}
.hoods-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hoods-head h2{font-size:clamp(30px,4.2vw,58px);max-width:16ch;margin-top:16px}
.hoods-head p{color:var(--muted);max-width:52ch;margin-top:18px;font-size:clamp(16px,1.4vw,19px)}
.hoods-grid{max-width:var(--wrap);margin:48px auto 0;padding:0 var(--gut);
display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px}
.hood{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
border:1px solid var(--line);isolation:isolate;
transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.hood:hover{transform:translateY(-6px);box-shadow:0 40px 80px -54px rgba(23,19,13,.6)}
.hood .ph{position:absolute;inset:0;height:100%}
.hood .ph-fill{inset:-12% 0}
.hood::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
background:linear-gradient(180deg, rgba(12,8,4,.04) 0%, rgba(12,8,4,.12) 45%, rgba(12,8,4,.72) 100%)}
.hood-body{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:22px 22px 24px;color:var(--bone)}
.hood-body h3{font-size:clamp(22px,2.2vw,28px);color:var(--bone)}
.hood-body span{display:block;margin-top:6px;font-size:13px;letter-spacing:.04em;color:rgba(238,241,233,.8)}
.hood-body .h-count{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)}
@media(max-width:560px){
.hoods-grid{grid-template-columns:1fr 1fr;gap:12px}
/* Two-up cards leave ~104px of text; "Śródmieście" needs more than that at 22px
and was breaking mid-word. Tighter padding + smaller name buys the room. */
.hood-body{padding:16px 14px 18px}
.hood-body h3{font-size:clamp(17px,4.9vw,22px)}
.band-inner{padding-block:clamp(56px,16vh,96px)}
}
/* ============================================================
INNER PAGES — shared components (added)
============================================================ */
/* ---- dark editorial page hero ---- */
.page-hero{position:relative;background:var(--espresso);color:var(--bone);overflow:hidden;
padding:clamp(132px,21vh,210px) 0 clamp(58px,9vh,108px);isolation:isolate}
.page-hero-media{position:absolute;inset:0;z-index:0;height:100%}
.page-hero-media .ph-fill{inset:-16% 0;filter:saturate(1.05) contrast(1.03)}
/* Until the page is scrolled the header is transparent and its cream items lie on
this photo — 3.34:1 for "Kontakt", 3.35:1 for the language links, on 12 pages.
A short scrim under the header band lifts every one of them past 4.5:1 and fades
out before the breadcrumbs, so the picture itself is untouched.
It lives on .page-hero, not inside .page-hero-media, because .ph-glow is a sibling
painted above the media layer and its green wash is exactly what was brightening the
top-right corner under the CTA. z-index 2 with .wrap: the ::before paints first, so
the heading and breadcrumbs still sit on top of it. */
.page-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:230px;z-index:2;pointer-events:none;
background:linear-gradient(180deg, rgba(8,12,9,.62) 0%, rgba(8,12,9,.50) 112px, rgba(8,12,9,0) 100%)}
.page-hero .ph-glow{position:absolute;z-index:1;width:70vw;height:70vw;max-width:820px;max-height:820px;border-radius:50%;
background:radial-gradient(circle,rgba(116,169,141,.2),transparent 65%);right:-14vw;top:-18vw;filter:blur(20px);pointer-events:none;will-change:transform}
[data-parallax]{will-change:transform}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumbs{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,231,.85);margin-bottom:38px;text-shadow:0 1px 12px rgba(8,6,4,.5)}
.page-hero .crumbs a{color:rgba(244,240,231,.7);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.page-hero .crumbs a:hover{color:var(--bone);border-color:rgba(244,240,231,.5)}
.page-hero .crumbs .sep{color:var(--gold-bright);margin:0 8px}
.page-hero .eyebrow{color:var(--gold-bright);margin-bottom:20px}
.page-hero h1{font-size:clamp(36px,5.6vw,80px);color:var(--bone);max-width:18ch;line-height:1.04;letter-spacing:-.012em}
/* 36px on a 390px screen pushed the longer RU/UK service headlines to 7 lines, past the
point where text-wrap:balance still runs — and the rag fell apart. */
@media(max-width:520px){ .page-hero h1{font-size:clamp(29px,8vw,36px)} }
.page-hero .lead{color:rgba(238,241,233,.72);margin-top:26px;max-width:58ch}
.page-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* ---- two-column lede intro ---- */
.lede-cols{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,6vw,90px);align-items:start}
.lede-cols h2{font-size:clamp(28px,3.8vw,50px);max-width:14ch}
.lede-cols .body p{color:var(--muted);font-size:clamp(16px,1.4vw,19px);margin-bottom:18px;max-width:54ch}
.lede-cols .body p:first-child{color:var(--ink)}
/* ---- values / story grid ---- */
.valgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:46px}
.valgrid article{background:var(--surface);padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,32px)}
.valgrid h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.valgrid p{color:var(--muted);font-size:15px;max-width:34ch}
/* ---- mission / vision / values (dark 3-up) ---- */
.mvv{background:var(--ink);color:var(--bone)}
.mvv .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark)}
.mvv .cell{background:var(--ink);padding:clamp(36px,4vw,56px) clamp(24px,3vw,44px)}
.mvv .cell span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:18px}
.mvv .cell p{font-family:var(--display);font-size:clamp(20px,2vw,27px);line-height:1.3;color:var(--bone)}
/* ---- team ---- */
/* group team banner (parallax) */
.team-banner{position:relative;margin:46px 0 6px;border-radius:24px;overflow:hidden;border:1px solid var(--line);
height:clamp(360px,54vh,640px);isolation:isolate;background:#131E17}
.team-banner .ph-fill{inset:-12% 0;background-position:center 30%;filter:saturate(1.04) contrast(1.02)}
/* The caption lands on white suits and a pale wall — 1.11:1. From 64% down the scrim
is dense enough that cream text clears 4.5:1 even over a pure-white pixel, which is
the only bound that holds for any photo dropped in here.
::before, not ::after: .team-banner is also a .ph, and .ph::after is the grain layer
at opacity:.16 with mix-blend-mode:multiply. An element has one ::after, so the
caption scrim written there inherited that .16 and never actually darkened anything
— which is why the old .34/.80 gradient measured as if it were not there at all. */
.team-banner::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
background:linear-gradient(180deg, rgba(12,8,4,.12) 0%, rgba(12,8,4,0) 38%, rgba(12,8,4,.42) 64%, rgba(12,8,4,.78) 82%, rgba(12,8,4,.94) 100%)}
.team-banner .tb-cap{position:absolute;left:0;bottom:0;z-index:5;padding:26px clamp(22px,3vw,38px)}
.team-banner .tb-cap span{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,235,.92);
text-shadow:0 1px 14px rgba(8,6,4,.6)}
/* member cards with real portraits (parallax) */
/* 320px floor keeps the full team on a 3-up grid instead of stranding one card in a 4-up row */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:24px}
.tmember{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;padding:0;
transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.tmember:hover{transform:translateY(-6px);box-shadow:0 40px 80px -54px rgba(23,19,13,.5)}
.tmember .tm-photo{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate}
.tmember .tm-photo .ph-fill{inset:0;background-size:cover;background-position:center top;transform:none !important;filter:saturate(1.04) contrast(1.02)}
.tmember .info{padding:24px clamp(24px,2.4vw,30px) 30px}
.tmember h3{font-size:clamp(21px,2vw,25px)}
.tmember .role{display:block;color:var(--gold-ink);font-weight:600;font-size:13px;letter-spacing:.04em;margin:6px 0 16px}
.tmember p{color:var(--muted);font-size:15px}
/* A near-square banner would crop the outer people out of the group shot — keep it wide on phones. */
/* Parallax off too: in a short box its travel would slice the heads off the group shot. */
@media(max-width:640px){ .team-banner{height:clamp(210px,30vh,280px);margin-top:34px} .team-banner .tb-cap{padding:18px 20px}
.team-banner .ph-fill{inset:0;transform:none !important;background-position:center 40%} }
/* ---- property listing grid (reuse estate-card visuals) ---- */
.prop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.prop-grid .estate-card{display:block;flex:none;width:auto;max-width:440px}
.prop-item.is-hidden{display:none}
.prop-empty{grid-column:1/-1;text-align:center;padding:48px 0;color:var(--muted);font-size:16px}
.prop-grid .estate-card .ph{height:clamp(220px,26vw,280px)}
/* ---- filters bar ---- */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,40px);margin-bottom:46px}
.filters .f-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 30px}
.filter-tabs button{border:1px solid var(--line);background:transparent;padding:11px 22px;border-radius:100px;font:inherit;
font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.filter-tabs button:hover{border-color:var(--ink)}
.filter-tabs button.active{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.filter-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.filter-row label,.filter-row .ff{display:flex;flex-direction:column;gap:9px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.filter-row .ff .ff-l{font:inherit;color:inherit}
.filter-row input,.filter-row select{width:100%;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);
transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.filter-row select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:44px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23213324'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
.filter-row input:hover,.filter-row select:hover{border-color:color-mix(in srgb,var(--gold-ink) 45%,var(--line))}
.filter-row select option{color:#14201A;background:#EEF1E9}
/* background-color, not the `background` shorthand: the shorthand resets repeat/position/size
and the chevron below would then tile across the whole field. */
.filter-row input:focus,.filter-row select:focus{border-color:var(--gold-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-ink) 18%,transparent);background-color:var(--surface)}
.filter-row input:focus:not(:focus-visible),.filter-row select:focus:not(:focus-visible){outline:none}
.filter-row input:focus-visible,.filter-row select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.filter-row select:focus{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23213324'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m18%2015-6-6-6%206'/%3E%3C/svg%3E")}
.filter-rooms{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.filter-rooms button{flex:1;border:0;background:var(--bone);padding:12px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;border-right:1px solid var(--line);transition:background .25s var(--ease),color .25s var(--ease)}
.filter-rooms button:last-child{border-right:0}
.filter-rooms button:hover{background:var(--bone-2)}
.filter-rooms button.active{background:var(--ink);color:var(--bone)}
.filter-rooms button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.filter-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* ---- range filter: distribution + two handles + the two number fields ----
Two native lie on one rail. The track of each is invisible
and unclickable (pointer-events:none); only the thumbs take the pointer, which
is what lets the lower one stay reachable underneath the upper one. Everything
the eye sees — rail, selected span, histogram — is drawn by the elements above
them, positioned from --lo/--hi that JS keeps in step with the two values.
The thumb is a 44px box with a 9px transparent border and background-clip:
padding-box, so the circle reads as 26px while the finger gets the full 44. */
.filter-row .ff.rf{gap:6px}
.rf-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:17px}
.rf-out{font:inherit;font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--gold-ink);
white-space:nowrap;font-variant-numeric:tabular-nums}
.rf-hist{display:flex;align-items:flex-end;gap:2px;height:30px;margin:6px 22px 0}
.rf-hist i{flex:1 1 0;min-width:0;height:3px;border-radius:2px 2px 0 0;
background:color-mix(in srgb,var(--gold-ink) 22%,transparent);transition:background-color .2s var(--ease)}
.rf-hist i.on{background:color-mix(in srgb,var(--gold-ink) 68%,transparent)}
.rf-slider{position:relative;height:44px;--lo:0;--hi:1}
.rf-rail,.rf-sel{position:absolute;top:50%;height:4px;border-radius:4px;transform:translateY(-50%);pointer-events:none}
/* Inset by half a thumb at each end: a thumb centre never reaches the very edge
of the strip, so a full-width rail would leave a stub sticking out past the
handle parked at the end. */
.rf-rail{left:22px;right:22px;background:var(--line)}
.rf-sel{background:var(--gold-ink);
left:calc(var(--lo) * (100% - 44px) + 22px);
right:calc((1 - var(--hi)) * (100% - 44px) + 22px)}
/* `.filter-row input` above owns the boxed look of every field in this bar, and
it outranks a bare `.rf-h`; the handles have to opt out of it by name, in all
three states, or the rail disappears behind an opaque rounded box. */
.filter-row .rf-h,.filter-row .rf-h:hover,.filter-row .rf-h:focus{position:absolute;left:0;top:0;width:100%;height:44px;
margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;
pointer-events:none;-webkit-appearance:none;appearance:none;z-index:3}
.filter-row .rf-h:focus-visible{outline:none}
.rf-h::-webkit-slider-runnable-track{height:44px;background:transparent;border:0}
.rf-h::-moz-range-track{height:44px;background:transparent;border:0}
.rf-h::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:44px;height:44px;
border:9px solid transparent;border-radius:50%;background-clip:padding-box;cursor:grab;
background-image:radial-gradient(circle at 50% 50%,var(--surface) 0 42%,var(--gold-ink) 43% 100%)}
.rf-h::-moz-range-thumb{pointer-events:auto;width:44px;height:44px;box-sizing:border-box;
border:9px solid transparent;border-radius:50%;background-clip:padding-box;cursor:grab;
background-image:radial-gradient(circle at 50% 50%,var(--surface) 0 42%,var(--gold-ink) 43% 100%)}
.rf-h:active::-webkit-slider-thumb{cursor:grabbing}
.rf-h:active::-moz-range-thumb{cursor:grabbing}
/* A focus ring cannot be drawn around the thumb: box-shadow and outline both
land on the 44px hit box and would float a halo well clear of the 26px circle.
The knob itself changes instead — wider and filled solid, which is a change of
both size and colour over most of the shape, not a tint. */
.rf-h:focus-visible::-webkit-slider-thumb{border-width:7px;
background-image:radial-gradient(circle at 50% 50%,var(--surface) 0 18%,var(--gold-ink) 19% 100%)}
.rf-h:focus-visible::-moz-range-thumb{border-width:7px;
background-image:radial-gradient(circle at 50% 50%,var(--surface) 0 18%,var(--gold-ink) 19% 100%)}
.filter-row .ff.rf .filter-range{margin-top:2px}
@media(max-width:860px){.filter-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.filter-row{grid-template-columns:1fr}}
.filters-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:14px;color:var(--muted)}
.filters-foot b{color:var(--gold-ink);font-family:var(--display)}
.text-btn{border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:color .25s var(--ease)}
.text-btn:hover{color:var(--gold-ink)}
.text-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* ---- off-market teaser + not-found ---- */
.offmarket{background:var(--ink);color:var(--bone);border-radius:24px;padding:clamp(36px,5vw,68px);
display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,60px);align-items:center;overflow:hidden;position:relative}
.offmarket::before{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,var(--gold-glow),transparent 70%);opacity:.2;pointer-events:none}
.offmarket h2{font-size:clamp(26px,3.2vw,42px);color:var(--bone);position:relative;max-width:18ch}
.offmarket p{color:rgba(238,241,233,.66);margin-top:18px;position:relative;max-width:52ch}
.offmarket .actions{display:flex;flex-direction:column;gap:12px;position:relative}
/* ---- service "why" cards ---- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.why article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,3vw,38px)}
.why .ic{display:block;font-family:var(--display);font-size:clamp(32px,3vw,46px);font-weight:500;color:var(--gold-ink);line-height:1;letter-spacing:-.01em;margin-bottom:16px}
.why h3{font-size:clamp(19px,1.9vw,23px);margin-bottom:12px}
.why p{color:var(--muted);font-size:15.5px}
/* ---- numbered process (light) ---- */
.psteps-head{margin-bottom:36px}
.psteps-head .eyebrow{color:var(--muted);margin-bottom:14px}
.psteps-head h2{font-size:clamp(28px,3.6vw,48px)}
.psteps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:clamp(24px,2.6vw,44px) clamp(24px,2.6vw,40px)}
.pstep{padding:26px 0 0;border-top:1px solid var(--line)}
/* Same as .sc-num: --paper-edge on --bone was 1.19:1. --muted-3 gives 3.28:1. */
.pstep .num{font-family:var(--display);font-size:clamp(30px,3vw,42px);color:var(--muted-3);font-weight:600;display:block;line-height:1;margin-bottom:18px;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Trimmed so the longest step label ("Инвестиционная цель") still holds one line
in the five-column grid instead of dropping a single word to a second row. */
.pstep h4{font-size:clamp(16px,1.35vw,18px);margin-bottom:10px}
.pstep p{color:var(--muted);font-size:14.5px;max-width:34ch}
/* dark process variant (homepage-grade drama on service pages) */
.psteps-sec.dark{background:var(--ink);color:var(--bone)}
.psteps-sec.dark .psteps-head .eyebrow{color:rgba(238,241,233,.55)}
.psteps-sec.dark .psteps-head h2{color:var(--bone)}
.psteps-sec.dark .pstep{border-top-color:var(--line-dark)}
.psteps-sec.dark .pstep .num{color:var(--gold-bright)}
.psteps-sec.dark .pstep h4{color:var(--bone)}
.psteps-sec.dark .pstep p{color:rgba(238,241,233,.6)}
/* ---- FAQ accordion ---- */
.faqs-head{font-size:clamp(28px,3.6vw,48px);text-align:center;margin-bottom:40px}
.faq{max-width:880px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:26px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;
font-family:var(--display);font-size:clamp(18px,1.9vw,24px);letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--body);color:var(--gold-ink);font-size:26px;font-weight:400;line-height:1;transition:transform .35s var(--ease);flex:0 0 auto}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 0 28px;color:var(--muted);max-width:72ch;font-size:16px}
/* ---- big testimonial quote (dark) ---- */
.bigquote{background:var(--ink);color:var(--bone);text-align:center}
.bigquote .wrap{max-width:900px}
.bigquote .stars{color:var(--gold-bright);letter-spacing:.2em;font-size:15px;margin-bottom:26px}
.bigquote blockquote{font-family:var(--display);font-size:clamp(23px,3.1vw,40px);line-height:1.3;letter-spacing:-.01em;color:var(--bone)}
.bigquote cite{display:block;margin-top:28px;font-style:normal;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright)}
/* ---- cross-sell ---- */
.xsell-sec .eyebrow{color:var(--muted);margin-bottom:24px}
.xsell{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.xs{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.xs:hover{transform:translateY(-4px);box-shadow:0 30px 60px -50px rgba(23,19,13,.5)}
.xs .ic{font-size:20px;flex:0 0 auto}
.xs .xl{flex:1;font-weight:600;font-size:15px}
.xs .arr{color:var(--gold-ink);transition:transform .4s var(--ease)}
.xs:hover .arr{transform:translateX(5px)}
/* ---- contact details + map + newsletter ---- */
.cdetails{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.cdetail{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,3vw,34px)}
.cdetail .ic{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;margin-bottom:20px}
.cdetail strong{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.cdetail a{color:var(--gold-ink);font-weight:600;font-size:17px}
.cdetail .sub{color:var(--muted-2);font-size:13px;margin-top:8px}
.promise{margin-top:26px;background:color-mix(in srgb,var(--gold-bright) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--gold-ink) 30%,var(--line));
border-radius:16px;padding:20px 26px;font-size:15px;color:var(--ink)}
.promise b{color:var(--gold-ink)}
.map-embed{border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:340px;height:100%}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.25) sepia(.08) contrast(1.02)}
.news{background:var(--espresso);color:var(--bone);text-align:center}
.news .wrap{max-width:680px}
.news h2{font-size:clamp(26px,3.4vw,44px);color:var(--bone)}
.news p{color:rgba(238,241,233,.6);margin:18px auto 0;max-width:46ch}
.news form{display:flex;gap:12px;max-width:480px;margin:30px auto 0;flex-wrap:wrap}
.news input{flex:1;min-width:200px;background:transparent;border:1px solid var(--line-dark-2);border-radius:100px;color:var(--bone);
padding:15px 22px;font:inherit;font-size:15px}
.news input::placeholder{color:rgba(238,241,233,.42)}
.news input:focus{border-color:var(--gold-bright)}
.news input:focus:not(:focus-visible){outline:none}
.news input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
/* ---- single post ---- */
.post-meta{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:26px}
.post-meta .sep{color:var(--gold-ink)}
.post-cover{height:clamp(240px,42vh,440px);border-radius:22px;margin-bottom:40px}
.post-body{font-size:18px;line-height:1.75;color:var(--ink-soft)}
.post-body > *{max-width:68ch}
.post-body p{margin-bottom:1.4em;color:var(--ink-soft)}
.post-body h2{font-size:clamp(24px,2.8vw,34px);margin:1.6em 0 .5em;line-height:1.15}
.post-body h3{font-size:clamp(20px,2.2vw,26px);margin:1.4em 0 .4em}
.post-body ul,.post-body ol{margin:0 0 1.4em 1.2em}
.post-body li{margin-bottom:.5em;color:var(--ink-soft)}
.post-body a{color:var(--gold-ink);border-bottom:1px solid color-mix(in srgb,var(--gold-ink) 40%,transparent);transition:border-color .3s var(--ease)}
.post-body a:hover{border-color:var(--gold-ink)}
.post-body blockquote{position:relative;margin:1.8em 0;padding:0 0 0 4px;font-family:var(--display);font-size:clamp(21px,2.4vw,28px);line-height:1.32;font-style:italic;color:var(--ink)}
.post-body blockquote::before{content:"\201C";position:absolute;left:-.06em;top:-.5em;font-size:2.6em;line-height:1;color:var(--gold-ink);opacity:.45;pointer-events:none}
.post-body blockquote p{margin:0;padding-left:1.1em}
.post-body strong{font-weight:700;color:var(--ink)}
.post-foot{margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
/* ---- blog ---- */
.blog-featured{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.blog-featured .bf-body .cat{align-self:flex-start;display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink);border:1px solid color-mix(in srgb,var(--gold-ink) 45%,var(--line));padding:6px 12px;border-radius:100px;margin-bottom:18px}
.blog-featured h2{font-size:clamp(28px,3.6vw,48px);line-height:1.08;margin-bottom:18px}
.blog-featured p{color:var(--muted);max-width:48ch;margin-bottom:24px}
.blog-featured .bf-img{height:clamp(280px,40vh,440px);border-radius:22px}
.blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:48px}
/* ---- property detail ---- */
.pdetail{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(30px,4vw,56px);align-items:start}
.pdetail .gallery{height:clamp(320px,50vh,560px);border-radius:24px;margin-bottom:36px}
.pdetail .pgal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-26px 0 36px}
.pdetail .pgal .ph{aspect-ratio:4/3;border-radius:14px;overflow:hidden}
@media (max-width:640px){.pdetail .pgal{grid-template-columns:repeat(2,1fr)}}
.pdetail h1{font-size:clamp(30px,4vw,54px)}
.pdetail .sub{color:var(--muted);margin-top:14px;font-size:clamp(16px,1.5vw,19px)}
.pdetail .price{font-family:var(--display);font-size:clamp(28px,3vw,40px);margin:22px 0;color:var(--gold-ink)}
.spec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:30px 0}
.spec-list span{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;font-weight:600;font-size:15px}
.pdetail .desc h3{font-size:clamp(20px,2vw,26px);margin:30px 0 12px}
.pdetail .desc p{color:var(--muted);max-width:62ch}
.pside{position:sticky;top:108px;display:grid;gap:24px}
.pside .askbox{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,2.6vw,32px)}
.pside .askbox h3{font-size:clamp(20px,2vw,24px);margin-bottom:20px}
.pside .askbox form{display:grid;gap:12px}
.pside .askbox input,.pside .askbox textarea{border:1px solid var(--line);background:var(--bone);border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink)}
.pside .askbox input:focus,.pside .askbox textarea:focus{border-color:var(--gold-ink)}
.pside .askbox input:focus:not(:focus-visible),.pside .askbox textarea:focus:not(:focus-visible){outline:none}
.pside .askbox input:focus-visible,.pside .askbox textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pside .askbox textarea{min-height:96px;resize:vertical}
.pside .askbox .field input,.pside .askbox .field textarea{padding-top:20px;padding-bottom:7px}
.pside .askbox .field > label{color:var(--muted);left:16px}
.pside .askbox .field input:focus ~ label,.pside .askbox .field input:not(:placeholder-shown) ~ label,.pside .askbox .field textarea:focus ~ label,.pside .askbox .field textarea:not(:placeholder-shown) ~ label{color:var(--gold-ink)}
.agentbox{background:var(--ink);color:var(--bone);border-radius:22px;padding:clamp(26px,2.6vw,32px)}
.agentbox .a-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.agentbox .a-av{width:52px;height:52px;border-radius:50%;background:var(--gold-ink);color:var(--bone);display:grid;place-items:center;font-weight:700}
.agentbox .a-name strong{display:block;font-family:var(--body);font-size:15px}
.agentbox .a-name span{font-size:13px;color:rgba(238,241,233,.6)}
.agentbox p{color:rgba(238,241,233,.7);font-size:14.5px;margin-bottom:18px}
.agentbox .a-phone{display:inline-flex;align-items:center;gap:8px;color:var(--gold-bright);font-weight:600}
@media(max-width:980px){
.lede-cols,.mvv .wrap,.blog-featured,.pdetail,.offmarket{grid-template-columns:1fr}
.mvv .wrap{gap:1px}
.pside{position:static}
.page-hero .crumbs{margin-bottom:22px}
}
/* ============================================================
MORTGAGE CALCULATOR (added)
============================================================ */
.calc{background:var(--espresso);color:var(--bone);position:relative;overflow:hidden;isolation:isolate}
.calc-glow{position:absolute;z-index:0;width:62vw;height:62vw;max-width:780px;max-height:780px;border-radius:50%;
background:radial-gradient(circle,rgba(116,169,141,.16),transparent 65%);left:-16vw;bottom:-20vw;pointer-events:none;filter:blur(10px);will-change:transform}
.calc .wrap{position:relative;z-index:2}
.calc-head{max-width:62ch;margin-bottom:clamp(36px,5vh,56px)}
.calc-head h2{color:var(--bone);font-size:clamp(30px,4vw,56px)}
.calc-head .lead{color:rgba(238,241,233,.66);margin-top:18px}
.calc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.calc-controls{display:grid;gap:clamp(22px,3vh,34px)}
.cf{display:grid;gap:15px}
.cf-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cf-top label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,233,.6);font-weight:600}
.cf-val{font-family:var(--display);font-size:clamp(18px,1.9vw,23px);color:var(--gold-bright);white-space:nowrap}
/* The visible track stays 4px, but the control itself is 26px tall — the 24px thumb
plus a pixel of clearance — so the thumb has a hit area a finger can land on. The
4px box was the smallest target on the site. */
.cf input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;border-radius:4px;cursor:pointer;margin:0;
background-image:linear-gradient(var(--gold-bright),var(--gold-bright)),
linear-gradient(color-mix(in srgb,var(--bone) 18%,transparent),color-mix(in srgb,var(--bone) 18%,transparent));
background-repeat:no-repeat,no-repeat;
background-position:0 50%,0 50%;
background-size:var(--fill,30%) 4px,100% 4px}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
background:var(--bone);border:4px solid var(--gold-bright);box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.cf input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
.cf input[type=range]::-moz-range-thumb{width:24px;height:24px;border:4px solid var(--gold-bright);border-radius:50%;background:var(--bone);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.cf input[type=range]:focus-visible{outline:2px solid var(--gold-bright);outline-offset:6px}
.calc-result{background:color-mix(in srgb,var(--bone) 6%,transparent);border:1px solid var(--line-dark-2);border-radius:24px;
padding:clamp(28px,3vw,42px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cr-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,241,233,.55)}
.cr-rata{font-family:var(--display);font-weight:600;font-size:clamp(46px,6.4vw,82px);line-height:1;letter-spacing:-.02em;color:var(--bone);
margin:12px 0 4px;display:flex;align-items:baseline;gap:.16em;font-feature-settings:"tnum" 1}
.cr-rata .cr-cur{font-size:.3em;font-family:var(--body);font-weight:600;color:var(--gold-bright);letter-spacing:.02em}
.cr-sub{font-size:12.5px;color:rgba(238,241,233,.48);margin-bottom:26px}
.cr-list{display:grid;grid-template-columns:1fr auto;gap:13px 18px;padding:24px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin-bottom:26px}
.cr-list dt{color:rgba(238,241,233,.62);font-size:14px}
.cr-list dd{text-align:right;font-weight:600;font-size:15px;color:var(--bone);font-feature-settings:"tnum" 1}
.calc-result .btn{width:100%;justify-content:center}
@media(max-width:880px){ .calc-grid{grid-template-columns:1fr;gap:36px} }
/* ===== interactive house configurator ===== */
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.cfg-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:448px;padding-bottom:6px}
.cfg-stage .house{--w:180px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;z-index:2}
.cfg-stage .roof{width:0;height:0;border-left:calc(var(--w) / 2 + 18px) solid transparent;border-right:calc(var(--w) / 2 + 18px) solid transparent;border-bottom:48px solid var(--bone-2);transition:border-color .5s var(--ease)}
.cfg-stage .floors{display:flex;flex-direction:column-reverse;gap:6px;width:var(--w);transition:width .5s var(--ease)}
.cfg-stage .floor{position:relative;height:60px;background:var(--surface);border:1px solid var(--paper-edge);border-radius:3px;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px)}
.cfg-stage .floor.building{animation:floorRise .5s var(--ease-out) both}
@keyframes floorRise{from{opacity:0;transform:translateY(46px) scaleY(.35)}to{opacity:1;transform:none}}
.cfg-stage .win{width:clamp(14px,1.5vw,20px);height:clamp(20px,2.1vw,28px);border-radius:2px;background:color-mix(in srgb,var(--ink) 16%,var(--surface));border:1px solid var(--paper-edge);transition:background .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.cfg-stage .win.lit{background:var(--gold-bright);border-color:var(--gold-bright);box-shadow:0 0 14px var(--gold-glow)}
.cfg-stage .door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:18px;height:32px;border-radius:3px 3px 0 0;background:var(--ink)}
.cfg-stage .house[data-std="premium"] .roof{border-bottom-color:var(--gold-bright)}
.cfg-stage .house[data-std="premium"] .win.lit{box-shadow:0 0 22px var(--gold-glow)}
.cfg-stage .house[data-std="dev"] .floor{background:color-mix(in srgb,var(--surface) 60%,transparent);border-style:dashed}
.cfg-stage .ground-line{width:min(94%,520px);height:1px;background:linear-gradient(90deg,transparent,var(--line-dark-2) 18%,var(--line-dark-2) 82%,transparent);margin-top:6px}
.cfg-meta{margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,241,233,.55)}
.cfg-controls{display:grid;gap:clamp(18px,2.6vh,28px)}
.seg-btns{display:flex;gap:8px;flex-wrap:wrap}
/* max-content floor, not 96px: "Девелоперський" is one unbreakable token and was
being clipped by the button on narrow screens. */
.seg-btns button{flex:1 1 auto;min-width:max-content;border:1px solid var(--line-dark-2);background:transparent;color:rgba(238,241,233,.72);border-radius:100px;padding:11px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.seg-btns button:hover{border-color:var(--gold-bright)}
.seg-btns button.active{background:var(--gold-bright);color:var(--ink);border-color:var(--gold-bright)}
/* This block sits on a dark panel, so the site-wide ink ring would disappear into it. */
.seg-btns button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.cfg-select{width:100%;background-color:transparent;border:1px solid var(--line-dark-2);border-radius:12px;color:var(--bone);font:inherit;font-size:15px;padding:13px 44px 13px 15px;
-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2374A98D'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
.cfg-select option{color:#14201A;background:#EEF1E9}
.cfg-select:focus{border-color:var(--gold-bright)}
.cfg-select:focus:not(:focus-visible){outline:none}
.cfg-select:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.cfg-out{margin-top:6px;padding-top:24px;border-top:1px solid var(--line-dark)}
.cfg-perm{font-size:13px;font-weight:600;color:var(--gold-bright);margin-top:2px;margin-bottom:22px}
.cfg-out .btn{width:100%;justify-content:center}
@media(max-width:880px){ .cfg-grid{grid-template-columns:1fr;gap:40px} .cfg-stage{min-height:380px} }
/* ============================================================
TOUCH TARGETS
Padding plus an equal negative margin grows the hit area without moving anything
on the page, so these stay layout-neutral.
The consent row is the exception: the label is the target, not the 20px box inside
it, so it gets a real min-height.
============================================================ */
.brand{padding-block:12px;margin-block:-12px}
.link-arrow{padding-block:9px;margin-block:-9px}
.text-btn{padding:11px 4px;margin:-11px -4px}
.filter-rooms button{padding:13px 12px}
.footer-bottom a{display:inline-block;padding-block:12px;margin-block:-12px}
/* .cta-form .check is already the flex row up at the form rules; only the height is new.
.askbox .check has no such rule of its own, so it gets the whole set here. */
.cta-form .check{min-height:44px}
.askbox .check{min-height:44px;display:flex;align-items:center;gap:10px}
/* The newsletter consent is a flex item of .news form with an inline flex-basis:100%
from the template. Making it a flex container of its own either overflows a 390px
screen or breaks the sentence away from its box, so it just gets vertical padding
— the label is already the target, it only needed to be tall enough. */
.news .check{padding-block:12px}
/* The one place the checkbox size is declared — the form rules above set only its colour. */
.check input[type=checkbox]{width:20px;height:20px;flex:0 0 auto}
/* ============================================================
BELOW-THE-FOLD TEAM PORTRAITS
Nine 47–80KB portraits are CSS backgrounds, so `loading="lazy"` is not available
to them. Where content-visibility is supported (Chromium 85+, Firefox 125+,
Safari 18+) the off-screen cards stay unrendered, which also keeps their
backgrounds unfetched until the reader scrolls near them; the stored intrinsic
size means the page height does not jump when they come in. Where it is not
supported the declaration is ignored and all nine load as they did before —
this is a saving, not a guarantee.
============================================================ */
.tmember .tm-photo{content-visibility:auto;contain-intrinsic-size:auto 420px}
/* ============================================================
PROPERTY PHOTO VIEWER
A native