/* ASPACE — global styles */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

:root {
  --aspace-blue: #00C2FF;
  --aspace-blue-deep: #0096D6;
  --aspace-ink: #0A0A0B;
  --aspace-bg: #F4F2EC;     /* warm off-white */
  --aspace-bg-pure: #FFFFFF;
  --aspace-dark: #0A0A0B;
  --aspace-dark-2: #131316;
  --aspace-line: rgba(10,10,11,0.10);
  --aspace-quiet: rgba(10,10,11,0.55);
  --aspace-faint: rgba(10,10,11,0.35);
  --aspace-on-dark-quiet: rgba(255,255,255,0.55);

  --font-display: 'Inter Tight', 'Aeonik', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Times New Roman', serif;

  --gutter: clamp(20px, 5vw, 80px);
  --motion-mult: 1; /* overridden by tweaks */

  --ease-cinema: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { overflow-x: clip; overflow-clip-margin: 0; }
body { overflow-x: clip; }
html, body {
  margin: 0; padding: 0;
  background: var(--aspace-bg);
  color: var(--aspace-ink);
  font-family: var(--font-display);
  font-size: 16.8px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  cursor: none;
}
@media (max-width: 900px), (pointer: coarse) {
  body { cursor: auto; }
}
a, button { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Grain overlay */
.aspace-grain {
  pointer-events: none;
  position: fixed; inset: 0;
  z-index: 9998;
  mix-blend-mode: multiply;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Pill button */
.aspace-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 102px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: background 320ms var(--ease-standard), color 320ms var(--ease-standard), border-color 320ms;
  white-space: nowrap;
}
.aspace-pill.solid {
  background: var(--aspace-ink);
  color: #fff;
  border-color: var(--aspace-ink);
}
.aspace-pill.solid:hover {
  background: var(--aspace-blue);
  border-color: var(--aspace-blue);
  color: #000;
}
.aspace-pill.ghost:hover {
  background: var(--aspace-ink);
  color: #fff;
}
.aspace-pill.on-dark {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.aspace-pill.on-dark:hover {
  background: var(--aspace-blue);
  border-color: var(--aspace-blue);
  color: #000;
}
.aspace-pill.on-dark.solid {
  background: #fff; color: #000; border-color: #fff;
}
.aspace-pill.on-dark.solid:hover {
  background: var(--aspace-blue);
  border-color: var(--aspace-blue);
  color: #000;
}

/* ============================================================
   KINETIC PILL — Lusion-style hover: liquid blue fill enters
   from the left, letters do a quick flip-and-settle in stagger,
   arrow glides slightly to the right. Spring-eased throughout.

   Add the .kinetic modifier to opt in. The text inside must be
   wrapped in <KineticText> so each letter is its own span with
   a --i index for the stagger.
   ============================================================ */
.aspace-pill.kinetic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Slow down the colour swap so the fill leads the experience,
     not a sudden background flash. Border + glow tween in lock-step. */
  transition:
    border-color 520ms cubic-bezier(0.22,1,0.36,1),
    color        520ms cubic-bezier(0.22,1,0.36,1),
    box-shadow   520ms cubic-bezier(0.22,1,0.36,1);
}
.aspace-pill.kinetic > * { position: relative; z-index: 1; }

/* Liquid fill layer — pseudo-element that sweeps in from off-canvas
   left, easing into place with a slow trailing curve so it reads as
   "energy moving through glass" instead of a hard wipe. The inset
   highlight gives a thin glass edge to the leading wave. */
.aspace-pill.kinetic::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--aspace-blue);
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 760ms cubic-bezier(0.7, 0, 0.2, 1);
  z-index: 0;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.10);
}
.aspace-pill.kinetic:hover::before { transform: translateX(0); }

/* Soft ambient glow for the primary so the whole pill feels lit
   while the fill is on its journey. Secondary stays quieter. */
