/* Solmar — real-estate demo. Structure, type scale and spacing measured 1:1 from the free Framer template "Foreal"
   (1440px desktop · 390px phone). Only brand, house names and photos are new.
   Blocks follow the page order: 00 tokens · 01 hero · 02 listings · 03 about/features · 04 showreel · 05 locations
   · 06 reviews · 07 team · 08 faq · 09 inquiry · 10 footer · 11 tablet · 12 phone */

/* ---------- 00 tokens ---------- */
:root {
  --ink: #16232b;
  --gray: #4f5f69;
  --bg: #f8f8f8;
  --white: #fff;
  --light: #c7c7c7;
  --peach: #ffebc6;
  --peach-ink: #7e4b3a;
  --line: #dfe3e6;
  --blue: #c8dee6;
  --pad: 42px;
  --f-tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-inter: "Inter", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-brand: "Host Grotesk", "Inter Tight", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f-inter); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
section[id], header[id] { scroll-margin-top: 0; }

.h60 { font: 400 60px/60px var(--f-tight); letter-spacing: -2.4px; color: var(--ink); }
.h80 { font: 400 80px/80px var(--f-tight); letter-spacing: -3.2px; color: var(--ink); }
.h80 em, .cta em, .fleft em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.eyebrow { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--gray); }
.lead { font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; color: var(--gray); }
.c { text-align: center; }
.w { color: #fff; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 53px; padding: 0 36px; border-radius: 10px; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; transition: transform .25s ease, background .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn.center { display: flex; width: max-content; margin: 25px auto 0; }

/* reveal */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.done { transition: none; }

/* ---------- 01 hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #8cb4c9; color: #fff; }
.hero-slides, .hs { position: absolute; inset: 0; }
.hs { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease, transform 7s ease; transform: scale(1.04); }
.hs.is-on { opacity: 1; transform: scale(1); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 300px; background: linear-gradient(rgba(10, 25, 35, .22), transparent); z-index: 1; pointer-events: none; }
.nav { position: absolute; z-index: 5; top: 15px; left: var(--pad); right: var(--pad); display: flex; align-items: center; justify-content: space-between; height: 53px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.logo span { font: 700 25px/30px var(--f-brand); letter-spacing: -1.5px; }
.logo svg { margin-top: 1px; }
.nav-links { display: flex; gap: 58.5px; position: absolute; left: calc(32.92vw - var(--pad)); }
.roll { position: relative; display: block; height: 20px; overflow: hidden; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; color: #fff; }
.roll span { display: block; transition: transform .45s cubic-bezier(.6,0,.2,1); }
.roll span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.roll:hover span { transform: translateY(-100%); }
.hero-top { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: 115px; display: flex; justify-content: space-between; }
.hero-note, .hero-since { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: #fff; }
.hero-since { margin-top: 9px; }
.hero-rule { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: 161px; height: 1px; background: rgba(255,255,255,.35); }
.hero-title { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: 164px; margin: 0; font: 500 7vw/1.1427 var(--f-tight); letter-spacing: -0.04em; color: #fff; white-space: nowrap; }
.hero-title .serif { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.hero-title .br { display: none; }
.hero-title .w { display: inline-block; opacity: 0; transform: translateY(40px); animation: wordIn 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-title .w:nth-child(1) { animation-delay: .1s; } .hero-title .w:nth-child(2) { animation-delay: .22s; }
.hero-title .w:nth-child(3) { animation-delay: .34s; } .hero-title .w:nth-child(4) { animation-delay: .46s; }
@keyframes wordIn { to { opacity: 1; transform: none; } }
.hero-bottom { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 70px; height: 217px; pointer-events: none; }
.hero-bottom > * { pointer-events: auto; }
.hero-bottom .btn-dark { position: absolute; left: 0; bottom: 0; padding: 0 27px; }
.hcard { position: absolute; left: 50%; bottom: 0; width: 152px; height: 217px; margin-left: -76px; background: #fff; border-radius: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='217'%3E%3Cpath fill-rule='evenodd' d='M20 0H132a20 20 0 0 1 20 20V197a20 20 0 0 1-20 20H20a20 20 0 0 1-20-20V20A20 20 0 0 1 20 0zM22 8H130a14 14 0 0 1 14 14V102a14 14 0 0 1-14 14H22a14 14 0 0 1-14-14V22A14 14 0 0 1 22 8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='217'%3E%3Cpath fill-rule='evenodd' d='M20 0H132a20 20 0 0 1 20 20V197a20 20 0 0 1-20 20H20a20 20 0 0 1-20-20V20A20 20 0 0 1 20 0zM22 8H130a14 14 0 0 1 14 14V102a14 14 0 0 1-14 14H22a14 14 0 0 1-14-14V22A14 14 0 0 1 22 8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; transition: transform .35s ease; }
.hcard:hover { transform: translateY(-3px); }
.hcard-win { display: none; }
.hcard-body { position: absolute; inset: 0; color: var(--ink); }
.hcard-type { position: absolute; left: 14px; top: 131px; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; }
.hcard-sq { position: absolute; left: 14px; top: 151px; font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; color: var(--gray); }
.hcard-city { position: absolute; left: 14px; right: 14px; top: 186px; display: flex; justify-content: space-between; align-items: center; font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; color: var(--gray); }
.hcard-city svg { color: var(--ink); }
.hero-ctrl { position: absolute; right: 0; bottom: 0; width: 125px; }
.hero-arrows { display: flex; gap: 6px; height: 15px; color: #fff; margin-bottom: 15px; }
.harrow { color: #fff; display: block; opacity: .95; transition: transform .25s; }
.harrow:hover { transform: translateX(3px); }
.harrow[data-dir="-1"]:hover { transform: translateX(-3px); }
.hero-count { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: #fff; white-space: nowrap; }

/* mobile menu */
.burger { display: none; width: 40px; height: 40px; align-items: flex-end; justify-content: center; flex-direction: column; gap: 7px; padding-right: 2px; }
.burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, width .3s; }
.burger i:first-child { width: 14px; } .burger i:last-child { width: 29px; }
.menu { display: none; }

