/* ==========================================================================
   AEROVISTA — MOBILE (≤ 768px). Loaded only on phones.

   The fixed property film IS the environment. Everything else is a floating
   sheet laid inside it:
   · a compact frosted logo chip top-left, hamburger alone top-right
   · glass sheets inset 20px from the edges, 28px top / 18px bottom radius,
     a small grabber, no borders, clear video between groups (24vh)
   · a floating action dock instead of an edge-to-edge bar
   · numbers, site photographs = horizontal snap swipes with a visible peek
   · residences = one ivory product sheet with a full-bleed photograph
   · amenities = five tall 4:5 editorial photographs
   · menu = full-screen ink-glass contents page
   · lead form = bottom booking sheet that follows the keyboard
   Depth comes from transparency, blur, type and spacing — not motion.
   ========================================================================== */

:root {
  --gutter: 20px;
  --sec-gap: 24vh;
  --scrub-track: 1100vh;
  --dock-h: 72px;
  --dock-inset: 12px;
  --dock-bottom: calc(10px + env(safe-area-inset-bottom));
  --dock-clear: calc(var(--dock-h) + var(--dock-bottom));    /* space the dock occupies */
  --panel-r: 28px;
  --panel-r-b: 18px;
  --glass: rgba(15, 18, 34, 0.84);
  --hair: rgba(255, 255, 255, 0.12);
  --sheet-pad-x: 1.5rem;
}

body { font-size: 1rem; line-height: 1.55; padding-bottom: calc(var(--dock-clear) + 20px); }

/* No hover effects on touch: press feedback only */
.btn:hover { transform: none; }
.btn-primary:hover { background: var(--cta); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); }
.btn-gold:hover { background: var(--gold); }
.btn-secondary:hover { border-color: var(--ink-line); }
.btn, .mobile-bar-btn, .residence-tab, .segment-btn, .chip-btn, .faq-trigger { -webkit-tap-highlight-color: transparent; }
.btn:active, .mobile-bar-btn:active { transform: scale(0.975); transition-duration: 0.08s; }

/* --- Type scale --- */
.t-display { font-size: clamp(2.5rem, 11.5vw, 3.2rem); line-height: 1.02; }
.t-h1 { font-size: clamp(2rem, 8.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.012em; }
.lines { margin-top: 1.1rem; font-family: var(--sans); font-size: 1.02rem; line-height: 1.6; color: var(--text-2); }
.t-body-light { font-size: 0.98rem; line-height: 1.6; margin-top: 0.85rem; }
.note { font-size: 0.78rem; }
.m-kicker { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; color: var(--gold); margin-bottom: 0.7rem; }

/* ==========================================================================
   Loader — the property frame, softened, behind the mark
   ========================================================================== */
.video-loader { padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); background: var(--ink); }
.video-loader::before { content: ''; position: absolute; inset: -40px; background: url('../assets/images/building-right-view.webp') center / cover no-repeat; filter: blur(14px) saturate(110%); opacity: 0.6; }
.video-loader::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,13,28,0.35), rgba(11,13,28,0.85)); }
.loader-inner { position: relative; z-index: 1; width: min(100%, 300px); }
.loader-logo { width: 148px; }
.loader-tagline { margin-top: 1.4rem; font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.15; }
.loader-track { margin-top: 2.75rem; background: rgba(255,255,255,0.18); }
.loader-meta { font-size: 0.8rem; color: var(--text-2); }

/* ==========================================================================
   Header — a frosted logo chip and a lone hamburger, nothing else
   ========================================================================== */
.site-header { padding: max(16px, env(safe-area-inset-top)) 0 0; pointer-events: none; }
.site-header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header-inner { padding-inline: var(--gutter); align-items: flex-start; gap: 0.75rem; }
.header-cta, .menu-toggle-label { display: none; }

