/* ============================================================
   GEORGE RESIDENCE — Design System
   Quiet Lagos Luxury · charcoal grounds, champagne accents
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../assets/fonts/fraunces-var.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../assets/fonts/mulish-var.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../assets/fonts/mulish-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --charcoal:#18160F;
  --charcoal-2:#211E15;
  --charcoal-3:#2B2719;
  --gold:#FAA836;
  --champagne:#C89B4B;
  --champagne-deep:#A87A24;
  --travertine:#F0EBE1;
  --paper:#FAF8F3;
  --umber:#6E6350;
  --stone:#9C927E;
  --cream-text:#EFE8D9;
  --cream-dim:#B7AD97;
  --line-dark:rgba(239,232,217,.14);
  --line-light:#DDD5C4;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Mulish', 'Segoe UI', system-ui, sans-serif;

  --text-xs:.6875rem;   /* 11 labels   */
  --text-sm:.8125rem;   /* 13 captions */
  --text-base:1rem;     /* 16 body     */
  --text-md:1.1875rem;  /* 19 lead     */
  --text-lg:clamp(1.5rem,2.6vw,2.125rem);
  --text-xl:clamp(2.125rem,4.2vw,3.5rem);
  --text-hero:clamp(2.75rem,6.4vw,5.5rem);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:160px;

  --container:1280px;
  --gutter:clamp(20px,4vw,56px);
  --ease-lux:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--cream-text);
  background:var(--charcoal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit}
::selection{background:var(--champagne); color:var(--charcoal)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

/* Light sections */
.sect-light{background:var(--travertine); color:var(--charcoal)}
.sect-light .eyebrow{color:var(--champagne-deep)}
.sect-light .lead, .sect-light p{color:var(--umber)}
.sect-light h2, .sect-light h3{color:var(--charcoal)}

/* ---------- Typography ---------- */
.eyebrow{
  font-size:var(--text-xs); font-weight:800; letter-spacing:.32em;
  text-transform:uppercase; color:var(--champagne); margin-bottom:var(--s3);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; opacity:.6}
.h-display{
  font-family:var(--font-display); font-weight:450; line-height:1.04;
  letter-spacing:.005em; text-wrap:balance;
}
h1.h-display{font-size:var(--text-hero)}
h2.h-display{font-size:var(--text-xl)}
h3.h-display{font-size:var(--text-lg); font-weight:500}
.lead{font-size:var(--text-md); line-height:1.75; color:var(--cream-dim); max-width:58ch}
.small-caps-label{
  font-size:var(--text-xs); font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--stone);
}
em.gold{font-style:italic; color:var(--champagne)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--text-sm); font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:18px 34px; border-radius:2px;
  transition:background .35s var(--ease-lux), color .35s var(--ease-lux), border-color .35s;
  position:relative; white-space:nowrap;
}
.btn .arr{transition:transform .35s var(--ease-lux)}
.btn:hover .arr{transform:translateX(5px)}
.btn-gold{background:var(--gold); color:var(--charcoal)}
.btn-gold:hover{background:var(--champagne)}
.btn-outline{border:1px solid var(--line-dark); color:var(--cream-text)}
.btn-outline:hover{border-color:var(--champagne); color:var(--champagne)}
.sect-light .btn-outline{border-color:var(--line-light); color:var(--charcoal)}
.sect-light .btn-outline:hover{border-color:var(--champagne-deep); color:var(--champagne-deep)}
.link-line{
  font-size:var(--text-sm); font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--champagne); display:inline-flex; align-items:center; gap:10px;
  padding-bottom:6px; position:relative;
}
.link-line::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(.35); transform-origin:left;
  transition:transform .45s var(--ease-lux);
}
.link-line:hover::after{transform:scaleX(1)}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:200; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
}
.preloader .mark{
  font-family:var(--font-display); font-size:clamp(40px,7vw,72px); color:var(--cream-text);
  letter-spacing:.06em;
}
.preloader .mark em{font-style:italic; color:var(--gold)}
.preloader .rule{width:0; height:1px; background:var(--champagne)}
.preloader .tag{font-size:var(--text-xs); letter-spacing:.4em; text-transform:uppercase; color:var(--stone)}

