/* Keep related content together; section sizes follow the available viewport. */
:root{--section-y:36px;--section-y-compact:32px}
html{scroll-padding-top:74px}
.section-space,.spaces-section,.location-section,.comparison,.faq-section{padding-block:var(--section-y)}
main>section[id]{scroll-margin-top:0}
.section-heading,.section-heading.masterplan-heading,.section-heading.story-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:22px}
.section-heading h2,.masterplan-heading h2,.story-heading h2,.villa-section h2,.spaces-section h2,.location-copy h2,.faq-section h2,.about-copy h2{font-size:clamp(36px,3.5vw,50px);line-height:1.02;max-width:none;margin:0}
.section-heading .eyebrow,.location-copy>.eyebrow,.faq-section>div:first-child>.eyebrow,.about-copy>.eyebrow{margin-bottom:10px;font-size:10px;line-height:1.3}
.section-heading>p,.masterplan-heading>p{max-width:400px;font-size:14px;line-height:1.55;margin:0;padding:0}
.hero{height:62svh;min-height:360px;max-height:600px}
.hero-copy{bottom:36px}
.hero-copy .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(56px,6vw,86px);line-height:.9;margin-bottom:22px}
.collection-strip{min-height:78px;padding-block:16px;gap:32px}
.collection-strip strong{font-size:30px}
.collection-strip>div+div:before{left:-16px}
.collection-strip>a span{font-size:11px}

/* Masterplan retains its aspect ratio and usable villa markers. */
.filter-toolbar{padding-block:8px}
.results-line{min-height:32px;margin:0}
.explorer{width:min(100%,calc(clamp(280px,100svh - 330px,480px)*.951));padding:0;border:0}
.map-viewport{border-radius:14px}
.map-topline{top:12px;left:12px;right:12px}
.map-legend{bottom:10px;left:10px;padding:5px 9px;font-size:11px}

/* The picture, description and controls are a single compact unit. */
.comparison{--villa-photo-height:clamp(160px,28svh,250px)}
.comparison .compare-card{top:6px;width:300px}
.comparison .compare-image{width:calc(var(--villa-photo-height)*.75);height:var(--villa-photo-height);aspect-ratio:3/4;align-self:center;padding:4px;border-radius:22px}
.comparison .compare-image img{border-radius:18px}
.comparison .carousel-stage{height:calc(var(--villa-photo-height) + 208px)}
.comparison .compare-copy{padding:12px 0 0}
.comparison .compare-card .number{font-size:10px;margin-bottom:6px}
.comparison .compare-card h3{font-size:29px;margin:0 0 6px}
.comparison .compare-card .compare-copy>p{font-size:13px;line-height:1.4;margin:0 auto;max-width:290px}
.comparison .compare-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 6px;padding:0}
.comparison .compare-card dl>div{display:block;margin:0}
.comparison .compare-card dt{font-size:9px;letter-spacing:.04em}
.comparison .compare-card dd{font-size:13px;text-align:center;white-space:nowrap;margin:3px 0 0}
.comparison .compare-card .text-button{font-size:13px;min-height:40px;padding:8px 0}
.carousel-controls{margin-top:0;gap:16px;font-size:10px}
.carousel-controls button{width:44px;height:44px}

.gal-stage{border-radius:16px}
.gal-stage-image{height:clamp(220px,43svh,400px);min-height:0}
.gal-stage-caption{left:20px;right:126px;bottom:20px;gap:14px}
.gal-stage-caption>span{font-size:clamp(22px,2.5vw,34px);line-height:1.1}
.gal-stage-nav{right:16px;bottom:16px}
.gal-stage-nav button{width:44px;height:44px}
.gallery-actions{padding:16px 0 0}
.gallery-note{margin-top:12px;font-size:12px}
#galleryArchive{padding-top:24px}

