/* ==========================================================================
   SITE FRAMEWORK - shared motion + polish layer (vanilla, no libraries).
   ========================================================================== *
   RESKIN SURFACE: change the tokens below per project, then the whole system
   re-colours and re-types. Token names are kept neutral on purpose. The engine
   mechanics (loader, nav, reveal, scroll, video, reel, reduced-motion) below
   should stay intact; restyle components freely. See references/design-system.md.
   The benchmark values (a teal/gold/cream hotel) are left as a worked example.
   ========================================================================== */

:root{
  /* --- COLOUR: The Next Chapter Life Coaching (sampled from the logo) --- */
  --teal:#3f4c3e;      /* deep sage: primary dark surface */
  --teal-deep:#2e3a2e; /* deepest sage: footer / panels   */
  --gold:#b0798c;      /* dusty pink: primary accent      */
  --gold-lt:#e3bcc8;   /* light rose: glows and gradients */
  --gold-ink:#92556a;  /* deep rose, passes contrast on cream */
  --blush:#c08a99;     /* secondary brand accent (from her ad) */
  --sage:#8e9578;      /* mid leaf green from the logo    */
  --cream:#faf3ed;     /* page ground, matches logo bg    */
  --sand:#f1e9de;      /* alt section ground              */
  --ink:#333a31;       /* body text                       */
  /* --- TYPE --- */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Karla',system-ui,sans-serif;
  --font-script:'Parisienne',cursive;
  /* --- RADIUS --- */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  /* --- MOTION: organic / warm, long and soft --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* keep page from showing a scroll-jump under the fixed bars */
html{scroll-behavior:smooth;}
body{opacity:1;}

/* ------------------------------------------------------------------ *
 * 1. LOADING SCREEN
 * ------------------------------------------------------------------ */
#bc-loader{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--cream);
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#bc-loader .ld-mark{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,6vw,52px); color:var(--teal); letter-spacing:.5px;
  display:flex; overflow:hidden;
}
#bc-loader .ld-mark span{
  display:inline-block; transform:translateY(110%);
  animation:ldRise .7s var(--ease-out) forwards;
}
#bc-loader .ld-kick{
  font-size:11px; letter-spacing:6px; text-transform:uppercase; color:var(--gold);
  margin-top:10px; opacity:0; animation:ldFade .6s ease .5s forwards;
}
#bc-loader .ld-bar{
  margin-top:22px; width:min(220px,46vw); height:2px;
  background:rgba(176,121,140,.25); overflow:hidden; border-radius:2px;
}
#bc-loader .ld-bar i{
  display:block; height:100%; width:40%; background:var(--gold);
  animation:ldSweep 1.1s var(--ease) infinite;
}
@keyframes ldRise{to{transform:translateY(0);}}
@keyframes ldFade{to{opacity:1;}}
@keyframes ldSweep{0%{transform:translateX(-110%);}100%{transform:translateX(360%);}}
body.bc-loaded #bc-loader{opacity:0; visibility:hidden;}

/* ------------------------------------------------------------------ *
 * 2. SCROLL PROGRESS BAR (top, gold)
 * ------------------------------------------------------------------ */
#bc-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  z-index:1200; transition:width .08s linear; pointer-events:none;
}

/* ------------------------------------------------------------------ *
 * 3. HEADER / NAV (condense + hide on scroll)
 * ------------------------------------------------------------------ */
