/* ============================================================
   Kalash Decor — premium animated presentation
   Palette: deep maroon / royal maroon / rich gold / ivory
            (#45121E · #6B1F2E · #C3A15B · #FAF7F0)
   Type:    Marcellus (display) · Playfair Display (accents) · Jost (body)
   Motion:  preloader → hero entrance → scroll-choreographed
            reveals, parallax imagery, split-text headlines.
   Scrolling stays 100% native — nothing hijacks the wheel.
   ============================================================ */

:root {
  color-scheme: dark;
  --ivory:     #FAF7F0;
  --cream:     #6B1F2E;   /* royal maroon — alternating section panels */
  --charcoal:  #45121E;   /* deep maroon — base background & text on gold */
  --gold:      #C3A15B;
  --gold-deep: #D3B36E;   /* lighter gold — hovers & highlights */
  --gold-ink:  #E0C284;   /* pale gold — small emphasised text on dark */
  --champagne: #E7DDC4;
  --maroon:    #6B1F2E;
  --maroon-deep: #45121E;
  --ink:       #FAF7F0;
  --ink-soft:  rgba(250, 247, 240, 0.65);
  --ivory-soft:rgba(250, 247, 240, 0.6);
  --font-display: "Marcellus", Georgia, serif;
  --font-accent: "Playfair Display", Georgia, serif;
  --font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
  --header-h: 78px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-exp: cubic-bezier(.77, 0, .18, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: rgba(195, 161, 91, .4); color: var(--ivory); }

html { scroll-behavior: smooth; }
section, footer { scroll-margin-top: calc(var(--header-h) + 8px); }

body {
  font-family: var(--font-body);
  background: var(--maroon-deep);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-y { padding: 110px 0; }
.bg-cream { background: var(--cream); }
.bg-charcoal { background: var(--charcoal); color: var(--ivory); }

/* film-grain texture overlay */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ambient floating blobs */
.blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .55; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(195,161,91,.32), transparent 70%);
  animation: bfloat 16s ease-in-out infinite alternate;
}
.blob.maroon { background: radial-gradient(circle, rgba(107,31,46,.26), transparent 70%); }
@keyframes bfloat {
  to { transform: translate(36px, -44px) scale(1.18); }
}

/* ------------------------------------------------------------
   Ambient background system — slow maroon/gold aurora washes
   inside the dark rooms, faint rotating mandala line-art, and a
   jaali lattice etched into the panel sections. Every layer is
   pointer-transparent and switched off under reduced motion.
   ------------------------------------------------------------ */

/* jaali lattice — a quiet ornamental screen etched into panels */
.bg-cream { position: relative; }
.bg-cream::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M18 0H42L60 18V42L42 60H18L0 42V18Z' fill='none' stroke='%23E7DDC4' stroke-width='.8'/%3E%3Cpath d='M30 22L38 30L30 38L22 30Z' fill='none' stroke='%23E7DDC4' stroke-width='.8'/%3E%3C/svg%3E") repeat;
  background-size: 60px 60px;
}

.bg-charcoal.section-y, .show-pin, .catch-pin { isolation: isolate; }
.bg-charcoal.section-y::before, .show-pin::before, .catch-pin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 44% at 16% 28%, rgba(107, 31, 46, .42), transparent 70%),
    radial-gradient(44% 40% at 84% 74%, rgba(195, 161, 91, .15), transparent 72%),
    radial-gradient(38% 34% at 58% 8%, rgba(107, 31, 46, .28), transparent 70%);
  background-size: 150% 150%;
  background-position: 0% 0%, 100% 100%, 50% 0%;
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  to { background-position: 60% 55%, 40% 30%, 85% 70%; }
}

.mandala {
  position: absolute; pointer-events: none; z-index: 0;
  width: 560px; height: 560px; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C3A15B' stroke-width='.6'%3E%3Cdefs%3E%3Cpath id='p' d='M100 12C112 40 112 62 100 74C88 62 88 40 100 12Z'/%3E%3Ccircle id='d' cx='100' cy='18' r='1.5'/%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='97'/%3E%3Ccircle cx='100' cy='100' r='88'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='100' r='26'/%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(30 100 100)'/%3E%3Cuse href='%23p' transform='rotate(60 100 100)'/%3E%3Cuse href='%23p' transform='rotate(90 100 100)'/%3E%3Cuse href='%23p' transform='rotate(120 100 100)'/%3E%3Cuse href='%23p' transform='rotate(150 100 100)'/%3E%3Cuse href='%23p' transform='rotate(180 100 100)'/%3E%3Cuse href='%23p' transform='rotate(210 100 100)'/%3E%3Cuse href='%23p' transform='rotate(240 100 100)'/%3E%3Cuse href='%23p' transform='rotate(270 100 100)'/%3E%3Cuse href='%23p' transform='rotate(300 100 100)'/%3E%3Cuse href='%23p' transform='rotate(330 100 100)'/%3E%3Cuse href='%23d' transform='rotate(15 100 100)'/%3E%3Cuse href='%23d' transform='rotate(45 100 100)'/%3E%3Cuse href='%23d' transform='rotate(75 100 100)'/%3E%3Cuse href='%23d' transform='rotate(105 100 100)'/%3E%3Cuse href='%23d' transform='rotate(135 100 100)'/%3E%3Cuse href='%23d' transform='rotate(165 100 100)'/%3E%3Cuse href='%23d' transform='rotate(195 100 100)'/%3E%3Cuse href='%23d' transform='rotate(225 100 100)'/%3E%3Cuse href='%23d' transform='rotate(255 100 100)'/%3E%3Cuse href='%23d' transform='rotate(285 100 100)'/%3E%3Cuse href='%23d' transform='rotate(315 100 100)'/%3E%3Cuse href='%23d' transform='rotate(345 100 100)'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: mspin 150s linear infinite;
}
.mandala.bright { opacity: .09; }
@keyframes mspin { to { transform: rotate(360deg); } }

.hairline {
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 14px;
}
.hairline::before {
  content: ""; width: 42px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-exp) calc(var(--d, 0s) + .15s);
}
[data-anim].in.hairline::before,
[data-anim].in .hairline::before,
body.ready .hload.hairline::before { transform: scaleX(1); }
.hairline.center { justify-content: center; }
.hairline.light { color: var(--ivory-soft); }

.display { font-family: var(--font-display); font-weight: 400; line-height: 1.1; }
.italic-gold { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--gold); }

h1.display { font-size: clamp(2.3rem, 4vw, 4rem); }
h2.display { font-size: clamp(1.9rem, 3.4vw, 3rem); }

.lead { color: var(--ink-soft); font-weight: 300; }

/* ------------------------------------------------------------
   Preloader
   ------------------------------------------------------------ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s var(--ease-exp), visibility 0s 1.05s;
}
body.ready .preloader { transform: translateY(-101%); visibility: hidden; }
.pre-inner { text-align: center; }
.pre-inner img { width: 240px; height: 115px; object-fit: contain; margin: 0 auto 18px; animation: prePulse 1.6s ease-in-out infinite; }
.pre-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--ivory); letter-spacing: .08em; }
.pre-sub { font-size: .56rem; letter-spacing: .42em; color: var(--ivory-soft); text-transform: uppercase; margin-top: 8px; }
.pre-line { display: block; width: 140px; height: 1px; background: var(--gold); margin: 22px auto 0; transform: scaleX(0); animation: preLine 1.1s var(--ease-exp) .15s forwards; }
@keyframes prePulse { 50% { opacity: .55; transform: scale(.94); } }
@keyframes preLine { to { transform: scaleX(1); } }

/* ------------------------------------------------------------
   Scroll progress bar + dot navigation
   ------------------------------------------------------------ */
.scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150;
  pointer-events: none;
}
.scrollbar span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), #D3B36E);
  transform: scaleX(0); transform-origin: left;
}

