@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
img, video, svg { display:block; max-width:100%; height:auto; }
ul, ol { list-style:none; }

:root { --font-body:'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; --font-lora-family:'Lora', Georgia, serif; --navy:#09263f; --navy2:#061a29; --cream:#f5f1e8; --paper:#fbf8f1; --gold:#c89b4b; --gold2:#e7c77f; --ink:#10212c; --muted:#68747b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.section { position:relative; padding:clamp(82px,10vw,150px) clamp(22px,7vw,110px); }
.section-label { display:flex; gap:13px; align-items:center; font-size:10px; font-weight:800; letter-spacing:.18em; color:#637078; margin-bottom:72px; }
.section-label span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #aab0af; border-radius:50%; color:#89651f; letter-spacing:0; }
.section-label p { margin:0; }
.section-label.light { color:#afbdc3; }
.section-label.light span { border-color:#536875; color:var(--gold2); }
.eyebrow { margin:0 0 20px; color:#e6c37c; font-size:11px; font-weight:800; letter-spacing:.2em; line-height:1.4; }
.eyebrow.dark { color:#8f671e; }
h1,h2 { font-family:var(--font-lora-family),Georgia,serif; }
h2 { font-weight:500; letter-spacing:-.018em; line-height:1.1; font-size:clamp(42px,5.4vw,76px); margin:0; }
h2 em { color:#a77927; font-weight:400; }
p { line-height:1.7; }
.site-header { position:fixed; z-index:60; inset:0 0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 clamp(24px,5vw,80px); color:white; background:rgba(4,21,34,.76); border-bottom:1px solid rgba(255,255,255,.16); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 8px 30px rgba(2,15,24,.12); }
.site-header nav { display:flex; gap:34px; margin-left:auto; }
.site-header nav a { font-size:13px; color:rgba(255,255,255,.75); transition:.2s; }
.site-header nav a:hover { color:white; }
.brand { font-weight:700; letter-spacing:.04em; line-height:1; min-width:max-content; }
.brand span { display:block; font-size:9px; letter-spacing:.34em; color:#e1bd73; margin-bottom:5px; }
.header-cta,.primary-cta,.submit-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#091d2b; font-weight:800; border-radius:999px; transition:transform .2s,background .2s; }
.header-cta:hover,.primary-cta:hover,.submit-cta:hover { transform:translateY(-2px); background:#d7ad5e; }
.header-cta { padding:12px 22px; }
.hero { min-height:100svh; position:relative; color:white; display:flex; align-items:flex-end; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,20,34,.93) 0%,rgba(3,20,34,.61) 48%,rgba(3,20,34,.08) 100%),linear-gradient(0deg,rgba(3,20,34,.8),transparent 62%); }
.hero-content { position:relative; z-index:2; width:min(780px,90vw); margin:0 0 clamp(40px,7vh,86px) clamp(24px,7vw,110px); }
h1 { margin:0; font-size:clamp(34px,4.4vw,64px); line-height:1.1; letter-spacing:-.015em; font-weight:500; }
h1 em { color:#e6c37c; font-weight:400; font-style:normal; }
.hero-copy { max-width:620px; margin:30px 0 20px; font-size:clamp(17px,1.7vw,22px); line-height:1.65; color:rgba(255,255,255,.82); }
.primary-cta { gap:22px; padding:17px 24px; margin-top:8px; }
.primary-cta span { font-size:23px; }
.hero-phone { display:inline-flex; align-items:center; gap:8px; margin-top:26px; color:var(--gold2); font-weight:700; font-size:17px; letter-spacing:.01em; transition:color .2s; }
.hero-phone:hover { color:white; }
.hero-stats { display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); margin-top:40px; border-top:1px solid rgba(255,255,255,.25); padding-top:22px; }
.hero-stats div { display:flex; flex-direction:column; gap:5px; border-right:1px solid rgba(255,255,255,.18); padding:0 30px; }
.hero-stats div:first-child { padding-left:0; }
.hero-stats div:last-child { border:0; }
.hero-stats strong { font:600 24px var(--font-lora-family),Georgia,serif; color:#f4d698; }
.hero-stats span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.66); }
.pain { background:var(--paper); }
.pain-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; }
.pain-heading > p,.apartments-head > p,.location-copy > p { max-width:530px; color:var(--muted); font-size:17px; }
.pain-points { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#d9d8d1; margin-top:80px; border:1px solid #d9d8d1; }
.pain-points article { background:var(--paper); padding:40px; min-height:245px; }
.pain-points article > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #c6c1b5; color:#9a7128; border-radius:50%; font:24px var(--font-lora-family),Georgia,serif; }
.pain-points h3 { margin:38px 0 6px; font:500 24px var(--font-lora-family),Georgia,serif; }
.pain-points p { color:var(--muted); margin:0; }
.dark-section { background:var(--paper); color:var(--ink); overflow:hidden; }
.dark-section:after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(154,113,40,.18); border-radius:50%; right:-170px; top:70px; box-shadow:0 0 0 90px rgba(154,113,40,.05),0 0 0 180px rgba(154,113,40,.03); }
.offer { display:grid; grid-template-columns:.85fr 1.15fr; column-gap:9vw; }
.offer .section-label { grid-column:1/-1; }
.offer-intro { position:relative; z-index:1; }
.offer-intro > p:last-child { max-width:480px; color:var(--muted); margin-top:30px; font-size:17px; }
.offer-list { position:relative; z-index:1; border-top:1px solid #d9d8d1; }
.offer-list article { display:grid; grid-template-columns:48px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid #d9d8d1; }
.offer-list article > span { color:#9a7128; font:20px var(--font-lora-family),Georgia,serif; }
.offer-list h3 { font:500 22px var(--font-lora-family),Georgia,serif; margin:0 0 7px; }
.offer-list p { margin:0; color:var(--muted); }
.offer-cta { grid-column:2; justify-self:start; margin-top:42px; position:relative; z-index:1; }
.overview { background:var(--cream); }
.overview-copy { max-width:820px; margin-bottom:70px; }
.overview-copy > p:last-child { max-width:640px; color:var(--muted); font-size:17px; }
.overview-visual { position:relative; width:100%; aspect-ratio:2.08/1; overflow:hidden; background:#ddd; }
.overview-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.float-stat { position:absolute; right:25px; bottom:25px; background:rgba(7,31,48,.92); color:white; padding:25px 30px; display:flex; flex-direction:column; }
.float-stat strong { font:500 38px var(--font-lora-family),Georgia,serif; color:var(--gold2); }
.float-stat span { font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.overview-grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #cac9c2; }
.overview-grid div { padding:36px 20px; display:flex; flex-direction:column; border-right:1px solid #cac9c2; }
.overview-grid div:first-child { padding-left:0; }
.overview-grid div:last-child { border:0; }
.overview-grid strong { font:500 36px var(--font-lora-family),Georgia,serif; color:#8e6721; }
.overview-grid span { font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-top:7px; color:#697176; }
.apartments { background:#eef1ec; }
.apartments-head { display:grid; grid-template-columns:1.35fr .65fr; align-items:end; gap:7vw; }
.apartment-picker { display:grid; grid-template-columns:repeat(5,1fr); margin-top:65px; border:1px solid #d8d5cd; }
.apartment-picker button { appearance:none; border:0; border-right:1px solid #d8d5cd; background:transparent; text-align:left; padding:24px; cursor:pointer; color:var(--ink); transition:.25s; width:100%; font:inherit; }
.apartment-picker button:last-child { border:0; }
.apartment-picker button.active { background:var(--navy); color:white; }
.apartment-picker small,.apartment-picker span { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.apartment-picker strong { display:block; margin:9px 0; font:500 28px var(--font-lora-family),Georgia,serif; }
.apartment-detail { display:grid; grid-template-columns:1fr 330px; min-height:660px; background:#eee8dc; }
.apartment-image { position:relative; min-width:0; }
.apartment-image img { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; object-fit:contain; padding:16px; }
.apartment-detail aside { background:#efe8dc; padding:70px 42px; border-left:1px solid #d8d0c3; }
.apartment-detail aside h3 { font:500 54px var(--font-lora-family),Georgia,serif; margin:0; color:#8c6421; }
.apartment-detail aside > p { color:var(--muted); }
.apartment-detail aside > strong { display:block; font:500 21px var(--font-lora-family),Georgia,serif; }
.detail-line { width:60px; height:1px; background:#a9a18f; margin:30px 0; }
.text-cta { display:inline-block; margin-top:28px; padding-bottom:8px; border-bottom:1px solid #9d7428; color:#815e1e; font-weight:800; }
.lifestyle { position:relative; min-height:760px; color:white; display:flex; align-items:center; overflow:hidden; }
.lifestyle > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lifestyle-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,23,37,.91),rgba(4,23,37,.35) 68%,rgba(4,23,37,.12)); }
.lifestyle-copy { position:relative; z-index:1; max-width:690px; }
.lifestyle-copy h2 { font-size:clamp(50px,6vw,84px); }
.lifestyle-copy h2 em { color:#e6c37c; }
.lifestyle-copy > p:not(.eyebrow) { max-width:600px; color:rgba(255,255,255,.8); font-size:17px; }
.amenities { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; }
.amenities span { padding:11px 16px; border:1px solid rgba(255,255,255,.35); border-radius:99px; font-size:12px; background:rgba(6,27,43,.35); }
.video-section { background:var(--navy2); color:white; }
.video-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:7vw; align-items:end; margin-bottom:54px; }
.video-heading > p { color:#aebcc2; font-size:17px; max-width:500px; }
.video-frame { position:relative; background:#020d15; border:1px solid #29404e; padding:10px; box-shadow:0 28px 70px rgba(0,0,0,.28); }
.video-frame video { display:block; width:100%; max-height:78vh; background:#061a29; object-fit:contain; }
.location { background:var(--cream); display:grid; grid-template-columns:.7fr 1.3fr; column-gap:7vw; }
.location .section-label { grid-column:1/-1; }
.location-copy { align-self:start; padding-top:24px; }
.location-image { display:block; overflow:hidden; box-shadow:0 26px 70px rgba(18,36,47,.12); }
.location-image img { display:block; width:100%; height:auto; }
.location-image.redesigned { background:#061a29; }
.travel-times { grid-column:2; display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #c9c7bf; }
.travel-times div { padding:27px 10px; display:flex; flex-direction:column; border-right:1px solid #c9c7bf; }
.travel-times div:last-child { border:0; }
.travel-times strong { font:500 27px var(--font-lora-family),Georgia,serif; color:#916a25; }
.travel-times span { font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-top:7px; }
.note { grid-column:2; font-size:11px; color:#7e8589; }
.progress { background:linear-gradient(135deg,#061a29,#0b2d46); color:white; display:grid; grid-template-columns:.78fr 1.22fr; column-gap:7vw; align-items:center; }
.progress-number { grid-column:1/-1; margin-bottom:64px; }
.progress-image { display:flex; align-items:center; background:#04131f; padding:12px; border:1px solid #345064; box-shadow:0 28px 70px rgba(0,0,0,.3); }
.progress-image img { display:block; width:100%; height:auto; }
.progress-image.infographic { background:#04131f; }
.progress-copy { align-self:center; }
.progress-copy h2 em { color:var(--gold2); }
.progress-copy > p { color:#aebcc2; font-size:17px; }
.progress-copy ul { list-style:none; padding:0; margin:32px 0 0; border-top:1px solid #29485b; }
.progress-copy li { padding:16px 0; border-bottom:1px solid #29485b; color:#d7e0e4; }
.progress-copy li:before { content:"✓"; color:var(--gold2); margin-right:12px; }
.progress-note { grid-column:2; color:#8297a2; font-size:11px; line-height:1.55; margin:18px 0 0; }
.legal-note { font-size:11px; line-height:1.55; }
.lead { position:relative; min-height:760px; background:var(--navy2); color:white; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.lead-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.lead-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,21,34,.68),rgba(4,21,34,.42)),linear-gradient(0deg,rgba(4,21,34,.54),rgba(4,21,34,.12)); }
.lead-inner { position:relative; z-index:1; max-width:820px; display:flex; flex-direction:column; align-items:center; }
.lead-label { margin:0 0 34px; }
.lead-inner > p:not(.eyebrow) { max-width:610px; color:rgba(255,255,255,.8); font-size:18px; }
.lead-inner .submit-cta { min-width:230px; margin-top:24px; }
.submit-cta { border:0; padding:18px 24px; gap:22px; cursor:pointer; margin-top:8px; }
.submit-cta b { font-size:22px; }
.faq { background:var(--paper); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; }
.faq-head { position:sticky; top:40px; align-self:start; }
.faq-head > p:last-child { color:var(--muted); max-width:520px; margin-top:28px; }
.faq-list { border-top:1px solid #d4d1c9; }
.faq-list details { border-bottom:1px solid #d4d1c9; }
.faq-list summary { position:relative; cursor:pointer; list-style:none; padding:27px 48px 27px 0; font:500 clamp(19px,2vw,25px) var(--font-lora-family),Georgia,serif; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:#9a7128; font:400 28px var(--font-lora-family),Georgia,serif; }
.faq-list details[open] summary:after { content:"−"; }
.faq-list details p { margin:0; padding:0 50px 25px 0; color:var(--muted); }
footer { background:#04131f; color:#93a4ac; min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:35px clamp(22px,7vw,110px); font-size:12px; }
footer .brand { color:white; }
footer > a:last-child { color:var(--gold2); font-size:16px; font-weight:700; }
.mobile-sticky { display:none; }
.floating-contact { position:fixed; z-index:70; right:22px; bottom:26px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.floating-contact-btn { display:flex; align-items:center; gap:12px; background:white; border-radius:16px; padding:8px 20px 8px 8px; box-shadow:0 12px 28px rgba(18,36,47,.22); color:var(--ink); transition:transform .2s; }
.floating-contact-btn:hover { transform:translateY(-2px); }
.floating-contact-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; color:white; }
.floating-contact-icon svg { width:21px; height:21px; }
.floating-contact-btn.phone .floating-contact-icon { background:#25d366; }
.floating-contact-btn.phone { font-size:14px; font-weight:600; }
.floating-contact-btn.messenger .floating-contact-icon { background:linear-gradient(135deg,#00c6ff 0%,#a45bea 55%,#ff5c8d 100%); }
.floating-contact-btn.messenger { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }

@media (max-width:900px) {
  .site-header nav { display:none; }
  .pain-heading,.apartments-head,.video-heading,.offer,.location,.progress,.faq { grid-template-columns:1fr; }
  .pain-heading { gap:25px; }
  .pain-points { grid-template-columns:1fr; }
  .pain-points article { min-height:auto; }
  .offer .section-label,.offer-cta { grid-column:1; }
  .offer-list { margin-top:55px; }
  .apartment-picker { grid-template-columns:repeat(2,1fr); overflow:visible; }
  .apartment-picker button { min-width:0; border-bottom:1px solid #d8d5cd; }
  .apartment-picker button:nth-child(2n) { border-right:0; }
  .apartment-picker button:last-child { grid-column:1/-1; border-bottom:0; }
  .apartment-detail { grid-template-columns:1fr; }
  .apartment-image { min-height:500px; }
  .apartment-detail aside { border:0; border-top:1px solid #d8d0c3; }
  .location .section-label,.travel-times,.note { grid-column:1; }
  .location-image { margin-top:35px; }
  .travel-times { margin-top:0; }
  .progress-number,.progress-note { grid-column:1; }
  .progress-image { min-height:0; margin-top:44px; }
  .faq-head { position:static; margin-bottom:45px; }
}

@media (max-width:600px) {
  body { padding-bottom:66px; }
  .section { padding:76px 20px; }
  .section-label { margin-bottom:48px; }
  .site-header { height:72px; padding:0 18px; }
  .brand { font-size:14px; }
  .header-cta { padding:10px 14px; font-size:12px; }
  .hero { min-height:840px; }
  .hero-image { object-position:66% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(3,20,34,.98) 5%,rgba(3,20,34,.56) 70%,rgba(3,20,34,.32)); }
  .hero-content { margin:0 20px 38px; width:auto; }
  h1 { font-size:clamp(27px,8.2vw,36px); line-height:1.2; letter-spacing:-.008em; }
  h2 { line-height:1.14; letter-spacing:-.01em; }
  .hero-copy { font-size:15px; margin-top:22px; }
  .hero-phone { font-size:15px; margin-top:20px; }
  .hero-main-cta { display:none; }
  .primary-cta { width:100%; }
  .hero-stats { grid-template-columns:repeat(2,1fr); row-gap:20px; }
  .hero-stats div { padding:0 20px; }
  .hero-stats div:nth-child(odd) { padding-left:0; }
  .hero-stats div:nth-child(even) { border-right:0; padding-right:0; }
  .pain-points { margin-top:50px; }
  .pain-points article { padding:30px; }
  .overview-visual { aspect-ratio:1/1.05; }
  .overview-visual img { object-position:center; }
  .float-stat { right:12px; bottom:12px; padding:16px 18px; }
  .float-stat strong { font-size:28px; }
  .overview-grid { grid-template-columns:1fr 1fr; }
  .overview-grid div { border-bottom:1px solid #cac9c2; }
  .overview-grid div:nth-child(2) { border-right:0; }
  .overview-grid div:first-child { padding-left:20px; }
  .apartment-image { min-height:390px; }
  .apartment-image img { padding:4px; }
  .apartment-detail aside { padding:44px 28px; }
  .lifestyle { min-height:680px; }
  .lifestyle-shade { background:linear-gradient(0deg,rgba(4,23,37,.95),rgba(4,23,37,.35)); }
  .video-heading { gap:20px; }
  .video-frame { margin-left:-20px; margin-right:-20px; padding:4px 0; border-left:0; border-right:0; }
  .video-frame video { max-height:none; }
  .location-image { margin-left:-20px; margin-right:-20px; border-radius:0; box-shadow:none; }
  .travel-times { grid-template-columns:1fr 1fr; }
  .travel-times div:nth-child(2) { border-right:0; }
  .progress { padding:76px 20px; }
  .progress-number { margin-bottom:48px; }
  .progress-image { min-height:0; margin:38px -20px 0; padding:4px 0; border-left:0; border-right:0; }
  .progress-copy { padding:0; }
  .progress-note { margin-top:16px; }
  .lead { min-height:650px; padding:80px 22px; }
  .lead-background { object-position:52% center; }
  .lead-inner > p:not(.eyebrow) { font-size:15px; }
  .lead-label { margin-bottom:28px; }
  .faq-list summary { padding:23px 42px 23px 0; font-size:20px; line-height:1.35; }
  .faq-list details p { padding-right:0; }
  footer { flex-direction:column; align-items:flex-start; padding:40px 20px; }
  .mobile-sticky { position:fixed; z-index:50; display:flex; align-items:center; justify-content:center; left:12px; right:12px; bottom:10px; height:50px; border-radius:99px; background:var(--gold); color:#081c2b; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.3); }
  .floating-contact { right:14px; bottom:80px; gap:10px; }
  .floating-contact-btn { padding:6px 16px 6px 6px; }
  .floating-contact-icon { width:36px; height:36px; }
  .floating-contact-icon svg { width:19px; height:19px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