.aspace-pill.kinetic.on-dark.solid:hover {
  border-color: var(--aspace-blue);
  color: #000;
  box-shadow:
    0 0 0 1px rgba(0,194,255,0.30) inset,
    0 12px 36px -12px rgba(0,194,255,0.42),
    0  0   28px       rgba(0,194,255,0.18);
}
.aspace-pill.kinetic.on-dark:not(.solid)::before {
  /* Restrained glass tint instead of full electric blue */
  background: linear-gradient(90deg, rgba(0,194,255,0.18), rgba(255,255,255,0.06));
}
.aspace-pill.kinetic.on-dark:not(.solid):hover {
  border-color: rgba(0,194,255,0.55);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0,194,255,0.20) inset,
    0  0   24px rgba(0,194,255,0.18);
}

/* Per-letter kinetic shift — split text via <KineticText>, each
   letter holds an --i CSS var that delays its flip in sequence. */
.kinetic-text { display: inline-flex; }
.kinetic-letter {
  display: inline-block;
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(0deg) rotateY(0deg);
  transition: transform 480ms cubic-bezier(0.22,1,0.36,1)
              calc(var(--i, 0) * 18ms);
  /* Reserve space for the visible space char so words don't collapse */
  white-space: pre;
}
.aspace-pill.kinetic:hover .kinetic-letter {
  animation: kineticLetterFlip 540ms cubic-bezier(0.34, 1.05, 0.4, 1)
             calc(var(--i, 0) * 22ms) forwards;
}
@keyframes kineticLetterFlip {
  0%   { transform: translateY(0)    rotateX(0)     rotateY(0);    filter: blur(0);    }
  42%  { transform: translateY(-2px) rotateX(-14deg) rotateY(8deg); filter: blur(0.45px); }
  100% { transform: translateY(0)    rotateX(0)     rotateY(0);    filter: blur(0);    }
}

/* Secondary uses a smaller, gentler keyframe so it doesn't
   compete visually with the primary CTA. */
.aspace-pill.kinetic.on-dark:not(.solid):hover .kinetic-letter {
  animation: kineticLetterShift 480ms cubic-bezier(0.34, 1.05, 0.4, 1)
             calc(var(--i, 0) * 18ms) forwards;
}
@keyframes kineticLetterShift {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1.5px) rotateX(-7deg); }
  100% { transform: translateY(0); }
}

/* Arrow glides + tilts on hover — independent timing from the
   text so the gesture reads as two layered movements. */
.aspace-pill.kinetic .pill-arrow {
  transition: transform 520ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.aspace-pill.kinetic:hover .pill-arrow {
  transform: translateX(4px) rotate(-6deg);
}

/* Active press: subtle scale-down for tactile feedback. */
.aspace-pill.kinetic:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .aspace-pill.kinetic::before { transition: none; }
  .aspace-pill.kinetic:hover::before { transform: translateX(0); }
  .aspace-pill.kinetic .kinetic-letter,
  .aspace-pill.kinetic:hover .kinetic-letter { animation: none !important; transform: none !important; }
  .aspace-pill.kinetic .pill-arrow { transition: none; }
}

/* Round icon button */
.aspace-icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--aspace-ink);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 240ms var(--ease-standard), color 240ms;
}
.aspace-icon-btn:hover { background: var(--aspace-ink); color: #fff; }
.aspace-icon-btn.on-dark { border-color: rgba(255,255,255,0.4); color: #fff; }
.aspace-icon-btn.on-dark:hover { background: #fff; color: #000; }

/* Eyebrow */
.aspace-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aspace-quiet);
  font-weight: 500;
}

/* Plus marker — confident, architectural */
.aspace-plus {
  position: relative; width: 18px; height: 18px;
  display: inline-block;
  color: var(--aspace-ink);
}
.on-dark .aspace-plus { color: rgba(255,255,255,0.85); }
.aspace-plus::before, .aspace-plus::after {
  content: ''; position: absolute; background: currentColor;
}
.aspace-plus::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.aspace-plus::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.aspace-plus.lg { width: 26px; height: 26px; }
.aspace-plus.lg::before { width: 2.5px; }
.aspace-plus.lg::after { height: 2.5px; }

/* Reveal animation utility */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1100ms var(--ease-cinema) calc(var(--reveal-delay, 0ms) * var(--motion-mult)),
              transform 1100ms var(--ease-cinema) calc(var(--reveal-delay, 0ms) * var(--motion-mult));
  transition-duration: calc(1100ms * var(--motion-mult));
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Word reveal */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-mask > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform calc(900ms * var(--motion-mult)) var(--ease-cinema) calc(var(--word-delay, 0ms) * var(--motion-mult));
}
.in .word-mask > span, .word-mask.in > span { transform: translateY(0); }

