/* HomeSellers dark luxury theme */
:root{
  --hs-bg:#0A0A0A;
  --hs-bg-2:#14110E;
  --hs-bg-3:#1C1814;
  --hs-cream:#F4EADB;
  --hs-text:#E8DDC8;
  --hs-text-2:#A89D8C;
  --hs-muted:#6B6155;
  --hs-gold:#C89455;
  --hs-gold-bright:#E0A86A;
  --hs-gold-dark:#9A6D36;
  --hs-ink:#0A0A0A;
  --hs-border:rgba(244,234,219,0.10);
  --hs-border-soft:rgba(244,234,219,0.05);
  --hs-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --hs-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ BRAND OVERRIDES (scraped CSS) ============ */
.hero_composite__3blHB{mask-image:url("../assets/logo-mask.png?v=1776210344")!important;-webkit-mask-image:url("../assets/logo-mask.png?v=1776210344")!important;mask-size:min(68vw,1020px) min(18.5vw,278px)!important;-webkit-mask-size:min(68vw,1020px) min(18.5vw,278px)!important;mask-position:center 28%!important;-webkit-mask-position:center 28%!important;mask-repeat:no-repeat!important;-webkit-mask-repeat:no-repeat!important}
.header_logo__LO_Jk svg{display:none!important}
.header_logo__LO_Jk{width:200px!important;height:56px!important;overflow:hidden!important;background-image:url("../assets/header-logo-dark.png?v=2")!important;background-size:contain!important;background-position:left center!important;background-repeat:no-repeat!important;justify-self:start!important}
.header_logo__LO_Jk a{display:block!important;width:100%!important;height:100%!important}
.header_nav-item__Wn05d svg,[class*="header_nav-arrow"]{display:none!important}
.header_nav-item__Wn05d span:hover{transform:none!important}
.header_nav-item__Wn05d span::after{display:none!important;content:none!important}
.header_wrapper__MJ5bn{background:rgba(10,10,10,0.78)!important;backdrop-filter:saturate(180%) blur(16px)!important;-webkit-backdrop-filter:saturate(180%) blur(16px)!important;border-bottom:1px solid rgba(244,234,219,0.08)!important;z-index:50!important;position:fixed!important;top:0!important;left:0!important;right:0!important}
.header_nav-item__Wn05d a{color:#F4EADB!important;font-weight:500!important}
.header_nav-item__Wn05d a:hover{color:#C89455!important}
.header_content__cVJDb{grid-template-columns:1fr auto 1fr!important;column-gap:32px!important}
.header_nav__if_jI{justify-self:center!important}
.header_actions__Sv09J{display:flex!important;gap:10px!important;align-items:center!important;justify-self:end!important;width:auto!important}

/* ============ DAY→NIGHT CANVAS ============ */
/* --hero-p (0 → 1) is updated by the hero scroll handler and tracks scroll */
/* progress through the hero. Everything that needs to darken reads it.     */
html{background:#060504;--hero-p:0}
body{background:transparent;min-height:auto}

/* ============ MOBILE NAV (hamburger + drawer) ============ */
/* Injected by js/hs-mobile-nav.js on every page. Hidden on desktop.         */
.hs-mobile-toggle{display:none;background:transparent;border:0;width:44px;height:44px;padding:0;position:relative;cursor:pointer;justify-self:end;align-self:center;z-index:60}
.hs-mobile-toggle span{display:block;position:absolute;left:10px;right:10px;height:2px;background:#F4EADB;border-radius:1px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s,top .3s cubic-bezier(.16,1,.3,1)}
.hs-mobile-toggle span:nth-child(1){top:14px}
.hs-mobile-toggle span:nth-child(2){top:21px}
.hs-mobile-toggle span:nth-child(3){top:28px}
body.hs-drawer-open .hs-mobile-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
body.hs-drawer-open .hs-mobile-toggle span:nth-child(2){opacity:0}
body.hs-drawer-open .hs-mobile-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
.hs-mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(82vw,360px);background:#060504;border-left:1px solid rgba(244,234,219,0.08);transform:translateX(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);z-index:100;padding:84px 32px 32px;overflow-y:auto;box-shadow:-28px 0 60px rgba(0,0,0,0.5)}
.hs-mobile-drawer nav{display:flex;flex-direction:column;gap:2px}
.hs-mobile-drawer a{color:#F4EADB;text-decoration:none;padding:18px 2px;border-bottom:1px solid rgba(244,234,219,0.07);font-family:var(--hs-sans);font-size:16px;font-weight:600;letter-spacing:.02em;transition:color .25s,padding-left .25s}
.hs-mobile-drawer a:hover,.hs-mobile-drawer a:focus{color:#C89455;padding-left:8px;outline:none}
.hs-mobile-drawer-cta{color:#C89455!important;margin-top:16px;border:1px solid #C89455!important;text-align:center;padding:16px 2px!important;letter-spacing:.14em;text-transform:uppercase;font-size:12px!important;font-weight:700!important}
.hs-mobile-drawer-cta:hover,.hs-mobile-drawer-cta:focus{background:#C89455;color:#0A0A0A!important;padding-left:2px!important}
.hs-mobile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:95;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.hs-drawer-open{overflow:hidden}
body.hs-drawer-open .hs-mobile-drawer{transform:translateX(0)}
body.hs-drawer-open .hs-mobile-drawer-overlay{opacity:1;pointer-events:auto}

/* ============ PAGE TRANSITIONS ============ */
/* Cinematic fade between pages. Only opacity — no transform on body,      */
/* which would break the fixed header's containing block.                   */
@keyframes hs-page-enter{from{opacity:0}to{opacity:1}}
body{animation:hs-page-enter .55s cubic-bezier(.16,1,.3,1) both}
html.page-exit body{opacity:0;transition:opacity .42s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){body{animation:none}html.page-exit body{transition:none}}

/* Shorten the hero's scroll range from 3500 → 2600 so the day→night      */
/* transition doesn't eat as much scroll. The frame animation normalizes   */
/* on progress (0→1) so it just compresses into less distance.             */
.hero_root__N0Loz{height:2600px!important}

/* Hero day→night. JS builds the full filter string as --hero-filter —   */
/* safer than var() inside filter functions across browsers.               */
html{--hero-filter:sepia(0) brightness(1) saturate(1);--hero-alpha:1}
.hero_back__8ReFI,.hero_clouds__bC7V4,.hero_smoke__8za_R,.hero_content__DK_Ny,.hero_overlap__d3EJV,.hero_bg__S_r_n > .hero_house__aJy7p,.hero_overlay__7ubgG{filter:var(--hero-filter);opacity:var(--hero-alpha)}
/* Kill the scraped white-fade overlay at hero bottom — it was bleeding white */
/* through the darkened sky and reading as purple haze at the elbow.           */
.hero_overlay__7ubgG{background:linear-gradient(180deg,rgba(4,3,2,0) 0%,rgba(4,3,2,0.6) 55%,rgba(4,3,2,1) 100%)!important}
/* Composite stays at full brightness — strong sepia + hue-rotate warms   */
/* the masked skyline so any blue sky peeking through reads amber/gold.    */
.hero_top__WegWw{z-index:20}
.hero_composite__3blHB{filter:sepia(1) saturate(1.6) brightness(1.1) hue-rotate(-12deg)}
/* Hero title + subtitle readable on both day and night: light cream with */
/* text-shadow so it reads on the sky gradient at any scroll position.    */
.hero_title__JpmHS h1{color:#F4EADB!important;text-shadow:0 2px 28px rgba(0,0,0,0.45),0 1px 4px rgba(0,0,0,0.35)!important}
.hero_title__JpmHS p{color:rgba(244,234,219,0.9)!important;text-shadow:0 1px 14px rgba(0,0,0,0.5)!important}
.hero_subtitle__vZXuM,.hero_eyebrow__A8yYg{color:#E0A86A!important;text-shadow:0 1px 10px rgba(0,0,0,0.4)!important}

/* Dark wash that fades the hero's bottom into the night-sky section's      */
/* starting color, making the handoff seamless.                              */
.hero_root__N0Loz::after{content:"";position:absolute;left:0;right:0;bottom:700px;height:280px;background:linear-gradient(180deg,rgba(4,3,2,0) 0%,rgba(4,3,2,0.55) 50%,rgba(4,3,2,1) 100%);pointer-events:none;z-index:10}

/* ============ BUTTONS ============ */
.hs-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:14px 30px!important;font-family:inherit!important;font-size:12px!important;font-weight:700!important;letter-spacing:.18em!important;text-transform:uppercase!important;border-radius:0!important;text-decoration:none!important;white-space:nowrap!important;line-height:1!important;border:1px solid transparent!important;transition:background .25s ease,color .25s ease,border-color .25s ease!important;cursor:pointer!important}
.hs-btn-lg{padding:20px 44px!important;font-size:12px!important;letter-spacing:.22em!important}
.hs-btn-gold{background:#C89455!important;color:#0A0A0A!important;border-color:#C89455!important}
.hs-btn-gold:hover{background:#E0A86A!important;border-color:#E0A86A!important}
.hs-btn-dark{background:#0A0A0A!important;color:#F4EADB!important;border-color:#0A0A0A!important}
.hs-btn-dark:hover{background:transparent!important;color:#F4EADB!important;border-color:#F4EADB!important}
.hero_actions__RlphJ{display:flex!important;gap:14px!important;flex-wrap:wrap!important}
.hero_title__JpmHS h1{font-size:clamp(40px,5.2vw,72px)!important;line-height:1.05!important}
.hs-eyebrow{display:block!important;font-size:12px!important;font-weight:600!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#C89455!important;text-align:center!important;margin-top:22px!important;margin-bottom:26px!important}

/* ============ WRAPPER + SECTIONS ============ */
.hs-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,5vw,56px);box-sizing:border-box;position:relative;z-index:3}
.hs-section{padding:clamp(36px,3.6vw,56px) 0;position:relative;z-index:4;font-family:var(--hs-sans);color:var(--hs-text);overflow:hidden;background-color:#060504}
.hs-section::before{content:"";position:absolute;inset:0;background-image:var(--hs-grain);opacity:0.22;pointer-events:none;mix-blend-mode:overlay;z-index:2}
.hs-footer{position:relative;z-index:4}

.hs-eyebrow-label{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--hs-gold);margin-bottom:20px}
.hs-eyebrow-label::before{content:"";display:block;width:28px;height:1px;background:currentColor}
.hs-display{font-family:var(--hs-sans);font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-0.022em;color:var(--hs-cream);margin:0 0 20px}
.hs-display em{font-style:normal;color:var(--hs-gold);position:relative}
.hs-lead{font-size:clamp(15px,1.05vw,16px);line-height:1.7;color:var(--hs-text-2);max-width:520px;margin:0}

/* ============ PAGE HERO (subpages) ============ */
/* Dark theme subpage hero: crushed skyline at night with warm ember glow.  */
.hs-page-hero{position:relative;min-height:60vh;padding:164px 0 92px;display:flex;align-items:center;text-align:center;background-color:#060504;background-image:radial-gradient(ellipse 100% 55% at 50% 20%,rgba(200,148,85,0.24),rgba(200,148,85,0) 70%),linear-gradient(180deg,rgba(6,5,4,0.78) 0%,rgba(6,5,4,0.94) 100%),url("../assets/miami-skyline-sm.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.hs-page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 55%,#040302 100%);pointer-events:none;z-index:2}
.hs-page-hero .hs-wrap{max-width:980px}
.hs-page-hero .hs-eyebrow-label{justify-content:center}
.hs-page-hero .hs-display{margin:0 auto 28px;font-size:clamp(40px,5vw,76px);max-width:960px}
.hs-page-hero p{font-size:clamp(16px,1.2vw,19px);line-height:1.7;color:var(--hs-text-2);margin:0 auto 44px;max-width:660px}
.hs-page-hero .hs-btn-gold{align-self:center}

/* ============ NIGHT SKY TRANSITION ============ */
/* A full-viewport atmospheric section between the hero and services.       */
/* The hero "lands" here — stars, moon, subtle Miami silhouette, tagline.   */
.hs-nightsky{position:relative;min-height:92vh;display:flex;align-items:flex-end;justify-content:center;padding:clamp(72px,8vw,120px) 0 clamp(104px,11vw,168px);background:radial-gradient(ellipse 120% 70% at 50% 100%,#080604 0%,#040302 45%,#000000 100%);overflow:hidden;z-index:4}
.hs-nightsky::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 30% at 50% 100%,rgba(200,148,85,0.22),rgba(200,148,85,0) 65%);pointer-events:none;z-index:1}

/* Starfield — SVG data URI with ~60 scattered circles at varying sizes.    */
.hs-nightsky-stars{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cg fill='%23F4EADB'%3E%3Ccircle cx='60' cy='80' r='0.9' opacity='0.85'/%3E%3Ccircle cx='180' cy='40' r='0.6' opacity='0.55'/%3E%3Ccircle cx='260' cy='120' r='1.1' opacity='0.95'/%3E%3Ccircle cx='340' cy='60' r='0.7' opacity='0.65'/%3E%3Ccircle cx='430' cy='180' r='0.5' opacity='0.5'/%3E%3Ccircle cx='510' cy='30' r='1' opacity='0.9'/%3E%3Ccircle cx='590' cy='110' r='0.6' opacity='0.6'/%3E%3Ccircle cx='680' cy='50' r='0.8' opacity='0.75'/%3E%3Ccircle cx='770' cy='160' r='1.2' opacity='0.95'/%3E%3Ccircle cx='860' cy='90' r='0.5' opacity='0.55'/%3E%3Ccircle cx='950' cy='30' r='0.7' opacity='0.7'/%3E%3Ccircle cx='1040' cy='140' r='0.9' opacity='0.85'/%3E%3Ccircle cx='1120' cy='70' r='0.6' opacity='0.6'/%3E%3Ccircle cx='1210' cy='120' r='1' opacity='0.9'/%3E%3Ccircle cx='1300' cy='40' r='0.5' opacity='0.5'/%3E%3Ccircle cx='100' cy='220' r='0.7' opacity='0.7'/%3E%3Ccircle cx='220' cy='280' r='0.5' opacity='0.55'/%3E%3Ccircle cx='310' cy='200' r='1' opacity='0.9'/%3E%3Ccircle cx='400' cy='310' r='0.6' opacity='0.6'/%3E%3Ccircle cx='490' cy='240' r='0.8' opacity='0.75'/%3E%3Ccircle cx='580' cy='300' r='0.5' opacity='0.5'/%3E%3Ccircle cx='660' cy='220' r='1.1' opacity='0.95'/%3E%3Ccircle cx='750' cy='280' r='0.6' opacity='0.6'/%3E%3Ccircle cx='840' cy='210' r='0.9' opacity='0.85'/%3E%3Ccircle cx='930' cy='320' r='0.7' opacity='0.7'/%3E%3Ccircle cx='1020' cy='240' r='1' opacity='0.9'/%3E%3Ccircle cx='1110' cy='300' r='0.5' opacity='0.55'/%3E%3Ccircle cx='1200' cy='230' r='0.8' opacity='0.75'/%3E%3Ccircle cx='1280' cy='290' r='0.6' opacity='0.6'/%3E%3Ccircle cx='40' cy='360' r='0.7' opacity='0.7'/%3E%3Ccircle cx='130' cy='410' r='0.5' opacity='0.5'/%3E%3Ccircle cx='230' cy='380' r='1' opacity='0.9'/%3E%3Ccircle cx='320' cy='450' r='0.6' opacity='0.6'/%3E%3Ccircle cx='420' cy='390' r='0.8' opacity='0.8'/%3E%3Ccircle cx='520' cy='440' r='0.5' opacity='0.55'/%3E%3Ccircle cx='620' cy='370' r='1.2' opacity='0.95'/%3E%3Ccircle cx='720' cy='430' r='0.7' opacity='0.7'/%3E%3Ccircle cx='810' cy='390' r='0.6' opacity='0.6'/%3E%3Ccircle cx='900' cy='460' r='0.9' opacity='0.85'/%3E%3Ccircle cx='1000' cy='400' r='0.5' opacity='0.5'/%3E%3Ccircle cx='1090' cy='450' r='0.8' opacity='0.75'/%3E%3Ccircle cx='1180' cy='380' r='1' opacity='0.9'/%3E%3Ccircle cx='1270' cy='440' r='0.6' opacity='0.6'/%3E%3Ccircle cx='1360' cy='380' r='0.7' opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");background-size:100% 65%;background-repeat:no-repeat;background-position:center top;animation:twinkle 6s ease-in-out infinite alternate;z-index:2}
@keyframes twinkle{0%{opacity:0.9}50%{opacity:0.75}100%{opacity:1}}
.hs-nightsky-stars{filter:drop-shadow(0 0 2px rgba(244,234,219,0.55));transform:translateY(calc(var(--ns-p,0) * -32px))}

/* Moon — rendered in a separate top-level fixed layer (`.hs-moon-overlay`   */
/* injected via hs-mobile-nav.js) so its glow paints ABOVE the hero_top       */
/* (z:20) stacking context. Otherwise the composite letters that land in     */
/* front of the night sky would clip the moon's halo on the side facing the  */
/* logo. Hide the original in-nightsky moon node that came from the scraped  */
/* markup so we don't render it twice.                                        */
.hs-nightsky-moon{display:none}
.hs-moon-overlay{position:fixed;top:clamp(60px,9vh,120px);right:clamp(24px,8vw,140px);width:clamp(80px,9vw,130px);aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 42% 38%,#FFF8EC 0%,#F4EADB 22%,#C9B690 55%,#8A7A58 90%);z-index:30;pointer-events:none;opacity:var(--ns-p,0);transform:translateY(calc(var(--ns-p,0) * -48px));animation:moon-breath 7s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes moon-breath{0%{box-shadow:0 0 50px 10px rgba(244,234,219,0.16),0 0 120px 24px rgba(244,234,219,0.06),0 0 220px 48px rgba(200,148,85,0.04)}100%{box-shadow:0 0 80px 18px rgba(244,234,219,0.26),0 0 180px 40px rgba(244,234,219,0.14),0 0 280px 72px rgba(200,148,85,0.08)}}

/* Drifting clouds — three soft blur blobs that slowly crawl across the     */
/* night sky, giving the scene ambient horizontal motion.                    */
.hs-nightsky-drift{position:absolute;width:70%;height:180px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(120,110,96,0.18),rgba(120,110,96,0) 75%);will-change:transform}
.hs-nightsky-drift-1{top:12%;left:-70%;animation:drift 62s linear infinite}
.hs-nightsky-drift-2{top:34%;left:-70%;animation:drift 84s linear infinite;animation-delay:-28s;opacity:0.7}
.hs-nightsky-drift-3{top:58%;left:-70%;animation:drift 110s linear infinite;animation-delay:-55s;opacity:0.5;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(80,72,60,0.18),rgba(80,72,60,0) 70%)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(245%)}}
@media (prefers-reduced-motion:reduce){.hs-nightsky-drift,.hs-nightsky-moon,.hs-nightsky-stars,.hs-nightsky-stars-back,.hs-nightsky-city-lights,.hs-nightsky-shooting-star{animation:none!important}}

/* Back starfield layer — sparser, slower parallax (feels further away).     */
.hs-nightsky-stars-back{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cg fill='%23F4EADB'%3E%3Ccircle cx='40' cy='90' r='0.4' opacity='0.45'/%3E%3Ccircle cx='150' cy='200' r='0.4' opacity='0.4'/%3E%3Ccircle cx='280' cy='150' r='0.5' opacity='0.5'/%3E%3Ccircle cx='400' cy='60' r='0.4' opacity='0.4'/%3E%3Ccircle cx='530' cy='220' r='0.4' opacity='0.45'/%3E%3Ccircle cx='640' cy='130' r='0.5' opacity='0.5'/%3E%3Ccircle cx='780' cy='80' r='0.4' opacity='0.45'/%3E%3Ccircle cx='900' cy='240' r='0.5' opacity='0.5'/%3E%3Ccircle cx='1020' cy='150' r='0.4' opacity='0.4'/%3E%3Ccircle cx='1150' cy='60' r='0.5' opacity='0.5'/%3E%3Ccircle cx='1270' cy='200' r='0.4' opacity='0.45'/%3E%3Ccircle cx='1380' cy='120' r='0.4' opacity='0.4'/%3E%3Ccircle cx='1500' cy='70' r='0.5' opacity='0.5'/%3E%3Ccircle cx='70' cy='340' r='0.4' opacity='0.4'/%3E%3Ccircle cx='200' cy='410' r='0.5' opacity='0.5'/%3E%3Ccircle cx='350' cy='370' r='0.4' opacity='0.45'/%3E%3Ccircle cx='480' cy='340' r='0.4' opacity='0.4'/%3E%3Ccircle cx='620' cy='420' r='0.5' opacity='0.5'/%3E%3Ccircle cx='760' cy='380' r='0.4' opacity='0.45'/%3E%3Ccircle cx='880' cy='340' r='0.4' opacity='0.4'/%3E%3Ccircle cx='1020' cy='420' r='0.5' opacity='0.5'/%3E%3Ccircle cx='1160' cy='360' r='0.4' opacity='0.45'/%3E%3Ccircle cx='1300' cy='400' r='0.4' opacity='0.4'/%3E%3Ccircle cx='1440' cy='340' r='0.5' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");background-size:100% 70%;background-repeat:no-repeat;background-position:center top;z-index:1;transform:translateY(calc(var(--ns-p,0) * -12px));animation:twinkle-slow 9s ease-in-out infinite alternate}
@keyframes twinkle-slow{0%{opacity:0.5}100%{opacity:0.75}}

/* Miami silhouette at the horizon — crushed to a dark silhouette but with  */
/* warm city-light glints still visible so it reads as "Miami at night".    */
.hs-nightsky-skyline{position:absolute;left:0;right:0;bottom:0;height:52%;background-image:url("../assets/miami-skyline-sm.jpg");background-size:cover;background-position:center bottom;filter:brightness(0.28) contrast(1.6) saturate(0.65);z-index:3;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.15) 15%,rgba(0,0,0,0.55) 40%,black 75%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.15) 15%,rgba(0,0,0,0.55) 40%,black 75%)}
/* Warm city-lights wash behind the skyline so the base of the section has  */
/* a subtle distant-downtown glow.                                            */
.hs-nightsky-skyline::before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:radial-gradient(ellipse 80% 55% at 50% 100%,rgba(232,160,90,0.18),rgba(232,160,90,0) 60%);pointer-events:none}

.hs-nightsky-inner{position:relative;z-index:4;max-width:640px;text-align:center}
.hs-nightsky .hs-eyebrow-label{color:#E0A86A;justify-content:center}
.hs-nightsky .hs-display{color:#F4EADB;text-shadow:0 2px 40px rgba(0,0,0,0.6);font-size:clamp(26px,3vw,40px)}
.hs-nightsky .hs-display em{color:#E0A86A}
.hs-nightsky .hs-lead{color:#A89D8C;max-width:480px;margin:0 auto}

/* ============ SHOOTING STAR ============ */
/* A brief streak that arcs across the upper-left quadrant on a loop.         */
.hs-nightsky-shooting-star{position:absolute;top:12%;left:6%;width:140px;height:2px;background:linear-gradient(90deg,rgba(244,234,219,0) 0%,rgba(244,234,219,0.9) 60%,rgba(255,255,255,1) 100%);border-radius:2px;transform:rotate(18deg);opacity:0;z-index:3;pointer-events:none;box-shadow:0 0 6px rgba(244,234,219,0.7);animation:shoot 9s ease-out infinite;animation-delay:2s}
.hs-nightsky-shooting-star::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:#FFF;box-shadow:0 0 8px 2px rgba(255,255,255,0.9),0 0 18px 4px rgba(244,234,219,0.5);transform:translateY(-50%)}
@keyframes shoot{0%{transform:translate(0,0) rotate(18deg);opacity:0}4%{opacity:1}14%{transform:translate(420px,140px) rotate(18deg);opacity:0}100%{transform:translate(420px,140px) rotate(18deg);opacity:0}}

/* ============ LANDED LOGO (hero narrative continuation) ============ */
/* Second copy of the HomeSellers composite — same skyline-masked letters   */
/* as the hero's big reveal, but smaller and positioned in the night sky.   */
/* Fades in via --hero-p as the hero's version darkens out, creating a      */
/* visual handoff: the logo "lands" in the night scene.                      */
/* The static landed logo is hidden — the actual hero composite now scrolls */
/* through the night sky via its sticky parent, giving a continuous motion. */
.hs-nightsky-landed-logo{display:none}

/* ============ TWINKLING CITY LIGHTS ============ */
/* Tiny warm dots layered over the skyline silhouette. Each dot twinkles    */
/* at a slightly different phase via CSS-only animations.                    */
.hs-nightsky-city-lights{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='400' viewBox='0 0 1400 400'%3E%3Cg fill='%23FFD89A'%3E%3Ccircle cx='110' cy='220' r='1.2'/%3E%3Ccircle cx='145' cy='250' r='1'/%3E%3Ccircle cx='180' cy='200' r='1.4'/%3E%3Ccircle cx='220' cy='240' r='1.1'/%3E%3Ccircle cx='260' cy='180' r='1.3'/%3E%3Ccircle cx='310' cy='230' r='1'/%3E%3Ccircle cx='355' cy='190' r='1.2'/%3E%3Ccircle cx='400' cy='240' r='1.4'/%3E%3Ccircle cx='445' cy='170' r='1.1'/%3E%3Ccircle cx='490' cy='210' r='1.3'/%3E%3Ccircle cx='540' cy='260' r='1'/%3E%3Ccircle cx='590' cy='180' r='1.2'/%3E%3Ccircle cx='640' cy='220' r='1.4'/%3E%3Ccircle cx='690' cy='250' r='1.1'/%3E%3Ccircle cx='740' cy='190' r='1.3'/%3E%3Ccircle cx='790' cy='230' r='1'/%3E%3Ccircle cx='840' cy='170' r='1.2'/%3E%3Ccircle cx='890' cy='240' r='1.4'/%3E%3Ccircle cx='940' cy='200' r='1.1'/%3E%3Ccircle cx='990' cy='260' r='1.3'/%3E%3Ccircle cx='1040' cy='190' r='1'/%3E%3Ccircle cx='1090' cy='230' r='1.2'/%3E%3Ccircle cx='1140' cy='180' r='1.4'/%3E%3Ccircle cx='1190' cy='250' r='1.1'/%3E%3Ccircle cx='1240' cy='210' r='1.3'/%3E%3Ccircle cx='1290' cy='240' r='1'/%3E%3C/g%3E%3C/svg%3E");background-size:100% auto;background-position:center 60%;background-repeat:no-repeat;mix-blend-mode:screen;filter:drop-shadow(0 0 2px rgba(255,216,154,0.8));animation:city-twinkle 4s ease-in-out infinite alternate}
@keyframes city-twinkle{0%{opacity:0.75}50%{opacity:1}100%{opacity:0.85}}

/* ============ SERVICES (home) ============ */
.hs-services{background-color:#060504;background-image:linear-gradient(180deg,#060504 0%,#040302 100%)}
.hs-services-head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:38px;position:relative;z-index:3}
.hs-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:3}
.hs-service{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--hs-bg-2);border:1px solid rgba(244,234,219,0.10);display:flex;flex-direction:column;justify-content:flex-end;padding:0;isolation:isolate;transition:border-color .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.hs-service::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .6s ease;z-index:1;filter:brightness(0.62) saturate(1.08) contrast(1.05);transform:scale(1.18) translate3d(0,calc(var(--svc-p,0) * 26px),0);will-change:transform}
.hs-service::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.1) 0%,rgba(10,10,10,0.45) 40%,rgba(10,10,10,0.92) 100%);z-index:2;pointer-events:none}
.hs-service:nth-child(1)::before{background-image:url("../assets/service-residential.jpg");background-position:center 62%}
.hs-service:nth-child(2)::before{background-image:url("../assets/service-investment.jpg");background-position:center center}
.hs-service:nth-child(3)::before{background-image:url("../assets/service-offmarket.jpg");background-position:center 55%}
.hs-service:hover{border-color:var(--hs-gold);transform:translateY(-6px)}
.hs-service:hover::before{filter:brightness(0.78) saturate(1.18) contrast(1.05)}
.hs-service-inner{position:relative;z-index:3;padding:32px 28px 30px;display:flex;flex-direction:column;gap:12px}
.hs-service-num{font-family:var(--hs-sans);font-weight:800;font-size:clamp(48px,4.4vw,68px);line-height:0.85;letter-spacing:-0.045em;color:var(--hs-gold);margin-bottom:auto;align-self:flex-start}
.hs-service-tag{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--hs-gold);display:flex;align-items:center;gap:10px;margin-bottom:4px}
.hs-service-tag::before{content:"";display:block;width:22px;height:1px;background:currentColor}
.hs-service h3{font-family:var(--hs-sans);font-weight:700;font-size:clamp(19px,1.5vw,23px);line-height:1.18;letter-spacing:-0.01em;color:var(--hs-cream);margin:0 0 6px;max-width:92%}
.hs-service p{font-size:13px;line-height:1.6;color:#C4B8A4;margin:0;max-width:95%}
.hs-service-top{position:absolute;top:24px;left:28px;right:28px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start}

/* ============ WHY / EDITORIAL LIST ============ */
/* Picks up where services ends (warm mid-light gray) and crashes all the    */
/* way into near-black across this section — most of the "day to night"     */
/* descent happens here, placing the black moment roughly mid-page.         */
.hs-why{background-color:#040302;background-image:linear-gradient(180deg,#040302 0%,#020201 100%)}
.hs-why .hs-display{color:var(--hs-cream)}
.hs-why .hs-display em{color:var(--hs-gold)}
.hs-why-head{max-width:720px;margin-bottom:44px;position:relative;z-index:3}
.hs-why-list{display:grid;gap:0;position:relative;z-index:3}
.hs-why-row{display:grid;grid-template-columns:140px 1fr;gap:44px;align-items:start;padding:30px 0;border-top:1px solid rgba(244,234,219,0.16);transition:padding .4s ease}
.hs-why-row:last-child{border-bottom:1px solid rgba(244,234,219,0.16)}
.hs-why-row:hover{padding-left:14px}
.hs-why-num{font-family:var(--hs-sans);font-weight:800;font-size:clamp(52px,5.5vw,82px);line-height:0.85;letter-spacing:-0.045em;color:var(--hs-gold);text-align:left}
.hs-why-body{max-width:720px}
.hs-why-body h3{font-family:var(--hs-sans);font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-0.018em;color:var(--hs-cream);margin:8px 0 12px;max-width:660px}
.hs-why-body p{font-size:15px;line-height:1.65;color:#A89D8C;margin:0;max-width:600px}

/* ============ TEAM ============ */
.hs-team{background-color:#040302;background-image:linear-gradient(180deg,#040302 0%,#020201 100%)}
.hs-team-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.hs-team-image{position:relative;aspect-ratio:1/1;background:var(--hs-bg-3);overflow:hidden;border:1px solid rgba(244,234,219,0.12);box-shadow:0 40px 80px -30px rgba(0,0,0,0.7),0 0 0 1px rgba(200,148,85,0.18) inset}
.hs-team-image::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 35%,rgba(200,148,85,0.32),transparent 70%),linear-gradient(170deg,#2A2018 0%,#0E0B08 100%)}
.hs-team-image::after{content:"TEAM PHOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.3em;color:rgba(244,234,219,0.4)}
.hs-team-image-frame{position:absolute;inset:12px;border:1px solid rgba(244,234,219,0.2);pointer-events:none;z-index:2}
.hs-team-text .hs-display{margin-bottom:22px}
.hs-team-text p{font-size:15px;line-height:1.68;color:var(--hs-text);margin:0 0 14px;max-width:540px}
.hs-team-text p:last-child{margin-bottom:0}

/* ============ RECRUIT / INVERSE LIST ============ */
/* Pure night. Matches the end of Team.                                       */
.hs-recruit{background-color:#060504;background-image:linear-gradient(180deg,#060504 0%,#030302 100%);color:var(--hs-cream);overflow:hidden}
.hs-recruit .hs-display{color:var(--hs-cream)}
.hs-recruit .hs-eyebrow-label{color:var(--hs-gold)}
.hs-recruit-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,76px);align-items:center;position:relative;z-index:2}
.hs-recruit-intro p{font-size:15px;line-height:1.68;color:#B5AA98;margin:0 0 28px;max-width:440px}
.hs-recruit-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hs-recruit-list li{font-size:15px;font-weight:600;color:var(--hs-cream);padding:16px 22px;background:rgba(244,234,219,0.04);border:1px solid rgba(244,234,219,0.10);display:flex;align-items:center;gap:16px;transition:border-color .35s ease,background .35s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.hs-recruit-list li:hover{border-color:var(--hs-gold);background:rgba(200,148,85,0.10);transform:translateX(6px)}
.hs-recruit-list li::before{content:"";display:block;width:8px;height:8px;background:var(--hs-gold);border-radius:50%;flex-shrink:0}
.hs-recruit .hs-btn-gold:hover{background:var(--hs-cream)!important;color:var(--hs-ink)!important;border-color:var(--hs-cream)!important}

/* ============ FEATURE GRID (for deal types, property types, etc) ============ */
.hs-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;position:relative;z-index:3}
.hs-feature-card{position:relative;padding:44px 36px 40px;background:rgba(244,234,219,0.03);border:1px solid rgba(244,234,219,0.12);transition:border-color .4s ease,background .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.hs-feature-card:hover{border-color:var(--hs-gold);background:rgba(200,148,85,0.05);transform:translateY(-4px)}
.hs-feature-card-num{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--hs-gold);display:flex;align-items:center;gap:10px;margin-bottom:24px}
.hs-feature-card-num::before{content:"";display:block;width:22px;height:1px;background:currentColor}
.hs-feature-card h3{font-family:var(--hs-sans);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-0.01em;color:var(--hs-cream);margin:0 0 12px}
.hs-feature-card p{font-size:14px;line-height:1.7;color:var(--hs-text-2);margin:0}

/* ============ SIMPLE TEXT SECTION (about, copy-heavy) ============ */
.hs-prose{max-width:780px;margin:0 auto}
.hs-prose-head{text-align:center;margin-bottom:44px}
.hs-prose-head .hs-eyebrow-label{justify-content:center}
.hs-prose-head .hs-display{margin:0 auto}
.hs-prose p{font-size:17px;line-height:1.82;color:var(--hs-text);margin:0 0 24px}
.hs-prose p:last-child{margin-bottom:0}

/* ============ LOCATION LIST ============ */
.hs-locations{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px;position:relative;z-index:3}
.hs-location{padding:28px 24px;border:1px solid rgba(244,234,219,0.14);background:rgba(244,234,219,0.03);display:flex;flex-direction:column;gap:8px;transition:border-color .3s ease,background .3s ease}
.hs-location:hover{border-color:var(--hs-gold);background:rgba(200,148,85,0.06)}
.hs-location-label{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--hs-gold)}
.hs-location-name{font-size:20px;font-weight:700;color:var(--hs-cream);letter-spacing:-0.01em}

/* ============ FORM ============ */
.hs-form-section{background-color:#060504;background-image:linear-gradient(180deg,#060504 0%,#030302 100%)}
.hs-form-wrap{max-width:840px;margin:0 auto;position:relative;z-index:3}
.hs-form-head{text-align:center;margin-bottom:52px}
.hs-form-head .hs-eyebrow-label{justify-content:center}
.hs-form-head .hs-display{margin:0 auto 20px;font-size:clamp(36px,4.4vw,56px)}
.hs-form-head p{font-size:17px;line-height:1.7;color:var(--hs-text-2);margin:0 auto;max-width:560px}
.hs-form{display:grid;gap:48px}
.hs-form-group{display:grid;gap:24px}
.hs-form-group-title{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--hs-gold);display:flex;align-items:center;gap:14px;margin:0 0 4px;padding-bottom:16px;border-bottom:1px solid rgba(244,234,219,0.16)}
.hs-form-group-title::before{content:"";display:block;width:28px;height:1px;background:currentColor}
.hs-field{display:flex;flex-direction:column;gap:10px}
.hs-field label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hs-text-2)}
.hs-field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hs-input,.hs-select,.hs-textarea{width:100%;padding:16px 20px;background:rgba(244,234,219,0.04);border:1px solid rgba(244,234,219,0.14);color:var(--hs-cream);font-family:var(--hs-sans);font-size:15px;font-weight:500;border-radius:0;transition:border-color .25s ease,background .25s ease;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.hs-input::placeholder,.hs-textarea::placeholder{color:rgba(244,234,219,0.3)}
.hs-input:focus,.hs-select:focus,.hs-textarea:focus{outline:none;border-color:var(--hs-gold);background:rgba(244,234,219,0.06)}
.hs-textarea{min-height:140px;resize:vertical;font-family:var(--hs-sans)}
.hs-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C89455' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;padding-right:48px}
.hs-option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.hs-option{position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px;background:rgba(244,234,219,0.04);border:1px solid rgba(244,234,219,0.12);cursor:pointer;transition:border-color .25s ease,background .25s ease;-webkit-user-select:none;user-select:none}
.hs-option:hover{border-color:rgba(200,148,85,0.5);background:rgba(244,234,219,0.06)}
.hs-option input{position:absolute;opacity:0;pointer-events:none}
.hs-option-mark{display:block;width:16px;height:16px;border:1.5px solid rgba(244,234,219,0.35);flex-shrink:0;position:relative;transition:border-color .2s ease,background .2s ease}
.hs-option input[type="radio"] + .hs-option-mark{border-radius:50%}
.hs-option input:checked + .hs-option-mark{border-color:var(--hs-gold);background:var(--hs-gold)}
.hs-option input:checked + .hs-option-mark::after{content:"";position:absolute;inset:3px;background:var(--hs-bg)}
.hs-option input[type="radio"]:checked + .hs-option-mark::after{border-radius:50%}
.hs-option-label{font-size:14px;color:var(--hs-text);font-weight:500}
.hs-option input:checked ~ .hs-option-label{color:var(--hs-cream)}
.hs-form .hs-btn{justify-self:start;margin-top:12px}

/* ============ FINAL CTA ============ */
/* Pure black with a subtle warm ember at the bottom for distant city lights */
.hs-cta{text-align:center;padding:clamp(52px,5.4vw,84px) 0;background-color:#030302;background-image:radial-gradient(ellipse 120% 45% at 50% 100%,rgba(200,148,85,0.22),rgba(200,148,85,0) 65%),linear-gradient(180deg,#030302 0%,#010101 60%,#000000 100%)}
.hs-cta .hs-eyebrow-label{justify-content:center}
.hs-cta .hs-eyebrow-label::before{display:none}
.hs-cta .hs-display{font-size:clamp(40px,5.4vw,82px);max-width:1000px;margin-left:auto;margin-right:auto;margin-bottom:22px;letter-spacing:-0.03em;font-weight:800;color:var(--hs-cream)}
.hs-cta p{font-size:16px;line-height:1.65;color:var(--hs-text-2);margin:0 auto 32px;max-width:520px}

/* ============ FOOTER ============ */
.hs-footer{background:#000000;border-top:1px solid rgba(244,234,219,0.08);padding:52px 0 32px;font-family:var(--hs-sans);position:relative;z-index:4;overflow:hidden}
.hs-footer .hs-wrap{position:relative;z-index:2}
.hs-footer-grid{display:grid;grid-template-columns:2fr 3fr;gap:60px;align-items:start}
.hs-footer-brand{display:flex;flex-direction:column;gap:18px}
.hs-footer-logo{font-family:var(--hs-sans);font-weight:800;font-size:28px;color:var(--hs-cream);line-height:1;letter-spacing:-0.02em}
.hs-footer-logo span{color:var(--hs-gold)}
.hs-footer-microcopy{font-size:13px;line-height:1.7;color:var(--hs-text-2);max-width:460px;margin:0}
.hs-footer nav{display:flex;justify-content:flex-end}
.hs-footer-links{display:flex;gap:36px;list-style:none;margin:6px 0 0;padding:0}
.hs-footer-links a{color:var(--hs-text);text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.hs-footer-links a:hover{color:var(--hs-gold)}
.hs-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;margin-top:52px;border-top:1px solid rgba(244,234,219,0.10);font-size:11px;color:var(--hs-muted);letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ============ REVEALS ============ */
.hs-reveal{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.hs-reveal.in{opacity:1;transform:none}
.hs-reveal[data-delay="1"]{transition-delay:.08s}
.hs-reveal[data-delay="2"]{transition-delay:.16s}
.hs-reveal[data-delay="3"]{transition-delay:.24s}
.hs-reveal[data-delay="4"]{transition-delay:.32s}

/* ============ RESPONSIVE ============ */
/* Tablet + smaller laptops */
@media (max-width:900px){
  .hero_root__N0Loz{height:1900px!important}
  .hs-services-head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  .hs-services-grid{grid-template-columns:1fr;gap:16px}
  .hs-service{aspect-ratio:4/3}
  .hs-why-head{margin-bottom:40px}
  .hs-why-row{grid-template-columns:1fr;gap:10px;padding:32px 0}
  .hs-why-num{font-size:58px}
  .hs-team-grid{grid-template-columns:1fr;gap:32px}
  .hs-recruit-grid{grid-template-columns:1fr;gap:32px}
  .hs-footer-grid{grid-template-columns:1fr;gap:32px}
  .hs-footer nav{justify-content:flex-start}
  .hs-footer-links{gap:20px;flex-wrap:wrap}
  .hs-footer-bottom{flex-direction:column;gap:16px;align-items:flex-start;text-align:left}
  .hs-field-row{grid-template-columns:1fr}
  .hs-option-grid{grid-template-columns:1fr}
  .hs-nightsky{min-height:88vh;padding:72px 0 96px}
  .hs-nightsky-moon{top:14%;right:10%;width:84px}
  .hs-nightsky-inner{max-width:92%}
  .hs-nightsky .hs-display{font-size:clamp(22px,5.2vw,32px)}
  .hs-nightsky-drift{width:100%}
  /* Hide the scraped nav items and CONTACT button below tablet — the        */
  /* hamburger drawer handles all nav now.                                    */
  .header_nav__if_jI{display:none!important}
  .header_actions__Sv09J{display:none!important}
  .hs-mobile-toggle{display:block}
}

/* Mobile phones */
@media (max-width:600px){
  /* Fix mobile browser dead space at bottom — scraped CSS has html{height:100%}   */
  /* combined with flex layout which causes extra space on iOS Safari and Firefox  */
  html,body{height:auto!important;min-height:auto!important}
  body{display:block!important}
  body main{flex:none!important;min-height:auto!important}
  .hs-footer{margin-bottom:0!important;padding-bottom:env(safe-area-inset-bottom,24px)!important}
  /* Hero height is set to auto below in the "DISABLE SCRAPED HERO ANIMATION" block */
  /* The composite logo mask needs to be repositioned on mobile. On desktop    */
  /* the scraped .hero_house container is 170.8rem tall and extends way above  */
  /* the viewport, so the mask at 28% catches the image naturally. On mobile   */
  /* the container is only 33.4rem with object-fit:contain — the image never   */
  /* reaches y=28%, so the mask landed over empty space and only fragments of  */
  /* the logo rendered. Move the mask down to ~55% where the image lives.      */
  /* Mask at 75% drops the composite from mid-viewport to lower-viewport so  */
  /* it sits closer to the nightsky text (which is near its section bottom).  */
  /* Both move 1:1 after sticky release so their viewport gap stays ~15svh   */
  /* instead of ~35svh at 55%. Image still extends past the mask at this y.  */
  /* Mask at 82% is the LANDING position — that's where the hero image     */
  /* actually is in viewport (hero_house is object-fit:contain, so image   */
  /* sits around 60-100% of composite container). JS translates composite */
  /* UP by up to 40svh during early reveal so logo shows at upper middle,  */
  /* then drifts back to 0 at p=1 where mask at 82% lands near nightsky.  */
  .hero_composite__3blHB{mask-position:center 82%!important;-webkit-mask-position:center 82%!important;mask-size:min(80vw,560px) min(22vw,152px)!important;-webkit-mask-size:min(80vw,560px) min(22vw,152px)!important}
  /* MOBILE PERF: Kill the per-frame sepia/brightness/saturate filter on hero  */
  /* children. That multi-function filter recomputing on 6+ layers every      */
  /* scroll frame is what killed mobile perf. filter:none lets the compositor */
  /* cache these layers. Transforms stay — they're GPU-cheap on their own.    */
  .hero_back__8ReFI,.hero_clouds__bC7V4,.hero_smoke__8za_R,.hero_content__DK_Ny,.hero_overlap__d3EJV,.hero_bg__S_r_n > .hero_house__aJy7p,.hero_overlay__7ubgG{filter:none!important}
  /* Promote composite and content to their own GPU layers. */
  .hero_composite__3blHB,.hero_content__DK_Ny{will-change:transform,opacity}
  /* Very tight bottom fade (just last 8%) — blends hero edge into dark html */
  /* bg to prevent the hard horizontal cut, without creating a big fade     */
  /* "dead zone" that looks like empty padding before the next section.      */
  .hero_back__8ReFI,
  .hero_bg__S_r_n > .hero_house__aJy7p,
  .hero_clouds__bC7V4,
  .hero_smoke__8za_R{
    -webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
  }
  /* Extra cloud haze via CSS gradients (no images, no mask-inheritance)     */
  /* at the BOTTOM of viewport only, so hero title/buttons stay unobstructed. */
  /* Gradients are compositor-cheap vs. image-based pseudos with mask.        */
  .hero_clouds__bC7V4{
    background-image:
      radial-gradient(ellipse 60% 22% at 25% 78%,rgba(255,240,225,0.38),transparent 70%),
      radial-gradient(ellipse 70% 18% at 78% 88%,rgba(255,235,210,0.32),transparent 70%),
      radial-gradient(ellipse 85% 15% at 50% 96%,rgba(255,230,200,0.4),transparent 70%);
  }
  /* Kill the scraped header backdrop-filter on mobile. blur(16px) resamples  */
  /* and reblurs the entire backdrop every scroll frame — huge hidden cost.   */
  /* But disabling backdrop-filter also removes the header's implicit GPU    */
  /* layer promotion, and iOS Safari then detaches position:fixed during    */
  /* elastic overscroll / rubber-band refresh. Force a GPU layer explicitly  */
  /* so the header stays glued to viewport top even during momentum scroll.  */
  .header_wrapper__MJ5bn{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#0A0A0A!important;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    will-change:transform;
    -webkit-backface-visibility:hidden;
  }
  /* Drawer overlay also drops its blur. */
  .hs-mobile-drawer-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,0.72)}
  /* ============ MOBILE: STATIC HERO (no scroll animation) ============       */
  /* Hero is a compact single-viewport section. 80svh is enough for title,    */
  /* subtitle, eyebrow, and buttons with comfortable padding, and leaves      */
  /* less "dead" space below the buttons before the next section starts.      */
  .hero_root__N0Loz{height:80svh!important;height:80vh!important;margin-top:0!important;margin-bottom:0!important;overflow:visible!important}
  .hero_top__WegWw{position:relative!important;top:auto!important;height:80svh!important;height:80vh!important}
  .hero_bg__S_r_n{position:absolute!important;inset:0}
  /* Hide the composite logo on mobile — no scroll reveal animation now,     */
  /* so the masked logo layer has no purpose. The hs-theme header already   */
  /* shows the "HomeSellers" branding at the top of every page.              */
  .hero_composite__3blHB{display:none!important}
  /* Composite mask repositioned for mobile viewport — 55% aligns with where the */
  /* image sits after object-fit:contain on the smaller mobile container.         */
  /* Mask at 75% drops the composite from mid-viewport to lower-viewport so  */
  /* it sits closer to the nightsky text (which is near its section bottom).  */
  /* Both move 1:1 after sticky release so their viewport gap stays ~15svh   */
  /* instead of ~35svh at 55%. Image still extends past the mask at this y.  */
  /* Mask at 82% is the LANDING position — that's where the hero image     */
  /* actually is in viewport (hero_house is object-fit:contain, so image   */
  /* sits around 60-100% of composite container). JS translates composite */
  /* UP by up to 40svh during early reveal so logo shows at upper middle,  */
  /* then drifts back to 0 at p=1 where mask at 82% lands near nightsky.  */
  .hero_composite__3blHB{mask-position:center 82%!important;-webkit-mask-position:center 82%!important;mask-size:min(80vw,560px) min(22vw,152px)!important;-webkit-mask-size:min(80vw,560px) min(22vw,152px)!important}
  /* Static final-frame transform on composite's inner house — JS skips the */
  /* per-frame transform on mobile for perf, this puts the image at its    */
  /* "landed" (p=1) position so the mask catches the correct skyline part. */
  /* Values from FRAMES[20]: hY=-38.47%, hScale=1.2885.                      */
  .hero_composite__3blHB > .hero_house__aJy7p{
    transform:translate3d(0,-38.47%,0) scale(1.2885,1.2885)!important;
  }
  /* Static transforms for non-animated elements */
  .hero_back__8ReFI,.hero_clouds__bC7V4,.hero_smoke__8za_R,.hero_cloud__TvA3o{transform:none!important}
  /* Content transform stays locked (JS skips it on mobile) but opacity is    */
  /* JS-driven so the hero text fades as you scroll, same as desktop.         */
  .hero_content__DK_Ny{transform:none!important}
  /* Drop smoke and overlap layers but keep clouds visible (static). */
  .hero_smoke__8za_R,.hero_overlap__d3EJV{display:none!important}
  /* Remove the scraped :first-child negative margin-top — the hero is no     */
  /* longer hiding under the header, it's a normal section.                   */
  .hero_root__N0Loz:first-child{margin-top:0!important}
  /* Hide the moon overlay entirely on mobile — the hero doesn't run the      */
  /* scroll animation that fed it --ns-p, and the night sky section reads    */
  /* cleanly without it at phone viewport.                                    */
  .hs-moon-overlay{display:none!important}
  /* Nightsky stays BELOW sticky hero_top (z:20) so the composite logo         */
  /* remains visible during the overlap and appears to "land" in the night     */
  /* sky — matches desktop. Non-composite hero children already fade via      */
  /* opacity:var(--hero-alpha), so only the masked logo shows through.         */
  /* Drop heavy ambient effects on mobile for perf. */
  .hs-nightsky-drift{display:none}
  .hs-nightsky-stars-back{display:none}
  .hs-nightsky-shooting-star{display:none}
  .hs-nightsky-moon{animation:none}
  .hs-nightsky-city-lights{animation:none}
  .hs-nightsky-stars{animation:none}
  /* Compact scraped header on mobile. Kill the scraped 8.4rem min-height,     */
  /* collapse to 2-column grid (nav is display:none so the 3-col template      */
  /* leaves a useless empty column that stretches the actions wrapper).        */
  .header_wrapper__MJ5bn{padding:6px 14px!important}
  .header_content__cVJDb{grid-template-columns:auto auto!important;justify-content:space-between!important;column-gap:12px!important;min-height:0!important}
  .header_logo__LO_Jk{width:140px!important;height:40px!important}
  .header_actions__Sv09J{justify-self:end!important}
  /* Push the hero content BELOW the fixed header. The scraped hero has       */
  /* margin-top:-8.4rem pulling it under the header, so on mobile we need     */
  /* to add padding-top inside the content grid to clear it. Also switch to   */
  /* align-items:start so the content stacks from the top instead of being   */
  /* vertically centered (which pushed the title UP into the header).        */
  .hero_content__DK_Ny{align-items:start!important;padding-top:120px!important;padding-bottom:60px!important}
  /* Shrink scraped hero title to fit mobile. */
  .hero_title__JpmHS h1{font-size:clamp(30px,7.4vw,40px)!important;line-height:1.1!important}
  .hero_title__JpmHS p{font-size:14px!important}
  .hero_actions__RlphJ{gap:10px!important;margin:2rem 0 0!important;justify-content:center!important}
  .hs-btn{padding:14px 20px!important;font-size:11px!important;letter-spacing:.14em!important}
  .hs-btn-lg{padding:15px 22px!important;font-size:11px!important;letter-spacing:.14em!important}
  .hs-section{padding:clamp(32px,8vw,52px) 0}
  .hs-wrap{padding:0 clamp(18px,5vw,28px)}
  .hs-display{font-size:clamp(24px,6vw,32px);margin:0 0 14px}
  .hs-eyebrow-label{font-size:10px;margin-bottom:14px}
  .hs-lead{font-size:14px}
  /* Services — disable parallax on mobile for smoother scroll */
  .hs-services-head{margin-bottom:28px}
  .hs-service{aspect-ratio:16/10}
  .hs-service::before{transform:scale(1.1)!important;will-change:auto!important}
  .hs-service-inner{padding:22px 20px 22px}
  .hs-service-num{font-size:42px}
  .hs-service h3{font-size:17px}
  .hs-service p{font-size:12px}
  /* Why */
  .hs-why-head{margin-bottom:28px}
  .hs-why-row{padding:24px 0}
  .hs-why-num{font-size:44px}
  .hs-why-body h3{font-size:19px;margin:4px 0 8px}
  .hs-why-body p{font-size:14px}
  /* Team */
  .hs-team-grid{gap:24px}
  .hs-team-image{aspect-ratio:4/3}
  .hs-team-text p{font-size:14px}
  .hs-team-text .hs-display{margin-bottom:16px}
  /* Recruit */
  .hs-recruit-grid{gap:24px}
  .hs-recruit-intro p{font-size:14px;margin-bottom:20px}
  .hs-recruit-list li{padding:12px 16px;font-size:14px;gap:12px}
  /* CTA */
  .hs-cta{padding:clamp(48px,12vw,72px) 0}
  .hs-cta .hs-display{font-size:clamp(30px,8vw,46px);margin-bottom:14px}
  .hs-cta p{font-size:14px;margin-bottom:22px}
  /* Footer */
  .hs-footer{padding:36px 0 24px}
  .hs-footer-grid{gap:24px}
  .hs-footer-logo{font-size:24px}
  /* Night sky — very compact mobile. Content at top of section (flex-start) */
  /* with minimal padding. Small min-height so the section doesn't balloon.  */
  .hs-nightsky{min-height:22vh!important;align-items:flex-start!important;padding:16px 0 20px!important}
  .hs-nightsky-moon{top:10%;right:8%;width:60px}
  .hs-nightsky-inner{max-width:100%;padding:0 18px}
  .hs-nightsky .hs-display{font-size:22px}
  .hs-nightsky .hs-lead{font-size:13px;max-width:100%}
  .hs-nightsky-skyline{height:40%}
  /* Landed logo is hidden on mobile — we use the real hero composite now */
  .hs-nightsky-landed-logo{display:none!important}
  /* Page hero on subpages */
  .hs-page-hero{min-height:56vh;padding:140px 0 80px}
  .hs-page-hero .hs-display{font-size:clamp(28px,7vw,42px);margin-bottom:16px}
  .hs-page-hero p{font-size:14px;margin-bottom:24px}
  /* Forms */
  .hs-form-head{margin-bottom:36px}
  .hs-form{gap:32px}
  .hs-form-group{gap:16px}
  .hs-input,.hs-select,.hs-textarea{padding:14px 16px;font-size:15px}
  /* Prose + locations */
  .hs-prose p{font-size:15px;line-height:1.72}
  .hs-feature-card{padding:28px 22px 26px}
  .hs-feature-card h3{font-size:18px}
  .hs-feature-card p{font-size:13px}
  /* Touch-friendly button padding */
  .hs-btn{padding:16px 26px!important}
  .hs-btn-lg{padding:18px 32px!important}
}

/* Very small phones */
@media (max-width:380px){
  .hs-display{font-size:22px}
  .hs-cta .hs-display{font-size:28px}
  .hs-nightsky-moon{width:54px;top:10%;right:6%}
}