/* ---------- Page transition curtain ---------- */
.curtain{
  position:fixed; inset:0; z-index:190; background:var(--charcoal-2);
  transform:scaleY(0); transform-origin:top; pointer-events:none;
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .5s, box-shadow .5s, transform .45s var(--ease-lux);
}
.nav.scrolled{background:rgba(24,22,15,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-dark)}
.nav.hidden{transform:translateY(-100%)}
.nav-inner{
  max-width:var(--container); margin-inline:auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; height:88px;
}
/* Recolor the yellow script logo to the Book Now gold (#FAA836) */
.nav-logo img{height:40px; width:auto; filter:brightness(0) saturate(100%) invert(70%) sepia(66%) saturate(1400%) hue-rotate(340deg) brightness(103%) contrast(96%)}
.nav-links{display:flex; gap:40px; list-style:none}
.nav-links a{
  font-size:var(--text-xs); font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-dim); padding:8px 0; position:relative; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-lux);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--cream-text)}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-book{display:inline-flex}
.nav-burger{display:none; flex-direction:column; gap:6px; padding:10px}
.nav-burger span{width:26px; height:1.5px; background:var(--cream-text); transition:transform .35s, opacity .35s}

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:95; background:var(--charcoal-2);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s;
}
.mobile-menu.open{opacity:1; visibility:visible}
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(30px,8vw,46px); line-height:1.5;
  color:var(--cream-text); border-bottom:1px solid var(--line-dark); padding:10px 0;
}
.mobile-menu a:hover{color:var(--champagne)}
@media(max-width:960px){
  .nav-links,.nav-book{display:none}
  .nav-burger{display:flex}
  body.menu-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.menu-open .nav-burger span:nth-child(2){opacity:0}
  body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:-8% 0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,22,15,.5) 0%, rgba(24,22,15,.28) 38%, rgba(24,22,15,.72) 70%, rgba(24,22,15,.96) 100%);
}
.hero-content{
  position:relative; z-index:1; width:100%;
  max-width:var(--container); margin-inline:auto; padding:150px var(--gutter) 140px;
}
.hero-kicker{
  display:flex; align-items:center; gap:16px; margin-bottom:var(--s3);
  font-size:var(--text-xs); font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
.hero-kicker::before{content:""; width:48px; height:1px; background:var(--gold)}
.hero h1{color:#FDFBF6; max-width:13ch}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line > span{display:block}
.hero-sub{margin-top:var(--s3); font-size:var(--text-md); color:#F3EDE0; max-width:52ch; text-shadow:0 2px 22px rgba(10,9,5,.75), 0 1px 3px rgba(10,9,5,.5)}
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:44px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-dim);
  writing-mode:vertical-rl;
}
.hero-scroll::after{content:""; width:1px; height:56px; background:linear-gradient(var(--champagne), transparent)}

/* ---------- Booking bar ---------- */
.booking-bar{
  margin-top:var(--s5);
  background:rgba(24,22,15,.72); backdrop-filter:blur(18px);
  border:1px solid var(--line-dark); border-radius:3px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr .8fr auto; align-items:stretch;
}
.booking-field{
  padding:18px 22px; border-right:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:5px;
}
.booking-field label{
  font-size:10px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--stone);
}
.booking-field select, .booking-field input{
  background:transparent; border:none; color:var(--cream-text);
  font-family:var(--font-body); font-size:15px; font-weight:600; width:100%;
  color-scheme:dark;
}
.booking-field select:focus, .booking-field input:focus{outline:none}
.booking-field select option{background:var(--charcoal-2); color:var(--cream-text)}
.booking-submit{
  background:var(--gold); color:var(--charcoal);
  font-size:var(--text-sm); font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:0 40px; transition:background .35s;
  display:flex; align-items:center; gap:10px;
}
.booking-submit:hover{background:var(--champagne)}
@media(max-width:960px){
  .booking-bar{grid-template-columns:1fr 1fr}
  .booking-field{border-bottom:1px solid var(--line-dark)}
  .booking-submit{grid-column:1/-1; padding:18px; justify-content:center}
}

