/* Self-hosted fonts — no third-party render-blocking */
@font-face{font-family:'Belleza';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/belleza.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/raleway.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sacramento.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================
   MATARMA BEACH RESIDENCE — Shared Stylesheet
   Palette drawn from the brand's own sand tone (#e0c8b4)
   ========================================================= */

:root{
  --navy:#1F295A;        /* Official Matarma brand navy (sampled from logo) */
  --navy-deep:#141b3e;
  --sand:#e0c8b4;
  --sand-100:#f7f0e8;
  --sand-200:#efe3d6;
  --ink:#1F295A;
  --ink-soft:#565d73;
  --sea:#1b8f9c;         /* Red Sea turquoise accent */
  --sea-deep:#116d78;
  --gold:#b0824a;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(31,41,90,.14);
  --radius:16px;
  --maxw:1180px;
  --serif:'Belleza','Cormorant Garamond',Georgia,serif;   /* Official display font */
  --sans:'Raleway','Helvetica Neue',Arial,sans-serif;      /* Official brand sans */
  --script:'Sacramento',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:.5px}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.6rem}
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin-bottom:1rem;
}
p{color:var(--ink-soft);font-size:1.02rem}
.lead{font-size:1.2rem;color:var(--ink-soft)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section--sand{background:var(--sand-100)}
.section--ink{background:var(--navy);color:var(--sand-100)}
.section--ink p{color:#c3cadf}
.section--ink h2,.section--ink h3{color:#fff}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto;max-width:640px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:.95rem 2.1rem;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:50px;
  transition:.35s ease;
  cursor:pointer;
  border:1.5px solid transparent;
}
.btn--primary{background:var(--sea);color:#fff}
.btn--primary:hover{background:var(--sea-deep);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:#8f6836;transform:translateY(-2px)}
.btn--ghost{border-color:#fff;color:#fff}
.btn--ghost:hover{background:#fff;color:#12203f}   /* hard navy — --ink is off-white in the dark theme */
.btn--outline{border-color:var(--sea);color:var(--sea)}
.btn--outline:hover{background:var(--sea);color:#fff}

/* ---------- Header / Nav ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,2.5rem);
  transition:.4s ease;
}
.nav--solid{background:rgba(255,255,255,.96);box-shadow:0 4px 24px rgba(40,35,32,.08);backdrop-filter:blur(8px)}
.nav__logo{display:flex;align-items:center}
.nav__logo-img{height:46px;width:auto;transition:.4s ease}
.nav__logo-img--navy{display:none}
.nav--solid .nav__logo-img--white{display:none}
.nav--solid .nav__logo-img--navy{display:block}
.nav__links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav__links a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:400;transition:.3s;position:relative;white-space:nowrap}
.nav--solid .nav__links a{color:var(--ink)}
.nav__links a:hover{color:var(--gold)}
.nav__links a.active{color:var(--gold)}
.nav__cta{padding:.6rem 1.4rem;border:1.5px solid #fff;border-radius:50px;font-size:.75rem!important;white-space:nowrap}
.nav--solid .nav__cta{border-color:var(--sea);color:var(--sea)!important}
.nav__cta:hover{background:var(--sea);border-color:var(--sea);color:#fff!important}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.nav__toggle span{width:26px;height:2px;background:#fff;transition:.3s}
.nav--solid .nav__toggle span{background:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  color:#fff;text-align:center;
  background:linear-gradient(rgba(19,28,59,.42),rgba(19,28,59,.6)),
    url('assets/photos/pool-sunrise.webp') center/cover no-repeat;
}
.hero__logo{width:min(420px,72vw);margin:0 auto 1.6rem;filter:drop-shadow(0 4px 24px rgba(0,0,0,.35))}
.hero__inner{max-width:820px;margin:0 auto;padding:0 1.5rem;animation:rise 1.1s ease both}
.hero .eyebrow{color:#fff;opacity:.9}
.hero h1{color:#fff;margin-bottom:1.2rem;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero p{color:#f2e9df;font-size:1.25rem;margin-bottom:2.2rem}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.page-hero{
  position:relative;min-height:56vh;display:flex;align-items:center;justify-content:center;
  color:#fff;text-align:center;
  background:linear-gradient(rgba(19,28,59,.42),rgba(19,28,59,.62)),
    url('assets/photos/pool-sunrise.webp') center/cover no-repeat;
}
.page-hero h1{color:#fff}
.page-hero .eyebrow{color:#fff;opacity:.9}

/* ---------- Stats / Reviews ---------- */
.stats{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.stat{
  background:var(--white);border-radius:var(--radius);padding:2rem 2.4rem;
  box-shadow:var(--shadow);text-align:center;min-width:180px;
}
.stat__num{font-family:var(--serif);font-size:3rem;color:var(--sea);line-height:1}
.stat__label{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:3rem}
.review-card{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);border-top:3px solid var(--gold)}
.review-card .stars{color:var(--gold);letter-spacing:2px;margin-bottom:.8rem}
.review-card p{font-style:italic;color:var(--ink);font-size:1.02rem}
.review-card .who{margin-top:1.2rem;font-weight:500;color:var(--sea);font-style:normal;font-size:.9rem}

/* ---------- Feature grid ---------- */
.grid{display:grid;gap:1.8rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.4s}
.card:hover{transform:translateY(-6px)}
.card__img{height:230px;background:var(--sand-200);position:relative;display:flex;align-items:center;justify-content:center;color:#a48d78;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:1rem}
.card__body{padding:1.6rem 1.8rem 2rem}
.card__body h3{margin-bottom:.5rem}
.card__price{color:var(--gold);font-weight:500;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1rem;display:block}

/* image placeholder helper */
.imgslot{background:linear-gradient(135deg,var(--sand-200),var(--sand));position:relative}
.imgslot::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8a7461;text-align:center;padding:1rem}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split__media{height:440px;border-radius:var(--radius);box-shadow:var(--shadow)}
.split--rev .split__text{order:2}

/* ---------- Experiences list ---------- */
.exp-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.exp-tags span{background:var(--sand-200);color:var(--ink);padding:.5rem 1.1rem;border-radius:50px;font-size:.82rem;letter-spacing:.04em}

/* ---------- Segments ---------- */
.segment{display:flex;flex-direction:column;gap:.6rem;padding:2rem;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);border-left:3px solid var(--sea)}
.segment h3{color:var(--sea-deep)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--sea-deep),var(--sea));color:#fff;text-align:center;padding:clamp(3.5rem,7vw,5.5rem) 0}
.cta-band h2{color:#fff;margin-bottom:1rem}
.cta-band p{color:#e5f2f0;margin-bottom:2rem}

/* ---------- Gallery ---------- */
.masonry{columns:3;column-gap:1rem}
.masonry .imgslot{width:100%;margin-bottom:1rem;border-radius:12px;break-inside:avoid;height:auto;min-height:200px}
.masonry .imgslot.tall{min-height:320px}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:#b9c1d8;padding:4rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.footer h4{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem;font-weight:500}
.footer__logo{font-family:var(--script);font-size:2.6rem;color:#fff;margin-bottom:.4rem;line-height:1}
.footer__logo small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand)}
.footer__logo-img{height:70px;width:auto;margin-bottom:1.1rem}
.footer a{color:#b9c1d8;font-size:.92rem;display:block;margin-bottom:.6rem;transition:.3s}
.footer a:hover{color:var(--sand)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:#8b93ad}
.wa-float{position:fixed;bottom:22px;right:22px;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:90;font-size:1.5rem;transition:.3s}
.wa-float:hover{transform:scale(1.08)}

/* ---------- Animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(34px);transition:.9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   MOTION LAYER (2026) — smooth scroll, parallax, reveals
   ========================================================= */

/* Native cross-page transitions (Chromium) */
@view-transition{ navigation: auto; }

/* Scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--sea),var(--gold));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* Glass nav + hide-on-scroll */
.nav{will-change:transform}
.nav--solid{background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 6px 30px rgba(31,41,90,.08)}
.nav--hidden{transform:translateY(-105%)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero parallax background layers */
.hero{background:var(--navy-deep);overflow:hidden}
.hero__bg{position:absolute;inset:-8% 0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(20,27,62,.34),rgba(20,27,62,.66))}
.hero__inner{position:relative;z-index:2;will-change:transform}
.hero__scroll{z-index:2}

/* Word-mask reveal primitives */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.word__in{display:inline-block;will-change:transform}

/* Marquee strip */
.marquee{background:var(--navy);color:var(--sand-100);padding:1.1rem 0;overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;gap:0;will-change:transform}
.marquee__track span{display:inline-flex;align-items:center;font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:.08em;text-transform:uppercase;padding:0 1.6rem}
.marquee__track span::after{content:"✦";color:var(--gold);margin-left:3.2rem;font-size:.7em}

/* Card image hover zoom */
.card{overflow:hidden}
.card__img{overflow:hidden;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .card__img{transform:scale(1.06)}

@media(prefers-reduced-motion:reduce){
  .hero__bg{inset:0}
  *{scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .nav__links{
    position:fixed;top:0;right:-100%;height:100vh;width:74%;max-width:320px;
    background:var(--ink);flex-direction:column;justify-content:center;gap:2rem;
    transition:.4s ease;padding:2rem;
  }
  .nav__links.open{right:0}
  .nav__links a{color:#fff!important;font-size:1rem}
  .nav__toggle{display:flex;z-index:110}
  .split{grid-template-columns:1fr}
  .split--rev .split__text{order:0}
  .footer__grid{grid-template-columns:1fr}
  .masonry{columns:2}
}
@media(max-width:520px){
  .masonry{columns:1}
  .hero__cta{flex-direction:column;align-items:center}
}

/* =========================================================
   LUXURY LAYER — editorial layout, full-bleed cinema, fine detail
   ========================================================= */
.section--lux{padding:clamp(5.5rem,12vw,10rem) 0}
.lux-label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;font-size:.7rem;font-weight:600;color:var(--gold);display:block;margin-bottom:1.5rem}
.section--ink .lux-label,.band .lux-label{color:var(--sand)}
.display{font-family:var(--serif);font-weight:400;line-height:1.03;letter-spacing:.01em;font-size:clamp(2.4rem,6vw,5rem)}
.editorial{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.18;color:#fff}

/* editorial two-column intro */
.lux-two{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.lux-two__r{padding-bottom:.4rem}
.lux-two__r .lead{font-size:1.18rem;margin-bottom:1.1rem}

/* full-bleed cinematic band */
.band{position:relative;min-height:84vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background-size:cover;background-position:center;color:#fff;text-align:center}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,27,62,.32),rgba(20,27,62,.58))}
.band__inner{position:relative;z-index:2;max-width:920px;padding:2.5rem 1.5rem}
.band--fixed{background-attachment:fixed}

/* big editorial split */
.split-lux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.split-lux__media{min-height:70vh;border-radius:3px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.split-lux--rev .split-lux__text{order:-1}
.split-lux__text .display{margin:.3rem 0 1.4rem}

/* room rows (alternating) */
.roomrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,4.5rem);align-items:center;margin:clamp(3rem,7vw,6.5rem) 0}
.roomrow:nth-child(even) .roomrow__media{order:2}
.roomrow__media{min-height:60vh;background-size:cover;background-position:center;border-radius:3px;box-shadow:var(--shadow)}
.roomrow__n{font-family:var(--serif);font-size:1.05rem;color:var(--gold);letter-spacing:.25em}
.roomrow__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);margin:.5rem 0 1.1rem;line-height:1.05}
.roomrow__tag{color:var(--gold);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-top:1.6rem;display:inline-block;border-top:1px solid var(--sand-200);padding-top:1rem}

/* amenities index */
.index-list{columns:2;column-gap:clamp(2rem,5vw,5rem);margin-top:3rem}
.index-list .row{break-inside:avoid;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.05rem 0;border-bottom:1px solid rgba(224,200,180,.16)}
.index-list .row b{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:#fff}
.index-list .row span{color:var(--sand);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* quote band */
.quote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(2rem,5vw,4rem);line-height:1.16}
.quote__who{margin-top:1.8rem;text-transform:uppercase;letter-spacing:.28em;font-size:.76rem;color:var(--sand)}

/* CTA band buttons spacing */
.band--cta .band__inner .btn{margin:.4rem}

@media(max-width:860px){
  .lux-two{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .split-lux{grid-template-columns:1fr}
  .split-lux--rev .split-lux__text{order:0}
  .split-lux__media{min-height:52vh}
  .roomrow{grid-template-columns:1fr;gap:1.4rem}
  .roomrow:nth-child(even) .roomrow__media{order:0}
  .roomrow__media{min-height:48vh}
  .index-list{columns:1}
  .band,.band--fixed{min-height:66vh;background-attachment:scroll}
}

/* =========================================================
   DARK CINEMATIC THEME — deep navy-charcoal + gold, moody, full-bleed
   (appended last: overrides the earlier light palette)
   ========================================================= */
:root{
  --navy:#0f1420;
  --navy-deep:#090c14;
  --ink:#ece6da;            /* warm off-white text */
  --ink-soft:#9b9a90;       /* muted warm grey */
  --sand:#c8a86a;
  --sand-100:#12161f;       /* dark panel (was cream) */
  --sand-200:#1a2030;       /* darker panel / card */
  --sea:#c8a86a;            /* accents now gold, not turquoise */
  --sea-deep:#b0904f;
  --gold:#c8a86a;
  --shadow:0 30px 70px rgba(0,0,0,.5);
}
body{background:#0b0e16;color:var(--ink)}

/* section tones */
.section--sand{background:var(--sand-100)}
.section--ink{background:#0d1119}
.section--ink p{color:#a7a69c}
.section--ink h2,.section--ink h3{color:#fff}

/* type on dark */
p{color:var(--ink-soft)}
.lead{color:#c4c2b6}
.hero p{color:#e8e2d4}

/* nav → dark glass, white logo always, gold cta */
.nav--solid{background:rgba(11,14,22,.7);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px);box-shadow:0 6px 34px rgba(0,0,0,.45)}
.nav--solid .nav__logo-img--white{display:block}
.nav--solid .nav__logo-img--navy{display:none}
.nav--solid .nav__links a{color:var(--ink)}
.nav--solid .nav__toggle span{background:var(--ink)}
.nav--solid .nav__cta{border-color:var(--gold);color:var(--gold)!important}
.nav__cta:hover{background:var(--gold);border-color:var(--gold);color:#0b0e16!important}
.nav__links a.active,.nav__links a:hover{color:var(--gold)}

/* buttons → gold on dark */
.btn--primary{background:var(--gold);color:#0b0e16}
.btn--primary:hover{background:#d8bd83;color:#0b0e16}
.btn--gold{background:var(--gold);color:#0b0e16}
.btn--gold:hover{background:#d8bd83}
.btn--outline{border-color:var(--gold);color:var(--gold)}
.btn--outline:hover{background:var(--gold);color:#0b0e16}

/* hero — more cinematic, bottom-weighted */
.hero__overlay{background:linear-gradient(rgba(8,11,18,.28) 0%,rgba(8,11,18,.5) 45%,rgba(8,11,18,.82) 100%)}
.hero__logo{width:min(440px,74vw)}
.hero .eyebrow,.band .lux-label,.hero__scroll{color:var(--gold)}
.band::before{background:linear-gradient(rgba(8,11,18,.42),rgba(8,11,18,.66))}

/* dark glass cards / stats / reviews / segments */
.card{background:var(--sand-200);color:var(--ink);box-shadow:var(--shadow)}
.card__body p{color:var(--ink-soft)}
.stat{background:rgba(255,255,255,.03);border:1px solid rgba(200,168,106,.16);box-shadow:none}
.stat__num{color:var(--gold)}
.stat__label{color:var(--ink-soft)}
.review-card{background:var(--sand-200);border-top:2px solid var(--gold);box-shadow:var(--shadow)}
.review-card p{color:#d9d4c7}
.review-card .who{color:var(--gold)}
.segment{background:var(--sand-200);border-left:2px solid var(--gold);box-shadow:var(--shadow)}
.segment h3{color:#fff}
.imgslot{background:linear-gradient(135deg,#1a2030,#0f1420)}
.imgslot::after{color:#5f6b80}

/* roomrow detail lines */
.roomrow__tag{border-top-color:rgba(200,168,106,.28);color:var(--gold)}

/* cta-band (used on gallery) → dark + gold */
.cta-band{background:linear-gradient(135deg,#10141f,#0b0e16)}
.cta-band h2{color:#fff}
.cta-band p{color:#b9b7ab}

/* footer warm-dark */
.footer{background:#080a11}
.footer a,.footer p{color:#9b9a90}
.footer a:hover{color:var(--gold)}
.footer h4{color:#fff}

/* spacing polish */
.section{padding:clamp(4.5rem,10vw,8.5rem) 0}
.section--lux{padding:clamp(6rem,13vw,11rem) 0}
.display{font-size:clamp(2.6rem,6.4vw,5.4rem);letter-spacing:.012em;line-height:1.02;text-wrap:balance}
.lux-label{letter-spacing:.36em}
.split-lux__media,.roomrow__media{border-radius:2px}
.card,.split__media{border-radius:2px}

/* subtle gold rule accent under section labels in dark sections */
.section--ink .index-list .row{border-bottom-color:rgba(200,168,106,.18)}

/* =========================================================
   BRAND ALIGNMENT — navy base + aqua/yellow/coral accents,
   rounded-frame "device" motif, reviews wall, brand icons
   (Matarma Brand Manual, Chapter 8)
   ========================================================= */
:root{
  --navy:#182454;          /* brand primary navy */
  --navy-deep:#0d1636;
  --ink:#e9eef6;           /* cool off-white */
  --ink-soft:#93a1bd;
  --sand-100:#101a34;      /* dark navy panel */
  --sand-200:#16223f;      /* card */
  --sea:#54C0E4;           /* brand aqua — primary accent */
  --sea-deep:#2ea6cf;
  --gold:#FCC030;          /* brand yellow — stars / highlights */
  --coral:#F0606C;         /* brand coral */
  --aqua:#54C0E4;
}
body{background:#0b1226;color:var(--ink)}
.section--ink{background:#0d1533}
.hero .eyebrow,.band .lux-label,.lux-label{color:var(--sea)}
.hero__scroll{color:var(--sea)}
.stat__num{color:var(--sea)}
.review-card .who{color:var(--sea)}
.review-card .stars{color:var(--gold)}
.btn--gold{background:var(--gold);color:#12203f}
.btn--gold:hover{background:#ffd24d}
.btn--primary{background:var(--sea);color:#0a1a2c}
.btn--primary:hover{background:#6fd0f2;color:#0a1a2c}
.footer{background:#081026}

/* rounded-frame "device" (brand motif) */
.device{border:2px solid var(--navy);border-radius:20px}

/* ===== REVIEWS WALL ===== */
.reviews-wall{background:linear-gradient(#0b1226,#0d1533);overflow:hidden;padding:clamp(4.5rem,10vw,8rem) 0}
.rw-head{text-align:center;max-width:640px;margin:0 auto 3rem;padding:0 1.5rem}
.rw-badge{display:inline-flex;align-items:center;gap:1rem;background:var(--sand-200);border:2px solid rgba(84,192,228,.35);border-radius:22px;padding:1rem 1.6rem;margin-bottom:1.6rem}
.rw-badge svg{width:34px;height:34px;flex:0 0 34px}
.rw-badge .sc{font-family:var(--serif);font-size:2.4rem;line-height:1;color:#fff}
.rw-badge .st{color:var(--gold);letter-spacing:2px;font-size:1rem}
.rw-badge .rc{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rw-rows{display:flex;flex-direction:column;gap:1.3rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rw-row{display:flex;gap:1.3rem;width:max-content;will-change:transform;animation:rwscroll linear infinite}
.rw-row--rev{animation-direction:reverse}
.rw-rows:hover .rw-row{animation-play-state:paused}
@keyframes rwscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rw-card{flex:0 0 340px;width:340px;background:var(--sand-200);border:1.5px solid rgba(84,192,228,.16);border-radius:18px;padding:1.5rem 1.6rem}
.rw-card__top{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.rw-av{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem;color:#0b1226;border:2px solid rgba(13,19,54,.35)}
.rw-meta{display:flex;flex-direction:column;line-height:1.25}
.rw-name{font-weight:600;font-size:.95rem;color:#fff}
.rw-date{font-size:.74rem;color:var(--ink-soft)}
.rw-stars{color:var(--gold);letter-spacing:1px;font-size:.9rem;margin-bottom:.5rem}
.rw-text{color:#c3cde0;font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rw-g{margin-top:1rem;display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ink-soft)}
.rw-g svg{width:15px;height:15px}
.rw-cta{text-align:center;margin-top:3rem}

/* ===== BRAND ICON DEVICES (amenities at a glance) ===== */
.bicons{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin-top:3rem}
.bicon{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:120px}
.bicon__f{width:96px;height:96px;border-radius:24px;border:2.5px solid var(--navy);display:grid;place-items:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bicon:hover .bicon__f{transform:translateY(-6px)}
.bicon__f svg{width:46px;height:46px}
.bicon span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.bicon--aqua .bicon__f{background:var(--aqua)}
.bicon--yellow .bicon__f{background:var(--gold)}
.bicon--coral .bicon__f{background:var(--coral)}
.bicon--navy .bicon__f{background:var(--navy);border-color:var(--aqua)}

@media(max-width:560px){
  .rw-card{flex-basis:280px;width:280px}
  .bicon{width:96px}.bicon__f{width:80px;height:80px}
}

/* Matarma ratings bar — one glass award strip */
.band--deep::before{background:linear-gradient(rgba(8,11,18,.62),rgba(8,11,18,.82))}
.ratebar{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(11,18,44,.62);
  border:1.5px solid rgba(84,192,228,.22);border-radius:22px;overflow:hidden;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.rate{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:2.1rem 1rem 1.9rem;border-left:1px solid rgba(233,238,246,.1)}
.rate:first-child{border-left:none}
.rate__brand{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#cfd9ec;font-weight:600;margin-bottom:.6rem}
.rate__brand svg{width:17px;height:17px}
.rate__mark{font-style:normal;display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;color:#fff;font-size:.68rem;font-weight:700;font-family:var(--sans)}
.rate__score{font-family:var(--serif);font-size:clamp(2.5rem,4vw,3.5rem);color:#fff;line-height:1}
.rate__stars{color:var(--gold);font-size:.92rem;letter-spacing:2px}
.rate__sub{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#93a1bd;margin-top:.2rem}
.factline{margin-top:2.2rem;text-align:center;color:#dbe3f2;font-size:.95rem;letter-spacing:.04em}
.factline b{color:var(--gold);font-weight:400;margin:0 .9rem}
@media(max-width:900px){
  .ratebar{grid-template-columns:1fr 1fr}
  .rate:nth-child(3){border-left:none}
  .rate:nth-child(3),.rate:nth-child(4){border-top:1px solid rgba(233,238,246,.1)}
  .factline b{display:block;margin:.5rem 0;line-height:.8}
}

/* =========================================================
   FABLE ENHANCEMENT LAYER — a11y, worlds, plans, lightbox, mobile bar
   ========================================================= */

/* skip link (a11y) */
.skip-link{position:fixed;left:0;top:0;z-index:500;background:var(--gold);color:#12203f;padding:.8rem 1.4rem;border-radius:0 0 12px 0;font-weight:600;letter-spacing:.08em;
  clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.skip-link:focus{clip-path:none;height:auto;width:auto;overflow:visible}

/* floor-plan panels */
.planbox{background:#fff;border:2.5px solid var(--navy);border-radius:22px;overflow:hidden;margin:-1.5rem 0 3.5rem;box-shadow:var(--shadow)}
.planbox img{width:100%;display:block}
.roomrow__media--tall{min-height:74vh}

/* worlds of Matarma — brand device cards */
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.world{border-radius:22px;padding:2rem 1.9rem;border:2.5px solid var(--navy);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.world:hover{transform:translateY(-6px)}
.world h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:.6rem}
.world--yellow{background:var(--gold)}.world--yellow h3,.world--yellow p{color:#12203f}
.world--coral{background:var(--coral)}.world--coral h3{color:#fff}.world--coral p{color:#ffe7e9}
.world--aqua{background:var(--aqua)}.world--aqua h3,.world--aqua p{color:#0d1a38}
.world--navy{background:var(--navy);border-color:var(--aqua)}.world--navy h3{color:#fff}.world--navy p{color:#b8c4de}

/* gallery lightbox */
.masonry .imgslot{cursor:zoom-in;transition:transform .4s ease,opacity .4s}
.masonry .imgslot:hover{transform:scale(1.015);opacity:.92}
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(7,10,20,.92);display:none;align-items:center;justify-content:center;padding:3vh 3vw;backdrop-filter:blur(6px)}
.lightbox.open{display:flex!important}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:18px;right:26px;background:none;border:none;color:#fff;font-size:2.6rem;cursor:pointer;line-height:1}

/* mobile booking bar */
.bookbar{display:none}
@media(max-width:860px){
  .bookbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex!important;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
  .bookbar a{flex:1;text-align:center;padding:1.05rem .5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
  .bookbar__wa{background:#1da851;color:#fff}
  .bookbar__book{background:var(--gold);color:#12203f}
  .wa-float{display:none}
  body{padding-bottom:52px}
  .planbox{margin-top:0}
  .roomrow__media--tall{min-height:52vh}
}

/* homepage stay teaser — exterior cards */
.staycards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.staycard{position:relative;display:block;min-height:480px;border-radius:2px;overflow:hidden}
.staycard__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.staycard:hover .staycard__img{transform:scale(1.06)}
.staycard__cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.8rem 1.7rem;background:linear-gradient(transparent,rgba(8,11,20,.88))}
.staycard__cap h3{font-family:var(--serif);font-weight:400;font-size:1.75rem;color:#fff;margin-bottom:.35rem;line-height:1.1}
.staycard__cap span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media(max-width:860px){.staycards{grid-template-columns:1fr}.staycard{min-height:380px}}

/* experiences showcase — editorial split + photo mosaic */
.expsec{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.expmosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,255px);gap:1.1rem}
.exptile{position:relative;display:block;border-radius:2px;overflow:hidden;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.exptile:hover{transform:translateY(-5px)}
.exptile--tall{grid-row:span 2}
.exptile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(8,11,20,.75))}
.exptile span{position:absolute;left:1.1rem;bottom:1rem;z-index:2;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
@media(max-width:900px){
  .expsec{grid-template-columns:1fr}
  .expmosaic{grid-template-rows:repeat(2,190px)}
}

/* merged welcome — layered photo composition */
.welcome{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.welcome__media{position:relative;min-height:76vh}
.welcome__main{position:absolute;top:0;right:0;bottom:8%;left:14%;background-size:cover;background-position:center;border-radius:2px;box-shadow:var(--shadow)}
.welcome__inset{position:absolute;left:0;bottom:0;width:46%;height:48%;background-size:cover;background-position:center;border-radius:2px;border:8px solid #0b1226;box-shadow:0 26px 60px rgba(0,0,0,.5)}
@media(max-width:900px){
  .welcome{grid-template-columns:1fr}
  .welcome__media{min-height:60vh;margin-top:.5rem}
}

/* resort section — original layout at ~65% scale */
.resort-compact .bicon{width:100px}
.resort-compact .bicon__f{width:68px;height:68px;border-radius:18px}
.resort-compact .bicon__f svg{width:34px;height:34px}
.resort-compact .bicon span{font-size:.66rem}
.resort-compact .index-list{margin-top:2rem;column-gap:clamp(1.6rem,4vw,3.5rem)}
.resort-compact .index-list .row{padding:.62rem 0}
.resort-compact .index-list .row b{font-size:1.02rem}
.resort-compact .index-list .row span{font-size:.64rem}

/* =========================================================
   FOOTER SOCIAL + GO DIGITAL CREDIT + GLOWING WHATSAPP FAB
   ========================================================= */
.social{display:flex;gap:.7rem;margin-top:1.6rem}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;border:1.5px solid rgba(84,192,228,.3);color:#cfd9ec;transition:.35s ease;margin:0}
.social a svg{width:20px;height:20px}
.social a:hover{background:var(--gold);border-color:var(--gold);color:#12203f;transform:translateY(-3px)}
.footer__bottom .credit{color:#9b9a90}
.footer__bottom .credit b{color:var(--gold);font-weight:600;letter-spacing:.04em}

/* WhatsApp FAB — glowing, breathing, radar rings, peeking label */
.wa-float{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;font-size:inherit;
  display:flex;align-items:center;gap:.8rem;bottom:26px;right:26px;z-index:160}
.wa-float:hover{transform:none}
.wa-float__btn{position:relative;width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#31e576,#17a74e);display:grid;place-items:center;
  animation:wa-bob 3.4s ease-in-out infinite, wa-glow 2.6s ease-in-out infinite;
  transition:transform .35s ease}
.wa-float:hover .wa-float__btn{transform:scale(1.1);animation-play-state:paused}
.wa-float__btn svg{width:32px;height:32px;position:relative;z-index:2}
.wa-float__btn::before,.wa-float__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(49,229,118,.6);animation:wa-ring 2.8s ease-out infinite}
.wa-float__btn::after{animation-delay:1.4s}
.wa-float__label{background:rgba(11,18,38,.88);border:1.5px solid rgba(49,229,118,.45);color:#eafff2;
  padding:.6rem 1.1rem;border-radius:50px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform-origin:right center;animation:wa-peek 9s ease-in-out infinite}
.wa-float:hover .wa-float__label{animation:none;opacity:1;transform:none}
@keyframes wa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wa-glow{0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.35)}50%{box-shadow:0 10px 44px rgba(37,211,102,.75),0 0 0 6px rgba(37,211,102,.12)}}
@keyframes wa-ring{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
@keyframes wa-peek{0%,58%{opacity:0;transform:translateX(12px) scale(.94)}64%,88%{opacity:1;transform:translateX(0) scale(1)}94%,100%{opacity:0;transform:translateX(12px) scale(.94)}}
@media(max-width:860px){.wa-float{display:none}}
@media(prefers-reduced-motion:reduce){
  .wa-float__btn,.wa-float__btn::before,.wa-float__btn::after{animation:none}
  .wa-float__label{animation:none;opacity:1;transform:none}
}

/* hero video layer — covers the photo on desktop once it's actually playing */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1s ease}
.hero__video.is-playing{opacity:1}
@media(max-width:860px){.hero__video{display:none}}

/* hero cinematic depth — vignette + shadows so text reads over the video */
.hero__overlay{background:
  radial-gradient(125% 95% at 50% 42%, rgba(6,9,16,.10) 0%, rgba(6,9,16,.48) 66%, rgba(6,9,16,.74) 100%),
  linear-gradient(rgba(6,9,16,.55) 0%, rgba(6,9,16,.38) 38%, rgba(6,9,16,.86) 100%)}
.hero h1{text-shadow:0 3px 44px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45)}
.hero .eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hero__inner > p{text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hero__logo{filter:drop-shadow(0 8px 38px rgba(0,0,0,.6))}
.hero__scroll{text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* hero WebGL ripple canvas — sits over the video, under the overlay */
.hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.hero__fx.on{opacity:1}
@media(max-width:860px){.hero__fx{display:none}}

/* =========================================================
   RATEBAR LIVE — 3D glowing award box (homepage)
   ========================================================= */
@property --ra{syntax:'<angle>';initial-value:0deg;inherits:false}
.ratescene{perspective:1100px;position:relative;border-radius:26px}
/* breathing aurora glow behind the box */
.ratescene::before{content:"";position:absolute;inset:-4px;border-radius:28px;z-index:0;
  background:conic-gradient(from var(--ra),rgba(84,192,228,0) 0%,rgba(84,192,228,.85) 16%,rgba(252,192,48,.9) 38%,rgba(240,96,108,.8) 60%,rgba(84,192,228,0) 82%);
  filter:blur(26px);opacity:.42;
  animation:ra-spin 8s linear infinite,ra-breathe 5s ease-in-out infinite}
/* the box itself: rotating gradient border + deep glass */
.ratebar--live{position:relative;z-index:1;border:1.5px solid transparent;
  background:linear-gradient(rgba(10,16,40,.8),rgba(10,16,40,.8)) padding-box,
             conic-gradient(from var(--ra),rgba(84,192,228,.25),rgba(84,192,228,.95),rgba(252,192,48,1),rgba(240,96,108,.9),rgba(84,192,228,.25)) border-box;
  animation:ra-spin 8s linear infinite;
  transform-style:preserve-3d;will-change:transform;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)}
/* light sweep across the glass */
.ratebar--live::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.05) 55%,transparent 68%);
  transform:translateX(-130%) skewX(-8deg);animation:ra-shine 6s ease-in-out infinite}
/* cells come alive on hover */
.ratebar--live .rate{transition:background .45s ease}
.ratebar--live .rate:hover{background:radial-gradient(ellipse at 50% 0%,rgba(84,192,228,.14),transparent 70%)}
/* glowing numbers + gold stars */
.ratebar--live .rate__score{text-shadow:0 0 24px rgba(84,192,228,.5),0 0 60px rgba(84,192,228,.22)}
.ratebar--live .rate__stars{text-shadow:0 0 14px rgba(252,192,48,.65)}
@keyframes ra-spin{to{--ra:360deg}}
@keyframes ra-breathe{50%{opacity:.62;filter:blur(32px)}}
@keyframes ra-shine{0%,58%{transform:translateX(-130%) skewX(-8deg)}88%,100%{transform:translateX(130%) skewX(-8deg)}}
@media (prefers-reduced-motion:no-preference){
  .ratescene{animation:ra-float 7s ease-in-out infinite}
}
@keyframes ra-float{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .ratescene,.ratescene::before,.ratebar--live,.ratebar--live::after{animation:none}
}

/* =========================================================
   CINEMA LAYER — Ken Burns hero, live weather chip,
   film grain, 3D stay cards, unmask helpers
   ========================================================= */

/* Living hero — the photo drifts and breathes forever (Ken Burns).
   Runs on a ::before copy so it never fights the GSAP scroll parallax. */
.hero__bg{overflow:hidden}
.hero__bg::before{content:"";position:absolute;inset:0;background:inherit;
  will-change:transform;animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.14) translate(-1.8%,1.4%)}
}

/* Live chips row — weather + sunset countdown pills */
.hero__chips{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.hero__wx{display:inline-flex;align-items:center;gap:.55rem;
  padding:.58rem 1.2rem;border-radius:999px;
  background:rgba(10,16,40,.45);border:1px solid rgba(84,192,228,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.8rem;letter-spacing:.07em;color:#eef3fb;
  box-shadow:0 10px 32px -14px rgba(0,0,0,.55),0 0 26px -8px rgba(84,192,228,.3);
  opacity:0;transform:translateY(12px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hero__wx.wx--on{opacity:1;transform:translateY(0)}
.hero__wx[hidden]{display:none}
.wx__dot{width:7px;height:7px;border-radius:50%;background:#39d98a;flex:none;
  box-shadow:0 0 0 0 rgba(57,217,138,.55);animation:wx-pulse 2.4s ease-out infinite}
/* sunset pill — golden twin of the weather chip */
.hero__sun{border-color:rgba(252,192,48,.32);
  box-shadow:0 10px 32px -14px rgba(0,0,0,.55),0 0 26px -8px rgba(252,192,48,.3)}
.wx__dot--sun{background:#FCC030;box-shadow:0 0 0 0 rgba(252,192,48,.55);animation-name:wx-pulse-sun}
@keyframes wx-pulse-sun{70%{box-shadow:0 0 0 9px rgba(252,192,48,0)}100%{box-shadow:0 0 0 0 rgba(252,192,48,0)}}
.wx__ico{display:inline-flex;color:var(--gold)}
.wx__ico svg{width:17px;height:17px;display:block}
.wx__sep{color:rgba(238,243,251,.4)}
.wx__sea{color:#9fd8ee}
@keyframes wx-pulse{70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

/* Film grain — barely-there animated cinema texture over everything */
body::after{content:"";position:fixed;inset:-60%;z-index:2147483000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.042;mix-blend-mode:soft-light;animation:grain 9s steps(10) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-5%)}20%{transform:translate(-7%,3%)}
  30%{transform:translate(4%,-7%)}40%{transform:translate(-3%,7%)}50%{transform:translate(-5%,-3%)}
  60%{transform:translate(5%,2%)}70%{transform:translate(2%,5%)}80%{transform:translate(-6%,-2%)}
  90%{transform:translate(3%,4%)}
}
@media(max-width:860px){body::after{inset:0;animation:none}}

/* 3D stay cards — caption floats on its own depth plane */
.staycard{transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .5s ease}
.staycard:hover{box-shadow:0 34px 70px -28px rgba(0,0,0,.7)}
.staycard__cap{transform:translateZ(34px)}

@media (prefers-reduced-motion:reduce){
  .hero__bg::before,.wx__dot{animation:none}
  body::after{animation:none;opacity:.03}
}

/* =========================================================
   BOOKING PAGE — /book direct-booking funnel
   ========================================================= */
.page-hero--slim{min-height:38vh}
.bookwrap{display:grid;grid-template-columns:1.45fr 1fr;gap:2.4rem;align-items:start}
.bookform{background:rgba(13,22,54,.55);border:1px solid rgba(84,192,228,.16);border-radius:18px;
  padding:clamp(1.4rem,3vw,2.3rem);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bf-sec{margin-bottom:2rem}
.bf-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1.1rem}
.bf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bf-field{display:block}
.bf-field>span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#93a1bd;margin-bottom:.4rem}
.bookform input,.bookform textarea{width:100%;padding:.85rem .95rem;border:1px solid #2a3654;border-radius:10px;
  font-family:inherit;font-size:.95rem;background:#0d1636;color:#e9eef6;transition:border-color .3s}
.bookform input:focus,.bookform textarea:focus{outline:none;border-color:var(--sea)}
.bookform input[type=date]{color-scheme:dark}
.bf-field{margin-bottom:.9rem}
.bf-nights{margin-top:.7rem;color:#9fd8ee;font-size:.9rem}
.bf-alert{background:rgba(240,96,108,.14);border:1px solid var(--coral);color:#ffdfe2;padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1.3rem;font-size:.92rem}
.bf-submit{width:100%;font-size:1rem;padding:1.1rem}
.bf-note{margin-top:.9rem;text-align:center;font-size:.8rem;color:#93a1bd}
/* steppers */
.stepper{display:flex;align-items:stretch;border:1px solid #2a3654;border-radius:10px;overflow:hidden;background:#0d1636}
.stepper button{width:46px;border:none;background:transparent;color:var(--sea);font-size:1.3rem;cursor:pointer;transition:background .25s}
.stepper button:hover{background:rgba(84,192,228,.12)}
.stepper input{border:none!important;text-align:center;background:transparent!important;font-size:1.05rem;padding:.85rem 0}
/* room cards */
.roompick{display:grid;gap:.8rem}
.rp-card{display:flex;align-items:center;gap:1rem;padding:.65rem .8rem;border:1.5px solid rgba(233,238,246,.13);
  border-radius:14px;cursor:pointer;position:relative;transition:border-color .3s,background .3s}
.rp-card:hover{border-color:rgba(84,192,228,.5)}
.rp-card input{position:absolute;opacity:0;pointer-events:none;width:0!important}
.rp-img{width:88px;height:64px;border-radius:9px;background-size:cover;background-position:center;flex:none}
.rp-body{flex:1;min-width:0}
.rp-body b{display:block;font-family:var(--serif);font-weight:400;font-size:1.08rem;color:#fff;line-height:1.2}
.rp-body i{font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rp-check{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(233,238,246,.3);flex:none;
  display:grid;place-items:center;color:transparent;transition:all .3s}
.rp-check svg{width:14px;height:14px}
.rp-card:has(input:checked){border-color:var(--gold);background:rgba(252,192,48,.07)}
.rp-card:has(input:checked) .rp-check{background:var(--gold);border-color:var(--gold);color:#12203f}
.rp-card:has(input:focus-visible){outline:2px solid var(--sea);outline-offset:2px}
/* summary sidebar */
.booksum{position:sticky;top:96px}
.bs-card{background:rgba(13,22,54,.55);border:1px solid rgba(252,192,48,.22);border-radius:18px;padding:1.8rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bs-title{font-family:var(--serif);font-size:1.5rem;color:#fff;margin-bottom:1.2rem}
.bs-list div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(233,238,246,.12)}
.bs-list dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#93a1bd;align-self:center}
.bs-list dd{color:#fff;font-size:.95rem;text-align:right}
.bs-trust{margin:1.3rem 0;display:grid;gap:.45rem}
.bs-trust p{font-size:.8rem;color:#bac7dd;margin:0}
.bs-stars{color:var(--gold);letter-spacing:2px}
.bs-wa{display:block;text-align:center;padding:.9rem;border-radius:12px;border:1px solid rgba(37,211,102,.4);
  background:rgba(37,211,102,.1);color:#c9f5da;font-size:.88rem;transition:background .3s}
.bs-wa:hover{background:rgba(37,211,102,.2)}
.bs-wa b{color:#5ce18f}
/* success view */
.bookdone{max-width:640px;margin:0 auto;text-align:center;padding:1rem 0 2rem}
.bd-check{width:84px;height:84px;margin:0 auto 1.6rem;border-radius:50%;background:rgba(252,192,48,.12);
  border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center}
.bd-check svg{width:40px;height:40px}
.bd-sub{margin:1.1rem auto 1.8rem;max-width:46ch;color:#cfd9ec}
.bd-recap{display:grid;gap:.6rem;background:rgba(13,22,54,.55);border:1px solid rgba(84,192,228,.16);
  border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1.8rem;text-align:left}
.bd-recap div{display:flex;justify-content:space-between;gap:1rem}
.bd-recap span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#93a1bd;align-self:center}
.bd-recap b{color:#fff;font-weight:500;text-align:right}
.bd-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
@media(max-width:960px){
  .bookwrap{grid-template-columns:1fr}
  .booksum{position:static;order:-1}
  .bs-list{display:none}                 /* live summary is redundant next to the form on mobile */
  .bs-card{padding:1.2rem 1.4rem}
  .bs-title{display:none}
  .bf-grid2{grid-template-columns:1fr 1fr}
}

/* room prices — booking cards + rooms page */
.rp-price{display:block;font-size:.78rem;color:#9fd8ee;margin-top:.2rem}
.rp-price b{color:#fff;font-weight:600}
.roomprice{font-size:.92rem;color:#9fd8ee;margin:-.4rem 0 1.2rem}
.roomprice b{color:#fff;font-weight:600;font-size:1.05rem}

/* /book — compact layout + trust layer */
.page-hero--slim{min-height:28vh}
.bookbadges{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:-.4rem 0 1.7rem}
.bb{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .95rem;border-radius:999px;
  background:rgba(13,22,54,.6);border:1px solid rgba(233,238,246,.14);font-size:.78rem;color:#cfd9ec}
.bb b{color:#fff}
.bb .gold{color:var(--gold);font-size:.85em}
.bb svg{width:14px;height:14px}
.bb i{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;color:#fff;font-size:.58rem;font-weight:700}
.bf-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.bookform{padding:clamp(1.2rem,2.5vw,1.9rem)}
.bf-sec{margin-bottom:1.6rem}
.roompick{grid-template-columns:1fr 1fr}
.rp-card{padding:.55rem .7rem;gap:.8rem}
.rp-img{width:64px;height:58px}
.rp-body b{font-size:.98rem}
.rp-body i{font-size:.62rem}
.rp-price{font-size:.74rem}
.bf-assure{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.bf-assure span{font-size:.74rem;color:#bac7dd;padding:.35rem .85rem;border:1px solid rgba(233,238,246,.15);border-radius:999px}
.bs-quotes{margin-top:1rem}
.bs-qtitle{font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:1rem}
.bs-quotes blockquote{margin:0 0 1.1rem;border-left:2px solid rgba(252,192,48,.4);padding-left:.9rem}
.bs-quotes blockquote:last-child{margin-bottom:0}
.q-stars{display:block;color:var(--gold);font-size:.75rem;letter-spacing:2px}
.q-text{display:block;font-size:.86rem;color:#dbe3f2;font-style:italic;margin:.25rem 0 .3rem;line-height:1.5}
.bs-quotes cite{font-style:normal;font-size:.68rem;color:#93a1bd;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:700px){
  .bf-grid4{grid-template-columns:1fr 1fr}
  .roompick{grid-template-columns:1fr}
  .bookbadges{gap:.4rem}
  .bb{font-size:.7rem;padding:.35rem .7rem}
}

/* estimated total highlight */
.bs-tot{color:var(--gold)!important;font-weight:600}

/* =========================================================
   /book ULTIMATE — quick picks, WA path, live status,
   sticky mobile CTA
   ========================================================= */
.qp{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.qp button{padding:.45rem 1.05rem;border-radius:999px;border:1px solid rgba(84,192,228,.35);
  background:transparent;color:#9fd8ee;font-family:inherit;font-size:.78rem;letter-spacing:.04em;
  cursor:pointer;transition:all .3s}
.qp button:hover{border-color:var(--sea);color:#fff}
.qp button.on{background:rgba(84,192,228,.16);color:#fff;border-color:var(--sea)}
/* live team status */
.bs-online{display:flex;align-items:center;gap:.55rem;font-size:.78rem;line-height:1.4;
  margin-bottom:1.1rem;padding:.55rem .85rem;border-radius:10px}
.bs-online.is-on{background:rgba(57,217,138,.08);color:#c9f5da}
.bs-online.is-off{background:rgba(252,192,48,.08);color:#f5e3b8}
.bs-online .dot{width:8px;height:8px;border-radius:50%;flex:none}
.bs-online.is-on .dot{background:#39d98a;box-shadow:0 0 0 0 rgba(57,217,138,.55);animation:wx-pulse 2.2s ease-out infinite}
.bs-online.is-off .dot{background:#FCC030}
/* WhatsApp submit path */
.bf-or{display:flex;align-items:center;gap:1rem;margin:1rem 0;color:#93a1bd;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.22em}
.bf-or::before,.bf-or::after{content:"";flex:1;height:1px;background:rgba(233,238,246,.12)}
.bf-wasubmit{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:1rem;
  border-radius:50px;border:1.5px solid rgba(37,211,102,.5);background:rgba(37,211,102,.1);color:#5ce18f;
  font-family:inherit;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:all .3s}
.bf-wasubmit:hover{background:rgba(37,211,102,.22);transform:translateY(-2px)}
.bf-wasubmit svg{width:18px;height:18px;flex:none}
/* sticky mobile CTA */
.bookstick{display:none}
@media(max-width:960px){
  .bookstick{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:1rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(8,13,32,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(84,192,228,.25)}
  .bst-info{flex:1;min-width:0}
  .bst-info b{display:block;color:#fff;font-size:.84rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bst-info span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#93a1bd}
  .bst-btn{padding:.75rem 1.5rem;flex:none}
  body:has(.bookstick) .wa-float{bottom:5.4rem}   /* lift the FAB above the bar */
}

/* capacity-aware room cards */
.rp-card--over{opacity:.5;filter:saturate(.6)}
.rp-card--over:hover{opacity:.75}
.rp-detail em{color:var(--gold);font-style:normal}

/* room detail chips — layout + capacity at a glance */
.rp-detail{display:flex;flex-wrap:wrap;gap:.3rem .95rem;margin-top:.4rem}
.rp-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;color:#bac7dd;white-space:nowrap}
.rp-chip svg{width:14px;height:14px;color:var(--sea);flex:none}
.rp-guests i{font-style:normal}
.rp-guests i.over{color:var(--gold)}

/* =========================================================
   GALLERY — protected masonry, auto-loaded from the photo folder
   ========================================================= */
.galfilters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 2rem}
.galfilters button{padding:.5rem 1.15rem;border-radius:999px;border:1px solid rgba(84,192,228,.3);
  background:transparent;color:#9fd8ee;font-family:inherit;font-size:.8rem;letter-spacing:.05em;cursor:pointer;transition:all .3s}
.galfilters button:hover{border-color:var(--sea);color:#fff}
.galfilters button.on{background:rgba(84,192,228,.16);color:#fff;border-color:var(--sea)}
.gal{columns:4 280px;column-gap:.9rem}
.gal__item{break-inside:avoid;margin:0 0 .9rem;position:relative;border-radius:10px;overflow:hidden;background:#0d1636}
.gal__item img{width:100%;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  pointer-events:none;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.gal__item:hover img{transform:scale(1.045)}
.gal__shield{position:absolute;inset:0;cursor:zoom-in;background:linear-gradient(transparent 78%,rgba(8,11,20,.35))}
.gal__shield:focus-visible{outline:2px solid var(--sea);outline-offset:-3px}
.gal__item.hide{display:none}
.lightbox img{user-select:none;-webkit-user-drag:none;pointer-events:none}
@media(max-width:1100px){.gal{columns:3 240px}}
@media(max-width:700px){.gal{columns:2 160px;column-gap:.6rem}.gal__item{margin-bottom:.6rem}}

/* =========================================================
   FEATURES PACK — add-ons, inquiry forms, exit rescue,
   Ask Matarma concierge
   ========================================================= */
/* booking add-ons */
.addons{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ad{position:relative;display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;
  border:1.5px solid rgba(233,238,246,.13);border-radius:12px;cursor:pointer;transition:all .3s;
  font-size:.86rem;color:#dbe3f2}
.ad:hover{border-color:rgba(84,192,228,.5)}
.ad input{position:absolute;opacity:0;width:0;pointer-events:none}
.adbox{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(233,238,246,.3);
  display:grid;place-items:center;color:transparent;flex:none;transition:all .25s}
.adbox svg{width:12px;height:12px}
.ad:has(input:checked){border-color:var(--gold);background:rgba(252,192,48,.06)}
.ad:has(input:checked) .adbox{background:var(--gold);border-color:var(--gold);color:#12203f}
.ad small{display:block;font-size:.68rem;color:#93a1bd}
/* wedding / group inquiry forms */
.inqform input,.inqform textarea{width:100%;padding:.85rem .95rem;margin-bottom:.9rem;
  border:1px solid #2a3654;border-radius:10px;background:#0d1636;color:#e9eef6;font-family:inherit;font-size:.95rem}
.inqform input:focus,.inqform textarea:focus{outline:none;border-color:var(--sea)}
.inqform .bf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.inqform input[type=date],.inqform input[type=number]{color-scheme:dark}
/* exit-intent rescue */
.exitpop{position:fixed;inset:0;z-index:200;background:rgba(5,8,18,.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem}
.exitpop[hidden]{display:none}
.ep-card{position:relative;max-width:430px;background:#0f1836;border:1px solid rgba(252,192,48,.3);
  border-radius:20px;padding:2.3rem 2.2rem;text-align:center;box-shadow:0 40px 90px -20px rgba(0,0,0,.8)}
.ep-kicker{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.ep-card h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:#fff;margin-bottom:.7rem}
.ep-card p{color:#bac7dd;font-size:.92rem;margin-bottom:1.5rem}
.ep-close{position:absolute;top:.7rem;right:1rem;background:none;border:none;color:#93a1bd;font-size:1.5rem;cursor:pointer}
.ep-stay{display:block;margin:1rem auto 0;background:none;border:none;color:#93a1bd;font-size:.8rem;cursor:pointer;text-decoration:underline}
/* Ask Matarma concierge */
.concierge{position:fixed;left:1.1rem;bottom:1.1rem;z-index:85;font-family:var(--sans)}
.cg-fab{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:999px;
  border:1px solid rgba(252,192,48,.45);background:rgba(10,16,40,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#f5e3b8;font-family:inherit;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6),0 0 22px -8px rgba(252,192,48,.4);transition:all .3s}
.cg-fab:hover{transform:translateY(-2px);background:rgba(13,22,54,.95)}
.cg-fab svg{width:16px;height:16px;color:var(--gold)}
.cg-panel{position:absolute;left:0;bottom:calc(100% + .8rem);width:min(350px,calc(100vw - 2.4rem));
  background:rgba(10,16,40,.97);border:1px solid rgba(84,192,228,.25);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cg-head{display:flex;align-items:baseline;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid rgba(233,238,246,.1)}
.cg-head b{color:#fff;font-size:.95rem}
.cg-head span{font-size:.68rem;color:#93a1bd;flex:1}
.cg-x{background:none;border:none;color:#93a1bd;font-size:1.3rem;cursor:pointer;line-height:1}
.cg-msgs{max-height:300px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.cg-m{max-width:88%;padding:.6rem .85rem;border-radius:14px;font-size:.85rem;line-height:1.5}
.cg-m--bot{background:rgba(84,192,228,.1);color:#dbe3f2;border-bottom-left-radius:4px;align-self:flex-start}
.cg-m--me{background:rgba(252,192,48,.14);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.cg-m a{color:var(--sea)}
.cg-wa{color:#5ce18f!important}
.cg-dots s{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:#9fd8ee;text-decoration:none;animation:cgd 1s infinite}
.cg-dots s:nth-child(2){animation-delay:.15s}.cg-dots s:nth-child(3){animation-delay:.3s}
@keyframes cgd{40%{transform:translateY(-4px)}}
.cg-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1rem .6rem}
.cg-chips button{padding:.3rem .7rem;border-radius:99px;border:1px solid rgba(84,192,228,.3);
  background:transparent;color:#9fd8ee;font-family:inherit;font-size:.7rem;cursor:pointer;transition:all .25s}
.cg-chips button:hover{border-color:var(--sea);color:#fff}
.cg-form{display:flex;gap:.5rem;padding:.7rem 1rem 1rem}
.cg-form input{flex:1;min-width:0;padding:.6rem .8rem;border:1px solid #2a3654;border-radius:10px;
  background:#0d1636;color:#e9eef6;font-family:inherit;font-size:.85rem}
.cg-form input:focus{outline:none;border-color:var(--sea)}
.cg-form button{border:none;background:var(--gold);color:#12203f;border-radius:10px;padding:0 .95rem;cursor:pointer;font-size:.9rem}
@media(max-width:960px){
  .concierge{bottom:5.4rem}
  .addons{grid-template-columns:1fr}
  .inqform .bf-grid2{grid-template-columns:1fr}
}

/* "Now at Matarma" — live band */
.nb-label{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:#9fd8ee;margin-bottom:1.1rem}
.nb-dot{width:8px;height:8px;border-radius:50%;background:#39d98a;flex:none;
  box-shadow:0 0 0 0 rgba(57,217,138,.55);animation:wx-pulse 2.2s ease-out infinite}

/* "Continue your booking" resume pill */
.resume{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,180%);z-index:90;
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .6rem 1.15rem;border-radius:999px;
  background:rgba(10,16,40,.93);border:1px solid rgba(252,192,48,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#e9eef6;font-size:.84rem;white-space:nowrap;max-width:calc(100vw - 1.6rem);
  box-shadow:0 18px 50px -15px rgba(0,0,0,.7),0 0 26px -8px rgba(252,192,48,.35);
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.resume.on{transform:translate(-50%,0)}
.resume b{color:var(--gold);font-weight:600}
.rs-dot{width:8px;height:8px;border-radius:50%;background:#FCC030;flex:none;
  box-shadow:0 0 0 0 rgba(252,192,48,.55);animation:wx-pulse-sun 2.4s ease-out infinite}
.rs-go{padding:.5rem 1.05rem;border-radius:999px;background:var(--gold);color:#12203f!important;
  font-weight:600;font-size:.76rem;letter-spacing:.04em;flex:none;transition:transform .25s}
.rs-go:hover{transform:translateY(-1px)}
.rs-x{background:none;border:none;color:#93a1bd;font-size:1.25rem;cursor:pointer;line-height:1;padding:0 .25rem}
@media(max-width:960px){
  .resume{bottom:8.8rem;font-size:.76rem;white-space:normal;text-align:left;line-height:1.35}
}

/* =========================================================
   PAGE REBUILDS — timeline, condos, contact cards, FAQ
   ========================================================= */
/* One-perfect-day timeline (experiences) */
.dayline{max-width:860px;margin:0 auto;position:relative;padding-left:10px}
.dayline::before{content:"";position:absolute;left:86px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,rgba(84,192,228,.5),rgba(252,192,48,.5),rgba(240,96,108,.4))}
.dl{display:flex;align-items:center;gap:1.6rem;margin-bottom:1.6rem;position:relative}
.dl__t{width:64px;flex:none;text-align:right;font-family:var(--serif);font-size:1.15rem;color:var(--gold)}
.dl::after{content:"";position:absolute;left:81px;width:11px;height:11px;border-radius:50%;
  background:var(--gold);border:2px solid #0b1226;box-shadow:0 0 12px rgba(252,192,48,.6)}
.dl__img{width:150px;height:96px;border-radius:12px;background-size:cover;background-position:center;
  flex:none;margin-left:26px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.dl__x b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem;color:#fff;margin-bottom:.2rem}
.dl__x p{font-size:.9rem;color:#bac7dd;max-width:46ch;margin:0}
@media(max-width:700px){
  .dayline::before{left:64px}
  .dl{gap:1rem}
  .dl__t{width:44px;font-size:.95rem}
  .dl::after{left:59px;width:9px;height:9px}
  .dl__img{width:92px;height:70px;margin-left:20px}
  .dl__x b{font-size:1.05rem}
  .dl__x p{font-size:.8rem}
}
/* Residences condo cards */
.condos{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:860px){.condos{grid-template-columns:1fr}}
.condo{border-radius:16px;overflow:hidden;background:rgba(13,22,54,.55);border:1px solid rgba(84,192,228,.16)}
.condo__img{height:300px;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.condo:hover .condo__img{transform:scale(1.04)}
.condo__body{padding:1.6rem 1.8rem 1.8rem}
.condo__body h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:#fff;margin-bottom:.6rem}
.condo__body p{font-size:.95rem}
.mini-note{font-size:.82rem;color:#93a1bd;margin-top:2rem}
/* Contact channel cards */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.ccard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  padding:1.8rem 1.2rem 1.5rem;border-radius:16px;background:rgba(13,22,54,.55);
  border:1px solid rgba(84,192,228,.16);transition:transform .35s,border-color .35s}
.ccard:hover{transform:translateY(-4px);border-color:rgba(84,192,228,.45)}
.ccard--wa{border-color:rgba(37,211,102,.4)}
.ccard--wa:hover{border-color:rgba(37,211,102,.7)}
.ccard__ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(84,192,228,.12);color:var(--sea);margin-bottom:.5rem}
.ccard--wa .ccard__ico{background:rgba(37,211,102,.12);color:#5ce18f}
.ccard__ico svg{width:24px;height:24px}
.ccard b{color:#fff;font-size:1rem;font-weight:600}
.ccard__v{color:var(--gold);font-size:.95rem}
.ccard__hint{font-size:.72rem;color:#93a1bd;margin-top:.2rem}
/* FAQ accordion */
.faq__item{border:1px solid rgba(233,238,246,.12);border-radius:12px;margin-bottom:.6rem;
  background:rgba(13,22,54,.45);overflow:hidden;transition:border-color .3s}
.faq__item[open]{border-color:rgba(252,192,48,.4)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.2rem;cursor:pointer;color:#fff;font-size:.95rem;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary span{color:var(--gold);font-size:1.2rem;transition:transform .3s;flex:none}
.faq__item[open] summary span{transform:rotate(45deg)}
.faq__item p{padding:0 1.2rem 1rem;font-size:.88rem;color:#bac7dd}

/* =========================================================
   MOBILE POLISH — calmer hero, elegant bottom bar,
   compact concierge (overrides earlier rules)
   ========================================================= */
@media(max-width:860px){
  /* hero: smaller centered logo with room under the nav */
  .hero__logo{width:min(210px,54vw);margin-bottom:1.1rem}
  .hero__inner{padding-top:4.2rem}
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.5rem)}
  .hero p{font-size:1rem;margin-bottom:1.6rem}
  .hero__cta{gap:.55rem}
  .hero__cta .btn{padding:.78rem 1.25rem;font-size:.7rem;letter-spacing:.16em}
  .hero__chips{margin-top:1.2rem;gap:.45rem}
  .hero__wx{font-size:.72rem;padding:.5rem .95rem}

  /* bottom bar: one dark glass bar — WhatsApp icon + gold Book pill */
  .bookbar{background:rgba(8,13,32,.94)!important;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(84,192,228,.22);
    padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
    gap:.6rem;align-items:center;box-shadow:0 -10px 34px rgba(0,0,0,.5)}
  .bookbar a{flex:none;padding:0;letter-spacing:.12em}
  .bookbar__wa{width:46px;height:46px;border-radius:50%;
    background:linear-gradient(145deg,#2ee079,#17a94e)!important;color:#fff;
    display:grid;place-items:center;font-size:0;
    box-shadow:0 6px 18px -6px rgba(37,211,102,.55)}
  .bookbar__wa svg{width:23px;height:23px}
  .bookbar__book{flex:1!important;text-align:center;padding:.85rem .5rem!important;
    border-radius:999px;background:var(--gold)!important;color:#12203f;
    font-size:.76rem;font-weight:600}

  /* concierge: compact round icon, no text */
  .concierge{bottom:5.2rem;left:.9rem}
  .cg-fab{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
  .cg-fab span{display:none}
  .cg-fab svg{width:20px;height:20px}
  .cg-panel{bottom:calc(100% + .7rem)}
}

/* =========================================================
   VISUAL ENERGY — living page heroes + glowing booking UI
   (transform-only entrances: can never hide content)
   ========================================================= */
/* every inner page hero breathes (Ken Burns, like the homepage) */
.page-hero{overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:inherit;
  will-change:transform;animation:kenburns 30s ease-in-out infinite alternate;z-index:0}
.page-hero>div{position:relative;z-index:1}

/* booking form — slow rotating aqua/gold aurora border */
.bookform{position:relative;border:1.5px solid transparent;
  background:linear-gradient(rgba(13,22,54,.74),rgba(13,22,54,.74)) padding-box,
    conic-gradient(from var(--ra),rgba(84,192,228,.14),rgba(84,192,228,.55),rgba(252,192,48,.5),rgba(240,96,108,.35),rgba(84,192,228,.14)) border-box;
  animation:ra-spin 11s linear infinite;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6),0 0 36px -14px rgba(84,192,228,.35)}

/* summary card — golden aurora twin */
.bs-card{border:1.5px solid transparent;
  background:linear-gradient(rgba(13,22,54,.74),rgba(13,22,54,.74)) padding-box,
    conic-gradient(from var(--ra),rgba(252,192,48,.16),rgba(252,192,48,.6),rgba(84,192,228,.4),rgba(252,192,48,.16)) border-box;
  animation:ra-spin 13s linear infinite;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.55),0 0 30px -12px rgba(252,192,48,.3)}

/* section labels get a gold accent line */
.bf-label{position:relative;padding-bottom:.55rem}
.bf-label::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(252,192,48,0))}

/* trust badges: staggered rise-in (transform only) + glowing scores */
.bb{animation:bb-in .8s cubic-bezier(.16,1,.3,1) both}
.bb:nth-child(2){animation-delay:.07s}.bb:nth-child(3){animation-delay:.14s}
.bb:nth-child(4){animation-delay:.21s}.bb:nth-child(5){animation-delay:.28s}
@keyframes bb-in{from{transform:translateY(12px)}}
.bb b{text-shadow:0 0 14px rgba(84,192,228,.55)}
.bb:hover{border-color:rgba(84,192,228,.5)}

/* room cards: selected glows gold, taps feel physical */
.rp-card{transition:border-color .3s,background .3s,transform .18s,box-shadow .35s}
.rp-card:has(input:checked){box-shadow:0 12px 32px -12px rgba(252,192,48,.4)}
.rp-card:active{transform:scale(.984)}
.stepper button:active{background:rgba(84,192,228,.28)}
.qp button:active{transform:scale(.95)}

/* the money buttons breathe */
.bst-btn,.bf-submit{animation:req-glow 2.8s ease-in-out infinite}
@keyframes req-glow{50%{box-shadow:0 0 24px -4px rgba(252,192,48,.55)}}
.bf-wasubmit{animation:wa-glow 3.2s ease-in-out infinite}
@keyframes wa-glow{50%{box-shadow:0 0 22px -6px rgba(37,211,102,.5)}}

@media (prefers-reduced-motion:reduce){
  .page-hero::before,.bookform,.bs-card,.bb,.bst-btn,.bf-submit,.bf-wasubmit{animation:none}
}

/* =========================================================
   GOLDEN BOOK FLOAT — the glowing orb, reborn in brand gold
   ========================================================= */
.book-float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;display:flex;align-items:center;gap:.85rem}
.book-float__btn{position:relative;width:62px;height:62px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,#ffd45e,#e0a81c);display:grid;place-items:center;color:#12203f;
  box-shadow:0 12px 32px -8px rgba(252,192,48,.55),0 0 34px -6px rgba(252,192,48,.5);
  animation:bkf-bob 3.6s ease-in-out infinite;transition:transform .3s}
.book-float:hover .book-float__btn{transform:scale(1.07)}
.book-float__btn svg{width:26px;height:26px}
.book-float__btn::before,.book-float__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(252,192,48,.55);animation:bkf-ring 3s ease-out infinite;pointer-events:none}
.book-float__btn::after{animation-delay:1.5s}
.book-float__label{background:rgba(10,16,40,.92);border:1px solid rgba(252,192,48,.5);color:#f5e3b8;
  padding:.55rem 1.05rem;border-radius:999px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;
  opacity:0;transform:translateX(12px);animation:bkf-peek 9s ease-in-out infinite;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.book-float:hover .book-float__label{opacity:1;transform:translateX(0);animation:none}
@keyframes bkf-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.95);opacity:0}}
@keyframes bkf-bob{50%{transform:translateY(-6px)}}
@keyframes bkf-peek{0%,70%,100%{opacity:0;transform:translateX(12px)}77%,93%{opacity:1;transform:translateX(0)}}
@media(max-width:860px){.book-float{display:none}}   /* the bottom bar owns mobile */
@media(prefers-reduced-motion:reduce){
  .book-float__btn,.book-float__btn::before,.book-float__btn::after,.book-float__label{animation:none}
  .book-float__label{opacity:1;transform:none}
}

/* golden float goes mobile — the bottom bar is retired */
@media(max-width:860px){
  .book-float{display:flex;right:1rem;bottom:1rem}
  .book-float__btn{width:52px;height:52px}
  .book-float__btn svg{width:22px;height:22px}
  .book-float__label{font-size:.62rem;padding:.45rem .85rem;letter-spacing:.12em}
  .concierge{bottom:1rem;left:1rem}
  .resume{bottom:4.9rem}
}
/* booking sidebar: call link replaces the WA link */
.bs-wa{border-color:rgba(84,192,228,.4);background:rgba(84,192,228,.1);color:#cfe9f6}
.bs-wa:hover{background:rgba(84,192,228,.2)}
.bs-wa b{color:var(--sea)}
/* exit popup call line */
.ep-call{display:block;margin-top:1rem;font-size:.85rem;color:#9fd8ee}

/* =========================================================
   SPOTLIGHT STAY CARDS — hover expands, siblings step back
   ========================================================= */
.staycards--x{display:flex;gap:1rem;grid-template-columns:none}
.staycards--x .staycard{flex:1 1 0;min-width:0;height:560px;min-height:0;border-radius:16px;
  transition:flex .85s cubic-bezier(.22,1,.36,1),filter .55s ease}
.staycards--x:hover .staycard:not(:hover){filter:saturate(.5) brightness(.68)}
.staycards--x .staycard:hover{flex:2.3 1 0}
.staycards--x .staycard::after{content:"";position:absolute;inset:0;border-radius:16px;
  border:1px solid rgba(252,192,48,0);transition:border-color .5s;pointer-events:none}
.staycards--x .staycard:hover::after{border-color:rgba(252,192,48,.55)}
.staycards--x .staycard__img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.staycards--x .staycard:hover .staycard__img{transform:scale(1.07)}
.sc-num{position:absolute;top:1.15rem;left:1.25rem;z-index:2;font-family:var(--serif);
  font-size:.95rem;letter-spacing:.25em;color:rgba(255,255,255,.85);
  padding-bottom:.35rem;border-bottom:1px solid rgba(252,192,48,.7)}
.staycards--x .staycard__cap{padding:2.6rem 1.7rem 1.6rem}
.staycards--x .staycard__cap h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-more{max-height:0;opacity:0;transform:translateY(14px);overflow:hidden;
  transition:max-height .6s cubic-bezier(.22,1,.36,1) .1s,opacity .5s .15s,transform .55s .15s}
.staycards--x .staycard:hover .sc-more{max-height:220px;opacity:1;transform:none}
.sc-more p{color:#dbe3f2;font-size:.9rem;margin:.6rem 0 .45rem;line-height:1.5}
.sc-more em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9fd8ee;margin-bottom:.7rem}
.sc-book{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold);font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.sc-book i{font-style:normal;transition:transform .3s}
.staycards--x .staycard:hover .sc-book i{transform:translateX(5px)}
/* mobile: swipeable snap carousel with a peek of the next card */
@media(max-width:860px){
  .staycards--x{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 0 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .staycards--x::-webkit-scrollbar{display:none}
  .staycards--x .staycard{flex:0 0 82%;height:470px;scroll-snap-align:center}
  .staycards--x:hover .staycard:not(:hover){filter:none}
  .sc-more{max-height:none;opacity:1;transform:none}
  .staycards--x .staycard__cap h3{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .staycards--x .staycard,.staycards--x .staycard__img,.sc-more{transition:none}
}

/* the SELECTED room never dims — even when the party needs multiple units */
.rp-card--over:has(input:checked){opacity:1;filter:none;border-color:var(--gold);background:rgba(252,192,48,.06)}

/* layered stay-media composition (hotel 04) */
.staymedia{position:relative;min-height:72vh}
.sm-main{position:absolute;top:0;right:0;bottom:9%;left:13%;background-size:cover;background-position:center;
  border-radius:14px;box-shadow:0 30px 70px -25px rgba(0,0,0,.65)}
.sm-inset{position:absolute;left:0;bottom:0;width:40%;height:48%;background-size:cover;background-position:center;
  border-radius:12px;border:8px solid #0b1226;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.sm-flag{position:absolute;top:1.6rem;right:-.8rem;transform:rotate(3deg);
  background:linear-gradient(145deg,#ffd45e,#e0a81c);color:#12203f;
  padding:.7rem 1.2rem;border-radius:12px;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.5;
  box-shadow:0 14px 34px -10px rgba(252,192,48,.55)}
@media(max-width:860px){
  .staymedia{min-height:58vh;margin-top:1rem}
  .sm-flag{right:.4rem;font-size:.62rem}
}

/* full-viewport inner hero (hotel) — the sea owns the first screen */
.page-hero--full{min-height:100vh;min-height:100svh}
.page-hero--full .hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%)}

/* =========================================================
   MODERN FRAMES — the brand's rounded-device motif replaces
   the classic rectangle site-wide (one scooped corner + gold
   hairline mat inside every feature photo)
   ========================================================= */
.split-lux__media{position:relative;border-radius:28px 120px 28px 28px;overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.55)}
.split-lux--rev .split-lux__media{border-radius:120px 28px 28px 28px}
.split-lux__media::after{content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid rgba(252,192,48,.4);border-radius:18px 96px 18px 18px}
.split-lux--rev .split-lux__media::after{border-radius:96px 18px 18px 18px}
.welcome__main{border-radius:26px 26px 90px 26px}
.welcome__inset{border-radius:20px}
.sm-main{border-radius:28px 110px 28px 28px}
.sm-main::after{content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid rgba(252,192,48,.4);border-radius:18px 88px 18px 18px}
.sm-inset{border-radius:20px}
.condo{border-radius:26px 26px 90px 26px}
.dl__img{border-radius:16px}
.gal__item{border-radius:14px}
@media(max-width:860px){
  .split-lux__media{border-radius:22px 64px 22px 22px}
  .split-lux--rev .split-lux__media{border-radius:64px 22px 22px 22px}
  .split-lux__media::after{inset:10px;border-radius:14px 52px 14px 14px}
  .split-lux--rev .split-lux__media::after{border-radius:52px 14px 14px 14px}
  .welcome__main{border-radius:20px 20px 56px 20px}
  .sm-main{border-radius:22px 70px 22px 22px}
  .sm-main::after{inset:10px;border-radius:14px 56px 14px 14px}
}

/* =========================================================
   FRAME FAMILY — variety within the brand language.
   scoop (default) · arch · lens · clean · offset-line
   ========================================================= */
/* ARCH — full curved top, doorway/window feel */
.split-lux__media.fr-arch{border-radius:180px 180px 26px 26px}
.split-lux__media.fr-arch::after{border-radius:166px 166px 18px 18px}
/* LENS — one whole side curved, organic */
.split-lux__media.fr-lens{border-radius:26px 170px 170px 26px}
.split-lux__media.fr-lens::after{border-radius:18px 156px 156px 18px}
.split-lux--rev .split-lux__media.fr-lens{border-radius:170px 26px 26px 170px}
.split-lux--rev .split-lux__media.fr-lens::after{border-radius:156px 18px 18px 156px}
/* CLEAN — quiet uniform rounding */
.split-lux__media.fr-clean{border-radius:24px}
.split-lux__media.fr-clean::after{border-radius:16px}
/* OFFSET-LINE — welcome compositions get a floating gold outline
   behind the main photo instead of a scoop (distinct from dining) */
.welcome__main{border-radius:24px}
.welcome__media{position:relative}
.welcome__media::before{content:"";position:absolute;top:-16px;right:-16px;
  bottom:calc(8% + 16px);left:calc(14% + 16px);
  border:1px solid rgba(252,192,48,.35);border-radius:26px;pointer-events:none}
@media(max-width:860px){
  .split-lux__media.fr-arch{border-radius:110px 110px 20px 20px}
  .split-lux__media.fr-arch::after{border-radius:100px 100px 14px 14px}
  .split-lux__media.fr-lens{border-radius:20px 96px 96px 20px}
  .split-lux__media.fr-lens::after{border-radius:14px 86px 86px 14px}
  .welcome__media::before{top:-10px;right:-10px}
}

/* =========================================================
   SPLIT DEPTH PASS — every feature section, upgraded at once
   ========================================================= */
/* 1 · every feature photo breathes (slow Ken Burns inside its frame) */
.split-lux__media,.welcome__main,.welcome__inset,.sm-main,.sm-inset{overflow:hidden}
.split-lux__media::before,.welcome__main::before,.sm-main::before,
.welcome__inset::before,.sm-inset::before{content:"";position:absolute;inset:0;
  background:inherit;will-change:transform;animation:kenburns 38s ease-in-out infinite alternate}
.welcome__main{position:absolute}   /* keep containing box for ::before */
/* 3 · gold accent line under every section label */
.split-lux__text .lux-label,.welcome__text .lux-label{position:relative;padding-bottom:.6rem}
.split-lux__text .lux-label::after,.welcome__text .lux-label::after{content:"";position:absolute;
  left:0;bottom:0;width:46px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(252,192,48,0))}
/* 4 · tag chips become glass */
.exp-tags span{background:rgba(13,22,54,.5)!important;border:1px solid rgba(84,192,228,.28)!important;
  color:#cfe0f0!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s}
.exp-tags span:hover{border-color:rgba(252,192,48,.65)!important;color:#fff!important}
/* 5 · photos lift toward you on hover, hairline warms */
.split-lux__media{transition:box-shadow .5s ease,transform .5s ease}
.split-lux__media:hover{transform:translateY(-5px);box-shadow:0 42px 90px -30px rgba(0,0,0,.7)}
.split-lux__media:hover::after{border-color:rgba(252,192,48,.75)}
@media(prefers-reduced-motion:reduce){
  .split-lux__media::before,.welcome__main::before,.sm-main::before,
  .welcome__inset::before,.sm-inset::before{animation:none}
}

/* Titles inside split columns: scaled to the column, never orphan-wrap */
.split-lux__text .display,.welcome__text .display{
  font-size:clamp(2.1rem,4.4vw,3.8rem);text-wrap:balance;line-height:1.06}

/* =========================================================
   RESIDENCE DOSSIERS — the flagship product, sold like one
   ========================================================= */
.dossier{position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3.2rem,6vw,5rem)}
.dossier__flipbox{position:absolute;opacity:0;pointer-events:none}
.dossier__media{position:relative;aspect-ratio:4/3;border-radius:26px}
.dm-photo,.dm-plan{position:absolute;inset:0;border-radius:26px;overflow:hidden;
  background-size:cover;background-position:center;transition:opacity .55s ease}
.dm-photo::before{content:"";position:absolute;inset:0;background:inherit;
  animation:kenburns 38s ease-in-out infinite alternate}
.dm-plan{opacity:0;background-color:#101d4d;background-size:contain;
  background-repeat:no-repeat;border:1px solid rgba(252,192,48,.35)}
.dossier__media::after{content:"";position:absolute;inset:14px;z-index:2;
  border:1px solid rgba(252,192,48,.45);border-radius:16px;pointer-events:none}
.dossier__flipbox:checked~.dossier__media .dm-plan{opacity:1}
.dm-inset{position:absolute;right:-1.4rem;bottom:-2rem;width:37%;aspect-ratio:3/3.6;z-index:3;
  border-radius:16px;background-size:cover;background-position:center;
  border:1px solid rgba(252,192,48,.5);box-shadow:0 26px 60px -18px rgba(0,0,0,.75);
  transition:opacity .4s ease}
.dossier__flipbox:checked~.dossier__media .dm-inset{opacity:0;pointer-events:none}
.dossier__tag{position:absolute;top:1.1rem;left:-.9rem;z-index:4;background:var(--gold);
  color:#152049;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:9px;transform:rotate(-4deg);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.dossier--rev .dossier__media{order:2}
.dossier--rev .dossier__body{order:1}
.dossier--rev .dm-inset{right:auto;left:-1.4rem}
.dossier--rev .dossier__tag{left:auto;right:-.9rem;transform:rotate(4deg)}
.dossier__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);margin-bottom:.7rem}
.spec{list-style:none;margin:1.5rem 0 1.8rem;padding:0;border-top:1px solid rgba(84,192,228,.2)}
.spec li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.65rem .15rem;border-bottom:1px solid rgba(84,192,228,.2)}
.spec span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#9fb0c8}
.spec b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--gold)}
.dossier__actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.dossier__fliplabel{cursor:pointer;user-select:none}
.dossier__flipbox:checked~.dossier__body .lbl-plan{display:none}
.dossier__flipbox:not(:checked)~.dossier__body .lbl-photo{display:none}

/* Key facts — one glowing gold bar over the sunset */
.specband{padding:clamp(4.5rem,9vw,7rem) 0}
.specband .container{position:relative;z-index:2}
.factbar{display:flex;flex-wrap:wrap;background:rgba(10,18,44,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(252,192,48,.4);border-radius:22px;padding:1.6rem .8rem;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 70px rgba(252,192,48,.14)}
.fb{flex:1 1 140px;text-align:center;padding:.5rem 1rem;position:relative}
.fb b{display:block;font-family:var(--serif);font-weight:400;line-height:1.1;
  font-size:clamp(2rem,3.6vw,2.9rem);color:var(--gold);text-shadow:0 0 26px rgba(252,192,48,.4)}
.fb span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#e6edf7}
.fb+.fb::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(252,192,48,.55),transparent)}
@media(max-width:860px){
  .dossier{grid-template-columns:1fr;gap:1.4rem;margin-top:2.6rem}
  .dossier--rev .dossier__media{order:0}
  .dossier--rev .dossier__body{order:0}
  .dossier__media{margin-bottom:1.8rem}
  .dm-inset{width:42%;right:-.5rem;bottom:-1.4rem}
  .dossier--rev .dm-inset{left:-.5rem}
  .dossier__tag{left:-.4rem}
  .dossier--rev .dossier__tag{right:-.4rem}
  .fb{flex:1 1 44%;padding:.7rem .3rem}
  .fb+.fb::before{display:none}
}

/* Phones get the light hero (~4x smaller) — desktop keeps the master */
@media(max-width:640px){
  .hero__bg[style*="--hm"]{background-image:var(--hm)!important}
  .page-hero[style*="--hm"]{background-image:linear-gradient(rgba(20,27,62,.36),rgba(20,27,62,.64)),var(--hm)!important}
}

/* =========================================================
   SALES SCENE — the conversation starter, staged like one
   ========================================================= */
.salescene{position:relative;background-size:cover;background-position:center;
  padding:clamp(4.5rem,9vw,7.5rem) 0;overflow:hidden}
.salescene::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,13,34,.95) 0%,rgba(7,13,34,.85) 45%,rgba(10,17,42,.55) 100%)}
.salescene .container{position:relative;z-index:2}
.salescene__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.salespoints{list-style:none;margin:0 0 1.8rem;padding:0}
.salespoints li{position:relative;padding:.45rem 0 .45rem 1.7rem;color:#dbe6f5}
.salespoints li::before{content:"\2726";position:absolute;left:0;top:.45rem;color:var(--gold)}
.salespoints b{color:var(--gold);font-style:normal}
.hotline{display:inline-flex;align-items:center;gap:1rem;margin:0 0 1.8rem;
  padding:.9rem 1.4rem;border:1px solid rgba(252,192,48,.45);border-radius:16px;
  background:rgba(252,192,48,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hotline__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--gold);color:#14204a;animation:hotline-pulse 2.6s ease-in-out infinite}
@keyframes hotline-pulse{50%{box-shadow:0 0 0 9px rgba(252,192,48,.14)}}
.hotline__x b{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--gold);line-height:1.05}
.hotline__x span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#c7d4e6}
.sf-card{position:relative;border-radius:26px;padding:clamp(1.6rem,3.2vw,2.6rem);
  background:rgba(9,16,40,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.sf-card::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;
  background:conic-gradient(from var(--ra),rgba(252,192,48,.75),rgba(84,192,228,.4),rgba(252,192,48,.06),rgba(252,192,48,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:ra-spin 10s linear infinite;pointer-events:none}
.sf-title{font-family:var(--serif);font-size:1.55rem;margin:0 0 .3rem}
.sf-sub{color:#a9b8cf;font-size:.92rem;margin:0 0 1.4rem}
.sf-form input,.sf-form textarea,.sf-select{width:100%;padding:.9rem 1rem;margin-bottom:.9rem;
  border:1px solid rgba(84,192,228,.28);border-radius:12px;background:rgba(13,22,54,.65);
  color:#e9eef6;font-family:inherit;transition:border-color .3s,box-shadow .3s}
.sf-form input:focus,.sf-form textarea:focus,.sf-select:focus{outline:none;
  border-color:rgba(252,192,48,.7);box-shadow:0 0 0 3px rgba(252,192,48,.14)}
.sf-send{width:100%;animation:req-glow 2.8s ease-in-out infinite}
@media(max-width:900px){.salescene__grid{grid-template-columns:1fr}}

/* Sales scene: solid colour stage — the photos live in the neighbour sections */
.salescene{background:#0b1430}
.salescene::before{background:
  radial-gradient(720px 400px at 85% 12%,rgba(252,192,48,.09),transparent 60%),
  radial-gradient(640px 420px at 8% 92%,rgba(84,192,228,.08),transparent 60%)}
.hotline{text-decoration:none;transition:border-color .3s,background .3s,transform .3s}
.hotline:hover{border-color:rgba(252,192,48,.85);background:rgba(252,192,48,.13);transform:translateY(-2px)}

/* =========================================================
   CONTACT REVAMP — console cards, pro FAQ, map scene
   ========================================================= */
.ccards--pro .ccard{background:rgba(13,22,54,.55);border:1px solid rgba(84,192,228,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:18px;
  transition:transform .35s ease,border-color .35s,box-shadow .35s}
.ccards--pro .ccard:hover{transform:translateY(-6px);border-color:rgba(252,192,48,.6);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.6)}
.ccards--pro .ccard__ico{background:rgba(252,192,48,.12);color:var(--gold);
  border:1px solid rgba(252,192,48,.35)}
.ccards--pro .ccard--gold{border-color:rgba(252,192,48,.55);
  background:linear-gradient(160deg,rgba(252,192,48,.16),rgba(13,22,54,.6))}

.faq--pro .faq__item{border:1px solid rgba(84,192,228,.16);border-radius:14px;
  margin-bottom:.7rem;background:rgba(13,22,54,.4);overflow:hidden}
.faq--pro summary{padding:.95rem 1.1rem}
.faq--pro .faq__item p{padding:0 1.1rem .95rem}
.faq--pro summary span{color:var(--gold);transition:transform .3s ease;display:inline-block}
.faq--pro details[open] summary span{transform:rotate(45deg)}

.mapscene{position:relative;min-height:580px;display:flex;align-items:center;overflow:hidden}
.mapscene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.89) hue-rotate(185deg) grayscale(.2) contrast(.92)}
.mapscene .container{position:relative;z-index:2;pointer-events:none;width:100%}
.mapcard{pointer-events:auto;max-width:440px;background:rgba(9,16,40,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(252,192,48,.4);border-radius:22px;
  padding:clamp(1.6rem,3vw,2.2rem);box-shadow:0 40px 90px -25px rgba(0,0,0,.8);
  margin:clamp(2rem,5vw,4rem) 0}
.mapfacts{list-style:none;margin:0 0 1.5rem;padding:0}
.mapfacts li{padding:.55rem 0;border-bottom:1px solid rgba(84,192,228,.16)}
.mapfacts b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:.15rem}
.mapfacts span{color:#dbe6f5;font-size:.95rem}
@media(max-width:700px){
  .mapscene{min-height:0;display:block}
  .mapscene iframe{position:relative;height:320px;display:block;inset:auto}
  .mapcard{max-width:none;margin:1.2rem}
}

/* Brand text selection */
::selection{background:rgba(252,192,48,.85);color:#14204a}

/* =========================================================
   MATARMA LIVE — the site follows the real sun over Ras Sudr
   ========================================================= */
.hero__fader{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s ease;will-change:opacity}
.hero__now b{font-weight:600;color:var(--gold)}
.hero__now span{opacity:.85}
.hero__stars{position:absolute;inset:0 0 34% 0;pointer-events:none;opacity:0;transition:opacity 2s ease;z-index:1}
body[data-phase=night] .hero__stars{opacity:1}
.hero__stars::before,.hero__stars::after{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 28%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 26% 14%,#dceaff,transparent),
    radial-gradient(1.8px 1.8px at 38% 34%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 52% 10%,#cfe0ff,transparent),
    radial-gradient(1.5px 1.5px at 64% 26%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 78% 16%,#e6f0ff,transparent),
    radial-gradient(1.7px 1.7px at 88% 32%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 94% 8%,#dceaff,transparent);
  animation:mtr-twinkle 4.2s ease-in-out infinite alternate}
.hero__stars::after{background-image:
    radial-gradient(1.3px 1.3px at 8% 12%,#e8f1ff,transparent),
    radial-gradient(1.6px 1.6px at 20% 40%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 33% 22%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 47% 30%,#dfeaff,transparent),
    radial-gradient(1.2px 1.2px at 59% 8%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 71% 38%,#eef4ff,transparent),
    radial-gradient(1.1px 1.1px at 83% 20%,#fff,transparent);
  animation:mtr-twinkle 5.6s ease-in-out -2s infinite alternate}
@keyframes mtr-twinkle{from{opacity:.3}to{opacity:1}}
/* sky tint follows the sun */
.hero__overlay{transition:background 2s ease}
body[data-phase=dawn] .hero__overlay{background:linear-gradient(180deg,rgba(255,171,94,.16),rgba(20,27,62,.38) 55%,rgba(20,27,62,.72))}
body[data-phase=day] .hero__overlay{background:linear-gradient(180deg,rgba(84,192,228,.10),rgba(20,27,62,.36) 55%,rgba(20,27,62,.70))}
body[data-phase=golden] .hero__overlay{background:linear-gradient(180deg,rgba(252,158,74,.20),rgba(43,28,64,.42) 55%,rgba(16,20,52,.75))}
body[data-phase=night] .hero__overlay{background:linear-gradient(180deg,rgba(6,10,30,.35),rgba(8,12,34,.5) 55%,rgba(6,9,28,.82))}
@media(prefers-reduced-motion:reduce){.hero__stars::before,.hero__stars::after{animation:none}}

/* Glowing stars — halos, pulsing bright stars, a shooting star */
.hero__stars::before{background-image:
  radial-gradient(16px 16px at 38% 34%,rgba(170,205,255,.22),transparent 70%),
  radial-gradient(14px 14px at 88% 32%,rgba(190,215,255,.18),transparent 70%),
  radial-gradient(1.6px 1.6px at 12% 28%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 26% 14%,#dceaff,transparent),
  radial-gradient(1.8px 1.8px at 38% 34%,#fff,transparent),
  radial-gradient(1.1px 1.1px at 52% 10%,#cfe0ff,transparent),
  radial-gradient(1.5px 1.5px at 64% 26%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 78% 16%,#e6f0ff,transparent),
  radial-gradient(1.7px 1.7px at 88% 32%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 94% 8%,#dceaff,transparent)}
.hero__stars::after{background-image:
  radial-gradient(15px 15px at 20% 40%,rgba(175,205,255,.20),transparent 70%),
  radial-gradient(13px 13px at 71% 38%,rgba(200,220,255,.16),transparent 70%),
  radial-gradient(1.3px 1.3px at 8% 12%,#e8f1ff,transparent),
  radial-gradient(1.6px 1.6px at 20% 40%,#fff,transparent),
  radial-gradient(1.1px 1.1px at 33% 22%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 47% 30%,#dfeaff,transparent),
  radial-gradient(1.2px 1.2px at 59% 8%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 71% 38%,#eef4ff,transparent),
  radial-gradient(1.1px 1.1px at 83% 20%,#fff,transparent)}
.hero__stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.9),0 0 18px 4px rgba(150,195,255,.55),0 0 34px 8px rgba(120,170,255,.25);
  animation:mtr-starglow 3.6s ease-in-out infinite alternate}
.hero__stars i:nth-child(1){top:18%;left:22%}
.hero__stars i:nth-child(2){top:9%;left:58%;animation-delay:-1.4s;transform:scale(.85)}
.hero__stars i:nth-child(3){top:26%;left:82%;animation-delay:-2.6s;transform:scale(1.15)}
@keyframes mtr-starglow{from{opacity:.5;filter:brightness(.85)}to{opacity:1;filter:brightness(1.4)}}
.hero__shoot{position:absolute;top:11%;left:-10%;width:130px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  transform:rotate(13deg);opacity:0;filter:drop-shadow(0 0 4px rgba(200,225,255,.8));
  animation:mtr-shoot 13s linear infinite 4s}
@keyframes mtr-shoot{
  0%,92%{opacity:0;transform:translate3d(0,0,0) rotate(13deg)}
  93.5%{opacity:.95}
  99%{opacity:0}
  100%{opacity:0;transform:translate3d(115vw,26vw,0) rotate(13deg)}}
body:not([data-phase=night]) .hero__shoot,
body:not([data-phase=night]) .hero__stars i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero__stars i,.hero__shoot{animation:none}}

/* MATARMA LIVE v2 — moon, birds, sunset moment */
.hero__moon{position:absolute;top:13%;right:11%;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fdfbf4,#e8e4d8 70%,#d8d4c6);
  box-shadow:0 0 18px 4px rgba(240,240,220,.35),0 0 60px 16px rgba(200,210,255,.15);
  opacity:0;transition:opacity 2s ease;overflow:hidden;pointer-events:none;z-index:1}
body[data-phase=night] .hero__moon{opacity:.95}
.hero__moon i{position:absolute;inset:-2px;border-radius:50%;background:#0a1128;opacity:.93;
  transition:transform 1.5s ease}
.hero__birds{position:absolute;inset:0 0 40% 0;pointer-events:none;z-index:1;overflow:hidden}
.bird{position:absolute;top:22%;left:-6%;opacity:0;animation:mtr-fly 36s linear infinite}
.bird svg{width:26px;height:13px;display:block;stroke:rgba(14,22,50,.5);fill:none;
  stroke-width:2;stroke-linecap:round;animation:mtr-flap 1.1s ease-in-out infinite alternate}
.bird:nth-child(2){top:15%;animation-delay:13s}
.bird:nth-child(2) svg{width:18px;height:9px}
.bird:nth-child(3){top:29%;animation-delay:24s}
.bird:nth-child(3) svg{width:22px;height:11px;animation-delay:-.4s}
@keyframes mtr-fly{
  0%{transform:translate3d(0,0,0)}
  2%{opacity:.75}
  46%{opacity:.75}
  50%,100%{opacity:0;transform:translate3d(115vw,-5vw,0)}}
@keyframes mtr-flap{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
body[data-phase=night] .bird{opacity:0!important;animation-play-state:paused}
body[data-phase=night] .bird svg{animation-play-state:paused}
/* the ten minutes around real sunset: the booking orb burns brighter */
body.sunset-live .book-float__btn{animation:bkf-urgent 1.5s ease-in-out infinite}
@keyframes bkf-urgent{50%{box-shadow:0 0 36px 8px rgba(252,192,48,.7)}}
@media(prefers-reduced-motion:reduce){.bird,.bird svg{animation:none;opacity:0}}

/* Realistic moon — photographic texture, soft terminator */
.hero__moon{background:url('/assets/brand/moon.webp') center/cover no-repeat;width:38px;height:38px;
  box-shadow:0 0 14px 2px rgba(235,235,215,.28),0 0 44px 10px rgba(190,205,255,.10)}
.hero__moon i{background:#070d24;opacity:.96;filter:blur(2.5px);inset:-4px}

/* Mobile menu: solid navy drawer (--ink was re-themed to off-white later in cascade) */
@media(max-width:860px){
  .nav__links{background:rgba(10,17,38,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-left:1px solid rgba(84,192,228,.18);box-shadow:-30px 0 80px rgba(0,0,0,.5)}
}
/* Touch devices: spotlight cards never flex-expand — sticky :hover was crushing the carousel */
@media(hover:none){
  .staycards--x .staycard,
  .staycards--x .staycard:hover{flex:0 0 82%}
  .staycards--x:hover .staycard:not(:hover){filter:none}
  .staycards--x .staycard:hover .staycard__img{transform:none}
  .staycards--x .sc-more{max-height:none;opacity:1;transform:none}
  .staycards--x .staycard__cap h3{white-space:normal}
}
@media(hover:none) and (min-width:861px){
  .staycards--x .staycard,
  .staycards--x .staycard:hover{flex:1 1 0}
}

/* =========================================================
   THE SUN — we sell sun, so the sun lives in the hero
   ========================================================= */
.hero__sunglow{position:absolute;top:14%;right:13%;width:130px;height:130px;pointer-events:none;z-index:1}
.hero__sunglow::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffedb8 16%,rgba(252,200,64,.9) 32%,rgba(252,150,40,.38) 54%,transparent 72%);
  animation:sun-breathe 5s ease-in-out infinite alternate}
.hero__sunglow::after{content:"";position:absolute;inset:-95%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,205,95,.30),rgba(255,175,60,.13) 45%,transparent 70%);
  animation:sun-halo 7s ease-in-out infinite alternate}
.hero__sunglow i{position:absolute;inset:-70%;border-radius:50%;mix-blend-mode:screen;
  background:repeating-conic-gradient(rgba(255,220,140,.12) 0 2.2deg,transparent 2.2deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 24%,#000 30%,transparent 68%);
  mask:radial-gradient(circle,transparent 24%,#000 30%,transparent 68%);
  animation:sun-rays 90s linear infinite}
@keyframes sun-breathe{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.07);filter:brightness(1.18)}}
@keyframes sun-halo{from{opacity:.75}to{opacity:1;transform:scale(1.07)}}
@keyframes sun-rays{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .hero__sunglow{width:86px;height:86px;top:11%;right:7%}
}
@media(prefers-reduced-motion:reduce){
  .hero__sunglow::before,.hero__sunglow::after,.hero__sunglow i{animation:none}
}

/* SUN v2 — no painted disc: the photo's own sun, amplified through the overlay */
.hero__sunglow{top:12%;right:auto;left:57%;width:150px;height:150px;transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)))}
.hero__sunglow::before{mix-blend-mode:screen;filter:blur(2px);
  background:radial-gradient(circle,#fff 0%,#fff 10%,rgba(255,246,222,.9) 20%,rgba(255,214,140,.45) 38%,rgba(255,180,90,.12) 58%,transparent 72%);
  animation:sun-breathe 6s ease-in-out infinite alternate}
.hero__sunglow::after{inset:-170%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,226,170,.16),rgba(150,180,220,.06) 45%,transparent 70%);
  animation:sun-halo 8s ease-in-out infinite alternate}
.hero__sunglow i{inset:auto;left:50%;top:50%;width:520%;height:2px;border-radius:2px;
  transform:translate(-50%,-50%);mix-blend-mode:screen;filter:blur(1.5px);
  background:linear-gradient(90deg,transparent,rgba(255,240,215,.5),transparent);
  -webkit-mask:none;mask:none;animation:sun-streak 6s ease-in-out infinite alternate}
.hero__sunglow i::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:2800%;
  transform:translate(-50%,-50%);filter:blur(1.5px);
  background:linear-gradient(180deg,transparent,rgba(255,240,215,.3),transparent)}
@keyframes sun-breathe{from{transform:scale(1);opacity:.9}to{transform:scale(1.06);opacity:1}}
@keyframes sun-halo{from{opacity:.65}to{opacity:1}}
@keyframes sun-streak{from{opacity:.5}to{opacity:.9}}
@media(max-width:640px){
  .hero__sunglow{width:96px;height:96px;top:10%;left:60%}
}

/* =========================================================
   SUN, FULL FORM — it doesn't just glow, it pours light
   ========================================================= */
/* god rays sweeping down from the photo's sun */
.hero__sunglow b{position:absolute;left:50%;top:50%;height:70px;width:52vw;
  transform-origin:left center;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,236,190,.16),rgba(255,220,150,.05) 55%,transparent 80%);
  filter:blur(7px);border-radius:60px}
.hero__sunglow b:nth-of-type(1){transform:rotate(112deg);animation:ray-sway 11s ease-in-out infinite alternate}
.hero__sunglow b:nth-of-type(2){transform:rotate(135deg);height:56px;
  animation:ray-sway2 14s ease-in-out -4s infinite alternate}
.hero__sunglow b:nth-of-type(3){transform:rotate(158deg);height:44px;
  animation:ray-sway3 17s ease-in-out -9s infinite alternate}
@keyframes ray-sway{from{transform:rotate(109deg);opacity:.55}to{transform:rotate(115deg);opacity:1}}
@keyframes ray-sway2{from{transform:rotate(132deg);opacity:.45}to{transform:rotate(138deg);opacity:.9}}
@keyframes ray-sway3{from{transform:rotate(155deg);opacity:.5}to{transform:rotate(161deg);opacity:.85}}
/* the promise, spoken */
.hero__fact b{font-weight:600;color:#ffe9b0}
.hero__fact-ic{color:var(--gold);font-size:1rem;line-height:1;text-shadow:0 0 10px rgba(252,192,48,.8);
  animation:sun-halo 4s ease-in-out infinite alternate}
/* sunlight spills into the next section */
.hero + section{position:relative;overflow:hidden}
.hero + section::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:min(900px,90vw);height:340px;pointer-events:none;
  background:radial-gradient(ellipse at center top,rgba(255,200,100,.10),rgba(255,190,90,.04) 45%,transparent 70%)}
@media(max-width:640px){
  .hero__sunglow b{width:78vw;height:44px}
  .hero__sunglow b:nth-of-type(3){display:none}
}
@media(prefers-reduced-motion:reduce){.hero__sunglow b{animation:none}}

/* =========================================================
   SUN v3 — light you can feel
   ========================================================= */
/* the whole sun rises once, on page load */
.hero__sunglow{animation:sun-rise 2.2s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes sun-rise{
  from{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(.55);opacity:0}
  to{transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px))) scale(1);opacity:1}}
/* golden dust motes drifting through the rays */
.hero__motes{position:absolute;inset:8% 0 30% 0;pointer-events:none;z-index:1;mix-blend-mode:screen}
.hero__motes::before,.hero__motes::after{content:"";position:absolute;inset:0;filter:blur(.6px);
  background-image:
    radial-gradient(2.5px 2.5px at 30% 22%,rgba(255,224,160,.8),transparent),
    radial-gradient(1.8px 1.8px at 44% 38%,rgba(255,210,140,.6),transparent),
    radial-gradient(2.2px 2.2px at 52% 30%,rgba(255,232,180,.7),transparent),
    radial-gradient(1.5px 1.5px at 61% 46%,rgba(255,205,130,.55),transparent),
    radial-gradient(2px 2px at 38% 55%,rgba(255,220,155,.5),transparent),
    radial-gradient(1.6px 1.6px at 70% 28%,rgba(255,215,145,.6),transparent);
  animation:mote-drift 26s ease-in-out infinite alternate}
.hero__motes::after{filter:blur(1px);
  background-image:
    radial-gradient(2px 2px at 26% 40%,rgba(255,218,150,.5),transparent),
    radial-gradient(1.4px 1.4px at 48% 18%,rgba(255,228,170,.6),transparent),
    radial-gradient(2.4px 2.4px at 58% 58%,rgba(255,208,135,.45),transparent),
    radial-gradient(1.6px 1.6px at 66% 40%,rgba(255,222,158,.55),transparent),
    radial-gradient(1.8px 1.8px at 35% 30%,rgba(255,214,142,.5),transparent);
  animation:mote-drift2 34s ease-in-out -12s infinite alternate}
@keyframes mote-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,18px,0)}}
@keyframes mote-drift2{from{transform:translate3d(0,0,0);opacity:.9}to{transform:translate3d(20px,26px,0);opacity:.6}}
/* lens flare artifacts (positioned by JS along the sun-cursor axis) */
.hero__flare{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s ease}
.hero__flare s{position:absolute;left:0;top:0;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.hero__flare s:nth-child(1){width:22px;height:22px;margin:-11px;background:radial-gradient(circle,rgba(255,224,160,.5),transparent 70%)}
.hero__flare s:nth-child(2){width:10px;height:10px;margin:-5px;background:radial-gradient(circle,rgba(150,205,255,.55),transparent 70%)}
.hero__flare s:nth-child(3){width:38px;height:38px;margin:-19px;border:2px solid rgba(255,205,125,.28);background:transparent}
.hero__flare s:nth-child(4){width:14px;height:14px;margin:-7px;background:radial-gradient(circle,rgba(255,170,90,.45),transparent 70%)}
/* the sun sets in the footer — the page ends at the horizon */
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);
  width:min(1100px,96vw);height:300px;pointer-events:none;
  background:radial-gradient(ellipse at center bottom,rgba(255,150,70,.12),rgba(255,120,60,.05) 45%,transparent 70%)}
@media(prefers-reduced-motion:reduce){
  .hero__motes::before,.hero__motes::after{animation:none}
  .hero__sunglow{animation:none}}

/* Hero chips: one tidy centered row, equal height, clean wrap */
.hero__chips{gap:.6rem;max-width:900px;margin-left:auto;margin-right:auto}
.hero__chips .hero__wx{margin:0;height:42px;white-space:nowrap}
@media(max-width:640px){
  .hero__chips .hero__wx{height:38px}
}

/* Mobile hero chips: two slim essentials, no collisions with the floats */
@media(max-width:640px){
  .hero__fact{display:none}                 /* the glowing sun above tells this story */
  .wx__sep,.wx__sea{display:none}           /* weather chip: just the live temperature */
  .hero__chips{gap:.4rem;margin-top:1rem}
  .hero__chips .hero__wx{height:34px;font-size:.68rem;padding:.4rem .8rem}
}

/* =========================================================
   OASIS LIGHT — the sun owns the scene
   ========================================================= */
/* two more shafts: one falls toward the right tree, one straight onto the water */
.hero__sunglow b:nth-of-type(4){transform:rotate(55deg);height:48px;width:38vw;
  animation:ray-sway4 15s ease-in-out -6s infinite alternate}
.hero__sunglow b:nth-of-type(5){transform:rotate(84deg);height:60px;width:44vw;
  animation:ray-sway5 19s ease-in-out -11s infinite alternate}
@keyframes ray-sway4{from{transform:rotate(52deg);opacity:.4}to{transform:rotate(58deg);opacity:.85}}
@keyframes ray-sway5{from{transform:rotate(81deg);opacity:.5}to{transform:rotate(87deg);opacity:.95}}
/* sun dancing on the water */
.hero__glints{position:absolute;left:6%;right:6%;top:56%;bottom:5%;pointer-events:none;z-index:1;mix-blend-mode:screen}
.hero__glints::before,.hero__glints::after{content:"";position:absolute;inset:0;filter:blur(.4px);
  background-image:
    radial-gradient(2.2px 1.4px at 22% 30%,rgba(255,246,215,.9),transparent),
    radial-gradient(1.6px 1px at 35% 55%,rgba(255,238,190,.7),transparent),
    radial-gradient(2px 1.2px at 48% 24%,rgba(255,250,225,.85),transparent),
    radial-gradient(1.4px .9px at 57% 62%,rgba(255,240,200,.65),transparent),
    radial-gradient(2.4px 1.4px at 66% 38%,rgba(255,248,220,.8),transparent),
    radial-gradient(1.5px 1px at 78% 52%,rgba(255,236,185,.6),transparent),
    radial-gradient(1.8px 1.1px at 88% 28%,rgba(255,244,205,.75),transparent);
  animation:glint 3.1s ease-in-out infinite alternate}
.hero__glints::after{filter:blur(.8px);
  background-image:
    radial-gradient(1.8px 1.1px at 15% 48%,rgba(255,242,200,.7),transparent),
    radial-gradient(2.2px 1.3px at 29% 70%,rgba(255,250,225,.8),transparent),
    radial-gradient(1.4px .9px at 43% 40%,rgba(255,236,190,.6),transparent),
    radial-gradient(2px 1.2px at 61% 76%,rgba(255,246,210,.75),transparent),
    radial-gradient(1.6px 1px at 73% 60%,rgba(255,240,195,.65),transparent),
    radial-gradient(2.1px 1.3px at 84% 72%,rgba(255,248,215,.7),transparent);
  animation:glint 4.3s ease-in-out -1.6s infinite alternate}
@keyframes glint{from{opacity:.25}to{opacity:1}}
/* soft morning haze breathing over the waterline */
.hero__haze{position:absolute;left:0;right:0;top:40%;height:32%;pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:radial-gradient(62% 100% at 50% 50%,rgba(165,215,225,.10),transparent 72%);
  animation:haze-breathe 13s ease-in-out infinite alternate}
@keyframes haze-breathe{from{opacity:.5;transform:scaleX(.96)}to{opacity:1;transform:scaleX(1.05)}}
@media(prefers-reduced-motion:reduce){
  .hero__glints::before,.hero__glints::after,.hero__haze{animation:none}
}


/* =========================================================
   THE OASIS BREATHES — leaves fall, water answers
   ========================================================= */
.hero__leaves{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;transition:transform .4s ease}
.hero__leaves s{position:absolute;top:-4%;width:15px;height:9px;opacity:0;
  background:linear-gradient(120deg,#61823f,#3d5a2c);border-radius:85% 10% 85% 10%;
  box-shadow:inset 0 0 3px rgba(0,0,0,.35)}
.hero__leaves s:nth-child(1){left:21%;animation:leaf-a 17s linear 2s infinite}
.hero__leaves s:nth-child(2){left:68%;width:12px;height:7px;animation:leaf-b 21s linear 8s infinite}
.hero__leaves s:nth-child(3){left:83%;animation:leaf-a 19s linear 14s infinite}
.hero__leaves s:nth-child(4){left:76%;width:13px;height:8px;animation:leaf-b 12s linear 5s infinite}
@keyframes leaf-a{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  2%{opacity:.9}
  14%{transform:translate3d(-26px,18vh,0) rotate(140deg)}
  28%{transform:translate3d(10px,37vh,0) rotate(255deg)}
  42%{transform:translate3d(-34px,56vh,0) rotate(390deg)}
  54%{transform:translate3d(-12px,70vh,0) rotate(480deg);opacity:.9}
  57%{opacity:0}
  100%{transform:translate3d(-12px,70vh,0) rotate(480deg);opacity:0}}
@keyframes leaf-b{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  2%{opacity:.85}
  15%{transform:translate3d(22px,20vh,0) rotate(-160deg)}
  30%{transform:translate3d(-14px,40vh,0) rotate(-280deg)}
  45%{transform:translate3d(18px,58vh,0) rotate(-420deg)}
  53%{transform:translate3d(4px,69vh,0) rotate(-500deg);opacity:.85}
  56%{opacity:0}
  100%{transform:translate3d(4px,69vh,0) rotate(-500deg);opacity:0}}
.hero__ripples{position:absolute;left:0;right:0;top:58%;bottom:0;pointer-events:none;z-index:1}
.hero__ripples u{position:absolute;width:74px;height:22px;border:1.5px solid rgba(255,248,220,.5);
  border-radius:50%;opacity:0;transform:scale(.15);mix-blend-mode:screen;filter:blur(.4px)}
.hero__ripples u::after{content:"";position:absolute;inset:22%;border:1px solid rgba(255,244,210,.45);border-radius:50%}
.hero__ripples u:nth-child(1){left:22%;top:36%;animation:ripple 15s ease-out 4s infinite}
.hero__ripples u:nth-child(2){left:58%;top:58%;animation:ripple 18s ease-out 10s infinite}
.hero__ripples u:nth-child(3){left:74%;top:30%;animation:ripple 12s ease-out 11.4s infinite}
@keyframes ripple{
  0%{opacity:0;transform:scale(.15)}
  3%{opacity:.85}
  20%{opacity:0;transform:scale(1.75)}
  100%{opacity:0;transform:scale(1.75)}}
@media(max-width:640px){
  .hero__leaves s:nth-child(3){display:none}
  .hero__ripples u{width:52px;height:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero__leaves s,.hero__ripples u{animation:none;opacity:0}
}

/* =========================================================
   REFINEMENT PASS — luxury is restraint. Fewer, softer, slower.
   ========================================================= */
/* kill-switches for retired layers */
.hero__leaves,.hero__ripples,.hero__haze{display:none!important}
/* rays: felt, not seen — softer light, slower sway */
.hero__sunglow b{background:linear-gradient(90deg,rgba(255,236,190,.10),rgba(255,220,150,.03) 55%,transparent 80%);filter:blur(9px)}
@keyframes ray-sway{from{transform:rotate(110.5deg);opacity:.35}to{transform:rotate(113.5deg);opacity:.7}}
@keyframes ray-sway2{from{transform:rotate(133.5deg);opacity:.3}to{transform:rotate(136.5deg);opacity:.6}}
@keyframes ray-sway3{from{transform:rotate(156.5deg);opacity:.3}to{transform:rotate(159.5deg);opacity:.55}}
/* water glints: a shimmer, not a blink — fewer, dimmer, slower */
.hero__glints::before{filter:blur(.7px);animation:glint 6.5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(2px 1.2px at 26% 34%,rgba(255,246,215,.55),transparent),
    radial-gradient(1.6px 1px at 44% 58%,rgba(255,240,200,.4),transparent),
    radial-gradient(2.2px 1.3px at 63% 30%,rgba(255,248,220,.5),transparent),
    radial-gradient(1.5px 1px at 79% 52%,rgba(255,238,195,.4),transparent)}
.hero__glints::after{filter:blur(1px);animation:glint 8.5s ease-in-out -3s infinite alternate;
  background-image:
    radial-gradient(1.8px 1.1px at 18% 52%,rgba(255,242,205,.45),transparent),
    radial-gradient(2px 1.2px at 54% 74%,rgba(255,246,210,.4),transparent),
    radial-gradient(1.6px 1px at 84% 66%,rgba(255,240,195,.4),transparent)}
@keyframes glint{from{opacity:.3}to{opacity:.8}}
/* motes: half as many, drifting slower */
.hero__motes::after{display:none}
.hero__motes::before{animation-duration:40s;opacity:.75}
/* lens-flare cross: whisper level */
.hero__sunglow i{opacity:.4}
.hero__sunglow i::before{opacity:.6}

/* =========================================================
   HERO RESTYLE — the mark, the words, the place
   ========================================================= */
.hero__logo{width:min(225px,46vw);margin-bottom:clamp(1.6rem,5vh,3rem)}
.hero h1{margin-bottom:0}
.hero .eyebrow--stamp{display:flex;align-items:center;justify-content:center;gap:1rem;
  color:#ecdcae;letter-spacing:.34em;font-size:.7rem;margin:1.35rem 0 0;opacity:.95}
.eyebrow--stamp::before,.eyebrow--stamp::after{content:"";height:1px;width:52px;flex:none}
.eyebrow--stamp::before{background:linear-gradient(90deg,transparent,rgba(236,220,174,.65))}
.eyebrow--stamp::after{background:linear-gradient(90deg,rgba(236,220,174,.65),transparent)}
.hero__chips{margin-top:clamp(1.7rem,4.5vh,2.7rem)}
@media(max-width:640px){
  .hero__logo{width:min(175px,46vw)}
  .hero .eyebrow--stamp{letter-spacing:.22em;font-size:.6rem;gap:.7rem}
  .eyebrow--stamp::before,.eyebrow--stamp::after{width:30px}
}

/* =========================================================
   HERO FINAL CUT — sharp pan, anchored layout, light on her
   ========================================================= */
/* 1 · the zoom blurred the raster — pan instead: translation never resamples */
.hero__bg::before{inset:-5%;animation:hero-pan 48s ease-in-out infinite alternate}
@keyframes hero-pan{
  from{transform:translate3d(-1.4%,-0.9%,0)}
  to{transform:translate3d(1.4%,0.9%,0)}}
/* 2 · layout: brand block holds the center, live chips anchor to the waterline */
.hero__inner{display:flex;flex-direction:column;align-items:center;min-height:100svh;
  justify-content:flex-start;padding-bottom:clamp(6.5rem,14vh,9.5rem)}
.hero__logo{margin-top:auto}
.hero__chips{margin-top:auto}
/* 3 · the sun finds her — a dedicated shaft + a breathing pool of light */
.hero__sunglow b:nth-of-type(4){transform:rotate(100deg);height:64px;width:44vh;
  background:linear-gradient(90deg,rgba(255,240,200,.16),rgba(255,226,170,.05) 60%,transparent 82%);
  filter:blur(10px);animation:figure-ray 14s ease-in-out -5s infinite alternate}
@keyframes figure-ray{from{transform:rotate(98.5deg);opacity:.5}to{transform:rotate(101.5deg);opacity:.9}}
.hero__spot{position:absolute;left:50%;top:46%;width:min(540px,62vw);height:min(700px,78vh);
  transform:translate(-50%,-40%);pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:radial-gradient(44% 40% at 50% 34%,rgba(255,238,200,.30),rgba(255,222,165,.11) 55%,transparent 76%);
  filter:blur(6px);animation:spot-breathe 7.5s ease-in-out infinite alternate}
@keyframes spot-breathe{from{opacity:.7}to{opacity:1}}
@media(max-width:640px){
  .hero__spot{width:78vw;height:60vh;top:48%}
  .hero__inner{padding-bottom:clamp(7.5rem,16vh,10rem)}
}
@media(prefers-reduced-motion:reduce){
  .hero__bg::before{animation:none}
  .hero__spot{animation:none}
}

/* The glow pool boxed behind the title — killed. Her light comes from the ray alone. */
.hero__spot{display:none!important}
.hero__sunglow b:nth-of-type(4){background:linear-gradient(90deg,rgba(255,240,200,.20),rgba(255,226,170,.07) 60%,transparent 84%);filter:blur(12px)}

/* Title shadow: the 30px blur massed into a dark slab behind two big lines — tight crisp shadow instead */
.hero h1{text-shadow:0 1px 3px rgba(8,12,28,.45)}
.hero .eyebrow--stamp{text-shadow:0 1px 2px rgba(8,12,28,.4)}

/* Mobile hero: retina-sharp portrait render — and no pan (it softened the raster) */
@media(max-width:640px){
  .hero__bg::before{animation:none;inset:0}
}

/* Inner-page heroes on phones: no zoom animation — raster stays retina-sharp */
@media(max-width:640px){
  .page-hero::before{animation:none}
}

/* =========================================================
   THE JOURNAL — editorial index + article prose
   ========================================================= */
.jchip{display:inline-block;background:rgba(252,192,48,.14);border:1px solid rgba(252,192,48,.45);
  color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .8rem;border-radius:99px}
.jmeta{font-size:.78rem;letter-spacing:.06em;color:#9fb0c8}
.jmeta b{color:var(--gold)}
.jfeat{display:grid;grid-template-columns:1.15fr .85fr;background:rgba(13,22,54,.5);
  border:1px solid rgba(84,192,228,.2);border-radius:22px;overflow:hidden;margin-bottom:2rem;
  transition:transform .3s,border-color .3s;color:var(--ink)}
.jfeat:hover{transform:translateY(-4px);border-color:rgba(252,192,48,.5)}
.jfeat__img{min-height:340px;background-size:cover;background-position:center}
.jfeat__body{padding:clamp(1.6rem,3.4vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.jfeat__body p{color:#c3d0e4;margin-bottom:1rem}
.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.jcard{background:rgba(13,22,54,.5);border:1px solid rgba(84,192,228,.18);border-radius:18px;
  overflow:hidden;color:var(--ink);display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s}
.jcard:hover{transform:translateY(-5px);border-color:rgba(252,192,48,.5);box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.jcard__img{aspect-ratio:16/10;background-size:cover;background-position:center}
.jcard__body{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.jcard__body h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;line-height:1.35}
.jcard__body .jmeta{margin-top:auto}
@media(max-width:860px){.jfeat{grid-template-columns:1fr}.jfeat__img{min-height:230px}}
.post-hero{min-height:62vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;
  padding:0 1.2rem clamp(2.5rem,6vh,4rem)}
.post-hero h1{color:#fff;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.18;text-shadow:0 1px 3px rgba(8,12,28,.45)}
.post{max-width:760px;margin:0 auto;padding:0 1.4rem}
.post p{color:#c9d5e7;font-size:1.05rem;line-height:1.9;margin:0 0 1.35rem}
.post>p:first-of-type::first-letter{font-family:var(--serif);font-size:3.4em;line-height:.8;
  float:left;padding:.08em .12em 0 0;color:var(--gold)}
.post h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.9rem);
  color:#fff;margin:2.4rem 0 1rem;position:relative;padding-bottom:.55rem}
.post h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.post__img{margin:2rem 0}
.post__img img{width:100%;border-radius:16px;border:1px solid rgba(252,192,48,.25);display:block}
.post__img figcaption{font-size:.78rem;color:#8fa0c2;margin-top:.55rem;text-align:center;letter-spacing:.04em}
.post__cta{margin:3rem 0 1rem;padding:1.8rem;border:1px solid rgba(252,192,48,.35);border-radius:18px;
  text-align:center;background:linear-gradient(160deg,rgba(252,192,48,.08),rgba(13,22,54,.4))}

/* Journal layout v2 — magazine rows, honest chips, category filters */
.jchip{align-self:flex-start;width:auto}
.jfeat__body .jchip{align-self:flex-start}
.jfilters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.6rem}
.jfilters button{background:transparent;border:1px solid rgba(84,192,228,.3);color:#a9bad2;
  border-radius:99px;padding:.45rem 1.1rem;font-size:.78rem;letter-spacing:.06em;cursor:pointer;
  font-family:inherit;transition:border-color .25s,color .25s,background .25s}
.jfilters button:hover{border-color:rgba(252,192,48,.55);color:#fff}
.jfilters button.on{background:rgba(252,192,48,.14);border-color:rgba(252,192,48,.6);color:var(--gold)}
@media(min-width:861px){
  .jgrid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .jcard--row{flex-direction:row;min-height:190px}
  .jcard--row .jcard__img{width:42%;aspect-ratio:auto;flex:none}
  .jcard--row .jcard__body{width:58%;padding:1.15rem 1.25rem}
  .jcard--row .jcard__body h3{font-size:1.12rem}
}

/* Journal browse bar — the filters get a home */
.jbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin:clamp(2.2rem,5vw,3.2rem) 0 1.5rem;padding-bottom:1.1rem;
  border-bottom:1px solid rgba(84,192,228,.18)}
.jbar .jfilters{margin:0}
@media(max-width:640px){.jbar{align-items:flex-start;flex-direction:column;gap:.9rem}}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/el-messiri-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/tajawal-400-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/tajawal-500-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/tajawal-700-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
/* =========================================================
   ARABIC / RTL LAYER — العربية بكرامة
   ========================================================= */
html[lang=ar]{--serif:'El Messiri','Cormorant Garamond',serif;--sans:'Tajawal','Helvetica Neue',sans-serif}
html[lang=ar] body{font-family:var(--sans)}
/* Arabic script must NEVER be letter-spaced */
html[lang=ar] .lux-label,html[lang=ar] .eyebrow,html[lang=ar] .btn,html[lang=ar] .factline,
html[lang=ar] .nav__links a,html[lang=ar] .hero__scroll,html[lang=ar] .sc-book,
html[lang=ar] .staycard__cap span,html[lang=ar] .sc-more em,html[lang=ar] .exptile span,
html[lang=ar] .nb-label,html[lang=ar] .rate__sub,html[lang=ar] .index-list .row span,
html[lang=ar] .footer h4,html[lang=ar] .jchip{letter-spacing:0!important}
html[lang=ar] .display{line-height:1.4}
html[lang=ar] .hero h1{line-height:1.35}
html[lang=ar] p{line-height:1.95}
html[lang=ar] .lead{line-height:1.8}
/* RTL mirrors */
html[dir=rtl] .book-float{right:auto;left:1.5rem}
html[dir=rtl] .sc-book i{display:inline-block}
html[dir=rtl] .welcome__media::before{right:auto;left:-16px}
html[dir=rtl] .eyebrow--stamp{direction:rtl}
/* language switcher pill */
.nav__lang{border:1px solid rgba(252,192,48,.5);border-radius:99px;padding:.32rem .85rem!important;
  color:var(--gold)!important;font-weight:600}
.nav__lang:hover{background:rgba(252,192,48,.12)}
html[lang=ar] .nav__lang{font-family:'Raleway',sans-serif;letter-spacing:.06em!important}

/* Reviews wall on Arabic pages: the marquee + English reviews are an LTR island */
html[dir=rtl] .rw-rows{direction:ltr}
html[dir=rtl] .rw-rows .review-card{direction:ltr;text-align:left}

/* English Google quotes stay LTR inside the Arabic booking sidebar */
html[dir=rtl] .bs-quotes blockquote{direction:ltr;text-align:left}

/* ============ MOTION v2 — premium micro-interactions (2026-07-08) ============ */
/* CTA sheen sweep + lift shadow — reads "expensive" on every button, tap-friendly */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-125%;width:75%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);pointer-events:none;z-index:1}
.btn:hover::after{animation:btnsheen .8s cubic-bezier(.16,1,.3,1)}
@keyframes btnsheen{from{left:-125%}to{left:135%}}
.btn--gold:hover,.btn--primary:hover{box-shadow:0 14px 32px -10px rgba(201,162,75,.5)}
.btn--outline:hover{box-shadow:0 12px 30px -12px rgba(84,192,228,.42)}

/* Journal cards: image breathes in on hover (dossiers already ken-burns; staycards already zoom) */
.jcard{overflow:hidden}
.jcard__img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.jcard:hover .jcard__img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){.btn:hover::after{animation:none}}

/* ============ WebGL 3D depth hero (2026-07-08) ============ */
/* Canvas fades in over the photo on capable desktops; photo is LCP paint + fallback */
.hero__3d{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1s ease;pointer-events:none}
.hero--3d .hero__3d{opacity:1}
.hero--3d .hero__bg{opacity:0}

/* ============ TOPO HERO — tilted 3D layered plane (2026-07-08) ============ */
.thero{position:relative;height:100vh;min-height:640px;overflow:hidden;
  background:radial-gradient(120% 95% at 50% 18%,#182550 0%,#0b1226 58%,#060a16 100%);
  display:flex;align-items:center;justify-content:center}
.thero__vp{position:absolute;inset:0;perspective:2000px;display:flex;align-items:center;justify-content:center;z-index:1}
.thero__stage{position:relative;width:min(80vw,940px);height:min(54vh,540px);
  transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-25deg);will-change:transform;
  animation:thero-in 2s cubic-bezier(.16,1,.3,1) both}
.thero__layer{position:absolute;inset:0;background-size:cover;background-position:center;
  border:1px solid rgba(224,232,246,.14);will-change:transform;
  box-shadow:0 70px 130px -40px rgba(0,0,0,.85)}
.thero__l1{background-image:url('/assets/photos/oasis-lux3-tex.webp');transform:translateZ(16px)}
.thero__l2{display:none;background-image:url('/assets/photos/pro-beach-calm2.webp');transform:translateZ(32px);
  opacity:.42;mix-blend-mode:screen;filter:contrast(1.06) saturate(1.05)}
.thero__contours{position:absolute;width:200%;height:200%;top:-50%;left:-50%;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 44px,rgba(252,192,48,.11) 45px,transparent 48px);
  transform:translateZ(120px)}
.thero__stage::after{content:"";position:absolute;left:-10%;right:-10%;top:-42%;height:72%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(252,192,48,.18),transparent 72%);transform:translateZ(70px)}

.thero__ui{position:absolute;inset:0;z-index:3;
  padding:clamp(4.6rem,9vh,6.2rem) clamp(1.4rem,5vw,4rem) clamp(1.6rem,4vw,3.2rem);
  display:grid;grid-template-rows:auto 1fr auto;pointer-events:none}
.thero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.thero__mark{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(224,232,246,.78)}
.thero__readout{text-align:right;font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;line-height:1.95;text-transform:uppercase;color:rgba(224,232,246,.66)}
.thero__readout b{color:var(--gold);font-weight:600}
.thero__live{color:var(--gold)}
.thero__live svg{width:12px;height:12px;vertical-align:-1px;margin-inline-end:.3rem}
.thero__title{align-self:center;justify-self:center;text-align:center;color:#fff;margin:0;
  font-size:clamp(2.6rem,9vw,7.6rem);line-height:.9;text-shadow:0 6px 60px rgba(0,0,0,.55)}
.thero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem}
.thero__tag{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:rgba(224,232,246,.72)}
.thero__cta{pointer-events:auto;background:var(--gold);color:#0b1226;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:1.05rem 2.2rem;text-decoration:none;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 72%,86% 100%,0 100%);transition:.3s ease}
.thero__cta:hover{background:#e9c874;transform:translateY(-4px);box-shadow:0 16px 34px -12px rgba(252,192,48,.5)}
.thero__scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(224,232,246,.55)}
@keyframes thero-in{from{transform:rotateX(74deg) rotateZ(-15deg) scale(.9)}to{transform:rotateX(55deg) rotateZ(-25deg) scale(1)}}
@media (max-width:860px){
  .thero{background:none}
  .thero__vp{perspective:none}
  .thero__stage{width:100%;height:100%;transform:none!important;animation:none}
  .thero__layer{border:0;box-shadow:none;transform:none}
  .thero__l2,.thero__contours,.thero__stage::after{display:none}
  .thero__ui{background:linear-gradient(rgba(9,13,28,.32) 0%,rgba(9,13,28,.62) 55%,rgba(9,13,28,.82))}
  .thero__title{font-size:clamp(2.1rem,10vw,3.1rem)}
  .thero__readout{display:none}
  .thero__foot{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (prefers-reduced-motion:reduce){.thero__stage{animation:none}}
html[dir=rtl] .thero__readout{text-align:left}

/* topo hero — centered logo crown + entrance motion (2026-07-08) */
.thero__center{grid-row:2;align-self:center;justify-self:center;display:flex;flex-direction:column;
  align-items:center;gap:clamp(.9rem,2.4vw,1.9rem);text-align:center}
.thero__logo{width:clamp(120px,13vw,184px);height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.55));
  animation:thero-logo-in 1.8s cubic-bezier(.16,1,.3,1) .35s both,
            thero-logo-float 7s ease-in-out 2.3s infinite}
@keyframes thero-logo-in{
  0%{opacity:0;transform:perspective(760px) rotateY(360deg) scale(.55)}
  100%{opacity:1;transform:perspective(760px) rotateY(0deg) scale(1)}
}
@keyframes thero-logo-float{
  0%,100%{transform:perspective(760px) translateY(0) rotateY(-6deg)}
  50%{transform:perspective(760px) translateY(-9px) rotateY(6deg)}
}
.thero__title{animation:thero-title-in 1.4s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes thero-title-in{
  0%{opacity:0;transform:translateY(30px);filter:blur(12px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
.thero__contours{animation:thero-contours 140s linear infinite}
@keyframes thero-contours{
  from{transform:translateZ(120px) rotate(0deg)}
  to{transform:translateZ(120px) rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){.thero__logo,.thero__title,.thero__contours{animation:none}}


/* topo hero — live readout beacon (2026-07-08) */
.thero__readout{color:rgba(224,232,246,.8)}
.thero__beacon{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);font-weight:600}
.thero__dot{width:7px;height:7px;border-radius:50%;background:#39d98a;flex:none;
  box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:thero-pulse 2s ease-out infinite}
@keyframes thero-pulse{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}
  70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}
}
.thero__live{color:var(--gold);animation:thero-live-glow 3.4s ease-in-out infinite}
@keyframes thero-live-glow{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.thero__dot,.thero__live{animation:none}}


/* topo hero layout cleanup (2026-07-08) — centered readout, side furniture removed */
.thero__ui{grid-template-rows:auto 1fr}
.thero__readout{grid-row:1;justify-self:center;text-align:center}
html[dir=rtl] .thero__readout{text-align:center}
.thero__center{grid-row:2}


/* topo hero — floating photo exhibit (2026-07-08) */
.thero__card{position:absolute;background-size:cover;background-position:center;border-radius:2px;
  border:1px solid rgba(224,232,246,.2);will-change:transform;
  box-shadow:0 44px 92px -30px rgba(0,0,0,.82);
  animation:thero-card-in 1.3s cubic-bezier(.16,1,.3,1) 1.15s both}
.thero__cardA{width:38%;height:48%;top:-16%;right:4%;transform:translateZ(64px);
  background-image:url('/assets/photos/aframe-row-gold.webp')}
.thero__cardB{width:34%;height:44%;bottom:-12%;left:3%;transform:translateZ(96px);
  background-image:url('/assets/photos/pool-grand-sunset.webp')}
@keyframes thero-card-in{from{opacity:0}to{opacity:1}}
@media (max-width:860px){.thero__card{display:none}}
@media (prefers-reduced-motion:reduce){.thero__card{animation:none}}


/* topo hero — scroll-story portfolio (2026-07-08) */
.thero__stage{transform:none!important;animation:none!important}
.thero__mem{position:absolute;top:50%;left:50%;width:min(46vw,620px);height:min(56vh,540px);
  transform:translate(-50%,-50%);background-size:cover;background-position:center;
  border:1px solid rgba(224,232,246,.16);border-radius:4px;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.85);backface-visibility:hidden;will-change:transform}
@media (max-width:860px){
  .thero__mem{display:none}
  .thero__mem--hero{display:block;top:0;left:0;transform:none;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  .thero__contours{display:none}
}


/* topo hero — ultimate polish (2026-07-08) */
/* focus hierarchy: memories recede, the oasis is the vivid star */
.thero__mem{filter:brightness(.8) saturate(.9)}
.thero__mem--hero{filter:none;
  box-shadow:0 60px 130px -30px rgba(0,0,0,.9),0 0 0 1px rgba(252,192,48,.25),0 0 90px -18px rgba(252,192,48,.32)}
/* atmosphere */
.thero__glow{position:absolute;z-index:0;left:50%;top:48%;width:62vw;height:62vw;transform:translate(-50%,-50%);
  pointer-events:none;background:radial-gradient(circle,rgba(252,192,48,.15),transparent 62%);
  filter:blur(22px);animation:thero-glow 9s ease-in-out infinite}
@keyframes thero-glow{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.thero__vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(125% 82% at 50% 45%,transparent 42%,rgba(6,10,24,.62) 100%)}
/* named memories */
.thero__cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  text-align:center;background:linear-gradient(transparent,rgba(6,10,24,.8));opacity:0}
/* title reads cleanly over the photos */
.thero__title{text-shadow:0 4px 42px rgba(0,0,0,.72),0 2px 10px rgba(0,0,0,.6)}
@media (max-width:860px){.thero__glow,.thero__vig,.thero__cap{display:none}.thero__mem{filter:none}}
@media (prefers-reduced-motion:reduce){.thero__glow{animation:none}}


/* topo hero — HUD data bar (bottom) + gold dust (2026-07-08) */
.thero__ui{grid-template-rows:1fr auto}
.thero__center{grid-row:1;align-self:center}
.thero__hud{grid-row:2;justify-self:center;align-self:end;margin-bottom:clamp(3.6rem,7vh,5.2rem);max-width:92vw;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.1rem;
  padding:.72rem 1.55rem;border-radius:999px;
  background:rgba(10,16,40,.5);border:1px solid rgba(252,192,48,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 22px 55px -24px rgba(0,0,0,.75),0 0 44px -14px rgba(252,192,48,.18);
  font-family:var(--sans);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(224,232,246,.86)}
.thero__hud-b{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);font-weight:600}
.thero__hud-s{display:inline-flex;align-items:center;gap:.35rem;position:relative;padding-left:1.15rem}
.thero__hud-s::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:rgba(224,232,246,.22)}
.thero__hud .thero__live{color:var(--gold)}
.thero__hud b{color:#fff;font-weight:600}
.thero__hud svg{width:12px;height:12px;vertical-align:-1px}
.thero__dust{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background-repeat:no-repeat;
  background-image:
    radial-gradient(2px 2px at 12% 22%,rgba(255,236,190,.9),transparent),
    radial-gradient(1.5px 1.5px at 28% 70%,rgba(252,192,48,.8),transparent),
    radial-gradient(2px 2px at 45% 33%,rgba(255,236,190,.7),transparent),
    radial-gradient(1.5px 1.5px at 62% 82%,rgba(252,192,48,.8),transparent),
    radial-gradient(2.5px 2.5px at 79% 26%,rgba(255,236,190,.85),transparent),
    radial-gradient(1.5px 1.5px at 88% 60%,rgba(252,192,48,.7),transparent),
    radial-gradient(2px 2px at 34% 90%,rgba(255,236,190,.7),transparent),
    radial-gradient(1.5px 1.5px at 71% 14%,rgba(252,192,48,.8),transparent),
    radial-gradient(2px 2px at 7% 54%,rgba(255,236,190,.75),transparent),
    radial-gradient(1.5px 1.5px at 93% 42%,rgba(252,192,48,.7),transparent);
  animation:thero-dust 26s ease-in-out infinite alternate}
@keyframes thero-dust{from{transform:translate3d(0,0,0)}to{transform:translate3d(16px,-24px,0)}}
@media (max-width:860px){.thero__dust{display:none}.thero__hud{font-size:.58rem;margin-bottom:2.2rem}}
@media (prefers-reduced-motion:reduce){.thero__dust{animation:none}}


/* topo hero — compact stacked HUD (2026-07-08) */
.thero__hud{display:block!important;flex-wrap:unset;gap:0;text-align:center;line-height:2.05;
  padding:.62rem 1.35rem;border-radius:14px;font-size:.6rem;max-width:min(90vw,460px)}
.thero__hud-r{display:block;white-space:nowrap}
.thero__hud-r .thero__dot{display:inline-block;vertical-align:middle;margin-right:.45rem}
.thero__hud-r:first-child{color:var(--gold);font-weight:600}
.thero__hud b{color:#fff;font-weight:600}
.thero__hud svg{width:11px;height:11px;vertical-align:-1px}
@media (max-width:860px){.thero__hud{font-size:.55rem;line-height:1.95;margin-bottom:1.8rem;max-width:94vw;white-space:normal}.thero__hud-r{white-space:normal}}


/* topo hero — framed gallery memories (2026-07-08) */
.thero__mem{border:7px solid #f4efe2;border-radius:2px;background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 42px 95px -30px rgba(0,0,0,.85);
  filter:brightness(.92) saturate(.98)}
.thero__mem--hero{border:0;filter:none;background-clip:border-box;
  box-shadow:0 60px 130px -30px rgba(0,0,0,.9),0 0 0 1px rgba(252,192,48,.25),0 0 90px -18px rgba(252,192,48,.32)}
.thero__cap{color:#12203f;background:linear-gradient(transparent,rgba(244,239,226,.92));text-shadow:none}
@media (max-width:860px){.thero__mem{border:0;box-shadow:none}.thero__mem--hero{border:0}}


/* topo hero — animated background beams (2026-07-08) */
.thero__beams{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.6;filter:blur(.5px)}
.thero__beams path{fill:none;stroke-linecap:round;stroke-dasharray:70 2200;animation:thero-beam 8s linear infinite}
@keyframes thero-beam{from{stroke-dashoffset:1100}to{stroke-dashoffset:-1100}}
.thero__contours{display:none}   /* beams replace the ring pattern */
@media (max-width:860px){.thero__beams{display:none}}
@media (prefers-reduced-motion:reduce){.thero__beams path{animation:none}}


/* ============ 3D COVERFLOW HERO (2026-07-08) ============ */
.cf{position:absolute;inset:0;z-index:1;transform-style:preserve-3d}
.cf__item{position:absolute;top:50%;left:50%;width:min(46vw,620px);height:min(52vh,440px);
  background-size:cover;background-position:center;border-radius:6px;
  border:6px solid #f4efe2;background-clip:padding-box;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .85s ease,box-shadow .85s ease;
  backface-visibility:hidden;will-change:transform;cursor:pointer}
.cf__item--active{box-shadow:0 60px 130px -30px rgba(0,0,0,.9),0 0 0 1px rgba(252,192,48,.3),0 0 90px -18px rgba(252,192,48,.32)}
.cf__item:first-child{z-index:10}
.thero__center{position:relative}
.thero__scrim{position:absolute;z-index:0;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(94vw,1150px);height:80%;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%,rgba(6,10,24,.62),rgba(6,10,24,.28) 60%,transparent 76%);filter:blur(26px)}
.thero__logo,.thero__title{position:relative;z-index:1}
@media (max-width:860px){.cf__item{width:min(74vw,420px);height:min(46vh,300px);border-width:5px}}


/* topo hero — logo-top / imagery-centre / title-bottom (2026-07-08) */
.thero__ui{grid-template-rows:auto 1fr auto}
.thero__brandtop{grid-row:1;justify-self:center;align-self:start;margin-top:clamp(4.8rem,9vh,6.2rem);z-index:3}
.thero__spacer{grid-row:2}
.thero__bottom{grid-row:3;justify-self:center;align-self:end;display:flex;flex-direction:column;align-items:center;
  gap:1.1rem;margin-bottom:clamp(1.8rem,4vh,3rem);text-align:center;max-width:94vw}
.thero__title{font-size:clamp(2rem,5.3vw,4.6rem);text-shadow:0 3px 30px rgba(0,0,0,.6);margin:0}
.cf__item{top:44%}
.thero__scrim{display:none}
.thero__dots{display:flex;gap:.5rem;justify-content:center}
.thero__dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(224,232,246,.32);transition:.35s cubic-bezier(.16,1,.3,1)}
.thero__dots button.on{background:var(--gold);width:22px;border-radius:4px}
@media (max-width:860px){.thero__title{font-size:clamp(1.9rem,7.5vw,2.6rem)}.thero__brandtop{margin-top:4.2rem}.cf__item{top:42%}}


/* topo hero — clear the title from the coverflow (2026-07-08) */
.cf__item{top:41%;height:min(48vh,400px)}
@media (max-width:860px){.cf__item{top:39%;height:min(42vh,280px)}}


/* topo hero — centre the live dashboard cleanly (2026-07-08) */
.thero__hud{margin:0 auto!important;align-self:center;justify-self:center}
.thero__bottom{width:100%}


/* ============ topo hero — 2050 futuristic layer (2026-07-08) ============ */
/* glossy floor reflection under the active photo */
.cf__item--active{-webkit-box-reflect:below 6px linear-gradient(transparent 58%, rgba(190,215,255,.14))}
/* holographic rotating rim around the active photo */
.cf__item--active::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:10px;
  background:conic-gradient(from 0deg,rgba(252,192,48,.9),rgba(84,192,228,.9),rgba(252,192,48,.9),rgba(84,192,228,.9),rgba(252,192,48,.9));
  filter:blur(7px);opacity:.55;animation:cf-holo 7s linear infinite}
@keyframes cf-holo{to{transform:rotate(360deg)}}
/* mouse-tilt smoothing */
.cf{transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* HUD viewfinder corner brackets */
.thero__frame{position:absolute;inset:clamp(16px,2.4vw,34px);z-index:3;pointer-events:none}
.thero__frame i{position:absolute;width:24px;height:24px;border:1.5px solid rgba(252,192,48,.42);
  box-shadow:0 0 12px -4px rgba(252,192,48,.5)}
.thero__frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.thero__frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.thero__frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.thero__frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
@media (max-width:860px){.thero__frame{display:none}.cf__item--active{-webkit-box-reflect:none}.cf__item--active::before{display:none}}
@media (prefers-reduced-motion:reduce){.cf__item--active::before{animation:none}.cf{transition:none}}

/* immersive scroll-depth — perspective for the 3D media turns (2026-07-08) */
.welcome__media,.split-lux{perspective:1400px}
.welcome__main,.split-lux__media{will-change:transform}
@media (max-width:860px){.welcome__media,.split-lux{perspective:none}}

/* Lenis smooth-scroll (self-hosted) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ==========================================================================
   CINEMATIC FULL-BLEED HERO  (.chero) — 2026-07-09
   One full-screen image, slow living drift, refined type, hairline rule,
   glass CTA, live-sky tint. Restraint = luxury. Replaces coverflow (.thero).
   ========================================================================== */
.chero{--cg:#e7cd97;position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#0a1024;isolation:isolate}
.chero__bg{position:absolute;inset:-6% 0;background-size:cover;background-position:50% 50%;
  transform:scale(1.06);animation:chero-drift 48s ease-in-out infinite alternate;will-change:transform}
@keyframes chero-drift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.09) translate3d(-2.4%,1.4%,0)}}
.chero__scrim{position:absolute;inset:0;transition:background 2.4s ease;
  background:linear-gradient(180deg,rgba(6,10,26,.36) 0%,rgba(6,10,26,.30) 40%,rgba(6,10,26,.56) 72%,rgba(6,10,26,.82) 100%)}
body[data-phase=dawn]   .chero__scrim{background:linear-gradient(180deg,rgba(255,167,102,.20),rgba(24,31,74,.42) 50%,rgba(10,14,34,.82))}
body[data-phase=day]    .chero__scrim{background:linear-gradient(180deg,rgba(84,192,228,.14),rgba(18,27,62,.40) 48%,rgba(8,13,32,.80))}
body[data-phase=golden] .chero__scrim{background:linear-gradient(180deg,rgba(252,158,74,.24),rgba(44,29,64,.46) 50%,rgba(12,16,42,.84))}
body[data-phase=night]  .chero__scrim{background:linear-gradient(180deg,rgba(8,12,34,.46),rgba(8,12,34,.56) 50%,rgba(5,8,26,.88))}

.chero__inner{position:relative;z-index:2;text-align:center;max-width:min(92vw,980px);padding:0 1.4rem}
.chero__eyebrow{margin:0 0 1.7rem;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--cg);
  animation:chero-up 1s ease .3s both}
.chero__title{margin:0;font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(2.7rem,6.6vw,6.2rem);line-height:1.02;letter-spacing:-.005em;
  text-shadow:0 6px 48px rgba(0,0,0,.5);animation:chero-up 1.3s cubic-bezier(.16,1,.3,1) .5s both}
.chero__line{display:block;width:0;height:1px;margin:2.1rem auto 2.3rem;
  background:linear-gradient(90deg,transparent,var(--cg) 50%,transparent);
  animation:chero-line 1.1s ease 1.15s both}
@keyframes chero-line{to{width:128px}}
.chero__cta{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#fff;text-decoration:none;
  padding:1.02rem 2.5rem;border:1px solid rgba(231,205,151,.6);border-radius:50px;
  background:rgba(231,205,151,.06);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .4s ease,color .4s ease,border-color .4s ease,transform .4s ease,box-shadow .4s ease;
  animation:chero-up 1s ease 1.35s both}
.chero__cta:hover,.chero__cta:focus-visible{background:var(--cg);color:#0a1024;border-color:var(--cg);
  transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(231,205,151,.6)}

@keyframes chero-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.chero__meta{position:absolute;left:0;right:0;bottom:3.6rem;z-index:2;text-align:center;
  animation:chero-up 1s ease 1.7s both}
.chero__live{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,238,246,.74)}
.chero__live[hidden]{display:none}
.chero__live svg{width:13px;height:13px;vertical-align:-2px;opacity:.85}
.chero__dot{width:7px;height:7px;border-radius:50%;background:#39d98a;
  box-shadow:0 0 0 0 rgba(57,217,138,.55);animation:chero-pulse 2.4s ease-out infinite}
@keyframes chero-pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.5)}70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

.chero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(233,238,246,.5);padding-bottom:34px;animation:chero-up 1s ease 2s both}
.chero__scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:26px;
  background:linear-gradient(rgba(233,238,246,.55),transparent);
  transform:translateX(-50%);transform-origin:top;animation:chero-scroll 2.2s ease-in-out infinite}
@keyframes chero-scroll{
  0%{transform:translateX(-50%) scaleY(0);transform-origin:top}
  45%{transform:translateX(-50%) scaleY(1);transform-origin:top}
  55%{transform:translateX(-50%) scaleY(1);transform-origin:bottom}
  100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}

@media (max-width:640px){
  .chero__bg{background-image:var(--hm)!important;inset:0;transform:none;animation:none}
  .chero__title{font-size:clamp(2.15rem,8.6vw,3rem);line-height:1.06}
  .chero__eyebrow{font-size:.62rem;letter-spacing:.34em;margin-bottom:1.3rem}
  .chero__meta{bottom:4.4rem}
}
@media (prefers-reduced-motion:reduce){
  .chero__bg{animation:none;transform:scale(1.04)}
  .chero__eyebrow,.chero__title,.chero__cta,.chero__meta,.chero__scroll{animation:none;opacity:1;transform:none}
  .chero__line{animation:none;width:128px}
  .chero__scroll::after{animation:none}
}

/* ==========================================================================
   PRELOADER  (.mload) — Matarma logo on brand navy with a spinning gold ring.
   Homepage only. Fades out on window load (min 650ms, 4s safety net).
   ========================================================================== */
.mload{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:radial-gradient(130% 130% at 50% 38%,#1b2c67 0%,#0c1330 72%);
  transition:opacity .8s ease,visibility .8s ease}
.mload--done{opacity:0;visibility:hidden;pointer-events:none}
.mload__box{position:relative;width:190px;height:190px;display:grid;place-items:center}
.mload__ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(231,205,151,.16);border-top-color:#e7cd97;border-right-color:#e7cd97;
  animation:mload-spin 1s linear infinite}
.mload__logo{width:136px;height:auto;animation:mload-breathe 2.4s ease-in-out infinite}
@keyframes mload-spin{to{transform:rotate(360deg)}}
@keyframes mload-breathe{0%,100%{opacity:.85;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){
  .mload__ring{animation:none;border-color:#e7cd97}
  .mload__logo{animation:none;opacity:1}
}

/* ==========================================================================
   HERO LOGO — static (client asked to remove the spin). No rotation, no
   transform; just a gentle fade-in so it appears in step with the rest of
   the hero. Logo is released from the GSAP entrance in motion.js, so this
   CSS owns its appearance.
   ========================================================================== */
.hero__logo{animation:hero-logo-fade 1.1s ease both}
@keyframes hero-logo-fade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   WELCOME (01) — recentred intro + fanned card deck. Replaces the old
   floating-frame photos (client asked to drop the "frames" idea).
   ========================================================================== */
.welcome__intro{max-width:860px;margin:0 auto;text-align:center}
.welcome__intro .bicons{justify-content:center}
.welcome__intro .btn{margin-top:.4rem}

.fandeck{position:relative;width:100%;max-width:96rem;margin:3.2rem auto 0;padding:0 1rem;
  overflow:hidden}                                   /* clip horizontal spill → no page-scroll */
.fandeck__stage{position:relative;min-height:38rem;margin:0 auto;max-width:80rem}
.fandeck__card{position:absolute;left:50%;top:50%;width:20rem;height:28rem;margin:-14rem 0 0 -10rem;
  border-radius:22px;overflow:hidden;background:#0e1836;cursor:default;opacity:0;
  box-shadow:0 34px 66px -24px rgba(5,10,26,.62),0 8px 20px -10px rgba(5,10,26,.45);
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fandeck__card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
a.fandeck__card{cursor:pointer}

.fandeck__nav{display:flex;align-items:center;justify-content:center;gap:1.15rem;margin-top:2rem}
.fandeck--static .fandeck__nav{display:none}
.fandeck__arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s,transform .3s,color .3s}
.fandeck__arrow:hover,.fandeck__arrow:focus-visible{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.42);transform:translateY(-2px);outline:none}
.fandeck__arrow svg{width:18px;height:18px}
.fandeck__dots{display:flex;align-items:center;gap:.5rem}
.fandeck__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);transition:transform .3s,background .3s}
.fandeck__dot:hover{background:rgba(255,255,255,.4)}
.fandeck__dot.on{background:var(--gold);transform:scale(1.4)}

@media (max-width:1023px){
  .fandeck__stage{min-height:31rem}
  .fandeck__card{width:16rem;height:22.4rem;margin:-11.2rem 0 0 -8rem}
}
@media (max-width:767px){
  .fandeck{margin-top:2.4rem}
  .fandeck__stage{min-height:24rem}
  .fandeck__card{width:12.5rem;height:17.5rem;margin:-8.75rem 0 0 -6.25rem;border-radius:16px}
}
@media (max-width:479px){
  .fandeck__stage{min-height:21rem}
  .fandeck__card{width:10.5rem;height:14.7rem;margin:-7.35rem 0 0 -5.25rem}
}

/* ==========================================================================
   MERGED RATING (Why Matarma) — one star rating + the platform logos, no
   per-platform scores or detail lines (client: "too much data"). Number
   counts up + stars fill on scroll-in (motion.js); no cursor tilt.
   ========================================================================== */
.ratemerge{position:relative;overflow:hidden;max-width:700px;margin:0 auto;text-align:center;
  background:rgba(9,13,32,.9);border:1px solid rgba(255,255,255,.12);border-radius:22px;
  padding:2.9rem 2.2rem 2.2rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 44px 100px -46px rgba(0,0,0,.72)}
.ratemerge::before{content:"";position:absolute;left:24%;right:24%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#e7cd97,transparent)}
.ratemerge__stars{position:relative;display:inline-block;font-size:3rem;line-height:1;letter-spacing:.16em}
.ratemerge__base{color:rgba(255,255,255,.20)}
.ratemerge__fill{position:absolute;left:0;top:0;width:var(--fill,90%);overflow:hidden;white-space:nowrap;
  color:var(--gold)}
.ratemerge__score{margin:1.1rem 0 .2rem;font-family:var(--serif);display:flex;align-items:baseline;justify-content:center;gap:.55rem}
.ratemerge__score b{font-size:3.5rem;font-weight:400;color:#fff;line-height:1}
.ratemerge__score span{font-size:.98rem;color:var(--ink-soft);letter-spacing:.05em;font-family:var(--sans)}
.ratemerge__label{margin:0 0 1.8rem;font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft)}
.ratemerge__logos{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.8rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.10)}
.ratemerge__logos .rate__brand{margin:0;font-size:.74rem;letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.ratemerge__logos .rate__brand svg{width:19px;height:19px}
.ratemerge__logos .rate__mark{width:19px;height:19px;font-size:.68rem}
.ratemerge__sep{flex:none;width:1px;height:18px;background:rgba(255,255,255,.16)}
@media (max-width:600px){
  .ratemerge{padding:2.1rem 1.1rem}
  .ratemerge__stars{font-size:2.3rem}
  .ratemerge__score b{font-size:2.7rem}
  .ratemerge__logos{gap:.9rem 1.1rem;flex-wrap:wrap}
  .ratemerge__logos .rate__brand{font-size:.74rem}
  .ratemerge__sep{display:none}
}

/* ==========================================================================
   EXPERIENCES — expanding activity cards. Row of photos; hover one and it
   opens wide (label goes serif + copy reveals), the rest slim to slivers.
   First card open at rest. Mobile stacks (no hover). Client-picked "C".
   ========================================================================== */
.expintro{max-width:820px;margin:0 auto;text-align:center}
.expintro__lead{color:var(--ink-soft);max-width:600px;margin:1.3rem auto 1.9rem}
.expand-row{display:flex;gap:12px;height:clamp(320px,48vh,480px);margin-top:2.8rem}
.expand-card{position:relative;flex:1;min-width:0;border-radius:16px;overflow:hidden;
  background-size:cover;background-position:center;text-decoration:none;cursor:pointer;
  transition:flex-grow .55s cubic-bezier(.16,1,.3,1);will-change:flex-grow}
.expand-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 36%,rgba(5,9,24,.88))}
.expand-card__label{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.05em;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:0 2px 12px rgba(0,0,0,.7);
  transition:all .45s cubic-bezier(.16,1,.3,1)}
.expand-card__copy{position:absolute;left:24px;right:24px;bottom:64px;z-index:2;color:#dbe4f4;
  font-size:.92rem;line-height:1.55;max-width:min(66%,420px);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease .05s,transform .45s ease .05s}
.expand-card__go{position:absolute;right:20px;bottom:22px;z-index:2;color:var(--gold);font-size:1.3rem;
  opacity:0;transform:translateX(-6px);transition:opacity .4s ease .1s,transform .4s ease .1s}

/* shared "expanded" look — applied to the resting-open card */
.expand-card--open .expand-card__label{writing-mode:horizontal-tb;transform:none;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:0;left:24px;bottom:22px}
.expand-card--open .expand-card__copy{opacity:1;transform:none}
.expand-card--open .expand-card__go{opacity:1;transform:none}

@media (hover:hover) and (min-width:861px){
  .expand-card--open{flex:5.2}
  /* while hovering the row, collapse everything to base first */
  .expand-row:hover .expand-card{flex:1}
  .expand-row:hover .expand-card .expand-card__label{writing-mode:vertical-rl;transform:rotate(180deg);
    font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.05em;left:16px;bottom:16px}
  .expand-row:hover .expand-card .expand-card__copy{opacity:0;transform:translateY(10px)}
  .expand-row:hover .expand-card .expand-card__go{opacity:0;transform:translateX(-6px)}
  /* then expand the hovered card */
  .expand-row:hover .expand-card:hover{flex:5.2}
  .expand-row:hover .expand-card:hover .expand-card__label{writing-mode:horizontal-tb;transform:none;
    font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:0;left:24px;bottom:22px}
  .expand-row:hover .expand-card:hover .expand-card__copy{opacity:1;transform:none}
  .expand-row:hover .expand-card:hover .expand-card__go{opacity:1;transform:none}
}
@media (max-width:860px){
  .expand-row{flex-direction:column;height:auto;gap:10px}
  .expand-card{flex:none;height:148px}
  .expand-card__label{writing-mode:horizontal-tb;transform:none;font-family:var(--serif);font-weight:400;
    font-size:1.4rem;letter-spacing:0;left:18px;bottom:16px}
  .expand-card__copy,.expand-card__go{display:none}
}

/* ==========================================================================
   MERGED RATING — "Breathing aura" (client-picked B). A soft gold halo pulses
   behind the card and the stars twinkle. The halo lives on a .ratehalo wrapper
   so it can bloom past the card edges (the card itself is overflow:hidden).
   ========================================================================== */
.ratehalo{position:relative}
.ratehalo::before{content:"";position:absolute;inset:-16px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(252,192,48,.34),rgba(252,192,48,.10) 42%,transparent 66%);
  animation:rate-breathe 4.6s ease-in-out infinite}
@keyframes rate-breathe{0%,100%{opacity:.42;transform:scale(.95)}50%{opacity:.82;transform:scale(1.05)}}
.ratehalo .ratemerge{position:relative;z-index:1}
.ratemerge__stars{animation:rate-twinkle 3.2s ease-in-out infinite}
@keyframes rate-twinkle{
  0%,100%{filter:drop-shadow(0 0 2px rgba(252,192,48,.35))}
  50%{filter:drop-shadow(0 0 11px rgba(252,192,48,.9))}}
@media (prefers-reduced-motion:reduce){
  .ratehalo::before{animation:none;opacity:.55}
  .ratemerge__stars{animation:none;filter:drop-shadow(0 0 4px rgba(252,192,48,.4))}
}

/* ==========================================================================
   HOTEL "THE STORY" — the drifting shoreline (client-picked E). A slow,
   endless filmstrip of exterior photography glides across the section like
   a walk along the shore. Pure CSS marquee (row duplicated once, -50% loop);
   edges fade via mask so it works over any section background. Hover pauses.
   Reduced-motion: still strip you can swipe.
   ========================================================================= */
.storyintro{max-width:840px;margin:0 auto;text-align:center}
.storydrift{position:relative;overflow:hidden;margin-top:3.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.storydrift__row{display:flex;gap:14px;width:max-content;
  animation:storydrift 48s linear infinite;will-change:transform}
.storydrift:hover .storydrift__row{animation-play-state:paused}
.storydrift__card{width:340px;height:236px;flex:none;border-radius:14px;
  background-size:cover;background-position:center;
  box-shadow:0 22px 44px -20px rgba(4,8,22,.6)}
@keyframes storydrift{to{transform:translateX(calc(-50% - 7px))}}
html[dir=rtl] .storydrift__row{animation-name:storydrift-rtl}
@keyframes storydrift-rtl{to{transform:translateX(calc(50% + 7px))}}
@media (max-width:640px){
  .storydrift{margin-top:2.4rem}
  .storydrift__card{width:225px;height:158px;border-radius:11px}
}
@media (prefers-reduced-motion:reduce){
  .storydrift__row{animation:none}
  .storydrift{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ==========================================================================
   HOTEL "THE SPACES" — the gold trail (client-approved). A dotted champagne
   path winds down the section connecting six stops; trail.js draws a solid
   gold line over it as you scroll and walks a glowing "you are here" dot
   along the path. Ends at the pier at sunset → Book CTA.
   ========================================================================== */
.spacewalk__sub{color:var(--ink-soft);font-size:.95rem;text-align:center;max-width:52ch;margin:1rem auto 0;line-height:1.6}
.spacewalk__start{display:flex;justify-content:center;margin:2.4rem 0 .4rem}
.spacewalk__start span{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(231,205,151,.4);
  border-radius:40px;padding:.55rem 1.2rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#e7cd97}
.spacewalk__start i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);
  animation:strail-pulse 2.2s ease-out infinite;font-style:normal}
@keyframes strail-pulse{0%{box-shadow:0 0 0 0 rgba(252,192,48,.6)}70%{box-shadow:0 0 0 9px rgba(252,192,48,0)}100%{box-shadow:0 0 0 0 rgba(252,192,48,0)}}

.strail{position:relative;max-width:820px;margin:0 auto}
.strail__rails{position:absolute;left:50%;top:0;height:100%;width:150px;transform:translateX(-50%);overflow:visible;z-index:1}
.strail__guide{fill:none;stroke:rgba(231,205,151,.28);stroke-width:1.4;stroke-dasharray:5 9}
.strail__walked{fill:none;stroke:#e7cd97;stroke-width:2;filter:drop-shadow(0 0 5px rgba(231,205,151,.7))}
.strail__walker{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;z-index:3;
  opacity:0;background:var(--gold);box-shadow:0 0 10px var(--gold),0 0 26px rgba(252,192,48,.55);pointer-events:none;
  transition:opacity .4s ease}
.strail__walker::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(252,192,48,.5);
  animation:strail-pulse 2s ease-out infinite}

.sstop{display:flex;align-items:center;gap:2rem;margin:2.2rem 0;position:relative;z-index:2;
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.sstop.in{opacity:1;transform:none}
.sstop--rev{flex-direction:row-reverse;text-align:right}
.sstop__ph{width:46%;height:206px;border-radius:14px;background-size:cover;background-position:center;flex:none;
  box-shadow:0 26px 50px -20px rgba(4,8,22,.7);transition:transform .5s ease}
.sstop:hover .sstop__ph{transform:scale(1.025)}
.sstop__tx{flex:1}
.sstop__tx b{display:block;font-family:var(--serif);font-weight:400;font-size:1.55rem;color:#fff}
.sstop__tx i{display:block;font-style:normal;color:#e7cd97;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin:.3rem 0 .55rem}
.sstop__tx p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.6;max-width:34ch}
.sstop--rev .sstop__tx p{margin-left:auto}

.sbetween{display:flex;justify-content:center;margin:-.4rem 0;position:relative;z-index:2}
.sbetween span{background:#0c1436;border:1px solid rgba(231,205,151,.25);border-radius:30px;padding:.35rem 1rem;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(231,205,151,.85)}

.sfinish{position:relative;z-index:2;text-align:center;margin-top:2.6rem}
.sfinish__sun{width:46px;height:46px;margin:0 auto 1rem;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe9ad,var(--gold));box-shadow:0 0 26px rgba(252,192,48,.65);
  animation:strail-pulse 3s ease-out infinite}
.sfinish p{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#e7cd97;margin:0 0 1.1rem}

@media (max-width:640px){
  .strail__rails{left:16px;transform:none;width:36px}
  .strail__walker{display:none}
  .sstop,.sstop--rev{flex-direction:column;text-align:left;margin-left:54px;gap:.8rem}
  .sstop__ph{width:100%;height:158px}
  .sstop--rev .sstop__tx p{margin-left:0}
  .sbetween{justify-content:flex-start;margin-left:54px}
}
html[dir=rtl] .sstop--rev{text-align:left}
html[dir=rtl] .sstop:not(.sstop--rev){text-align:right}
@media (prefers-reduced-motion:reduce){
  .sstop{opacity:1;transform:none;transition:none}
  .spacewalk__start i,.strail__walker::after,.sfinish__sun{animation:none}
}

/* ==========================================================================
   "DRAG THE SUN" LIVING-SUNSET BAND (.sunband / .sunslide) v2 — the seam
   between day and night is GOLDEN HOUR (third photo masked around --sx),
   the sun sinks along an arc and becomes the moon, stars fade in, a clock
   chip reads the hour. sunslider.js drives everything through --sx and
   inline opacities. Autoplays a slow sunset until first touch.
   ========================================================================== */
.sunband{position:relative;height:78vh;min-height:520px;overflow:hidden;cursor:ew-resize;
  touch-action:pan-y;outline:none;--sx:50%}
.sunband__lay{position:absolute;inset:0;background-size:cover;background-position:center}
.sunband__lay::after{content:"";position:absolute;inset:0;background:rgba(5,9,24,.34)}
.sunband__lay--gold{
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--sx) - 24%),rgba(0,0,0,.96) calc(var(--sx) - 8%),rgba(0,0,0,.96) var(--sx),transparent calc(var(--sx) + 9%));
  mask-image:linear-gradient(90deg,transparent calc(var(--sx) - 24%),rgba(0,0,0,.96) calc(var(--sx) - 8%),rgba(0,0,0,.96) var(--sx),transparent calc(var(--sx) + 9%))}
.sunband__lay--dusk{
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--sx) - 2%),#000 calc(var(--sx) + 7%));
  mask-image:linear-gradient(90deg,transparent calc(var(--sx) - 2%),#000 calc(var(--sx) + 7%))}
.sunband__grade{position:absolute;inset:0;pointer-events:none;z-index:3}
.sunband__grade--warm{background:linear-gradient(180deg,rgba(252,170,60,.16),transparent 55%)}
.sunband__grade--night{background:linear-gradient(180deg,rgba(10,16,50,.5),rgba(8,12,34,.12) 60%);opacity:0}
.sunband__stars{position:absolute;inset:0 0 45% 0;pointer-events:none;z-index:3;opacity:0}
.sunband__stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:sun-tw 3s ease-in-out infinite}
@keyframes sun-tw{0%,100%{opacity:.35}50%{opacity:1}}
.sunband__seam{position:absolute;top:0;bottom:0;left:var(--sx);width:1px;z-index:4;pointer-events:none;
  background:linear-gradient(rgba(231,205,151,0),rgba(231,205,151,.6) 30%,rgba(231,205,151,.6) 70%,rgba(231,205,151,0))}
.sunband__sun{position:absolute;left:var(--sx);top:30%;z-index:5;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;pointer-events:none}
.sunband__suncore{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffe9ad,var(--gold));
  box-shadow:0 0 26px rgba(252,192,48,.85),0 0 70px rgba(252,192,48,.4)}
.sunband__moon{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 40% 35%,#f4f6ff,#c9d2ea);
  box-shadow:inset -10px -6px 0 2px rgba(19,28,66,.92),0 0 22px rgba(210,220,255,.5)}
.sunband__clock{position:absolute;left:50%;top:1rem;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:.55rem;background:rgba(6,10,26,.55);
  border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:.5rem 1rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;color:#fff;pointer-events:none;
  font-variant-numeric:tabular-nums}
.sunband__clock b{color:#e7cd97;font-weight:600}
.sunband__tx{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;
  pointer-events:none;padding:0 1.4rem}
.sunband__tx .display{margin-bottom:1.2rem;text-shadow:0 4px 34px rgba(0,0,0,.75)}
.sunband__sub{color:#e8e2d4;max-width:600px;margin:0 auto 1.6rem;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.sunband__tx .factline{margin-top:0;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.sunband__hint{margin-top:1.6rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(231,205,151,.9);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.sunband__lab{position:absolute;top:1.1rem;z-index:6;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;background:rgba(6,10,26,.5);border:1px solid rgba(255,255,255,.18);border-radius:20px;
  padding:.4rem .85rem;pointer-events:none}
.sunband__lab--l{left:1.1rem}
.sunband__lab--r{right:1.1rem}
@media (max-width:640px){
  .sunband{height:64vh;min-height:440px}
  .sunband__sun{width:40px;height:40px;margin:-20px 0 0 -20px}
  .sunband__clock{top:3.4rem}
  .sunband__hint{margin-top:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .sunband__stars i{animation:none;opacity:.7}
}

/* ==========================================================================
   REVIEWS WALL — polish pass (client: keep the moving wall, richer finish).
   Same layout & motion; upgraded materials: glass cards with champagne
   hairline + serif quote watermark, glowing/twinkling stars, hover lift
   (rows already pause on hover), depth between rows, breathing badge,
   Google chip. Pure CSS on top of the existing wall.
   ========================================================================== */
.rw-card{position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(22,34,63,.92),rgba(13,21,48,.96));
  border:1px solid rgba(255,255,255,.10);border-radius:20px;
  box-shadow:0 18px 40px -22px rgba(3,6,18,.7);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s ease,box-shadow .45s ease}
.rw-card::before{content:"";position:absolute;left:18%;right:18%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,205,151,.55),transparent)}
.rw-card::after{content:"\201C";position:absolute;right:.9rem;top:2.4rem;z-index:0;
  font-family:var(--serif);font-size:5.4rem;line-height:1;color:rgba(231,205,151,.08);pointer-events:none}
.rw-card:hover{transform:translateY(-7px);border-color:rgba(231,205,151,.45);
  box-shadow:0 30px 60px -24px rgba(3,6,18,.9),0 0 0 1px rgba(231,205,151,.12)}
.rw-card>*{position:relative;z-index:1}
.rw-av{border:2px solid rgba(255,255,255,.55);border-radius:14px;
  box-shadow:0 6px 16px -6px rgba(3,6,18,.6)}
.rw-stars{text-shadow:0 0 10px rgba(252,192,48,.55);animation:rw-tw 3.6s ease-in-out infinite}
.rw-card:nth-child(2n) .rw-stars{animation-delay:-1.2s}
.rw-card:nth-child(3n) .rw-stars{animation-delay:-2.4s}
@keyframes rw-tw{0%,100%{text-shadow:0 0 4px rgba(252,192,48,.3)}50%{text-shadow:0 0 14px rgba(252,192,48,.85)}}
.rw-g{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:.34rem .8rem}
/* depth: outer rows recede a touch, middle row leads */
.rw-row:nth-child(1),.rw-row:nth-child(3){opacity:.85;filter:brightness(.94)}
.rw-rows:hover .rw-row{opacity:1;filter:none;transition:opacity .5s ease,filter .5s ease}
/* badge: breathing gold halo like the rating card */
.rw-badge{position:relative;border-color:rgba(231,205,151,.4)}
.rw-badge::after{content:"";position:absolute;inset:-14px;border-radius:30px;z-index:-1;
  background:radial-gradient(closest-side,rgba(252,192,48,.22),transparent 72%);
  animation:rate-breathe 4.6s ease-in-out infinite}
.rw-badge .st{text-shadow:0 0 12px rgba(252,192,48,.6)}
@media (prefers-reduced-motion:reduce){
  .rw-stars{animation:none}
  .rw-badge::after{animation:none;opacity:.5}
  .rw-card{transition:none}
}

/* ==========================================================================
   "ROAD TO THE SEA" (.roadline) — Getting Here band polish (client pick A).
   Dashed champagne route Cairo → tunnel → coast → Matarma across the band,
   with a glowing headlight dot driven by roadline.js (RTL reverses).
   ========================================================================== */
.roadline{position:relative;max-width:920px;margin:2.6rem auto 2.2rem;height:150px}
.roadline svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.roadline__path{fill:none;stroke:rgba(231,205,151,.34);stroke-width:1.6;stroke-dasharray:5 8}
.roadline__car{position:absolute;top:0;left:0;width:11px;height:11px;margin:-5.5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px var(--gold),0 0 26px rgba(252,192,48,.5);pointer-events:none}
.roadline__stop{position:absolute;transform:translateX(-50%);text-align:center;pointer-events:none}
.roadline__stop i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(231,205,151,.85);
  margin:0 auto 7px;font-style:normal}
.roadline__stop b{display:block;font-family:var(--sans);font-size:.78rem;font-weight:600;color:#fff;
  letter-spacing:.04em;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.roadline__stop em{display:block;font-style:normal;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,238,246,.75);margin-top:2px;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.roadline__stop--end i{background:var(--gold);box-shadow:0 0 10px var(--gold)}
@media (max-width:640px){
  .roadline{height:112px;margin:1.8rem auto 1.4rem}
  .roadline__stop b{font-size:.6rem}
  .roadline__stop em{font-size:.5rem;letter-spacing:.1em}
}

/* ==========================================================================
   GETTING HERE — arrival band polish (.band--arrive): refined scrim for
   legibility, champagne hairline over the eyebrow, warmer factline,
   breathing gold CTA. Simple and classy — no gadgets.
   ========================================================================== */
.band--arrive{position:relative}
.band--arrive::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,15,43,.52),rgba(8,15,43,.22) 45%,rgba(8,15,43,.62))}
.band--arrive .band__inner{position:relative;z-index:2}
.ghrule{display:block;width:70px;height:1px;margin:0 auto 1.3rem;
  background:linear-gradient(90deg,transparent,#e7cd97,transparent)}
.band--arrive .factline{letter-spacing:.06em;color:#ecdfc8}
.band--arrive .btn--gold{animation:gh-breathe 3.4s ease-in-out infinite}
@keyframes gh-breathe{
  0%,100%{box-shadow:0 10px 26px -10px rgba(252,192,48,.4)}
  50%{box-shadow:0 16px 44px -8px rgba(252,192,48,.75)}}
@media (prefers-reduced-motion:reduce){.band--arrive .btn--gold{animation:none}}

/* ==========================================================================
   THE WATER — editorial split + floating live console (client pick A, v2:
   contained, no full-bleed). Text left, rounded photo right, the console
   overlaps the photo corner like an instrument resting on it. waterlive.js
   fills it with real Open-Meteo data.
   ========================================================================== */
.watersec{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.watersec__tx .display{margin-bottom:1.1rem}
.watersec__lead{color:var(--ink-soft);margin:0 0 1.4rem;line-height:1.65;max-width:46ch}
.watersec__media{position:relative;height:clamp(360px,52vh,500px);margin-bottom:2rem}
.watersec__img{position:absolute;inset:0;border-radius:18px;background-size:cover;background-position:center 35%;
  box-shadow:0 34px 66px -28px rgba(3,6,18,.8)}
.waterconsole{background:rgba(8,13,32,.92);border:1px solid rgba(84,192,228,.35);border-radius:16px;
  padding:1.15rem 1.3rem;min-width:262px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.watersec__media .waterconsole{position:absolute;inset-inline-start:-2.2rem;bottom:-2rem;
  box-shadow:0 26px 52px -20px rgba(3,6,18,.9)}
.waterconsole__t{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sea);margin-bottom:.8rem}
.waterconsole__t i{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 8px #39d98a;
  font-style:normal;animation:wc-pulse 2.2s ease-out infinite}
@keyframes wc-pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.5)}70%{box-shadow:0 0 0 8px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
.waterconsole__row{display:flex;gap:1.4rem}
.waterconsole__stat b{display:block;font-family:var(--serif);font-size:1.65rem;font-weight:400;color:#fff;line-height:1}
.waterconsole__stat b i{font-style:normal;font-size:.8rem;color:var(--ink-soft)}
.waterconsole__stat span{display:block;margin-top:.35rem;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.waterconsole__verdict{margin-top:.85rem;display:inline-flex;align-items:center;
  background:rgba(84,192,228,.12);border:1px solid rgba(84,192,228,.4);color:#9fd3e8;
  border-radius:26px;padding:.4rem .95rem;font-size:.72rem;font-weight:600;letter-spacing:.06em}
.waterconsole__verdict--go{background:rgba(57,217,138,.13);border-color:rgba(57,217,138,.45);color:#7ff0b6}
@media (max-width:860px){
  .watersec{grid-template-columns:1fr}
  .watersec__media{height:300px;margin-bottom:3.4rem}
  .watersec__media .waterconsole{inset-inline-start:.9rem;bottom:-2.6rem}
}
@media (prefers-reduced-motion:reduce){.waterconsole__t i{animation:none}}


/* ==========================================================================
   THE CALM — stillness diptych (client pick C, polished). Two tall quiet
   photos — dawn and afternoon — separated by a champagne hairline, their
   sea horizons ALIGNED so one horizon runs across the gap. One graceful
   entrance choreography (photo, line draws, photo, captions), then total
   stillness. The quietest section on the site, by design.
   ========================================================================== */
.calmdip__intro{max-width:760px;margin:0 auto;text-align:center}
.calmdip__intro .display{margin-bottom:1.1rem}
.calmdip__lead{color:var(--ink-soft);margin:0 auto 1.5rem;line-height:1.75;max-width:52ch}
.calmdip__intro .exp-tags{justify-content:center;margin:0}
.calmdip{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(.9rem,2.4vw,1.6rem);
  align-items:stretch;max-width:900px;margin:3rem auto 0}
.calmdip__ph{height:clamp(340px,52vh,470px);border-radius:16px;background-size:cover;background-position:center;
  box-shadow:0 30px 60px -26px rgba(3,6,18,.8);
  opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.calmdip__line{background:linear-gradient(rgba(231,205,151,0),rgba(231,205,151,.65),rgba(231,205,151,0));
  transform:scaleY(0);transform-origin:top;transition:transform 1.2s ease .5s}
.calmdip__side:nth-child(3) .calmdip__ph{transition-delay:.75s}
.calmdip__cap{margin-top:.85rem;text-align:center;opacity:0;transition:opacity 1s ease 1.3s}
.calmdip__cap i{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:#e7cd97}
.calmdip__cap b{display:block;margin-top:.25rem;font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:1.02rem;color:var(--ink-soft)}
.calmdip.in .calmdip__ph{opacity:1;transform:none}
.calmdip.in .calmdip__line{transform:scaleY(1)}
.calmdip.in .calmdip__cap{opacity:1}
@media (max-width:680px){
  .calmdip{grid-template-columns:1fr;max-width:520px}
  .calmdip__line{display:none}
  .calmdip__ph{height:280px}
  .calmdip__side:nth-child(3) .calmdip__ph{transition-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
  .calmdip__ph,.calmdip__line,.calmdip__cap{opacity:1;transform:none;transition:none}
}


/* ==========================================================================
   ONE PERFECT DAY (.dayx) — the living timeline (Experiences, client-approved).
   The section background IS the day (dawn→noon→gold→night gradient); a sticky
   clock scrubs the hour as you scroll; a sun rides the rail and becomes the
   moon; the hour in view is in focus; birds/gusts/embers/stars live in their
   own time zones; ends with a moonset line + Book CTA. dayline.js drives it.
   ========================================================================== */
.dayx{position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    #2b2350 0%,#7a4a3a 6%,#b4763f 10%,
    #1b3a63 22%,#16305a 38%,
    #4a3560 52%,#8a5a33 62%,#b0763a 68%,
    #2c2150 78%,#0d1334 88%,#070c22 100%)}
.dayx::after{content:"";position:absolute;inset:0;background:rgba(6,10,26,.35)}
.dayx__in{position:relative;z-index:2;padding:clamp(3.6rem,7vw,5.5rem) 1.4rem 0;max-width:1080px;margin:0 auto}
.dayx__h2wrap{position:relative;text-align:center}
.dayx__h2glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;height:360px;
  border-radius:50%;background:radial-gradient(circle,rgba(252,192,48,.26),transparent 62%);
  opacity:0;transition:opacity 2.2s ease;pointer-events:none}
.dayx__h2wrap.in .dayx__h2glow{opacity:1}
.dayx__sub{color:#cdd7ea;font-size:.95rem;text-align:center;margin:1rem 0 1.4rem}
.dayx__clock{position:sticky;top:76px;z-index:9;display:table;margin:0 auto 1.8rem;
  background:rgba(6,10,26,.68);border:1px solid rgba(231,205,151,.4);border-radius:30px;padding:.55rem 1.2rem;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.dayx__clock b{color:#e7cd97;font-weight:600}
.dayx__ckp{color:var(--ink-soft);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-inline-start:.6rem}
.dayx__rail{position:relative;max-width:800px;margin:0 auto}
.dayx__line{position:absolute;inset-inline-start:86px;top:0;bottom:0;width:1px;opacity:.55;
  background:linear-gradient(180deg,#e8b06a 0%,#cfd8ea 30%,#f2c25a 62%,#9aa8d8 82%,#6d7ab0 100%)}
.dayx__ticks{position:absolute;inset-inline-start:83px;top:0;bottom:0;width:7px;opacity:.32;
  background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(231,205,151,.8) 46px 47px)}
.dayx__sun{position:absolute;inset-inline-start:86px;top:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;z-index:5;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(circle at 38% 32%,#ffe9ad,var(--gold));
  box-shadow:0 0 14px var(--gold),0 0 40px rgba(252,192,48,.5)}
html[dir=rtl] .dayx__sun{margin:-7.5px -7.5px 0 0}
.dayx__sun--moon{background:radial-gradient(circle at 40% 35%,#f4f6ff,#c9d2ea);
  box-shadow:inset -5px -3px 0 1px rgba(19,28,66,.9),0 0 14px rgba(210,220,255,.6)}
.dayx__stop{position:relative;display:flex;align-items:center;gap:1.7rem;padding:2.1rem 0;
  opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .7s ease}
.dayx__stop.in{opacity:.52;transform:none}
.dayx__stop.in.focus{opacity:1}
.dayx__stop.in:not(.focus){filter:saturate(.85)}
.dayx__t{width:64px;flex:none;text-align:end;font-variant-numeric:tabular-nums;
  font-family:var(--sans);font-size:.88rem;letter-spacing:.08em;color:#e7cd97}
.dayx__dot{width:9px;height:9px;flex:none;border-radius:50%;background:rgba(231,205,151,.9);
  margin-inline-start:17.5px;position:relative;z-index:2}
.dayx__ph{width:300px;height:190px;flex:none;border-radius:14px;background-size:cover;background-position:center;
  box-shadow:0 24px 48px -20px rgba(3,6,18,.8);transition:transform .6s ease;z-index:1}
.dayx__stop.focus .dayx__ph{transform:scale(1.02)}
.dayx__tx{z-index:1}
.dayx__tx b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:#fff}
.dayx__tx p{margin:.45rem 0 0;color:#cdd7ea;font-size:.88rem;line-height:1.6;max-width:38ch}
.dayx__now{display:inline-flex;align-items:center;gap:.4rem;margin-inline-start:.65rem;
  background:rgba(57,217,138,.15);border:1px solid rgba(57,217,138,.5);color:#7ff0b6;border-radius:20px;
  padding:.2rem .65rem;font-family:var(--sans);font-size:.56rem;font-weight:700;letter-spacing:.18em;vertical-align:3px}
.dayx__now i{width:5px;height:5px;border-radius:50%;background:#39d98a;font-style:normal;
  animation:dayx-np 2s ease-out infinite}
@keyframes dayx-np{0%{box-shadow:0 0 0 0 rgba(57,217,138,.6)}70%{box-shadow:0 0 0 6px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
/* hour-weather layers */
.dayx__birds{position:absolute;left:0;right:0;top:3.5%;height:60px;pointer-events:none;z-index:1}
.dayx__bird{position:absolute;opacity:.5;animation:dayx-fly linear infinite}
.dayx__bird svg{width:16px;height:7px;stroke:#f0e2c8;stroke-width:1.4;fill:none}
@keyframes dayx-fly{from{transform:translateX(-6vw)}to{transform:translateX(106vw)}}
.dayx__gusts{position:absolute;left:0;right:0;top:23%;height:90px;pointer-events:none;z-index:1}
.dayx__gust{position:absolute;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:dayx-gu linear infinite}
@keyframes dayx-gu{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
.dayx__embers{position:absolute;left:0;right:0;top:70%;height:12%;pointer-events:none;z-index:1}
.dayx__embers i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 6px var(--gold);opacity:0;animation:dayx-emb 5.5s ease-in infinite}
@keyframes dayx-emb{0%{transform:translateY(6px);opacity:0}20%{opacity:.8}100%{transform:translateY(-70px);opacity:0}}
.dayx__stars{position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;z-index:1}
.dayx__stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:dayx-tw 3.4s ease-in-out infinite}
@keyframes dayx-tw{0%,100%{opacity:.25}50%{opacity:.95}}
.dayx__shoot{position:absolute;right:6%;bottom:20%;width:90px;height:1.5px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);border-radius:2px;
  transform:rotate(-24deg);opacity:0;animation:dayx-shoot 9s ease-in infinite}
@keyframes dayx-shoot{0%,88%{opacity:0;transform:rotate(-24deg) translateX(0)}90%{opacity:.95}96%,100%{opacity:0;transform:rotate(-24deg) translateX(-240px)}}
.dayx__finale{position:relative;z-index:2;text-align:center;padding:1.8rem 1.4rem 3.8rem}
.dayx__moon{width:34px;height:34px;margin:0 auto .9rem;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f4f6ff,#c9d2ea);
  box-shadow:inset -9px -5px 0 1px rgba(13,19,52,.95),0 0 20px rgba(210,220,255,.45)}
.dayx__finale p{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#e7cd97;margin:0 0 1.1rem}
.dayx__finale .btn--gold{animation:gh-breathe 3.4s ease-in-out infinite}
@media (max-width:720px){
  .dayx__line,.dayx__ticks,.dayx__sun{inset-inline-start:14px}
  .dayx__ticks{inset-inline-start:11px}
  .dayx__clock{top:66px}
  .dayx__stop{flex-wrap:wrap;gap:.8rem;padding-inline-start:34px}
  .dayx__t{width:auto;text-align:start}
  .dayx__dot{position:absolute;inset-inline-start:10px;top:44px;margin:0}
  .dayx__ph{width:100%;height:170px;order:2}
  .dayx__tx{order:3}
}
@media (prefers-reduced-motion:reduce){
  .dayx__stop{opacity:1!important;transform:none;filter:none!important}
  .dayx__sun,.dayx__shoot{display:none}
  .dayx__stars i,.dayx__bird,.dayx__gust,.dayx__embers i{animation:none}
  .dayx__embers i{opacity:.35}
  .dayx__finale .btn--gold{animation:none}
}


/* ==========================================================================
   RESIDENCES "THE IDEA" — split + the two-keys sales card (client pick A3).
   Contained photo right; a floating glass card overlaps its corner with
   Condo A / Condo B tabs that swap the true spec rows. Request-prices CTA
   and the 19625 hotline live in the card. No prices shown.
   ========================================================================== */
.ideasec{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ideasec__tx .display{margin-bottom:1.1rem;font-size:clamp(2.1rem,3.6vw,3.1rem);text-wrap:balance}
.ideasec__media{position:relative;height:clamp(380px,52vh,490px);margin-bottom:2.8rem}
.ideasec__img{position:absolute;inset:0;border-radius:18px;background-size:cover;background-position:center 68%;
  box-shadow:0 34px 66px -28px rgba(3,6,18,.8)}
.ideacard{position:absolute;inset-inline-start:-2.4rem;bottom:-2.6rem;
  background:rgba(8,13,32,.95);border:1px solid rgba(231,205,151,.4);border-radius:15px;
  padding:.85rem .95rem;width:238px;box-shadow:0 26px 52px -20px rgba(3,6,18,.9);
  transition:transform .5s ease,box-shadow .5s ease}
.ideacard::before{content:"";position:absolute;left:22%;right:22%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#e7cd97,transparent)}
.ideacard:hover{transform:translateY(-4px);box-shadow:0 34px 62px -22px rgba(3,6,18,.95)}
.ideacard__tabs{display:flex;gap:.4rem;margin-bottom:.7rem}
.ideacard__tabs button{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);
  border-radius:20px;color:#e2e9f6;font-family:var(--sans);font-size:.62rem;letter-spacing:.07em;
  padding:.4rem 0;cursor:pointer;font-weight:600;transition:all .3s}
.ideacard__tabs button.on{background:rgba(252,192,48,.92);border-color:transparent;color:#182454}
.ideacard__row{display:flex;justify-content:space-between;gap:.8rem;font-family:var(--sans);font-size:.73rem;
  color:#cdd7ea;padding:.34rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ideacard__row b{color:#fff;font-weight:600;text-align:end}
.ideacard__note{margin:.55rem 0 0;font-family:var(--serif);font-style:italic;font-size:.76rem;
  color:#e7cd97;line-height:1.5;min-height:2.3em}
.ideacard__cta{display:block;text-align:center;margin-top:.7rem;background:var(--gold);color:#182454;
  text-decoration:none;font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;border-radius:26px;padding:.6rem 0}
.ideacard__hot{text-align:center;margin-top:.55rem;font-family:var(--sans);font-size:.68rem;color:var(--ink-soft)}
.ideacard__hot b{color:#e7cd97}
@media (max-width:860px){
  .ideasec{grid-template-columns:1fr}
  .ideasec__media{height:300px;margin-bottom:3.8rem}
  .ideacard{inset-inline-start:.9rem;bottom:-3rem}
}


/* ==========================================================================
   CONTACT polish — channel cards get the site finish (champagne hairline,
   icon glow on hover) and the Call card carries a LIVE desk state computed
   from real Cairo hours (10:00-17:00). "Talk to a Human" — and we know
   if the human is there.
   ========================================================================== */
.ccards--pro .ccard{position:relative;overflow:hidden}
.ccards--pro .ccard::before{content:"";position:absolute;left:20%;right:20%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(231,205,151,.55),transparent)}
.ccards--pro .ccard:hover{box-shadow:0 26px 50px -22px rgba(3,6,18,.85)}
.ccards--pro .ccard:hover .ccard__ico{box-shadow:0 0 22px rgba(252,192,48,.35)}
.ccard__ico{transition:box-shadow .4s ease}
.ccard__live{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;
  border-radius:20px;padding:.28rem .8rem;font-family:var(--sans);font-size:.64rem;
  font-weight:600;letter-spacing:.06em}
.ccard__live i{width:6px;height:6px;border-radius:50%;font-style:normal}
.ccard__live em{font-style:normal}
.ccard__live--on{background:rgba(57,217,138,.13);border:1px solid rgba(57,217,138,.45);color:#7ff0b6}
.ccard__live--on i{background:#39d98a;box-shadow:0 0 8px #39d98a;animation:ccl-pulse 2.2s ease-out infinite}
.ccard__live--off{background:rgba(231,161,58,.12);border:1px solid rgba(231,161,58,.4);color:#e9c084}
.ccard__live--off i{background:#e7a13a;box-shadow:0 0 6px rgba(231,161,58,.6)}
@keyframes ccl-pulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.5)}70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
@media (prefers-reduced-motion:reduce){.ccard__live--on i{animation:none}}

/* ==========================================================================
   FRAMES RETIRED (site-wide, 2026-07-09) — the ornamental photo frames
   (arch / lens / scoop corners + inner hairline outlines + offset borders)
   are replaced everywhere by the site's clean contained style: simple
   16px radius + soft depth shadow. Covers weddings, groups and any
   remaining split/welcome media without touching page markup.
   ========================================================================== */
.split-lux__media,
.split-lux--rev .split-lux__media,
.split-lux__media.fr-arch,
.split-lux__media.fr-lens,
.split-lux__media.fr-clean{border-radius:16px}
.split-lux__media.fr-arch::after,
.split-lux__media.fr-lens::after,
.split-lux__media.fr-clean::after,
.split-lux__media::after{display:none}
.welcome__media::before{display:none}
.welcome__main{border-radius:16px}
.welcome__inset{border-radius:14px;border:0;box-shadow:0 26px 60px rgba(0,0,0,.5)}
.split-lux__media{box-shadow:0 30px 60px -26px rgba(3,6,18,.75)}


/* ==========================================================================
   WEDDINGS & GROUPS magic pass — the vow card (live golden-hour/sunset times
   from pure solar math, no API) + a reusable breathing gold button.
   ========================================================================== */
.vowcard{position:absolute;inset-inline-start:1rem;bottom:1rem;z-index:3;
  background:rgba(8,13,32,.9);border:1px solid rgba(231,205,151,.45);border-radius:14px;
  padding:.9rem 1.05rem;min-width:232px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 22px 44px -18px rgba(3,6,18,.85)}
.vowcard::before{content:"";position:absolute;left:20%;right:20%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#e7cd97,transparent)}
.vowcard__t{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:#e7cd97;margin-bottom:.6rem}
.vowcard__t i{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);font-style:normal;animation:strail-pulse 2.4s ease-out infinite}
.vowcard__row{display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);
  font-size:.75rem;color:#cdd7ea;padding:.32rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.vowcard__row b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.vowcard__note{margin:.55rem 0 0;font-family:var(--serif);font-style:italic;font-size:.78rem;
  color:#e7cd97;line-height:1.5}
.btn--breathe{animation:gh-breathe 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vowcard__t i,.btn--breathe{animation:none}}

/* ==========================================================================
   RESPONSIVE FINAL PASS — fixes (2026-07-09)
   1) /book: date inputs' intrinsic min-width forced a 433px layout viewport
      on phones (page zoomed out). Grids clamp with minmax(0,1fr) and all
      form controls may shrink.
   2) Tap targets: nav hamburger, fan arrows/dots, gallery filters and the
      condo tabs now meet the 44px hit-area guideline (visuals unchanged —
      hit area grows via padding/pseudo, not size).
   ========================================================================== */
.bf-grid2,.inqform .bf-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bf-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.bf-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bookform input,.bookform select,.inqform input,.inqform select{min-width:0;max-width:100%}
input[type="date"]{min-width:0}

.nav__toggle{position:relative;padding:14px 10px;margin:-14px -10px}
.fandeck__arrow{min-width:46px}
.fandeck__dot{position:relative}
.fandeck__dot::after{content:"";position:absolute;inset:-14px}
.galfilters button{padding-top:.65rem;padding-bottom:.65rem;min-height:40px}
.ideacard__tabs button{min-height:38px}
/* RTL: Arabic reads naturally in plain vertical-rl — remove the 180° flip
   that suits Latin (collapsed expanding-card labels, all states) */
html[dir=rtl] .expand-card__label{transform:none}
html[dir=rtl] .expand-row:hover .expand-card .expand-card__label{transform:none}

/* ==========================================================================
   MOBILE POLISH PASS (2026-07-18) — phones only, desktop pixel-identical.
   1 floats shrink · 2 sunband un-overlap + trail fade · 3 ideacard stacks ·
   4 band scrims + rhythm · 5 balanced text wrapping
   ========================================================================== */
@media (max-width:700px){
  /* 5 — text flow: no single-word orphan lines, balanced headlines */
  h1,h2,h3,.display{text-wrap:balance}
  p{text-wrap:pretty}

  /* 1 — floating buttons: lighter footprint, calmer glow */
  .book-float{right:.9rem;bottom:.9rem;gap:.6rem}
  .book-float__btn{width:46px;height:46px;
    box-shadow:0 8px 20px -8px rgba(252,192,48,.5),0 0 16px -8px rgba(252,192,48,.4)}
  .book-float__btn svg{width:19px;height:19px}
  .book-float__btn::before,.book-float__btn::after{animation-name:bkf-ring-m}
  html[dir=rtl] .book-float{left:.9rem;right:auto}
  .concierge{bottom:.9rem;left:.9rem}
  .cg-fab{width:42px;height:42px}
  .cg-fab svg{width:18px;height:18px}

  /* 4 — photo bands: stronger scrim behind centered copy, steady rhythm */
  .band{padding:4.4rem 0}
  .band::before{background:linear-gradient(rgba(8,11,18,.52),rgba(8,11,18,.76))}
  .band--deep::before{background:linear-gradient(rgba(8,11,18,.7),rgba(8,11,18,.88))}

  /* 2 — sunband: copy flows below the clock row; disc pinned to the sky
     strip (beats the JS-driven inline top); soft scrim so the seam never
     cuts through readable text */
  .sunband{height:auto;min-height:0}
  .sunband__tx{position:relative;inset:auto;padding:8.4rem 1.3rem 3.4rem;
    background:radial-gradient(ellipse 100% 58% at 50% 56%,rgba(5,9,24,.52),transparent 74%)}
  .sunband__sun{top:114px!important}

  /* 2b — gold trail line fades out before the closing CTA */
  .strail__rails{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 260px),transparent calc(100% - 100px));
    mask-image:linear-gradient(180deg,#000 calc(100% - 260px),transparent calc(100% - 100px))}
}
@keyframes bkf-ring-m{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@media (max-width:640px){
  /* 3 — residences spec card: photo first, card below, zero overlap */
  .ideasec__media{height:auto;margin-bottom:0;display:flex;flex-direction:column;gap:1rem}
  .ideasec__img{position:relative;inset:auto;height:250px}
  .ideacard{position:relative;inset-inline-start:auto;bottom:auto;width:100%}
}

/* RTL rating stars: anchor the gold fill to the right edge so it lines up
   glyph-for-glyph over the base row and clips the leftmost (5th) star —
   mirror of the LTR behaviour. */
html[dir=rtl] .ratemerge__fill{left:auto;right:0;text-align:right}