.dot-nav {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 16px;
}
.dot-nav a {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(195,161,91,.6); background: transparent;
  transition: background .3s, transform .3s, border-color .3s;
}
.dot-nav a:hover { border-color: var(--gold); transform: scale(1.35); }
.dot-nav a.active { background: var(--gold); border-color: var(--gold); transform: scale(1.35); }
.dot-nav a::after {
  content: attr(data-label);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(6px);
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.dot-nav a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1100px) { .dot-nav { display: none; } }

/* ------------------------------------------------------------
   Custom cursor (desktop only)
   ------------------------------------------------------------ */
@media (pointer: fine) {
  .cursor-dot, .cursor-ring {
    position: fixed; left: 0; top: 0; z-index: 300; border-radius: 50%;
    pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--gold); }
  .cursor-ring {
    width: 36px; height: 36px; border: 1px solid rgba(195,161,91,.55);
    transition: width .3s var(--ease-out), height .3s var(--ease-out),
                border-color .3s, background .3s;
  }
  body.cursor-on .cursor-dot, body.cursor-on .cursor-ring { opacity: 1; }
  body.cursor-hover .cursor-ring {
    width: 58px; height: 58px; border-color: var(--gold);
    background: rgba(195,161,91,.08);
  }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ------------------------------------------------------------
   Scroll-reveal system
   Elements carry data-anim="…" and get .in when they enter view.
   Delay comes from --d (set by JS from data-d / data-stagger).
   ------------------------------------------------------------ */
[data-anim] {
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-anim="fade"]      { opacity: 0; transition: opacity 1.1s var(--ease-out) var(--d, 0s); }
[data-anim="fade-up"]   { opacity: 0; transform: translateY(44px); }
[data-anim="fade-left"] { opacity: 0; transform: translateX(-44px); }
[data-anim="fade-right"]{ opacity: 0; transform: translateX(44px); }
[data-anim="zoom"]      { opacity: 0; transform: scale(.92); }
[data-anim="pop"]       { opacity: 0; transform: scale(.55) rotate(-5deg); }
[data-anim="card"]      { opacity: 0; transform: translateY(48px) rotate(var(--rot, 0deg)); }
[data-anim="fade-up"], [data-anim="fade-left"], [data-anim="fade-right"],
[data-anim="zoom"], [data-anim="card"] {
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);
}
[data-anim="pop"] { transition: opacity .7s var(--ease-out) var(--d, 0s), transform .9s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
[data-anim="blur-up"] {
  opacity: 0; transform: translateY(42px); filter: blur(14px);
  transition: opacity 1s var(--ease-out) var(--d, 0s),
              transform 1.1s var(--ease-out) var(--d, 0s),
              filter 1s var(--ease-out) var(--d, 0s);
}
[data-anim="blur-up"].in { filter: blur(0); }
[data-anim="tilt-up"] {
  opacity: 0; transform: perspective(900px) rotateX(24deg) translateY(56px);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.15s var(--ease-out) var(--d, 0s);
}

[data-anim].in { opacity: 1; transform: none; }

/* once a reveal has finished, its stagger delay is zeroed so hover
   transitions on the same element (and its imagery) feel instant */
[data-anim].settled { --d: 0s !important; }

/* image curtain reveals — clip opens while the photo settles from a zoom */
[data-anim="clip-up"], [data-anim="clip-right"] {
  transition: clip-path 1.35s var(--ease-exp) var(--d, 0s);
  will-change: clip-path;
}
[data-anim="clip-up"]    { clip-path: inset(0 0 100% 0); }
[data-anim="clip-right"] { clip-path: inset(0 100% 0 0); }
[data-anim="clip-up"].in, [data-anim="clip-right"].in { clip-path: inset(0 0 0 0); }
[data-anim="clip-up"] img, [data-anim="clip-right"] img {
  transform: scale(1.22);
  transition: transform 1.7s var(--ease-exp) var(--d, 0s);
}
[data-anim="clip-up"].in img, [data-anim="clip-right"].in img { transform: scale(1); }

/* split-text headlines — a writing-style reveal: each letter inks
   itself in sequence, like a pen travelling across the line */
.w { display: inline-block; white-space: nowrap; }
.ch {
  display: inline-block; opacity: 0;
  transform: translateY(.38em) rotate(3deg);
  filter: blur(6px);
  transition: opacity .55s var(--ease-out) var(--d, 0s),
              transform .65s var(--ease-out) var(--d, 0s),
              filter .55s var(--ease-out) var(--d, 0s);
  will-change: opacity, transform, filter;
}
.split.in .ch, body.ready .split-hero .ch { opacity: 1; transform: none; filter: none; }

/* parallax image plumbing */
.ir { position: relative; overflow: hidden; border-radius: 2px; }
.ir .plx { position: absolute; left: 0; right: 0; top: -50px; bottom: -50px; will-change: transform; }
.ir img { width: 100%; height: 100%; object-fit: cover; }

/* travelling highlight — the image nearest the viewport centre is
   gently brightened and framed in gold while the user scrolls */
.ir::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid rgba(195, 161, 91, 0);
  transition: border-color .6s ease;
}
.ir.lit::after { border-color: rgba(195, 161, 91, .5); }
.ir .plx { transition: filter .7s ease; }
.ir.lit .plx { filter: brightness(1.07) saturate(1.05); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  padding: 17px 34px; border: 1px solid transparent;
  transition: background .35s ease, color .25s ease, border-color .3s ease, transform .3s var(--ease-out);
  position: relative; overflow: hidden;
  isolation: isolate; /* own stacking context — keeps the -1 sweep above this button's background */
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-exp);
  z-index: -1; /* must sit under the whole label — raw text nodes included, not just spans */
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-solid { background: var(--gold); color: var(--charcoal); }
.btn-solid::before { background: var(--gold-deep); }
.btn-solid:hover { color: var(--charcoal); }
.btn-outline { border-color: rgba(250,247,240,.38); color: var(--ivory); background: transparent; }
.btn-outline::before { background: var(--gold-deep); } /* lighter than .btn-gold's resting gold so adjacent buttons never merge */
.btn-outline:hover { border-color: var(--gold); color: var(--charcoal); }
.btn-gold { background: var(--gold); color: var(--charcoal); }
.btn-gold::before { background: var(--gold-deep); }
.btn-gold:hover { color: var(--charcoal); }
.btn .arr { transition: transform .35s ease; }
.btn:hover .arr { transform: translateX(5px); }

/* ------------------------------------------------------------
   Header — hides on scroll down, returns on scroll up
   ------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(69, 18, 30, 0.72);
  border-bottom: 1px solid rgba(195, 161, 91, 0.22);
  transition: background .4s ease, box-shadow .4s ease, transform .55s var(--ease-out);
}
.site-header.scrolled { background: rgba(69, 18, 30, 0.95); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.site-header.hide { transform: translateY(-100%); }
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img {
  width: 120px; height: 56px; object-fit: contain;
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.brand:hover img {
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 6px 18px rgba(195, 161, 91, .55)) brightness(1.08);
}
.brand-name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.brand-sub { font-size: .56rem; letter-spacing: .3em; color: var(--ink-soft); text-transform: uppercase; }

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a {
  position: relative;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); padding: 6px 0;
  transition: color .3s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.main-nav a:hover { color: var(--gold); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-cta { font-size: .62rem; padding: 13px 26px; }

.menu-toggle { display: none; background: none; border: none; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }
.menu-toggle:hover span { background: var(--gold); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 24px; border-top: 1px solid rgba(195, 161, 91, 0.25);
  background: rgba(69, 18, 30, 0.97);
}
.mobile-nav a { padding: 12px 0; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid rgba(250,247,240,.12); }
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav.open { display: flex; }

/* ------------------------------------------------------------
   Hero — full-bleed photograph under a deep maroon wash,
   choreographed entrance after the preloader lifts
   ------------------------------------------------------------ */