/* Hairline — slightly more confident */
.aspace-hairline { background: rgba(10,10,11,0.18); height: 2px; width: 100%; }
.on-dark .aspace-hairline { background: rgba(255,255,255,0.22); }

/* Section base */
.section {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--gutter);
}

/* Marquee */
@keyframes aspace-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Magnetic hover */
.magnetic { display: inline-flex; transition: transform 300ms var(--ease-out); }

/* Custom cursor */
.aspace-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--aspace-ink);
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out);
}
.aspace-cursor.lg { width: 56px; height: 56px; }

.aspace-glow {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,194,255,0.22) 0%, rgba(0,194,255,0.10) 28%, rgba(0,194,255,0) 65%);
  filter: blur(20px);
  mix-blend-mode: screen;
  transition: opacity 320ms var(--ease-standard);
}

@media (max-width: 900px), (pointer: coarse) {
  .aspace-cursor, .aspace-glow { display: none; }
}

/* Storyline — Lusion-style confident graphic ribbon
   ── sits BEHIND typography, enters from the left edge, sweeps in arcs
   ── stroke is thicker than before (18px) with rounded caps + joins
   ── mix-blend-mode keeps it readable on dark sections without crushing text */
.aspace-storyline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  /* Cinematic overlay — paints ON TOP of every section so the curve
     actually cuts across the composition (Lusion-style continuous
     gesture).  We rely on mix-blend-mode: screen on the path (see
     below) to keep the line atmospheric rather than dominant:
       · on dark sections: cyan blooms vibrantly through the screen
       · on light sections: it softens to a quiet tint
     The path is hand-placed in whitespace columns so it never crosses
     headlines; where it does graze text, screen blend keeps everything
     legible.  z-index sits below the cursor glow (z 9999) and any
     menus, so the line never blocks UI. */
  z-index: 3;
}
.aspace-storyline path {
  fill: none;
  /* stroke is set inline via gradient (url(#aspace-storyline-grad)) */
  /* Thick confident ribbon — Lusion-style. Round caps + round joins
     give the stroke its sculptural feel; the gradient + atmospheric
     glow keep it premium rather than neon. */
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(0,194,255,0.32))
          drop-shadow(0 0 42px rgba(0,194,255,0.16));
  shape-rendering: geometricPrecision;
  /* Always behind text — content rises above via section z-index. */
  mix-blend-mode: screen;
  opacity: 0.94;
  will-change: stroke-dashoffset;
}
.aspace-storyline path.glow {
  /* Wide diffused halo behind the crisp ribbon — the "atmospheric" layer */
  stroke-width: 56;
  opacity: 0.55;
  filter: blur(28px);
  mix-blend-mode: screen;
}

/* Card hover */
.studio-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  transition: transform 600ms var(--ease-cinema);
}
.studio-card:hover { transform: translateY(-4px); }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 120ms !important;
  }
  .reveal { transform: none; opacity: 1; }
  .word-mask > span { transform: none; }
}

/* Keyboard / utility */
.sr-only { position: absolute; left: -9999px; }

