/* ── fonts: self-hosted latin subsets (Figtree, Instrument Serif — SIL OFL), swap, the hero ones preloaded in the page ── */
/* Figtree 400 — latin, self-hosted (SIL OFL); one variable file, a face per weight like Google serves it (WebKit needs this) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree 500 — latin, self-hosted (SIL OFL); one variable file, a face per weight like Google serves it (WebKit needs this) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree 600 — latin, self-hosted (SIL OFL); one variable file, a face per weight like Google serves it (WebKit needs this) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree 700 — latin, self-hosted (SIL OFL); one variable file, a face per weight like Google serves it (WebKit needs this) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif italic 400 — latin, self-hosted (SIL OFL) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrumentserif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif normal 400 — latin, self-hosted (SIL OFL) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrumentserif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Grand Industry Floors — demo v2 (round 5). Conversion-first, light on the phone's GPU. */
:root {
  --ivory: #f6f2ea; --paper: #fffdf9; --sand: #ece5d8; --ink: #1f1b16; --ink-2: #3b342c; --muted: #6f665b;
  --line: rgba(31,27,22,.12); --gold: #b0843e; --gold-2: #d4ad6a; --gold-ink: #6e4f1f; --ok: #3f6b4a;
  --r: 22px; --shadow: 0 1px 2px rgba(31,27,22,.06), 0 14px 36px -16px rgba(31,27,22,.28);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1); --hdr: 64px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 10px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