.hero {
  min-height: calc(100svh - 64px); display: flex; align-items: center;
  padding: calc(var(--header-h) + 60px) 0 150px;
  position: relative; overflow: hidden;
  background: var(--maroon-deep); color: var(--ivory);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18); opacity: 0;
  transition: transform 2.1s var(--ease-exp) .25s, opacity 1.1s ease .25s;
}
body.ready .hero-bg img { transform: scale(1); opacity: 1; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(69,18,30,.6) 0%, rgba(69,18,30,.55) 40%, rgba(69,18,30,.94) 100%),
    linear-gradient(90deg, rgba(69,18,30,.72) 0%, rgba(69,18,30,.3) 60%, transparent 100%);
}

.hero-grid { width: 100%; position: relative; z-index: 1; }
.hero-copy { max-width: 50rem; }
.hero-copy .lead { margin: 30px 0 40px; max-width: 30rem; font-size: 1.02rem; color: var(--ivory-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 24px; }

/* gold rule beneath the italic phrase — draws in after the words land */
.hero .split-hero .italic-gold {
  border-bottom: 1px solid rgba(195,161,91,0); padding-bottom: .05em;
  transition: border-color .9s ease 1.5s;
}
body.ready .hero .split-hero .italic-gold { border-color: rgba(195,161,91,.65); }

/* stats — bordered cells anchored to the lower right */
.hero-stats {
  position: absolute; right: 24px; bottom: -14px;
  display: flex;
  border: 1px solid rgba(250,247,240,.2);
  background: rgba(69,18,30,.35);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.hero-stat { padding: 24px 34px; }
.hero-stat + .hero-stat { border-left: 1px solid rgba(250,247,240,.2); }
.hero-stat .num { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--gold); }
.hero-stat .num sup { color: var(--gold); font-size: 1.15rem; }
.hero-stat .lbl { font-size: .58rem; letter-spacing: .28em; color: var(--ivory-soft); text-transform: uppercase; margin-top: 10px; }

.hload {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s);
}
body.ready .hload { opacity: 1; transform: none; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: .58rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ivory-soft);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1;
}
.scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: cue 2s infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ------------------------------------------------------------
   Marquee divider — deep maroon band, spaced gold capitals
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden; padding: 20px 0;
  background: #4A151C;
  border-top: 1px solid rgba(195,161,91,.22);
  border-bottom: 1px solid rgba(195,161,91,.22);
}
.mq-track { display: flex; width: max-content; animation: mq 30s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span {
  font-family: var(--font-display); font-size: 1rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
  padding-right: 3rem; color: var(--gold);
}
.mq-track span i { font-style: normal; color: rgba(195,161,91,.5); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-copy h2 { margin: 26px 0 30px; }
.about-copy p { color: var(--ink-soft); font-weight: 300; margin-bottom: 20px; max-width: 33rem; }
.link-more {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 14px;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--gold); padding-bottom: 8px; transition: color .3s, gap .3s;
}
.link-more:hover { color: var(--gold); gap: 18px; }
.about-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Core values strip — mission, vision, values under the about grid */
.values-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 100px; }
.value-card {
  padding: 36px 32px 32px; position: relative;
  border: 1px solid rgba(195,161,91,.28); border-radius: 2px;
  background: rgba(195,161,91,.05);
  transition: transform .5s var(--ease-out), border-color .4s;
}
.value-card:hover { transform: translateY(-8px); border-color: var(--gold); }
.value-card .num { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .34em; color: var(--gold); }
.value-card h3 { font-family: var(--font-display); font-size: 1.45rem; margin: 14px 0 12px; }
.value-card p { font-size: .88rem; color: var(--ink-soft); font-weight: 300; }
.about-collage .ir { height: 240px; }
.about-collage .ir:nth-child(odd) { top: 24px; }

/* ------------------------------------------------------------
   Rooms
   ------------------------------------------------------------ */
.rooms-head { max-width: 46rem; }
.rooms-head h2 { margin-top: 26px; }
.rooms-head p.lead { margin-top: 22px; }

.room { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-top: 110px; }
.room:nth-child(even) .room-visual { order: -1; }
.room-palette { font-size: .6rem; letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
.room-num { font-family: var(--font-display); font-size: 4.6rem; color: rgba(195,161,91,.35); line-height: 1; margin-top: 14px; }
.room-kicker { font-size: .62rem; letter-spacing: .32em; color: var(--ink-soft); text-transform: uppercase; margin-top: 10px; }
.room h3 { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.9rem); margin-top: 12px; }
.room .lede { font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; color: var(--gold); margin-top: 16px; }
.room p.body { color: var(--ink-soft); font-weight: 300; margin: 20px 0 22px; max-width: 30rem; }
.room-offerings { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; max-width: 30rem; }
.room-offerings li {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid rgba(195,161,91,.4); border-radius: 999px; padding: 8px 15px;
  transition: color .3s, border-color .3s;
}
.room-offerings li:hover { color: var(--gold-ink); border-color: var(--gold); }

.room-visual { position: relative; }
/* the thumbs and the GROUND tag are absolutely positioned against
   .room-visual, so the main frame must always fill it edge to edge —
   any width the frame gives back leaves them floating in dead space */
.room-visual .main-ir {
  width: 100%; aspect-ratio: 1.04 / 1; max-height: 560px;
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
}
.room-visual .thumb {
  position: absolute; width: 150px; height: 100px; object-fit: cover;
  border: 5px solid var(--ivory); border-radius: 2px; box-shadow: 0 16px 38px rgba(0,0,0,.35);
  z-index: 2;
}
.room-visual .thumb.a { top: -22px; right: -26px; }
.room-visual .thumb.b { bottom: -24px; left: -18px; }
.room-tag {
  position: absolute; bottom: 18px; right: 18px; z-index: 2;
  background: rgba(69,18,30,.85); color: var(--ivory); backdrop-filter: blur(4px);
  font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; padding: 9px 14px;
}

/* ------------------------------------------------------------
   Venues
   ------------------------------------------------------------ */
.venues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: 64px; }
.venue-card { position: relative; overflow: hidden; border-radius: 2px; height: 440px; }
.venue-card .ir { position: absolute; inset: 0; overflow: hidden; }
.venue-card:hover .ir img { transform: scale(1.06); }
.venue-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(40,8,15,.85));
}
.venue-info { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; color: var(--ivory); }
.venue-info > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.venue-card.in .venue-info > * { opacity: 1; transform: none; }
.venue-card.in .venue-info > *:nth-child(1) { transition-delay: .45s; }
.venue-card.in .venue-info > *:nth-child(2) { transition-delay: .55s; }
.venue-card.in .venue-info > *:nth-child(3) { transition-delay: .65s; }
.venue-card.in .venue-info > *:nth-child(4) { transition-delay: .75s; }
.venue-info .tag { font-size: .58rem; letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
.venue-info h3 { font-family: var(--font-display); font-size: 2rem; margin-top: 10px; }
.venue-info p { font-size: .82rem; color: rgba(250,247,240,.75); font-weight: 300; margin-top: 6px; }
.venue-map {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(195,161,91,.5); padding-bottom: 6px;
  transition: gap .3s, color .3s;
}
.venue-map:hover { gap: 14px; color: var(--ivory); }

/* ------------------------------------------------------------
   Craft / process — static grid, animated in, never pinned
   ------------------------------------------------------------ */
.craft { position: relative; }
.craft-watermark {
  position: absolute; right: -40px; top: 40px;
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(6rem, 16vw, 14rem); color: rgba(195,161,91,.1);
  pointer-events: none; user-select: none; line-height: 1;
  will-change: transform;
}
.craft-head { max-width: 44rem; }
.craft-head h2 { margin-top: 26px; }
.craft-head p.lead { margin-top: 22px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 80px; }
.step { padding-top: 28px; position: relative; }
/* the hover-lift transition only takes over after the reveal has run,
   otherwise its shorthand would cancel the fade-up transition */
.step.settled { transition: transform .5s var(--ease-out); }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(195,161,91,.4);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-exp) calc(var(--d, 0s) + .2s), background .4s;
}
.step.in::before { transform: scaleX(1); }
.step:hover { transform: translateY(-8px); }
.step:hover::before { background: var(--gold); }
.step .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); }
.step h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 14px 0 12px; }
.step p { font-size: .88rem; color: var(--ink-soft); font-weight: 300; }

