/* sections.css — layout for each block */

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.18);will-change:transform;
  filter:brightness(.66) contrast(1.06) saturate(1.04)}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.62) 0%,rgba(11,11,12,.12) 34%,rgba(11,11,12,.92) 100%),
    linear-gradient(96deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.28) 46%,rgba(11,11,12,0) 78%)}
.hero__inner{position:relative;padding:0 var(--pad) clamp(56px,10vh,110px);max-width:1400px}
.hero__inner .eyebrow{margin-bottom:clamp(18px,3vh,30px)}
.hero__sub{margin-top:clamp(20px,3vh,34px);max-width:34ch;
  font-size:clamp(1rem,1.5vw,1.22rem);color:var(--bone-dim)}
.hero__cue{position:absolute;right:var(--pad);bottom:clamp(56px,10vh,110px);
  display:flex;align-items:center;gap:12px;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim)}
.hero__cue span{display:block;width:46px;height:1px;background:var(--bone-faint);position:relative;overflow:hidden}
.hero__cue span::after{content:"";position:absolute;inset:0;background:var(--clay);
  animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- INTRO ---------- */
.intro{padding:clamp(90px,16vh,170px) var(--pad)}
.intro__lede{font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.34;letter-spacing:-.005em;
  max-width:30ch}
@media (min-width:900px){
  .intro__lede{margin-left:auto;margin-right:0;max-width:34ch}
}
.intro__lede .ln{display:inline-block;overflow:hidden;vertical-align:bottom}
.intro__lede .ln > i{display:inline-block;font-style:inherit;
  transform:translateY(105%);transition:transform 1s var(--ease)}
.intro__lede .ln.is-in > i{transform:none}

/* ---------- PINNED CHAPTERS ---------- */
.chapters{position:relative;background:var(--ink-2)}
.chapters__track{height:520vh}
.chapters__sticky{position:sticky;top:0;height:100svh;overflow:hidden}

/* own stacking context so the frames layer among themselves, under the scrim */
.chapters__stage{position:absolute;inset:0;z-index:0}
.chap{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform}
.chap img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) contrast(1.06) saturate(1.02)}
.chap:first-child{opacity:1}
.chapters__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(94deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.5) 38%,rgba(11,11,12,.06) 82%)}

.chapters__copy{position:absolute;left:var(--pad);bottom:clamp(64px,12vh,120px);
  z-index:2;width:min(430px,74vw);height:clamp(200px,26vh,260px)}
/* the outgoing block leaves before the incoming one lands, so titles never overlap */
.chapcopy{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .22s linear,transform .22s var(--ease);pointer-events:none}
.chapcopy.is-active{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .45s var(--ease) .16s,transform .55s var(--ease) .16s}
.chapcopy__no{display:block;font-size:.66rem;letter-spacing:.3em;color:var(--clay);margin-bottom:14px}
.chapcopy h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.04;margin-bottom:14px}
.chapcopy p{color:var(--bone-dim);max-width:30ch}

.chapters__rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:18px;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.chapters__rail li{display:flex;align-items:center;gap:12px;transition:color .4s}
.chapters__rail li i{display:block;width:22px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.chapters__rail li.is-active{color:var(--bone)}
.chapters__rail li.is-active i{width:52px;background:var(--clay)}
@media (max-width:720px){
  .chapters__rail{display:none}
  .chapters__sticky::after{background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.9) 78%)}
  .chapters__copy{width:auto;right:var(--pad)}
}

/* ---------- PROOF ---------- */
.proof{padding:clamp(100px,18vh,200px) var(--pad);text-align:center}
.proof__grid{display:grid;gap:clamp(30px,5vw,60px);margin:clamp(40px,7vh,72px) 0;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.proof__grid{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.8rem,7vw,5rem);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim)}
.proof__note{max-width:52ch;margin:0 auto;color:var(--bone-dim)}

/* ---------- SPLIT PANELS ---------- */
.panels{padding:0 var(--pad) clamp(40px,8vh,90px);display:grid;gap:clamp(60px,10vh,140px)}
.panel{display:grid;gap:clamp(26px,4vw,64px);align-items:center}
@media (min-width:900px){
  .panel{grid-template-columns:1.15fr .85fr}
  .panel--flip .panel__media{order:2}
}
.panel__media{margin:0;overflow:hidden;border-radius:2px}
.panel__media img{width:100%;height:clamp(300px,58vh,660px);object-fit:cover;
  transform:scale(1.14);will-change:transform}
.panel__body .eyebrow{margin-bottom:18px}
.panel__body h3{margin-bottom:16px}
.panel__body p{color:var(--bone-dim);max-width:38ch}

/* ---------- HORIZONTAL RAIL ---------- */
.rail{padding:clamp(90px,15vh,170px) 0;overflow:hidden}
.rail__head{padding:0 var(--pad);margin-bottom:clamp(30px,5vh,56px)}
.rail__head .eyebrow{margin-bottom:14px}
.rail__viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail__viewport::-webkit-scrollbar{display:none}
.rail__track{display:flex;gap:clamp(14px,2vw,26px);padding:0 var(--pad);width:max-content;
  will-change:transform}