.bc-head{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(250,243,237,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(231,222,208,.9);
  transform:translateY(0);
  transition:transform .45s var(--ease), background .35s ease,
             padding .35s ease, box-shadow .35s ease;
}
.bc-head.is-hidden{transform:translateY(-103%);}
.bc-head.is-condensed{
  background:rgba(250,243,237,.96);
  box-shadow:0 8px 30px -18px rgba(45,58,45,.5);
}
.bc-head .nav-row{
  position:relative; z-index:80;
  max-width:1240px; margin:0 auto;
  padding:18px clamp(20px,5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .35s ease;
}
.bc-head.is-condensed .nav-row{padding-top:11px; padding-bottom:11px;}
/* spacer so fixed header doesn't cover content */
.bc-headspace{height:74px;}
@media(max-width:880px){.bc-headspace{height:66px;}}

/* animated wordmark logo */
.bc-logo{text-decoration:none; display:inline-flex; flex-direction:column; line-height:1; position:relative;}
.bc-logo .wm{
  font-family:var(--font-display); font-size:26px; font-weight:600;
  letter-spacing:.5px; color:var(--teal); display:flex; position:relative;
}
.bc-logo .wm span{
  display:inline-block; transform:translateY(115%); opacity:0;
  animation:wmRise .62s var(--ease-out) forwards;
}
.bc-logo .rule{
  display:block; height:1.5px; background:var(--gold); width:0;
  margin-top:5px; animation:wmRule .8s var(--ease) .45s forwards;
}
.bc-logo .kick{
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  margin-top:5px; opacity:0; animation:wmKick .7s ease .55s forwards;
}
/* gold shimmer on hover */
.bc-logo .wm::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(227,188,200,.85) 50%,transparent 70%);
  background-size:220% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text;
  mix-blend-mode:screen; opacity:0;
}
.bc-logo:hover .wm::after{opacity:1; animation:wmShimmer .9s ease forwards;}
@keyframes wmRise{to{transform:translateY(0); opacity:1;}}
@keyframes wmRule{to{width:100%;}}
@keyframes wmKick{from{letter-spacing:2px;}to{opacity:1; letter-spacing:5px;}}
@keyframes wmShimmer{0%{background-position:180% 0;}100%{background-position:-80% 0;}}

.bc-nav{display:flex; align-items:center; gap:30px;}
.navlink{
  position:relative; text-decoration:none; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:500; color:#3a4947; padding:6px 0;
}
.navlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.navlink:hover::after, .navlink.active::after{width:100%;}
.navlink.active{color:var(--teal);}

/* hamburger */
.bc-burger{
  display:none; width:30px; height:22px; position:relative; background:none;
  border:0; cursor:pointer; padding:0;
}
.bc-burger span{
  position:absolute; left:0; right:0; height:2px; background:var(--teal);
  transition:transform .35s var(--ease), opacity .25s ease, top .35s var(--ease);
}
.bc-burger span:nth-child(1){top:2px;}
.bc-burger span:nth-child(2){top:10px;}
.bc-burger span:nth-child(3){top:18px;}
.bc-burger.open span:nth-child(1){top:10px; transform:rotate(45deg);}
.bc-burger.open span:nth-child(2){opacity:0;}
.bc-burger.open span:nth-child(3){top:10px; transform:rotate(-45deg);}