.brand-glass {
  pointer-events: auto;
  height: 74px; max-width: 320px; padding: 0 20px; gap: 14px; border-radius: 24px;
  background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.14);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.brand-divider { height: 30px; background: rgba(11,13,28,0.16); }
.brand-logo { height: 44px; }
.brand-dev { height: 30px; }
body.nav-locked .brand-glass { opacity: 0; pointer-events: none; }
/* Past the film the chip tucks away while reading down; scrolling up brings it back (main.js) */
.site-header.is-tucked .brand-glass { opacity: 0; transform: translateY(-24px); pointer-events: none; }

.menu-toggle {
  pointer-events: auto;
  width: 50px; min-height: 50px; margin-top: 12px; padding: 0; justify-content: center; border-radius: 50%;
  color: var(--ink); background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.14);
  transition: background-color 0.3s var(--ease), color 0.3s;
}
.menu-toggle-lines { width: 20px; gap: 6px; }
.menu-toggle-lines span { height: 1.5px; }
body.nav-locked .menu-toggle { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.menu-toggle.is-active .menu-toggle-lines span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle-lines span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ==========================================================================
   Menu — a contents page, not a drawer
   ========================================================================== */
.site-menu { background: rgba(11,13,28,0.9); }
.site-menu-inner { padding-inline: var(--gutter); padding-top: calc(5.5rem + env(safe-area-inset-top)); padding-bottom: calc(2.25rem + env(safe-area-inset-bottom)); gap: 2.75rem; align-items: start; }
.site-menu-list { gap: 0.35rem; }
.site-menu-list a { font-size: clamp(2.4rem, 10.5vw, 2.9rem); line-height: 1.22; }
.site-menu-list a:hover { color: #fff; }
.site-menu-aside { gap: 1.1rem; font-size: 0.95rem; }
.site-menu-aside p:first-of-type { margin-top: 0.25rem; }
/* Logo chip, built from the two marks so the menu carries the brand */
.site-menu-aside::before {
  content: ''; display: block; width: 214px; height: 70px; border-radius: 22px;
  background:
    url('../assets/logos/aerovista-logo.png') 20px center / auto 42px no-repeat,
    linear-gradient(rgba(11,13,28,0.16), rgba(11,13,28,0.16)) 94px center / 1px 28px no-repeat,
    url('../assets/logos/dukia-group-logo.png') right 20px center / auto 30px no-repeat,
    rgba(255,255,255,0.86);
  box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}
.site-menu-phone { font-size: 1.65rem; }
.site-menu-rera { font-size: 0.84rem; }
.site-menu-actions { gap: 0.7rem; margin-top: 0.4rem; }
.site-menu-actions .btn { min-height: 54px; border-radius: 16px; font-size: 0.9rem; }

/* ==========================================================================
   Hero — identity sits in the lower-left pocket, above the dock
   ========================================================================== */
.hero-intro { padding: 0 var(--gutter) calc(var(--dock-clear) + 1.5rem); }
.hero-pocket { max-width: none; padding-right: 0.5rem; }
.hero-title-word { font-size: clamp(3rem, 14vw, 3.8rem); text-transform: none; letter-spacing: -0.01em; line-height: 1; }
.hero-positioning { font-size: 1.2rem; margin-top: 0.7rem; }
.hero-facts { margin-top: 1.2rem; padding-top: 1rem; gap: 0.75rem 1.5rem; }
.hero-facts dt { font-size: 0.76rem; }
.hero-facts dd { font-size: 0.92rem; white-space: normal; }
.hero-actions, .hero-scroll-cue { display: none; }
.hero-scrim::after { background: linear-gradient(to top, rgba(6,8,20,0.84) 0%, rgba(6,8,20,0.5) 30%, rgba(6,8,20,0.14) 50%, transparent 62%); }

.hero-chapter { left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-clear) + 0.9rem); padding: 0.45rem 0.95rem; white-space: nowrap; background: rgba(11,13,28,0.5); }
.hero-chapter-label { font-size: 1rem; }
.scrub-progress { display: none; }