/* Sticky booking pill (appears on scroll) */
.book-pill{
  position:fixed; bottom:28px; right:28px; z-index:90;
  background:var(--gold); color:var(--charcoal); border-radius:999px;
  padding:16px 30px; font-size:var(--text-sm); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.55);
  display:inline-flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s, transform .4s var(--ease-lux), background .3s;
}
.book-pill.show{opacity:1; transform:none; pointer-events:auto}
.book-pill:hover{background:var(--champagne)}

/* ---------- Sections ---------- */
.section{padding:var(--s8) 0}
.section-head{margin-bottom:var(--s6); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.section-head .h-display{max-width:20ch}

/* Editorial split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center}
.split .media{position:relative; overflow:hidden; border-radius:3px}
.split .media img{transition:transform 1.2s var(--ease-lux)}
.split .media:hover img{transform:scale(1.04)}
.split blockquote{
  font-family:var(--font-display); font-size:var(--text-lg); font-style:italic;
  line-height:1.4; color:var(--champagne); margin:var(--s4) 0;
}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:var(--s5)}}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-block:1px solid var(--line-dark)}
.stat{background:var(--charcoal); padding:var(--s5) var(--s4); text-align:center}
.stat .num{
  font-family:var(--font-display); font-size:clamp(2.4rem,4.5vw,3.6rem); color:var(--champagne);
  font-variant-numeric:tabular-nums; line-height:1;
}
.stat .num sup{font-size:.45em; margin-left:2px}
.stat .lab{margin-top:12px; font-size:var(--text-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--stone); font-weight:800}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- Residence showcase (horizontal on desktop) ---------- */
.showcase{position:relative}
.showcase-track{display:flex; gap:clamp(20px,2.5vw,36px); will-change:transform}
.res-card{
  position:relative; flex:0 0 clamp(300px,38vw,520px); border-radius:3px; overflow:hidden;
  aspect-ratio:4/5; background:var(--charcoal-3);
}
.res-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-lux)}
.res-card:hover img{transform:scale(1.06)}
.res-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(20,18,12,.9) 100%);
}
.res-card .info{position:absolute; left:26px; right:26px; bottom:24px; z-index:2}
.res-card .loc{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:800}
.res-card .name{font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2.2rem); color:#FDFBF6; margin:8px 0 6px}
.res-card .specs{font-size:var(--text-sm); color:var(--cream-dim); display:flex; gap:18px}
.res-card .specs span{display:inline-flex; align-items:center; gap:7px}
.res-card .view{
  position:absolute; top:20px; right:20px; z-index:2;
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(253,251,246,.4);
  display:grid; place-items:center; color:#FDFBF6;
  opacity:0; transform:scale(.8); transition:opacity .4s, transform .4s var(--ease-lux), background .3s;
}
.res-card:hover .view{opacity:1; transform:none}
.res-card .view:hover{background:var(--gold); color:var(--charcoal); border-color:var(--gold)}
/* grid fallback (mobile / listing page) */
.res-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(20px,2.5vw,36px)}
.res-grid .res-card{flex:none; aspect-ratio:4/5}

/* ---------- Amenities marquee ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line-dark); padding:34px 0;
  display:flex; user-select:none;
}
.marquee-inner{display:flex; gap:0; animation:marquee 38s linear infinite; flex-shrink:0}
.marquee:hover .marquee-inner{animation-play-state:paused}
.marquee-item{
  display:inline-flex; align-items:center; gap:26px; padding-inline:26px; white-space:nowrap;
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,2rem); color:var(--cream-dim); font-style:italic;
}
.marquee-item::after{content:"✦"; font-size:.55em; color:var(--champagne); font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Press band ---------- */
.press{padding:var(--s6) 0}
.press-logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s5) var(--s4);
}
.press-logos img{
  height:34px; width:auto; filter:grayscale(1) brightness(.75) contrast(1.1);
  opacity:.55; transition:filter .4s, opacity .4s;
}
.sect-light .press-logos img{filter:grayscale(1) contrast(1.05); opacity:.5}
.press-logos img:hover{filter:none; opacity:1}