/* ------------------------------------------------------------
   Showroom — pinned to the screen while vertical scroll drives
   the track sideways, one chapter at a time (JS sets the section
   height from the chapter count; buttons glide the page)
   ------------------------------------------------------------ */
.showroom-pin { position: relative; }
.show-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: calc(var(--header-h) + 6px) 0 20px;
}
@supports not (height: 100svh) { .show-pin { height: 100vh; } }
.show-pin .carousel { margin-top: 0; }
.show-pin .showroom-foot { margin-top: 0; }
.show-pin .car-slide img { height: min(50svh, 540px); }

.showroom-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; z-index: 1; }
.showroom-head h2 { margin-top: 26px; color: var(--ivory); }
.showroom-meta { display: flex; align-items: center; gap: 26px; }
.showroom-count { font-family: var(--font-display); font-size: 1.6rem; color: var(--ivory); }
.showroom-count small { font-size: .62rem; letter-spacing: .3em; color: var(--ivory-soft); margin-left: 8px; }

.car-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(195,161,91,.55);
  background: transparent; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.car-btn svg { width: 20px; height: 20px; stroke: currentColor; }
.car-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.car-btn:active { transform: scale(.94); }

.carousel { position: relative; margin-top: 56px; overflow: hidden; }
.car-track { display: flex; transition: transform .85s var(--ease-exp); will-change: transform; }
.car-slide { flex: 0 0 72%; margin: 0 1.5%; position: relative; opacity: .3; transition: opacity .85s ease; overflow: hidden; border-radius: 2px; }
.car-slide.active { opacity: 1; }
.car-slide img { width: 100%; height: 540px; object-fit: cover; }
.car-slide.active img { animation: kb 7s ease-out both; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.car-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,4,7,.8));
}
.car-cap { position: absolute; left: 34px; bottom: 30px; z-index: 1; color: var(--ivory); }
.car-cap .tag, .car-cap h3, .car-cap p { opacity: 0; }
.car-slide.active .car-cap .tag { animation: capUp .7s var(--ease-out) .25s both; }
.car-slide.active .car-cap h3   { animation: capUp .7s var(--ease-out) .38s both; }
.car-slide.active .car-cap p    { animation: capUp .7s var(--ease-out) .5s both; }
@keyframes capUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.car-cap .tag { font-size: .6rem; letter-spacing: .34em; color: var(--gold); text-transform: uppercase; }
.car-cap h3 { font-family: var(--font-display); font-size: 2.4rem; margin-top: 10px; }
.car-cap p { font-size: .85rem; color: rgba(250,247,240,.78); font-weight: 300; margin-top: 6px; }

.showroom-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; position: relative; z-index: 1; }
.showroom-label { font-size: .6rem; letter-spacing: .4em; color: var(--ivory-soft); text-transform: uppercase; }
.auto-pill { display: inline-flex; align-items: center; gap: 10px; font-size: .6rem; letter-spacing: .3em; color: var(--ivory-soft); text-transform: uppercase; }
.auto-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.car-dots { display: flex; gap: 10px; }
/* slim bar visual, but a ~19px hit area for touch — the bar is the content box */
.car-dots button { width: 26px; height: 19px; padding: 8px 0; border: none; background: rgba(250,247,240,.25); background-clip: content-box; transition: background .3s; }
.car-dots button:hover { background: rgba(250,247,240,.55); }
.car-dots button.active { background: var(--gold); }
.car-prog { width: 150px; height: 2px; background: rgba(250,247,240,.15); overflow: hidden; }
.car-prog span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.car-prog span.run { animation: carprog 5s linear both; }
.carousel-paused .car-prog span.run { animation-play-state: paused; }
@keyframes carprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------
   Gallery / archive — sticky stacking deck; each evening slides
   over the last, one by one, scrubbed by scroll
   ------------------------------------------------------------ */
.gallery { padding: 110px 0; }
.gallery-head { max-width: 44rem; }
.gallery-head h2 { margin-top: 26px; }
.g-stack { margin-top: 64px; padding: 0 24px; }
.g-item { position: sticky; top: calc(var(--header-h) + 30px); will-change: transform, filter; }
.g-item:not(:first-child) { margin-top: 32vh; }
/* archive card — fully self-contained: the caption sits on a scrim INSIDE
   the card, and the surface is opaque, so stacked sticky cards always cover
   the one beneath (captions can never bleed through). */
.g-stack .g-frame {
  max-width: 880px; margin: 0 auto; position: relative;
  background: var(--charcoal);
  border: 1px solid rgba(195, 161, 91, .3);
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
}
.g-frame .ir { height: min(62svh, 560px); box-shadow: none; }
@supports not (height: 62svh) { .g-frame .ir { height: min(62vh, 560px); } }
.g-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(69, 18, 30, 0) 52%, rgba(43, 9, 16, .88) 100%);
}
.g-frame .label {
  position: absolute; left: 30px; bottom: 64px; z-index: 2; margin: 0;
  font-size: .58rem; letter-spacing: .34em; color: var(--gold-ink); text-transform: uppercase;
}
.g-frame h3 {
  position: absolute; left: 30px; right: 30px; bottom: 24px; z-index: 2; margin: 0; padding: 0;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory);
}
.gallery-cue { text-align: center; font-size: .6rem; letter-spacing: .4em; color: var(--ink-soft); text-transform: uppercase; margin-top: 26px; }

/* Fresh from the floor — masonry of the studio's latest evenings */
.moments-head { margin-top: 120px; }
.moments-head h2 { margin-top: 26px; max-width: 36rem; }
.moments-grid { columns: 2; column-gap: 28px; margin-top: 64px; }
/* moments carry no reveal animation — images are painted the instant
   they scroll into view, with no observer delay or stagger */
.moment { break-inside: avoid; margin: 0 0 28px; }
.moment .ir { border: 1px solid rgba(195,161,91,.25); }
.moment img { transition: transform .8s var(--ease-out); }
.moment:hover img { transform: scale(1.04); }
.moment figcaption { display: flex; align-items: baseline; gap: 16px; margin-top: 14px; }
.moment .label { font-size: .56rem; letter-spacing: .3em; color: var(--gold-ink); white-space: nowrap; }
.moment h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--ink); }
@media (max-width: 720px) {
  .moments-grid { columns: 1; }
  .moments-head { margin-top: 80px; }
}

/* ------------------------------------------------------------
   Numbers
   ------------------------------------------------------------ */
.numbers-head { text-align: center; max-width: 40rem; margin: 0 auto; position: relative; z-index: 1; }
.numbers-head h2 { margin-top: 26px; color: var(--ivory); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 72px; text-align: center; position: relative; z-index: 1; }
.stat .num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.6rem); color: var(--ivory); }
.stat .num span { color: var(--gold); }
.stat .lbl { font-size: .62rem; letter-spacing: .32em; color: var(--ivory-soft); text-transform: uppercase; margin-top: 12px; }

/* ------------------------------------------------------------
   Catchphrase — a tall section whose content pins to the screen
   while scroll progress scrubs the line in, holds it, lifts it out
   ------------------------------------------------------------ */
.catchphrase { height: 220vh; position: relative; }
.catch-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center; padding: 0 24px;
}
.catch-kicker, .catch-line, .catch-sub { position: relative; z-index: 1; }
.catch-kicker { opacity: 0; will-change: opacity; }
.catch-kicker::before { transform: scaleX(1); transition: none; }
@supports not (height: 100svh) { .catch-pin { height: 100vh; } }
.catch-line {
  font-size: clamp(2.6rem, 6vw, 5rem); color: var(--ivory);
  max-width: 22ch; line-height: 1.1;
  opacity: 0; transform: scale(.75); will-change: transform, opacity;
}
.catch-sub {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ivory-soft); opacity: 0; will-change: transform, opacity;
}
@media (max-width: 720px) { .catchphrase { height: 175vh; } }