/* ---------- 02 listings ---------- */
.listings { background: var(--bg); padding: 80px var(--pad) 80px; }
.listings .eyebrow { text-align: center; }
.listings .h60 { text-align: center; margin-top: 8px; }
.filters { display: flex; justify-content: center; gap: 5px; margin-top: 20px; }
.chip { height: 29px; padding: 0 12px; border-radius: 10px; background: #fff; color: var(--gray); font: 600 14px/16.8px var(--f-inter); letter-spacing: -0.28px; transition: background .25s, color .25s; }
.chip.is-on { background: var(--ink); color: #fff; }
.lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 19.5px; margin-top: 25px; }
.lcard { background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease, opacity .35s; }
.lcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(22,35,43,.35); }
.lcard[hidden] { display: none; }
.lcard-img { position: relative; aspect-ratio: 439 / 314; overflow: hidden; }
.lcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lcard:hover .lcard-img img { transform: scale(1.04); }
.tags { position: absolute; top: 10px; right: 11px; display: flex; gap: 3px; }
.tag { height: 30px; display: inline-flex; align-items: center; border-radius: 10px; font: 600 14px/16.8px var(--f-inter); letter-spacing: -0.28px; }
.tag-type { background: var(--peach); color: var(--peach-ink); padding: 0 10px; }
.tag-kind { background: #fff; color: var(--ink); padding: 0 12px; }
.lcard-body { padding: 17px 14px 16px; }
.lcard-body h3 { font: 500 16px/20px var(--f-tight); letter-spacing: -0.32px; color: var(--ink); }
.loc { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; color: var(--gray); }
.loc svg, .dcard h3 svg { color: #9aa6ae; flex: none; }
.specs { display: flex; align-items: center; gap: 22px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; color: var(--gray); }
.sp { display: inline-flex; align-items: center; gap: 6px; }
.sp svg { color: #9aa6ae; }
.price { margin-left: auto; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--ink); }

/* ---------- 03 about / features ---------- */
.features { position: relative; background: linear-gradient(var(--blue) 30%, #fff 125%); padding: 176px var(--pad) 0; overflow: hidden; }
.bigword { position: absolute; left: 0; right: 0; top: 115px; text-align: center; font: 600 25.27vw/289px var(--f-tight); letter-spacing: -0.05em; color: #fff; opacity: .3; pointer-events: none; user-select: none; white-space: nowrap; }
.feat-head { position: relative; text-align: center; }
.feat-head .h80 { margin-top: 1px; }
.tower { position: absolute; z-index: 0; left: 12.2vw; bottom: 0; height: 115vw; pointer-events: none; }
.tower img { height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.feat-row { position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: 164px; height: 1220px; }
.feat-cards { width: 367px; display: flex; flex-direction: column; gap: 16px; }
.fcard { position: sticky; top: 50px; width: 367px; background: var(--ink); border-radius: 20px; padding: 6px 6px 35px; display: flex; flex-direction: column; gap: 30px; color: #fff; }
.fcard-img { width: 355px; height: 241px; border-radius: 14px; overflow: hidden; }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; }
.fcard-t { display: flex; justify-content: space-between; padding: 0 26px 0 20px; margin-bottom: -14px; }
.fcard-t h3, .fcard-t span { font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; }
.fcard-t span { color: var(--light); }
.fcard p { padding: 0 20px; font: 400 16px/24px var(--f-inter); letter-spacing: -0.96px; color: var(--light); }
.feat-text { width: 370px; }
.feat-text-in { position: sticky; top: 50px; }
.feat-text .h60 { margin-top: 17px; }
.feat-text .lead { margin-top: 20px; }
.stories { display: flex; align-items: center; margin-top: 21px; }
.avs { display: flex; align-items: center; margin-left: 2px; }
.avs img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #eee; margin-right: -20px; }
.av-go { width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin-left: 0; font-style: normal; transition: transform .3s; }
.stories:hover .av-go { transform: translateX(4px); }
.stories-t { margin-left: 16px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--gray); }
.stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 19.5px; margin-top: 89px; }
.stat { position: relative; height: 292px; border-radius: 19px; overflow: hidden; padding: 28px 0 0 28px; }
.stat > img { position: absolute; top: 0; right: 0; height: 100%; width: 68%; object-fit: cover; }
.stat-a { background: #c6e0e8; }
.stat-a > img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.stat-b { background: #fff; }
.stat-b > img { width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.stat-c { background: #0f1a1f; color: #fff; }
.stat-c > img { width: 100%; opacity: .85; }
.stat > *:not(img) { position: relative; }
.num { display: flex; align-items: baseline; font: 400 67px/67px var(--f-inter); color: var(--ink); }
.num b { font-weight: 400; letter-spacing: -1px; }
.num i { font: 400 60px/60px var(--f-tight); letter-spacing: -2.4px; font-style: normal; margin-left: 4px; }
.stat h4 { margin-top: 4px; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; color: var(--ink); }
.sd { position: absolute !important; left: 28px; bottom: 36px; font: 400 16px/24px var(--f-inter); letter-spacing: -0.96px; color: var(--gray); }
.stat-c .num, .stat-c h4 { color: #fff; }
.stat-c .sd { color: var(--bg); }
.cats { position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: 47px; }
.cats a { display: inline-flex; align-items: center; gap: 13px; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; color: var(--ink); }
.cats a svg { color: #9aa6ae; }
.cats a.all { color: var(--gray); }
.cats a.all svg { color: var(--ink); }
.cats a:hover { opacity: .6; }
.rule { position: relative; z-index: 2; height: 1px; background: var(--line); margin-top: 43px; }

/* ---------- 04 showreel ---------- */
.showreel { background: var(--bg); padding: 80px var(--pad) 48px; }
.showreel .h80 { margin-top: 3px; }
.vcard { position: relative; height: 654px; margin-top: 36px; border-radius: 20px; overflow: hidden; background: #cfd9de; }
.vid { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(60, 66, 70, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; transition: transform .3s, background .3s; }
.play:hover { transform: scale(1.08); background: rgba(22,35,43,.75); }
.play svg { margin-left: 2px; }
.vcard.playing .play { opacity: 0; pointer-events: none; }

/* ---------- 05 locations ---------- */
.hoods { background: var(--bg); padding: 90px var(--pad) 70px; }
.hoods-head { display: flex; justify-content: space-between; align-items: flex-end; }
.hoods-head .h60 { margin-top: 4px; }
.hoods-head .lead { width: 311px; }
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 19.5px; margin-top: 32px; }
.dcard { background: #fff; border-radius: 20px; overflow: hidden; padding-bottom: 24px; transition: transform .35s ease, box-shadow .35s; }
.dcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(22,35,43,.35); }
.dimg { aspect-ratio: 439 / 305; overflow: hidden; }
.dimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dcard:hover .dimg img { transform: scale(1.05); }
.dcard h3 { display: flex; align-items: center; gap: 8px; margin: 20px 0 0 24px; font: 500 18px/20px var(--f-tight); letter-spacing: -0.36px; color: var(--ink); }
.dcard p { margin: 12px 24px 0; font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; color: var(--gray); }

/* ---------- 06 reviews ---------- */
.reviews { background: var(--bg); padding: 80px 0 53px; overflow: hidden; }
.reviews .h60 { margin-top: 4px; }
.rwrap { margin-top: 32px; }
.rtrack { display: flex; gap: 10px; width: max-content; transition: transform .9s cubic-bezier(.3,.7,.2,1); will-change: transform; }
.rcard { position: relative; flex: none; width: 374px; height: 553px; padding: 28px; border-radius: 20px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.rcard h4 { width: 238px; font: 400 30px/36px var(--f-tight); letter-spacing: -0.6px; color: var(--ink); }
.rav { position: absolute; top: 28px; right: 28px; width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.rtxt { margin-top: auto; font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; color: var(--gray); }
.rwho { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--ink); }
.rwho span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.rwho svg { color: currentColor; opacity: .6; }
.rvid { padding: 0; }
.rposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rshade { position: absolute; left: 0; right: 0; bottom: 0; height: 125px; background: linear-gradient(rgba(21,34,43,.12) 42.9%, #16232b 230%); }
.rvid .rwho { position: absolute; left: 32px; right: 32px; bottom: 28px; margin: 0; color: #fff; }
.rvid .play { top: 232px; margin-top: 0; }
.play.sm { width: 62px; height: 62px; }
.dots { display: flex; gap: 10px; width: 110px; height: 30px; border-radius: 44px; align-items: center; justify-content: center; margin: 12px auto 0; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: .3; cursor: pointer; transition: opacity .3s; }
.dots i.on { opacity: 1; }

/* ---------- 07 team ---------- */
.team { position: relative; padding: 80px var(--pad) 0; height: 1153px; overflow: hidden; background: #9fc3d4 url("/assets/img/teambg.webp?v=20261016a") center / cover no-repeat; }
.team-word { top: 55px; left: 110px; right: 110px; font-size: 25.27vw; line-height: 436px; opacity: .25; text-align: center; }
.team .eyebrow, .team .h60 { position: relative; }
.team .h60 { margin-top: 4px; }
.trow { position: relative; display: flex; gap: 20px; align-items: flex-start; margin-top: 60px; }
.tm { width: 259px; flex: none; }
.tm img { width: 100%; height: 297px; object-fit: cover; border-radius: 20px; background: #eee; }
.tm figcaption { margin-top: 20px; display: flex; flex-direction: column; color: var(--ink); }
.tm b { font: 600 14px/16.8px var(--f-inter); letter-spacing: -0.28px; }
.tm span { font: 400 14px/16.8px var(--f-inter); letter-spacing: -0.56px; }
.tm-col { width: 250px; flex: none; }
.tm-intro { width: 200px; font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; color: var(--ink); }
.tm-b { width: 250px; margin-top: 59px; }
.tm-b img, .tm-m img { height: 287px; }
.tm-m { width: 250px; }

/* ---------- 08 faq ---------- */
.faq { background: var(--bg); padding: 80px var(--pad); display: grid; grid-template-columns: 4fr 5fr; align-items: start; min-height: 628px; }
.faq-l .h60 { margin-top: 5px; width: 294px; }
.faq-l .stories { margin-top: 45px; }
.q { background: #fff; border-radius: 20px; margin-bottom: 12px; }
.q:last-child { margin-bottom: 0; }
.q-h { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 32px 35px 32px 36px; text-align: left; }
.q-h h3 { font: 500 24px/20px var(--f-tight); letter-spacing: -0.48px; color: var(--ink); }
.q-h svg { flex: none; transition: transform .4s cubic-bezier(.6,0,.2,1); color: var(--ink); }
.q.open .q-h svg { transform: rotate(-90deg); }
.q-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.6,0,.2,1); }
.q.open .q-a { grid-template-rows: 1fr; }
.q-a > p { overflow: hidden; padding: 0 36px; font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; color: var(--gray); }
.q.open .q-a > p { padding: 0 36px 32px; }
.q-a { }

/* ---------- 09 inquiry + cta ---------- */
.inquiry { position: relative; padding: 80px var(--pad) 80px; background: #4a8fa8 url("/assets/img/formbg.webp?v=20261016a") center / cover no-repeat; overflow: hidden; }
.inquiry .h60 { margin-top: 4px; }
.fbox { position: relative; width: 754px; max-width: 100%; margin: 32px auto 0; padding: 6px; border-radius: 20px; background: #fff; display: flex; gap: 38px; min-height: 608px; }
.fhole { position: absolute; left: 6px; top: 6px; width: 362px; bottom: 6px; border-radius: 14px; overflow: hidden; }
.fhole img { position: absolute; max-width: none; object-fit: cover; }
.fleft { position: relative; width: 362px; flex: none; padding: 30px 116px 0 37px; color: #fff; }
.fleft h3 { font: 400 30px/36px var(--f-tight); letter-spacing: -0.6px; }
.fleft h3 span { display: block; }
.fleft em { display: block; font-size: 30px; line-height: 28px; letter-spacing: -0.6px; }
.fright { flex: 1; padding: 35px 40px 36px 0; }
.fintro { font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; color: var(--gray); }
.fright label { display: block; margin-top: 18px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--ink); }
.fright label:nth-of-type(1) { margin-top: 25px; }
.fright input, .fright textarea { display: block; width: 100%; height: 48px; margin-top: 2px; padding: 0; border: 0; border-bottom: 1px solid rgba(4,19,25,.54); border-radius: 0; background: none; outline: none; font: 400 14px/18px var(--f-inter); color: var(--ink); transition: border-color .25s; }
.fright textarea { height: 100px; padding-top: 14px; resize: vertical; }
.fright input::placeholder, .fright textarea::placeholder { color: rgba(4,19,25,.54); }
.fright input:focus, .fright textarea:focus { border-bottom-color: var(--ink); }
.submit { display: block; width: 100%; height: 53px; margin-top: 18px; border-radius: 10px; background: var(--ink); color: #fff; font: 400 16px/24px var(--f-inter); letter-spacing: -0.96px; transition: transform .25s; }
.submit:hover { transform: translateY(-2px); }
.thanks { margin-top: 14px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.5px; color: var(--ink); }
.cta { margin-top: 80px; text-align: center; font: 400 80px/80px var(--f-tight); letter-spacing: -3.2px; color: #fff; }

/* ---------- 10 footer ---------- */
.foot { position: relative; background: var(--ink); color: var(--bg); padding: 80px var(--pad) 0; height: 506px; overflow: hidden; }
.foot-word { position: absolute; left: 0; right: 0; text-align: center; top: 118px; font: italic 400 30vw/182px var(--f-serif); letter-spacing: -0.04em; color: rgba(4,19,25,.54); pointer-events: none; white-space: nowrap; user-select: none; }
.foot-grid { position: relative; display: grid; grid-template-columns: 482fr 579fr 295fr; }
.fl li { margin-bottom: 8.3px; line-height: 17px; }
.fl a { display: block; }
.fl a, .soc a { font: 500 14px/17px var(--f-inter); letter-spacing: -0.84px; color: var(--light); transition: color .25s; }
.fl a:hover, .soc a:hover { color: #fff; }
.fm p { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--bg); }
.fm .hrs { margin-top: 21px; }
.soc { margin-top: 64px; }
.soc li { margin-bottom: 11px; }
.fr h2 { font: 400 30px/36px var(--f-tight); letter-spacing: -0.6px; color: var(--bg); }
.nl { display: flex; align-items: center; height: 47px; margin-top: 10px; border-bottom: 1px solid #fff; }
.nl input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 400 16px/20px var(--f-inter); }
.nl input::placeholder { color: rgba(255,255,255,.85); }
.nl button { width: 38px; height: 40px; color: #fff; display: grid; place-items: center; }
.lab { margin-top: 22px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: var(--light); }
.nl + .lab { margin-top: 22px; }
.val { margin-top: 2px; font: 500 14px/17px var(--f-inter); letter-spacing: -0.84px; color: var(--light); }
.mail { margin-top: 0; font: italic 400 30px/39px var(--f-serif); letter-spacing: -0.6px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-rule { position: absolute; left: var(--pad); right: var(--pad); top: 414px; height: 1px; background: rgba(255,255,255,.2); }
.foot-bottom { position: absolute; left: var(--pad); right: var(--pad); top: 441px; display: flex; justify-content: space-between; align-items: center; height: 30px; }
.fb-l { display: flex; align-items: center; gap: 12px; }
.copy { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; color: #fff; }
.credit { font: 500 14px/17px var(--f-inter); letter-spacing: -0.84px; color: var(--light); transition: color .25s; }
.credit:hover { color: #fff; }
.fb-l .logo span:first-of-type { }

/* ---------- 11 tablet ---------- */
@media (max-width: 1199px) {
  :root { --pad: 30px; }
  .h60 { font-size: 48px; line-height: 48px; letter-spacing: -1.92px; }
  .h80 { font-size: 64px; line-height: 64px; letter-spacing: -2.56px; }
  .cta { font-size: 64px; line-height: 64px; letter-spacing: -2.56px; }
  .nav-links { gap: 34px; position: static; }
  .lgrid, .hgrid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { top: 150px; }
  .feat-row { height: auto; flex-direction: column; margin-top: 90px; gap: 60px; }
  .feat-cards { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .fcard { position: relative; top: 0; width: calc(50% - 8px); }
  .fcard-img { width: 100%; }
  .feat-text { width: 100%; max-width: 560px; }
  .feat-text-in { position: static; }
  .tower { display: none; }
  .stats { grid-template-columns: 1fr; gap: 16px; }
  .vcard { height: 54vw; }
  .trow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
  .tm, .tm-col, .tm-b, .tm-m { width: 100%; }
  .tm img, .tm-b img, .tm-m img { height: 24vw; }
  .tm-b { margin-top: 20px; }
  .tm-intro { width: 100%; max-width: 240px; }
  .team { height: auto; padding-bottom: 80px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .foot { height: auto; padding-bottom: 130px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .fr { grid-column: 1 / -1; }
  .foot-rule { top: auto; bottom: 90px; }
  .foot-bottom { top: auto; bottom: 30px; }
}

/* ---------- 12 phone ---------- */
@media (max-width: 809px) {
  :root { --pad: 30px; }
  .h60 { font-size: 42px; line-height: 41px; letter-spacing: -1.68px; }
  .h80 { font-size: 51px; line-height: 51px; letter-spacing: -2.04px; }
  .cta { font-size: 51px; line-height: 51px; letter-spacing: -2.04px; }
  .lead { font-size: 16px; line-height: 22.4px; letter-spacing: -0.8px; }
  .btn { font-size: 16px; letter-spacing: -0.32px; }
  .nav { top: 15px; height: 40px; }
  .nav-links, .nav .btn-white { display: none; }
  .burger { display: flex; }
  .menu { position: fixed; z-index: 30; inset: 0; background: rgba(22,35,43,.96); color: #fff; flex-direction: column; justify-content: center; gap: 22px; padding: 0 30px; }
  .menu.open { display: flex; }
  .menu a { font: 400 42px/41px var(--f-tight); letter-spacing: -1.68px; }
  .menu .x { position: absolute; top: 18px; right: 28px; font: 400 16px/20px var(--f-tight); }
  .hero { min-height: 520px; }
  .hero-top { top: 85px; }
  .hero-rule { top: 132px; }
  .hero-title { top: 149px; font-size: 10.64vw; line-height: 53px; text-align: center; white-space: normal; }
  .hero-bottom { height: 133px; bottom: 94px; }
  .hero-bottom .btn-dark { left: 50%; margin-left: -80px; width: 160px; padding: 0; }
  .hcard-city { left: auto; right: 16px; top: 33px; }
  .hcard-city [data-hc] { display: none; }
  .hcard { left: 50%; margin-left: -80px; width: 160px; height: 65px; top: 0; bottom: auto; border-radius: 10px; -webkit-mask: none; mask: none; }
  .hcard-type { left: 18px; top: 14px; font-size: 16px; letter-spacing: -0.32px; }
  .hcard-sq { left: 18px; top: 34px; }
  .hero-ctrl { display: none; }
  .listings { padding: 40px var(--pad) 40px; }
  .lgrid { grid-template-columns: 1fr; gap: 15px; }
  .lcard-img { aspect-ratio: 333 / 236; }
  .lcard-body { padding-left: 16px; padding-right: 16px; }
  .features { padding-top: 60px; }
  .bigword { top: 62px; font-size: 27vw; line-height: 95px; }
  .hero-title .br { display: block; height: 0; }
  .feat-head .h80 { }
  .feat-row { margin-top: 70px; gap: 32px; }
  .fcard { width: 100%; }
  .tower { display: none; }
  .stats { margin-top: 50px; }
  .stat > img { width: 52%; }
  .stat-b > img { width: 48%; }
  .stat-c > img { width: 100%; }
  .cats { flex-wrap: wrap; gap: 14px 30px; justify-content: flex-start; margin-top: 40px; }
  .cats a { font-size: 16px; letter-spacing: -0.32px; }
  .showreel { padding: 40px var(--pad); }
  .vcard { height: 40.8vw; margin-top: 30px; }
  .hoods { padding: 40px var(--pad); }
  .hoods-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hoods-head .lead { width: 100%; }
  .hgrid { grid-template-columns: 1fr; gap: 17px; }
  .reviews { padding-top: 40px; }
  .rcard { width: 330px; height: 553px; }
  .rcard h4 { font-size: 22px; line-height: 27px; letter-spacing: -0.44px; width: 194px; }
  .rtxt { font-size: 16px; line-height: 22.4px; letter-spacing: -0.8px; }
  .team { padding-top: 40px; }
  .trow { flex-direction: column; gap: 20px; margin-top: 30px; }
  .tm, .tm-col, .tm-b, .tm-m { width: 100%; }
  .tm img, .tm-b img, .tm-m img { height: 379px; }
  .tm-intro { display: none; }
  .tm-b { margin-top: 0; }
  .faq { padding: 40px var(--pad); }
  .faq-l .h60 { width: 100%; }
  .q-h { padding: 32px 28px 32px 36px; }
  .q-h h3 { font-size: 18px; line-height: 20px; letter-spacing: -0.36px; }
  .inquiry { padding: 40px var(--pad); }
  .fbox { flex-direction: column; min-height: 0; gap: 0; }
  .fhole { display: none; }
  .fleft { display: none; }
  .fright { padding: 30px 33px 33px; }
  .cta { margin-top: 40px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-word { font-size: 40vw; }
  .fr h2 { font-size: 22px; line-height: 27px; letter-spacing: -0.44px; }
  .mail { font-size: 22px; line-height: 29px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; bottom: 20px; }
  .foot-rule { bottom: 120px; }
  .foot { padding-bottom: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-title .w { animation: none; opacity: 1; transform: none; }
  .hs { transition: opacity .01s; transform: none; }
}

/* review "video" cards: play = slow push-in on the still (demo, no footage) */
.rvid.playing .rposter { animation: kb 9s ease-out forwards; }
.rvid.playing .play { opacity: 0; pointer-events: none; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* ---------- 13 scroll film (hero) ---------- */
.intro { position: relative; height: 240vh; }
.intro .hero { position: sticky; top: 0; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #9db7c8; transition: opacity .25s linear; }
.film.off { opacity: 0; pointer-events: none; }
.js-film .hero-top, .js-film .hero-rule, .js-film .hero-title, .js-film .hero-bottom { opacity: var(--u, 0); transform: translateY(calc((1 - var(--u, 0)) * 28px)); }
.js-film .hero-title .w { animation: none; opacity: 1; transform: none; }
.js-film .hero:not(.ui-on) .hero-bottom { pointer-events: none; }
.scrollhint { position: absolute; z-index: 4; left: 50%; bottom: 32px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; color: #fff; opacity: var(--h, 1); pointer-events: none; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; text-shadow: 0 1px 12px rgba(10,25,35,.35); }
.js-film .scrollhint { display: flex; }
.scrollhint i { width: 24px; height: 38px; border: 1.5px solid #fff; border-radius: 14px; position: relative; }
.scrollhint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .intro { height: auto; } .intro .hero { position: relative; } .film, .scrollhint { display: none; } }
@media (max-width: 809px) { .intro { height: 220vh; } .scrollhint { bottom: 28px; } }

/* ---------- 14 preloader + welcome phrases ---------- */
.preloader { position: fixed; inset: 0; z-index: 100; background: #d9694a; color: #fff; display: grid; place-content: center; justify-items: center; gap: 14px; transition: opacity .7s cubic-bezier(.2,.7,.2,1), visibility .7s; }
.preloader svg { width: 54px; height: 54px; animation: spin 1.2s cubic-bezier(.65, 0, .35, 1) infinite; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.preloader span { font: 700 18px/20px var(--f-brand); letter-spacing: .3em; padding-left: .3em; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader.is-done svg { transform: scale(.8); }
@keyframes spin { to { rotate: 360deg; } }
html:has(.preloader:not(.is-done)) { overflow: hidden; }
.welcome { display: none; position: absolute; z-index: 4; left: var(--pad); right: var(--pad); top: 21vh; text-align: center; color: #fff; opacity: var(--w, 1); transform: translateY(calc((1 - var(--w, 1)) * -36px)); pointer-events: none; text-shadow: 0 2px 40px rgba(10, 30, 45, .38); }
.js-film .welcome { display: block; }
.eyebrow-w { font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; }
.welcome-t { margin: 8px auto 0; font: 400 80px/80px var(--f-tight); letter-spacing: -3.2px; }
.welcome-p { max-width: 560px; margin: 18px auto 0; font: 400 18px/25.2px var(--f-inter); letter-spacing: -0.9px; }
.welcome-s { margin-top: 22px; font: 500 14px/18.2px var(--f-inter); letter-spacing: -0.84px; opacity: .85; }
.scrollhint span { font: 500 15px/20px var(--f-inter); letter-spacing: -0.3px; }
@media (max-width: 1199px) { .welcome-t { font-size: 64px; line-height: 64px; letter-spacing: -2.56px; } }
@media (max-width: 809px) { .welcome { top: 17vh; } .welcome-t { font-size: 51px; line-height: 51px; letter-spacing: -2.04px; } .welcome-p { font-size: 16px; line-height: 22.4px; letter-spacing: -0.8px; max-width: 330px; } }
@media (prefers-reduced-motion: reduce) { .preloader svg { animation: none; } .welcome { display: none !important; } }

/* phone: comfortable tap targets (≥40px) */
@media (max-width: 809px) {
  .chip { height: 40px; padding: 0 16px; }
  .cats a { min-height: 44px; }
  .fl li { margin-bottom: 0; }
  .fl a, .soc a, .credit, .nl button { display: flex; align-items: center; min-height: 40px; }
  .soc { margin-top: 12px; } .soc li { margin-bottom: 0; }
  .foot-bottom .credit { min-height: 32px; }
  .q-h { min-height: 64px; }
}
@media (max-width: 809px) and (max-height: 480px) { .welcome { top: 14vh; } .welcome-t { font-size: 40px; line-height: 40px; } .welcome-p { display: none; } }