/* ---------- Testimonials ---------- */
.testimonials{position:relative; text-align:center; max-width:820px; margin-inline:auto; min-height:300px}
.testimonial{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s, visibility .8s}
.testimonial.active{opacity:1; visibility:visible}
.testimonial .quote{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.8vw,2.1rem); font-style:italic;
  line-height:1.45; color:var(--cream-text); text-wrap:balance;
}
.testimonial .who{margin-top:var(--s4); font-size:var(--text-xs); letter-spacing:.26em; text-transform:uppercase; color:var(--champagne); font-weight:800}
.testimonial .stars{color:var(--gold); letter-spacing:6px; margin-bottom:var(--s3); font-size:15px}
.testi-dots{display:flex; gap:10px; justify-content:center; margin-top:var(--s3)}
.testi-dots button{width:32px; height:2px; background:var(--line-dark); transition:background .3s}
.testi-dots button.active{background:var(--gold)}

/* ---------- Locations ---------- */
.loc-list{border-top:1px solid var(--line-light)}
.loc-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4);
  padding:30px 4px; border-bottom:1px solid var(--line-light);
  transition:padding .4s var(--ease-lux);
}
.loc-row:hover{padding-left:18px}
.loc-row .idx{font-size:var(--text-xs); color:var(--champagne-deep); font-weight:800; font-variant-numeric:tabular-nums}
.loc-row .name{font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.4rem); color:var(--charcoal)}
.loc-row .meta{font-size:var(--text-sm); color:var(--umber); letter-spacing:.08em; text-transform:uppercase; font-weight:700}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; padding:var(--s9) 0; text-align:center}
.cta-band .bg{position:absolute; inset:-10% 0; z-index:0}
.cta-band .bg img{width:100%; height:100%; object-fit:cover}
.cta-band .bg::after{content:""; position:absolute; inset:0; background:rgba(20,18,12,.78)}
.cta-band .container{position:relative; z-index:1}
.cta-band h2{color:#FDFBF6; max-width:18ch; margin-inline:auto}
.cta-band .btn{margin-top:var(--s5)}

/* ---------- Footer ---------- */
.footer{background:#121109; border-top:1px solid var(--line-dark); padding:var(--s7) 0 var(--s4)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:var(--s6)}
.footer .logo img{height:44px; filter:brightness(0) saturate(100%) invert(70%) sepia(66%) saturate(1400%) hue-rotate(340deg) brightness(103%) contrast(96%)}
.footer .about{margin-top:var(--s3); font-size:var(--text-sm); color:var(--stone); max-width:36ch; line-height:1.8}
.footer h4{font-size:var(--text-xs); letter-spacing:.26em; text-transform:uppercase; color:var(--champagne); margin-bottom:var(--s3); font-weight:800}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:12px}
.footer ul a, .footer address{font-size:var(--text-sm); color:var(--cream-dim); font-style:normal; line-height:1.8; transition:color .3s}
.footer ul a:hover{color:var(--gold)}
.footer-bottom{
  margin-top:var(--s7); padding-top:var(--s3); border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:var(--text-xs); color:var(--stone); letter-spacing:.08em;
}
@media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Reveal primitives (JS adds .is-in) ---------- */
[data-reveal]{opacity:0; transform:translateY(36px)}
[data-reveal].is-in{opacity:1; transform:none; transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{transform:none}
.img-veil{position:relative; overflow:hidden}
.img-veil::after{
  content:""; position:absolute; inset:0; background:var(--charcoal-2);
  transform:scaleX(1); transform-origin:right; transition:transform 1.1s var(--ease-lux);
}
.img-veil.is-in::after{transform:scaleX(0)}

/* ---------- Detail page ---------- */
.detail-hero{position:relative; min-height:72svh; display:flex; align-items:flex-end; overflow:hidden}
.detail-hero .hero-media::after{background:linear-gradient(180deg, rgba(24,22,15,.35), rgba(24,22,15,.85))}
.detail-specs{display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s3)}
.detail-specs .spec{display:flex; flex-direction:column; gap:4px}
.detail-specs .spec b{font-size:var(--text-md); color:var(--cream-text); font-variant-numeric:tabular-nums}
.detail-specs .spec span{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); font-weight:800}
.gallery-duo{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(16px,2vw,28px)}
.gallery-duo .media{border-radius:3px; overflow:hidden}
.gallery-duo img{width:100%; height:100%; object-fit:cover}
@media(max-width:760px){.gallery-duo{grid-template-columns:1fr}}
.amenity-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1px; background:var(--line-light); border:1px solid var(--line-light); border-radius:3px; overflow:hidden}
.amenity{background:var(--travertine); padding:26px 24px; display:flex; align-items:center; gap:14px; font-size:var(--text-sm); font-weight:700; color:var(--charcoal)}
.amenity svg{color:var(--champagne-deep); flex-shrink:0}
.sticky-book{
  position:sticky; top:110px; background:var(--charcoal-2); border:1px solid var(--line-dark);
  border-radius:3px; padding:var(--s4);
}
.sticky-book .price{font-family:var(--font-display); font-size:1.8rem; color:var(--champagne)}
.sticky-book .price span{font-size:.5em; font-family:var(--font-body); color:var(--stone); letter-spacing:.1em}
.detail-layout{display:grid; grid-template-columns:1.7fr 1fr; gap:var(--s7); align-items:start}
@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.sticky-book{position:static}}

