/* =========================================================================
   Mahotsav Banquets — landing page
   Palette is brand-locked: #3E141D dominant, #F1F0F4 separation, white, black.
   Every other value here is a tint or shade of those four.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --wine: #3E141D;
  --wine-900: #26090F;
  --wine-800: #33101A;
  --wine-700: #55202B;
  --wine-500: #7A3A47;
  --wine-300: #A8808A;
  --wine-200: #C9B3B9;
  --wine-100: #E7DCDF;
  --wine-50: #F6F1F2;
  --haze: #F1F0F4;
  --white: #FFFFFF;

  --text-strong: #120A0D;
  --text: #3A3034;
  --text-mute: #6B5E63;
  --on-wine: #FFFFFF;
  --on-wine-mute: #D9C8CC;

  --line: #E2DEE4;
  --line-strong: #CFC8D1;
  --line-wine: rgba(255, 255, 255, .16);

  --f-display: 'Marcellus', "Cormorant Garamond", Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-hero: clamp(2.35rem, 1.15rem + 3.5vw, 4.55rem);
  --t-h2: clamp(1.95rem, 1.25rem + 2.6vw, 3.35rem);
  --t-h3: clamp(1.14rem, 1.02rem + .55vw, 1.45rem);
  --t-lead: clamp(1.02rem, .96rem + .42vw, 1.2rem);
  --t-small: .875rem;
  --t-label: .72rem;

  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --sec-y: clamp(76px, 9vw, 146px);
  --gut: clamp(20px, 4.4vw, 48px);
  --maxw: 1280px;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18, 10, 13, .05), 0 4px 14px rgba(18, 10, 13, .05);
  --sh-2: 0 2px 6px rgba(18, 10, 13, .06), 0 18px 44px rgba(18, 10, 13, .10);
  --sh-3: 0 4px 10px rgba(18, 10, 13, .08), 0 30px 70px rgba(18, 10, 13, .14);

  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --d-fast: 170ms;
  --d-mid: 300ms;
  --d-slow: 620ms;

  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%233E141D' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='44' cy='0' r='22'/%3E%3Ccircle cx='0' cy='44' r='22'/%3E%3Ccircle cx='44' cy='44' r='22'/%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/g%3E%3C/svg%3E");
  --jaali-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='22'/%3E%3Ccircle cx='44' cy='0' r='22'/%3E%3Ccircle cx='0' cy='44' r='22'/%3E%3Ccircle cx='44' cy='44' r='22'/%3E%3Ccircle cx='22' cy='22' r='22'/%3E%3C/g%3E%3C/svg%3E");
}


/* ---------- 0. Door preloader ---------- */
/* Two wine doors under a drawn arch. Shown only when JS is present, opened by
   main.js on load, and force-opened by the inline head script if that fails.
   Runs once per session and not at all under reduced motion. */
.preloader {
  display: none
}

.js-reveal .preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300
}

html.is-loading,
html.is-loading body {
  overflow: hidden
}

.door {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 50.4%;
  background: var(--wine-900);
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}

.door-l {
  left: 0
}

.door-r {
  right: 0
}

.door-r::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.preloader.is-open .door-l {
  transform: translate3d(-100.5%, 0, 0)
}

.preloader.is-open .door-r {
  transform: translate3d(100.5%, 0, 0)
}

.pre-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 400ms var(--e-out), scale 1s var(--e-soft);
}

.preloader.is-open .pre-centre {
  opacity: 0;
  scale: 1.16
}

.pre-arch {
  position: absolute;
  width: clamp(148px, 17vw, 214px);
  height: auto;
  color: var(--wine-300)
}

.pre-arch path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: archDraw 1s var(--e-soft) 100ms forwards
}

@keyframes archDraw {
  to {
    stroke-dashoffset: 0
  }
}

.pre-logo {
  position: relative;
  width: clamp(92px, 10.5vw, 132px);
  height: auto;
  filter: brightness(0) invert(1);
  /* the wordmark is dark; invert it for the door */
  opacity: 0;
  animation: preLogo 760ms var(--e-soft) 480ms forwards;
}

@keyframes preLogo {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.preloader.is-open {
  pointer-events: none
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%
}

img {
  height: auto
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--text-strong);
  letter-spacing: -.005em
}

p {
  margin: 0
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0
}

li {
  list-style: none
}

a {
  color: inherit;
  text-decoration: none
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

address {
  font-style: normal
}

::selection {
  background: var(--wine);
  color: #fff
}

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: var(--wine);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}

.skip-link:focus-visible {
  transform: none
}

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px
}

.enquire :focus-visible,
.booking :focus-visible,
.closer :focus-visible {
  outline-color: #fff
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut)
}

.section {
  position: relative;
  padding-block: var(--sec-y)
}

/* ---------- 3. Shared type ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-500);
  margin-bottom: var(--s3);
}

.eyebrow-rule {
  display: block;
  width: 38px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none
}

.eyebrow-light {
  color: var(--wine-200)
}

.sec-h {
  font-size: var(--t-h2);
  max-width: 16ch
}

.sec-h-light {
  color: var(--white)
}

.sec-sub {
  margin-top: var(--s3);
  font-size: var(--t-lead);
  color: var(--text-mute);
  max-width: 52ch;
  line-height: 1.6
}

.sec-head {
  margin-bottom: clamp(40px, 5vw, 76px)
}

.sec-head-center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto
}

.sec-head-center .eyebrow {
  justify-content: center
}

.sec-head-center .sec-h {
  margin-inline: auto
}

.sec-head-center .sec-sub {
  margin-inline: auto
}

.link-underline {
  color: var(--wine);
  font-weight: 600;
  font-size: var(--t-small);
  border-bottom: 1px solid var(--wine-200);
  padding-bottom: 2px;
  transition: border-color var(--d-fast) var(--e-out);
}

.link-underline:hover {
  border-color: var(--wine)
}

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--wine);
  --btn-fg: #fff;
  --btn-bd: var(--wine);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: .925rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out),
    background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wine-700);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--e-out);
}

.btn:hover::after {
  transform: scaleX(1)
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(62, 20, 29, .26)
}

.btn:active {
  transform: translateY(0);
  box-shadow: none
}

.btn svg {
  flex: none;
  transition: transform var(--d-mid) var(--e-out)
}

.btn:hover svg {
  transform: translateX(4px)
}

.btn-lg {
  min-height: 56px;
  padding: 17px 32px;
  font-size: .98rem
}

.btn-sm {
  min-height: 42px;
  padding: 11px 20px;
  font-size: .86rem
}

.btn-block {
  width: 100%
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--wine);
  --btn-bd: var(--line-strong)
}

.btn-ghost::after {
  background: var(--wine)
}

.btn-ghost:hover {
  --btn-fg: #fff;
  --btn-bd: var(--wine);
  box-shadow: 0 10px 26px rgba(62, 20, 29, .16)
}

.enquire .btn-ghost,
.closer .btn-ghost {
  --btn-fg: #fff;
  --btn-bd: var(--line-wine)
}

.enquire .btn-ghost::after,
.closer .btn-ghost::after {
  background: rgba(255, 255, 255, .14)
}

.btn-light {
  --btn-bg: #fff;
  --btn-fg: var(--wine);
  --btn-bd: #fff
}

.btn-light::after {
  background: var(--haze)
}

.btn-light:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28)
}

/* ---------- 5. Reveal + float ---------- */
.js-reveal .r {
  opacity: 0;
  transform: translate3d(0, 22px, 0)
}