/* On dark sections */
.on-dark { background: var(--aspace-dark); color: #fff; }
.on-dark .aspace-eyebrow { color: var(--aspace-on-dark-quiet); }
.on-dark p { color: rgba(255,255,255,0.7); }

/* Hero blue swipe accent */
.blue-swipe {
  display: inline-block;
  background: linear-gradient(120deg, var(--aspace-blue) 0%, var(--aspace-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Studio card image placeholder pattern (creates a credible photo-stand-in) */
/* ASPACE photo placeholders
 * Stand-in studio photography until real shoots arrive.
 * Each tone gets one of the three mockups + a colour-cast overlay so
 * the original "warm / cyan / rose / ink" visual rhythm is preserved.
 */
.photo-placeholder {
  position: relative;
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.30), rgba(0,0,0,0.05) 60%),
    url("/site/uploads/mockup2.png") center/cover no-repeat;
  overflow: hidden;
}
.photo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}
.photo-placeholder.warm {
  background:
    linear-gradient(135deg, rgba(184,106,63,0.28), rgba(42,22,16,0.18) 60%),
    url("/site/uploads/mockup1.png") center/cover no-repeat;
}
.photo-placeholder.studio {
  background:
    linear-gradient(135deg, rgba(53,57,71,0.18), rgba(10,12,18,0.18) 60%),
    url("/site/uploads/mockup2.png") center/cover no-repeat;
}
.photo-placeholder.cyan {
  background:
    linear-gradient(135deg, rgba(0,131,184,0.20), rgba(5,16,24,0.20) 60%),
    url("/site/uploads/mockup2.png") center/cover no-repeat;
}
.photo-placeholder.bone {
  background:
    linear-gradient(135deg, rgba(216,210,196,0.25), rgba(138,130,115,0.10) 60%),
    url("/site/uploads/mockup1.png") center/cover no-repeat;
}
.photo-placeholder.rose {
  background:
    linear-gradient(135deg, rgba(184,80,102,0.22), rgba(26,10,16,0.20) 60%),
    url("/site/uploads/mockup3.png") center/cover no-repeat;
}
.photo-placeholder.ink {
  background:
    linear-gradient(135deg, rgba(10,10,11,0.45), rgba(0,0,0,0.30) 60%),
    url("/site/uploads/mockup3.png") center/cover no-repeat;
}

.photo-label {
  position: absolute;
  left: 18px; bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  z-index: 2;
}
.photo-corner {
  position: absolute;
  right: 14px; top: 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  z-index: 2;
}

/* Available badge */
.available-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(0,194,255,0.15);
  color: var(--aspace-blue);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(0,194,255,0.4);
}
.available-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aspace-blue);
  box-shadow: 0 0 8px var(--aspace-blue);
  animation: pulse-dot 1.6s var(--ease-standard) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* Tweaks panel z-fix above other elements */
[data-tweaks-panel] { z-index: 10001 !important; }

/* ============================================
   MOBILE — bespoke design, not a fallback
   ============================================ */
@media (max-width: 760px) {
  :root { --gutter: 22px; }
  body { font-size: 15.5px; }

  /* Larger tap targets, tactile pill */
  .aspace-pill {
    padding: 14px 22px;
    font-size: 14.5px;
    min-height: 48px;
  }
  .aspace-pill:active {
    transform: scale(0.97);
    transition: transform 120ms var(--ease-out);
  }
  .aspace-icon-btn {
    width: 44px; height: 44px;
  }
  .aspace-icon-btn:active { transform: scale(0.92); }

  /* Section padding rhythm — more vertical breathing, less horizontal */
  .section {
    padding: clamp(72px, 14vw, 110px) var(--gutter);
  }

  /* Soft ambient blue mobile glow (replaces cursor on touch) */
  .mobile-ambient-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    background:
      radial-gradient(40vw 40vw at 80% 12%, rgba(0,194,255,0.18), transparent 60%),
      radial-gradient(50vw 50vw at 12% 88%, rgba(0,194,255,0.10), transparent 65%);
    mix-blend-mode: screen;
  }

  /* Storyline — still confident on mobile, just slightly trimmed */
  .aspace-storyline path {
    stroke-width: 9;
    opacity: 0.86;
    filter: drop-shadow(0 0 9px rgba(0,194,255,0.30))
            drop-shadow(0 0 24px rgba(0,194,255,0.14));
  }
  .aspace-storyline path.glow {
    stroke-width: 36;
    opacity: 0.45;
    filter: blur(20px);
  }
}

