/* Bay Estate V4 — visual Option B "Immersive resort". Layer loaded after offplan-v4.css (?theme=b).
   Same HTML. Ideas: full-height hero with slow drift, fact marquee under the hero (built by theme-motion.js
   from facts already on the page), strict dark/light rhythm, full-bleed image interludes, image-led
   location and floor-plan sections, big ghost numerals behind section heads, stronger reveals.
   Degrades gracefully: without theme-motion.js there is no marquee and no reveal; layout still holds. */
:root{--tm-marquee:1;--b-ink:#1a221e;--b-dark:#26302b;--b-green:#354b41;--b-cream:#f1ece3;--b-soft:#cfd0c6;--b-gold:#e2d6bd;--b-ease:cubic-bezier(.16,.84,.24,1);--b-pad:clamp(24px,5vw,88px)}
body{overflow-x:clip}
@media(max-width:760px){:root{--b-pad:22px}}

/* Ghost numerals removed (Fares, 1 Oct 2026) */
.ov3-text:before{top:calc(96px - .42em);left:clamp(16px,4vw,72px)}
.band-head.center:before{left:50%;transform:translateX(-50%)}
.dark-band :is(.band-head):before,.plots-intro:before{color:rgba(241,236,227,.06)}
:is(.band-head,.prices-head,.masterplan-head,.plots-intro,.ov3-text)>*{position:relative;z-index:1}
@media(max-width:760px){:is(.band-head,.prices-head,.masterplan-head,.plots-intro,.ov3-text):before{font-size:96px;top:-.3em}.ov3-text:before{top:30px;left:14px}}

/* Hero: taller, deeper scrim, slow drift */
@media(min-width:901px){.hero.v3 .hero-media{height:clamp(540px,calc(100vh - 214px),820px)}}
.hero.v3 .hero-media:after{background:linear-gradient(180deg,rgba(16,20,18,.25) 0%,rgba(16,20,18,0) 28%,rgba(16,20,18,.55) 64%,rgba(16,20,18,.9) 100%)}
.hero-overlay h1{font-size:clamp(58px,8.4vw,128px)}
@media(prefers-reduced-motion:no-preference){.hero .hero-image{animation:b-drift 26s ease-in-out infinite alternate}}
@keyframes b-drift{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.2%)}}

/* Fact marquee (injected under the hero) */
.tm-marquee{position:relative;display:flex;align-items:center;background:var(--b-ink);color:var(--b-cream);border-top:1px solid rgba(226,214,189,.16);border-bottom:1px solid rgba(226,214,189,.16)}
.tm-mq-viewport{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-mq-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:b-marquee 46s linear infinite}
.tm-mq-track li{display:flex;align-items:center;white-space:nowrap;padding:20px 0;font:400 clamp(18px,1.7vw,24px)/1 var(--serif);color:var(--b-cream)}
.tm-mq-track li:after{content:'';width:7px;height:7px;margin:0 clamp(22px,2.6vw,40px);background:var(--b-gold);transform:rotate(45deg);opacity:.7}
.tm-marquee:hover .tm-mq-track,.tm-marquee:focus-within .tm-mq-track,.tm-marquee.is-paused .tm-mq-track{animation-play-state:paused}
.tm-mq-toggle{flex:0 0 auto;width:44px;height:44px;margin:0 clamp(10px,2vw,24px) 0 6px;border-radius:50%;border:1px solid rgba(241,236,227,.35);background:transparent;color:var(--b-cream);font-size:14px}
.tm-mq-toggle:hover{background:var(--b-cream);color:var(--b-ink)}
@keyframes b-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
 .tm-mq-viewport{-webkit-mask:none;mask:none}
 .tm-mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:6px 12px}
 .tm-mq-track li{padding:10px 0;font-size:17px}
 .tm-mq-track .tm-dup,.tm-mq-toggle{display:none}
}
@media(max-width:760px){.tm-mq-track li{padding:15px 0}.tm-mq-toggle{width:40px;height:40px}}