/* mobile full-screen overlay menu */
.bc-mobile{
  display:none; position:fixed; inset:0; height:100dvh; z-index:60;
  background:var(--cream); transform:translateY(-101%); visibility:hidden;
  transition:transform .55s var(--ease), visibility 0s linear .55s;
}
.bc-mobile.open{ transform:translateY(0); visibility:visible; transition:transform .55s var(--ease); }
.bc-mobile .inner{
  height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:96px clamp(28px,8vw,56px) max(32px,env(safe-area-inset-bottom)); gap:2px;
}
.bc-mobile a{
  text-decoration:none; color:var(--teal); font-family:var(--font-display);
  font-size:clamp(28px,8vw,40px); font-weight:500; line-height:1.1; letter-spacing:0;
  padding:14px 0; border-bottom:1px solid rgba(176,121,140,.22);
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.bc-mobile.open a{opacity:1; transform:none;}
.bc-mobile.open a:nth-child(1){transition-delay:.10s}
.bc-mobile.open a:nth-child(2){transition-delay:.16s}
.bc-mobile.open a:nth-child(3){transition-delay:.22s}
.bc-mobile.open a:nth-child(4){transition-delay:.28s}
.bc-mobile.open a:nth-child(5){transition-delay:.34s}
.bc-mobile.open a:nth-child(6){transition-delay:.40s}
.bc-mobile a:last-child{
  border-bottom:0; margin-top:26px; align-self:flex-start;
  font-family:var(--font-body); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  font-weight:600; color:#fff; background:var(--gold); padding:15px 30px; border-radius:2px;
}
@media(max-width:880px){
  .bc-nav{display:none;}
  .bc-burger{display:block; position:relative; z-index:80;}
  .bc-mobile{display:block;}
}

/* ------------------------------------------------------------------ *
 * 4. BUTTONS - gold fill-sweep + sliding arrow + lift + focus ring
 * ------------------------------------------------------------------ */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  text-decoration:none; border:0; font-family:inherit;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), color .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(45,58,45,.7);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn .arr{
  width:0; opacity:0; overflow:hidden; display:inline-block;
  transition:width .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
.btn:hover .arr{width:1em; opacity:1; margin-left:.1em;}
/* per-variant sweep colour */
.btn-teal::before{background:#4d5c4a;}
.btn-gold::before{background:var(--gold-lt);}
.btn-outline::before{background:var(--teal);}
.btn-ghost::before{background:rgba(250,243,237,.26);}
.btn-teal:hover, .btn-gold:hover{color:#fff;}
.btn-outline:hover{color:var(--cream);}
.btn:hover::before{transform:scaleX(1);}
.btn-gold:hover{color:var(--teal);}

/* focus ring (keyboard) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .navlink:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ------------------------------------------------------------------ *
 * 5. REVEAL ON SCROLL
 * ------------------------------------------------------------------ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}
.reveal[data-d="5"]{transition-delay:.40s;}

/* editorial image clip-reveal */
.img-reveal{clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease-out);}
.img-reveal.in{clip-path:inset(0 0 0 0);}
.img-zoom{overflow:hidden;}
.img-zoom img, .img-zoom .bg{transition:transform 1.1s var(--ease-out);}
.img-zoom:hover img, .img-zoom:hover .bg{transform:scale(1.06);}

/* ------------------------------------------------------------------ *
 * 6. HERO - ken burns + parallax + video
 * ------------------------------------------------------------------ */
.bc-hero{position:relative; overflow:hidden;}
.bc-hero .hero-bg{
  position:absolute; inset:-8% -4%; background-size:cover; background-position:center 62%;
  will-change:transform; transform:scale(1.06);
  animation:kenburns 22s var(--ease) both;
}
@keyframes kenburns{
  0%{transform:scale(1.02) translate3d(0,0,0);}
  100%{transform:scale(1.14) translate3d(0,-2.5%,0);}
}
.bc-hero video.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.bc-hero video.hero-video.ready{opacity:1;}
.bc-hero .hero-scrim{position:absolute; inset:0;}
.bc-hero .hero-inner{position:relative; z-index:2;}

/* headline sequence rise-in */
.seq > *{opacity:0; transform:translateY(20px); animation:seqRise .8s var(--ease-out) forwards;}
.seq > *:nth-child(1){animation-delay:.15s;}
.seq > *:nth-child(2){animation-delay:.32s;}
.seq > *:nth-child(3){animation-delay:.49s;}
.seq > *:nth-child(4){animation-delay:.66s;}
@keyframes seqRise{to{opacity:1; transform:none;}}

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:1.5px solid rgba(250,243,237,.7); border-radius:14px;
}
.scroll-cue::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:8px; border-radius:2px;
  background:var(--cream); transform:translateX(-50%);
  animation:cue 1.7s var(--ease) infinite;
}
@keyframes cue{0%{opacity:0; top:8px;}30%{opacity:1;}60%{opacity:1; top:22px;}100%{opacity:0; top:22px;}}

/* ------------------------------------------------------------------ *
 * 7. PINNED HORIZONTAL ROOMS GALLERY
 * ------------------------------------------------------------------ */