.js-reveal .r[data-split] {
  transform: none
}

.reveal-on .r {
  transition: opacity 700ms var(--e-soft), transform 700ms var(--e-soft);
  transition-delay: calc(var(--d, 0) * 80ms);
}

.r.in {
  opacity: 1;
  transform: none
}

[data-float] {
  will-change: transform
}

[data-float].float-idle {
  will-change: auto
}

/* ---------- 6. Decorative floats ---------- */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0
}

.deco-arch-1 {
  top: 26%;
  left: -96px;
  width: 250px;
  color: var(--wine);
  opacity: .08
}

.deco-arch-2 {
  right: -40px;
  bottom: -30px;
  width: 260px;
  color: #fff;
  opacity: .11
}

.deco svg {
  width: 100%;
  height: auto
}

.deco-jaali-1 {
  right: 4%;
  top: 14%;
  width: 150px;
  height: 150px;
  background-image: var(--jaali);
  opacity: .16;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}

.deco-jaali-2 {
  left: -60px;
  bottom: 6%;
  width: 230px;
  height: 230px;
  background-image: var(--jaali);
  opacity: .13;
  -webkit-mask-image: radial-gradient(circle at 40% 60%, #000 26%, transparent 70%);
  mask-image: radial-gradient(circle at 40% 60%, #000 26%, transparent 70%);
}

.deco-jaali-3 {
  right: -40px;
  top: 8%;
  width: 280px;
  height: 280px;
  background-image: var(--jaali-light);
  opacity: .13;
  -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 24%, transparent 68%);
  mask-image: radial-gradient(circle at 60% 40%, #000 24%, transparent 68%);
}

.deco-orb-1 {
  left: 52%;
  top: 56%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 20, 29, .10), transparent 68%);
  filter: blur(14px);
}

/* ---------- 7. Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out);
}

.site-head.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .94)
}

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 74px;
  transition: min-height 380ms var(--e-out)
}

.site-head.is-stuck .head-inner {
  min-height: 60px
}

.brand {
  flex: none;
  display: block
}

.brand picture,
.brand img {
  width: clamp(112px, 13vw, 150px);
  height: auto;
  transform-origin: left center;
  transition: scale 380ms var(--e-out)
}

.site-head.is-stuck .brand img {
  scale: .88
}

.nav {
  position: relative;
  margin-left: auto
}

.nav-ink {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--wine);
  
  opacity: 0;
  transform-origin: left center;
  transition: transform 460ms var(--e-out), width 460ms var(--e-out), opacity 260ms var(--e-out);
}

.nav-ink.is-on {
  opacity: 1
}

.nav ul {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px)
}

.nav a {
  position: relative;
  font-size: 1rem;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--text);
  padding-block: 6px;
  transition: color var(--d-fast) var(--e-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--e-out);
}

.nav a:hover {
  color: var(--wine)
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center
}

.head-cta {
  display: flex;
  align-items: center;
  gap: var(--s3)
}

.link-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wine);
  white-space: nowrap;
  transition: opacity var(--d-fast) var(--e-out);
}

.link-call:hover {
  opacity: .7
}
.mobile-actions {
  display: none;
  align-items: center;
  gap: 12px;
}
.mobile-call-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--haze);
  color: var(--wine);
  transition: opacity var(--d-fast) var(--e-out);
}
.mobile-call-icon:hover {
  opacity: 0.8;
}
.burger {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--wine);
  transition: transform 300ms var(--e-out), opacity 200ms
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg)
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg)
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px var(--gut) 24px;
  border-top: 1px solid var(--line)
}

.mobile-nav a {
  padding: 15px 0;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line)
}

.mobile-nav .btn {
  margin-top: 16px;
  border-bottom: 0
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 80px) clamp(72px, 9vw, 132px);
  background: var(--white)
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  z-index: 0;
  background: linear-gradient(180deg, transparent, var(--haze));
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(48px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center;
}

.hero-h {
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -.018em
}

.hero-h span {
  display: block
}

.hero-h em {
  font-style: normal;
  color: var(--wine)
}

.hero-sub {
  margin-top: var(--s4);
  font-size: var(--t-lead);
  color: var(--text-mute);
  max-width: 44ch;
  line-height: 1.62
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 42px)
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 42px);
  margin-top: clamp(36px, 4.4vw, 58px);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.hero-facts dt {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine-500)
}

.hero-facts dd {
  margin-top: 5px;
  font-family: var(--f-display);
  font-size: 1.06rem;
  color: var(--text-strong)
}

.hero-art {
  position: relative;
  aspect-ratio: 1/1.16
}

.art {
  position: relative;
  margin: 0
}

.art picture {
  display: block;
  overflow: hidden
}

.art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--e-soft)
}

.art-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%
}

.art-main picture {
  clip-path: url(#arch);
  box-shadow: var(--sh-3)
}

.art-venue {
  position: absolute;
  left: 0;
  bottom: 13%;
  width: 42%;
  z-index: 2
}

.art-venue picture {
  clip-path: url(#arch);
  box-shadow: var(--sh-3)
}

.art-venue figcaption {
  margin-top: 12px;
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wine-500);
  font-weight: 600;
  white-space: nowrap;
}

.art-detail {
  position: absolute;
  right: 8%;
  bottom: -3%;
  width: 20%;
  z-index: 3
}

.art-detail picture {
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: var(--sh-2)
}

.art-detail img {
  aspect-ratio: 1
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  width: 1px;
  height: 52px;
  background: var(--line-strong);
  overflow: hidden
}

.scroll-hint span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--wine);
  animation: hint 2.4s var(--e-soft) infinite
}

@keyframes hint {
  0% {
    transform: translateY(-100%)
  }

  60%,
  100% {
    transform: translateY(100%)
  }
}

/* ---------- 9. Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 20px;
  background: var(--wine);
  color: var(--on-wine-mute);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite
}

.marquee:hover .marquee-track {
  animation-play-state: paused
}

.marquee-set {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding-right: clamp(24px, 3vw, 44px)
}

.marquee-set li {
  font-family: var(--f-display);
  font-size: clamp(.98rem, .9rem + .4vw, 1.28rem);
  white-space: nowrap;
  letter-spacing: .02em;
}

.marquee-set li[aria-hidden],
.marquee-set[aria-hidden] li:nth-child(even) {
  color: var(--wine-500)
}

@keyframes slide {
  to {
    transform: translate3d(-50%, 0, 0)
  }
}

/* ---------- 10. Stats ---------- */
.stats {
  background: var(--haze);
  padding-block: clamp(56px, 6vw, 92px)
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4)
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: var(--s3)
}

.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 820ms var(--e-soft);
  transition-delay: calc(var(--d, 0) * 80ms);
}

.stat.in::before {
  transform: scaleY(1)
}

/* Marcellus has no tabular figures (its 0 is ~2.7x the width of its 1), so each
   column sizes to its widest glyph and the digits are centred in that slot.
   Uniform slots are what stop the number jittering as the digits roll. */
.od {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  height: 1em;
  line-height: 1
}

.od-col {
  display: flex;
  flex-direction: column;
  transition: transform 1.15s var(--e-soft);
  transition-delay: calc(var(--oi) * 65ms)
}

.od-col i {
  display: block;
  height: 1em;
  line-height: 1;
  font-style: normal;
  text-align: center
}

.stat-n {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem);
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums
}

.stat-l {
  font-size: var(--t-small);
  color: var(--text-mute);
  max-width: 20ch;
  line-height: 1.45
}

/* ---------- 11. Spaces ---------- */
.spaces {
  background: var(--haze);
  overflow: hidden
}

.space-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.8vw, 44px);
  position: relative;
  z-index: 1
}

.space {
  display: flex;
  flex-direction: column
}

.space:nth-child(2) {
  margin-top: clamp(28px, 4.5vw, 72px)
}

.space:nth-child(3) {
  margin-top: clamp(56px, 9vw, 144px)
}

.space-fig {
  margin: 0
}

.space-fig picture {
  clip-path: url(#arch);
  background: var(--wine-100);
  transition: translate 620ms var(--e-soft), scale 620ms var(--e-soft)
}

.space-fig img {
  aspect-ratio: 4/5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--e-soft)
}

.space:hover .space-fig picture {
  translate: 0 -8px;
  scale: 1.025
}

.space:hover .space-fig img {
  scale: 1.13
}

.space-body {
  padding-top: var(--s4)
}

.space-tag {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-500)
}

.space-h {
  margin-top: 10px;
  font-size: var(--t-h3)
}

.space-p {
  margin-top: 12px;
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.6
}

.space-cap {
  position: relative;
  margin-top: 16px;
  padding-top: 14px;
  font-size: var(--t-small);
  color: var(--text-mute)
}

.space-cap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--e-soft) 320ms;
}

.space.in .space-cap::before {
  transform: scaleX(1)
}

.space-cap strong {
  font-weight: 700;
  color: var(--wine)
}

.spaces-note {
  margin-top: clamp(48px, 6vw, 84px);
  text-align: center;
  font-size: var(--t-lead);
  color: var(--text-mute)
}

.spaces-note a {
  color: var(--wine);
  font-weight: 600;
  border-bottom: 1px solid var(--wine-200);
  transition: border-color var(--d-fast) var(--e-out)
}

.spaces-note a:hover {
  border-color: var(--wine)
}

/* ---------- 12. Dining ---------- */
.dining {
  overflow: hidden;
  background: linear-gradient(180deg, var(--haze) 0, var(--white) 150px, var(--white) calc(100% - 150px), var(--haze) 100%)
}

.dining-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: center
}

.dining-art {
  position: relative;
  aspect-ratio: 1/.94
}

.art-dining {
  position: absolute;
  inset: 0 0 auto 0;
  width: 88%
}

.art-dining picture {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3)
}

.art-dining img {
  aspect-ratio: 3/2
}

.art-dining-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 2
}

.art-dining-2 picture {
  border-radius: var(--r-lg);
  border: 6px solid var(--white);
  box-shadow: var(--sh-2)
}

.art-dining-2 img {
  aspect-ratio: 3/2
}

.price-list {
  margin-top: clamp(32px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 2px
}

.price-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line)
}

.price-list li:first-child {
  border-top: 1px solid var(--line)
}

.price-k {
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--text-strong);
  flex: none
}

.price-dots {
  flex: 1;
  height: 1px;
  align-self: center;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 6px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--e-soft);
  transition-delay: calc(var(--i) * 130ms + 180ms);
}

.price-list.in .price-dots {
  transform: scaleX(1)
}

.price-k,
.price-v {
  overflow: hidden
}

.price-k i,
.price-v i {
  display: block;
  font-style: normal;
  transform: translateY(115%);
  transition: transform 760ms var(--e-soft);
  transition-delay: calc(var(--i) * 130ms);
}

.price-list.in .price-k i,
.price-list.in .price-v i {
  transform: none
}

.price-v {
  flex: none;
  font-weight: 700;
  color: var(--wine);
  font-size: 1.02rem
}

.price-v small {
  font-weight: 400;
  color: var(--text-mute);
  font-size: .8rem
}

.dining .btn {
  margin-top: clamp(32px, 3.6vw, 44px)
}

/* ---------- 13. Services — the arcade ---------- */
/* A colonnade: four arches that touch, on a shared plinth. Deliberately
   unlike the Spaces cards (4:5, separated, vertically staggered) — these are
   2:3, flush, and level, so the section reads as a facade. */
.services {
  background: var(--haze);
  overflow: hidden
}

.arcade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0
}

.bay {
  position: relative;
  display: flex;
  flex-direction: column
}

.bay-arch {
  position: relative;
  margin: 0;
  transition: opacity 440ms var(--e-out), translate 480ms var(--e-out);
}

/* Four arched niches instead of photographs. Narrow portrait crops of wide
   subjects looked clumsy; a drawn icon sits in an arch far better — and each
   one encodes a real fact: three halls, two cellars, the brass handi from the
   buffet, nine guest openings. */
.bay-niche {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  clip-path: url(#arch);
  background: var(--wine);
  transition: background-color 460ms var(--e-out);
}

.bay-niche::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jaali-light);
  opacity: .07;
}

.bay:hover .bay-niche {
  background: var(--wine-700)
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.bay-icon {
  position: relative;
  width: clamp(56px, 6.2vw, 82px);
  height: auto;
  color: var(--wine-100);
  transition: color 460ms var(--e-out), transform 300ms ease;
  animation: floatIcon 4s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.4s);
}

.bay:hover .bay-icon {
  color: var(--white);
  transform: scale(1.1);
  animation-play-state: paused;
}

.bay-icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--e-soft);
  transition-delay: calc(var(--d, 0) * 130ms + 260ms);
}

.bay.in .bay-icon path {
  stroke-dashoffset: 0
}

.bay-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s4) clamp(14px, 1.6vw, 26px) var(--s3);
  border-top: 1px solid var(--line-strong)
}

.bay:not(:first-child) .bay-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s4);
  bottom: 4px;
  width: 1px;
  background: var(--line-strong);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 760ms var(--e-soft);
  transition-delay: calc(var(--d, 0) * 90ms + 220ms);
}

.bay.in:not(:first-child) .bay-body::before {
  transform: scaleY(1)
}

.bay-h {
  font-size: var(--t-h3)
}

.bay-kicker {
  margin-top: 8px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-500)
}

.bay-p {
  margin-top: 14px;
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.68
}

.bay-link {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s3);
  color: var(--wine);
  font-size: .86rem;
  font-weight: 600;
  transition: gap var(--d-fast) var(--e-out);
}

.bay-link:hover {
  gap: 13px
}

.bay-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22px;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 440ms var(--e-out);
}

.bay-link:hover::after {
  transform: scaleX(1)
}

.arcade-plinth {
  height: 1px;
  margin-top: clamp(34px, 4vw, 58px);
  background: var(--line-strong);
  transform-origin: left center;
}

.js-reveal .arcade-plinth.r {
  opacity: 1;
  transform: scaleX(0)
}

.arcade-plinth.r.in {
  transform: scaleX(1);
  transition: transform 1.15s var(--e-soft)
}


/* ---------- 13b. Gallery — editorial mosaic + lightbox ---------- */
/* Rectangular and mixed-ratio on purpose: the arch stays reserved for the
   halls and the arcade, so photography here reads as photography. */
.gallery {
  background: var(--white)
}

.mosaic {
  columns: 3;
  column-gap: clamp(14px, 1.6vw, 24px);
  justify-content: center;
  align-items: center;
}

.shot {
  break-inside: avoid;
  margin-bottom: clamp(14px, 1.6vw, 24px)
}

.shot-featured {
  column-span: all;
  margin-top: clamp(14px, 1.6vw, 24px);
  margin-bottom: clamp(14px, 1.6vw, 24px);
}

.shot-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--wine-100);
  border: 0;
  border-radius: var(--r);
  transition: translate 460ms var(--e-out), box-shadow 460ms var(--e-out);
}

.shot-btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 1s var(--e-soft)
}

.shot-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wine);
  opacity: 0;
  transition: opacity 420ms var(--e-out);
}

.shot-btn:hover {
  translate: 0 -4px;
  box-shadow: var(--sh-2)
}

.shot-btn:hover img {
  scale: 1.06
}

.shot-btn:hover::after {
  opacity: .16
}

.shot-glass {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--wine);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 380ms var(--e-out), translate 380ms var(--e-out);
}

.shot-btn:hover .shot-glass,
.shot-btn:focus-visible .shot-glass {
  opacity: 1;
  translate: 0 0
}

.gallery-note {
  margin-top: clamp(36px, 4vw, 60px);
  text-align: center;
  font-size: var(--t-lead);
  color: var(--text-mute)
}

.gallery-note a {
  color: var(--wine);
  font-weight: 600;
  border-bottom: 1px solid var(--wine-200);
  transition: border-color var(--d-fast) var(--e-out)
}

.gallery-note a:hover {
  border-color: var(--wine)
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 2vw, 26px);
  padding: clamp(52px, 6vw, 80px) clamp(12px, 3vw, 40px);
  background: rgba(18, 6, 10, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox[hidden] {
  display: none
}

.lightbox.is-in {
  animation: lbIn 320ms var(--e-out) both
}

@keyframes lbIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.lb-stage {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0
}

.lb-stage img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.lb-stage figcaption {
  max-width: 60ch;
  text-align: center;
  font-size: var(--t-small);
  color: var(--wine-200);
  line-height: 1.5;
}

.lb-nav,
.lb-close {
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: background-color var(--d-fast) var(--e-out), scale var(--d-fast) var(--e-out);
}

.lb-nav {
  width: 52px;
  height: 52px
}

.lb-prev {
  grid-column: 1
}

.lb-next {
  grid-column: 3
}

.lb-close {
  position: absolute;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 26px);
  width: 46px;
  height: 46px
}

.lb-nav:hover,
.lb-close:hover {
  background: rgba(255, 255, 255, .2);
  scale: 1.07
}

.lightbox :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}

body.lb-open {
  overflow: hidden
}

/* ---------- 14. Booking ---------- */
.booking {
  background: var(--wine);
  color: var(--on-wine-mute);
  overflow: hidden
}

.booking .sec-head {
  max-width: none
}

.booking-fine {
  margin-top: clamp(44px, 5vw, 72px);
  padding: var(--s4);
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-wine);
  border-radius: var(--r-lg);
}

.booking-fine p {
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 74ch
}

/* ---------- 15. Testimonials ---------- */
.quotes {
  background: var(--white)
}

.quote-box {
  max-width: 840px;
  margin-inline: auto
}

.quote-viewport {
  overflow: hidden
}

.quote-track {
  display: flex;
  transition: transform 620ms var(--e-soft)
}

.quote {
  flex: 0 0 100%;
  padding-inline: clamp(4px, 2vw, 32px);
  opacity: .22;
  scale: .965;
  transition: opacity 540ms var(--e-soft), scale 540ms var(--e-soft);
}

.quote.is-on {
  opacity: 1;
  scale: 1
}

.quote blockquote p .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .06em
}

.quote blockquote p .w i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform 720ms var(--e-soft);
  transition-delay: calc(var(--wi) * 34ms);
}

.quote.is-on blockquote p .w i {
  transform: none
}

.quote-viewport {
  touch-action: pan-y
}

.quote blockquote {
  margin: 0;
  text-align: center
}

.quote blockquote p {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.34;
  color: var(--text-strong);
  letter-spacing: -.008em;
}

.quote blockquote p::before {
  content: "\201C"
}

.quote blockquote p::after {
  content: "\201D"
}

.quote footer {
  margin-top: var(--s4)
}

.quote cite {
  font-style: normal;
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-500);
}

.quote-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: clamp(36px, 4vw, 54px)
}

.q-btn {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
  color: var(--wine);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}

.q-btn:hover {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
  transform: translateY(-2px)
}

.q-status {
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  min-width: 11ch;
  text-align: center
}

/* ---------- 16. Enquiry ---------- */
.enquire {
  background: var(--wine);
  color: var(--on-wine-mute);
  overflow: hidden
}

.enquire::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .07), transparent 58%);
}

.enquire-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .99fr) minmax(0, 1.07fr);
  gap: clamp(44px, 5vw, 88px);
  align-items: start;
}

.enquire-intro {
  position: sticky;
  top: 110px
}

.enquire-sub {
  margin-top: var(--s3);
  font-size: var(--t-lead);
  line-height: 1.62;
  max-width: 44ch
}

.enquire-trust {
  margin-top: clamp(32px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px
}

.enquire-trust li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-small);
  line-height: 1.5
}

.enquire-trust svg {
  flex: none;
  margin-top: 3px;
  color: var(--wine-300)
}

.enquire-trust a {
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid var(--line-wine)
}

.enquire-trust a:hover {
  border-bottom-color: #fff
}

.form-card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.2vw, 44px);
  box-shadow: var(--sh-3);
  color: var(--text);
}

.field {
  margin-bottom: var(--s3)
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3)
}

.field label {
  display: block;
  margin-bottom: 9px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.field label .opt {
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0;
  text-transform: none
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background-color: var(--wine-50);
  color: var(--text-strong);
  background-image: linear-gradient(var(--wine), var(--wine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out), background-size 460ms var(--e-out);
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 96px;
  resize: vertical
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--wine-300)
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-strong)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background-color: var(--white);
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(62, 20, 29, .14);
  background-size: 100% 2px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #B3261E;
  background: #FDF6F5
}

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .16)
}

.select-wrap {
  position: relative
}

.select-wrap svg {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--wine-500)
}

.select-wrap select {
  padding-right: 42px;
  cursor: pointer
}

.field-hint {
  margin-top: 7px;
  font-size: .79rem;
  color: var(--text-mute)
}

.field-err {
  margin-top: 7px;
  font-size: .79rem;
  font-weight: 600;
  color: #B3261E
}

.form-error-summary {
  margin-bottom: var(--s3);
  padding: 16px 18px;
  background: #FDF6F5;
  border: 1px solid #E9C9C6;
  border-left: 3px solid #B3261E;
  border-radius: var(--r);
}

.form-error-summary h3 {
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 700;
  color: #B3261E
}

.form-error-summary ul {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.form-error-summary li {
  font-size: .83rem
}

.form-error-summary a {
  color: #B3261E;
  text-decoration: underline;
  text-underline-offset: 2px
}

#submit-btn {
  margin-top: 8px
}

#submit-btn .btn-spin {
  display: none;
  animation: spin .8s linear infinite
}

#submit-btn.is-busy {
  pointer-events: none;
  opacity: .75
}

#submit-btn.is-busy .btn-spin {
  display: block
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.form-foot {
  margin-top: var(--s3);
  font-size: .79rem;
  color: var(--text-mute);
  text-align: center
}

.form-foot a {
  color: var(--wine);
  font-weight: 600;
  border-bottom: 1px solid var(--wine-200)
}

.form-done {
  text-align: center;
  padding: clamp(20px, 3vw, 40px) 0
}

.form-done svg {
  margin: 0 auto var(--s3);
  color: var(--wine)
}

.form-done h3 {
  font-size: 1.55rem
}

.form-done p {
  margin: 12px auto var(--s4);
  font-size: var(--t-small);
  color: var(--text-mute);
  max-width: 34ch
}

/* ---------- 17. FAQ ---------- */
.faq {
  background: var(--haze)
}

.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 4.5vw, 84px);
  align-items: start
}

.faq-side {
  position: sticky;
  top: 104px
}

.faq-side .sec-head {
  margin-bottom: var(--s5)
}

.faq-list {
  display: flex;
  flex-direction: column
}

.faq-item {
  border-top: 1px solid var(--line-strong)
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line-strong)
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, .96rem + .34vw, 1.22rem);
  color: var(--text-strong);
  transition: color var(--d-fast) var(--e-out);
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-item summary:hover {
  color: var(--wine)
}

.faq-mark {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  flex: none
}

.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--wine);
  transition: transform 320ms var(--e-out), opacity 320ms var(--e-out);
}

.faq-mark::before {
  width: 13px;
  height: 1.5px;
  margin: -.75px 0 0 -6.5px
}

.faq-mark::after {
  width: 1.5px;
  height: 13px;
  margin: -6.5px 0 0 -.75px
}

.faq-item[open] .faq-mark::after {
  transform: rotate(90deg);
  opacity: 0
}

.faq-a {
  display: grid
}

.faq-a>p {
  overflow: hidden;
  min-height: 0;
  padding: 0 40px 24px 0
}

.js-reveal .faq-a {
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--e-soft)
}

.js-reveal .faq-item.is-open .faq-a {
  grid-template-rows: 1fr
}

.faq-a p {
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.7;
  max-width: 56ch
}

.faq-item.is-open summary {
  color: var(--wine)
}

.art-faq picture {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2)
}

.art-faq img {
  aspect-ratio: 16/9
}

.faq-address {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong)
}

.faq-address h3 {
  font-size: 1.2rem
}

.faq-address address {
  margin: 12px 0 16px;
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.6
}

/* ---------- 18. Closer ---------- */
.closer {
  position: relative;
  overflow: hidden;
  background: var(--wine-900);
  color: var(--on-wine-mute);
  padding-block: clamp(72px, 8vw, 124px);
  text-align: center
}

.closer-h .w i {
  transform: translateY(118%);
  transition-duration: 1.05s;
  transition-delay: calc(var(--wi) * 78ms)
}

.closer::before {
  content: "";
  position: absolute;
  inset: -28%;
  opacity: .06;
  animation: jaaliDrift 120s linear infinite;
  background-image: var(--jaali-light);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 74%);
}

.closer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}

.closer .eyebrow {
  justify-content: center
}

.closer-h {
  font-size: var(--t-h2);
  color: var(--white);
  max-width: 18ch
}

.closer-p {
  margin-top: var(--s3);
  font-size: var(--t-lead)
}

.closer .btn {
  margin-top: clamp(28px, 3.4vw, 42px)
}

/* ---------- 19. Footer ---------- */
.site-foot {
  background: var(--white);
  padding-block: clamp(56px, 6vw, 88px) 32px;
  border-top: 1px solid var(--line)
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.4vw, 52px)
}

.foot-brand img {
  width: 150px;
  height: auto
}

.foot-brand p {
  margin-top: 16px;
  font-size: var(--t-small);
  color: var(--text-mute);
  max-width: 26ch
}

.foot-col h3 {
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-500)
}

.foot-col address,
.foot-col p {
  margin-top: 14px;
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.7
}

.foot-col a {
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out)
}

.foot-col a:hover {
  color: var(--wine);
  border-color: var(--wine)
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line)
}

.foot-base p {
  font-size: .79rem;
  color: var(--text-mute)
}

.to-top {
  font-size: .79rem;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line-strong)
}

.to-top:hover {
  color: var(--wine)
}

/* ---------- 20. Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 12px;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translate3d(0, 110%, 0);
  transition: transform 420ms var(--e-out);
}

.sticky-cta.is-on {
  transform: none
}

.sticky-cta .btn {
  flex: 1
}

.sticky-call {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--wine);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

/* ---------- 20b. Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 150;
  pointer-events: none
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- 20c. Word-split headings ---------- */
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .06em
}

[data-split] .w i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(108%);
  transition: transform 820ms var(--e-soft);
  transition-delay: calc(var(--wi) * 52ms);
}

[data-split].in .w i {
  transform: none
}

/* ---------- 20c2. Arch-shaped image reveal ---------- */
.space-fig picture,
.art-faq picture,
.art-dining picture,
.panel-fig picture {
  position: relative;
  display: block
}

.js-reveal .space-fig picture::after,
.js-reveal .art-faq picture::after,
.js-reveal .art-dining picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 100%;
  transition: transform 1.05s var(--e-soft) 140ms;
}

.space-fig picture::after,
.art-faq picture::after {
  background: var(--haze)
}

.art-dining picture::after {
  background: var(--white)
}

.space.in .space-fig picture::after,
.art-faq.in picture::after,
.art-dining.in picture::after {
  transform: scaleY(0)
}

/* ---------- 20d. Image parallax ---------- */
[data-parallax] {
  scale: 1.08;
  will-change: transform
}

[data-parallax].px-idle {
  will-change: auto
}

.space:hover .space-fig img[data-parallax] {
  scale: 1.15
}

/* ---------- 20e. Booking stepper ---------- */
.booking-head {
  margin-bottom: clamp(34px, 4vw, 58px)
}

.stepper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(34px, 4.5vw, 78px);
  align-items: start;
}

.step-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 34px
}

.rail-line {
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(255, 255, 255, .16)
}

.rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: #fff;
  transition: height 620ms var(--e-soft)
}

.step-tab {
  position: relative;
  width: 100%;
  padding: 22px 14px 22px 0;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  opacity: .68;
  transition: opacity 340ms var(--e-out);
}

.step-tab:hover {
  opacity: .88
}

.step-tab.is-on,
.step-tab.is-on:hover {
  opacity: 1
}

.step-dot {
  position: absolute;
  left: -34px;
  top: 28px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--wine);
  border: 1px solid rgba(255, 255, 255, .45);
  transition: background-color 340ms var(--e-out), border-color 340ms var(--e-out), scale 340ms var(--e-out);
}

.step-tab.is-on .step-dot {
  background: #fff;
  border-color: #fff;
  scale: 1.3
}

.step-meta {
  display: block
}

.step-n {
  display: block;
  margin-bottom: 7px;
  font-family: var(--f-display);
  font-size: .86rem;
  letter-spacing: .22em;
  color: var(--wine-300);
  transition: color 340ms var(--e-out);
}

.step-tab.is-on .step-n {
  color: #fff
}

.step-t {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.18;
  color: #fff
}

.step-hint {
  display: block;
  margin-top: 7px;
  font-size: .79rem;
  color: var(--on-wine-mute)
}

.step-panels {
  position: relative;
  min-height: 1px;
  transition: height 440ms var(--e-soft)
}

.step-panel {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}

.step-panel[hidden] {
  display: none
}

.step-panel.is-on {
  animation: panelIn 560ms var(--e-soft) both
}

.step-panel.is-out {
  animation: none;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity 210ms var(--e-out), transform 210ms var(--e-out);
}

.rail-fill {
  transition: height 240ms linear
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.panel-fig {
  margin: 0
}

.panel-fig picture {
  display: block;
  overflow: hidden;
  clip-path: url(#archSoft);
  background: var(--wine-800)
}

.panel-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
  transition: scale 900ms var(--e-soft)
}

.panel-body h3 {
  color: #fff;
  font-size: var(--t-h3)
}

.panel-body>p {
  margin-top: 14px;
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--on-wine-mute)
}

.panel-fine {
  color: var(--wine-300);
  font-size: .79rem
}

.panel-body-wide {
  grid-column: 1/-1
}

.link-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s3);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  padding-bottom: 3px;
  transition: border-color var(--d-fast) var(--e-out), gap var(--d-fast) var(--e-out);
}

.link-light:hover {
  border-bottom-color: #fff;
  gap: 13px
}

/* ---------- 20f. Deposit estimator ---------- */
.estimator {
  margin-top: var(--s4);
  padding: clamp(20px, 2.4vw, 30px);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
}

.est-title {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--wine-300)
}

.est-control {
  margin-top: var(--s3)
}

.est-control label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: .85rem;
  color: var(--on-wine-mute)
}

.est-out-val {
  font-family: var(--f-display);
  font-size: 1.62rem;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.estimator input[type=range] {
  width: 100%;
  height: 26px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none
}

.estimator input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .26)
}

.estimator input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .45);
  transition: scale var(--d-fast) var(--e-out);
}

.estimator input[type=range]:hover::-webkit-slider-thumb {
  scale: 1.18
}

.estimator input[type=range]::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .26)
}

.estimator input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #fff
}

.est-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: .71rem;
  color: var(--wine-300)
}

.est-menu {
  margin: var(--s3) 0 0;
  padding: 0;
  border: 0
}

.est-menu legend {
  padding: 0;
  font-size: .85rem;
  color: var(--on-wine-mute)
}

.est-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px
}

.est-radio {
  display: block;
  position: relative
}

.est-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.est-radio-face {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r);
  font-size: .83rem;
  color: var(--on-wine-mute);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.est-radio-face em {
  font-style: normal;
  font-family: var(--f-display);
  font-size: 1.08rem;
  color: #fff
}

.est-radio input:checked+.est-radio-face {
  background: rgba(255, 255, 255, .11);
  border-color: #fff;
  color: #fff
}

.est-radio input:focus-visible+.est-radio-face {
  outline: 2px solid #fff;
  outline-offset: 2px
}

.est-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.est-result dt {
  font-size: .77rem;
  letter-spacing: .05em;
  color: var(--wine-300)
}

.est-result dd {
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
  color: #fff;
  font-variant-numeric: tabular-nums
}

.est-hi {
  padding-left: var(--s3);
  border-left: 1px solid rgba(255, 255, 255, .18)
}

.est-note {
  margin-top: var(--s3);
  font-size: .74rem;
  line-height: 1.6;
  color: var(--wine-300)
}

.estimator .btn {
  margin-top: var(--s3)
}


/* ---------- 20g. Scalloped arcade seams — entering the wine rooms ---------- */
.seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 3;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 88px 28px;
  transform-origin: top center;
  scale: 1 .45;
  transition: scale 950ms var(--e-soft);
}

.js-reveal .seam.r {
  transform: none
}

.seam.in {
  scale: 1 1
}

.seam-haze {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='28' viewBox='0 0 88 28'%3E%3Cpath d='M0,0 L0,28 C0,12 20,0 44,0 C68,0 88,12 88,28 L88,0 Z' fill='%23F1F0F4'/%3E%3C/svg%3E")
}

.seam-white {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='28' viewBox='0 0 88 28'%3E%3Cpath d='M0,0 L0,28 C0,12 20,0 44,0 C68,0 88,12 88,28 L88,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E")
}

/* ---------- 20h. Enquiry: card settles, fields stagger, form morphs ---------- */
.js-reveal .form-card {
  transform: translate3d(0, 28px, 0) scale(.985)
}

.form-card.in {
  transform: none
}

.js-reveal #enquiry-form>.field,
.js-reveal #enquiry-form>.field-row,
.js-reveal #enquiry-form>#submit-btn {
  opacity: 0;
  transform: translate3d(0, 14px, 0)
}

.form-card.in #enquiry-form>.field,
.form-card.in #enquiry-form>.field-row,
.form-card.in #enquiry-form>#submit-btn {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--e-soft), transform 620ms var(--e-soft);
  transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}

.form-card {
  transition: height 460ms var(--e-soft)
}

#enquiry-form.is-going {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity 260ms var(--e-out), transform 260ms var(--e-out);
}

.form-done:not([hidden]) {
  animation: doneIn 580ms var(--e-soft) both
}

@keyframes doneIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes jaaliDrift {
  to {
    transform: rotate(360deg)
  }
}

/* =========================================================================
   21. Responsive — recomposed, not shrunk
   ========================================================================= */
@media (max-width:1100px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s5) var(--s4)
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5) var(--s4)
  }

  .deco-jaali-1,
  .deco-arch-1 {
    display: none
  }
}