/* ------------------------------------------------------------
   Testimonials — glass card deck. Cards fan behind the active
   voice in 3D and auto-rotate; JS only reassigns data-pos, the
   fan positions and the crossfade live here.
   ------------------------------------------------------------ */
.testi-head { max-width: 40rem; }
.testi-head h2 { margin-top: 26px; }
.testi-deck {
  position: relative; margin: 72px auto 46px;
  max-width: 760px; perspective: 1400px;
  touch-action: pan-y; /* vertical page scroll stays native; horizontal swipes advance the deck */
}
.testi-card {
  position: absolute; top: 0; left: 0; right: 0;
  background: rgba(69, 18, 30, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(195, 161, 91, .22);
  border-radius: 32px;
  padding: 52px 54px;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .6);
  transition: transform .9s var(--ease-out), opacity .7s, filter .7s;
  will-change: transform, opacity;
  opacity: 0; pointer-events: none;
}
.testi-card[data-pos="0"] { transform: translate3d(0, 0, 0);                     opacity: 1;   z-index: 4; pointer-events: auto; cursor: pointer; }
.testi-card[data-pos="1"] { transform: translate3d(26px, 25px, -80px) rotate(3deg);   opacity: .85; z-index: 3; filter: blur(.5px); }
.testi-card[data-pos="2"] { transform: translate3d(-32px, 46px, -160px) rotate(-4deg); opacity: .7;  z-index: 2; filter: blur(1px); }
.testi-card[data-pos="3"] { transform: translate3d(19px, 59px, -240px) rotate(2deg);  opacity: .55; z-index: 1; filter: blur(1.5px); }
.testi-card .mark { font-family: var(--font-display); font-size: 4.4rem; color: var(--gold); line-height: .6; display: block; }
.testi-card .quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.35;
  color: var(--ink); margin-top: 12px;
}
.testi-card footer {
  margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(195,161,91,.25);
  display: flex; align-items: center; gap: 16px;
}
.testi-card .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), var(--champagne));
  box-shadow: 0 0 30px -8px var(--gold);
}
.testi-card .name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.testi-card .role { font-size: .6rem; letter-spacing: .3em; color: var(--ink-soft); text-transform: uppercase; margin-top: 4px; }
.testi-dots {
  position: absolute; left: 0; right: 0; bottom: -46px;
  display: flex; justify-content: center; gap: 8px; z-index: 5;
}
.testi-dots button {
  height: 22px; width: 8px; padding: 8px 0; border: none; border-radius: 999px;
  background: rgba(250, 247, 240, .2); background-clip: content-box; cursor: pointer;
  transition: width .5s var(--ease-out), background .5s;
}
.testi-dots button:hover { background: rgba(250, 247, 240, .45); }
.testi-dots button.active { width: 40px; background: var(--gold); }

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px 72px; align-items: start; }
/* the details follow the form in the markup (so a stacked phone reads
   heading → form → details); on two columns they are placed back under
   the copy, with the form spanning both rows alongside them */
.contact-copy    { grid-column: 1; grid-row: 1; }
.contact-form    { grid-column: 2; grid-row: 1 / span 2; }
.contact-details { grid-column: 1; grid-row: 2; display: grid; gap: 30px; }
.contact-copy h2 { margin: 26px 0 24px; }
.contact-copy > p { color: var(--ink-soft); font-weight: 300; max-width: 28rem; }
.cd .k { font-size: .58rem; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; }
.cd .v { font-family: var(--font-display); font-size: 1.25rem; margin-top: 6px; }

.contact-form {
  background: rgba(250,247,240,.06); border: 1px solid rgba(195,161,91,.25); border-radius: 2px;
  padding: 48px 44px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { margin-bottom: 26px; }
.field label { display: block; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; transition: color .3s; }
.field:focus-within label { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; border: none; border-bottom: 1px solid rgba(250,247,240,.3);
  background: transparent; padding: 12px 2px; font-family: var(--font-body);
  font-size: 1.05rem; color: var(--ink); outline: none; transition: border-color .3s;
  border-radius: 0; appearance: none; -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C3A15B'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.field select option { background: var(--ivory); color: var(--charcoal); }

/* Custom select — the native option popup can't be themed, so the
   house dresses its own: underline trigger, deep-maroon panel */
.select-shell { position: relative; }
.select-shell .select-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.select-trigger {
  width: 100%; text-align: left; cursor: pointer;
  border: none; border-bottom: 1px solid rgba(250,247,240,.3); border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C3A15B'/%3E%3C/svg%3E") no-repeat right 4px center;
  padding: 12px 26px 12px 2px; font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
  outline: none; transition: border-color .3s;
}
.select-trigger:focus-visible, .select-shell.open .select-trigger { border-bottom-color: var(--gold); }
.select-trigger.placeholder { color: var(--ink-soft); }
.select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60;
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--charcoal);
  border: 1px solid rgba(195,161,91,.45); border-radius: 2px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.65);
  max-height: 288px; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s;
}
.select-shell.open .select-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.select-menu li {
  padding: 12px 20px; cursor: pointer;
  font-size: 1rem; font-weight: 300; letter-spacing: .04em; color: var(--ivory-soft);
  border-left: 2px solid transparent;
  transition: background .25s, color .25s, border-color .25s, padding-left .25s;
}
.select-menu li.active { background: rgba(195,161,91,.14); color: var(--ivory); border-left-color: var(--gold); padding-left: 26px; }
.select-menu li[aria-selected="true"] { color: var(--gold-ink); }
.select-menu li[aria-selected="true"]::after { content: "✦"; float: right; font-size: .7em; color: var(--gold); margin-top: 4px; }
.select-menu::-webkit-scrollbar { width: 4px; }
.select-menu::-webkit-scrollbar-thumb { background: rgba(195,161,91,.5); border-radius: 2px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: .68rem; letter-spacing: .26em; color: var(--ink-soft); text-transform: uppercase; }

.flash { padding: 14px 18px; margin-bottom: 26px; font-size: .82rem; border-radius: 2px; }
.flash.ok { background: rgba(195,161,91,.15); border: 1px solid rgba(195,161,91,.4); color: var(--gold-ink); }
.flash.err { background: rgba(107,31,46,.5); border: 1px solid rgba(250,247,240,.3); color: var(--ivory); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer { padding: 90px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1.2fr; gap: 50px; position: relative; z-index: 1; }
.site-footer .brand-name { color: var(--ivory); }

/* Footer logo — looping self-writing reveal: a soft ink edge sweeps the
   mark in from the left, holds, fades, and begins again */
.footer-logo-anim {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
  -webkit-mask-size: 220% 100%;         mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
  animation: logoWrite 7s ease-in-out infinite;
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
@keyframes logoWrite {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 1; }
  48%  { -webkit-mask-position: 0 0;    mask-position: 0 0;    opacity: 1; }
  84%  { -webkit-mask-position: 0 0;    mask-position: 0 0;    opacity: 1; }
  94%  { -webkit-mask-position: 0 0;    mask-position: 0 0;    opacity: 0; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
}
/* on hover the writing pauses and the mark lifts with a golden glow — matching the header logo */
.footer-logo-anim:hover {
  -webkit-mask-image: none; mask-image: none;
  animation: none;
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 6px 18px rgba(195, 161, 91, .55)) brightness(1.08);
}
/* full choreography is the site default — only the explicit ?motion=reduced
   preview (body.reduced) stills the logo, matching the rest of the motion engine */
body.reduced .footer-logo-anim, body.reduced .footer-logo-anim:hover { animation: none; -webkit-mask-image: none; mask-image: none; }

.footer-blurb { color: var(--ivory-soft); font-weight: 300; font-size: .9rem; max-width: 24rem; margin-top: 18px; }
.subscribe { display: flex; margin-top: 28px; max-width: 320px; border-bottom: 1px solid rgba(195,161,91,.5); }
.subscribe input {
  flex: 1; background: none; border: none; outline: none; color: var(--ivory);
  font-size: .8rem; letter-spacing: .12em; padding: 12px 2px;
}
.subscribe input::placeholder { color: var(--ivory-soft); letter-spacing: .28em; font-size: .62rem; text-transform: uppercase; }
.subscribe button { background: none; border: none; color: var(--gold); font-size: 1.1rem; transition: transform .3s, color .3s; }
.subscribe button:hover { transform: translateX(4px); color: var(--gold-ink); }
.f-col .k { font-size: .78rem; letter-spacing: .34em; color: var(--gold); text-transform: uppercase; margin-bottom: 24px; }
.f-col ul { list-style: none; display: grid; gap: 16px; }
.f-col a { color: var(--ivory); font-size: 1.05rem; font-weight: 300; transition: color .3s, padding-left .3s; }
.f-col a:hover { color: var(--gold); padding-left: 6px; }
.f-col p { color: var(--ivory); font-size: 1rem; font-weight: 300; line-height: 1.7; }
.socials { display: flex; gap: 14px; margin-top: 28px; }
.socials a {
  width: 44px; height: 44px; border: 1px solid rgba(195,161,91,.5); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; letter-spacing: 0; color: var(--ivory);
  padding: 0; transition: all .3s;
}
.socials a svg { width: 20px; height: 20px; display: block; }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); padding-left: 0; transform: translateY(-3px); }
.footer-bottom {
  margin-top: 70px; padding: 26px 0; border-top: 1px solid rgba(195,161,91,.18);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .68rem; letter-spacing: .3em; color: rgba(250,247,240,.6); text-transform: uppercase;
}
.footer-bottom a { color: var(--gold-ink); transition: color .3s; }
.footer-bottom a:hover { color: var(--gold); }