h3 { font-size: 24px; }
em { font-style: italic; color: var(--gold-ink); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(1220px, 100% - 40px); margin-inline: auto; }
.eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 10px; }
.lede { font-size: 18px; color: var(--muted); max-width: 620px; }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tbd { color: #a4562b; font-weight: 600; }
.stars { color: #d39a2c; letter-spacing: 2px; }

/* buttons */
.btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; transition: transform .2s var(--ease), background .2s; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm { --h: 42px; padding: 0 16px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--gold { color: #2a1d08; background: linear-gradient(180deg, #e2c084, #c99a50 55%, #b8873d); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(110,79,31,.35), 0 6px 18px -8px rgba(140,98,36,.6); }
.btn--ghost { background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.16); }
.btn:active { transform: scale(.98); }

/* glass: frosted only where it does not sit on top of scrolling content */
.glass-lite { background: rgba(255,253,249,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 6px 18px -10px rgba(31,27,22,.4); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; padding: 10px 10px 0; transition: transform .35s var(--ease); will-change: transform; }
.hdr.is-up { transform: translateY(-110%); }
.hdr__in { width: min(1220px, 100%); margin-inline: auto; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 8px 0 16px; border-radius: 999px; background: rgba(255,253,249,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 24px -14px rgba(31,27,22,.45); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr__in { background: rgba(255,253,249,.7); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); } }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.logo__img { height: 48px; width: auto; flex: none; margin: -4px 0; }
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__txt b { font: 700 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.logo__txt i { font: italic 400 19px/1 var(--serif); color: var(--gold-ink); margin-top: 2px; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hdr__call { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; }
.hdr__call svg { width: 18px; height: 18px; color: var(--gold); }
.hdr__cta .s { display: none; }
@media (max-width: 960px) {
  .nav, .hdr__call span { display: none; }
  .hdr__call { margin-left: auto; width: 42px; height: 42px; justify-content: center; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.12); }
}
@media (max-width: 420px) {
  .hdr__in { gap: 8px; padding-left: 12px; }
  .logo__img { height: 40px; }
  .logo__txt b { font-size: 10px; letter-spacing: .12em; }
  .logo__txt i { font-size: 17px; }
  .hdr__cta { padding: 0 14px; }
  .hdr__cta .l { display: none; } .hdr__cta .s { display: inline; }
}

/* progress rail (right edge) */
.rail { position: fixed; z-index: 40; right: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: min(46vh, 320px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(31,27,22,.12); }
.rail__fill { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: 100%; border-radius: 2px; background: linear-gradient(var(--gold-2), var(--gold)); transform-origin: top; transform: scaleY(0); }
.rail a { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px rgba(31,27,22,.25); pointer-events: auto; transition: transform .25s var(--ease), background .25s, box-shadow .25s; }
.rail a.on { background: var(--gold); box-shadow: 0 0 0 2px rgba(255,253,249,.9), 0 0 0 3.5px var(--gold); transform: scale(1.15); }
@media (max-width: 767px) { .rail { right: 3px; width: 10px; } .rail a { width: 6px; height: 6px; } }

/* swipe / scroll hints */
.swipe { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); }
.swipe__ico { position: relative; flex: none; width: 18px; height: 28px; border-radius: 10px; box-shadow: inset 0 0 0 1.6px currentColor; }
.swipe__ico i { position: absolute; left: 50%; top: 5px; width: 4px; height: 6px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: roll 1.8s var(--ease) infinite; }
@keyframes roll { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(11px); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.swipe--row { margin-top: 12px; display: none; }
.swipe__arr { display: inline-block; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 767px) { .swipe--row { display: flex; } }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #d9d3c8; }
.hero__media { position: absolute; inset: 0; }
.hero__v { width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; right: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero__card { position: relative; z-index: 2; margin: 0 0 clamp(24px, 6vh, 60px) max(20px, calc((100vw - 1220px) / 2)); width: min(580px, calc(100% - 40px)); padding: 28px 30px 22px; border-radius: 26px; display: grid; gap: 14px;
  background: rgba(255,253,249,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 20px 50px -20px rgba(31,27,22,.45); }
.hero__card h1 { font-size: clamp(40px, 4.6vw, 64px); }
.hero__sub { color: var(--ink-2); font-size: 17px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(176,132,62,.18); }
.proof { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; flex-wrap: wrap; }
.proof .g, .g { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px/1 var(--sans); color: #fff; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); flex: none; }
.proof b { color: var(--ink); }
@media (max-width: 767px) {
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: auto; background: var(--ivory); }
  .hero__media { position: relative; height: 56svh; min-height: 330px; border-radius: 0 0 26px 26px; overflow: hidden; }
  .hero__card { margin: -38px 12px 0; width: auto; padding: 20px 18px 16px; gap: 11px; }
  .hero__card h1 { font-size: 34px; }
  .hero__sub { font-size: 15.5px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__ctas .btn--ghost { display: none; }
  .hero__tag { bottom: 48px; }
}

/* sections */
.sec { padding: clamp(56px, 8vw, 110px) 0; }
.sec__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 4vw, 44px); max-width: 780px; }
.sec__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sec__head--row > div { display: grid; gap: 14px; }
/* below-the-fold sections: skip layout/paint until near the viewport */
.reviews, .work, .ba, .services, .faq, .cta, .ftr { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* horizontal swipe rows */
[data-swipe] { display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-swipe]::-webkit-scrollbar { display: none; }
[data-swipe] > * { scroll-snap-align: start; }
@media (max-width: 767px) { [data-swipe] { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; } }

/* ── visualizer ── */
.viz { background: linear-gradient(180deg, var(--ivory), #efe8dc); padding-top: clamp(40px, 6vw, 90px); }
.vhead { display: grid; gap: 10px; margin-bottom: 18px; }
.viz__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
.viz__stage { position: sticky; top: calc(var(--hdr) + 16px); }
.viz__frame { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: #cfc6b8; box-shadow: var(--shadow); }
.viz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viz__img--b { opacity: 0; }
.viz__img--b.is-reveal { opacity: 1; -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--p) * 140% - 40%), transparent calc(var(--p) * 140%)); mask-image: linear-gradient(180deg, #000 calc(var(--p) * 140% - 40%), transparent calc(var(--p) * 140%)); }
.viz__rooms { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,253,249,.88); box-shadow: 0 6px 18px -10px rgba(31,27,22,.45); }
.viz__rooms button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.viz__rooms button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -3px rgba(31,27,22,.35); }
.viz__label { position: absolute; left: 12px; bottom: 12px; padding: 9px 14px; border-radius: 14px; display: grid; gap: 1px; background: rgba(255,253,249,.9); box-shadow: 0 6px 18px -10px rgba(31,27,22,.45); }
.viz__label span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.viz__label b { font: 400 22px/1.1 var(--serif); }
.viz__note { position: absolute; right: 12px; top: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(31,27,22,.35); padding: 4px 8px; border-radius: 999px; }
.viz__panel { display: grid; gap: 14px; padding: 20px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }

.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; background: rgba(31,27,22,.06); color: var(--ink-2); }
.filters button[aria-selected="true"] { background: var(--ink); color: #fff; }
.ribbon { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 6px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ribbon::-webkit-scrollbar { display: none; }
.sw { border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 6px; text-align: left; scroll-snap-align: start; }
.sw[hidden] { display: none; }
.sw__chip { display: block; width: 84px; height: 60px; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(31,27,22,.12); }
.sw[aria-checked="true"] .sw__chip { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.sw__n { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.sw__t { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }

.area { display: grid; gap: 8px; }
.area__k { font-size: 13px; font-weight: 600; color: var(--muted); }
.area__row { display: flex; gap: 8px; }
.area__in { position: relative; flex: 1; display: flex; align-items: center; }
.area__in input, .fld input, .fld select, .fld textarea, .promo__in { width: 100%; height: 46px; border-radius: 12px; border: 0; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.16); font-size: 17px; font-weight: 600; -moz-appearance: textfield; }
.area__in input { padding-right: 52px; }
.area__in i, .fld__in i { position: absolute; right: 12px; font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; }
input:focus, select:focus, textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--gold) !important; }
input::-webkit-inner-spin-button { -webkit-appearance: none; }
.presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.presets::-webkit-scrollbar { display: none; }
.presets button { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.14); color: var(--ink-2); }
.presets button small { font-weight: 500; color: var(--muted); }
.presets button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); }

.price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #fbf3e3, #f3e3c3); box-shadow: inset 0 0 0 1px rgba(176,132,62,.28); }
.price__main { display: grid; }
.price__k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.price__was { font: 400 18px/1 var(--serif); color: var(--muted); margin-top: 2px; }
.price__was[hidden] { display: none; }
.price__v { font: 400 44px/1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 2px; }
.price__btns { display: grid; gap: 6px; }
.more { border-radius: 14px; background: rgba(31,27,22,.04); }
.more summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; font-size: 18px; line-height: 1; color: var(--gold-ink); }
.more[open] summary::after { content: '−'; }
.more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; }
.fld { display: grid; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 500; }
.fld--wide { grid-column: 1 / -1; }
.fld__in { position: relative; display: flex; align-items: center; }
.fld__in input { padding-right: 50px; }
.fld__in--sel select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%236f665b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.promo { display: grid; gap: 5px; }
.promo__k { font-size: 13px; color: var(--muted); font-weight: 500; }
.promo__row { display: flex; gap: 8px; }
.promo__in { flex: 1; min-width: 0; letter-spacing: .08em; text-transform: uppercase; }
.promo__in::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.promo__in.ok { box-shadow: inset 0 0 0 2px var(--ok); }
.promo__msg { font-size: 13px; }
.promo__msg.ok { color: var(--ok); font-weight: 600; }
.promo__msg.bad { color: #9b3b20; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.lines span { color: var(--muted); }
.lines .disc, .lines .disc span { color: var(--ok); font-weight: 600; }

@media (max-width: 980px) {
  .viz__grid { grid-template-columns: 1fr; gap: 12px; }
  .viz__stage { position: relative; top: 0; }
}
@media (max-width: 767px) {
  .viz { padding-top: 34px; padding-bottom: 40px; }
  .viz .wrap { width: calc(100% - 20px); }
  .vhead { margin-bottom: 12px; padding-inline: 6px; }
  .vhead h2 { font-size: 30px; }
  .viz__frame { aspect-ratio: auto; height: min(38svh, 92vw); border-radius: 20px; }
  .viz__img { object-position: 50% 65%; }
  .viz__rooms button { padding: 7px 12px; font-size: 13px; }
  .viz__label { padding: 7px 11px; } .viz__label b { font-size: 19px; }
  .viz__panel { padding: 14px 12px; gap: 11px; border-radius: 20px; }
  .ribbon { grid-auto-columns: 74px; } .sw__chip { width: 74px; height: 52px; }
  .price { padding: 12px 14px; }
  .price__v { font-size: 38px; }
}

/* reviews */
.reviews { background: var(--paper); }
.rating { display: flex; align-items: center; gap: 14px; padding: 12px 18px; text-decoration: none; border-radius: 18px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.rating__v { font: 400 48px/1 var(--serif); }
.rating__s { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.rev { grid-auto-columns: minmax(0, 1fr); }
.rev__card { margin: 0; padding: 24px 22px 20px; background: var(--ivory); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; }
.rev__card p { font: 400 20px/1.35 var(--serif); flex: 1; }
.rev__card footer { display: grid; font-size: 14px; }
.rev__card footer span { color: var(--muted); font-size: 13px; }
.rev__more { margin-top: 18px; }
.rev__more a { color: var(--gold-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(110,79,31,.35); }
@media (max-width: 960px) { .rev { grid-auto-columns: 84%; } .rev__card p { font-size: 19px; } }

/* real photos */
.row__h { font-size: 26px; margin: 8px 0 12px; }
.row__h:not(:first-of-type) { margin-top: 28px; }
.photos { grid-auto-columns: max-content; }
.ph { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: var(--sand); }
.ph img { height: 420px; width: auto; object-fit: cover; }
.ph--p img { aspect-ratio: 3 / 4; }
.ph--l img { aspect-ratio: 4 / 3; }
.ph figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255,253,249,.9); }
@media (max-width: 767px) {
  .ph img { height: min(62svh, 440px); }
  .ph--l img { height: auto; width: 88vw; }
}

/* before / after */
.ba__tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ba__tabs::-webkit-scrollbar { display: none; }
.ba__tabs button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; background: rgba(31,27,22,.06); color: var(--ink-2); }
.ba__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.ba__box { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 76svh; width: 100%; box-shadow: var(--shadow); background: #cfc6b8; touch-action: pan-y; }
.ba__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__beforewrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.25); pointer-events: none; }
.ba__handle i { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,253,249,.92); box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); }
.ba__handle i::before, .ba__handle i::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 0 2px 2px; margin-top: -4px; }
.ba__handle i::before { left: 13px; transform: rotate(45deg); }
.ba__handle i::after { right: 13px; transform: rotate(-135deg); }
.ba__tag { position: absolute; z-index: 2; top: 12px; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,253,249,.9); }
.ba__tag--l { left: 12px; } .ba__tag--r { right: 12px; }
.ba__fine { margin-top: 10px; }
@media (max-width: 767px) { .ba .wrap { width: calc(100% - 24px); } .ba__tag { font-size: 9.5px; padding: 5px 9px; } }

