/* =========================================================================
   Home page
   ========================================================================= */

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1400px;
  color: #fff; overflow: hidden; background: var(--night);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__stage { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease-soft); overflow: hidden; }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide.is-leaving { opacity: 1; z-index: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transform-origin: 60% 40%; }
.hero__slide.is-active img, .hero__slide.is-leaving img { animation: kenburns calc(var(--reel-interval, 7000ms) + 2400ms) linear forwards; }
.hero__slide:nth-child(2) img { transform-origin: 40% 50%; }
.hero__slide:nth-child(3) img { transform-origin: 50% 55%; }
@keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1.0); } }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
.has-video .hero__meta .hero__dots, .has-video .hero__caption { display: none; }

.hero__shade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, .42) 0%, rgba(10, 9, 8, 0) 26%),
    linear-gradient(0deg, rgba(10, 9, 8, .74) 0%, rgba(10, 9, 8, .34) 34%, rgba(10, 9, 8, 0) 62%),
    linear-gradient(90deg, rgba(10, 9, 8, .28) 0%, rgba(10, 9, 8, 0) 55%);
}
.hero__content { position: relative; z-index: 5; padding-bottom: clamp(6.5rem, 11vh, 9rem); }
.hero__eyebrow { display: flex; align-items: center; gap: .9rem; color: rgba(255,255,255,.88); margin-bottom: clamp(1.2rem, 2.4vh, 2rem); }
.hero__dot { width: .35rem; height: .35rem; transform: rotate(45deg); background: var(--blush); }
.hero__title { color: #fff; font-size: clamp(3.4rem, 9.6vw, 10.8rem); line-height: .92; }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-top: clamp(.2rem, .8vh, .8rem); }
.hero__at { align-self: flex-start; font-family: var(--f-display); font-style: italic; font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1; color: var(--blush); }
.hero__aside { max-width: 33rem; display: grid; gap: 1.5rem; justify-items: start; padding-bottom: .4rem; }
.hero__sub { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 26rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 901px) { .hero__actions { flex-wrap: nowrap; } }

/* intro choreography — plays when the curtain lifts */
.js .hero__title .line__inner, .js .hero__at .line__inner { transform: translate3d(0, 108%, 0); transition: transform 1.5s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * .12s); }
.js .hero__eyebrow, .js .hero__aside, .js .hero__meta { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease-out) .75s, transform 1.4s var(--ease-out) .75s; }
.is-loaded .hero__title .line__inner, .is-loaded .hero__at .line__inner { transform: none; }
.is-loaded .hero__eyebrow, .is-loaded .hero__aside, .is-loaded .hero__meta { opacity: 1; transform: none; }
.is-loaded .hero__eyebrow { transition-delay: .1s; }