.h-rooms{position:relative; background:var(--cream);}
.h-pin{height:100vh; position:sticky; top:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.h-head{max-width:1240px; margin:0 auto; width:100%; padding:0 clamp(20px,5vw,56px) 22px;}
.h-viewport{overflow:hidden; width:100%;}
.h-track{display:flex; gap:clamp(20px,2.4vw,34px); padding:0 clamp(20px,5vw,56px); will-change:transform;}
.h-card{
  flex:0 0 clamp(280px,32vw,420px); background:#fff; border:1px solid #e7ded0;
  border-radius:4px; overflow:hidden; display:flex; flex-direction:column;
}
.h-card .ph{position:relative; aspect-ratio:16/11; overflow:hidden;}
.h-card .ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease-out);}
.h-card:hover .ph img{transform:scale(1.05);}
.h-card .tag{
  position:absolute; top:14px; left:14px; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:600; color:var(--teal);
  background:rgba(250,243,237,.94); padding:6px 12px; border-radius:2px;
}
.h-card .bd{padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; flex:1;}
.h-rail{
  max-width:1240px; margin:22px auto 0; width:100%;
  padding:0 clamp(20px,5vw,56px); display:flex; align-items:center; gap:16px;
}
.h-rail .track{flex:1; height:3px; background:rgba(176,121,140,.22); border-radius:2px; overflow:hidden;}
.h-rail .track i{display:block; height:100%; width:18%; background:var(--gold); border-radius:2px; transition:transform .1s linear;}
.h-rail .cue{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#8f7f5c;}

/* mobile fallback: native snap carousel */
@media(max-width:880px){
  .h-pin{height:auto; position:static; padding:clamp(48px,7vw,72px) 0;}
  .h-viewport{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
  .h-track{transform:none !important;}
  .h-card{scroll-snap-align:center; flex-basis:82vw;}
  .h-rail{display:none;}
}

/* ------------------------------------------------------------------ *
 * 8. SELECT-ROOM BUTTON
 * ------------------------------------------------------------------ */
.sel-wrap{display:flex; flex-direction:column; gap:10px; margin-top:auto;}
.sel-btn{
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  background:transparent; color:var(--teal); border:1px solid var(--teal);
  padding:12px 20px; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  font-weight:600; border-radius:2px; display:inline-flex; align-items:center; gap:.6em;
  font-family:inherit; transition:color .3s var(--ease);
}
.sel-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.sel-btn:hover::before{transform:scaleX(1);} .sel-btn:hover{color:#fff;}
.sel-btn .tick{width:16px; height:16px; flex:none;}
.sel-btn .tick path{stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .45s var(--ease) .05s;}
.sel-btn.is-selected{background:var(--teal); color:#fff; border-color:var(--teal);}
.sel-btn.is-selected::before{transform:scaleX(0);}
.sel-btn.is-selected .tick path{stroke-dashoffset:0;}
.reserve{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s var(--ease), opacity .35s ease;
  text-decoration:none;
}
.reserve.show{max-height:60px; opacity:1;}

/* ------------------------------------------------------------------ *
 * 9. BACK TO TOP
 * ------------------------------------------------------------------ */
#bc-top{
  position:fixed; right:22px; bottom:22px; z-index:900; width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(176,121,140,.6); background:rgba(45,58,45,.9);
  color:var(--cream); cursor:pointer; opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s;
  display:flex; align-items:center; justify-content:center;
}
#bc-top.show{opacity:1; transform:none; pointer-events:auto;}
#bc-top:hover{background:var(--gold);}

/* ------------------------------------------------------------------ *
 * 10. MISC
 * ------------------------------------------------------------------ */
::selection{background:var(--gold-lt); color:var(--teal);}
.foot-logo .wm{font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--cream);}

/* gentle entrance for the whole main on first paint handled by loader,
   so disable the old bcFade to avoid double-animation */
main{animation:none !important;}

/* ------------------------------------------------------------------ *
 * 11. REDUCED MOTION
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .bc-hero .hero-bg{animation:none; transform:none; inset:0;}
  .reveal{opacity:1 !important; transform:none !important;}
  .img-reveal{clip-path:none !important;}
  #bc-loader{display:none !important;}
  .seq > *{opacity:1 !important; transform:none !important;}
  .scroll-cue{display:none;}
}

/* ------------------------------------------------------------------ *
 * 12. BAY SCROLL-PAN HERO (signature)
 * ------------------------------------------------------------------ */
.bay-hero{position:relative; height:230vh; background:#3f4c3e;}
.bay-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:flex-end;}
.bay-pan{
  position:absolute; top:50%; left:0; height:128%; width:auto; min-width:118%;
  transform:translate(0,-50%); will-change:transform;
  background-repeat:no-repeat; background-size:cover; background-position:left center;
}
.bay-hero video.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease;}
.bay-hero video.hero-video.ready{opacity:1;}
.bay-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(38,48,38,.22) 0%,rgba(38,48,38,.12) 42%,rgba(38,48,38,.72) 100%); z-index:2;}
.bay-inner{position:relative; z-index:3; max-width:1240px; width:100%; margin:0 auto; padding:0 clamp(20px,5vw,56px) clamp(64px,9vw,120px); will-change:opacity,transform;}
.bay-tag{display:inline-block; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#fff; background:rgba(176,121,140,.55); padding:7px 14px; border-radius:2px; margin-bottom:18px; backdrop-filter:blur(2px);}
@media(max-width:880px){
  .bay-hero{height:200vh;}
  .bay-pan{height:118%; min-width:200%;}
}
@media (prefers-reduced-motion: reduce){
  .bay-hero{height:88vh;}
  .bay-sticky{position:relative; height:88vh;}
  .bay-pan{transform:translate(0,-50%) !important; min-width:100%; width:100%; height:100%; background-position:center;}
}

/* ------------------------------------------------------------------ *
 * 12. SCROLL-PAN HERO (pans across the bay while pinned)
 * ------------------------------------------------------------------ */
.hero-pinwrap{position:relative; background:#3f4c3e; overflow:visible;}
.hero-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center;}
.hero-pan{
  position:absolute; inset:0; height:100%; width:100%;
  background-size:cover; background-position:center; will-change:transform;
  transform:translateX(0);
}
.hero-pinwrap .hero-inner{position:relative; z-index:2;}
.hero-pinwrap .hero-scrim{position:absolute; inset:0; z-index:1;}
/* a soft cursor-follow glow lives here too (set via JS custom props) */
.hero-glow{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.0; transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(227,188,200,.22), transparent 60%);}
.hero-sticky:hover .hero-glow{opacity:1;}