/* Overview: dark fact panel with cream numerals */
.ov3{border-bottom:0}
.fact-panel{background:var(--b-dark)}
.fact-panel>*{border-bottom-color:rgba(241,236,227,.12)!important}
.fact-panel :is(dt,.dt){color:var(--b-gold)!important}
.fact-panel strong{color:var(--b-cream)!important}
.fact-panel small{color:var(--b-soft)!important}
.fact-panel>a.fact:hover{background:#303b35!important}
.fact-panel>a.fact:after{color:var(--b-gold)!important}

/* Unit types: full-bleed sand band, paper cards, image overlay affordance */
.units3{max-width:none;background:var(--sand);padding-inline:max(var(--b-pad),calc((100vw - 1424px)/2))}
.units3 .chip{background:var(--paper)}
.unit{background:var(--paper);box-shadow:0 1px 0 rgba(40,30,15,.06)}
.unit-img{position:relative}
.unit-img img{transition:transform .9s var(--b-ease)}
.unit-img:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,20,18,0) 45%,rgba(16,20,18,.5));opacity:0;transition:opacity .4s}
.unit-img:after{content:none;position:absolute;z-index:2;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--b-cream);color:var(--b-ink);font-size:18px;transform:scale(.8);opacity:0;transition:transform .4s var(--b-ease),opacity .3s}
.unit:hover .unit-img img{transform:scale(1.06)}
.unit:hover .unit-img:before,.unit:hover .unit-img:after,.unit-img:focus-visible:after{opacity:1;transform:none}
@media(hover:none){.unit-img:after{opacity:1;transform:none}}