@media (min-width: 761px) {
  .mobile-ambient-glow { display: none; }
}

/* Hide desktop cursor on touch devices */
@media (pointer: coarse) {
  .aspace-cursor, .aspace-glow { display: none !important; }
  body { cursor: auto; }
}

/* Mobile menu trigger — custom pill */
.mob-menu-trigger {
  display: none;
}
@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mob-menu-trigger { display: inline-flex; }
}
@media (min-width: 761px) {
  .mobile-only { display: none !important; }
}

/* Mobile menu — premium card stack */
.mob-menu-backdrop {
  position: fixed; inset: 0;
  z-index: 9500;
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms var(--ease-cinema);
}
.mob-menu-backdrop.open { opacity: 1; pointer-events: auto; }

.mob-menu-panel {
  position: fixed;
  top: 12px; left: 12px; right: 12px;
  z-index: 9600;
  display: flex; flex-direction: column;
  gap: 10px;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  pointer-events: none;
}
.mob-menu-card {
  background: #F4F2EC;
  border-radius: 22px;
  padding: 22px;
  /* While the menu is closed the card is invisible (opacity 0) but its
     bounding box can still cover content underneath (cookie banner,
     hero CTAs). Disable hit-testing here; the .open state re-enables it
     so tapping menu items still works when the menu is showing. */
  pointer-events: none;
  transform: translateY(-130%);
  opacity: 0;
  transition:
    transform 720ms var(--ease-cinema),
    opacity 500ms var(--ease-cinema);
}
.mob-menu-panel.open .mob-menu-card {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mob-menu-panel.open .mob-menu-card:nth-child(1) { transition-delay: 0ms; }
.mob-menu-panel.open .mob-menu-card:nth-child(2) { transition-delay: 90ms; }
.mob-menu-panel.open .mob-menu-card:nth-child(3) { transition-delay: 160ms; }
.mob-menu-panel.open .mob-menu-card:nth-child(4) { transition-delay: 220ms; }

.mob-menu-card.dark {
  background: #0A0A0B; color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
}

.mob-menu-nav-list { list-style: none; padding: 0; margin: 0; }
.mob-menu-nav-list li {
  border-top: 1px solid rgba(0,0,0,0.10);
}
.mob-menu-nav-list li:first-child { border-top: 0; }
.mob-menu-nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0A0A0B;
}
.mob-menu-nav-list a .num {
  font-size: 11px; letter-spacing: 0.16em;
  color: rgba(0,0,0,0.4); font-weight: 500;
}
.mob-menu-nav-list a:active {
  color: var(--aspace-blue);
}
.mob-menu-nav-list a .arrow {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Reel scale-up: flatter on mobile (no growth animation) */
@media (max-width: 760px) {
  .ps-grid article { grid-column: span 12 !important; aspect-ratio: 4/3 !important; }
  .ps-head { grid-template-columns: 1fr !important; }
}

/* ================================================================= */
/*  BOOKING FLOW — header isolation                                   */
/*  The booking app has its own primary chrome (BookingProgress).     */
/*  Hide the regular SiteHeader on booking pages so they don't stack  */
/*  with overlapping translucent backdrops (the "smudge" effect).     */
/* ================================================================= */
body[data-screen-label*="Booking"] header[style*="position: fixed"] {
  display: none !important;
}
/* AI Concierge trigger / cookie banner sit above content but should
   not overlap the booking progress — keep them out of the way of the
   sticky header by lowering their z-index relative to it (booking
   progress is at zIndex 9100). */
body[data-screen-label*="Booking"] [aria-label="Open ASPACE creative concierge"] {
  z-index: 9050 !important;
}

/* ================================================================= */
/*  BOOKING FLOW — responsive layer                                   */
/*  Targets every step (Preview → Pay) so the cinematic desktop      */
/*  layout collapses cleanly to a 1-column native-app feel on mobile, */
/*  with a comfortable middle layout for tablet.                      */
/* ================================================================= */
@media (max-width: 980px) {
  /* Progress bar: kill labels, tighter padding, allow horizontal scroll
     of step pills if too many */
  body[data-screen-label*="Booking"] [data-screen-label*="Booking"] > div:first-of-type > div:nth-child(2) {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
}
@media (max-width: 760px) {
  /* ---------- HERO (Step 01 Preview) ---------- */
  /* Two-column hero → stack media on top, copy below */
  body[data-screen-label*="Booking"] section[style*="grid-template-columns: 1fr 1.2fr"],
  body[data-screen-label*="Booking"] section[style*="gridTemplateColumns: 1fr 1.2fr"],
  body[data-screen-label*="Booking"] [style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Right-side scene becomes a fixed-aspect tile, on top */
  body[data-screen-label*="Booking"] section[style*="grid-template-columns: 1fr 1.2fr"] > div:last-child,
  body[data-screen-label*="Booking"] section[style*="gridTemplateColumns: 1fr 1.2fr"] > div:last-child {
    order: -1 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    border-radius: 18px !important;
    margin: 16px 16px 0 !important;
    overflow: hidden !important;
  }
  body[data-screen-label*="Booking"] section[style*="grid-template-columns: 1fr 1.2fr"] > div:first-child {
    padding: 24px 20px 28px !important;
  }

  /* ---------- 2-COL GRIDS → 1-COL ---------- */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: 1fr 1fr"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* 1.3fr 1fr (When), 1.4fr 1fr (Review) */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: 1.3fr 1fr"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: 1.3fr 1fr"],
  body[data-screen-label*="Booking"] [style*="grid-template-columns: 1.4fr 1fr"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ---------- 3-COL GRIDS → 1-COL ---------- */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(3, 1fr)"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* 2-col repeat (Extras, Recap) → 1-col */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(2, 1fr)"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ---------- STUDIO RAIL — horizontal scroll cards ---------- */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(6, 1fr)"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(6, 1fr)"],
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(5, 1fr)"],
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 78% !important;
    grid-template-columns: unset !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 16px !important;
    margin-inline: -16px !important;
    gap: 12px !important;
  }
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(6, 1fr)"] > *,
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(6, 1fr)"] > * {
    scroll-snap-align: start;
  }

  /* ---------- CALENDAR — bigger cells, simplified content ---------- */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(7, 1fr)"] {
    gap: 4px !important;
  }
  /* Day cell: square (aspect 1/1), centered day number, NO inline labels.
     min-width:0 lets cells shrink to fit the viewport. Status is shown by
     border/background color only — no internal text → no overflow. */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(7, 1fr)"] > button {
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  /* Hide every span after the first one inside calendar buttons (the
     Open/Tight status label and the NOW badge) on mobile. */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(7, 1fr)"] > button > span ~ span {
    display: none !important;
  }
  /* Calendar card itself: tighter padding on mobile */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(7, 1fr)"]:closest-doesnt-exist,
  body[data-screen-label*="Booking"] section [style*="border-radius: 24px"][style*="padding: clamp(20px, 3vw, 32px)"] {
    padding: 16px !important;
  }

  /* ---------- BOOKING SECTIONS — comfortable padding ---------- */
  body[data-screen-label*="Booking"] section {
    padding-inline: 16px !important;
  }
  body[data-screen-label*="Booking"] section > div:first-child {
    padding: 24px 0 32px !important;
  }

  /* ---------- HEADLINES — dial back the megatype on small screens */
  body[data-screen-label*="Booking"] section h1,
  body[data-screen-label*="Booking"] section h2 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1 !important;
  }

  /* ---------- FORM INPUTS — 16px font (no iOS auto-zoom), bigger tap */
  body[data-screen-label*="Booking"] input,
  body[data-screen-label*="Booking"] textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* ---------- COST RECAP PANEL: not sticky on mobile, stays in flow */
  body[data-screen-label*="Booking"] [style*="position:sticky"],
  body[data-screen-label*="Booking"] [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* ---------- NAV ROW — stack buttons full-width if cramped ---------- */
  body[data-screen-label*="Booking"] section > div > div[style*="justify-content: space-between"]:last-child,
  body[data-screen-label*="Booking"] section > div > div[style*="justifyContent: space-between"]:last-child {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* ---------- BUTTONS — minimum tap target ---------- */
  body[data-screen-label*="Booking"] button {
    min-height: 44px;
  }

}

/* ---------- DISABLE HEAVY HOVER MOTION ON TOUCH ---------- */
@media (max-width: 760px) and (hover: none) {
  body[data-screen-label*="Booking"] section [style*="transform: translate"]:not(:hover) {
    transform: none !important;
  }
}

/* TABLET — keep 2-col where it earns its space ---------- */
@media (min-width: 761px) and (max-width: 1024px) {
  /* Studio rail: 3-col instead of 6-col */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(6, 1fr)"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 3-col extras/duration: 2-col on tablet */
  body[data-screen-label*="Booking"] [style*="grid-template-columns: repeat(3, 1fr)"],
  body[data-screen-label*="Booking"] [style*="gridTemplateColumns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================= */
/*  ASPACE SPLASH SCREEN                                              */
/*  Black full-viewport intro with white logo. After ~1.2s the two    */
/*  halves slide apart (top up, bottom down) — the "shutter open"     */
/*  reveals the site. Once-per-session via sessionStorage.            */
/*                                                                    */
/*  Pure CSS animation — works even before JS hydrates.               */
/* ================================================================= */
.aspace-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  /* Container itself — kept around but doesn't block once halves are gone */
}
.aspace-splash__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #0A0A0B;
  pointer-events: auto;
  will-change: transform;
}
.aspace-splash__half--top {
  top: 0;
  animation: aspace-splash-up 760ms cubic-bezier(0.86, 0, 0.07, 1) 1300ms forwards;
}
.aspace-splash__half--bottom {
  bottom: 0;
  animation: aspace-splash-down 760ms cubic-bezier(0.86, 0, 0.07, 1) 1300ms forwards;
}
.aspace-splash__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
  /* Logo gently appears, breathes, then fades just before the shutter opens */
  animation: aspace-splash-logo 1300ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.aspace-splash__logo img {
  width: auto;
  height: clamp(44px, 5.5vw, 72px);
  max-width: 70vw;
  display: block;
}
@keyframes aspace-splash-up {
  to { transform: translateY(-100%); }
}
@keyframes aspace-splash-down {
  to { transform: translateY(100%); }
}
@keyframes aspace-splash-logo {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); letter-spacing: 0.10em; }
  18%  { opacity: 1; transform: translateY(0) scale(1);     letter-spacing: 0.06em; }
  82%  { opacity: 1; transform: translateY(0) scale(1);     letter-spacing: 0.06em; }
  100% { opacity: 0; transform: translateY(-4px) scale(1.02); }
}
/* Skip splash if shown earlier this session */
html.no-splash .aspace-splash { display: none !important; }
/* Reduced motion: snap shut quickly */
@media (prefers-reduced-motion: reduce) {
  .aspace-splash__half--top    { animation: aspace-splash-up   200ms ease 200ms forwards; }
  .aspace-splash__half--bottom { animation: aspace-splash-down 200ms ease 200ms forwards; }
  .aspace-splash__logo         { animation: aspace-splash-logo 400ms ease forwards; }
}

/* ----------------------------------------------------------------- */
/*  Hide scrollbars site-wide — scroll still works, just invisible    */
/* ----------------------------------------------------------------- */
html, body, * {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy IE / Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}