:root {
  --ink: #132d2c;
  --deep: #092321;
  --cream: #f5efe4;
  --paper: #fffaf1;
  --red: #b94031;
  --gold: #e6b85e;
  --jade: #5f8c7d;
  --theme-accent: #f3b942;
  --theme-secondary: #b82322;
  --theme-deep: #001525;
  --theme-glow: rgba(24,111,172,.5);
  --theme-surface: #012b47;
  --theme-surface-soft: #681916;
  --theme-logo-position: center 50%;
  --theme-image: url('images/brand-themes/01-signature-ao-dai.png');
  --font-display: "Cormorant Garamond";
  --font-sans: "Manrope";
}

* { box-sizing: border-box; }
html { max-width:100%; scroll-behavior: smooth; overflow-x:hidden; }
body { max-width:100%; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans), sans-serif; overflow-x:hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 96px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5vw;
  color: white; border-bottom: 1px solid color-mix(in srgb,var(--theme-accent) 62%,transparent);
  background-color:var(--theme-deep);
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--theme-deep) 95%,transparent),color-mix(in srgb,var(--theme-surface) 74%,transparent) 48%,color-mix(in srgb,var(--theme-deep) 91%,transparent)),var(--theme-image);
  background-position:center,var(--theme-logo-position); background-size:cover,cover;
  box-shadow:0 8px 35px rgba(0,0,0,.28),0 1px 18px var(--theme-glow);
  transition:background-image .6s ease,border-color .4s ease,box-shadow .4s ease;
}
.site-header::before,footer::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; }
.site-header > *,footer > * { position:relative; z-index:1; }
.site-header[data-material="embroidered-silk"]::before,footer[data-material="embroidered-silk"]::after { background:radial-gradient(ellipse at 32% 0%,rgba(76,155,255,.42),transparent 46%),repeating-linear-gradient(108deg,transparent 0 5px,rgba(255,255,255,.12) 6px,transparent 7px 12px),repeating-linear-gradient(8deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px); mix-blend-mode:screen; opacity:.7; }
.site-header[data-material="embroidered-silk"],footer[data-material="embroidered-silk"] { box-shadow:inset 0 0 32px rgba(30,111,221,.34),0 1px 25px var(--theme-glow); }
.site-header[data-material="carved-ebony"]::before,footer[data-material="carved-ebony"]::after,.site-header[data-material="carved-teak"]::before,footer[data-material="carved-teak"]::after { background:repeating-radial-gradient(ellipse at 12% 140%,transparent 0 18px,rgba(222,148,64,.16) 20px,transparent 23px 42px),repeating-linear-gradient(2deg,rgba(255,207,126,.11) 0 1px,transparent 2px 8px,rgba(0,0,0,.24) 9px 12px); mix-blend-mode:soft-light; opacity:.82; }
.site-header[data-material="carved-ebony"],footer[data-material="carved-ebony"] { border-color:#9d693d; box-shadow:inset 0 0 28px #000,0 1px 22px rgba(108,44,118,.45); }
.site-header[data-material="carved-teak"],footer[data-material="carved-teak"] { border-color:#d49438; box-shadow:inset 0 0 32px #050301,0 1px 24px rgba(220,139,39,.5); }
.site-header[data-material="ruby-lacquer"]::before,footer[data-material="ruby-lacquer"]::after,.site-header[data-material="midnight-lacquer"]::before,footer[data-material="midnight-lacquer"]::after { background:linear-gradient(112deg,transparent 10%,rgba(255,255,255,.16) 31%,transparent 45%),radial-gradient(ellipse at 72% 10%,var(--theme-secondary),transparent 48%); mix-blend-mode:screen; opacity:.38; }
.site-header[data-material="jade-glass"]::before,footer[data-material="jade-glass"]::after { background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.2) 30%,transparent 42%),linear-gradient(90deg,rgba(18,119,95,.15),transparent 50%,rgba(228,187,100,.12)); mix-blend-mode:screen; opacity:.48; }
.site-header[data-material="coastal-pearl"]::before,footer[data-material="coastal-pearl"]::after { background:radial-gradient(ellipse at 18% -10%,rgba(255,242,218,.45),transparent 48%),linear-gradient(105deg,transparent 38%,rgba(255,223,177,.18),transparent 63%); mix-blend-mode:screen; opacity:.54; }
.site-header[data-material="orchid-blue"]::before,footer[data-material="orchid-blue"]::after { background:radial-gradient(circle at 18% 45%,rgba(91,148,218,.28),transparent 22%),radial-gradient(circle at 76% 35%,rgba(173,75,166,.25),transparent 24%),repeating-linear-gradient(100deg,transparent 0 10px,rgba(255,255,255,.045) 11px); mix-blend-mode:screen; opacity:.55; }
.site-header[data-material="navy-satin"]::before,footer[data-material="navy-satin"]::after { background:radial-gradient(ellipse at 26% -20%,rgba(33,130,188,.36),transparent 52%),repeating-linear-gradient(112deg,transparent 0 8px,rgba(255,255,255,.075) 9px,transparent 10px 18px); mix-blend-mode:screen; opacity:.58; }
.site-header[data-material="black-brass"]::before,footer[data-material="black-brass"]::after { background:linear-gradient(112deg,transparent 18%,rgba(242,188,89,.13) 38%,transparent 55%),repeating-radial-gradient(ellipse at 20% 120%,transparent 0 20px,rgba(255,196,92,.1) 22px,transparent 25px 46px); mix-blend-mode:screen; opacity:.58; }
.site-header[data-material="black-brass"],footer[data-material="black-brass"] { border-color:#bd8c3c; box-shadow:inset 0 0 35px #000,0 1px 22px rgba(214,157,60,.4); }
.site-header[data-material="sapphire-stone"]::before,footer[data-material="sapphire-stone"]::after { background:radial-gradient(ellipse at 18% 0%,rgba(76,154,224,.3),transparent 42%),repeating-linear-gradient(93deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px); mix-blend-mode:screen; opacity:.52; }
.brand-image-link { position:relative; display:block; width:310px; height:78px; overflow:hidden; flex:0 0 auto; }
.brand-image-link img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--theme-logo-position); transform:none; }
.dynamic-brand { border:1px solid color-mix(in srgb,var(--theme-accent) 70%,white 10%); border-radius:9px; background:var(--theme-deep); box-shadow:0 0 24px var(--theme-glow); }
.dynamic-brand::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,rgba(0,0,0,.18)); pointer-events:none; }
.site-header .dynamic-brand { width:320px; height:78px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-family: var(--font-display), serif; font-size: 25px; font-weight: 500; letter-spacing: .02em; }
.brand small { margin-top: 5px; color: var(--gold); font-size: 9px; letter-spacing: .35em; text-transform: uppercase; }
.brand-mark { position: relative; width: 40px; height: 46px; border: 1px solid var(--gold); border-radius: 50% 50% 44% 44%; box-shadow: inset 0 0 18px rgba(230,184,94,.18); }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:24px; height:1px; background:var(--gold); }
.brand-mark::before { top: 7px; } .brand-mark::after { bottom: 7px; }
.brand-mark i { position:absolute; left:50%; top:11px; width:1px; height:24px; background:var(--gold); }
.brand-mark b { position:absolute; left:50%; bottom:-8px; width:1px; height:8px; background:var(--gold); }
.site-header nav { display:flex; align-items:center; gap: 36px; font-size: 12px; letter-spacing:.11em; text-transform:uppercase; }
.site-header nav a { transition: color .25s, transform .25s; }
.site-header nav a:hover { color:var(--theme-accent); transform: translateY(-2px); text-shadow:0 0 18px var(--theme-glow); }
.nav-cta { border:1px solid color-mix(in srgb,var(--theme-accent) 72%,white 18%); padding:14px 22px; border-radius:50px; background:color-mix(in srgb,var(--theme-secondary) 34%,transparent); box-shadow:inset 0 0 18px color-mix(in srgb,var(--theme-glow) 55%,transparent); }
.menu-button { display:none; border:0; background:none; color:white; padding:10px; }