/* ------------------------------------------------------------
   Reduced motion — nothing moves, but content still fades
   gently into view. Opacity-only reveals are vestibular-safe;
   transforms, clips, parallax and looping animation are removed.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body.reduced [data-anim], body.reduced .hload {
  transform: none !important; clip-path: none !important; filter: none !important;
  transition: opacity .9s ease var(--d, 0s);
}
body.reduced [data-anim="clip-up"], body.reduced [data-anim="clip-right"] { opacity: 0; }
body.reduced [data-anim].in { opacity: 1; }
body.reduced .split { opacity: 0; transition: opacity .9s ease; }
body.reduced .split.in { opacity: 1; }
body.reduced [data-anim] img { transform: none !important; transition: none; }
body.reduced .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
body.reduced .hero-bg img { transform: none !important; opacity: 0; transition: opacity 1s ease .3s; }
body.reduced.ready .hero-bg img { opacity: 1; }
body.reduced .hero .split-hero .italic-gold { transition-delay: .8s; }
body.reduced .venue-info > * { transform: none !important; }
body.reduced .hairline::before, body.reduced .step::before { transform: scaleX(1) !important; transition: none; }
body.reduced .mq-track, body.reduced .blob, body.reduced .scroll-cue::after,
body.reduced .car-slide.active img, body.reduced .auto-pill .dot { animation: none !important; }
body.reduced .car-cap .tag, body.reduced .car-cap h3, body.reduced .car-cap p { opacity: 1 !important; animation: none !important; }
body.reduced .preloader { display: none; }
body.reduced .catchphrase { height: auto; }
body.reduced .catch-pin { position: static; height: auto; min-height: 0; padding: 110px 24px; }
body.reduced .catch-kicker, body.reduced .catch-line, body.reduced .catch-sub {
  opacity: 1 !important; transform: none !important;
}
body.reduced .deck-item { position: static; transform: none !important; filter: none !important; }
body.reduced .deck-item:not(:first-child) { margin-top: 40px; }
body.reduced .testi-card { transition: opacity .5s ease; filter: none !important; }
body.reduced .testi-card:not([data-pos="0"]) { opacity: 0; }
body.reduced .mandala { animation: none; }
body.reduced .bg-charcoal.section-y::before,
body.reduced .show-pin::before,
body.reduced .catch-pin::before { animation: none; }
body.reduced .showroom-pin { height: auto !important; }
body.reduced .show-pin { position: static; height: auto; padding: 110px 0; justify-content: flex-start; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .main-nav { gap: 22px; }
}
/* tablet: the CONTACT menu item covers the CTA's job — hide the button
   so the six menu items keep to a single line */
@media (max-width: 1024px) {
  .header-cta { display: none; }
}
@media (max-width: 1024px) {
  .about-grid, .room, .contact-grid { grid-template-columns: 1fr; }
  .room:nth-child(even) .room-visual { order: 0; }
  /* The party plot stacks into a single centred column. Head and rooms share
     one rail so the section still reads as one composition, and the copy keeps
     a readable measure instead of running the full tablet width. */
  .rooms-head { max-width: 720px; margin: 0 auto; }
  .room { max-width: 720px; margin: 92px auto 0; gap: 46px; }
  .room-copy p.body { max-width: 34rem; }
  .room-offerings { max-width: none; }
  /* stacked, the photograph runs the full column — so the taped-on thumbs
     tuck inside its left and right edges instead of hanging over the
     screen edge. They keep their overhang vertically, where there is room. */
  .room-visual .thumb.a { top: -22px; right: 16px; }
  .room-visual .thumb.b { bottom: -24px; left: 16px; }
  .hero-stats { position: static; display: inline-flex; margin-top: 46px; }
  .steps, .values-strip { grid-template-columns: 1fr 1fr; }
  .venues-grid, .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .car-slide { flex-basis: 86%; }
  .car-slide img { height: 420px; }
}
/* the six-item menu needs ~740px to sit on one line — below 768 the
   hamburger takes over (the 720 block keeps the rest of the mobile styles) */