/* services + steps */
.services { background: var(--paper); }
.svc { grid-auto-columns: minmax(0, 1fr); }
.svc__card { display: grid; grid-template-rows: 180px auto; border-radius: 20px; overflow: hidden; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); }
.svc__card img { width: 100%; height: 180px; object-fit: cover; }
.svc__card div { padding: 14px 16px 18px; display: grid; gap: 6px; }
.svc__card h3 { font-size: 22px; }
.svc__card p { color: var(--muted); font-size: 15px; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.steps li { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.steps b { font: italic 400 22px/1 var(--serif); color: var(--gold); }
@media (max-width: 960px) { .svc { grid-auto-columns: 72%; } .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; gap: 6px; } .steps li { padding: 11px 14px; } }

/* faq */
.faq__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.faq__list { display: grid; gap: 8px; }
.faq details { border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(176,132,62,.14); color: var(--gold-ink); font-size: 18px; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 16px; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .faq__in { grid-template-columns: 1fr; gap: 0; } }

/* contact */
.cta { background: radial-gradient(80% 120% at 85% 0%, #f1e2c6 0%, rgba(241,226,198,0) 60%), linear-gradient(180deg, var(--ivory), #ebe2d2); }
.cta__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.cta__txt { display: grid; gap: 14px; }
.cta__card { padding: 26px 24px; display: grid; gap: 16px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.cta__phone { font: 400 42px/1 var(--serif); text-decoration: none; }
.cta__list { list-style: none; margin: 0; padding: 0; display: grid; }
.cta__list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cta__list span { color: var(--muted); }
.cta__list b { font-weight: 600; text-align: right; }
.cta__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cta__btns .btn--gold { flex: 1; }
@media (max-width: 900px) { .cta__in { grid-template-columns: 1fr; } .cta__phone { font-size: 36px; } }

/* footer */
.ftr { background: var(--ink); color: rgba(246,242,234,.78); padding: 44px 0 110px; font-size: 14px; }
.ftr__in { display: grid; gap: 12px; }
.logo--ftr img { width: 132px; height: auto; }
.ftr__small { font-size: 12.5px; color: rgba(246,242,234,.5); max-width: 720px; }

/* mobile action bar */
.mbar { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: none; gap: 8px; padding: 7px; border-radius: 999px; background: rgba(255,253,249,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 30px -12px rgba(31,27,22,.45); transform: translateY(150%); transition: transform .4s var(--ease); }
.mbar .btn--gold { flex: 1; }
.mbar.on { transform: none; }
@media (max-width: 767px) { .mbar { display: flex; } }

/* back to the owner presentation */
.ptab { position: fixed; z-index: 44; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 0 14px 14px 0; text-decoration: none; color: var(--ink); background: rgba(255,253,249,.94); box-shadow: 0 6px 18px -8px rgba(31,27,22,.4); font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ptab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.ptab svg { width: 16px; height: 16px; color: var(--gold); }
@media (max-width: 767px) { .ptab { top: 84px; transform: none; width: 16px; padding: 14px 0; gap: 0; border-radius: 0 10px 10px 0; } .ptab span { display: none; } .ptab svg { width: 14px; height: 14px; } }

/* dialogs */
.dlg { border: 0; padding: 0; background: none; width: min(540px, 100% - 20px); max-height: calc(100svh - 20px); overflow: visible; }
.dlg::backdrop { background: rgba(31,27,22,.45); }
.dlg__card { position: relative; padding: 26px 22px 20px; max-height: calc(100svh - 20px); overflow-y: auto; border-radius: 24px; background: var(--paper); display: grid; gap: 14px; }
.dlg__card [data-step] { display: grid; gap: 14px; }
.dlg__card [hidden] { display: none !important; }
.dlg__card h2 { font-size: 32px; padding-right: 36px; }
.dlg__x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(31,27,22,.06); font-size: 22px; line-height: 1; cursor: pointer; }
.dlg__sum { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--ivory); font-size: 13.5px; }
.dlg__sum img { width: 88px; height: 66px; object-fit: cover; border-radius: 10px; }
.dlg__sum b { font: 400 26px/1 var(--serif); display: block; margin-top: 3px; }
.dlg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dlg__btns .btn--gold { flex: 1; }
.ctl { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.ctl legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(60px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days button { border: 0; border-radius: 12px; padding: 7px 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.12); cursor: pointer; display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.days button b { font: 400 20px/1 var(--serif); color: var(--ink); }
.days button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--gold); color: var(--ink); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(31,27,22,.06); }
.seg button { border: 0; background: none; border-radius: 999px; padding: 9px 4px; font-weight: 600; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -5px rgba(31,27,22,.4); }
.dlg__err { color: #9b3b20; font-size: 14px; }
.dlg__ok { width: 54px; height: 54px; color: var(--ok); }
.demo-note { font-size: 13.5px; padding: 11px 13px; border-radius: 12px; background: #fff6e2; box-shadow: inset 0 0 0 1px rgba(176,132,62,.35); color: var(--gold-ink); }
.ms__how { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.ms__rooms { display: grid; gap: 8px; }
.ms__room { display: grid; grid-template-columns: 1.3fr 1fr auto 1fr auto; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.ms__room input { width: 100%; height: 42px; border-radius: 10px; border: 0; padding: 0 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.16); font-size: 16px; font-weight: 600; }
.ms__room output { min-width: 64px; text-align: right; font-weight: 700; color: var(--ink); }
.ms__home { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--ivory); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ms__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fbf3e3, #f3e3c3); }
.ms__total b { font: 400 30px/1 var(--serif); }
@media (max-width: 520px) { .dlg__fields { grid-template-columns: 1fr; } .dlg__card { padding: 22px 14px 16px; } .ms__how { grid-template-columns: 96px 1fr; font-size: 13.5px; } }

/* entrance: light, transform/opacity only, once */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .swipe__ico i, .swipe__arr { animation: none; } }

/* round 5 fit: phone rail = thin line only; visualizer fits one screen */
@media (max-width: 767px) {
  .rail { right: 0; width: 3px; height: 38vh; }
  .rail::before { width: 3px; margin-left: -1.5px; border-radius: 0; background: rgba(31,27,22,.08); }
  .rail__fill { width: 3px; margin-left: -1.5px; border-radius: 0; }
  .rail a { display: none; }
  .vhead { gap: 4px; margin-bottom: 8px; }
  .vhead .eyebrow { font-size: 10.5px; }
  .vhead h2 { font-size: 26px; }
  .viz__frame { height: min(33svh, 86vw); }
  .viz__panel { gap: 9px; padding: 12px 10px; }
  .filters button { padding: 6px 12px; font-size: 13px; }
  .ribbon { grid-auto-columns: 66px; gap: 8px; padding-bottom: 2px; }
  .sw { gap: 4px; }
  .sw__chip { width: 66px; height: 42px; border-radius: 10px; }
  .sw__n { font-size: 11.5px; }
  .sw__t { font-size: 9.5px; }
  .area { gap: 6px; }
  .area__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .area__in input, .promo__in { height: 42px; }
  .presets button { padding: 6px 10px; font-size: 12.5px; }
  .price { padding: 10px 12px; }
  .price__v { font-size: 34px; }
  .price__btns .btn--sm { --h: 38px; font-size: 14px; padding: 0 14px; }
}

/* rows mix portrait + landscape: each card hugs its own photo (no stretched grey area) */
.photos { align-items: start; }
.ph { align-self: start; }
.ph img { display: block; }
@media (max-width: 767px) { .photos--floors .ph--p img { width: auto; height: 66vw; } }

/* ── round 6: loader ── */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--ivory); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.is-loaded .loader { opacity: 0; transform: translateY(-3%); pointer-events: none; transition-duration: .5s, .6s; }
.loader__logo { width: min(176px, 44vw); height: auto; overflow: visible; }
.loader__ring, .loader__house { fill: #b07816; }
.loader__text path { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 9; stroke-opacity: 0; }
/* the circle closes → a short "click": the whole mark pops and settles, then the screen leaves */
.loader.is-closed .loader__logo { animation: ld-click .46s cubic-bezier(.2,.9,.25,1.35); }
.loader.is-closed .loader__ring, .loader.is-closed .loader__house { fill: #c4901f; transition: fill .3s; }
@keyframes ld-click { 0% { transform: scale(1); } 38% { transform: scale(1.06); } 100% { transform: scale(1); } }
.loader__num { font: 400 15px/1 var(--serif); color: var(--gold-ink); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ── round 6: the show (pinned; text never covers the picture) ── */
.show { position: relative; height: 380svh; background: var(--ivory); }
.show__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(330px, .82fr) 2fr; gap: 0 28px; padding: calc(var(--hdr) + 22px) max(20px, calc((100vw - 1320px) / 2)) 22px; }
.show__text { display: grid; grid-template-rows: auto 1fr auto; align-content: stretch; padding: 4vh 0 2vh; min-width: 0; }
.show__kick { font: 700 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.show__caps { position: relative; align-self: center; min-height: 3.2em; font-size: clamp(56px, 6.4vw, 104px); }
.cap { position: absolute; left: 0; right: 0; top: 50%; margin: 0; font: 400 1em/0.98 var(--serif); letter-spacing: -.02em; opacity: 0; transform: translateY(calc(-50% + 22px)); transition: opacity .55s var(--ease), transform .7s var(--ease); pointer-events: none; }
.cap.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.cap em { color: var(--gold-ink); }
.cap--end .btn { font-size: 16px; margin-top: 26px; letter-spacing: 0; }
.cap__h { margin: 0; }
.show__proof { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.show__proof b { color: var(--ink); }
.show__stage { position: relative; border-radius: 28px; overflow: hidden; background: #d9d3c8; box-shadow: var(--shadow); min-height: 0; }
.show__poster, .show__gl, .show__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.show__gl { opacity: 0; transition: opacity .24s ease-out; } .show__gl.on { opacity: 1; }
/* at the very top the full-quality still of frame 0 shows; the moving scene fades in over it as soon as the visitor scrolls */
.show__stage.at0 .show__gl.on { opacity: 0; }
.show__v { opacity: 0; transition: opacity .2s linear; }
.show.flying .show__v { opacity: 1; }
.show__note { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(31,27,22,.35); padding: 4px 8px; border-radius: 999px; }
.show__hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,253,249,.92); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); transition: opacity .4s; }
.show.started .show__hint { opacity: 0; }
.show.reduced { height: auto; } .show.reduced .show__pin { position: relative; }
@media (max-width: 900px) {
  .show { height: 330svh; }
  .show__pin { grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: calc(var(--hdr) + 14px) 12px 12px; }
  .show__text { grid-template-rows: auto auto; padding: 0 6px; gap: 10px; }
  .show__caps { font-size: clamp(40px, 11.5vw, 60px); min-height: 2.05em; align-self: start; }
  .cap { top: 0; transform: translateY(16px); } .cap.on { transform: none; }
  .cap--end { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .cap--end .cap__h { font-size: .8em; }
  .cap--end .btn { margin: 0; --h: 46px; padding: 0 16px; font-size: 14.5px; }
  .cap--end .btn svg { display: none; }
  .show__proof { display: none; }
  .show__stage { border-radius: 22px; }
}

/* round 7: room tabs scroll when there are many rooms */
.viz__rooms { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.viz__rooms::-webkit-scrollbar { display: none; }
.viz__rooms button { flex: none; white-space: nowrap; }

/* ── round 7: one-scene hero — almost no text, a blinking arrow, shorter scroll ── */
.show { height: 210svh; }
.show__pin { display: flex; flex-direction: column; gap: 14px; grid-template-columns: none; padding: calc(var(--hdr) + 14px) max(20px, calc((100vw - 1320px) / 2)) 20px; }
.show__h { margin: 0; font: 400 clamp(30px, 3.2vw, 46px)/1 var(--serif); letter-spacing: -.02em; }
.show__h em { color: var(--gold-ink); }
.show__stage { flex: 1 1 auto; }
.show__v { opacity: 0 !important; pointer-events: none; }
.show__down { position: absolute; z-index: 2; left: 50%; bottom: 18px; width: 48px; height: 48px; margin-left: -24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,253,249,.94); color: var(--gold-ink); box-shadow: 0 6px 20px rgba(31,27,22,.16); animation: blinkdown 1.6s ease-in-out infinite; transition: opacity .4s; }
.show__down svg { width: 22px; height: 22px; }
@keyframes blinkdown { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .35; transform: translateY(5px); } }
.show.done .show__down { opacity: 0; animation: none; pointer-events: none; }
.show__cta { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.show.done .show__cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.show.done .show__cta:active { transform: translate(-50%, 0) scale(.98); }
.show.reduced .show__down { display: none; } .show.reduced .show__cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.show.reduced .show__pin { height: 100svh; }
@media (max-width: 900px) {
  .show { height: 190svh; }
  .show__pin { gap: 10px; padding: calc(var(--hdr) + 8px) 10px 10px; }
  .show__h { font-size: clamp(28px, 8vw, 36px); padding: 0 6px; }
  .show__down { bottom: 16px; width: 44px; height: 44px; margin-left: -22px; }
  .show__cta { bottom: 16px; --h: 48px; padding: 0 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .show__down { animation: none; } }

/* ── round 8: six rooms — tabs scroll under the note, the note moves to the bottom right ── */
.viz__note { top: auto; bottom: 12px; }
@media (max-width: 900px) { .viz__note { bottom: auto; top: 54px; right: 12px; } }

/* ── round 9: the hero video is full-bleed and clean — header, rail and side tab fade in near its end ── */
.show { height: 220svh; }
.show__pin { display: block; padding: 0; gap: 0; }
.show__stage { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.show__cap { position: absolute; z-index: 2; left: max(20px, calc((100vw - 1320px) / 2)); top: clamp(22px, 5vh, 48px); max-width: 640px; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.show__h { margin: 0; font: 400 clamp(30px, 3vw, 44px)/1 var(--serif); letter-spacing: -.02em; color: var(--ink); text-shadow: 0 1px 14px rgba(255,253,249,.7); }
.show__sub { margin: 8px 0 0; font: 500 clamp(13px, 1.05vw, 15px)/1.35 var(--sans); color: var(--ink-2); text-shadow: 0 1px 10px rgba(255,253,249,.8); }
.show.done .show__cap { opacity: 0; transform: translateY(-8px); }
.show__note { top: auto; bottom: 18px; right: 14px; opacity: .8; }
.hdr, .rail, .ptab { transition: transform .35s var(--ease), opacity .7s var(--ease); }
.show-clean .hdr { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.show-clean .rail, .show-clean .ptab { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .show { height: 200svh; }
  .show__pin { padding: 0; }
  .show__cap { left: 18px; right: 18px; top: 22px; }
  .show__h { font-size: clamp(27px, 7.6vw, 34px); padding: 0; }
  .show__note { bottom: 22px; right: 12px; }
}
/* desktop: the top of the wide frame is busy (fridge, cabinets) — the caption sits on a small light card */
@media (min-width: 901px) {
  .show__cap { padding: 16px 22px 15px; border-radius: 18px; background: rgba(255,253,249,.88); box-shadow: 0 10px 30px -14px rgba(31,27,22,.45); }
  .show__h, .show__sub { text-shadow: none; }
}
/* phone: the end button is centred at the bottom, the note moves above it */
@media (max-width: 900px) { .show__note { bottom: 80px; } }
/* round 10: the hero title is scroll-linked (show.js), no CSS transition fighting it */
.show__cap { transition: none; will-change: opacity, transform; }
.show.done .show__cap { opacity: 0; }

/* ── round 11: big centred title that flies up and out; a clear scroll hint; no badge on the hero ── */
.show__cap { left: 0; right: 0; top: 34%; max-width: none; padding: 0 20px; text-align: center; transform-origin: 50% 0; background: none; box-shadow: none; border-radius: 0; }
.show__cap::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(900px, 120%); height: 190%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,253,249,.62), rgba(255,253,249,.28) 55%, rgba(255,253,249,0)); pointer-events: none; }
.show__h { font-size: clamp(64px, 7.4vw, 118px); line-height: .94; letter-spacing: -.025em; text-shadow: 0 1px 24px rgba(255,253,249,.75); }
.show__sub { margin-top: 16px; font-size: clamp(16px, 1.45vw, 21px); font-weight: 600; color: var(--ink); text-shadow: 0 1px 14px rgba(255,253,249,.9); }
@media (min-width: 901px) { .show__cap { padding: 0 20px; } }
.show__down { display: none; }
.show__hint2 { position: absolute; z-index: 2; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border-radius: 999px; background: rgba(255,253,249,.95); box-shadow: 0 10px 28px -12px rgba(31,27,22,.45); color: var(--ink); text-decoration: none; font: 600 14.5px/1.2 var(--sans); white-space: nowrap; }
.show__hint2 b { font-weight: 800; color: var(--gold-ink); }
.show__hint-m { display: none; }
.show__mouse { position: relative; flex: none; width: 20px; height: 30px; border-radius: 11px; box-shadow: inset 0 0 0 1.8px var(--gold-ink); }
.show__mouse i { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gold-ink); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.show__chev { display: grid; place-items: center; width: 22px; height: 22px; color: var(--gold-ink); animation: chev 1.6s ease-in-out infinite; }
.show__chev svg { width: 22px; height: 22px; }
@keyframes chev { 0%, 100% { transform: translateY(-2px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
.show.done .show__hint2 { opacity: 0 !important; pointer-events: none; }
.show__note { display: none; }
@media (max-width: 900px) {
  .show__cap { top: 30%; padding: 0 16px; }
  .show__h { font-size: clamp(50px, 14.5vw, 64px); }
  .show__sub { margin-top: 12px; font-size: 16px; }
  .show__hint-d { display: none; } .show__hint-m { display: inline; }
  .show__mouse { width: 18px; height: 26px; border-radius: 10px; }
  .show__mouse i { top: 15px; animation-name: swipe; }
  .show__hint2 { font-size: 14px; bottom: max(26px, env(safe-area-inset-bottom)); }
}
@keyframes swipe { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(-10px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .show__mouse i, .show__chev { animation: none; } }

/* ── round 12: one area, "+" lines (demo / baseboards / stairs), engineered vs solid, commercial quote, print ── */
.type-hint { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); min-height: 2.8em; }
.type-hint b { color: var(--ink-2); font-weight: 700; }
.area__row { align-items: center; }
.area__row .area__in { flex: 0 1 210px; }
.area__tip { font-size: 13px; color: var(--muted); }
.adds { display: grid; gap: 8px; }
.adds__rows { display: grid; gap: 8px; }
.adds__rows:empty { display: none; }
.add { display: grid; grid-template-columns: auto 1fr minmax(96px, 120px) 34px; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,27,22,.12); }
.add--base, .add--stairs { grid-template-columns: 1fr minmax(96px, 120px) 34px; }
.add__k { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.add__sel select { width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 8px; background: var(--ivory); font: 500 14px var(--sans); color: var(--ink); }
.add__in { position: relative; display: flex; align-items: center; }
.add__in input { width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 44px 0 10px; background: var(--ivory); font: 600 15px var(--sans); color: var(--ink); }
.add__in i { position: absolute; right: 9px; font-style: normal; font-size: 12px; color: var(--muted); pointer-events: none; }
.add__x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(31,27,22,.06); font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; }
.adds__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.add-btn { border: 0; border-radius: 999px; padding: 8px 13px; font: 600 13.5px var(--sans); cursor: pointer; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(31,27,22,.16); }
.add-btn b { color: var(--gold); font-size: 15px; margin-right: 2px; }
.add-btn[hidden] { display: none; }
.lines li.disc { color: var(--ok); }
.price__btns .btn svg { width: 17px; height: 17px; }
.quote { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #fbf3e3, #f3e3c3); box-shadow: inset 0 0 0 1px rgba(176,132,62,.25); }
.quote[hidden], .calc[hidden] { display: none; }
.quote h3 { font-size: 28px; }
.quote p { margin: 0; color: var(--ink-2); font-size: 15px; }
.quote__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.calc { display: grid; gap: 14px; }
@media (max-width: 767px) {
  .add { grid-template-columns: auto 1fr 34px; grid-template-areas: "k sel x" "in in in"; }
  .add .add__k { grid-area: k; } .add .add__sel { grid-area: sel; } .add .add__x { grid-area: x; } .add .add__in { grid-area: in; }
  .add--base, .add--stairs { grid-template-columns: auto 1fr 34px; grid-template-areas: "k in x"; }
  .area__tip { font-size: 12px; }
}

/* commercial section */
.comm__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.comm__ph { margin: 0; position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.comm__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.comm__ph figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(31,27,22,.45); padding: 5px 10px; border-radius: 999px; }
.comm__txt { display: grid; gap: 14px; justify-items: start; }
.comm__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.comm__list li { padding-left: 22px; position: relative; color: var(--ink-2); }
.comm__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.comm__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (max-width: 900px) { .comm__in { grid-template-columns: none; gap: 22px; } }

/* dialogs */
.est-no { color: var(--muted); letter-spacing: .06em; margin-left: 6px; }
.fld span i { font-style: normal; color: var(--muted); font-weight: 500; }
.ctl-wrap { border-radius: 14px; background: rgba(31,27,22,.04); margin: 4px 0 10px; }
.ctl-wrap summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ctl-wrap .ctl { border: 0; margin: 0; padding: 0 12px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* hero end: a clearer last call */
.show__end { position: absolute; z-index: 2; left: 50%; bottom: 96px; transform: translate(-50%, 10px); width: min(92vw, 620px); text-align: center; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.show__end h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; color: var(--ink); text-shadow: 0 1px 22px rgba(255,253,249,.9), 0 0 2px rgba(255,253,249,.6); }
.show__end p { margin: 10px 0 0; font-weight: 600; color: var(--ink); text-shadow: 0 1px 12px rgba(255,253,249,.95); }
.show.done .show__end { opacity: 1; transform: translate(-50%, 0); }
.show__cta { bottom: 34px; }
@media (max-width: 900px) { .show__end { bottom: 104px; } .show__end h2 { font-size: clamp(34px, 9.6vw, 44px); } }

/* print: only the estimate sheet */
.pr { display: none; }
@media print {
  @page { size: letter; margin: 14mm; }
  body { background: #fff !important; }
  body > *:not(.pr) { display: none !important; }
  .pr { display: block !important; color: #111; font: 11pt/1.45 var(--sans); }
  .pr__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid #b0843e; }
  .pr__brand { display: flex; gap: 12px; align-items: flex-start; }
  .pr__brand img { width: 64px; height: auto; margin-top: 4px; }
  .pr__brand div, .pr__meta { display: grid; gap: 1px; font-size: 9.5pt; color: #444; }
  .pr__brand b { font-size: 13pt; color: #111; }
  .pr__meta { text-align: right; }
  .pr__meta h1 { font: 400 28pt/1 var(--serif); color: #111; margin: 0 0 4px; }
  .pr__to { margin: 16px 0 10px; display: grid; gap: 2px; }
  .pr__to span, .pr__floor span, .pr__notes span { font-size: 8.5pt; letter-spacing: .12em; text-transform: uppercase; color: #6e4f1f; font-weight: 700; }
  .pr__blank { display: block; width: 60%; border-bottom: 1px solid #999; height: 20px; }
  .pr__floor { display: flex; gap: 14px; align-items: center; margin: 8px 0 14px; padding: 10px; border: 1px solid #e3dccf; border-radius: 8px; }
  .pr__floor img { width: 170px; height: 96px; object-fit: cover; border-radius: 4px; }
  .pr__floor div { display: grid; gap: 2px; }
  .pr__floor b { font: 400 18pt/1.05 var(--serif); }
  .pr__floor span:not(:first-child) { font-size: 9.5pt; letter-spacing: 0; text-transform: none; color: #444; font-weight: 400; }
  .pr__floor .pr__muted { color: #888; font-size: 8pt; }
  .pr__t { width: 100%; border-collapse: collapse; margin-top: 6px; }
  .pr__t th { text-align: left; font-size: 8.5pt; letter-spacing: .1em; text-transform: uppercase; color: #6e4f1f; border-bottom: 1px solid #b0843e; padding: 6px 4px; }
  .pr__t td { padding: 7px 4px; border-bottom: 1px solid #e8e2d6; vertical-align: top; }
  .pr__t td small { display: block; color: #777; font-size: 8.5pt; }
  .pr__t th:nth-child(n+2), .pr__t td:nth-child(n+2) { text-align: right; white-space: nowrap; }
  .pr__t tfoot td { border-bottom: 0; }
  .pr__disc td { color: #3f6b4a; }
  .pr__tot td { font-weight: 700; font-size: 13pt; border-top: 2px solid #111; padding-top: 9px; }
  .pr__notes { margin-top: 12px; } .pr__notes p { margin: 2px 0 0; }
  .pr__fine { margin: 14px 0 0; padding-left: 16px; font-size: 9pt; color: #555; }
  .pr__sign { display: flex; gap: 40px; margin-top: 34px; }
  .pr__sign div { flex: 1; display: grid; gap: 4px; }
  .pr__sign i { display: block; border-bottom: 1px solid #555; height: 28px; }
  .pr__sign span { font-size: 8.5pt; color: #666; }
}
/* end call sits on a light card: the floor behind it is busy */
.show__end { padding: 18px 20px 72px; border-radius: 24px; background: rgba(255,253,249,.86); box-shadow: 0 14px 40px -18px rgba(31,27,22,.5); bottom: 18px; }
.show__end h2, .show__end p { text-shadow: none; }
.show__cta { bottom: 34px; z-index: 3; }
@media (max-width: 900px) { .show__end { bottom: 16px; padding: 16px 16px 70px; } .show__cta { bottom: 30px; } }

/* ── round 13: hero text, Hurricane-style for phones — big stacked title bottom-left, a vertical SCROLL pill,
      lines rise in on load and leave one by one when the visitor scrolls (show.js drives the exit) ── */
.hx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hx__veil { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(0deg, rgba(246,242,234,.95) 0%, rgba(246,242,234,.82) 30%, rgba(246,242,234,.38) 62%, rgba(246,242,234,0) 100%); will-change: opacity; }
.hx__txt { position: absolute; left: 22px; right: 22px; bottom: calc(34px + env(safe-area-inset-bottom)); }
.hx__txt > * { will-change: transform, opacity; }
.hx__eye { margin: 0; display: flex; align-items: center; gap: 12px; font: 700 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.hx__eye i { flex: none; width: 32px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.hx__m { display: inline-block; overflow: hidden; padding: .15em 0; margin: -.15em 0; vertical-align: bottom; }
.hx__m > span { display: inline-block; transform: translate3d(0, 130%, 0); }
.hx__mask { overflow: hidden; padding-bottom: 3px; margin-bottom: -3px; }
.hx__h { margin: 12px 0 0; line-height: .86; letter-spacing: 0; }
.hx__l { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.08em; }
.hx__w { display: inline-block; transform: translate3d(0, 108%, 0); }
.hx__l:first-child .hx__w { font: 800 clamp(58px, 16.8vw, 78px)/.9 var(--sans); text-transform: uppercase; letter-spacing: -.035em; color: var(--ink); }
.hx__l--it .hx__w { font: 400 clamp(66px, 19vw, 88px)/.9 var(--serif); letter-spacing: -.02em; }
.hx__l--it em { color: var(--gold-ink); font-style: italic; }
.hx__sub { margin: 14px 0 0; max-width: 31ch; font: 500 16px/1.45 var(--sans); color: var(--ink-2); transform: translate3d(0, 105%, 0); }
.hx__mask--proof { margin-top: 11px; padding-top: 3px; }
.hx__proof { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--sans); color: var(--ink); text-decoration: none; transform: translate3d(0, 115%, 0); }
.hx__proof span { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.hx__scroll { pointer-events: auto; position: absolute; right: 12px; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 12px; width: 34px; border-radius: 999px; background: rgba(255,253,249,.88); box-shadow: inset 0 0 0 1px rgba(110,79,31,.28), 0 8px 24px -12px rgba(31,27,22,.45); color: var(--ink); text-decoration: none; opacity: 0; will-change: opacity; }
.hx__scroll span { writing-mode: vertical-rl; font: 700 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.hx__scroll i { position: relative; display: block; width: 1.5px; height: 46px; background: rgba(110,79,31,.22); overflow: hidden; border-radius: 2px; }
.hx__scroll b { position: absolute; left: 0; top: 0; width: 100%; height: 16px; background: var(--gold); animation: hxdrop 1.7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes hxdrop { 0% { transform: translateY(-16px); } 100% { transform: translateY(46px); } }

/* intro: after the loader — the gold rule draws, the two lines rise out of their masks, then the rest */
.is-loaded .hx__eye i { transform: scaleX(1); transition: transform .9s cubic-bezier(.16,1,.3,1) .1s; }
.is-loaded .hx__m > span { transform: none; transition: transform .9s cubic-bezier(.16,1,.3,1) .26s; }
.is-loaded .hx__w { transform: none; transition: transform 1.15s cubic-bezier(.16,1,.3,1) .22s; }
.is-loaded .hx__l--it .hx__w { transition-delay: .36s; }
.is-loaded .hx__sub { transform: none; transition: transform 1s cubic-bezier(.16,1,.3,1) .55s; }
.is-loaded .hx__proof { transform: none; transition: transform .9s cubic-bezier(.16,1,.3,1) .75s; }
.is-loaded .hx__scroll { opacity: 1; transition: opacity .8s .9s; }

@media (min-width: 901px) {
  .hx__veil { height: 70%; background: linear-gradient(0deg, rgba(246,242,234,.92) 0%, rgba(246,242,234,.7) 32%, rgba(246,242,234,0) 100%); }
  .hx__txt { left: max(48px, calc((100vw - 1320px) / 2)); right: auto; bottom: 64px; max-width: 820px; }
  .hx__l:first-child .hx__w { font-size: clamp(84px, 8.4vw, 136px); }
  .hx__l--it .hx__w { font-size: clamp(94px, 9.4vw, 152px); }
  .hx__sub { font-size: 19px; max-width: 40ch; }
  .hx__scroll { right: 28px; top: auto; bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__eye i, .hx__w, .hx__sub, .hx__proof, .hx__scroll, .hx__m > span { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hx__scroll b { animation: none; }
}
/* the old centred caption and the bottom hint are gone */
.show__cap, .show__hint2 { display: none !important; }

/* ── round 14: Andrey's answers — install method, color-family note, trust strip, contacts ── */
.fam-note { margin: -8px 0 0; font-size: 11.5px; color: var(--muted); font-style: italic; }
.method { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.method[hidden] { display: none; }
.method__k { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.method button { border: 0; border-radius: 999px; padding: 8px 14px; font: 600 13.5px var(--sans); cursor: pointer; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(31,27,22,.16); }
.method button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.add__sel select { font-size: 13.5px; }
.trust { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trust li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.trust b { font: 400 22px/1.05 var(--serif); color: var(--ink); }
.trust span { font-size: 13px; color: var(--muted); }
@media (max-width: 767px) { .trust { grid-template-columns: 1fr 1fr; } .trust b { font-size: 19px; } }
.hx__proof i { font-style: normal; color: var(--gold); margin: 0 2px; }
.cta__sub { margin: -4px 0 10px; font-size: 14px; font-weight: 600; color: var(--gold-ink); }
.cta__list b small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.cta__list b a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(176,132,62,.4); word-break: break-word; }
.ftr p a { color: inherit; }
/* real before/after pairs, side by side */
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 760px; margin: 0 auto; }
.ba__pair[hidden], .ba__box[hidden] { display: none; }
.ba__pair figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #cfc6b8; }
.ba__pair img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ba__pair--land { grid-template-columns: 1fr; max-width: 980px; }
.ba__pair--land img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .ba__pair--land { grid-template-columns: 1fr 1fr; } }
.ba__pair figcaption { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(31,27,22,.55); padding: 5px 10px; border-radius: 999px; }
.cta__list b a[href^="mailto"] { font-size: 13px; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) { .cta__list li:nth-child(2) { flex-direction: column; gap: 2px; } .cta__list li:nth-child(2) b { text-align: left; } }

/* ── round 16: kitchen cabinet colors ── */
.viz__cab { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.viz__cab.on { opacity: 1; }
.viz__rooms, .viz__label, .viz__note { z-index: 3; }
.cabs { display: grid; gap: 6px; }
.cabs[hidden] { display: none; }
.cabs__k { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.cabs__k b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.cabs__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; }
.cabs__row::-webkit-scrollbar { display: none; }
.cab { flex: none; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; width: 54px; }
.cab span { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(31,27,22,.18); }
.cab[aria-checked="true"] span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold); }
.cab i { font-style: normal; font-size: 10.5px; line-height: 1.15; color: var(--muted); text-align: center; }
.cab[aria-checked="true"] i { color: var(--ink); font-weight: 600; }

/* ── round 17: email preview, demo "where", owner mode ── */
.mailprev { margin: 8px 0 14px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #f6f2ea; }
.mailprev iframe { display: block; width: 100%; height: min(70svh, 760px); border: 0; background: #f6f2ea; }
.add__where { grid-column: 1 / -1; width: 100%; height: 36px; border: 0; border-radius: 10px; padding: 0 10px; background: var(--ivory); font: 500 13.5px var(--sans); color: var(--ink); }
@media (max-width: 767px) { .add .add__where { grid-area: auto; grid-column: 1 / -1; } .add { grid-template-areas: "k sel x" "in in in" "wh wh wh"; } .add .add__where { grid-area: wh; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[data-owner-only][hidden], .mailprev[hidden], .demo-note[hidden] { display: none !important; }
.dlg__thumb { position: relative; display: block; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; }
.dlg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dlg__card > [data-step] > .eyebrow:first-child { padding-right: 52px; }
.dlg__card .eyebrow .est-no { display: inline-block; margin-left: 0; }

/* ── round 19b: kitchen — cabinets above the picture, floor type + color below it ── */
.viz__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; }
.viz__stage > * { min-width: 0; }
.cabs--top { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cabs--top[hidden] { display: none; }
.cabs--top .cabs__k { flex: none; display: grid; gap: 1px; line-height: 1.15; min-width: 86px; }
.cabs--top .cabs__k b { margin: 0; font-size: 14px; }
.cabs--top .cabs__row { flex: 1 1 auto; min-width: 0; padding: 4px 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.viz__floors { display: grid; gap: 10px; padding: 14px 14px 10px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.viz__floors .fam-note { margin: 0; }
[data-cabs-note][hidden] { display: none; }
@media (max-width: 767px) {
  .viz__stage { gap: 8px; }
  .cabs--top { gap: 8px; padding: 6px 8px 6px 12px; border-radius: 16px; }
  .cabs--top .cabs__k { min-width: 64px; font-size: 11.5px; }
  .cabs--top .cabs__k b { font-size: 12.5px; }
  .cabs--top .cab { width: 34px; }
  .cabs--top .cab span { width: 30px; height: 30px; }
  .cabs--top .cab i { display: none; }               /* names show in the label on the left */
  .viz__floors { padding: 10px 10px 8px; gap: 8px; border-radius: 18px; }
}

/* ── round 20: "Find the right floor" — 8 category cards (Andrey's layout), details in a dialog ── */
.cats { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.cats .sec__head h2 em { color: var(--gold-ink); }
.cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cat { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(31,27,22,.35); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -26px rgba(31,27,22,.45); }
.cat__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e0d4; }
.cat__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat:hover .cat__ph img { transform: scale(1.04); }
.cat__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(255,253,249,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cat__tag--viz { color: var(--muted); }
.cat__b { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 16px; flex: 1; }
.cat__b h3 { margin: 0; font: 400 25px/1.08 var(--serif); color: var(--ink); }
.cat__b p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); flex: 1; }
.cat__more { align-self: flex-start; margin-top: 6px; border: 0; background: none; padding: 4px 0; font: 600 14px/1 var(--sans); color: var(--gold-ink); cursor: pointer; }
.cat__more span { display: inline-block; transition: transform .3s var(--ease); }
.cat:hover .cat__more span, .cat__more:focus-visible span { transform: translateX(4px); }
.cats__band { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 18px 18px 28px; border-radius: 22px; background: rgba(255,253,249,.72); box-shadow: inset 0 0 0 1px rgba(176,132,62,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cats__band p { margin: 0; font: 400 clamp(26px, 3vw, 38px)/1.1 var(--serif); color: var(--ink); }
.cats__band em { color: var(--gold-ink); }
.dlg--cat { width: min(620px, 100% - 20px); }
.catd__ph { margin: -26px -22px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px 24px 0 0; background: #e7e0d4; }
.catd__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlg--cat h2 { margin: -4px 0 0; font: 400 32px/1.05 var(--serif); }
.catd__txt p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1100px) { .cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .cats__grid { gap: 10px; }
  .cat { border-radius: 18px; }
  .cat__b { padding: 11px 12px 10px; gap: 4px; }
  .cat__b h3 { font-size: 19px; }
  .cat__b p { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cat__more { font-size: 13px; margin-top: 2px; }
  .cat__tag { left: 7px; bottom: 7px; font-size: 8.5px; padding: 3px 7px; }
  .cats__band { flex-direction: column; align-items: stretch; text-align: center; padding: 18px 16px; }
  .cats__band .btn { justify-content: center; }
  .dlg--cat h2 { font-size: 27px; }
}
.cat__ph picture, .catd__ph picture { display: block; width: 100%; height: 100%; }
.catd__ph { position: relative; flex: none; }
.dlg--cat .eyebrow { margin-top: 2px; }
.catd__ph { aspect-ratio: auto; }
.catd__ph picture { height: auto; }
.catd__ph img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── round 21: lightbox ── */
.viz__frame, #work .photos .ph, .ba__pair figure, #floors .cat__ph, .comm__ph { cursor: zoom-in; }
.viz__rooms { cursor: default; }
.ba__zoom { position: absolute; z-index: 4; right: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: zoom-in; color: var(--ink); background: rgba(255,253,249,.9); box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); }
.ba__zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba__zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }