/* Shine & Style Studio: final combined theme.
 * Base tokens, header, Hero A, makeover ring, gallery, booking, contact and footer come from V4 "Lumière Zoom".
 * Hero B (V5), services cascade (V3), Ladies A (V5), Ladies B flip cards (V6) and the rental wheel (V6)
 * are ported below and restyled to the V4 tokens. Static layout is the default; motion switches on via html.is-fx. */

:root {
  --ivory: #FBF8F1;
  --white: #FFFFFF;
  --blush: #F3E8EE;
  --lilac: #EFE4F3;
  --plum: #4B1768;
  --purple: #35104E;
  --gold: #D4AF62;
  --gold-ink: #7A5E1C;
  --ink: #251F29;
  --ink-soft: #5B5260;
  --line: rgb(var(--th-b1, 53 16 78) / 0.12);
  --error: #B3261E;
  --success: #1E6B3A;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 84px;
  --shadow-soft: 0 1px 2px rgba(37, 31, 41, 0.04), 0 18px 48px -18px rgba(37, 31, 41, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
/* No `scroll-behavior: smooth` here: ScrollTrigger measures by setting scrollTop, and CSS smooth
   scrolling animates those measurement jumps, so every trigger is measured at the wrong scroll
   origin. Anchor jumps pass their own behaviour to window.scrollTo() instead (main.js). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 22px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; text-wrap: balance; }
h2, h1 { font-family: var(--serif); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
em { font-style: italic; color: var(--plum); }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(96px, 11vw, 168px); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 300;
  background: var(--purple); color: var(--white); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; }
.section-head { display: grid; gap: 20px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto clamp(48px, 6vw, 80px); }
.section-head h2, .makeover__intro h2, .male__copy h2, .about__intro h2, .book__intro h2, .services__head h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; color: var(--purple);
}
.note { margin-top: 28px; text-align: center; font-size: 0.875rem; color: var(--ink-soft); }
.note--left { text-align: left; margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 8px 8px 8px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.98); }
.btn__icon {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform .5s var(--ease);
}
.btn__icon svg, .pill__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__icon { transform: translate(3px, -2px) scale(1.06); }
.btn--plum { background: var(--purple); color: var(--white); }
.btn--plum:hover { background: var(--plum); }
.btn--gold { background: var(--gold); color: var(--purple); }
.btn--gold .btn__icon { background: rgb(var(--th-b1, 53 16 78) / 0.12); }
.btn--gold:hover { background: var(--th-gold-hover, #E2C27F); }
.btn--glass { background: transparent; color: var(--purple); border-color: rgb(var(--th-b1, 53 16 78) / 0.28); }
.btn--glass .btn__icon { background: var(--lilac); }
.btn--glass:hover { border-color: var(--plum); }

/* Bezel wrapper adapted from Uiverse.io by mark-edison-jim (https://uiverse.io/mark-edison-jim/dangerous-penguin-53) */
.bezel {
  display: inline-flex; padding: 5px; border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35));
  border: 1px solid rgb(var(--th-b1, 53 16 78) / 0.12);
  box-shadow: 0 2px 8px rgba(37, 31, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- Preloader: logo, gold glow, loading messages ---------- */
.wordmark__name i, .giant i { color: var(--gold-ink); font-style: italic; }
.preloader { display: none; }
.js .preloader {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center;
  background: #F7F4ED; /* same ivory as the logo artwork, so its edges disappear */
  animation: preOut .6s 4.6s var(--ease) forwards; /* failsafe if scripts stall; after the JS exit would finish */
}
.no-anim .preloader { display: none; }
.preloader__inner { display: grid; justify-items: center; gap: 10px; padding: 24px; }
.preloader__logo { position: relative; width: min(420px, 84vw, 70vh); aspect-ratio: 560 / 429; isolation: isolate; }
.preloader__logo::before { /* soft gold halo behind the mark */
  content: ""; position: absolute; inset: 0 14% 38%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgb(212 175 98 / 0.55), rgb(212 175 98 / 0) 70%);
  filter: blur(18px); animation: haloPulse 1.6s ease-in-out infinite alternate;
}
.preloader__logo img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  animation: logoIn .9s var(--ease-out) both, logoGlow 1.6s ease-in-out .9s infinite alternate;
}
.preloader__msg {
  font-family: var(--sans, inherit); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); min-height: 1.4em; transition: opacity .3s ease;
}
.preloader__msg.is-fading { opacity: 0; }
.preloader__bar {
  width: min(220px, 56vw); height: 3px; margin-top: 6px; border-radius: 999px; overflow: hidden;
  background: rgb(var(--th-b1, 53 16 78) / 0.12);
}
.preloader__bar-fill {
  display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(122 46 160 / .9), var(--gold-ink));
  /* Duration matches the PRELOAD_MS hold in main.js. */
  animation: barFill 3s linear forwards;
}
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes logoIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes logoGlow {
  from { filter: drop-shadow(0 0 4px rgb(212 175 98 / .35)) drop-shadow(0 0 0 rgb(122 46 160 / 0)); }
  to   { filter: drop-shadow(0 0 14px rgb(212 175 98 / .85)) drop-shadow(0 0 26px rgb(122 46 160 / .28)); }
}
@keyframes haloPulse { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
@keyframes preOut { to { opacity: 0; visibility: hidden; } }

/* ---------- Anchors: native smooth scroll, offset for the fixed header ---------- */
main > section[id], section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 22px); }

/* ---------- Header ---------- */
/* Always visible. The header never hides on scroll: only its shadow deepens (.is-scrolled). */
.site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding-inline: var(--gutter); }
.site-header .pill { transition: box-shadow .4s var(--ease); }
.site-header.is-scrolled .pill { box-shadow: inset 0 0 0 1px rgb(var(--th-b1, 53 16 78) / 0.1), 0 18px 40px -18px rgba(37, 31, 41, 0.3); }
.pill {
  position: relative; z-index: 2;
  max-width: 1340px; margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px; border-radius: 999px;
  background: rgba(251, 248, 241, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(var(--th-b1, 53 16 78) / 0.08), 0 14px 34px -16px rgba(37, 31, 41, 0.22);
}
.brand { display: inline-flex; text-decoration: none; margin-right: auto; }
.brand-logo { height: 44px; width: auto; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-family: var(--serif); font-size: 1.4rem; color: var(--purple); white-space: nowrap; }
.wordmark__sub { margin-top: 4px; font-size: 0.75rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-soft); }
.wordmark--light .wordmark__name { color: var(--white); }
.wordmark--light .wordmark__name i { color: var(--gold); }
.wordmark--light .wordmark__sub { color: rgba(251, 248, 241, 0.75); }
.pill__cta {
  display: none; align-items: center; gap: 12px;
  min-height: 46px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--purple); color: var(--white); text-decoration: none; font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  transition: background-color .4s var(--ease);
}
.pill__cta:hover { background: var(--plum); }
.pill__arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: transform .5s var(--ease); }
.pill__cta:hover .pill__arrow { transform: translate(2px, -2px); }
@media (min-width: 640px) { .pill__cta { display: inline-flex; } }

.burger { position: relative; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--purple); color: var(--white); }
.burger__line { position: absolute; left: 15px; width: 18px; height: 1.5px; background: currentColor; transition: transform .6s var(--ease); }
.burger__line:first-child { top: 20px; }
.burger__line:last-child { top: 27px; }
.burger[aria-expanded="true"] .burger__line:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Full-screen menu below 1400px */
/* The overlay is a solid layer: animating clip-path over a full-screen backdrop-filter
   forces a fresh blur of the page on every frame, which mobile browsers can't composite
   smoothly (visible flicker). At 96% opacity the blur was barely visible anyway. */
.menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px var(--gutter) 40px; overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(251, 248, 241);
  clip-path: circle(0% at calc(100% - 52px - var(--gutter)) 46px);
  visibility: hidden;
  will-change: clip-path;
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 52px - var(--gutter)) 46px); visibility: visible; transition: clip-path .9s var(--ease), visibility 0s; }
.menu li { overflow: hidden; max-width: 760px; width: 100%; margin-inline: auto; }
/* Closing: every link leaves together and finishes (.35s) well before the panel hides (.6s),
   so no row is caught mid-slide when visibility flips. Opening keeps the staggered entrance. */
.menu a {
  display: flex; align-items: baseline; gap: 18px; min-height: 48px; padding: 6px 0;
  font-family: var(--serif); font-size: clamp(1.7rem, 6.4vw, 3rem); line-height: 1.15; color: var(--purple); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transform: translateY(110%); transition: transform .35s var(--ease), color .3s;
}
.menu.is-open a { transform: none; transition: transform .8s var(--ease) calc(var(--i) * 45ms + 120ms), color .3s; }
.menu a:hover, .menu a.is-active { color: var(--plum); }
.menu__no { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--gold-ink); }
.menu__cta a { color: var(--plum); font-style: italic; }
@media (max-height: 640px) { .menu { justify-content: flex-start; } .menu a { font-size: 1.5rem; } }

@media (min-width: 1400px) {
  .burger { display: none; }
  .menu, .menu.is-open {
    position: absolute; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
    flex-direction: row; justify-content: center; gap: 2px; padding: 0; overflow: visible;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none; visibility: visible; z-index: 3;
  }
  .menu li { max-width: none; width: auto; margin: 0; overflow: visible; }
  .menu a {
    transform: none; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--ink);
    border: 0; min-height: 40px; padding: 8px 8px; border-radius: 999px; align-items: center; white-space: nowrap;
  }
  /* The menu is centred over the pill, so it has to clear the brand and the CTA on narrower desktops. */
  .menu, .menu.is-open { max-width: calc(100% - 420px); flex-wrap: nowrap; }
  .menu a:hover, .menu a.is-active { background: var(--lilac); color: var(--plum); }
  .menu__no, .menu__cta { display: none; }
}

/* ---------- Hero (static default) ---------- */
.hero { padding: 132px 0 clamp(72px, 9vw, 120px); }
.hero__stage { display: grid; justify-items: center; gap: 32px; padding-inline: var(--gutter); text-align: center; }
.hero__title { font-size: clamp(2.5rem, 10.4vw, 8.5rem); line-height: 0.96; color: var(--purple); letter-spacing: -0.01em; }
.hero__line { display: block; }
.hero__word { display: inline-block; }
.hero__title em { color: var(--plum); }
.hero__frame { position: relative; margin: 0; width: min(72vw, 360px); aspect-ratio: 3 / 4; overflow: hidden; clip-path: inset(0 round 999px 999px 28px 28px); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero__scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgb(var(--th-d2, 28 8 42) / 0.86) 0%, rgb(var(--th-d2, 28 8 42) / 0.45) 38%, rgb(var(--th-d2, 28 8 42) / 0) 70%); }
.hero__outline, .hero__cue { display: none; }
.hero__after { display: grid; justify-items: center; gap: 18px; max-width: 620px; }
.hero__lead { color: var(--ink-soft); font-size: 1.08rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Hero (motion: zoom-through) ---------- */
.is-fx .hero { padding: 0; }
.is-fx .hero__stage { position: relative; display: block; height: 100vh; height: 100svh; overflow: hidden; padding: 0; text-align: left; }
.is-fx .hero__title { position: absolute; inset: 0; z-index: 1; font-size: min(8.2vw, 13.5svh); pointer-events: none; }
.is-fx .hero__line { position: absolute; left: var(--gutter); right: var(--gutter); overflow: hidden; padding-bottom: 0.22em; } /* room for the y descender, so the line mask does not clip it */
.is-fx .hero__line--1 { top: calc(var(--header-h) + 2svh); }
.is-fx .hero__line--2 { top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
.is-fx .hero__line--2 .hero__word:first-child { justify-self: end; padding-right: 0.08em; }
.is-fx .hero__line--2 .hero__word:last-child { justify-self: start; padding-left: 0.2em; } /* italic M overhangs its box */
.is-fx .hero__line--3 { bottom: 4svh; right: calc(var(--gutter) + 64px); text-align: right; } /* clear the floating enquiry button */
.is-fx .hero__gap { display: inline-block; width: calc(var(--fw, 300px) + 4vw + 24px); }
.is-fx .hero__frame { position: absolute; inset: 0; width: auto; aspect-ratio: auto; z-index: 2; clip-path: none; }
.is-fx .hero__outline {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  top: calc(var(--wt, 0px) - 12px); left: calc(var(--wl, 0px) - 12px);
  width: calc(var(--fw, 0px) + 24px); height: calc(var(--fh, 0px) + 24px);
  border: 1px solid var(--gold); border-radius: 999px 999px 34px 34px;
}
.is-fx .hero__cue {
  display: flex; align-items: center; gap: 10px; position: absolute; left: var(--gutter); bottom: 5svh; z-index: 3;
  font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
}
.hero__cue span { width: 1px; height: 40px; background: var(--gold); transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.is-fx .hero__after {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 8svh;
  justify-items: start; text-align: left; max-width: 640px;
}
.is-fx .hero__after .eyebrow { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: var(--white); }
.is-fx .hero__lead { color: rgba(255, 255, 255, 0.92); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.is-fx .hero__actions { justify-content: flex-start; }
.is-fx .hero .btn--glass { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.is-fx .hero .btn--glass .btn__icon { background: rgba(255, 255, 255, 0.16); }
.is-fx .hero .bezel { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.is-fx .hero :focus-visible { outline-color: var(--gold); }
@media (max-width: 767px) {
  .is-fx .hero__title { font-size: min(12.6vw, 9svh); }
  .is-fx .hero__line { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; text-align: left; display: block; }
  .is-fx .hero__title { display: block; padding: calc(var(--header-h) + 16px) var(--gutter) 0; }
  .is-fx .hero__gap { display: none; }
  .is-fx .hero__line--2 .hero__word:last-child { margin-left: 0.05em; padding-left: 0.2em; }
  .is-fx .hero__line--2 .hero__word:first-child { padding-right: 0; }
  .is-fx .hero__line--2 { display: block; }
  .is-fx .hero__after { bottom: 6svh; }
  .is-fx .hero__cue { display: none; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding-block: clamp(28px, 4vw, 48px); border-block: 1px solid var(--line); background: var(--white); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { display: block; padding-right: 2.4rem; white-space: nowrap; font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 3.6rem); color: var(--purple); }
.marquee__track i { font-style: normal; color: var(--gold); font-size: 0.6em; vertical-align: middle; margin-inline: 0.6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Makeover: rolling ring ---------- */
.makeover { padding-block: clamp(96px, 11vw, 160px); background: linear-gradient(180deg, var(--ivory), var(--blush)); }
.makeover__pin { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 48px; }
.makeover__intro { display: grid; gap: 22px; justify-items: start; align-content: center; }
.ring-index { display: none; }
.ring { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ring { grid-template-columns: 1fr 1fr; } }
.ring__panel { background: var(--white); border-radius: 26px; padding: 8px; box-shadow: var(--shadow-soft); display: grid; }
.ring__img { overflow: hidden; border-radius: 20px; aspect-ratio: 1 / 1; position: relative; }
.ring__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ring__text { padding: 18px 14px 14px; display: grid; gap: 6px; }
.ring__no { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold-ink); }
.ring__text h3 { font-family: var(--serif); font-size: 1.55rem; color: var(--purple); }
.ring__text p { font-size: 0.92rem; color: var(--ink-soft); }

@media (min-width: 1024px) {
  .makeover.ring-on { padding: 0; }
  .ring-on .makeover__pin { overflow: hidden; height: 100vh; height: 100svh; grid-template-columns: 0.85fr 1.15fr; align-items: center; padding-top: var(--header-h); gap: 24px; }
  .ring-on .ring-index { display: grid; gap: 4px; margin: 4px 0 8px; }
  .ring-on .ring-index li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--ink-soft); transition: color .4s var(--ease); }
  .ring-on .ring-index li::before { content: ""; width: 42px; height: 1px; background: currentColor; transform: scaleX(0.43); transform-origin: left center; transition: transform .5s var(--ease); }
  .ring-on .ring-index li.is-active { color: var(--plum); font-weight: 600; }
  .ring-on .ring-index li.is-active::before { transform: scaleX(1); background: var(--gold); }
  .ring-on .ring-stage { position: relative; height: min(76svh, 640px); perspective: 1600px; display: grid; place-items: center; }
  .ring-on .ring { position: relative; display: block; width: 300px; height: min(64svh, 500px); transform-style: preserve-3d; }
  .ring-on .ring__panel {
    position: absolute; inset: 0; grid-template-rows: 1fr auto;
    /* --step is set per ring by the script, so a panel added or removed still spaces evenly. */
    transform: rotateY(calc(var(--i) * var(--step, 72deg))) translateZ(var(--r, 290px));
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .ring-on .ring__img { aspect-ratio: auto; min-height: 0; }
}

/* ---------- Studio gallery: a plain picture grid, easy to swap ---------- */
.studio-gallery { background: linear-gradient(180deg, var(--white), var(--blush)); }
.sg-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .sg-grid { grid-template-columns: repeat(4, 1fr); } }
.sg-item { border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.sg-item img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.sg-item:hover img { transform: scale(1.05); }
.studio-gallery .note--center { margin-top: 22px; }

/* ---------- Gallery: zoom parallax (static grid by default) ---------- */
.gallery { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(64px, 8vw, 120px); background: var(--white); }
.gallery__head { margin-bottom: clamp(40px, 5vw, 64px); }
.zp__list { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { .zp__list { grid-template-columns: repeat(4, 1fr); gap: 16px; } .zp__el--0 { grid-column: span 2; grid-row: span 2; } }
.zp__img { position: relative; margin: 0; overflow: hidden; border-radius: 20px; height: 100%; min-height: 200px; }
.zp__img img { width: 100%; height: 100%; object-fit: cover; }
.zp__img figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--purple); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
}
.is-fx .gallery { padding-bottom: 0; }
.is-fx .zp { position: relative; height: 300vh; }
.is-fx .zp__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-fx .zp__list { display: block; max-width: none; padding: 0; height: 100%; }
.is-fx .zp__el { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.is-fx .zp__img { position: relative; width: 25vw; height: 25vh; min-height: 0; border-radius: 14px; }
.is-fx .zp__el--1 .zp__img { top: -30vh; left: 5vw; width: 35vw; height: 30vh; }
.is-fx .zp__el--2 .zp__img { top: -10vh; left: -25vw; width: 20vw; height: 45vh; }
.is-fx .zp__el--3 .zp__img { left: 27.5vw; width: 25vw; height: 25vh; }
.is-fx .zp__el--4 .zp__img { top: 27.5vh; left: 5vw; width: 20vw; height: 25vh; }
.is-fx .zp__el--5 .zp__img { top: 27.5vh; left: -22.5vw; width: 30vw; height: 25vh; }
.is-fx .zp__el--6 .zp__img { top: 22.5vh; left: 25vw; width: 15vw; height: 15vh; }
@media (max-width: 767px) {
  .is-fx .zp__img { width: 38vw; height: 22vh; }
  .is-fx .zp__el--1 .zp__img { top: -28vh; left: 6vw; width: 46vw; height: 22vh; }
  .is-fx .zp__el--2 .zp__img { top: -1vh; left: -33.5vw; width: 23vw; height: 28vh; }
  .is-fx .zp__el--3 .zp__img { left: 33vw; width: 24vw; height: 20vh; }
  .is-fx .zp__el--4 .zp__img { top: 26vh; left: 6vw; width: 34vw; height: 20vh; }
  .is-fx .zp__el--5 .zp__img { top: 24vh; left: -29.5vw; width: 33vw; height: 18vh; }
  .is-fx .zp__el--6 .zp__img { top: -28vh; left: -32.5vw; width: 22vw; height: 13vh; }
}

/* ---------- Booking ---------- */
.book { background: linear-gradient(180deg, var(--white), var(--blush)); }
/* One upright panel: heading centred, then the choices, then the form. */
.book__panel {
  max-width: 980px; margin-inline: auto; display: grid; gap: 32px;
  padding: clamp(24px, 4vw, 52px); border-radius: 24px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
}
.book__head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.book__head .lead { max-width: 60ch; }
.book__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px) { .book__grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.book__intro { display: grid; gap: 20px; justify-items: start; }
.note--center { text-align: center; }
.steps { display: grid; gap: 12px; margin-top: 4px; }
.steps li { display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--ink); }
.steps span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--serif); color: var(--plum); }
.book__shell { padding: 8px; border-radius: 36px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.book__core { padding: clamp(22px, 4vw, 44px); border-radius: 28px; background: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }

/* Look builder (ported from V3) */
.builder { width: 100%; }
.builder__core {
  display: grid; gap: 22px; padding: clamp(20px, 3vw, 32px); border-radius: 18px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.builder__optional { margin-left: auto; white-space: nowrap; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); }
.builder__hint { font-size: 0.86rem; color: var(--ink-soft); }
.builder__error { min-height: 0; font-size: 0.82rem; font-weight: 600; color: #a3203a; }
.builder__error:empty { display: none; }
.builder__step--addons .choice-row[hidden] { display: none; }
/* An add-on is a toggle, not a step: square it off so it reads differently. */
.choice--addon { border-radius: 14px; }
.choice--addon[aria-pressed="true"] { background: var(--plum); }
.book__form { display: grid; gap: 22px; }
.builder__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.builder__title { font-family: var(--serif); font-size: 1.5rem; color: var(--purple); }
.builder__count { font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); }
.progress { height: 6px; border-radius: 99px; background: rgb(var(--th-b1, 53 16 78) / 0.1); overflow: hidden; }
.progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--plum); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.builder__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.builder__step legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--purple); }
.builder__step legend span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(212 175 98 / 0.22); color: var(--gold-ink); font-size: 0.8rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border-radius: 99px;
  border: 0; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line);
  font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.choice:hover { box-shadow: 0 0 0 1px rgb(var(--th-b1, 53 16 78) / 0.34); }
.choice:active { transform: scale(0.97); }
.choice[aria-pressed="true"] { background: var(--purple); color: var(--white); box-shadow: none; }
.builder__summary { padding: 14px 16px; border-radius: 18px; background: rgb(212 175 98 / 0.14); color: var(--purple); font-size: 0.92rem; font-weight: 500; }

.enquiry-form { display: grid; gap: 22px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Wave label + centre-out focus bar adapted from Uiverse.io (AbanoubMagdy1, G4b413l) */
.wave { font-size: 0.875rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.wave__char { display: inline-block; white-space: pre; transition: transform .35s var(--ease-out), color .35s; transition-delay: calc(var(--ci, 0) * 22ms); }
.field:focus-within .wave__char { transform: translateY(-3px); color: var(--plum); }
.req { color: var(--error); margin-left: 2px; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field__control { position: relative; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  border: 0; border-bottom: 1.5px solid #7D7383; border-radius: 14px 14px 4px 4px;
  background: rgb(var(--th-b1, 53 16 78) / 0.04); font-size: 1rem; color: var(--ink);
  transition: background-color .3s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E6573; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: rgb(var(--th-b2, 75 23 104) / 0.07); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .45s var(--ease); pointer-events: none; }
.field__control:focus-within .bar { transform: scaleX(1); }
.field__hint { font-size: 0.8125rem; color: var(--ink-soft); }
.field__error { font-size: 0.875rem; color: var(--error); }
.field__error:empty { display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--error); background: #FDF1F0; }
.form-note { font-size: 0.8125rem; color: var(--ink-soft); }

/* Send button adapted from Uiverse.io by ChanduOffl (https://uiverse.io/ChanduOffl/itchy-vampirebat-74) */
.send {
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 58px; padding: 10px 24px;
  border: 0; border-radius: 999px; background: var(--purple); color: var(--white);
  font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 10px 26px -12px rgba(37, 31, 41, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  transition: transform .4s var(--ease);
}
.send::before {
  content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 999px;
  background: linear-gradient(0deg, var(--th-grad1, #3F1260) 0%, var(--th-grad2, #4B1768) 70%, var(--th-grad3, #5A2079) 100%);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.18);
  transition: transform .35s var(--ease);
}
.send:hover::before { transform: scale(0.985, 0.9); }
.send:active { transform: scale(0.98); }
.send__icon { width: 30px; height: 30px; transition: transform .35s var(--ease); }
.send:hover .send__icon { transform: translateX(6px); }
.send:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.send:focus-visible .send__icon { transform: rotate(-40deg); }

.form-status { display: none; padding: 16px 18px; border-radius: 18px; border: 1px solid; font-size: 0.95rem; }
.form-status.is-error, .form-status.is-success, .form-status.is-info { display: grid; gap: 10px; justify-items: start; }
.form-status.is-error { border-color: var(--error); color: var(--error); background: #FDF1F0; }
.form-status.is-success { border-color: var(--success); color: var(--success); background: #EEF7F1; }
.form-status.is-info { border-color: var(--gold-ink); color: var(--ink); background: #FBF4E4; }
.form-status__summary {
  width: 100%; margin: 0; padding: 12px; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
}
.form-status .btn--ghost, .form-status button {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--purple); font-weight: 600;
}

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .contact__grid:has(.map-embed:not([hidden])) { grid-template-columns: 1fr 1fr; } }
.contact__list { display: grid; gap: 12px; margin: 0; }
@media (min-width: 600px) { .contact__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact__list { grid-template-columns: repeat(3, 1fr); } }
.contact__list > div { padding: 22px 24px; border-radius: 24px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.contact__list dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.contact__list dd { margin: 8px 0 0; font-family: var(--serif); font-size: 1.25rem; color: var(--purple); word-break: break-word; }
.contact__list dd a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.is-placeholder { font-style: italic; opacity: 0.8; }
.hours-row { display: block; }
.social-link { display: inline-flex; min-height: 44px; align-items: center; margin-right: 16px; }
.map-embed { border-radius: 24px; overflow: hidden; min-height: 300px; }
.map-embed iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--purple); color: rgba(251, 248, 241, 0.8); padding-top: clamp(72px, 8vw, 110px); overflow: hidden; font-size: 0.95rem; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__brand { display: grid; gap: 14px; justify-items: start; max-width: 340px; }
.footer__tagline { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.footer__col h2 { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.footer__col li { margin-bottom: 2px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.footer__col a:hover { color: var(--gold); }
.footer__contact li { margin-bottom: 10px; }
.site-footer :focus-visible { outline-color: var(--gold); }
.giant {
  margin: clamp(48px, 7vw, 96px) 0 0; text-align: center; white-space: nowrap;
  font-family: var(--serif); font-size: calc((100vw - 2 * var(--gutter)) / 5.6); line-height: 0.9; color: var(--ivory);
}
@media (min-width: 1360px) { .giant { font-size: calc((1280px - 2 * var(--gutter)) / 5.6); } }
.giant i { color: var(--gold); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 28px; padding-block: 22px; border-top: 1px solid rgb(var(--th-g, 212 175 98) / 0.25); font-size: 0.85rem; }
.footer__bottom a { color: var(--gold); display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Floating enquiry button ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--purple); color: var(--gold); text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(37, 31, 41, 0.45);
  transition: transform .5s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wa-float:focus-visible { outline-color: var(--gold); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__track span + span { display: none; }
  .marquee__track span { white-space: normal; text-align: center; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .menu a { transform: none; }
}

/* ---------- Phones: fast first paint ----------
   No preloader wait, no headline entrance: the hero headline and the arch image
   are painted as they are on the first frame. main.js also skips the GSAP hero
   intro on phones, so nothing animates the headline in. */
@media (prefers-reduced-motion: reduce) {
  .hero__word, .hero__line--2 { animation: none !important; }
}

/* ======================================================================
   Ported sections (restyled to V4 tokens)
   ====================================================================== */
.btn--sm { min-height: 46px; padding: 6px 6px 6px 18px; font-size: 0.875rem; gap: 10px; }
.btn--sm .btn__icon { width: 34px; height: 34px; }
.section-head--left { justify-items: start; text-align: left; margin-inline: 0; }
.sec-cta { display: flex; justify-content: center; margin-top: 48px; }
.demo-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.badge-ladies { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--purple); color: var(--white); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Hero B (from V5): 3D jewel-box cube ---------- */
.hero2 {
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: 100vh; min-height: 100dvh;
  padding-block: clamp(96px, 10vw, 140px) clamp(72px, 8vw, 110px);
  background:
    radial-gradient(60% 60% at 88% 18%, rgba(243, 232, 238, 0.95), transparent 70%),
    radial-gradient(45% 50% at 6% 92%, rgba(212, 175, 98, 0.16), transparent 70%),
    var(--ivory);
}
.h2-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.h2-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .h2-grid { grid-template-columns: 1.05fr 0.95fr; gap: 32px; } }
.h2-copy { position: relative; display: grid; justify-items: start; gap: 24px; }
.h2-title { font-family: var(--serif); font-size: clamp(2.7rem, 6.4vw, 6rem); line-height: 0.98; color: var(--purple); }
.h2-line { display: block; white-space: nowrap; }
.h2-line--rg { color: var(--plum); font-style: italic; padding-bottom: 0.06em; }
.h2-lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 44ch; }
.h2-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eyebrow--mark { background: var(--purple); color: var(--white); box-shadow: none; }
.eyebrow--mark::before { background: var(--gold); }
.doorstep-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 44ch; }
.doorstep-points li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: 0.98rem; }
.doorstep-points li::before { /* gold tick */
  content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 7px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}
.reel { display: inline-block; height: 1.02em; overflow: hidden; vertical-align: top; }
.reel__strip { display: flex; flex-direction: column; }
.reel__strip > span { display: block; height: 1.02em; line-height: 1.02em; }
.reel--space { width: 0.26em; }
.roll-badge { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; color: var(--purple); text-decoration: none; margin-top: 4px; }
.roll-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: badgeSpin 22s linear infinite; }
.roll-badge__ring text { font-family: var(--sans); font-size: 15px; letter-spacing: 0.04em; fill: var(--purple); }
.roll-badge__arrow { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--purple); color: var(--white); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
.h2-stage { position: relative; display: grid; place-items: center; min-height: clamp(320px, 46vw, 560px); }
.cube-scene { --s: clamp(190px, 24vw, 330px); width: var(--s); height: var(--s); perspective: 1400px; }
.cube-roll { width: 100%; height: 100%; transform-style: preserve-3d; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cubeRoll 26s linear infinite; }
.cube__face { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--white); padding: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.cube__face img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; }
.cube__face--front { transform: translateZ(calc(var(--s) / 2)); }
.cube__face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube__face--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes cubeRoll { 0% { transform: rotateX(-18deg) rotateY(0deg); } 50% { transform: rotateX(16deg) rotateY(180deg); } 100% { transform: rotateX(-18deg) rotateY(360deg); } }
.orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(212, 175, 98, 0.45); pointer-events: none; }
.orbit--a { width: min(92%, 520px); aspect-ratio: 1 / 0.42; transform: translate(-50%, -50%) rotate(-14deg); animation: orbitA 18s linear infinite; }
.orbit--b { width: min(78%, 440px); aspect-ratio: 1 / 0.36; transform: translate(-50%, -50%) rotate(22deg); border-style: dashed; border-color: rgba(75, 23, 104, 0.25); animation: orbitB 26s linear infinite; }
@keyframes orbitA { to { transform: translate(-50%, -50%) rotate(346deg); } }
@keyframes orbitB { to { transform: translate(-50%, -50%) rotate(-338deg); } }
.float-chip { position: absolute; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); animation: chipFloat 6s ease-in-out infinite; }
.float-chip--a { left: 4%; top: 14%; }
.float-chip--b { right: 2%; top: 48%; animation-delay: -2s; }
.float-chip--c { left: 14%; bottom: 8%; animation-delay: -4s; }
@keyframes chipFloat { 50% { transform: translateY(-12px); } }

/* ---------- Services (from V3): z-axis cascade of double-bezel cards ---------- */
.svc { background: var(--white); }
/* Three services: two columns on tablets, three on desktop, centred. */
.cascade { display: grid; gap: 20px; justify-content: center; }
@media (min-width: 640px) { .cascade { grid-template-columns: repeat(2, minmax(0, 340px)); gap: 22px; } }
@media (min-width: 1000px) { .cascade { grid-template-columns: repeat(3, minmax(0, 340px)); } }
.shell { padding: 6px; border-radius: 30px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.core { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: var(--white); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9); }
.cascade__card .core { display: flex; flex-direction: column; }
.cascade__img { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: 24px 24px 0 0; }
.cascade__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.cascade__card:hover .cascade__img img { transform: scale(1.05); }
.cascade__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 18px; }
.cascade__no { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--gold-ink); }
.cascade__body h3 { font-family: var(--serif); font-size: 1.6rem; color: var(--purple); }
.cascade__body p { flex: 1; font-size: 0.95rem; color: var(--ink-soft); }
.link-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 0.9rem; color: var(--plum); text-decoration: none; }
.link-pill__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lilac); transition: transform .6s var(--ease); }
.link-pill__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.link-pill:hover .link-pill__icon { transform: translate(3px, -2px) scale(1.06); }
@supports not (aspect-ratio: 1 / 1) { .cascade__img { height: 0; padding-top: 115%; } .cascade__img img { position: absolute; inset: 0; } }

/* ---------- Ladies A (from V5): rolling horizontal track ---------- */
.ladies { padding-block: clamp(96px, 11vw, 160px); background: linear-gradient(180deg, var(--ivory), var(--blush) 60%, var(--ivory)); overflow: hidden; }
.ladies__track { position: relative; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 40px; }
.ladies__intro { display: grid; justify-items: start; gap: 20px; }
.ladies__intro h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; color: var(--purple); }
.lcards { display: grid; gap: 20px; }
@media (min-width: 600px) { .lcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) and (max-width: 1023px) { .lcards { grid-template-columns: repeat(3, 1fr); } }
.lcard { border-radius: 30px; padding: 7px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.lcard__img { position: relative; aspect-ratio: 4 / 4.6; border-radius: 23px; overflow: hidden; }
.lcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lcard:hover .lcard__img img { transform: scale(1.12); }
.lcard__body { padding: 16px 12px 12px; display: grid; gap: 6px; }
.lcard__no { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold-ink); }
.lcard h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--purple); }
.lcard p { color: var(--ink-soft); font-size: 0.93rem; }
.lcard--ladies { box-shadow: inset 0 0 0 1.5px rgba(122, 94, 28, 0.55), var(--shadow-soft); }
.lcard .badge-ladies { position: absolute; left: 12px; top: 12px; z-index: 2; }
@supports not (aspect-ratio: 1 / 1) { .lcard__img { height: 0; padding-top: 115%; } .lcard__img img { position: absolute; inset: 0; } }
/* Desktop horizontal mode (main.js adds .ladies-h on <html>). */
.ladies-h .ladies { padding-block: 0; }
.ladies-h .ladies__pin { height: 100vh; height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.ladies-h .ladies__track { display: flex; align-items: center; gap: 36px; max-width: none; width: max-content; padding-inline: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))) 12vw; }
.ladies-h .ladies__intro { width: min(440px, 34vw); flex: none; }
.ladies-h .lcards { display: flex; gap: 30px; }
.ladies-h .lcard { width: clamp(260px, 22vw, 320px); flex: none; }

/* ---------- Ladies B (from V6): flip cards ---------- */
.flipset { background: var(--white); }
.flip-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .flip-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.flip-card { position: relative; perspective: 1400px; aspect-ratio: 3 / 4; }
.flip-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .flip-card:hover .flip-card__inner { transform: rotateY(180deg); } }
.flip-face { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face--front { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 16px; background: var(--purple); color: var(--white); }
.flip-face--front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-face--front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 8, 42, 0) 38%, rgba(28, 8, 42, 0.88) 100%); }
.flip-face--front h3, .flip-face--front .badge-ladies { position: relative; z-index: 1; }
.flip-face--front h3 { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.05; }
.flip-face--front .badge-ladies { background: var(--gold); color: var(--purple); }
.flip-face--back { transform: rotateY(180deg); display: grid; align-content: center; gap: 12px; padding: 22px; background: var(--lilac); color: var(--purple); }
.flip-card:nth-child(even) .flip-face--back { background: var(--blush); }
.flip-card--ladies .flip-face--back { background: #F6EEDB; }
.flip-face__title { font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.05; }
.flip-face--back p:not(.flip-face__title) { color: var(--ink); font-size: 0.98rem; }
.flip-face--back .badge-ladies { justify-self: start; }
.flip-card__btn { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: pointer; }
.flip-card__hint { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; min-width: 44px; min-height: 30px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--purple); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity .3s; }
.flip-card.is-flipped .flip-card__hint { opacity: 0; }
@media (max-width: 479px) { .flip-face--back { padding: 16px; } .flip-face--back p:not(.flip-face__title) { font-size: 0.9rem; } }

/* ---------- Rental (from V6): rotating wheel ---------- */
.rental { background: var(--blush); overflow: hidden; }
.rental__grid { display: grid; gap: 56px; align-items: center; max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 1024px) { .rental__grid { grid-template-columns: 1.05fr 0.95fr; } }
.rental .section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.rent-cards { display: grid; gap: 18px; }
@media (min-width: 600px) { .rent-cards { grid-template-columns: 1fr 1fr; } }
.rent-card { display: flex; flex-direction: column; padding: 6px; border-radius: 30px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.rent-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; }
.rent-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rent-card:hover .rent-card__img img { transform: scale(1.06); }
.rent-card__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 16px 16px; flex: 1; }
.rent-card h3 { font-family: var(--serif); font-size: 1.75rem; color: var(--purple); }
.rent-card p { color: var(--ink-soft); flex: 1; font-size: 0.96rem; }
.rental__note { margin-top: 18px; font-size: 0.875rem; color: var(--ink-soft); }
.wheel-wrap { position: relative; width: min(78vw, 520px); aspect-ratio: 1; margin: 12% auto calc(12% + 48px); }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(75, 23, 104, 0.3); }
.wheel__spoke { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; transform: rotate(calc(var(--i) * 45deg)) translateY(-150%) rotate(calc(var(--i) * -45deg)); }
.wheel__spoke img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--white); box-shadow: var(--shadow-soft); }
.wheel__hub { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--white); text-align: center; font-family: var(--serif); font-size: clamp(1.1rem, 2.6vw, 1.7rem); line-height: 1; box-shadow: 0 18px 40px -18px rgba(37, 31, 41, 0.45); }
.wheel__hub em { color: var(--gold); }
.wheel__caption { position: absolute; left: 50%; bottom: calc(-12% - 40px); transform: translateX(-50%); white-space: nowrap; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- Ported sections: reduced motion + phones ---------- */
@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; transform: rotateX(-14deg) rotateY(-28deg); }
  .orbit, .float-chip, .roll-badge__ring { animation: none; }
}
@media (max-width: 767px) {
  .roll-badge { display: none; }
  .h2-title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
}

/* ---------- Add-ons step stays hidden until occasion + plan are chosen ---------- */
.builder__step[hidden] { display: none; }

/* ---------- Rental image loading shimmer ---------- */
.wheel__spoke, .rent-card__img { background: linear-gradient(100deg, var(--lilac) 30%, var(--white) 50%, var(--lilac) 70%) 0 0 / 200% 100%; animation: img-shimmer 1.3s linear infinite; }
.wheel__spoke { display: block; border-radius: 50%; }
.wheel__spoke img { transition: opacity .5s ease; }
.rent-card__img img { transition: opacity .5s ease, transform 1.2s var(--ease); }
.wheel__spoke img.is-loading, .rent-card__img img.is-loading { opacity: 0; }
@keyframes img-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wheel__spoke, .rent-card__img { animation: none; } }

/* Wheel circles are links */
a.wheel__spoke, a.wheel__hub { text-decoration: none; cursor: pointer; }
a.wheel__spoke:focus-visible, a.wheel__hub:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a.wheel__spoke:hover img { box-shadow: 0 0 0 3px var(--gold); }

/* Looks we love: flip cards in the gallery grid */
.sg-flip .flip-face--front img { aspect-ratio: auto; }

/* Everyday care hides the Makeover and Grooming choices */
.choice[hidden] { display: none !important; }

/* Footer and contact social icons */
.footer__contact [data-cfg-social] { display: flex; gap: 12px; margin-top: 6px; }
.social-link--icon { width: 44px; height: 44px; min-height: 44px; margin-right: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); color: inherit; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.social-link--icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-link--icon svg .dot { fill: currentColor; stroke: none; }
.social-link--icon:hover { background: var(--gold); border-color: var(--gold); color: var(--purple); }

/* Booking: photo box and form panel side by side, same width and height */
.book .container { max-width: 1240px; }
.book__split { display: grid; gap: 24px; align-items: stretch; }
.book__split .book__panel { max-width: none; margin: 0; }
.book__photo { margin: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #fbe9ee, #f3d9e3); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); aspect-ratio: 4 / 3; }
.book__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 1000px) {
  .book__split { grid-template-columns: 1fr 1fr; gap: 28px; }
  .book__photo { aspect-ratio: auto; position: relative; min-height: 100%; }
  .book__photo img { position: absolute; inset: 0; object-position: 50% 70%; }
}

.book__credit { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 10px; background: rgba(20, 8, 28, 0.66); color: #fff; font-size: 0.72rem; line-height: 1.3; }
.book__credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.book__credit a:hover { color: var(--gold); }