.hero__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.hero__caption { display: flex; align-items: baseline; gap: .6rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); min-width: 16rem; }
.hero__caption [data-reel-count] { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 0; font-style: italic; }
.hero__of { opacity: .6; }
.hero__cap { margin-left: .6rem; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); opacity: 0; transform: translateY(6px); display: inline-block; }
.hero__cap.is-in { opacity: 1; transform: none; }
.hero__dots { display: flex; gap: .6rem; }
.hero__dots button { position: relative; width: clamp(2.6rem, 5vw, 4.4rem); height: 22px; }
.hero__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.32); }
.hero__dots i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dots button.is-active i { animation: reel-progress var(--reel-interval, 7000ms) linear forwards; }
@keyframes reel-progress { to { transform: scaleX(1); } }
.hero__scroll { display: inline-flex; align-items: center; gap: .8rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.hero__scroll i { position: relative; width: 1px; height: 38px; background: rgba(255,255,255,.3); overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: scroll-cue 2.4s var(--ease-in-out) infinite; }
@keyframes scroll-cue { to { top: 100%; } }

@media (max-width: 900px) {
  .hero__row { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hero__content { padding-bottom: 6rem; }
  .hero__caption { min-width: 0; }
  .hero__cap { display: none; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__title { font-size: 3.35rem; }
}

/* ---------- Intro: Boutique by design ---------- */
.intro__head { display: grid; gap: 1.6rem; }
.intro__title { font-size: clamp(3.6rem, 12.5vw, 13rem); line-height: .9; }
.intro__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.intro__body .lead { grid-column: 6 / span 5; }
.intro__ticks { grid-column: 6 / span 4; margin-top: 2.2rem; }
.intro__gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); margin-top: clamp(4.5rem, 9vw, 9rem); align-items: start; }
.intro__fig--a { grid-column: 1 / span 7; }
.intro__fig--a .media { aspect-ratio: 5 / 6; }
.intro__side { grid-column: 9 / span 4; display: grid; gap: clamp(3.5rem, 8vw, 8rem); padding-top: clamp(2rem, 6vw, 7rem); }
.intro__fig--b .media { aspect-ratio: 3 / 4; }
.intro__quote { display: grid; gap: 1.2rem; }
.intro__quote .h3 { font-size: clamp(1.9rem, 2.8vw, 2.9rem); }
@media (max-width: 900px) {
  .intro__body .lead, .intro__ticks { grid-column: 1 / -1; }
  .intro__fig--a { grid-column: 1 / -1; }
  .intro__side { grid-column: 1 / -1; padding-top: 3rem; gap: 3rem; }
  .intro__fig--b { margin-left: 25%; }
}

/* ---------- Four details (sticky image swap) ---------- */
.details__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); }
.details__sticky { grid-column: 1 / span 6; }
.details__visual { position: sticky; top: calc(var(--header-h-sm) + 2rem); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h-sm) - 4rem); width: 100%; overflow: hidden; background: var(--sand); }
.details__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-soft); }
.details__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease-out); }
.details__img.is-active { opacity: 1; z-index: 1; }
.details__img.is-active img { transform: scale(1); }
.details__counter { position: absolute; z-index: 2; left: 1.4rem; bottom: 1.2rem; color: #fff; font-family: var(--f-display); font-style: italic; font-size: 1.3rem; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.details__list { grid-column: 8 / span 5; padding-top: 1rem; }
.details__title { margin-top: 1.4rem; }
.details__items { margin-top: clamp(3rem, 6vw, 5rem); }
.details__item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: clamp(2.6rem, 7vh, 4.5rem) 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity .8s var(--ease-out); min-height: 42vh; }
.details__item.is-active { opacity: 1; }
.details__item .index-num { font-size: 1.4rem; padding-top: .35rem; }
.details__item p { margin-top: 1rem; max-width: 30rem; }
.details__inline { display: none; }
@media (max-width: 900px) {
  .details__sticky { display: none; }
  .details__list { grid-column: 1 / -1; }
  .details__item { opacity: 1; min-height: 0; }
  .details__inline { display: block; margin-top: 1.5rem; aspect-ratio: 4 / 3; overflow: hidden; }
  .details__inline img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Amenities preview (pinned horizontal) ---------- */
.amen { position: relative; }
.amen__sticky { position: relative; padding-block: clamp(5rem, 9vw, 8rem) 3rem; overflow: hidden; }
.amen.is-pinned .amen__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h-sm) + 1.5rem) 2rem; }
.amen__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; }
.amen__title { font-size: clamp(2.8rem, 6.4vw, 6.6rem); }
.amen__head-aside { max-width: 24rem; display: grid; gap: 1.4rem; justify-items: start; }
.amen__viewport { margin-top: clamp(2rem, 4vh, 3.2rem); }
.amen__track { display: flex; gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--gutter); width: max-content; will-change: transform; align-items: flex-end; }
.amen-card { flex: none; width: clamp(15rem, 24vw, 25rem); }
.amen-card--wide { width: clamp(20rem, 36vw, 40rem); }
.amen-card--tall .amen-card__media { aspect-ratio: 3 / 4; }
.amen-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--night-2); max-height: 54vh; }
.amen-card--wide .amen-card__media { aspect-ratio: 16 / 11; }
.amen-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out), filter 1s var(--ease-out); filter: saturate(.92); }
.amen-card__link:hover .amen-card__media img { transform: scale(1.05); filter: saturate(1.05); }
.amen-card__text { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .3rem; margin-top: 1.1rem; }
.amen-card__text .index-num { grid-row: span 2; padding-top: .15rem; color: var(--blush); }
.amen-card__text h3 { color: #fff; }
.amen-card__text p { font-size: .9rem; color: rgba(255,255,255,.58); }
.amen-card--cta { width: clamp(16rem, 24vw, 24rem); align-self: stretch; }
.amen-card--cta .amen-card__link { height: 100%; min-height: 20rem; border: 1px solid var(--line-light); display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; transition: background-color .6s var(--ease-out); }
.amen-card--cta .h2 { color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.amen-card--cta:hover .amen-card__link { background: rgba(255,255,255,.05); }
.amen-card__circle { width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; transition: background-color .5s, color .5s, transform .6s var(--ease-out); }
.amen-card--cta:hover .amen-card__circle { background: #fff; color: var(--ink); transform: rotate(-45deg); }
.amen__foot { display: flex; align-items: center; gap: 2rem; margin-top: clamp(1.6rem, 3vh, 2.6rem); }
.amen__progress { position: relative; flex: 1; height: 1px; background: var(--line-light); }
.amen__progress i { position: absolute; inset: 0; background: var(--blush); transform: scaleX(0); transform-origin: left; }
.amen:not(.is-pinned) .amen__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.amen:not(.is-pinned) .amen__viewport::-webkit-scrollbar { display: none; }
.amen:not(.is-pinned) .amen-card { scroll-snap-align: start; scroll-margin-left: var(--gutter); width: 78vw; max-width: 24rem; }
.amen:not(.is-pinned) .amen__progress { display: none; }
@media (max-width: 900px) {
  .amen__head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .amen__hint::before { content: "Swipe to explore"; }
  .amen__hint { font-size: 0; }
  .amen__hint::before { font-size: var(--fs-label); }
}

/* ---------- Statement over image ---------- */
.statement { position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--night); }
.statement__media { position: absolute; inset: 0; }
.statement__media img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 40%; }
.statement__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.38) 55%, rgba(10,9,8,.15) 100%); }
.statement__inner { position: relative; z-index: 1; padding-block: 8rem; }
.statement__title { color: #fff; max-width: 11ch; font-size: clamp(3.2rem, 8.6vw, 9rem); }
.statement__sub { max-width: 30rem; margin-top: 2rem; color: rgba(255,255,255,.85); font-size: var(--fs-lead); line-height: 1.55; }

/* ---------- Space to grow ---------- */
.grow__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); align-items: center; }
.grow__text { grid-column: 1 / span 5; }
.grow__title { margin-top: 1.4rem; }
.grow__avail { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: 1.6rem; font-size: .95rem; color: var(--ink); }
.grow__avail strong { font-weight: 600; }
.grow__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(168, 131, 79, .18); margin-right: .25rem; }
.grow__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line-strong); }
.grow__cols .h4 { display: block; font-size: 1.45rem; }
.grow__cols p { margin-top: .4rem; line-height: 1.5; }
.grow__plan { grid-column: 7 / span 6; }
.grow__plan-frame { background: var(--ivory); aspect-ratio: 16 / 11; padding: clamp(1rem, 2.5vw, 2.4rem); box-shadow: 0 30px 80px -40px rgba(60, 40, 20, .35); }
.grow__plan-frame svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .grow__text, .grow__plan { grid-column: 1 / -1; }
  .grow__plan { margin-top: 3rem; }
  .grow__cols { grid-template-columns: 1fr; }
}

/* ---------- Brochure & film ---------- */
.media-duo__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.25rem, 3vw, 3rem); align-items: end; }
.media-duo__card { display: grid; gap: 1.6rem; }
.media-duo__card .media { aspect-ratio: 16 / 10; }
.media-duo__text { display: grid; gap: .8rem; justify-items: start; }
.play { position: absolute; left: 50%; top: 50%; width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .8s var(--ease-out), background-color .5s; }
.play svg { width: 1.6rem; height: 1.6rem; margin-left: .2rem; }
.media-duo__card--film:hover .play { transform: scale(1.08); background: rgba(255,255,255,.22); }
.book { aspect-ratio: 16 / 12.6; background: var(--linen); display: grid; place-items: center; perspective: 1400px; overflow: hidden; }
.book img { width: 72%; box-shadow: 0 40px 60px -30px rgba(40, 25, 10, .45), 0 2px 6px rgba(40,25,10,.12); transform: rotateY(-14deg) rotateX(4deg) rotateZ(-1deg); transition: transform 1.2s var(--ease-out); }
.media-duo__card--book:hover .book img { transform: rotateY(-4deg) rotateX(2deg) scale(1.03); }
@media (max-width: 900px) { .media-duo__grid { grid-template-columns: 1fr; } }