/* Price list: dark header row */
.price-table thead th{background:var(--b-dark);color:var(--b-gold)}
.price-table tbody tr:hover,.price-table tr[data-card]:hover{background:#f3ece0}

/* Payment: dark numerals panel with a proportional bar */
.big-rows{background:var(--b-dark)!important;position:relative;padding-top:12px}
.big-rows>div{border-bottom-color:rgba(241,236,227,.12)!important}
.big-rows strong{color:var(--b-cream)}
.big-rows b{color:var(--b-cream)}
.big-rows span{color:var(--b-soft)}
.big-rows:before{content:'';position:absolute;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);top:clamp(22px,3vw,34px);height:6px;background:linear-gradient(90deg,var(--b-gold) 0 20%,transparent 20% 20.6%,#a88a5a 20.6% 60%,transparent 60% 60.6%,rgba(241,236,227,.35) 60.6% 100%)}
.big-rows>div:first-child{padding-top:clamp(46px,4.6vw,66px)}

/* Gallery: deeper ink, cinematic slides */
.gal3{background:var(--b-ink)}
@media(min-width:761px){.gal3 .track{grid-auto-columns:min(78%,1180px)}}
.gal3 .track li{aspect-ratio:16/8}
@media(max-width:760px){.gal3 .track li{aspect-ratio:4/3}}
.gal3 a.gal-item img{transition:transform 1s var(--b-ease)}
.gal3 a.gal-item:hover img{transform:scale(1.05)}
.gal3 .go{width:48px;height:48px;background:var(--b-cream)}

/* Brochure: warm glow behind the covers */
.brochure3 .split-media.sand{background:radial-gradient(60% 60% at 55% 50%,#f6efe2 0%,var(--sand) 70%)}
.brochure3 .cover{box-shadow:0 40px 80px rgba(40,30,15,.35),0 6px 16px rgba(40,30,15,.2)}

/* Key features + full-bleed sunset interlude (decorative; authentic Bay Estate brochure image) */
.feat3{padding-left:var(--b-pad);padding-right:var(--b-pad);overflow:clip}
.feat3 a.feat-item{overflow:hidden}
.feat3 a.feat-item img{transition:transform 1s var(--b-ease)}
.feat3 a.feat-item:hover img{transform:scale(1.05)}
.feat3:after{content:'';display:block;height:clamp(200px,30vw,440px);margin:clamp(58px,7vw,96px) calc(-1 * var(--b-pad)) calc(-1 * clamp(58px,7vw,96px));background:linear-gradient(180deg,var(--b-dark) 0%,rgba(38,48,43,0) 30%,rgba(38,48,43,0) 70%,var(--b-green) 100%),image-set(url('/assets/island-overview-fast-1600.avif') type('image/avif'),url('/assets/island-overview.webp') type('image/webp')) center 60%/cover no-repeat}
@media(max-width:760px){.feat3:after{background:linear-gradient(180deg,var(--b-dark) 0%,rgba(38,48,43,0) 30%,rgba(38,48,43,0) 70%,var(--b-green) 100%),image-set(url('/assets/island-overview-fast-800.avif') type('image/avif'),url('/assets/island-overview.webp') type('image/webp')) 30% 60%/cover no-repeat}}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){.feat3:after{animation:b-parallax linear both;animation-timeline:view()}}
}
@keyframes b-parallax{from{background-position:center 20%}to{background-position:center 85%}}

/* Villa plots */
a.plot-card{background:rgba(241,236,227,.04)}
a.plot-card:hover{background:rgba(241,236,227,.1)}

/* Floor plans: full-bleed image with a glass text card */
@media(min-width:761px){
 .fp3{position:relative;grid-template-columns:1fr;min-height:clamp(560px,48vw,720px);align-items:center}
 .fp3 .split-media{position:absolute;inset:0;min-height:0}
 .fp3 .split-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,18,.55) 0%,rgba(16,20,18,.1) 60%);pointer-events:none}
 .fp3 .split-text{position:relative;z-index:2;width:min(560px,calc(100% - 2 * var(--b-pad)));margin:clamp(56px,6vw,96px) var(--b-pad);padding:clamp(32px,3.4vw,52px);background:rgba(26,34,30,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
}

/* Location: heading sits on the aerial, drive strip as a dark bar */
.loc3{max-width:none;padding-inline:0;padding-bottom:0}
.loc3>.band-foot{padding:0 var(--b-pad) clamp(40px,5vw,72px);background:var(--b-ink);margin-top:0}
.loc3>.band-foot .footnote{color:#aeb0a5;padding-top:18px}
.drive-strip{background:var(--b-ink)}
.drive-strip li{border-left-color:rgba(241,236,227,.12)!important;border-top-color:rgba(241,236,227,.12)!important}
.drive-strip strong{color:var(--b-cream)}
.drive-strip span{color:var(--b-soft)}
.drive-strip a.drive:hover{background:#26302b}
@media(min-width:761px){
 .loc3{display:grid;padding-top:0}
 .loc3>.band-head{grid-area:1/1;align-self:start;z-index:2;padding:clamp(56px,6vw,96px) 24px 0;margin:0 auto}
 .loc3>.band-head h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
 .loc3>.band-head p:not(.chip){color:#eef0e8}
 .loc3>.band-head .chip{background:rgba(255,253,248,.14);color:#fff;backdrop-filter:blur(6px)}
 .loc3>.band-head:before{color:rgba(255,255,255,.08)}
 .loc3>.loc-figure{grid-area:1/1;position:relative}
 .loc3>.loc-figure:before{content:'';position:absolute;left:0;right:0;top:0;height:62%;z-index:1;background:linear-gradient(180deg,rgba(10,16,30,.78),rgba(10,16,30,0));pointer-events:none}
 .loc3>.loc-figure picture img,.loc3>.loc-figure>img{aspect-ratio:16/8.2!important}
 .loc3>.band-foot{grid-area:2/1}
}
@media(max-width:760px){.loc3{padding-top:58px}.loc3>.band-head{padding:0 22px}}

/* Masterplan: framed on paper */
.masterplan-map{box-shadow:0 30px 70px -40px rgba(40,30,15,.45)}

/* Amenities: icon discs + hover */
.am svg{color:var(--b-green)}
.am3 .am-grid{gap:12px}
a.am{border:1px solid transparent}
a.am:hover{border-color:var(--b-dark)}
a.am .go{opacity:.9}

/* Sales band: image-led (decorative; authentic beach club render) */
.sales-band{padding-block:clamp(84px,9vw,140px);background:linear-gradient(90deg,rgba(16,20,18,.9) 0%,rgba(16,20,18,.72) 55%,rgba(16,20,18,.5) 100%),image-set(url('/assets/beach-club.webp') type('image/webp')) center 40%/cover no-repeat}
.sales-band h2{font-size:clamp(38px,4.4vw,64px)}
.sales-band p:not(.chip){color:#e3e5dc}

/* Developer, FAQ, contact: light rhythm */
a.dev-card{background:var(--sand)}
a.dev-card:hover{background:#e3d8c5}
body.v3 .faq details{background:var(--paper);border:1px solid var(--line)}
body.v3 .faq details[open]{border-color:var(--brown)}
body.v3 .faq summary{font:400 19px/1.35 var(--serif);color:var(--ink)}

/* Reveal (theme-motion.js): bolder rise, image wipe */
.tm-js .tm-reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--b-ease),transform 1.1s var(--b-ease);transition-delay:calc(var(--tm-i,0) * 90ms)}
.tm-js .tm-reveal.tm-in{opacity:1;transform:none}
.tm-js :is(.split-media,.loc-figure,.dev-img,.masterplan-map,.carousel).tm-reveal{opacity:1;transform:none;clip-path:inset(0 0 14% 0);transition:clip-path 1.3s var(--b-ease)}
.tm-js :is(.split-media,.loc-figure,.dev-img,.masterplan-map,.carousel).tm-reveal.tm-in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
 .tm-reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .unit-img img,.unit-img:after,.unit-img:before{transition:none!important}
}
/* ===== Key features redesign (Fares 1 Oct: "design is not good") — image tiles with overlaid text ===== */
.feat3 .chip,.feat3 .chip.dark{background:rgba(241,236,227,.16)!important;color:#efe3c8!important;opacity:1!important}
.feat3 .band-head{margin-bottom:28px}
.feat3 .track li{display:block}
.feat3 a.feat-item{position:relative;display:block;height:100%;overflow:hidden;border-radius:2px;background:#1b221e;isolation:isolate}
.feat3 a.feat-item picture,.feat3 a.feat-item>img{display:block;height:100%}
.feat3 a.feat-item img{width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:cover;display:block}
.feat3 a.feat-item:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,20,18,0) 35%,rgba(16,20,18,.55) 62%,rgba(16,20,18,.92) 100%);pointer-events:none}
.feat3 .feat-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 20px;display:grid;gap:6px}
.feat3 .feat-txt h3{margin:0;font-size:clamp(22px,1.9vw,28px);line-height:1.1;color:#fff}
.feat3 .feat-txt p{margin:0;font-size:13.5px;line-height:1.5;color:#e6e1d6;max-width:420px}
.feat3 .feat-txt .more{margin-top:8px;color:#efe3c8;border-color:rgba(239,227,200,.6)}
/* desktop: 3×2 grid, no carousel */
@media(min-width:901px){
 .feat3 .carousel .track{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;gap:18px;overflow:visible}
 .feat3 .track li{aspect-ratio:4/3.4}
 .feat3 .car-nav{display:none}
}
/* mobile/tablet: swipeable portrait cards with a peek of the next one */
@media(max-width:900px){
 .feat3 .carousel .track{grid-auto-columns:78%;gap:12px;scroll-padding-left:0}
 .feat3 .track li{aspect-ratio:4/5}
 .feat3 .feat-txt{padding:18px 18px 16px}
 .feat3 .feat-txt h3{font-size:23px}
 .feat3 .car-nav{justify-content:flex-start;margin-top:16px}
}
/* One heading colour system (Fares: "title colour doesn't match"): light sections = brand brown; dark/image sections = brand cream */
:root{--heading-cream:#f6f1e7}
.hero-overlay h1,.feat3 .feat-txt h3,.loc3>.band-head h2,.plots h2,.plots h3,.dark-band h2,.dark-band h3,.sales-band h2,.calc h3,.fp3 h2{color:var(--heading-cream)!important}

/* Live QA 2 Oct 2026: on phones the location heading sits on cream, not over the photo, so the cream heading colour made it invisible */
@media(max-width:760px){.loc3>.band-head h2{color:rgb(117,85,40)!important;text-shadow:none}}
/* Live QA 2 Oct 2026: reserve room for the tile arrow so long values ("357 homes · 60 plots") never touch it */
@media(max-width:760px){.fact-panel a.fact{padding-right:52px}}
/* ===== Mobile hero: band pattern (RULEBOOK IMG-03, 3 Oct 2026) =====
   Used when the project has no portrait-native official asset (builder: "mobile_hero": "band").
   ≤760px: the full 2:1 render at full width, uncropped, no text on the image; sticker, H1, byline, chips and CTAs
   sit below on the brand dark, then the fact marquee. Above 760px the full-screen hero is unchanged. */
@media(max-width:760px){
 .hero.v3.hero-band-m{background:var(--b-ink)}
 .hero.v3.hero-band-m .hero-media{height:auto;min-height:0;aspect-ratio:2/1}
 .hero.v3.hero-band-m .hero-media:after{display:none}
 .hero.v3.hero-band-m .hero-media img{width:100%;height:100%;object-fit:cover;animation:none;transform:none}
 .hero.v3.hero-band-m .hero-overlay{position:static;background:var(--b-ink);padding:var(--rhythm-sm) var(--gutter) var(--rhythm)}
 .hero.v3.hero-band-m .hero-overlay h1{text-shadow:none}
}
/* band hero on short phones (e.g. 320×568, LAY-06): headline and primary CTA stay on the first screen */
@media(max-width:760px) and (max-height:640px){
 .hero.v3.hero-band-m .hero-overlay{padding-top:24px}
 .hero.v3.hero-band-m .status-sticker{margin-bottom:14px}
 .hero.v3.hero-band-m .hero-overlay h1{font-size:44px}
 .hero.v3.hero-band-m .hero-overlay h1 span{margin-top:10px}
 .hero.v3.hero-band-m .hero-ctas{order:4;margin-top:18px}
 .hero.v3.hero-band-m .hero-chips{order:5;margin-top:16px}
}