.hero { position:relative; min-height: 860px; height: 100vh; display:flex; align-items:center; color:white; background:url('images/rent-harmony-hero.png') center/cover no-repeat; overflow:hidden; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,24,28,.86) 0%, rgba(4,27,30,.6) 36%, rgba(4,17,20,.12) 70%), linear-gradient(0deg, rgba(3,19,20,.55), transparent 35%); }
.hero-content { position:relative; z-index:2; width:min(1180px,90%); margin: 60px auto 0; }
.eyebrow { margin:0 0 20px; color:#f4ce82; font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }
.eyebrow.red { color:var(--red); }
.hero h1, h2 { font-family:var(--font-display),serif; font-weight:400; margin:0; }
.hero h1 { max-width:820px; font-size:clamp(74px,8.2vw,132px); line-height:.86; letter-spacing:-.045em; }
.hero h1 > span { display:block; }
.hero-second-line { margin-top:.12em; line-height:1; }
.hero-second-line em { display:inline-block; color:#efc56f; background:linear-gradient(180deg,#fff0b4 0%,#e8b657 42%,#b8741f 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-family:"Cormorant Garamond",Georgia,serif; font-size:1.03em; font-style:italic; font-weight:600; letter-spacing:-.015em; text-shadow:0 3px 18px rgba(232,182,87,.2); filter:drop-shadow(0 1px 0 rgba(255,239,183,.2)); }
.hero-copy { max-width:560px; margin:36px 0 38px; font-family:var(--font-display),serif; font-size:23px; line-height:1.5; color:rgba(255,255,255,.86); }

.search-card { display:grid; grid-template-columns:1.15fr 1fr 1fr .75fr auto; width:min(1050px,100%); padding:10px; background:rgba(255,250,241,.95); color:var(--ink); border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,.24); backdrop-filter:blur(14px); }
.search-card label { padding:12px 20px; border-right:1px solid rgba(19,45,44,.14); }
.search-card label span { display:block; margin-bottom:6px; color:#7e887f; font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.search-card input, .search-card select { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; font-weight:600; }
.search-card button { border:0; border-radius:5px; padding:0 25px; color:white; background:var(--red); font-size:12px; font-weight:700; cursor:pointer; transition:.25s; }
.search-card button:hover { background:#8f2e24; transform:translateY(-2px); }
.scroll-cue { position:absolute; z-index:2; left:50%; right:auto; bottom:28px; display:flex; flex-direction:column; align-items:center; gap:9px; transform:translateX(-50%); font-size:9px; letter-spacing:.2em; text-align:center; text-transform:uppercase; }
.scroll-cue i { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.4); border-radius:50%; font-style:normal; }
.lantern-sky { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.floating-lantern { position:absolute; width:43px; height:58px; border:1px solid rgba(255,205,105,.88); border-radius:46% 46% 43% 43%; background:linear-gradient(90deg,rgba(117,20,17,.92),#f04c2d 45%,#b7241e 76%,#651410); box-shadow:0 0 18px rgba(255,80,40,.75),0 0 55px rgba(255,59,29,.45),inset 9px 0 10px rgba(255,196,83,.2),inset -9px 0 12px rgba(80,0,0,.26); opacity:.88; animation:lanternFloat 5.8s ease-in-out infinite; }
.floating-lantern::before { content:""; position:absolute; left:50%; top:-6px; width:23px; height:6px; transform:translateX(-50%); border-radius:3px 3px 0 0; background:#dfae51; box-shadow:0 63px 0 #c7913b; }
.floating-lantern::after { content:""; position:absolute; left:50%; top:63px; width:1px; height:25px; transform:translateX(-50%); background:#d7a648; box-shadow:-3px 7px 0 -1px #d7a648,3px 7px 0 -1px #d7a648; }
.lantern-one { right:7%; top:13%; }
.lantern-two { right:17%; top:27%; width:28px; height:39px; animation-delay:-2s; animation-duration:6.8s; }
.lantern-two::before { width:17px; box-shadow:0 44px 0 #c7913b; } .lantern-two::after { top:44px; height:18px; }
.lantern-three { right:26%; top:16%; width:22px; height:31px; animation-delay:-3.7s; background:linear-gradient(90deg,#8c3e09,#f0a72e 48%,#ad580c); box-shadow:0 0 22px rgba(255,172,46,.75); }
.lantern-three::before { width:14px; box-shadow:0 36px 0 #c7913b; } .lantern-three::after { top:36px; height:14px; }
.lantern-four { right:3%; top:46%; width:20px; height:28px; animation-delay:-1.1s; animation-duration:7.6s; }
.lantern-four::before { width:13px; box-shadow:0 33px 0 #c7913b; } .lantern-four::after { top:33px; height:13px; }
.lantern-five { right:21%; top:51%; width:15px; height:21px; animation-delay:-4.3s; animation-duration:8.2s; opacity:.62; }
.lantern-five::before { width:10px; top:-4px; height:4px; box-shadow:0 25px 0 #c7913b; } .lantern-five::after { top:25px; height:11px; }
@keyframes lanternFloat { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-15px) rotate(2deg); } }
.culture-signature { display:flex; align-items:center; gap:15px; margin-top:23px; color:rgba(255,255,255,.62); }
.signature-line { width:70px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.culture-signature p { margin:0; font:15px var(--font-display),serif; letter-spacing:.03em; }
.culture-signature b { color:#f1c773; font-weight:500; }
.culture-signature i { margin:0 7px; color:var(--red); font-style:normal; }

.apartment-finder { position:relative; overflow:hidden; background:#f1eadc; }
.apartment-finder::before { content:""; position:absolute; width:420px; height:420px; right:-160px; top:-180px; border:1px solid rgba(185,64,49,.14); border-radius:50%; box-shadow:0 0 0 50px rgba(185,64,49,.03),0 0 0 100px rgba(185,64,49,.02); }
.finder-heading { position:relative; display:flex; justify-content:space-between; align-items:end; max-width:1400px; margin:0 auto 58px; }
.finder-heading h2 { font-size:clamp(58px,6.5vw,98px); line-height:.86; letter-spacing:-.035em; }
.finder-heading h2 em { color:var(--red); font-weight:400; }
.finder-heading > p { max-width:480px; margin:0 0 8px; color:#66736e; font:20px/1.55 var(--font-display),serif; }
.route-strip { position:relative; max-width:1400px; margin:0 auto 35px; display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.route-line { position:absolute; left:4%; right:4%; top:13px; height:1px; background:linear-gradient(90deg,#72928a,var(--gold),var(--red)); opacity:.5; }
.route-strip button { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; border:0; padding:0 3px; background:none; color:#6f7975; font-size:9px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:.25s; }
.route-strip button i { display:grid; place-items:center; width:27px; height:27px; border:1px solid #8da09a; border-radius:50%; background:#f1eadc; color:#657e76; font:8px var(--font-sans),sans-serif; transition:.25s; }
.route-strip button:hover,.route-strip button.active { color:var(--red); transform:translateY(-3px); }
.route-strip button:hover i,.route-strip button.active i { color:white; background:var(--red); border-color:var(--red); box-shadow:0 0 0 5px rgba(185,64,49,.12); }
.finder-console { position:relative; max-width:1400px; margin:auto; border-radius:18px 18px 0 0; background:var(--ink); color:white; box-shadow:0 26px 80px rgba(19,45,44,.15); overflow:hidden; }
.finder-controls { display:grid; grid-template-columns:1.2fr .8fr auto; gap:0; padding:12px; }
.finder-controls label { min-height:76px; padding:14px 24px; border-right:1px solid rgba(255,255,255,.12); }
.finder-controls label span { display:block; margin-bottom:7px; color:#b7c8c1; font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.finder-controls select { width:100%; border:0; outline:0; background:transparent; color:white; font:500 23px var(--font-display),serif; cursor:pointer; }
.finder-controls select option { color:var(--ink); }
.finder-controls button { min-width:180px; display:flex; align-items:center; justify-content:center; gap:22px; border:0; border-radius:10px; background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:.3s; }
.finder-controls button b { font:28px var(--font-display),serif; }
.finder-controls button:hover { background:#f3cc82; transform:translateY(-2px); }
.finder-controls button.searching b { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.finder-status { display:flex; align-items:center; gap:10px; padding:14px 22px; background:#0b2423; border-top:1px solid rgba(255,255,255,.08); }
.finder-status .status-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(230,184,94,.12); }
.finder-status .status-dot.live { background:#64d59a; box-shadow:0 0 0 5px rgba(100,213,154,.13),0 0 15px #64d59a; }
.finder-status strong { font:500 16px var(--font-display),serif; }
.finder-status small { margin-left:auto; color:rgba(255,255,255,.52); font-size:10px; }
.finder-layout { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:.92fr 1.08fr; background:#fffaf1; box-shadow:0 28px 80px rgba(19,45,44,.12); }
.map-wrap { position:relative; min-height:620px; background:#123a3a; overflow:hidden; }
#apartmentMap { position:absolute; inset:0; }
.map-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; text-align:center; color:white; background:radial-gradient(circle at 62% 25%,#789e91 0 10%,transparent 11%),linear-gradient(145deg,#183f3c,#547e72 56%,#d7b162 57%,#254f4b 58%); }
.map-placeholder::before,.map-placeholder::after { content:""; position:absolute; width:120%; height:100px; left:-10%; bottom:18%; border-radius:50%; border-top:2px solid rgba(255,255,255,.22); transform:rotate(-7deg); }
.map-placeholder::after { bottom:9%; transform:rotate(4deg); }
.map-placeholder span { position:relative; z-index:1; display:grid; place-items:center; width:85px; height:85px; margin-bottom:20px; border:1px solid #f5cf82; border-radius:50%; background:rgba(8,35,34,.4); color:#f5cf82; font-size:35px; box-shadow:0 0 0 12px rgba(245,207,130,.08); }
.map-placeholder strong { position:relative; z-index:1; font:500 32px var(--font-display),serif; }
.map-placeholder small { position:relative; z-index:1; max-width:310px; margin-top:8px; color:rgba(255,255,255,.7); line-height:1.5; }
.map-ribbon { position:absolute; left:18px; bottom:18px; z-index:2; padding:10px 15px; border-radius:30px; background:rgba(7,31,30,.82); color:rgba(255,255,255,.58); font-size:8px; letter-spacing:.15em; backdrop-filter:blur(10px); }
.map-ribbon span { margin:0 12px; color:#f4ce82; font-weight:800; }
.apartment-results { padding:10px 30px; max-height:620px; overflow:auto; }
.apartment-results[aria-busy="true"] { opacity:.45; }
.apartment-card { position:relative; display:grid; grid-template-columns:48px 1fr 44px; gap:14px; align-items:center; min-height:125px; border-bottom:1px solid #ded8cc; transition:.25s; }
.apartment-card:hover { transform:translateX(6px); }
.apartment-number { display:grid; place-items:center; width:36px; height:36px; border:1px solid #c6beb0; border-radius:50%; color:var(--red); font:12px var(--font-display),serif; }
.apartment-copy > p { margin:0 0 3px; color:var(--red); font-size:7px; font-weight:800; letter-spacing:.16em; }
.live-result .apartment-copy > p { color:#3d8d69; }
.apartment-copy h3 { margin:0 0 3px; font:500 25px var(--font-display),serif; }
.apartment-copy > span { display:block; max-width:440px; overflow:hidden; color:#77807c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.rating { display:flex; gap:12px; margin-top:9px; font-size:10px; }
.rating b { color:#af7a20; } .rating small { color:#8a928e; }
.apartment-card > a { display:grid; place-items:center; width:38px; height:38px; border:1px solid #c8c0b2; border-radius:50%; color:var(--ink); transition:.25s; }
.apartment-card > a:hover { background:var(--red); border-color:var(--red); color:white; transform:rotate(12deg); }
.google-note { margin:0; padding:14px 30px; border-top:1px solid #e1dace; color:#969b98; font-size:8px; line-height:1.5; }

.section-pad { padding:120px 5vw; }
.section-heading { display:flex; justify-content:space-between; align-items:end; max-width:1400px; margin:0 auto 50px; }
.section-heading h2, .story h2 { font-size:clamp(58px,6.5vw,98px); line-height:.86; letter-spacing:-.035em; }
.section-heading h2 em { color:var(--red); font-weight:400; }
.section-heading > p { max-width:430px; margin:0 0 8px; color:#6a7772; font-family:var(--font-display),serif; font-size:20px; line-height:1.5; }
.notice { max-width:1400px; margin:-25px auto 28px; padding:13px 18px; background:#e9f1eb; border-left:3px solid var(--jade); font-size:13px; }
.stay-grid { max-width:1400px; margin:auto; display:grid; grid-template-columns:1.18fr .91fr .91fr; gap:22px; }
.stay-card { position:relative; min-height:520px; overflow:hidden; border-radius:160px 160px 10px 10px; background-image:linear-gradient(0deg,rgba(5,25,25,.82),transparent 58%),url('images/rent-harmony-hero.png'); background-size:auto,cover; box-shadow:0 20px 60px rgba(19,45,44,.12); transition:transform .45s, box-shadow .45s; }
.stay-card:hover { transform:translateY(-10px); box-shadow:0 28px 70px rgba(19,45,44,.2); }
.stay-hoian { background-position:center, 74% center; }
.stay-hanoi { background-position:center, 90% center; }
.stay-sea { background-position:center, 14% center; }
.heart { position:absolute; right:23px; top:27px; width:42px; height:42px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(8,30,30,.22); color:white; font-size:16px; cursor:pointer; backdrop-filter:blur(8px); transition:.25s; }
.heart:hover,.heart.liked { background:var(--red); border-color:var(--red); transform:scale(1.08); }
.stay-info { position:absolute; left:0; right:0; bottom:0; padding:32px; color:white; }
.stay-info > p { color:#f4ce82; margin:0 0 7px; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.stay-info h3 { margin:0 0 7px; font:500 31px var(--font-display),serif; }
.stay-info > span { color:rgba(255,255,255,.7); font-size:11px; }
.stay-info div { display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.25); font-size:12px; }
.stay-info a { color:#f4ce82; }

.places { display:grid; grid-template-columns:1fr 1fr; min-height:720px; background:var(--deep); color:white; overflow:hidden; }
.place-copy { display:flex; flex-direction:column; justify-content:center; padding:100px 7vw; }
.place-copy h2 { font-size:clamp(54px,5vw,84px); line-height:.92; }
.place-copy > p:not(.eyebrow) { max-width:560px; color:rgba(255,255,255,.66); font-family:var(--font-display),serif; font-size:21px; line-height:1.6; }
.place-copy a { width:max-content; margin-top:24px; padding-bottom:8px; border-bottom:1px solid var(--gold); color:#f4ce82; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.place-copy a span { margin-left:22px; }
.place-art { position:relative; min-height:620px; background:linear-gradient(#214f50,#739795 56%,#153c42 56%); overflow:hidden; }
.sun { position:absolute; width:180px; height:180px; top:100px; right:15%; border-radius:50%; background:#eecb83; box-shadow:0 0 80px #eecb8390; }
.mountain { position:absolute; bottom:44%; width:520px; height:330px; background:#173f3e; border-radius:70% 50% 0 0; transform:rotate(8deg); }
.mountain-a { left:-120px; } .mountain-b { right:-210px; height:420px; background:#285553; transform:rotate(-13deg); }
.wave { position:absolute; left:-10%; width:120%; height:120px; border-radius:50%; border-top:2px solid rgba(244,206,130,.35); }
.wave-a { bottom:110px; } .wave-b { bottom:35px; left:-25%; }
.boat { position:absolute; left:42%; bottom:125px; font:140px var(--font-display),serif; color:#e7b65d; transform:rotate(6deg); }

.story { max-width:1500px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; }
.story-intro > p:last-child { max-width:570px; color:#687672; font:21px/1.55 var(--font-display),serif; }
.values article { display:grid; grid-template-columns:65px 1fr; padding:34px 0; border-top:1px solid #d9d4c7; }
.values article > span { color:var(--red); font:16px var(--font-display),serif; }
.values h3 { margin:0 0 8px; font:500 31px var(--font-display),serif; }
.values p { grid-column:2; margin:0; color:#6b7773; font-size:13px; line-height:1.7; }

.closing { min-height:570px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:white; background:linear-gradient(rgba(9,35,33,.36),rgba(9,35,33,.86)),url('images/rent-harmony-hero.png') center 58%/cover; }
.closing h2 { font-size:clamp(65px,8vw,122px); }
.closing a { margin-top:30px; padding:15px 25px; border:1px solid rgba(255,255,255,.45); border-radius:40px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; transition:.25s; }
.closing a:hover { background:var(--red); border-color:var(--red); }

footer { position:relative; isolation:isolate; min-height:255px; padding:45px 5vw 28px; color:white; display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center; gap:35px; overflow:hidden; background-color:var(--theme-deep); background-image:linear-gradient(90deg,color-mix(in srgb,var(--theme-deep) 96%,transparent),color-mix(in srgb,var(--theme-surface) 76%,transparent) 54%,color-mix(in srgb,var(--theme-deep) 92%,transparent)),var(--theme-image); background-position:center,var(--theme-logo-position); background-size:cover,cover; border-top:1px solid color-mix(in srgb,var(--theme-accent) 64%,transparent); box-shadow:inset 0 18px 55px rgba(0,0,0,.45),0 -4px 30px var(--theme-glow); transition:background-image .6s ease,border-color .4s ease; }
footer::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--theme-glow) 34%,transparent),transparent 34%); }
footer > p { color:rgba(255,255,255,.76); font:22px var(--font-display),serif; text-shadow:0 2px 12px rgba(0,0,0,.7); }
footer > div { display:flex; justify-content:flex-end; gap:25px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
footer > div a:hover { color:var(--theme-accent); }
footer > small { grid-column:1/-1; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--theme-accent) 34%,transparent); color:rgba(255,255,255,.55); font-size:9px; letter-spacing:.1em; }
.footer-logo { width:330px; height:105px; }
.footer-logo img { width:100%; height:100%; transform:none; }

body.settings-open { overflow:hidden; }
.settings-gear { position:fixed; z-index:70; right:24px; right:max(24px,env(safe-area-inset-right)); bottom:24px; bottom:max(24px,env(safe-area-inset-bottom)); display:grid; place-items:center; width:54px; height:54px; border:1px solid color-mix(in srgb,var(--theme-accent) 76%,transparent); border-radius:50%; background:var(--theme-deep); background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--theme-surface) 80%,white 8%),var(--theme-deep)); color:var(--theme-accent); box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 17px color-mix(in srgb,var(--theme-glow) 68%,transparent),inset 0 0 13px rgba(255,255,255,.06); cursor:pointer; opacity:.88; transition:transform .28s ease,box-shadow .28s ease,opacity .28s ease,background .4s ease; -webkit-tap-highlight-color:transparent; }
.settings-gear::before { content:""; position:absolute; inset:4px; border:1px solid color-mix(in srgb,var(--theme-accent) 36%,transparent); border-radius:50%; }
.settings-gear span { position:relative; font-size:22px; line-height:1; filter:drop-shadow(0 0 5px var(--theme-glow)); transition:transform .5s ease; }
.settings-gear:hover,.settings-gear:focus-visible { transform:translateY(-3px) scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 25px var(--theme-glow); opacity:1; outline:none; }
.settings-gear:hover span { transform:rotate(75deg); }
.settings-gear.needs-tap::after { content:""; position:absolute; top:2px; right:2px; width:10px; height:10px; border:2px solid var(--theme-deep); border-radius:50%; background:#ed4a35; box-shadow:0 0 12px #ed4a35; }
.settings-backdrop { position:fixed; z-index:79; inset:0; background:rgba(0,8,12,.58); opacity:0; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:opacity .35s ease; }
.settings-backdrop.open { opacity:1; }
.settings-panel { position:fixed; z-index:80; top:0; right:0; width:min(520px,100vw); height:100vh; height:100dvh; color:#fff; background:var(--theme-deep); background:linear-gradient(145deg,color-mix(in srgb,var(--theme-deep) 98%,black),color-mix(in srgb,var(--theme-surface) 78%,black)); border-left:1px solid var(--theme-accent); border-left:1px solid color-mix(in srgb,var(--theme-accent) 58%,transparent); box-shadow:-25px 0 80px rgba(0,0,0,.5),-2px 0 24px var(--theme-glow); transform:translateX(104%); visibility:hidden; transition:transform .42s cubic-bezier(.22,.8,.22,1),visibility 0s linear .42s,background .5s ease; overflow:hidden; }
.settings-panel.open { transform:translateX(0); visibility:visible; transition:transform .42s cubic-bezier(.22,.8,.22,1),visibility 0s; }
.settings-panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.83)),var(--theme-image) center/cover; opacity:.16; }
.settings-panel-head,.settings-scroll { position:relative; z-index:1; }
.settings-panel-head { min-height:110px; display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid color-mix(in srgb,var(--theme-accent) 34%,transparent); background:rgba(0,0,0,.25); }
.settings-panel-head p,.settings-section-title p { margin:0 0 4px; color:var(--theme-accent); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.settings-panel-head h2 { margin:0; font:500 32px/1 var(--font-display),serif; }
.settings-panel-head > button { width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(0,0,0,.28); color:#fff; font:300 29px/1 var(--font-sans),sans-serif; cursor:pointer; }
.settings-panel-head > button:hover { color:var(--theme-accent); border-color:var(--theme-accent); }
.settings-scroll { height:calc(100% - 110px); padding:28px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.settings-scroll section + section { margin-top:42px; padding-top:36px; border-top:1px solid color-mix(in srgb,var(--theme-accent) 24%,transparent); }
.settings-section-title { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.settings-section-title > span { display:grid; place-items:center; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--theme-accent) 48%,transparent); border-radius:50%; color:var(--theme-accent); font:10px var(--font-sans),sans-serif; }
.settings-section-title h3 { margin:0; font:500 25px/1.05 var(--font-display),serif; }
.youtube-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid color-mix(in srgb,var(--theme-accent) 62%,transparent); border-radius:12px; background:#030405; box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--theme-glow) 45%,transparent); }
.youtube-frame iframe,.youtube-frame > div:first-child { width:100%!important; height:100%!important; border:0; }
.player-wait { position:absolute!important; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle,var(--theme-surface),var(--theme-deep)); color:#fff; }
.player-wait[hidden] { display:none!important; }
.player-wait b { color:var(--theme-accent); font:500 25px var(--font-display),serif; }
.player-wait span { margin-top:6px; color:rgba(255,255,255,.6); font-size:10px; }
.music-status { min-height:34px; margin:12px 0; color:rgba(255,255,255,.64); font-size:10px; line-height:1.6; }
.music-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.music-controls button { min-height:44px; border:1px solid color-mix(in srgb,var(--theme-accent) 38%,transparent); border-radius:8px; background:rgba(255,255,255,.055); color:#fff; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.music-controls button:hover,.music-controls button:focus-visible { border-color:var(--theme-accent); color:var(--theme-accent); outline:none; }
.volume-control { display:grid; grid-template-columns:auto 1fr 38px; align-items:center; gap:12px; margin:18px 0; color:rgba(255,255,255,.72); font-size:10px; }
.volume-control input { width:100%; accent-color:var(--theme-accent); cursor:pointer; }
.volume-control output { color:var(--theme-accent); text-align:right; }
.track-list { display:grid; gap:7px; }
.track { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; min-height:54px; padding:9px 12px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.035); color:#fff; text-align:left; cursor:pointer; transition:.22s ease; }
.track span { color:var(--theme-accent); font:12px var(--font-display),serif; }
.track b { font:500 15px var(--font-display),serif; }
.track i { color:rgba(255,255,255,.42); font-size:8px; font-style:normal; text-transform:uppercase; }
.track:hover,.track.active { border-color:color-mix(in srgb,var(--theme-accent) 65%,transparent); background:color-mix(in srgb,var(--theme-secondary) 20%,transparent); transform:translateX(3px); }
.auto-theme { width:100%; display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; column-gap:12px; padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.045); color:#fff; text-align:left; cursor:pointer; }
.auto-theme > span { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--theme-accent); color:var(--theme-deep); font-size:19px; }
.auto-theme b { align-self:end; font:500 17px var(--font-display),serif; }
.auto-theme i { color:rgba(255,255,255,.48); font-size:9px; font-style:normal; }
.auto-theme.active { border-color:var(--theme-accent); box-shadow:0 0 18px color-mix(in srgb,var(--theme-glow) 45%,transparent); }
.brand-help { color:rgba(255,255,255,.55); font-size:10px; line-height:1.6; }
.theme-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.theme-choice { position:relative; min-width:0; padding:0 0 11px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(0,0,0,.28); color:#fff; text-align:left; cursor:pointer; transition:.24s ease; }
.theme-choice img { display:block; width:100%; aspect-ratio:2.35/1; object-fit:cover; background:var(--theme-deep); }
.theme-choice span { display:inline-block; margin:9px 7px 0 10px; color:var(--theme-accent); font-size:8px; }
.theme-choice b { display:inline; font:500 12px var(--font-display),serif; }
.theme-choice i { position:absolute; top:7px; right:7px; display:none; padding:4px 6px; border-radius:20px; background:var(--theme-accent); color:var(--theme-deep); font-size:7px; font-style:normal; font-weight:800; text-transform:uppercase; }
.theme-choice:hover,.theme-choice.active { border-color:var(--theme-accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 14px color-mix(in srgb,var(--theme-glow) 40%,transparent); }
.theme-choice.active i { display:block; }

@media (max-width:900px) {
  .site-header { height:76px; height:calc(76px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 22px 0; }
  .brand-image-link { width:210px; height:58px; }
  .brand-image-link img { width:100%; height:100%; transform:none; }
  .site-header .dynamic-brand { width:215px; height:58px; border-radius:7px; }
  .brand strong { font-size:20px; } .brand-mark { width:32px; height:38px; }
  .menu-button { display:flex; flex-direction:column; gap:6px; }
  .menu-button span { display:block; width:25px; height:1px; background:white; }
  .site-header nav { position:absolute; top:76px; top:calc(76px + env(safe-area-inset-top)); left:0; right:0; max-height:0; overflow:hidden; padding:0 25px; align-items:stretch; flex-direction:column; gap:0; background:var(--theme-deep); background:color-mix(in srgb,var(--theme-deep) 94%,black); border-bottom:1px solid color-mix(in srgb,var(--theme-accent) 42%,transparent); box-shadow:0 18px 35px rgba(0,0,0,.32); transition:.35s; }
  .site-header nav.nav-open { max-height:400px; padding:18px 25px 25px; }
  .site-header nav a { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .nav-cta { border:0; border-radius:0; }
  .hero { height:auto; min-height:920px; min-height:max(920px,100svh); align-items:flex-end; background-position:62% center; }
  .hero-content { width:calc(100% - 36px); margin:0 auto 95px; }
  .hero h1 { font-size:clamp(64px,19vw,94px); line-height:.9; }
  .hero-second-line { margin-top:.16em; }
  .hero-copy { margin:25px 0; font-size:19px; }
  .search-card { grid-template-columns:1fr 1fr; padding:8px; }
  .search-card label { padding:11px 12px; border-bottom:1px solid rgba(19,45,44,.12); }
  .search-card input,.search-card select { width:100%; min-width:0; font-size:16px; }
  .search-card button { grid-column:1/-1; min-height:52px; margin-top:5px; }
  .scroll-cue { display:none; }
  .lantern-one { right:6%; top:15%; transform:scale(.72); transform-origin:top right; opacity:.72; }
  .lantern-two { right:21%; top:24%; opacity:.55; }
  .lantern-three { right:10%; top:34%; opacity:.5; }
  .lantern-four,.lantern-five { display:none; }
  .culture-signature { gap:10px; margin-top:18px; }
  .signature-line { width:35px; }
  .culture-signature p { font-size:13px; }
  .section-pad { padding:82px 20px; }
  .finder-heading { display:block; margin-bottom:38px; }
  .finder-heading h2 { font-size:58px; }
  .finder-heading > p { margin-top:24px; font-size:18px; }
  .route-strip { display:flex; gap:18px; margin-right:-20px; padding:10px 20px 18px 0; overflow-x:auto; scroll-snap-type:x mandatory; }
  .route-line { left:0; right:-300px; }
  .route-strip button { min-width:67px; scroll-snap-align:start; }
  .finder-controls { grid-template-columns:1fr; }
  .finder-controls label { min-height:auto; padding:14px 16px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .finder-controls select { font-size:21px; }
  .finder-controls button { min-height:58px; margin-top:8px; }
  .finder-status { align-items:flex-start; flex-wrap:wrap; }
  .finder-status small { width:100%; margin-left:18px; }
  .finder-layout { grid-template-columns:1fr; }
  .map-wrap { min-height:420px; }
  .apartment-results { max-height:none; padding:6px 15px; }
  .apartment-card { grid-template-columns:42px 1fr 38px; gap:8px; min-height:135px; }
  .apartment-copy h3 { font-size:22px; }
  .apartment-card > a { width:34px; height:34px; }
  .section-heading { display:block; margin-bottom:34px; }
  .section-heading h2,.story h2 { font-size:58px; }
  .section-heading > p { margin-top:24px; font-size:18px; }
  .stay-grid { grid-template-columns:1fr; gap:18px; }
  .stay-card { min-height:500px; border-radius:120px 120px 8px 8px; }
  .places { grid-template-columns:1fr; }
  .place-copy { padding:80px 24px; }
  .place-copy h2 { font-size:54px; }
  .place-art { min-height:480px; }
  .story { grid-template-columns:1fr; gap:40px; }
  .closing { min-height:520px; padding:30px 18px; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; }
  .footer-logo { width:min(340px,92vw); height:105px; margin:auto; }
  .footer-logo img { width:100%; }
  footer > div { justify-content:center; }
  footer > small { grid-column:auto; }
}

@media (max-width:600px) {
  .settings-gear { right:max(16px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); width:50px; height:50px; }
  .settings-gear span { font-size:20px; }
  .settings-panel { top:auto; bottom:0; width:100%; height:92vh; height:92dvh; border-top:1px solid var(--theme-accent); border-left:0; border-radius:22px 22px 0 0; transform:translateY(104%); }
  .settings-panel.open { transform:translateY(0); }
  .settings-panel-head { min-height:94px; padding:19px 20px; }
  .settings-panel-head h2 { font-size:29px; }
  .settings-scroll { height:calc(100% - 94px); padding:22px 18px max(34px,env(safe-area-inset-bottom)); }
  .theme-gallery { grid-template-columns:1fr; }
  .theme-choice img { aspect-ratio:2.7/1; }
  .theme-choice b { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}