@media (max-width: 900px) {
  .main-nav { gap: 16px; }
}
@media (max-width: 767px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 720px) {
  .brand img { width: 96px; height: 45px; }
  .pre-inner img { width: 190px; height: 91px; }
  .section-y { padding: 72px 0; }
  .steps, .numbers-grid, .footer-grid, .values-strip { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-stats { width: 100%; }
  .hero-stat { padding: 16px 18px; flex: 1; }
  .hero-stat .num { font-size: 1.7rem; }
  .hero-stat .lbl { font-size: .52rem; letter-spacing: .2em; }
  .g-item { top: calc(var(--header-h) + 16px); }
  .g-item:not(:first-child) { margin-top: 24vh; }
  .g-frame .ir { height: min(46svh, 380px); }
  .g-frame .label { left: 20px; bottom: 50px; }
  .g-frame h3 { left: 20px; right: 20px; bottom: 16px; font-size: 1.15rem; }
  .car-slide img { height: 320px; }
  .car-cap h3 { font-size: 1.6rem; }
  .testi-card { padding: 34px 28px; border-radius: 24px; }
  .testi-card[data-pos="1"] { transform: translate3d(12px, 18px, -80px) rotate(2deg); }
  .testi-card[data-pos="2"] { transform: translate3d(-14px, 32px, -160px) rotate(-2.5deg); }
  .testi-card[data-pos="3"] { transform: translate3d(9px, 42px, -240px) rotate(1.5deg); }
  .room { margin-top: 72px; gap: 34px; }
  .room-num { font-size: 3.5rem; }
  .room .lede { font-size: 1.1rem; }
  .room-visual .thumb { width: 112px; height: 76px; border-width: 4px; }
  .room-visual .thumb.a { top: -14px; right: 12px; }
  .room-visual .thumb.b { bottom: -14px; left: 12px; }
  .mq-track span { font-size: .8rem; }
}
/* phones: the taped-on thumbs shrink so they stay accents on the photograph
   rather than covering a third of it, and the CTA fits a 320px screen */
@media (max-width: 430px) {
  .room-visual .thumb { width: 92px; height: 62px; border-width: 3px; }
  .room-visual .thumb.a { top: -10px; right: 10px; }
  .room-visual .thumb.b { bottom: -10px; left: 10px; }
  .room-offerings li { padding: 7px 12px; letter-spacing: .18em; }
  .room .btn-solid { padding: 15px 22px; letter-spacing: .2em; }
  .room-tag { bottom: 12px; right: 12px; padding: 8px 11px; letter-spacing: .26em; }
}

/* ------------------------------------------------------------
   Enquiry form on small screens — once the section stacks, the
   studio details used to fill the whole first screen and the form
   only began where the screen ended. Stacked, the three blocks
   simply fall in markup order — heading, invitation, form, then
   where to find us — so the enquiry is the first thing in reach.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .contact-copy, .contact-form, .contact-details { grid-column: auto; grid-row: auto; }
  .contact-grid { gap: 24px; }
  .contact-copy h2 { margin: 10px 0 0; }
  .contact-form { margin-top: 14px; }
  .contact-details { margin-top: 22px; gap: 24px; }
  .cd .v { overflow-wrap: anywhere; }
}
/* phones: the form is also retuned for thumbs — quieter labels, one
   tight rhythm, and a send button the full width of the card */
@media (max-width: 720px) {
  .contact-grid { gap: 20px; }
  .contact-copy > p { max-width: none; }
  .contact-form { margin-top: 10px; padding: 30px 22px; }
  .contact-details { margin-top: 16px; gap: 20px; }
  .cd .v { font-size: 1.05rem; }

  /* one row gap governs the field rhythm — the grid gap on a stacked
     .form-row would stack on top of the field's own margin */
  .contact-form .form-row { gap: 0; }
  .contact-form .field { margin-bottom: 20px; }
  .contact-form .field label { font-size: .64rem; letter-spacing: .22em; margin-bottom: 6px; }
  .contact-form .field input,
  .contact-form .field textarea { padding: 10px 2px; }
  .contact-form .select-trigger { padding: 10px 26px 10px 2px; }
  .contact-form .field textarea { min-height: 92px; }
  .form-foot { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 2px; }
  /* the note holds one line on a 375 card; narrower screens split it evenly
     rather than dropping a single orphaned word */
  .form-note { text-align: center; font-size: .58rem; letter-spacing: .16em; text-wrap: balance; }
  .form-foot .btn { width: 100%; justify-content: center; }
  .flash { margin-bottom: 20px; }
}
@media (max-width: 430px) {
  .contact-form { padding: 26px 18px; }
  .contact-form .field { margin-bottom: 17px; }
  .contact-form .field textarea { min-height: 84px; }
  .cd .v { font-size: 1rem; }
}

/* ------------------------------------------------------------
   Lightbox — click any photograph for a gold-framed full view
   ------------------------------------------------------------ */
.ir img, .car-slide img, img.thumb { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 280;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 5, 9, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s ease;
  /* horizontal drags are the viewer's own gesture (swipe to browse); vertical
     panning stays with the browser so the gesture never feels trapped */
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox.on { opacity: 1; }
.lb-frame {
  margin: 0; text-align: center; max-width: min(1100px, 92vw);
  will-change: transform; user-select: none; -webkit-user-select: none;
}
/* only worn while the frame is being thrown or settled back after a swipe */
.lb-frame.lb-anim { transition: transform .26s var(--ease-out), opacity .26s ease; }
.lb-frame img {
  max-width: min(1100px, 92vw); max-height: 78vh; width: auto; height: auto;
  margin: 0 auto; border: 1px solid rgba(195, 161, 91, .45); border-radius: 2px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  transform: scale(.96); transition: transform .35s var(--ease-out);
  cursor: default; -webkit-user-drag: none;
}
.lightbox.on .lb-frame img { transform: scale(1); }
.lb-cap { margin-top: 16px; font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory); }
.lb-count {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; letter-spacing: .34em; color: var(--gold-ink);
}
.lb-close, .lb-nav {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(195, 161, 91, .55); background: transparent; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s;
}
.lb-close { top: 18px; right: 22px; font-size: 1.6rem; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav svg { width: 20px; height: 20px; stroke: currentColor; }
.lb-close:hover, .lb-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
body.lb-open { overflow: hidden; }
body.reduced .lb-frame img { transform: none; transition: none; }
body.reduced .lb-frame.lb-anim { transition: none; }
@media (max-width: 720px) {
  .lb-nav { top: auto; bottom: 20px; transform: none; }
  .lb-frame img { max-height: 66vh; }
  .lb-cap { font-size: .95rem; }
}

/* ============================================================
   FLOW PASS — section rhythm, mid-page invitation, FAQ and a
   sticky action bar. Appended so every rule here overrides the
   base above it; nothing earlier in the file was rewritten.
   ============================================================ */

/* ------------------------------------------------------------
   Panel seams. --cream and --charcoal are both maroon and only
   about eight points of lightness apart, so alternating panels
   read as one continuous surface across twenty-odd screens. A
   gold hairline and a short shadow at the top edge give every
   panel a visible beginning without moving the palette.
   ------------------------------------------------------------ */
.bg-cream, .bg-charcoal, .site-footer { position: relative; }
.bg-cream::before, .bg-charcoal::before, .site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 88px;
  pointer-events: none; z-index: 3;
  background:
    linear-gradient(90deg, transparent, rgba(195,161,91,.4) 16%, rgba(195,161,91,.4) 84%, transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(23,4,9,.3), transparent);
}
/* .bg-charcoal.section-y already claims ::before for its ambient aurora and
   outranks the seam rule above — it takes the seam as an inset shadow instead,
   so both effects survive. (.show-pin / .catch-pin are inner wrappers and are
   never matched by the seam rule; their aurora is untouched.) */
.bg-charcoal.section-y {
  box-shadow: inset 0 1px 0 rgba(195,161,91,.4), inset 0 26px 40px -26px rgba(23,4,9,.55);
}

/* ------------------------------------------------------------
   Rooms index — the three grounds at a glance, so a visitor can
   scan them before committing to 4,000px of reading
   ------------------------------------------------------------ */
.rooms-index {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 54px;
}
.rix {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 26px 24px; border: 1px solid rgba(195,161,91,.26); border-radius: 2px;
  background: rgba(195,161,91,.05);
  transition: transform .45s var(--ease-out), border-color .35s, background .35s;
}
.rix:hover { transform: translateY(-6px); border-color: var(--gold); background: rgba(195,161,91,.11); }
.rix-num { font-family: var(--font-display); font-size: .95rem; letter-spacing: .3em; color: var(--gold); }
.rix-title { font-family: var(--font-display); font-size: 1.55rem; color: var(--ink); line-height: 1.15; }
.rix-palette { font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Venues — a second action beside the map link, so the card can
   convert and not only inform
   ------------------------------------------------------------ */
.venue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.venue-map.alt { color: var(--ivory); border-bottom-color: rgba(250,247,240,.45); }
.venue-map.alt:hover { color: var(--gold); }

/* ------------------------------------------------------------
   Invitation band — sits between the proof and the showroom so
   the long visual stretch is no longer a dead end
   ------------------------------------------------------------ */
.invite { padding: 92px 0; overflow: hidden; }
.invite-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
  position: relative; z-index: 1;
}
.invite-copy h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-top: 22px; max-width: 18ch; }
.invite-lede {
  margin-top: 22px; max-width: 40ch;
  font-size: .92rem; font-weight: 300; line-height: 1.75; color: var(--ink-soft);
}

/* the six event types — a two-up index, numbered like the rooms */
.invite-types .k {
  font-size: .66rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
  padding-bottom: 16px; border-bottom: 1px solid rgba(195,161,91,.28);
}
.invite-types ul {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 26px; margin-top: 4px;
}
.invite-types li { border-bottom: 1px solid rgba(195,161,91,.16); }
.invite-types li a {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 2px;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
  transition: color .3s var(--ease-out), gap .3s var(--ease-out);
}
.invite-types li a:hover { color: var(--gold); gap: 18px; }
.invite-types .n {
  font-family: var(--font-body); font-size: .58rem; letter-spacing: .22em;
  color: var(--gold-ink); flex: 0 0 auto;
}
.invite-tel {
  margin-top: 22px;
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft);
}
.invite-tel a { color: var(--gold-ink); border-bottom: 1px solid rgba(195,161,91,.45); padding-bottom: 3px; }
.invite-tel a:hover { color: var(--gold); }