/* ==========================================================================
   Sheets — floating, inset from the edge, grabber on top
   ========================================================================== */
.content .container { padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-gap) 0; }
.sec + .sec { padding-top: var(--sec-gap); }
.stagger { display: block; }
.stagger .sheet + .sheet { margin-top: 12px; }

.sheet {
  width: 100%;
  padding: 2.6rem var(--sheet-pad-x) 2.1rem;
  border-radius: var(--panel-r) var(--panel-r) var(--panel-r-b) var(--panel-r-b);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.sheet::before {            /* grabber, in place of the desktop hairline */
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18);
}
.sheet--solid { background: var(--ivory); border: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
.sheet--solid::before { display: block; background: rgba(22,23,27,0.14); }
.sheet--tight { padding-bottom: 1.9rem; margin-bottom: 14px; }
.sheet-actions { margin-top: 1.5rem; gap: 0.7rem; }
.sheet-actions .btn { flex: 1 1 100%; }

/* --- Overview: editorial sheet + one dominant number, next one peeking --- */
#overview .lines { margin-top: 1.15rem; }
.stats {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 3.7rem 0 2.1rem; scroll-padding-inline-start: var(--sheet-pad-x);
  overscroll-behavior-x: contain;
}
.stats::-webkit-scrollbar { display: none; }
.stats .m-kicker--row { position: absolute; top: 2.25rem; left: var(--sheet-pad-x); margin: 0; padding: 0; }
.stats > div { flex: 0 0 60%; margin-right: 10px; scroll-snap-align: start; padding: 1.5rem 1.15rem 1.35rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; background: rgba(255,255,255,0.035); }
.stats > div:nth-child(2) { margin-left: var(--sheet-pad-x); }
.stats > div:last-child { margin-right: var(--sheet-pad-x); }
.stats dd { font-size: clamp(2.4rem, 10.5vw, 2.9rem); }
.stats dt { font-size: 0.84rem; margin-top: 0.55rem; }

/* --- Privacy: three editorial rows --- */
.principles { margin-top: 1.5rem; }
.principles li { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 1.1rem; align-items: start; padding: 1.4rem 0; }
.principles li::before { content: ''; grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(201,175,134,0.32); background: rgba(255,255,255,0.03); }
.principles li::after { content: ''; position: absolute; left: 14px; top: calc(1.4rem + 14px); width: 24px; height: 24px; background: var(--gold); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.principles li:nth-child(1) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>"); }
.principles li:nth-child(2) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9.5 12l1.8 1.8L15 10'/></svg>"); }
.principles li:nth-child(3) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 3c-6 1-13 4-13 13 0 2 1.2 4 4 4 8 0 9-9 9-17z'/><path d='M17 8c-5 2-8 6-11 12'/></svg>"); }
.principles h3 { grid-column: 2; font-size: 1.3rem; }
.principles p { grid-column: 2; font-size: 0.92rem; margin-top: 0.35rem; }

/* --- Residences: ivory product sheet, full-bleed photograph --- */
#residences .sheet--solid { padding: 2.6rem 1.35rem 1.9rem; }
.sheet-head { display: block; margin-bottom: 1.25rem; }
.sheet-head .t-h1 { margin-bottom: 1.2rem; }
.residence-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 0; border-radius: 999px; background: var(--ivory-2); }
.residence-tab { min-height: 46px; margin: 0; padding: 0.5rem; border: 0; border-radius: 999px; font-size: 0.9rem; color: var(--ink-text-2); transition: background-color 0.25s, color 0.25s; }
.residence-tab.is-active { background: var(--ink); color: #fff; border: 0; }
.residence-panel.is-active { display: flex; flex-direction: column; align-items: stretch; gap: 1.35rem; }
.residence-figure { margin-inline: 0; width: 100%; border-radius: 18px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.residence-figure::-webkit-scrollbar { display: none; }
.residence-figure img { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
.residence-panel .swipe-nav { margin: 0.7rem 0 0; padding: 0 0.25rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-text-2); }
.residence-panel .swipe-dots i { background: rgba(22,23,27,0.18); }
.residence-panel .swipe-dots i.is-active { background: var(--ink-text); }
.residence-panel .swipe-next { color: var(--ink-text); }
.residence-sheet { gap: 0.95rem; }
.residence-kicker { font-size: 0.86rem; }
.residence-area { font-size: clamp(2rem, 8.8vw, 2.5rem); margin-top: -0.3rem; }
.residence-price {
  font-size: 1.85rem; margin-top: 0.15rem; padding: 1rem 1.15rem; border: 0; border-radius: 18px;
  background: var(--ivory-2); justify-content: flex-start; gap: 0.15rem; align-items: center;
  box-shadow: 0 8px 24px rgba(22,23,27,0.06);
}
.residence-price span { font-size: 0.82rem; margin-right: auto; }
.residence-feature { margin-top: 0.15rem; }
.residence-feature dt { font-size: 0.82rem; }
.residence-feature dd { font-size: 1.02rem; }
.residence-actions { flex-direction: column; gap: 0.6rem; margin-top: 0.35rem; }
.residence-actions .btn { width: 100%; min-height: 54px; border-radius: 16px; font-size: 0.88rem; }
.price-note { font-size: 0.74rem; line-height: 1.5; }

/* --- Amenities: five tall editorial photographs --- */
#amenities .strip { gap: 12px; padding: 0 9vw; scroll-padding-inline: 9vw; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
#amenities .strip figure { position: relative; flex: 0 0 82vw; scroll-snap-align: center; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
#amenities .strip img { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
#amenities .strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 5rem 1.5rem 1.6rem; font-size: 0.95rem; text-shadow: none; background: linear-gradient(to top, rgba(8,10,25,0.9) 0%, rgba(8,10,25,0.55) 45%, transparent 100%); }
#amenities .strip figcaption b { font-size: 1.85rem; margin-bottom: 0.25rem; }

/* --- Site photographs: centred snap gallery with a visible peek --- */
#progress .strip { gap: 12px; padding: 0 9vw 0; scroll-padding-inline: 9vw; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
#progress .strip figure { flex: 0 0 82vw; scroll-snap-align: center; }
#progress .strip img { border-radius: 18px; aspect-ratio: 4 / 3; box-shadow: 0 24px 60px rgba(0,0,0,0.28); }
#progress .strip figcaption { font-size: 0.9rem; margin-top: 0.85rem; padding-left: 0.2rem; }
/* Swipe nav: "1 / 8" · dots · next (built by main.js on phones) */
.swipe-nav { display: flex; align-items: center; gap: 0.9rem; margin: 0.9rem 9vw 0; padding: 0.3rem 0.3rem 0.3rem 1.1rem; border-radius: 999px; font-size: 0.78rem; color: var(--text-2); background: rgba(11,13,28,0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.swipe-dots { display: flex; gap: 5px; }
.swipe-dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.28); transition: width 0.3s var(--ease), background-color 0.3s; }
.swipe-dots i.is-active { width: 16px; background: var(--gold); }
.swipe-prev { display: none; }
.swipe-next { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; color: #fff; display: flex; align-items: center; justify-content: center; }
.swipe-nav.is-end .swipe-next { opacity: 0.35; }
.stats .swipe-nav { position: absolute; left: 0; right: 0; bottom: 0.55rem; margin: 0; padding: 0 var(--sheet-pad-x); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.stats { padding-bottom: 4.25rem; }

/* --- Location: two floating sheets --- */
.location-highlight { margin-top: 1rem; font-size: 1.3rem; line-height: 1.2; }
.location-highlight b { display: block; font-size: clamp(3rem, 12vw, 3.5rem); line-height: 1; margin-bottom: 0.3rem; }
#location .sheet-actions { margin-top: 1.6rem; }
#location .sheet-actions .btn { min-height: 56px; gap: 0.75rem; border-radius: 16px; font-size: 0.9rem; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); -webkit-backdrop-filter: none; backdrop-filter: none; }
#location .sheet-actions .btn::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
#location .sheet-actions .btn:nth-child(1) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
#location .sheet-actions .btn:nth-child(2) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4 20-7z'/></svg>"); }
#location .sheet--right { padding-top: 2.4rem; }
.location-list { border-top: 0; margin-top: 0.2rem; }
.location-list li { padding: 0.85rem 0; align-items: center; }
.location-list li:first-child { padding-top: 0.25rem; }
.location-list li span:first-child { font-size: 0.98rem; }
.location-list li span:last-child { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--gold); padding: 0.3rem 0.7rem; border: 1px solid rgba(201,175,134,0.35); border-radius: 999px; }

/* --- FAQ: quiet accordion, one open at a time --- */
#faq .t-h1 { color: var(--gold); }
.faq-list { margin-top: 1.5rem; border-top: 0; }
.faq-item { margin-bottom: 10px; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(255,255,255,0.03); transition: background-color 0.3s; }
.faq-item.is-open { background: rgba(255,255,255,0.07); }
.faq-trigger { padding: 1.05rem 0; min-height: 60px; gap: 1rem; }
.faq-trigger .question { font-family: var(--sans); font-size: 0.98rem; font-weight: 500; line-height: 1.35; }
.faq-trigger .icon { flex-basis: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); transition: background-color 0.3s; }
.faq-item.is-open .faq-trigger .icon { background: rgba(255,255,255,0.16); }
.faq-trigger .icon::before { width: 12px; }
.faq-trigger .icon::after { height: 12px; }
.faq-answer-inner { padding: 0 0.5rem 1.15rem 0; font-size: 0.92rem; line-height: 1.6; }

/* --- Final + footer: one long glass sheet, video still visible around it --- */
.sec-final {
  margin: var(--sec-gap) var(--gutter) 0; border-radius: var(--panel-r) var(--panel-r) var(--panel-r-b) var(--panel-r-b);
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28); overflow: hidden;
}
.final-inner { padding: 3.5rem var(--sheet-pad-x) 2.5rem; }
.final-mark { width: 60px; margin-bottom: 1.5rem; }
.final-lines { margin-top: 1.4rem; font-size: 1.2rem; }
.final-actions { flex-direction: column; width: 100%; margin-top: 2rem; gap: 0.7rem; }
.final-actions .btn { width: 100%; min-height: 56px; border-radius: 16px; padding-inline: 1.5rem; }
.final-meta { margin-top: 1.6rem; font-size: 0.82rem; }
.site-footer { padding: 2.5rem 0 2rem; }
.site-footer .container { padding-inline: var(--sheet-pad-x); }
.footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
.footer-brand { grid-column: auto; }
.footer-logo { width: 96px; }
.footer-summary { margin-top: 2.25rem; }
.footer-bottom { flex-direction: column; gap: 0.3rem; }
.footer-rera b { color: var(--gold); }

/* ==========================================================================
   Floating action dock
   ========================================================================== */
.mobile-bar {
  display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px;
  position: fixed; left: var(--dock-inset); right: var(--dock-inset); bottom: var(--dock-bottom); z-index: 90;
  height: var(--dock-h); padding: 0;
}
.mobile-bar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 0; height: 100%; border-radius: 18px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; color: #fff;
  background: rgba(11,13,28,0.72); border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 14px 36px rgba(0,0,0,0.3);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.mobile-bar-btn::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.mobile-bar-btn[href^="tel:"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.9 2z'/></svg>"); }
.mobile-bar-btn[href*="wa.me"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/><path d='M9 10.2c.3 1.6 1.7 3.2 3.3 3.7'/></svg>"); }
.mobile-bar-btn--primary { background: var(--cta); border-color: var(--cta); font-size: 0.86rem; }
.mobile-bar-btn--primary::before { display: none; }

/* ==========================================================================
   Modal as a booking sheet — follows the visual viewport when the keyboard
   opens (main.js writes --vv-top / --vv-h on phones)
   ========================================================================== */
.site-modal { padding: 0; align-items: flex-end; top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100dvh); }
.modal-container {
  max-width: none; max-height: 92dvh; max-height: min(92dvh, calc(var(--vv-h, 100dvh) - 4vh));
  padding: 2.4rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
  border-radius: var(--panel-r) var(--panel-r) 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,0.4);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.modal-container::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 48px; height: 5px; border-radius: 999px; background: rgba(22,23,27,0.14); }
.site-modal.is-lightbox .modal-container::before { background: rgba(255,255,255,0.18); }
.modal-close { top: 1.1rem; right: 1.1rem; width: 38px; height: 38px; font-size: 1.3rem; }
.modal-header { margin-bottom: 1.35rem; padding-right: 2.75rem; }
.modal-header .t-micro, .text-accent { color: #957B54; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.45rem; }
.modal-header h3, .t-h3 { font-size: 2rem; }
.modal-header .t-meta { margin-top: 0.6rem; font-size: 0.9rem; }

.lead-form { gap: 0.85rem; }
.form-group { gap: 0.45rem; }
.form-label { font-size: 0.86rem; }
.form-input { height: 56px; padding: 0 1.15rem; font-size: 1rem; border-radius: 18px; border-color: rgba(22,23,27,0.09); }
.form-input:focus { border-color: rgba(22,23,27,0.5); box-shadow: 0 0 0 3px rgba(22,23,27,0.06); }
.country-prefix { height: 56px; padding: 0 1rem; border-radius: 18px 0 0 18px; border-color: rgba(22,23,27,0.09); }
.phone-field { border-radius: 0 18px 18px 0; }
.segmented-control { grid-template-columns: 1fr 1fr 1fr; padding: 4px; border-radius: 18px; }
.segment-btn { min-height: 48px; border-radius: 14px; font-size: 0.86rem; }
.chip-btn { border-radius: 999px; }
.form-actions .btn, .form-actions-row .btn { min-height: 56px; border-radius: 16px; font-size: 0.92rem; }
.form-actions-row .btn-secondary { flex: 1 1 auto; }
.form-disclaimer { font-size: 0.76rem; }
.step-indicator .t-micro { display: block; font-size: 0.72rem; letter-spacing: 0.08em; color: #957B54; }
.visit-info-box { border-radius: 16px; padding: 1.1rem 1.2rem; }
.visit-info-box .t-micro { font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.success-actions { gap: 0.6rem; }
.success-actions .btn { flex: 1 1 100%; min-height: 54px; border-radius: 16px; }
.form-success-card { padding-top: 0.5rem; }
.modal-footer-action .btn { width: 100%; }

/* --- Floor plan / lightbox sheets --- */
.modal-media { border-radius: 16px; margin: 1.25rem 0; }

/* ==========================================================================
   Narrow phones (≤ 360px)
   ========================================================================== */
@media (max-width: 360px) {
  .brand-glass { height: 68px; padding: 0 16px; gap: 12px; }
  .brand-logo { height: 40px; }
  .brand-dev { height: 27px; }
  .menu-toggle { margin-top: 10px; }
  .hero-title-word { font-size: 2.45rem; }
  .stats > div { flex-basis: 74%; }
  .stats > div:last-child { flex-basis: calc(74% + var(--sheet-pad-x)); }
  .mobile-bar-btn { font-size: 0.7rem; }
  .mobile-bar-btn--primary { font-size: 0.8rem; }
  .segmented-control { grid-template-columns: 1fr 1fr 1fr; }
  .segment-btn { font-size: 0.8rem; padding: 0.5rem 0.25rem; }
}