/* ---------- Book hub ---------- */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(20px,2.5vw,32px)}
.hub-card{
  background:var(--charcoal-2); border:1px solid var(--line-dark); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .4s, transform .5s var(--ease-lux);
}
.hub-card:hover{border-color:var(--champagne); transform:translateY(-6px)}
.hub-card .media{aspect-ratio:16/10; overflow:hidden}
.hub-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-lux)}
.hub-card:hover .media img{transform:scale(1.05)}
.hub-card .body{padding:var(--s4); display:flex; flex-direction:column; gap:10px; flex:1}
.hub-card h3{font-family:var(--font-display); font-size:1.5rem; color:var(--cream-text); font-weight:500}
.hub-card p{font-size:var(--text-sm); color:var(--stone); flex:1}
.hub-card .link-line{margin-top:var(--s2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.4rem); color:var(--charcoal);
  padding:26px 44px 26px 4px; cursor:pointer; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); color:var(--champagne-deep); font-size:1.4rem; font-weight:400;
  transition:transform .35s var(--ease-lux);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .answer{padding:0 4px 28px; color:var(--umber); max-width:68ch}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.form-grid .full{grid-column:1/-1}
.field label{display:block; font-size:var(--text-xs); font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--umber); margin-bottom:8px}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:1px solid var(--line-light); border-radius:2px;
  padding:15px 16px; font-family:var(--font-body); font-size:15px; color:var(--charcoal);
  transition:border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--champagne-deep)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.skip-link{
  position:absolute; top:-48px; left:16px; z-index:300; background:var(--gold); color:var(--charcoal);
  padding:10px 18px; font-weight:800; border-radius:2px; transition:top .3s;
}
.skip-link:focus{top:14px}

/* ---------- Mobile polish ---------- */
@media(max-width:900px){
  /* Featured residences become a swipeable carousel (the pinned
     horizontal scroll is desktop-only) */
  .showcase-track{
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:14px;
    scrollbar-width:none;
  }
  .showcase-track::-webkit-scrollbar{display:none}
  .showcase-track .res-card{flex:0 0 80vw; scroll-snap-align:center}
}
@media(max-width:640px){
  .hero{min-height:94svh}
  .hero-content{padding-top:130px; padding-bottom:100px}
  .hero-media img{object-position:60% center}
  .split .media img{width:100%; aspect-ratio:4/3; object-fit:cover}
  .res-card{aspect-ratio:3/4}
  .section{padding:var(--s7) 0}
  .marquee-item{font-size:1.15rem}
  .detail-specs{gap:var(--s3)}
  .gallery-duo img{aspect-ratio:4/3}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  [data-reveal]{opacity:1; transform:none}
  .img-veil::after{display:none}
  .preloader{display:none}
}