/* ------------------------------------------------------------
   Showroom — a way out of the pinned stretch, in the foot bar
   ------------------------------------------------------------ */
.showroom-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(195,161,91,.5); padding-bottom: 6px;
  transition: gap .3s, color .3s, border-color .3s;
}
.showroom-cta:hover { gap: 16px; color: var(--ivory); border-color: var(--ivory); }
.showroom-cta .arr { transition: transform .35s ease; }
@media (max-width: 720px) { .showroom-foot .car-prog { display: none; } }

/* ------------------------------------------------------------
   Fresh from the floor — split out of #gallery into a section of
   its own, so the process and faq blocks can sit between the
   three photo showcases instead of all three running together.
   The old top margin belonged to a mid-section heading; as a
   section head it carries the standard section padding instead.
   ------------------------------------------------------------ */
.moments-section .moments-head { margin-top: 0; }
.moments-section .moments-grid { margin-top: 56px; }
@media (max-width: 720px) { .moments-section .moments-head { margin-top: 0; } }

/* ------------------------------------------------------------
   Gallery close — the archive now ends on an invitation
   ------------------------------------------------------------ */
.gallery-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px; margin-top: 92px; padding-top: 40px;
  border-top: 1px solid rgba(195,161,91,.28);
}
.gallery-foot p { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--ink); }

/* ------------------------------------------------------------
   FAQ — native <details>, so it stays keyboard-operable and
   fully readable with JavaScript off
   ------------------------------------------------------------ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.faq-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-top: 24px; }
.faq-head p { margin-top: 20px; color: var(--ink-soft); font-weight: 300; font-size: .92rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(195,161,91,.26); }
.faq-item:last-child { border-bottom: 1px solid rgba(195,161,91,.26); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 2px; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q, .faq-item[open] summary .faq-q { color: var(--gold); }
.faq-item summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.faq-q { font-family: var(--font-display); font-size: clamp(1.02rem, 1.7vw, 1.25rem); color: var(--ink); transition: color .3s; }
.faq-mark { position: relative; flex: 0 0 16px; height: 16px; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 1px;
  background: var(--gold); transition: transform .4s var(--ease-out);
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; animation: faqOpen .5s var(--ease-out); }
.faq-a p { padding: 0 44px 28px 2px; font-size: .9rem; font-weight: 300; color: var(--ink-soft); max-width: 56ch; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   Promise band — the pinned line finally carries a way to act,
   and holds 150vh instead of 220vh for one sentence
   ------------------------------------------------------------ */
.catch-actions {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  opacity: 0; transform: translateY(24px); will-change: transform, opacity;
}
body.reduced .catch-actions { opacity: 1; transform: none; }
/* 175vh, down from 220vh. Short enough that the band stops being the most
   expensive scroll on the page, long enough that the buttons still get a
   real hold on screen before the line lifts away (see the cp windows in
   main.js — the actions sit at full opacity from cp .54 to .86). */
.catchphrase { height: 175vh; }

/* ------------------------------------------------------------
   Gallery pacing — the sticky deck alone ran 7,000px, 28% of
   the whole page. Tighter gaps and a three-up masonry keep
   every frame while roughly halving the scroll cost.
   ------------------------------------------------------------ */
.g-item:not(:first-child) { margin-top: 20vh; }
@media (min-width: 1000px) { .moments-grid { columns: 3; column-gap: 24px; } }

/* ------------------------------------------------------------
   Footer rebalance. Measured before: EXPLORE 458px of content
   against OUR VENUES' 115px — a 4.0x ratio, ~726px of dead
   space, and a badly ragged bottom edge. The ten-link list is
   now two-up, the venues column carries its addresses, and the
   link type comes down to a footer scale instead of body scale.
   ------------------------------------------------------------ */
.footer-grid {
  grid-template-columns: 1.25fr 1.15fr 1.05fr 1.15fr;
  gap: 48px 44px;
  /* stretch, not start: the column boxes then share one height and the hairline
     rules between them all run the same length. Content still sits at the top. */
  align-items: stretch;
}
.f-col .k { font-size: .72rem; letter-spacing: .32em; margin-bottom: 20px; }
.f-col ul { gap: 12px; }
.f-col a { font-size: .95rem; }
.f-col p { font-size: .92rem; line-height: 1.65; }

/* EXPLORE — two columns of five rather than one ladder of ten */
.f-col ul.two-up {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 24px;
}

/* OUR VENUES — name over address, so the column reads as a directory */
.venue-list { gap: 18px; }
.venue-list li { display: flex; flex-direction: column; gap: 4px; }
.venue-list span {
  font-size: .78rem; font-weight: 300; line-height: 1.5;
  color: var(--ivory-soft);
}
.f-note {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(195,161,91,.22);
  font-size: .72rem !important; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}

.socials { margin-top: 24px; }
.site-footer { padding-top: 84px; }

/* Hairline rules down the gaps, so the four columns read as a set rather than
   as four blocks floating on one field. Faded at both ends so they never look
   like hard table borders. Desktop only — below 1100px the brand block spans
   the row and a divider would land mid-row. */
@media (min-width: 1101px) {
  .footer-grid > * { position: relative; }
  .footer-grid > * + *::before {
    content: ""; position: absolute; left: -22px; top: 2px; bottom: 2px; width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
      transparent,
      rgba(195, 161, 91, .3) 14%,
      rgba(195, 161, 91, .3) 86%,
      transparent);
  }
}

/* the closing rule picks up a short gold segment at its left, matching the
   hairline that opens every section heading on the page */
.footer-bottom { position: relative; }
.footer-bottom::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 84px; height: 1px;
  background: var(--gold);
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 44px 36px; }
  /* the brand block spans the full first row so the three link groups stay level */
  .brand-col { grid-column: 1 / -1; }
  .footer-blurb { max-width: 34rem; }
}
@media (max-width: 720px) {
  /* was a single stacked column — 1,616px of footer on a phone */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .brand-col, .explore-col { grid-column: 1 / -1; }
  .f-col ul.two-up { column-gap: 18px; }
}
@media (max-width: 480px) {
  .venues-col, .reach-col { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   Sticky action bar — phones and small tablets. Call and
   WhatsApp are how this studio is actually reached; neither
   should be more than a thumb away on a page this long.
   ------------------------------------------------------------ */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: rgba(43, 9, 16, .93);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(195, 161, 91, .34);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .action-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 11px 6px 12px; color: var(--ivory);
    font-size: .53rem; letter-spacing: .24em; text-transform: uppercase;
  }
  .action-bar a + a { border-left: 1px solid rgba(195, 161, 91, .22); }
  .action-bar svg { width: 19px; height: 19px; }
  .action-bar .ab-cta { background: var(--gold); color: var(--charcoal); }
  /* the bar covers the last strip of the page — give the footer room */
  .site-footer { padding-bottom: 96px; }
}

/* ------------------------------------------------------------
   Responsive — new blocks only
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .invite-inner { grid-template-columns: 1fr; gap: 40px; }
  .invite-lede { max-width: 52ch; }
}
@media (max-width: 720px) {
  .rooms-index { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .rix { padding: 20px 22px; }
  .rix-title { font-size: 1.3rem; }
  .invite { padding: 72px 0; }
  .invite-types ul { grid-template-columns: 1fr; column-gap: 0; }
  .invite-types li a { font-size: 1rem; padding: 12px 2px; }
  .gallery-foot { flex-direction: column; align-items: flex-start; margin-top: 64px; }
  .catch-actions { flex-direction: column; width: min(100%, 320px); }
  .catch-actions .btn { justify-content: center; }
  .faq-a p { padding-right: 8px; }
  .g-item:not(:first-child) { margin-top: 16vh; }
  /* the buttons stack on a phone, so the band needs the same relative hold */
  .catchphrase { height: 165vh; }
}