@media(max-width:880px){
  .hero-pinwrap{height:auto !important;}
  .hero-sticky{position:relative; height:88vh;}
  .hero-pan{width:100% !important; transform:none !important;}
}


/* ------------------------------------------------------------------ *
 * 13. FULL-WIDTH VIDEO BAND (graceful: poster/bg image until clip drops in)
 * ------------------------------------------------------------------ */
.vid-band{position:relative; min-height:62vh; display:flex; align-items:center; overflow:hidden;
  background-size:cover; background-position:center; background-color:#3f4c3e;}
.vid-band .vid-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease;}
.vid-band .vid-bg.ready{opacity:1;}
.vid-band .vid-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(38,48,38,.74) 0%,rgba(38,48,38,.42) 45%,rgba(38,48,38,.18) 100%);}
.vid-band .vid-copy{position:relative; z-index:2; max-width:1240px; width:100%; margin:0 auto;
  padding:clamp(48px,7vw,90px) clamp(20px,5vw,56px); color:#fff;}

/* ================================================================== *
 * 14. PIZZAZZ LAYER
 * ================================================================== */
/* -- live almanac strip -- */
.almanac{background:var(--sand); border-top:1px solid #e7ded0; border-bottom:1px solid #e7ded0;}
.almanac .inner{max-width:1240px; margin:0 auto; padding:16px clamp(20px,5vw,56px);
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,52px); flex-wrap:wrap;}
.almanac .it{display:flex; align-items:center; gap:11px;}
.almanac .it svg{width:20px; height:20px; flex:none; color:var(--gold);}
.almanac .lbl{text-transform:uppercase; letter-spacing:2px; font-size:10px; color:var(--gold); font-weight:700; display:block; margin-bottom:1px;}
.almanac .val{font-family:var(--font-display); font-size:20px; color:var(--teal); font-weight:600; line-height:1;}
.almanac .sep{width:1px; height:30px; background:#ded2c1;}
@media(max-width:600px){.almanac .sep{display:none;}}

/* -- animated wave divider -- */
.wave-divider{line-height:0; background:transparent; overflow:hidden;}
.wave-divider svg{display:block; width:100%; height:46px;}
.wave-divider .w{fill:none; stroke:var(--gold); stroke-width:1.6; opacity:.5;
  animation:waveDrift 11s linear infinite;}
.wave-divider .w.w2{stroke:var(--sage); opacity:.32; animation-duration:16s;}
@keyframes waveDrift{from{transform:translateX(0);} to{transform:translateX(-60px);}}

/* -- count-up stats band -- */
.stats{background:var(--teal); color:#fff; position:relative; overflow:hidden;}
.stats .inner{max-width:1240px; margin:0 auto; padding:clamp(46px,6vw,78px) clamp(20px,5vw,56px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; position:relative; z-index:2;}
.stats .n{font-family:var(--font-display); font-size:clamp(40px,5vw,66px); font-weight:600; line-height:1; color:#fff;}
.stats .n .suf{color:var(--gold-lt);}
.stats .c{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#cdd4c4; margin-top:12px;}
.stats .divv{position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(227,188,200,.5),transparent);}
@media(max-width:880px){.stats .inner{grid-template-columns:1fr 1fr; gap:34px 16px;}}

/* -- heading shimmer on reveal -- */
.shimmer.in{background:linear-gradient(105deg,var(--teal) 40%,var(--gold) 50%,var(--teal) 60%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:headShimmer 1.3s var(--ease) .2s 1 forwards;}
@keyframes headShimmer{from{background-position:150% 0;} to{background-position:-40% 0;}}

/* ================================================================== *
 * 15. CINEMATIC LAYER  (hero pan+zoom video, crossfade reel)
 * ================================================================== */
/* hero: a single moving layer holding poster + video, panned & zoomed by JS */
.hero-move{position:absolute; top:0; left:0; height:100%; width:135%; will-change:transform; transform-origin:center center; z-index:0;}
.hero-pan-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.bc-hero .hero-move video.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease;}
.bc-hero .hero-move video.hero-video.ready{opacity:1;}
.hero-pinwrap .hero-glow{z-index:1;}
.hero-pinwrap .hero-scrim{z-index:1;}
.hero-pinwrap .hero-inner{z-index:2; will-change:transform,opacity; padding-top:clamp(96px,12vh,150px); padding-bottom:clamp(40px,6vh,80px);}
.hero-pinwrap .scroll-cue{z-index:3;}

/* crossfade reel: pinned, images blend + zoom as you scroll */
.reel{position:relative; background:#29342a;}
.reel-stage{position:sticky; top:0; height:100vh; overflow:hidden;}
.reel-frame{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; will-change:opacity,transform;}
.reel-frame .reel-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease;}
.reel-frame .reel-vid.ready{opacity:1;}
.reel-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(32,40,32,.15),rgba(32,40,32,.66));}
.reel-cap{position:absolute; left:0; right:0; bottom:0; z-index:3;
  max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,56px) clamp(48px,7vw,88px);}
.reel-cap .row{position:absolute; left:clamp(20px,5vw,56px); right:clamp(20px,5vw,56px); bottom:clamp(48px,7vw,88px);
  opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.reel-cap .row.on{opacity:1; transform:none;}
.reel-cap .k{text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold-lt); font-weight:700; margin:0 0 12px;}
.reel-cap h3{font-family:var(--font-display); font-weight:500; color:#fff; font-size:clamp(30px,5vw,60px); line-height:1.04; margin:0 0 10px; max-width:18ch;}
.reel-cap p{color:#e9ebe3; font-size:clamp(15px,1.5vw,19px); line-height:1.6; max-width:42ch; margin:0;}
.reel-rail{position:absolute; top:50%; right:clamp(16px,3vw,34px); transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:10px;}
.reel-rail i{width:8px; height:8px; border-radius:50%; background:rgba(250,243,237,.35); transition:background .3s, transform .3s;}
.reel-rail i.on{background:var(--gold); transform:scale(1.4);}
@media(max-width:880px){ .reel-stage{height:86vh;} .reel-rail{display:none;} }

/* zoom-settle reveal for editorial images */
.zoom-in{overflow:hidden;}
.zoom-in > img, .zoom-in > .bg{transform:scale(1.16); transition:transform 1.4s var(--ease-out);}
.zoom-in.in > img, .zoom-in.in > .bg{transform:scale(1);}

/* ================================================================== *
 * 16. ROUNDED SOFTENING LAYER  (softer, friendlier geometry)
 * ================================================================== */
:root{ --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px; }

/* buttons -> pill (overrides any small inline radius like the reserve CTA) */
.btn{ border-radius:var(--r-pill) !important; }
.sel-btn{ border-radius:var(--r-pill); }

/* tag / eyebrow pills */
.bay-tag, .h-card .tag{ border-radius:var(--r-pill); }

/* room gallery cards + soft float */
.h-card{ border-radius:var(--r-lg); box-shadow:0 22px 48px -34px rgba(45,58,45,.45); }

/* progress + rail bars -> fully rounded */
#bc-loader .ld-bar, .h-rail .track, .h-rail .track i{ border-radius:var(--r-pill); }

/* content / feature grids -> unified rounded panels */
.grid-2, .grid-3, .grid-4{ border-radius:var(--r-lg); overflow:hidden; }

/* mobile menu CTA */
.bc-mobile a:last-child{ border-radius:var(--r-pill); }

/* softer keyboard focus ring */
a:focus-visible, button:focus-visible, .btn:focus-visible, .navlink:focus-visible{ border-radius:var(--r-sm); }

/* back-to-top stays a circle; reel dots stay round (unchanged) */

/* ================================================================== *
 * 17. SOFTENED FEATURE + STATS  (gradients, rounding, ambient drift)
 * ================================================================== */

/* -- stats: floating rounded panel on a warm ground -- */
.stats{ background:linear-gradient(180deg,#faf3ed 0%,#f2eade 100%); padding:clamp(26px,5vw,64px) clamp(18px,5vw,56px); overflow:visible; }
.stats .divv{ display:none; }
.stats .inner{
  position:relative; z-index:1; overflow:hidden;
  border-radius:clamp(20px,3vw,30px);
  padding:clamp(52px,6vw,84px) clamp(28px,5vw,64px);
  background:
    radial-gradient(120% 140% at 82% 12%, rgba(176,121,140,.16), transparent 60%),
    linear-gradient(135deg,#29342a 0%,#3f4c3e 52%,#46543f 100%);
  box-shadow:0 34px 70px -44px rgba(38,48,38,.75), inset 0 1px 0 rgba(250,243,237,.06);
}
.stats .inner::before, .stats .inner::after{ content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.stats .inner::before{
  width:62%; height:170%; left:-12%; top:-34%;
  background:radial-gradient(closest-side, rgba(227,188,200,.22), transparent 72%);
  animation:auroraDriftA 24s var(--ease) infinite alternate;
}
.stats .inner::after{
  width:58%; height:160%; right:-10%; bottom:-36%;
  background:radial-gradient(closest-side, rgba(192,138,153,.18), transparent 72%);
  animation:auroraDriftB 30s var(--ease) infinite alternate;
}
.stats .inner > div{ position:relative; z-index:1; }
@keyframes auroraDriftA{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(16%,9%,0) scale(1.08);} }
@keyframes auroraDriftB{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-13%,-11%,0) scale(1.10);} }

/* -- feature section: subtle warm gradient + slow ambient glow -- */
.feature-sec{
  background:linear-gradient(180deg,#f4ece1 0%,#f1e9de 52%,#eae0d2 100%) !important;
  position:relative; overflow:hidden;
}
.feature-sec::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:55%; height:60%; top:-8%; right:-6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(176,121,140,.12), transparent 70%);
  animation:auroraDriftB 34s var(--ease) infinite alternate;
}

/* -- feature grid: hairline cells -> soft floating cards -- */
.feature-grid{ background:transparent !important; border:0 !important; gap:clamp(14px,1.6vw,20px) !important; overflow:visible !important; border-radius:0 !important; }
.feature-grid > div{
  background:linear-gradient(158deg,#fdf8f1 0%,#f3ece0 100%) !important;
  border:1px solid rgba(176,121,140,.18);
  border-radius:18px; position:relative; overflow:hidden;
  box-shadow:0 12px 32px -26px rgba(45,58,45,.45);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s ease;
}
.feature-grid > div::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-lt));
  transform:scaleY(0); transform-origin:top; transition:transform .55s var(--ease-out);
}
.feature-grid > div::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(130% 120% at 0% 0%, rgba(176,121,140,.10), transparent 55%);
  transition:opacity .55s ease;
}
.feature-grid > div:hover{ transform:translateY(-5px); box-shadow:0 30px 56px -32px rgba(45,58,45,.5); border-color:rgba(176,121,140,.4); }
.feature-grid > div:hover::before{ transform:scaleY(1); }
.feature-grid > div:hover::after{ opacity:1; }
.feature-grid > div > *{ position:relative; z-index:1; }

/* ================================================================== *
 * 18. CROSS-PAGE POLISH  (teal panels, soft lists, cards, warm grounds)
 * ================================================================== */

/* -- teal panels: gradient + ambient aurora glow -- */
.teal-panel{ position:relative; overflow:hidden;
  background:
    radial-gradient(120% 150% at 84% 12%, rgba(176,121,140,.16), transparent 56%),
    linear-gradient(135deg,#29342a 0%,#3f4c3e 54%,#46543f 100%) !important; }
.teal-panel::before, .teal-panel::after{ content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.teal-panel::before{ width:60%;height:170%;left:-12%;top:-34%; background:radial-gradient(closest-side,rgba(227,188,200,.18),transparent 72%); animation:auroraDriftA 26s var(--ease) infinite alternate; }
.teal-panel::after{ width:56%;height:160%;right:-10%;bottom:-34%; background:radial-gradient(closest-side,rgba(192,138,153,.15),transparent 72%); animation:auroraDriftB 32s var(--ease) infinite alternate; }
.teal-panel > *{ position:relative; z-index:1; }

/* -- location list: hairline rows -> soft cards -- */
.loc-list{ overflow:visible !important; border-radius:0 !important; }
.loc-list > div{ border-bottom:0 !important; padding:15px 17px !important; align-items:flex-start !important; gap:13px !important;
  background:linear-gradient(158deg,#fdf8f1,#f3ece0); border:1px solid rgba(176,121,140,.16); border-radius:14px;
  box-shadow:0 10px 26px -24px rgba(45,58,45,.4);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .4s ease; }
.loc-list > div:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(45,58,45,.5); border-color:rgba(176,121,140,.36); }
.loc-list > div > span{ width:9px !important; height:9px !important; margin-top:6px !important; transform:none !important;
  background:radial-gradient(circle at 35% 35%, var(--gold-lt), var(--gold)) !important; box-shadow:0 0 0 4px rgba(176,121,140,.12); }

/* -- contact info: hairline stack -> one soft card with soft dividers -- */
.info-card{ background:linear-gradient(158deg,#fdf8f1,#f3ece0); border:1px solid rgba(176,121,140,.16);
  border-radius:18px; padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,32px);
  box-shadow:0 16px 40px -30px rgba(45,58,45,.45); }
.info-card > div{ border-bottom:1px solid rgba(176,121,140,.2) !important; padding-bottom:18px !important; }
.info-card > div:last-child{ border-bottom:0 !important; padding-bottom:0 !important; }

/* -- facility cards: soft gradient + hover lift -- */
.fac-grid{ overflow:visible !important; border-radius:0 !important; }
.fac-grid > div{ background:linear-gradient(160deg,#ffffff,#f7f1e6) !important; border:1px solid rgba(176,121,140,.18) !important;
  border-radius:18px !important; box-shadow:0 12px 32px -26px rgba(45,58,45,.45);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s ease; }
.fac-grid > div:hover{ transform:translateY(-5px); box-shadow:0 30px 56px -32px rgba(45,58,45,.5); border-color:rgba(176,121,140,.4); }

/* -- amenity chips -> soft cards -- */
.amenity-grid{ overflow:visible !important; border-radius:0 !important; }
.amenity-grid > div{ background:linear-gradient(158deg,#fdf8f1,#f3ece0) !important; border:1px solid rgba(176,121,140,.18) !important;
  border-radius:14px !important; box-shadow:0 8px 22px -22px rgba(45,58,45,.4);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .35s ease; }
.amenity-grid > div:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(45,58,45,.48); border-color:rgba(176,121,140,.4); }

/* -- flat sand headers -> subtle warm gradient + faint glow -- */
.warm-sec{ position:relative; overflow:hidden; background:linear-gradient(180deg,#f4ece1 0%,#f1e9de 60%,#eae0d2 100%) !important; }
.warm-sec::before{ content:""; position:absolute; z-index:0; pointer-events:none; width:55%; height:130%; top:-12%; right:-6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(176,121,140,.1), transparent 70%); animation:auroraDriftB 34s var(--ease) infinite alternate; }
.warm-sec > *{ position:relative; z-index:1; }