.card{margin:0;width:clamp(230px,32vw,400px);flex:0 0 auto}
.card img{width:100%;height:clamp(300px,46vh,520px);object-fit:cover;border-radius:2px}
.card figcaption{margin-top:14px;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-dim)}

/* ---------- CTA ---------- */
.cta{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden}
.cta__media{position:absolute;inset:-12% 0}
.cta__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cta::after{content:"";position:absolute;inset:0;background:rgba(11,11,12,.66)}
.cta__inner{position:relative;z-index:2;padding:clamp(70px,12vh,130px) var(--pad);max-width:1100px}
.cta__inner > p{margin-top:22px;color:var(--bone-dim);max-width:32ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,5vh,48px)}

/* ---------- LIVE 360 PANORAMA ---------- */
.pano{position:relative;background:var(--ink-2)}
.pano__track{height:230vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8)}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.7) 0%,rgba(11,11,12,0) 34%,rgba(11,11,12,.8) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(56px,10vh,110px);z-index:2;pointer-events:none}
.pano__copy .eyebrow{margin-bottom:16px}
.pano__copy h2{max-width:16ch;margin-bottom:18px}
.pano__hint{display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:100px;padding:11px 20px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  background:rgba(11,11,12,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pano__hint i{display:block;width:18px;height:18px;border:1px solid currentColor;
  border-radius:50%;position:relative}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
  animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-120%,-50%)}50%{transform:translate(20%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}

/* ---------- SCROLL BUILD (drawing to material to water) ---------- */
.buildup{position:relative;background:#07080B}
.buildup__track{height:320vh}
.buildup__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.buildup__stage{position:absolute;inset:0;z-index:0}
.buildup__layer{position:absolute;inset:0;margin:0}
.buildup__layer img{width:100%;height:100%;object-fit:cover}
.buildup__layer[data-layer="full"]{opacity:0;will-change:opacity,clip-path}

/* The drawing does NOT cross-fade into the photograph. A cross-fade puts both
   frames on screen at half strength and you get a smeared double exposure.
   Instead the photograph WIPES across the drawing: a soft edge 18 wide travels
   over the frame, so every pixel is either drawing or photograph, never a
   50/50 mix of the whole picture. --wipe runs 0 to 1. */
.buildup__layer[data-layer="grey"]{--wipe:0;will-change:mask-image;
  -webkit-mask-image:linear-gradient(102deg,
    #000 calc(var(--wipe) * 140% - 34%), transparent calc(var(--wipe) * 140% - 16%));
  mask-image:linear-gradient(102deg,
    #000 calc(var(--wipe) * 140% - 34%), transparent calc(var(--wipe) * 140% - 16%))}
.buildup__waterline{position:absolute;left:0;right:0;top:100%;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  box-shadow:0 0 22px rgba(255,255,255,.5);opacity:0;pointer-events:none}
.buildup__sticky::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,11,.62) 0%,rgba(7,8,11,0) 32%,rgba(7,8,11,.86) 100%)}

.buildup__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(84px,14vh,140px);z-index:3;height:clamp(150px,20vh,190px)}
.buildstep{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .22s linear,transform .22s var(--ease);pointer-events:none}
.buildstep.is-active{opacity:1;transform:none;
  transition:opacity .45s var(--ease) .14s,transform .55s var(--ease) .14s}
.buildstep h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.06;margin-bottom:12px}
.buildstep p{color:var(--bone-dim);max-width:40ch}

.buildup__ticks{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(44px,7vh,72px);z-index:3;display:flex;gap:10px}
.buildup__ticks i{flex:1;height:2px;background:rgba(237,232,224,.16);
  transition:background .5s var(--ease)}
.buildup__ticks i.is-active{background:var(--clay)}

.buildup__hint{position:absolute;top:calc(var(--pad) + 46px);left:var(--pad);z-index:3;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint)}

/* The summer/winter switch that lived here was removed on 29 Jul: the winter
   frame was generated rather than photographed. If it ever comes back it needs a
   real winter shoot of this terrace. */

/* The exploded / roof lift section was CUT on 29 Jul. The only exterior photo of
   this hotel is a wide angle three quarter view from the ground, so straight
   slices never lined up with real floors and it read as photo strips sliding
   apart. Hollis Court is the exploded view example instead. To bring this back
   here we need a flat on photo of the facade, shot level with the middle floor. */


/* ---------- ENQUIRE ----------
   The shared form, tinted to this page. Structure lives in leadform.css. */
.lead{
  --lf-bg     : var(--bone);
  --lf-fg     : var(--ink);
  --lf-accent : var(--clay);
  --lf-line   : rgba(11,11,12,.18);
  --lf-muted  : rgba(11,11,12,.60);
}
.lead__btn{color:var(--bone)}