.location-section{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:36px;align-items:center}
.location-image{height:clamp(280px,48svh,420px);min-height:0;grid-row:auto;border-radius:18px}
.location-copy{padding-top:0}
.location-copy h2{margin-bottom:16px}
.location-copy>p:not(.eyebrow){font-size:15px;line-height:1.65;max-width:540px}
.location-highlights{margin:16px 0 0}
.location-highlights li{padding:8px 0;font-size:14px}
.about-layout{gap:40px;align-items:center}
.about-copy h2{margin-bottom:22px}
.about-story+.about-story{margin-top:18px}
.about-story h3,.about-team h3{font-size:26px;margin-bottom:8px}
.about-story p{font-size:15px;line-height:1.6}
.about-image img{height:clamp(280px,48svh,420px);aspect-ratio:auto}
.about-team{margin-top:24px;padding-top:20px;gap:20px}
.about-team p{font-size:14px;line-height:1.5}
.faq-section{gap:36px}
.faq-section>div:first-child{margin:0}
.faq-list summary{font-size:24px;padding:16px 0;min-height:48px}
.faq-list details p{padding-bottom:18px;font-size:15px}
.contact-section{min-height:0;padding:42px var(--gutter)}
.contact-section h2{font-size:clamp(42px,5vw,68px);line-height:1}
.contact-content>.eyebrow{margin-bottom:12px}
.contact-content>p:not(.eyebrow){font-size:15px;margin:16px auto 22px;line-height:1.6}
.contact-hours{margin-top:24px;padding-top:16px}
footer{padding-block:28px}

@media(max-width:800px){
  :root{--section-y:28px;--section-y-compact:28px}
  html{scroll-padding-top:64px}
  .section-heading,.section-heading.masterplan-heading,.section-heading.story-heading{display:block;margin-bottom:16px}
  .section-heading h2,.masterplan-heading h2,.story-heading h2,.villa-section h2,.spaces-section h2,.location-copy h2,.faq-section h2,.about-copy h2{font-size:36px;line-height:1.04}
  .section-heading>p,.masterplan-heading>p{margin-top:10px;max-width:none;font-size:14px;line-height:1.45}
  .hero{height:58svh;min-height:340px;max-height:500px}
  .hero-copy{bottom:28px}
  .hero h1{font-size:clamp(48px,13vw,64px)}
  .hero-copy .eyebrow{font-size:9px}
  .collection-strip{min-height:72px;padding:14px 20px;gap:12px}
  .collection-strip strong{font-size:25px}
  .collection-strip span{font-size:9px}
  .explorer{width:min(100%,calc(clamp(270px,100svh - 300px,390px)*.951))}
  .comparison{--villa-photo-height:clamp(155px,25svh,215px)}
  .comparison .compare-card{width:min(280px,82vw)}
  .comparison .carousel-stage{height:calc(var(--villa-photo-height) + 202px)}
  .comparison .compare-card h3{font-size:27px}
  .comparison .compare-card .compare-copy>p{font-size:13px}
  .gal-stage-image{height:clamp(190px,30svh,280px)}
  .gal-stage-caption{left:14px;right:112px;bottom:16px;display:block}
  .gal-stage-caption strong{display:block;font-size:10px;margin-bottom:6px}
  .gal-stage-caption>span{font-size:23px}
  .gal-stage-nav{right:12px;bottom:12px}
  .location-section{grid-template-columns:1fr;gap:20px}
  .location-image{height:150px;min-height:0}
  .location-image span{left:14px;bottom:12px;font-size:10px}
  .location-copy h2{margin-bottom:12px}
  .location-copy>p:not(.eyebrow){font-size:15px;line-height:1.55}
  .location-highlights{margin-top:12px}
  .location-highlights li{padding:7px 0;font-size:13px}
  .about-layout{grid-template-columns:1fr;gap:18px}
  .about-copy h2{margin-bottom:20px}
  .about-story+.about-story{margin-top:16px}
  .about-story h3,.about-team h3{font-size:25px}
  .about-story p{font-size:15px;line-height:1.55}
  .about-image img{height:140px}
  .about-image figcaption{font-size:9px;padding:28px 14px 12px}
  .about-team{grid-template-columns:1fr;gap:0;margin-top:20px;padding-top:16px}
  .faq-section{grid-template-columns:1fr;gap:18px}
  .faq-section>div:first-child{margin:0}
  .faq-list summary{font-size:22px;padding:14px 0}
  .contact-section{min-height:0;padding:32px 20px}
  .contact-section h2{font-size:42px}
  footer{padding-block:22px}
}
@media(max-width:360px){
  .comparison .carousel-stage{height:calc(var(--villa-photo-height) + 226px)}
}