@media (max-width:960px) {

  .nav,
  .head-cta {
    display: none
  }

  .mobile-actions {
    display: flex
  }

  .burger {
    display: flex
  }

  .head-inner {
    justify-content: space-between
  }

  .site-head.is-open .mobile-nav {
    display: flex
  }

  .hero {
    padding-bottom: clamp(56px, 8vw, 80px)
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(44px, 7vw, 64px)
  }

  .hero-art {
    order: 1;
    aspect-ratio: 1/.82;
    max-width: 520px;
    display: none;
    margin-inline: auto;
    width: 100%
  }

  .art-main {
    width: 64%
  }

  .art-venue {
    width: 40%;
    bottom: 6%
  }

  .art-detail {
    display: none
  }

  .scroll-hint {
    display: none
  }

  .dining-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px)
  }

  .dining-art {
    max-width: 560px;
    aspect-ratio: 1/.86
  }

  .enquire-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 52px)
  }

  .enquire-intro {
    position: static
  }

  .faq-wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 5vw, 52px)
  }

  .faq-side {
    position: static;
    display: contents
  }

  .faq-side .sec-head {
    order: 1;
    margin-bottom: 0
  }

  .faq-list {
    order: 2
  }

  .art-faq {
    order: 3
  }

  .faq-address {
    order: 4;
    margin-top: 0;
    padding-top: 0;
    border-top: 0
  }

  .stepper {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px)
  }

  .step-panel {
    grid-template-columns: 1fr;
    gap: var(--s3)
  }

  .panel-fig {
    max-width: 340px
  }

  .space-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4)
  }

  .space:nth-child(2) {
    margin-top: clamp(24px, 5vw, 48px)
  }

  .space:nth-child(3) {
    margin-top: 0;
    grid-column: 1/-1;
    max-width: 52%
  }

  .deco-orb-1,
  .deco-jaali-2,
  .deco-jaali-3,
  .deco-jaali-4,
  .deco-arch-2 {
    display: none
  }

  .mosaic {
    columns: 2
  }

  .arcade {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--s5)
  }

  .bay:not(:first-child) .bay-body::before {
    display: none
  }

  .bay:nth-child(even) .bay-body::before {
    display: block
  }

  .sticky-cta {
    display: flex
  }
}

@media (max-width:640px) {
  html {
    scroll-padding-top: 74px
  }

  :root {
    --t-hero: clamp(2.3rem, 1.5rem + 4.2vw, 3.1rem)
  }

  .head-inner {
    min-height: 64px
  }

  .hero-h span {
    display: inline
  }

  .hero-facts {
    gap: var(--s3) var(--s4)
  }

  .hero-facts>div {
    flex: 1 1 40%
  }

  .hero-actions .btn {
    flex: 1 1 100%
  }

  .stat-row {
    gap: var(--s4)
  }

  .stat {
    padding-left: var(--s2)
  }

  .space-grid {
    grid-template-columns: 1fr;
    gap: var(--s5)
  }

  .space:nth-child(2),
  .space:nth-child(3) {
    margin-top: 0;
    max-width: none
  }

  .mosaic {
    columns: 1
  }

  .lb-nav {
    width: 44px;
    height: 44px
  }

  .arcade {
    grid-template-columns: 1fr;
    gap: var(--s5)
  }

  .bay:not(:first-child) .bay-body::before {
    display: none
  }

  .bay-niche {
    aspect-ratio: 1.6
  }

  .bay-body {
    padding-inline: 0
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: var(--s4)
  }

  .art-dining {
    width: 100%;
    position: relative
  }

  .art-dining-2 {
    width: 56%;
    bottom: -8%;
    right: -2%
  }

  .dining-art {
    aspect-ratio: auto;
    padding-bottom: 14%
  }

  .step-rail {
    padding-left: 26px
  }

  .step-dot {
    left: -26px
  }

  .rail-line {
    left: 7px
  }

  .est-choices,
  .est-result {
    grid-template-columns: 1fr
  }

  .est-hi {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--s3);
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .quote-ui {
    gap: var(--s2)
  }

  .marquee-set li {
    font-size: 1rem
  }
}

/* =========================================================================
   22. Reduced motion — render final state, keep everything readable
   ========================================================================= */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .r {
    opacity: 1;
    transform: none
  }

  .marquee-track {
    animation: none;
    transform: none
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none
  }

  .marquee-set[aria-hidden] {
    display: none
  }

  .scroll-hint {
    display: none
  }

  [data-float] {
    transform: none !important;
    translate: none !important;
    will-change: auto
  }

  [data-parallax] {
    translate: none !important;
    scale: 1 !important;
    will-change: auto
  }

  .scroll-progress {
    display: none
  }

  [data-split] .w i {
    transform: none
  }

  .step-panel.is-on {
    animation: none
  }

  .preloader {
    display: none !important
  }

  html.is-loading,
  html.is-loading body {
    overflow: auto
  }

  .seam {
    scale: 1 1 !important
  }

  .od-col {
    transition: none !important
  }

  .stat::before,
  .space-cap::before,
  .price-dots {
    transform: none !important
  }

  .price-k i,
  .price-v i,
  .quote blockquote p .w i {
    transform: none !important
  }

  .quote {
    opacity: 1;
    scale: 1
  }

  .closer::before {
    animation: none
  }

  .nav-ink {
    display: none
  }

  .form-card {
    transform: none !important
  }

  #enquiry-form>.field,
  #enquiry-form>.field-row,
  #enquiry-form>#submit-btn {
    opacity: 1 !important;
    transform: none !important
  }

  .form-done:not([hidden]) {
    animation: none
  }

  .btn:hover {
    transform: none
  }

  .space:hover .space-fig picture {
    translate: none
  }

  .bay:hover .bay-arch {
    translate: none
  }

  .bay-icon path {
    stroke-dashoffset: 0 !important
  }

  .shot-btn:hover {
    translate: none
  }

  .lightbox.is-in {
    animation: none
  }

  .arcade-plinth.r.in {
    transform: none
  }
}

/* ---------- Scroll to Top ---------- */
.scroll-to-top {
  position: fixed;
  bottom: 152px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out), visibility 300ms, background-color 200ms;
  z-index: 100; /* above sticky header */
}

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--wine-700);
}

/* ---------- WhatsApp Button ---------- */
.whatsapp-btn {
  position: fixed;
  bottom: 90px;
  right: 18px;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
      color: var(--wine);
    border: 1px solid var(--line-strong);
  /* box-shadow: var(--sh-2); */
  z-index: 100;
  transition: transform 300ms var(--e-out), background-color 200ms;
}

.whatsapp-btn:hover {
  background: #20BA5A;
  transform: translateY(-2px);
  color: #fff;
}