/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES & RESET
   ═══════════════════════════════════════════════════════════ */
:root {
  --noir: #09080b; --umber: #1e1a16; --white: #fbfbfbb1;
  --rose: #c9956b; --rose-light: #dbb08a; --blush: #e8c4a8;
  --dot-red: #C41E3A; --dot-teal: #2EC4B6;
  --champagne: #f2e6d9; --ivory: #faf6f1; --parch: #f0ebe4;
  --wine: #7a3b4e; --mauve: #9b7082; --sage: #8a9a7e;
  --saffron: #e0a458;
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --lab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1100px;
  --page-gutter-desktop: 3.5rem;
  --page-gutter-tablet: 1.5rem;
  --page-gutter-mobile: 1.2rem;
  --section-space-desktop: 7.5rem;
  --section-space-tablet: 5rem;
  --section-space-mobile: 4rem;
  --story-kicker-color: rgba(240, 235, 228, 0.66);
  --story-title-color: #fbf4ee;
  --story-scene-color: #dbb08a;
  --story-line-color: rgba(232, 196, 168, 0.88);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* MOBILE FIX: suppress iOS/Android blue tap-highlight flash on all interactive elements */
a, button, [role="button"], input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  max-width: 100%;
  overflow-x: clip;
}
body {
  background: linear-gradient(135deg, #1a1612 0%, #0a0a0f 50%, #1a2020 100%); color: var(--umber);
  font-family: var(--font-body); font-weight: 300;
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}
body.intro-active { overflow: hidden; }
a { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; font-family: inherit; background: none; }

/* ═══════════════════════════════════════════════════════════
   CINEMATIC INTRO OVERLAY
   ═══════════════════════════════════════════════════════════ */
.intro-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.intro-overlay.fade-out { pointer-events: none; }
.intro-overlay.fade-out .intro-bg-fade { opacity: 0; }
.intro-overlay.hidden { display: none; }
.intro-bg-fade {
  position: absolute; inset: 0; background: var(--noir);
  transition: opacity 0.8s var(--ease-smooth);
}
.intro-content-group {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2;
  transition: transform 1s var(--ease), opacity 0.6s var(--ease-smooth);
}
.intro-flyout .intro-subtitle,
.intro-flyout .intro-tagline { opacity: 0 !important; transition: opacity 0.3s !important; }
.intro-flyout .intro-mark { margin-bottom: 0; }
.intro-flyout .intro-title { font-size: 1.25rem; letter-spacing: 0.35em; }
.intro-mark { margin-bottom: 3rem; opacity: 0; transform: scale(0.7); }
.intro-mark svg { width: 120px; height: 120px; }
.intro-mark svg path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.intro-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem); color: var(--ivory);
  letter-spacing: 0.35em; display: flex;
  position: relative;
}
.intro-title .v-dots {
  position: absolute;
  top: 0.45em;
  left: 1.08em;
  display: flex;
  gap: 0.16em;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}
.intro-title .v-dots span {
  width: 0.10em;
  height: 0.10em;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.85;
}
.intro-title .letter {
  display: inline-block; opacity: 0;
  text-align: center;
  overflow: visible;
  background: linear-gradient(160deg, #f5e4b0 0%, #e0b87a 25%, #c9956b 55%, #dbb08a 80%, #f5e4b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.intro-subtitle {
  font-size: 0.6rem; letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--rose); opacity: 0; margin-top: 1rem;
}
.intro-tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.05rem; color: rgba(224,164,88,0.88);
  opacity: 0; margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.4rem 3.5rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.6s var(--ease-smooth);
  opacity: 0; transform: translateY(-20px);
  background: linear-gradient(160deg, #09080b 0%, #1e1a16 40%, #2a2520 70%, #0e0c10 100%);
  background-size: 180% 180%;
  animation: heroAtmosphere 25s ease infinite alternate;
  box-shadow: 0 1px 40px rgba(0,0,0,0.3);
}
nav.visible { opacity: 1; transform: translateY(0); }
nav.scrolled {
  /* Note: backdrop-filter has no effect on an opaque background like this gradient.
     It's commented out but can be re-enabled if you switch to a semi-transparent background. */
  /* backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); */
  padding: 0.7rem 3.5rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.9rem; }
.nav-logo svg { height: 30px; width: auto; }
.nav-logo .petal-group {
  /* The initial transform is set in the SVG, but we define it here for the transition to work on mouse-out */
  transform: translate(30px, 30px) rotate(0deg);
  transition: transform 0.8s var(--ease);
}
.nav-logo:hover .petal-group {
  transform: translate(30px, 30px) rotate(60deg);
}
.nav-logo-text {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.5rem; color: var(--ivory); letter-spacing: 0.12em;
  position: relative;
}
.nav-logo-text .nav-logo-dots {
  position: absolute;
  top: 0.4em;
  left: 0.75em;
  display: flex;
  gap: 0.16em;
}
.nav-logo-dots span {
  width: 0.12em; height: 0.12em; border-radius: 50%;
  background: var(--rose); opacity: 0.85;
}
.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(250,246,241,0.45); font-weight: 300;
  transition: color 0.4s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px;
  background: var(--rose); transition: width 0.5s var(--ease);
}
.nav-links a:hover { color: var(--rose); }
.nav-links a.active { color: var(--rose); }
.nav-links a.active::after,
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-cta {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); background: var(--rose);
  padding: 0.55rem 1.4rem; border-radius: 2px; font-weight: 500;
  transition: all 0.4s;
}
.nav-links a.nav-cta:hover { background: var(--rose-light); color: var(--noir); transform: translateY(-1px); }
.nav-links a.nav-cta::after { display: none !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ivory); transition: all 0.3s; }

@keyframes heroAtmosphere {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  background: linear-gradient(135deg, #1a1612 0%, #0a0a0f 50%, #1a2020 100%);
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(26,22,18,0.12) 40%,
      rgba(26,22,18,0.22) 60%,
      rgba(26,22,18,0.32) 80%,
      rgba(26,22,18,0.42) 100%
    );
  z-index: 3; pointer-events: none;
}
.hero-bg-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; z-index: 0;
}
.hero-bg-mark svg { width: 500px; height: 500px; }
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5; pointer-events: none; z-index: 1;
}
.hero-mark { margin-bottom: 2.5rem; }
.hero-mark svg { width: 90px; height: 90px; }
.hero-mark .outer-ring { transform-origin: center; }
/* ─── FIX 5: 3D Floating Title (CSS layer) ────────────────────────────────
   Wrapper handles the gentle vertical float via CSS keyframe.
   The title itself handles 3D mouse-parallax rotateX/Y via JS.
   Separating the two prevents transform conflicts and keeps both
   effects composited on the GPU.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-title-float {
  display: inline-flex;
  animation: heroTitleFloat 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-style: preserve-3d; /* Let 3D transforms from child pass through */
}
@keyframes heroTitleFloat {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-8px); }
}
.hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 8rem);
  letter-spacing: 0.18em; line-height: 1; margin-bottom: 0.5rem;
  position: relative; display: inline-flex;
  background: linear-gradient(135deg, var(--ivory) 0%, var(--rose-light) 50%, var(--ivory) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Depth layers via drop-shadow (works on gradient/transparent text) */
  filter: drop-shadow(0 4px 18px rgba(201,149,107,0.18))
          drop-shadow(0 12px 40px rgba(0,0,0,0.35));
  will-change: transform;
  transform-style: preserve-3d;
}
/* hero-content gets perspective so child 3D transforms are projected correctly */
.hero-content {
  position: relative; z-index: 2;
  perspective: 900px;
  perspective-origin: 50% 30%;
}
#heroContent,
#heroScroll { opacity: 1; }
body.intro-active #heroContent,
body.intro-active #heroScroll { opacity: 0; }
.hero-title .v-dots {
  position: absolute; top: 0.14em; left: 0.9em;
  display: flex; gap: 0.14em;
}
.hero-title .v-dots span {
  width: 0.09em; height: 0.09em; border-radius: 50%;
  background: var(--rose); opacity: 0.85;
}
.hero-subtitle {
  font-family: var(--font-body); font-weight: 200; font-size: 0.6rem;
  color: var(--rose); letter-spacing: 0.5em; text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-separator {
  position: relative; width: 180px; height: 1px;
  margin: 0 auto 1.5rem auto;
  background: linear-gradient(90deg, transparent, #b8956a 30%, #b8956a 70%, transparent);
  opacity: 0.4;
}
.hero-separator .sep-diamond {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6px; color: #b8956a; line-height: 1;
  background: #09080b; padding: 0 6px;
}
.hero-tagline {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(224,164,88,0.88); letter-spacing: 0.04em; margin-bottom: 3rem;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ivory); font-weight: 300; padding: 1rem 2.5rem;
  border: 1px solid rgba(201,149,107,0.35);
  position: relative; overflow: hidden;
  transition: all 0.5s var(--ease);
}
.hero-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 0;
}
.hero-cta:hover::before { transform: scaleX(1); }
.hero-cta:hover { color: var(--noir); border-color: var(--rose); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201,149,107,0.3); }
.hero-cta span { position: relative; z-index: 1; }
.hero-cta svg { transition: transform 0.4s var(--ease); position: relative; z-index: 1; }
.hero-cta:hover svg { transform: translateX(4px); }

/* ── Split CTA group ── */
.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.hero-cta-ghost {
  border-color: rgba(250,246,241,0.12) !important;
}
.hero-cta-ghost::before { display: none !important; }
.hero-cta-ghost:hover {
  color: var(--rose) !important;
  border-color: rgba(201,149,107,0.4) !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Service card tags */
.sov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.3rem;
}
.sov-tags span {
  font-size: 0.47rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(155, 112, 130, 0.6); /* Changed from --rose to --mauve */
  border: 1px solid rgba(155, 112, 130, 0.2); /* Changed from --rose to --mauve */
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
}
/* Card-specific tag colors to match stamps */
.sov-card--couple .sov-tags span,
.sov-card--maternity .sov-tags span {
  color: rgba(232, 196, 168, 0.7); /* --blush */
  border-color: rgba(232, 196, 168, 0.25); /* --blush */
}
.sov-card--celebrations .sov-tags span {
  color: rgba(224, 164, 88, 0.7); /* --saffron */
  border-color: rgba(224, 164, 88, 0.25); /* --saffron */
}
/* Commercial and Conceptual tags already use --mauve, which is the default. */

/* Pricing anchor */
.sov-price {
  font-size: 0.68rem;
  color: rgba(250,246,241,0.2);
  letter-spacing: 0.06em;
  margin: 0.1rem 0 0.2rem;
}
.sov-price strong { color: var(--rose); font-weight: 400; }
@media (max-width: 600px) {
  .hero-cta-group { flex-direction: column; }
}
.hero-scroll {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero-scroll span { font-size: 0.45rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(250,246,241,0.15); }
.scroll-line { width: 1px; height: 30px; position: relative; overflow: hidden; background: rgba(201,149,107,0.06); }
.scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: var(--rose); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0% { top: -100%; } 50% { top: 100%; } 100% { top: 100%; } }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════
   SECTION COMMONS
   ═══════════════════════════════════════════════════════════ */
.section { padding: var(--section-space-desktop) var(--page-gutter-desktop); position: relative; }
.section-dark { background: linear-gradient(170deg, #0e0c10, #1e1a16 50%, #0e0c10); color: var(--ivory); }
.section-warm { background: var(--champagne); }
#contact { background: var(--ivory); }
.container { width: min(100%, var(--container-max)); margin: 0 auto; }
.section-tag {
  font-size: 0.55rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: 0.04em;
  line-height: 1.2; margin-bottom: 1rem;
}
.section-desc {
  font-size: 0.85rem; color: rgba(30, 26, 22, 0.65); max-width: 520px;
  line-height: 1.85; margin-bottom: 3rem;
}
.section-dark .section-desc { color: rgba(250,246,241,0.5); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO - SECTION INTRO ANIMATION
   ═══════════════════════════════════════════════════════════ */
/* Hide containers initially to prevent FOUC before JS runs */
#portfolio:not(.is-animated) .container > *:not(.ethereal-carousel) {
  opacity: 0;
}

/* Title: Cinematic word-mask reveal (film-title style) */
#portfolioTitle {
  overflow: visible; /* words clip themselves */
}

/* Thin accent rule that sweeps in before the words */
#portfolioTitle::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--rose);
  margin-bottom: 0.75rem;
  opacity: 0;
  transition: width 0.65s var(--ease), opacity 0.35s ease;
}

/* Each word gets a mask wrapper — text rises from beneath it */
#portfolioTitle .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.25;
}
#portfolioTitle .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 0.55s var(--ease-smooth);
}

/* Description: Dissolve effect */
#portfolioDesc {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 1.2s var(--ease-smooth), filter 1.2s var(--ease-smooth), transform 1.2s var(--ease-smooth);
}

/* When the section is animated by JS, apply final states */
#portfolio.is-animated .section-tag {
  opacity: 1;
  transition: opacity 0.9s ease;
}

#portfolio.is-animated #portfolioTitle::before {
  width: 2.8rem;
  opacity: 1;
}

#portfolio.is-animated #portfolioTitle .word-inner,
#portfolio.is-animated #portfolioDesc {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
#portfolio.is-animated .portfolio-filters button {
  animation: filterPillIn 0.5s var(--ease) forwards;
}
#portfolio.is-animated .portfolio-filters button:nth-child(1)  { animation-delay: 0.05s; }
#portfolio.is-animated .portfolio-filters button:nth-child(2)  { animation-delay: 0.1s; }
#portfolio.is-animated .portfolio-filters button:nth-child(3)  { animation-delay: 0.15s; }
#portfolio.is-animated .portfolio-filters button:nth-child(4)  { animation-delay: 0.2s; }
#portfolio.is-animated .portfolio-filters button:nth-child(5)  { animation-delay: 0.25s; }
#portfolio.is-animated .portfolio-filters button:nth-child(6)  { animation-delay: 0.3s; }
#portfolio.is-animated .portfolio-filters button:nth-child(7)  { animation-delay: 0.35s; }
#portfolio.is-animated .portfolio-filters button:nth-child(8)  { animation-delay: 0.4s; }
#portfolio.is-animated .portfolio-filters button:nth-child(9)  { animation-delay: 0.45s; }
#portfolio.is-animated .portfolio-filters button:nth-child(10) { animation-delay: 0.5s; }
#portfolio.is-animated .portfolio-filters button:nth-child(11) { animation-delay: 0.55s; }
#portfolio.is-animated .portfolio-filters button:nth-child(12) { animation-delay: 0.6s; }

/* ═══════════════════════════════════════════════════════════
   VIDEO WORKS - SECTION INTRO ANIMATION
   ═══════════════════════════════════════════════════════════ */
#video-works.video-works-enhanced .video-intro {
  position: relative;
}

#video-works.video-works-enhanced:not(.is-animated) #videoEyebrow .video-tag-letter,
#video-works.video-works-enhanced:not(.is-animated) #videoTitle,
#video-works.video-works-enhanced:not(.is-animated) #videoDesc {
  opacity: 0;
}

#videoEyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.18em;
  position: relative;
  padding-bottom: 0.95rem;
  margin-bottom: 1.15rem;
}

#videoEyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,149,107,0.92), rgba(201,149,107,0.16));
  opacity: 0;
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform 0.9s var(--ease), opacity 0.45s ease;
}

#videoEyebrow .video-tag-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px) scale(0.9);
  transition: transform 0.95s var(--ease), opacity 0.7s ease, filter 0.95s var(--ease-smooth);
}

#videoTitle {
  position: relative;
  width: fit-content;
  margin-bottom: 1rem;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px) scale(0.985);
  transition: opacity 1.05s var(--ease-smooth), filter 1.05s var(--ease-smooth), transform 1.05s var(--ease);
}

#videoTitle::before {
  content: '';
  position: absolute;
  inset: -0.15rem -0.8rem;
  background: linear-gradient(102deg, transparent 28%, rgba(250,246,241,0.18) 50%, transparent 72%);
  opacity: 0;
  transform: translateX(-55%) skewX(-18deg);
  pointer-events: none;
}

#videoTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.8rem;
  width: 3.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,149,107,0.88), rgba(201,149,107,0.08));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.95s var(--ease), opacity 0.5s ease;
}

#videoDesc {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(16px);
  transition: opacity 1.15s var(--ease-smooth), filter 1.15s var(--ease-smooth), transform 1.15s var(--ease);
}

#video-works.is-animated #videoEyebrow .video-tag-letter {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

#video-works.is-animated #videoEyebrow::after {
  opacity: 0.55;
  transform: scaleX(1);
}

#video-works.is-animated #videoTitle {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

#video-works.is-animated #videoTitle::before {
  animation: videoTitleSweep 1.35s var(--ease-smooth) 0.28s both;
}

#video-works.is-animated #videoTitle::after {
  opacity: 1;
  transform: scaleX(1);
}

#video-works.is-animated #videoDesc {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@keyframes videoTitleSweep {
  0% {
    opacity: 0;
    transform: translateX(-55%) skewX(-18deg);
  }
  18% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(90%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #video-works.video-works-enhanced #videoEyebrow .video-tag-letter,
  #video-works.video-works-enhanced #videoTitle,
  #video-works.video-works-enhanced #videoDesc,
  #video-works.video-works-enhanced #videoEyebrow::after,
  #video-works.video-works-enhanced #videoTitle::after {
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  #video-works.video-works-enhanced #videoTitle::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

@keyframes filterPillIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO
   ═══════════════════════════════════════════════════════════ */
.portfolio-tools {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 2rem; margin-bottom: 3.5rem;
}
.portfolio-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 1; }
.portfolio-filters button {
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250,246,241,0.4); font-weight: 300;
  padding: 0.5rem 1.3rem;
  border: 1px solid rgba(250,246,241,0.08);
  border-radius: 30px;
  background: rgba(250, 246, 241, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: none;

  /* Hidden until intro animation fires */
  opacity: 0;
  transform: translateY(20px);

  /* Snappy transitions for user interactions (click/hover) */
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.portfolio-filters button:hover,
.portfolio-filters button.active { 
  color: var(--rose); background: rgba(201, 149, 107, 0.1); border-color: rgba(201,149,107,0.4);
}
/* Apply transform lift only after the intro animation is complete to avoid conflicts */
#portfolio.is-animated .portfolio-filters button:hover,
#portfolio.is-animated .portfolio-filters button.active { transform: translateY(-1px); }
.portfolio-actions { display: flex; gap: 1.5rem; align-items: center; }
.portfolio-select { position: relative; min-width: 160px; }
.portfolio-select select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(250,246,241,0.15);
  padding: 0.5rem 1.5rem 0.5rem 0;
  color: var(--ivory); font-family: var(--font-body); font-size: 0.8rem;
  outline: none; transition: border-color 0.3s; cursor: pointer;
  border-radius: 0;
}
.portfolio-select select:focus { border-color: var(--rose); }
.portfolio-select svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: rgba(250,246,241,0.3); pointer-events: none; }
.portfolio-select select option { background: var(--umber); color: var(--ivory); }

.portfolio-search { position: relative; min-width: 160px; }
.portfolio-search input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(250,246,241,0.15);
  padding: 0.5rem 1.5rem 0.5rem 0;
  color: var(--ivory); font-family: var(--font-body); font-size: 0.8rem;
  outline: none; transition: border-color 0.3s;
}
.portfolio-search input:focus { border-color: var(--rose); }
.portfolio-search svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: rgba(250,246,241,0.3); pointer-events: none; }

.gallery-no-results {
  display: none; text-align: center; padding: 4rem 0;
  color: rgba(250,246,241,0.4); font-size: 0.9rem;
  letter-spacing: 0.05em; width: 100%;
  font-family: var(--font-body);
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery-item {
  position: relative; overflow: hidden; border-radius: 2px;
  cursor: none; aspect-ratio: 4/5; background: #0e0c10;
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Accessibility: Focus state for keyboard navigation */
.gallery-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rose), 0 12px 32px rgba(0,0,0,0.5);
  z-index: 5;
}
.gallery-item:hover { transform: translateY(-9px); box-shadow: 0 32px 72px rgba(0,0,0,0.58), 0 10px 24px rgba(0,0,0,0.3); }
.gallery-item.wide { grid-column: span 2; aspect-ratio: unset; }
/* ─── FIX 2: No Aggressive Cropping ───────────────────────────────────────
   Root cause: background-size:cover clips any image that doesn't match the
   container's 4:5 ratio. A landscape photo loses its top and bottom thirds.

   Fix: Switch to background-size:contain so the full image is always visible.
   The ::before pseudo-element inherits the same background-image and renders
   it blurred + darkened, filling the surrounding space with an atmospheric
   "ambient" layer — a common cinema/magazine technique.
   ─────────────────────────────────────────────────────────────────────────── */
.gallery-item .gi-bg {
  position: absolute;
  inset: 0;
  background-size: cover;       /* Fill card completely — no black bars */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0e0c10;   /* Clean dark fill behind image */
  z-index: 1;
  filter: grayscale(100%) brightness(0.9) contrast(1.05);
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle inner vignette blends image edges with ambient layer */
.sw-gallery-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit; /* Dynamically pulls the current photo */
  background-size: cover;
  background-position: center;
  filter: blur(80px) brightness(0.3);
  opacity: 0.6;
  z-index: 1;
}
.gallery-item:hover .gi-bg { transform: scale(1.05); filter: grayscale(0%) brightness(1) contrast(1); }
/* ─── FIX 1: View Pill ─────────────────────────────────────────────────────
   Root cause of lag: setting top/left every rAF frame triggers layout reflow
   (browser must recalculate geometry for every pixel change). Also, CSS
   transition on `transform` conflicted with the JS-driven transform, causing
   a fight between the two animation systems.

   Fix: Anchor at top:0/left:0 and drive ALL movement through translate3d()
   in the JS rAF loop. GPU-composited, zero layout reflow. Opacity-only CSS
   transition for show/hide — no transform in the transition rule.
   ─────────────────────────────────────────────────────────────────────────── */
.cursor-follow {
  position: fixed; top: 0; left: 0; z-index: 9998;
  padding: 0.5rem 1.2rem; border-radius: 50px;
  /* margin-left/top removed — centering handled by JS offset in translate3d */
  pointer-events: none;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.32);
  font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: #fff; font-weight: 500; font-family: var(--font-body);
  white-space: nowrap;
  /* Promote to own GPU compositor layer — prevents repaints from affecting layout */
  will-change: transform, opacity;
  opacity: 0;
  /* Only transition opacity — transform is fully driven by rAF for zero-jank tracking */
  transition: opacity 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor-follow.active { opacity: 1; }
.gallery-item .gi-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,8,11,0.94) 0%, rgba(9,8,11,0.28) 52%, transparent 100%);
  opacity: 0; transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: flex-end; padding: 1.7rem 1.9rem; z-index: 2;
}
.gallery-item:hover .gi-overlay { opacity: 1; }
.gi-overlay > div { transform: translateY(12px); transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-item:hover .gi-overlay > div { transform: translateY(0); }
.gi-overlay h4 { font-family: var(--font-display); font-weight: 300; font-size: 1.14rem; color: var(--ivory); letter-spacing: 0.055em; margin-bottom: 0.32rem; }
.gi-overlay p { font-size: 0.51rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose); margin-top: 0; opacity: 0.9; }
.gallery-item.gi-editorial .gi-overlay {
  background: linear-gradient(180deg, rgba(9,8,11,0.04) 0%, rgba(9,8,11,0.12) 26%, rgba(9,8,11,0.72) 68%, rgba(9,8,11,0.96) 100%);
}
.gallery-item.gi-editorial .gi-story-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  width: 100%;
  max-width: 15.5rem;
}
.gallery-item.gi-editorial .gi-kicker {
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--story-kicker-color);
}
.gallery-item.gi-editorial .gi-overlay h4 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.02;
  letter-spacing: 0.035em;
  color: var(--story-title-color);
}
.gallery-item.gi-editorial .gi-scene {
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--story-scene-color);
  opacity: 0.88;
}
.gallery-item.gi-editorial .gi-editorial-divider {
  display: block;
  width: 0;
  height: 1px;
  margin: 0.28rem 0 0.18rem;
  background: linear-gradient(90deg, transparent, var(--story-scene-color), transparent);
  opacity: 0;
}
.gallery-item.gi-editorial .gi-storyline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.58;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--story-line-color);
  margin: 0.15rem 0 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item.gi-editorial:hover .gi-storyline,
.gallery-item.gi-editorial:focus-visible .gi-storyline {
  opacity: 1;
  max-height: 4.8rem;
  transform: translateY(0);
}
.gi-count {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-size: 0.51rem; letter-spacing: 0.13em; color: rgba(250,246,241,0.82);
  background: rgba(9,8,11,0.44);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 0.28rem 0.74rem; border-radius: 20px;
  display: flex; align-items: center; gap: 0.32rem;
  border: 1px solid rgba(250,246,241,0.07);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.gallery-item:hover .gi-count { opacity: 1; transform: translateY(0); }

/* ─── Coming Soon Treatment ─── */
.gallery-item[data-coming-soon="true"] .gi-count { display: none; }
.gallery-item[data-coming-soon="true"] .gi-overlay {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(9,8,11,0.85) 0%, rgba(9,8,11,0.4) 100%);
}
.gallery-item[data-coming-soon="true"] .gi-overlay::before {
  content: 'COMING SOON';
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  color: var(--rose);
  opacity: 0.45;
  margin-bottom: 0.8rem;
}
.gallery-item[data-coming-soon="true"] .gi-overlay h4 {
  font-style: italic;
  font-size: 1.3rem;
  opacity: 0.85;
}
.gallery-item[data-coming-soon="true"] .gi-overlay p { display: none; }
/* Ensure cinematic cards still show the coming soon background gradient */
.gallery-item[data-coming-soon="true"].gi-cinematic .gi-overlay {
  background: radial-gradient(circle at center, rgba(9,8,11,0.85) 0%, rgba(9,8,11,0.4) 100%) !important;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item.gi-editorial .gi-story-card > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.56s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.56s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gallery-item.gi-editorial .gi-editorial-title {
    transform: translateY(14px) scale(0.94);
    transform-origin: left bottom;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gallery-item.gi-editorial .gi-editorial-divider {
    transform: none;
    transition:
      width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.56s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gallery-item.gi-editorial:hover .gi-story-card > *,
  .gallery-item.gi-editorial:focus-visible .gi-story-card > * {
    opacity: 1;
    transform: translateY(0);
  }

  .gallery-item.gi-editorial:hover .gi-editorial-title,
  .gallery-item.gi-editorial:focus-visible .gi-editorial-title {
    transform: translateY(0) scale(1);
    transition-delay: 0.04s;
  }

  .gallery-item.gi-editorial:hover .gi-scene,
  .gallery-item.gi-editorial:focus-visible .gi-scene {
    transition-delay: 0.09s;
  }

  .gallery-item.gi-editorial:hover .gi-editorial-divider,
  .gallery-item.gi-editorial:focus-visible .gi-editorial-divider {
    width: 78px;
    opacity: 1;
    transition-delay: 0.14s;
  }

  .gallery-item.gi-editorial:hover .gi-storyline,
  .gallery-item.gi-editorial:focus-visible .gi-storyline {
    transition-delay: 0.14s;
  }
}

/* Viewer Coming Soon Screen */
.sw-coming-soon-notice {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  max-width: 500px;
  padding: 2rem;
  animation: fadeIn 1s var(--ease) both;
}
.sw-coming-soon-notice .sw-gallery-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  margin: 1rem 0;
  color: var(--ivory);
  line-height: 1.1;
}
.sw-is-coming-soon .sw-coming-soon-notice { display: flex; }
.sw-is-coming-soon .sw-gallery-nav,
.sw-is-coming-soon .sw-gallery-strip,
.sw-is-coming-soon .sw-progress-bar { display: none !important; }

/* Viewer Background Gradients (mapping item fallbacks to the viewer container) */
.sw-gallery.gi-1 { background: linear-gradient(135deg, #d4a574, #8b6f5c, #c9956b); }
.sw-gallery.gi-2 { background: linear-gradient(135deg, #b8967a, #7a3b4e, #dbb08a); }
.sw-gallery.gi-3 { background: linear-gradient(135deg, #9b7082, #c9956b, #e8c4a8); }
.sw-gallery.gi-4 { background: linear-gradient(135deg, #8a9a7e, #c9956b, #f0ebe4); }
.sw-gallery.gi-5 { background: linear-gradient(135deg, #7a3b4e, #1e1a16, #c9956b); }
.sw-gallery.gi-6 { background: linear-gradient(135deg, #dbb08a, #9b7082, #c9956b); }
.sw-gallery.gi-7 { background: linear-gradient(135deg, #c9956b, #1e1a16, #7a3b4e); }
.sw-gallery.gi-8 { background: linear-gradient(135deg, #e8c4a8, #8a9a7e, #c9956b); }

.gi-count svg { width: 10px; height: 10px; }

/* ─── Cinematic Story Reveal (Conceptual Cards) ─── */
.gi-story {
  font-family: var(--font-body); font-size: 0.72rem; line-height: 1.6;
  color: rgba(250,246,241,0.7); margin-top: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  font-weight: 300; width: 100%;
}
.gallery-item:hover .gi-story {
  margin-top: 0.8rem; max-height: 160px; opacity: 1; transition-delay: 0.1s;
}

/* ─── Focus Pull Reveal (Cinematic Cards) ─── */
.gallery-item.gi-cinematic {
  overflow: hidden;
}

/* Image — black & white at rest, blooms into color on hover */
.gallery-item.gi-cinematic .gi-bg {
  transition: filter 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 8s var(--ease);
}
.gallery-item.gi-cinematic:hover .gi-bg {
  filter: grayscale(0%) brightness(1.03) contrast(1);
  transform: scale(1.08);
}

/* Overlay — centered flex column, no gradient needed (blur handles contrast) */
.gallery-item.gi-cinematic .gi-overlay {
  align-items: center;
  justify-content: center;
  padding: 2rem 1.8rem;
  z-index: 5;
  background: none;
  flex-direction: column;
}

/* Reset default overlay slide-up animation */
.gallery-item.gi-cinematic .gi-overlay > div {
  transform: none !important;
}

/* Title group — centered, all text stacked */
.gi-cinematic .gi-title-group {
  text-align: center;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Subtitle — small caps above title */
.gi-cinematic .gi-subtitle {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0c47a;
  margin-bottom: 0.7rem;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 18px rgba(0,0,0,0.7);
  font-weight: 500;
}
.gallery-item.gi-cinematic:hover .gi-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* Title — large, elegant */
.gi-cinematic .gi-title-group h4 {
  font-size: 1.7rem;
  margin-bottom: 0;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 4px 24px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.4);
  letter-spacing: 0.02em;
  transform: scale(0.92);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.gallery-item.gi-cinematic:hover .gi-title-group h4 {
  transform: scale(1);
}

/* Divider — thin gold line, grows on hover */
.gi-cinematic .gi-divider {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #daa06d, transparent);
  margin: 0.8rem 0;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}
.gallery-item.gi-cinematic:hover .gi-divider {
  width: 80px;
  transition-delay: 0.3s;
}

/* Story text — fades in below divider */
.gi-cinematic .gi-story {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.9;
  color: rgba(255,252,248,1);
  margin: 0;
  opacity: 1;
  max-height: none;
  font-weight: 400;
  text-align: center;
  overflow: visible;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 3px 16px rgba(0,0,0,0.8), 0 0 48px rgba(0,0,0,0.5);
}

/* Staggered story lines — float up into place */
.gi-cinematic .story-line {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item.gi-cinematic:hover .story-line {
  opacity: 1;
  transform: translateY(0);
}
.gallery-item.gi-cinematic:hover .story-line:nth-child(1) { transition-delay: 0.5s; }
.gallery-item.gi-cinematic:hover .story-line:nth-child(2) { transition-delay: 0.7s; }
.gallery-item.gi-cinematic:hover .story-line:nth-child(3) { transition-delay: 0.9s; }

.gi-1 .gi-bg { background-image: linear-gradient(135deg, #d4a574, #8b6f5c, #c9956b); }
.gi-2 .gi-bg { background-image: linear-gradient(135deg, #b8967a, #7a3b4e, #dbb08a); }
.gi-3 .gi-bg { background-image: linear-gradient(135deg, #9b7082, #c9956b, #e8c4a8); }
.gi-4 .gi-bg { background-image: linear-gradient(135deg, #8a9a7e, #c9956b, #f0ebe4); }
.gi-5 .gi-bg { background-image: linear-gradient(135deg, #7a3b4e, #1e1a16, #c9956b); }
.gi-6 .gi-bg { background-image: linear-gradient(135deg, #dbb08a, #9b7082, #c9956b); }
.gi-7 .gi-bg { background-image: linear-gradient(135deg, #c9956b, #1e1a16, #7a3b4e); }
.gi-8 .gi-bg { background-image: linear-gradient(135deg, #e8c4a8, #8a9a7e, #c9956b); }

/* ═══════════════════════════════════════════════════════════
   ETHEREAL COVERFLOW CAROUSEL
   ═══════════════════════════════════════════════════════════ */

/* Container — open, frameless: cards float in page space */
.ethereal-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 580px;
  perspective: 1200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  contain: layout paint;
}
/* Clip coverflow depth to the carousel box so offscreen cards cannot widen the page. */

/* Track — override grid to positioning container */
.ethereal-carousel .ec-track {
  display: block !important;
  grid-template-columns: unset !important;
  gap: unset !important;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Cards — absolute positioning, JS controls transforms */
.ethereal-carousel .gallery-item,
.ethereal-carousel .vw-card {
  position: absolute !important;
  top: 50%;
  left: 50%;
  width: 380px;
  height: auto;
  aspect-ratio: 4/5;
  margin: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  touch-action: pan-y;
  /* Optimization: Tell browser to handle vertical scroll normally but let JS handle horizontal */
  touch-action: pan-y;
}

.ethereal-carousel.is-native-scroll {
  perspective: none;
  overflow: hidden;
}
.ethereal-carousel.is-native-scroll .ec-track {
  display: flex !important;
  align-items: center;
  gap: 1rem !important;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  transform: none !important;
}
#videoCarousel.is-native-scroll .ec-track {
  scroll-snap-type: x proximity;
}
.ethereal-carousel.is-native-scroll .ec-track::-webkit-scrollbar { display: none; }
.ethereal-carousel.is-native-scroll .gallery-item,
.ethereal-carousel.is-native-scroll .vw-card {
  position: relative !important;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  margin: 0;
  transform: none !important;
  pointer-events: auto !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  will-change: auto;
  touch-action: auto;
}

#videoCarousel.is-native-scroll .vw-card,
#videoCarousel.is-native-scroll .vw-card[data-ec-offset="1"],
#videoCarousel.is-native-scroll .vw-card[data-ec-offset="-1"] {
  opacity: 1;
  filter: none;
  border: 1px solid rgba(250,246,241,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
  contain: layout paint;
}

#videoCarousel.is-native-scroll .vw-card[data-ec-offset="0"] {
  border-color: rgba(201,149,107,0.22);
  box-shadow: 0 18px 36px rgba(0,0,0,0.38);
}

#videoCarousel.is-native-scroll .vw-poster,
#videoCarousel.is-native-scroll .vw-overlay,
#videoCarousel.is-native-scroll .vw-overlay > *,
#videoCarousel.is-native-scroll .vw-play-wrap,
#videoCarousel.is-native-scroll .vw-duration {
  transition-duration: 0.2s;
}

#videoCarousel.is-native-scroll .vw-poster {
  filter: brightness(0.84);
}

#videoCarousel.is-native-scroll .vw-card[data-ec-offset="0"] .vw-poster {
  filter: grayscale(0%) brightness(0.86);
}

#videoCarousel.is-native-scroll .vw-card[data-ec-offset="1"] .vw-poster,
#videoCarousel.is-native-scroll .vw-card[data-ec-offset="-1"] .vw-poster {
  filter: grayscale(100%) brightness(0.72) contrast(1.05);
}

#videoCarousel.is-native-scroll .vw-play-icon,
#videoCarousel.is-native-scroll .vw-duration,
#videoCarousel.is-native-scroll .ec-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fast transition for category spin animation */
.ethereal-carousel.fast-transition .gallery-item,
.ethereal-carousel.fast-transition .vw-card {
  transition-duration: 0.1s;
}

/* Carousel cards: JS inline transforms override all stylesheet hover rules naturally.
   Only suppress box-shadow lift since glow is handled by data-ec-offset selectors. */
.ethereal-carousel .gallery-item:hover,
.ethereal-carousel .vw-card:hover {
  box-shadow: none;
}

/* Video cards — cinematic 16:9 wide ratio */
.ethereal-carousel .vw-card {
  aspect-ratio: 16/9;
  width: 640px;
}
.ethereal-carousel .vw-card.wide {
  grid-column: unset;
  aspect-ratio: 16/9;
  width: 640px; /* normalise wide cards to match standard for FocusRail layout */
}

/* Video carousel — exact FocusRail perspective & height */
#videoCarousel {
  perspective: 1200px;
  height: 440px;
}

/* Spring-like easing matching framer-motion BASE_SPRING (stiffness:300, damping:30) */
#videoCarousel .vw-card {
  transition:
    transform  0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
    opacity    0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter     0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ethereal-carousel .vw-card[data-ec-offset="0"],
.ethereal-carousel .vw-card[data-ec-offset="1"],
.ethereal-carousel .vw-card[data-ec-offset="-1"],
#videoCarousel .vw-card[data-ec-offset="2"],
#videoCarousel .vw-card[data-ec-offset="-2"] {
  will-change: transform, opacity, filter;
  contain: layout paint;
  backface-visibility: hidden;
}

/* ── Active card (center, offset 0) — hero floating card ── */
.ethereal-carousel .gallery-item[data-ec-offset="0"],
.ethereal-carousel .vw-card[data-ec-offset="0"] {
  z-index: 5;
  opacity: 1;
  filter: blur(0) brightness(1);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.55),
    0 0 100px rgba(201,149,107,0.08);
  border: 1px solid rgba(201,149,107,0.15);
}
.ethereal-carousel .gallery-item[data-ec-offset="0"]:hover,
.ethereal-carousel .vw-card[data-ec-offset="0"]:hover {
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 0 120px rgba(201,149,107,0.1) !important;
}

#videoCarousel .vw-card[data-ec-offset="0"] .vw-poster {
  filter: grayscale(0%) brightness(0.86);
}

/* ── Offset ±1 (side cards) — portfolio carousel only ── */
#portfolioCarousel .gallery-item[data-ec-offset="1"],
#portfolioCarousel .gallery-item[data-ec-offset="-1"] {
  z-index: 3;
  opacity: 0.72;
  filter: blur(0.7px) brightness(0.82) saturate(0.86);
  cursor: pointer;
  border: 1px solid rgba(250,246,241,0.08);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.42),
    0 0 48px rgba(201,149,107,0.05);
}

#portfolioCarousel .gallery-item[data-ec-offset="1"] .gi-bg,
#portfolioCarousel .gallery-item[data-ec-offset="-1"] .gi-bg {
  filter: grayscale(100%) brightness(0.88) contrast(1.06);
}
/* Video carousel side cards — opacity/filter/z-index fully controlled by JS */
#videoCarousel .vw-card[data-ec-offset="1"],
#videoCarousel .vw-card[data-ec-offset="-1"],
#videoCarousel .vw-card[data-ec-offset="2"],
#videoCarousel .vw-card[data-ec-offset="-2"] {
  cursor: pointer;
  border: 1px solid rgba(250,246,241,0.05);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
  pointer-events: auto;
  visibility: visible;
}

#videoCarousel .vw-card[data-ec-offset="1"] .vw-poster,
#videoCarousel .vw-card[data-ec-offset="-1"] .vw-poster,
#videoCarousel .vw-card[data-ec-offset="2"] .vw-poster,
#videoCarousel .vw-card[data-ec-offset="-2"] .vw-poster {
  filter: grayscale(100%) brightness(0.72) contrast(1.05);
}

/* ── Hidden (beyond ±1 for gallery, beyond ±2 for video) ── */
.ethereal-carousel .gallery-item[data-ec-offset="hidden"],
.ethereal-carousel .vw-card[data-ec-offset="hidden"] {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
}

/* ── Glassmorphic Navigation Arrows ── */
.ec-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(9,8,11,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201,149,107,0.22);
  color: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}
.ec-nav:hover {
  background: rgba(201,149,107,0.15);
  border-color: var(--rose);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.ec-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.ec-prev { left: 2rem; }
.ec-next { right: 2rem; }
.ec-nav.ec-disabled {
  opacity: 0.12;
  pointer-events: none;
}

/* ── Counter Pill ── */
.ec-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(250,246,241,0.35);
  background: rgba(9,8,11,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(250,246,241,0.06);
  padding: 0.35rem 1.1rem;
  border-radius: 20px;
}
.ec-counter-current {
  color: var(--rose);
  font-weight: 400;
}
.ec-counter-sep {
  margin: 0 0.25em;
  opacity: 0.3;
}

/* ── Center card: black & white at rest, turns to color on tap ──
   Reveal is driven by a JS-added class (.gi-color-reveal, set in
   openSwGallery/closeSwGallery in Script.js) rather than :hover. A pure
   :hover trigger ends the instant a finger lifts, so on tap/touch the
   card reverted back to black & white right as the lightbox opened —
   visible through the lightbox's translucent fade-in (0.8s, see
   .sw-gallery-enter) as a black-and-white "switch" flash. The JS class
   persists through the whole open/close cycle instead. */
.ethereal-carousel .gallery-item[data-ec-offset="0"] .gi-bg {
  filter: grayscale(100%) brightness(0.9) contrast(1.05);
}
/* ── Kill scroll parallax on ALL carousel cards — image stays still ── */
.ethereal-carousel .gallery-item .gi-bg {
  transform: none !important;
}
/* ── Tap reveal (persists — see comment above) ── */
.ethereal-carousel .gallery-item[data-ec-offset="0"].gi-color-reveal .gi-bg {
  filter: grayscale(0%) brightness(1) contrast(1);
}
/* ── Desktop-only preview: subtle zoom + color on hover before tapping ── */
.ethereal-carousel .gallery-item[data-ec-offset="0"]:hover .gi-bg {
  transform: scale(1.06) !important;
  filter: grayscale(0%) brightness(1) contrast(1);
}

@media (min-width: 769px) {
  #portfolio .portfolio-tools {
    margin-bottom: clamp(1.6rem, 2.4vw, 2.25rem);
  }

  #portfolioCarousel {
    height: clamp(500px, 44vw, 540px);
  }

  #portfolioCarousel .gallery-item {
    top: 46%;
  }

  #portfolioCarousel .ec-nav {
    top: 46%;
  }

  #portfolioCarousel .ec-counter {
    bottom: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   NYC PORTRAITS
   ═══════════════════════════════════════════════════════════ */
#nyc { overflow: hidden; padding-bottom: 11rem; }
.nyc-skyline { position: absolute; bottom: 0; left: 0; right: 0; height: 250px; pointer-events: none; opacity: 0; transition: opacity 1.5s var(--ease-smooth); }
#nyc.nyc-visible .nyc-skyline { opacity: 1; }
.nyc-content { position: relative; z-index: 2; }
.nyc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.nyc-list { display: flex; flex-direction: column; }
.nyc-loc { padding: 1rem 0; border-bottom: 1px solid rgba(201,149,107,0.05); cursor: pointer; transition: all 0.4s; display: flex; align-items: center; justify-content: space-between; }
.nyc-loc:hover { padding-left: 1rem; }
.nyc-loc-left { display: flex; align-items: center; gap: 1.2rem; }
.nyc-loc .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--rose); opacity: 0.15; min-width: 36px; transition: opacity 0.4s; }
.nyc-loc:hover .num { opacity: 0.5; }
.nyc-loc h4 { font-family: var(--font-display); font-weight: 300; font-size: 1.2rem; color: var(--ivory); letter-spacing: 0.03em; transition: color 0.3s; }
.nyc-loc:hover h4 { color: var(--rose); }
.nyc-loc .nyc-sub-text { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,246,241,0.15); margin-top: 0.1rem; }
.nyc-loc .nyc-arrow { opacity: 0; transform: translateX(-8px); transition: all 0.4s var(--ease); }
.nyc-loc:hover .nyc-arrow { opacity: 0.4; transform: translateX(0); }
.nyc-preview { position: relative; height: 380px; align-self: center; border-radius: 6px; overflow: hidden; background: rgba(30,26,22,0.4); border: 1px solid rgba(201,149,107,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

.nyc-preview-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
}

.nyc-preview-img.active {
    opacity: 1;
    visibility: visible;
}
/* Background image with subtle zoom */
.preview-bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center center;
    transform: scale(1.08); 
    transition: transform 1.5s var(--ease);
}

.nyc-preview-img.active .preview-bg {
    transform: scale(1);
}

/* Bottom text overlay */
.nyc-preview-info { 
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 3rem 2.5rem;
    z-index: 5;
    background: linear-gradient(to top, rgba(9, 8, 11, 0.95) 0%, transparent 100%);
    pointer-events: none; /* Allows click to pass through to the button */
}

/* Re-enable clicks for the button */
.nyc-maps-link {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem;
    color: var(--ivory);
    border: 1px solid rgba(250, 246, 241, 0.2);
    padding: 0.5rem 1rem;
    transition: all 0.3s;
}

.nyc-maps-link:hover {
    border-color: var(--rose);
    background: rgba(201, 149, 107, 0.1);
}
.nyc-maps-link svg { width: 10px; height: 10px; }
.nyc-cp .preview-bg {
    position: absolute;
    inset: 0;
    background-size: contain; 
    background-position: center; /* Keeps the subject centered */
    background-repeat: no-repeat;
    /* Reduced scale from 1.15 to 1.05 for a subtler cinematic movement */
    transform: scale(1.05); 
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nyc-preview-img.active .preview-bg {
    transform: scale(1); /* Smoothly settles into the frame */
}
.nyc-dumbo .preview-bg { background: linear-gradient(145deg, #3a3540, #7a3b4e, #c9956b, #e8c4a8); }
.nyc-bb .preview-bg { background: linear-gradient(145deg, #2a2832, #6b7280, #c9956b, #faf6f1); }
.nyc-subway .preview-bg { background: linear-gradient(145deg, #1e1a16, #3a3530, #c9956b, #7a3b4e); }
.nyc-lib .preview-bg { background: linear-gradient(145deg, #d4c5b0, #c9956b, #7a3b4e, #1e1a16); }
.nyc-st .preview-bg { background: linear-gradient(145deg, #09080b, #2a2832, #c9956b, #e8c4a8); }

/* ═══════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════ */
.about-grid { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 4rem; align-items: start; }
.about-sticky { grid-column: 1; position: sticky; top: 6rem; display: flex; flex-direction: column; align-items: center; }
.about-grid > .about-text { grid-column: 2; }
.about-text { max-width: 42rem; }
.about-image {
  width: 100%;
  aspect-ratio: 3/4; border-radius: 6px; max-height: 650px;
  position: relative; overflow: hidden;
  background-color: #1e1a16;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.about-image::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(250,246,241,0.06); border-radius: 3px; }
.about-image-inner {
  position: absolute; inset: 0;
  /* cover-equivalent for this photo's 0.8 aspect ratio inside the 3:4 (0.75) box (height-constrained); re-check if the photo changes */
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  filter: sepia(20%) contrast(1.1);
  transition: background-image 0.8s var(--ease-smooth);
  animation: aboutKenBurns 9s ease-in-out infinite alternate;
}
@keyframes aboutKenBurns {
  from { background-size: auto 100%; background-position: center; }
  to   { background-size: auto 108%; background-position: center top; }
}
.about-panel { opacity: 0; transform: translateX(-24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.about-panel.visible { opacity: 1; transform: translateX(0); }
.about-panel--quote { border-left: 2px solid var(--rose); padding-left: 1.2rem; }
.about-panel--symbolism { border-left: 2px solid var(--saffron); padding-left: 1.2rem; }
.about-panel--stats { border-left: 2px solid var(--rose); padding-left: 1.2rem; }
@media (prefers-reduced-motion: reduce) {
  .about-panel { transition: none; opacity: 1; transform: none; }
  .about-image-inner { animation: none; }
}
.about-text .section-title {
  margin-top: 0;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.about-lead {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(30,26,22,0.82);
  max-width: 40rem;
  margin-bottom: 1.2rem;
}
.about-text p { font-size: 0.85rem; line-height: 1.95; color: rgba(30,26,22,0.78); margin-bottom: 1rem; }
.about-quote {
  font-style: italic;
  color: rgba(30,26,22,0.68) !important;
  font-size: 0.82rem;
  line-height: 1.9;
  margin-top: 1.5rem !important;
  max-width: 38rem;
}
.about-sanskrit { font-size: 1.1rem; margin-top: 2rem; letter-spacing: 0.04em; line-height: 2.2; }
.about-sanskrit .telugu { font-family: 'p22-mackinac-pro', 'Noto Sans Telugu', sans-serif; color: var(--saffron); font-weight: 400; font-size: 1.3em; }
.about-sanskrit .devnag { font-family: 'p22-mackinac-pro', 'Noto Sans Devanagari', sans-serif; color: var(--wine); font-weight: 400; font-size: 1.15em; }
.about-sanskrit .english { font-family: var(--font-display); font-style: italic; color: var(--rose); font-weight: 400; }
.about-symbolism {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(30,26,22,0.05);
}
.symbol-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--rose);
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.symbol-dots { display: flex; flex-direction: column; gap: 4px; }
.symbol-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--rose); opacity: 0.6; }
.symbol-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(30,26,22,0.62);
  padding-left: calc(4px + 0.8rem); /* Align with text, not dots */
}
.about-stats { display: flex; gap: 3rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(30,26,22,0.05); }
.about-stats .stat h4 { font-family: var(--font-display); font-weight: 300; font-size: 2rem; color: var(--rose); line-height: 1; }
.about-stats .stat p { font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(30,26,22,0.38); margin-top: 0.3rem; }
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  margin-top: 1.75rem;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.about-cta-primary {
  padding: 0.75rem 1.4rem;
  background: var(--rose);
  color: var(--ivory);
  border: 1px solid var(--rose);
  border-radius: 2px;
}
.about-cta-primary:hover {
  background: var(--rose-light);
  border-color: var(--rose-light);
  color: var(--noir);
  transform: translateY(-1px);
}
.about-cta-secondary {
  color: rgba(30,26,22,0.7);
  border-bottom: 1px solid rgba(201,149,107,0.35);
  padding: 0.75rem 0.1rem;
}
.about-cta-secondary:hover {
  color: var(--rose);
  border-bottom-color: var(--rose);
  transform: translateY(-1px);
}
.about-cta:focus-visible {
  outline: 2px solid rgba(201,149,107,0.45);
  outline-offset: 4px;
 }


/* ─── Name reveal wrapper ─── */
.about-name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  opacity: 0;
  animation: nameReveal 1s ease forwards;
  animation-delay: 0.6s;
  animation-play-state: paused;
}
.about-name-wrapper.about-name--visible {
  animation-play-state: running;
}
.about-name-wrapper.about-name--visible .about-name-line {
  animation-play-state: running;
}
.about-name-wrapper.about-name--visible .about-name::after {
  animation-play-state: running;
}

/* ─── The name itself ─── */
.about-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.18em;
  color: #c9956b;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: default;
  white-space: nowrap;
}

/* ─── Shimmer light streak ─── */
.about-name::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 220, 160, 0.08) 35%,
    rgba(255, 235, 190, 0.55) 50%,
    rgba(255, 220, 160, 0.08) 65%,
    transparent 80%
  );
  transform: skewX(-15deg);
  animation: shimmerSweep 3.2s ease-in-out infinite;
  animation-delay: 1.4s;
  animation-play-state: paused;
  pointer-events: none;
}

/* ─── Hover: shimmer speeds up ─── */
.about-name:hover::after {
  animation-duration: 1s;
}

/* ─── Thin decorative line below name ─── */
.about-name-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9956b, transparent);
  animation: lineExpand 1s ease forwards;
  animation-delay: 1s;
  animation-play-state: paused;
}

/* ─── Keyframes ─── */
@keyframes nameReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmerSweep {
  0%   { left: -80%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { left: 130%; opacity: 1; }
  61%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@keyframes lineExpand {
  from { width: 0; }
  to   { width: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES OVERVIEW GRID
   ═══════════════════════════════════════════════════════════ */
.sov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(201,149,107,0.06);
  border: 1px solid rgba(201,149,107,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.sov-card {
  background: rgba(14,12,16,0.85);
  padding: 1.8rem 1.6rem;
  position: relative;
  transition: background 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sov-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 2rem; right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,149,107,0.12), transparent);
}
.sov-card:hover { background: rgba(30,26,22,0.9); }
.sov-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: rgba(201,149,107,0.08);
  line-height: 1;
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  letter-spacing: 0.04em;
  transition: color 0.4s;
}
.sov-card:hover .sov-num { color: rgba(201,149,107,0.14); }
.sov-icon {
  color: var(--rose);
  opacity: 0.7;
  margin-bottom: 0.4rem;
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.sov-card:hover .sov-icon { opacity: 1; transform: translateY(-2px); }
.sov-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.12rem;
  color: var(--ivory);
  letter-spacing: 0.04em;
  /* Pushed down to clear the stamp */
  margin-top: 4rem;
}
.sov-desc {
  font-size: 0.72rem;
  color: rgba(250,246,241,0.45);
  line-height: 1.7;
  flex: 1;
}
.sov-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,149,107,0.5);
  margin-top: 0.4rem;
  transition: color 0.3s, gap 0.3s var(--ease);
}
.sov-link:hover { color: var(--rose); gap: 0.9rem; }
/* ── Cinematic Stamps ── */
.sov-stamp {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  width: 72px;
  height: 72px;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.sov-stamp svg {
  width: 100%;
  height: 100%;
}

/* Weddings — film frame, warm rose */
.sov-stamp--wedding { color: var(--saffron); transform: rotate(-3deg) scale(1); }

/* Couple — infinity film loop, soft blush */
.sov-stamp--couple { color: var(--blush); transform: rotate(2deg) scale(1.02); }

/* Maternity — crescent moon & star, gentle sage */
.sov-stamp--maternity { color: var(--blush); transform: rotate(-4deg) scale(1.04); }

/* Celebrations — clapperboard, warm saffron */
.sov-stamp--celebration { color: var(--saffron); transform: rotate(-2deg) scale(1); }

/* Commercial — aperture iris, cool mauve */
.sov-stamp--commercial { color: var(--mauve); transform: rotate(15deg) scale(1); }

/* Conceptual — golden spiral, deep wine */
.sov-stamp--conceptual { color: var(--mauve); transform: rotate(0deg) scale(1); }
.sov-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,246,241,0.35);
  border-bottom: 1px solid rgba(201,149,107,0.15);
  padding-bottom: 0.3rem;
  transition: color 0.3s, border-color 0.3s;
}
.sov-cta:hover { color: var(--rose); border-color: var(--rose); }
@media (max-width: 900px) {
  .sov-grid { grid-template-columns: repeat(2, 1fr); }
}
/* sov-grid stays at 2 columns on mobile (overridden in mobile block below) */

/* ═══════════════════════════════════════════════════════════
   CINEMATIC SERVICES — SCROLL STACK
   ═══════════════════════════════════════════════════════════ */
#services {
  padding: 0 !important;
  background: transparent !important;
  position: relative;
}
/* ─── FIX 3: Maternity removed → 5 panels → height reduced by 1 viewport ── */
/* Now 6 panels (intro + 5 services) */
.cs-wrapper {
  height: calc(7 * 100vh);
  position: relative;
}
.cs-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.cs-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateY(100%);
  /* z-index set by JS: active=2, incoming=1, past/waiting=0 */
  z-index: 0;
}
.cs-panel:first-child {
  transform: translateY(0%);
  z-index: 2;
}
.cs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  will-change: transform;
  z-index: 0;
}
/* Video fills the bg layer exactly like a background-image */
.cs-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.cs-video.cs-vid-ready {
  opacity: 1;
}
.cs-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,8,11,0.92) 0%, rgba(9,8,11,0.45) 35%, rgba(9,8,11,0.08) 60%, transparent 100%);
  /* Vignette above bg, below text */
  z-index: 1;
  pointer-events: none;
}
.cs-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(9,8,11,0.15) 0%, transparent 30%, transparent 70%, rgba(9,8,11,0.1) 100%);
  pointer-events: none;
}
.cs-counter {
  position: absolute;
  top: 2.8rem;
  right: 3rem;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  pointer-events: none;
}
.cs-counter-current {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  color: rgba(250,246,241,0.18);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-counter-divider {
  width: 28px;
  height: 1px;
  background: rgba(201,149,107,0.35);
  margin-left: auto;
}
.cs-counter-total {
  font-family: var(--font-body);
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  color: rgba(250,246,241,0.2);
  text-transform: uppercase;
}
.cs-dots {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}
.cs-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(250,246,241,0.15);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.cs-dot.active {
  background: var(--rose);
  height: 20px;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(201,149,107,0.4);
}
/* ── Shared text overlay — lives ABOVE all panels in the sticky zone ── */
.cs-text-overlay {
  position: absolute;
  top: clamp(8rem, 16vh, 10.5rem);
  left: 3.5rem;
  right: 8rem;
  z-index: 100;
  max-width: 540px;
  min-height: min(26rem, 52vh);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  perspective: 1000px;
}
.cs-text-slide {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  filter: blur(0);
  transform: translateY(22px) rotateX(14deg) translateZ(-90px);
  transform-style: preserve-3d;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.cs-text-slide.cs-slide-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
  animation: csSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             csFloat 4.5s ease-in-out 0.8s infinite;
}
.cs-text-slide.cs-slide-exit {
  opacity: 0;
  visibility: visible;
  z-index: 1;
  pointer-events: none;
  animation: csSlideOut 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes csSlideIn {
  from { opacity: 0; transform: translateY(22px) rotateX(14deg) translateZ(-90px); }
  to   { opacity: 1; transform: translateY(0)    rotateX(0deg)  translateZ(0);     }
}
@keyframes csFloat {
  0%,100% { transform: translateY(0)    rotateX(0deg)   translateZ(0);    }
  50%     { transform: translateY(-9px) rotateX(1.8deg) translateZ(20px); }
}
@keyframes csSlideOut {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) rotateX(0deg) translateZ(0);
  }
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-20px) rotateX(-11deg) translateZ(-65px);
  }
}
.cs-text-slide[data-slide="0"].cs-slide-exit {
  animation: csIntroSlideOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes csIntroSlideOut {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) rotateX(0deg) translateZ(0);
  }
  to {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-26px) rotateX(-9deg) translateZ(-80px);
  }
}
/* cs-text-slide initial state handled above */
.cs-label {
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0.9;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.cs-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rose);
  opacity: 0.5;
  flex-shrink: 0;
}
.cs-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  color: var(--ivory);
  letter-spacing: 0.05em;
  line-height: 1.18;
  margin-bottom: 1.2rem;
  /* Let text wrap naturally — no forced breaks needed */
  word-break: normal;
  overflow-wrap: normal;
}
.cs-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  color: rgba(250,246,241,0.4);
  line-height: 1.9;
  margin-bottom: 1.8rem;
  max-width: 400px;
}
.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(250,246,241,0.6);
  font-weight: 300;
  border-bottom: 1px solid rgba(250,246,241,0.12);
  padding-bottom: 0.35rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-link:hover { color: var(--rose); border-bottom-color: var(--rose); gap: 1.2rem; }
.cs-link svg { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.7; }
.cs-link:hover svg { transform: translateX(5px); opacity: 1; }

/* Styles for the new intro text slide */
.cs-text-slide[data-slide="0"] {
  text-align: center;
}
.cs-text-slide[data-slide="0"] .section-tag {
  justify-content: center;
}
.cs-text-slide[data-slide="0"] .cs-title {
  font-family: var(--font-display);
  font-weight: 300;
  /* Cinematic title styling */
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-text-slide[data-slide="0"] .cs-desc {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(224,164,88,0.5);
  max-width: none;
  margin: 0 auto;
}

/* Rule from old intro, now used in first text slide */
.cs-intro-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto;
  width: 200px;
}
.cs-intro-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,149,107,0.3), transparent); }
.cs-intro-rule i { width: 5px; height: 5px; border: 1px solid rgba(201,149,107,0.5); transform: rotate(45deg); display: block; flex-shrink: 0; }

.cs-sticky-zone {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Tell the browser this is a self-contained compositing layer */
  contain: layout style;
  /* Force GPU layer for the whole sticky zone — all children compose on GPU */
  transform: translateZ(0);
  /* Add perspective to enable 3D transforms on child panels */
  perspective: 1500px;
}
.cs-scroll-hint {
  position: absolute;
  bottom: 3.5rem;
  right: 50%;
  transform: translateX(50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.5s;
}
.cs-scroll-hint.visible { opacity: 1; }
.cs-scroll-hint span { font-size: 0.44rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(250,246,241,0.2); }
.cs-scroll-line { width: 1px; height: 28px; position: relative; overflow: hidden; background: rgba(201,149,107,0.08); }
.cs-scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: var(--rose); animation: scrollPulse 2.2s ease-in-out infinite; }
.cs-bg-intro { background: linear-gradient(170deg, #0e0c10, #1e1a16 50%, #0e0c10); }
.cs-bg-1 { background: linear-gradient(145deg, #2a1f1a, #7a3b4e, #c9956b, #dbb08a); }
.cs-bg-2 { background: linear-gradient(145deg, #0e0d10, #1e1a16, #9b7082, #dbb08a); }
.cs-bg-3 { background: linear-gradient(145deg, #1a1520, #7a4060, #c9956b, #f0ebe4); }
.cs-bg-4 { background: linear-gradient(145deg, #121a10, #4a6741, #8a9a7e, #c9956b); }
.cs-bg-5 { background: linear-gradient(145deg, #09080b, #1e1a16, #4a3a30, #c9956b); }
.cs-bg-6 { background: linear-gradient(145deg, #0a0810, #1c1628, #3a2858, #c9956b); }
.cs-bg-7 { background: linear-gradient(145deg, #3a3540, #1e1a16, #7a3b4e, #c9956b); }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.testimonial-stars svg { width: 12px; height: 12px; fill: var(--rose); opacity: 0.5; }
.testimonial-author { display: flex; align-items: center; gap: 0.8rem; }
.testimonial-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--wine)); flex-shrink: 0; }
.testimonial-author p { font-size: 0.6rem; color: rgba(250,246,241,0.2); letter-spacing: 0.06em; }

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */
#contact .section-tag {
  font-size: 0.65rem; /* Increased from default 0.55rem for emphasis */
}

#contact {
  background:
    linear-gradient(145deg, rgba(250,246,241,0.96) 0%, rgba(242,230,217,0.92) 50%, rgba(232,196,168,0.38) 100%);
  color: var(--umber);
  padding-top: clamp(4.5rem, 7vw, 6rem);
  padding-bottom: clamp(4.5rem, 7vw, 6rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(21rem, 1.14fr);
  gap: clamp(1.75rem, 4.8vw, 4.25rem);
  align-items: start;
}
.contact-info {
  position: relative;
  padding-top: 0.25rem;
}
.contact-info h3 {
  max-width: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.55rem, 4.05vw, 4.05rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: 1rem;
  color: #231c17;
}
.contact-info > p {
  max-width: 32rem;
  font-size: clamp(0.94rem, 1.35vw, 1.06rem);
  color: rgba(30,26,22,0.68);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.contact-note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}
.contact-note-list span {
  border: 1px solid rgba(30,26,22,0.12);
  border-radius: 999px;
  padding: 0.42rem 0.64rem;
  font-size: 0.51rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30,26,22,0.58);
  background: rgba(250,246,241,0.48);
}
.contact-details { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.56rem 0;
  border-top: 1px solid rgba(30,26,22,0.08);
}
.contact-detail:last-child { border-bottom: 1px solid rgba(30,26,22,0.08); }
.cd-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(201,149,107,0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(250,246,241,0.58);
}
.cd-icon svg { width: 14px; height: 14px; }
.contact-detail h5 { font-weight: 450; font-size: 0.82rem; color: rgba(30,26,22,0.82); }
.contact-detail p { font-size: 0.7rem; color: rgba(30,26,22,0.42); margin: 0; }
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: clamp(5.5rem, 7.5vw, 7.25rem);
  padding: clamp(1.1rem, 2.3vw, 1.55rem);
  border: 1px solid rgba(30,26,22,0.1);
  border-radius: 8px;
  background: rgba(250,246,241,0.76);
  box-shadow: 0 24px 70px rgba(30,26,22,0.08);
}
.contact-form::before {
  content: '';
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(201,149,107,0.12);
  border-radius: 5px;
  pointer-events: none;
}
.contact-form-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1.1rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(30,26,22,0.08);
}
.contact-form-head span {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  white-space: nowrap;
}
.contact-form-head p {
  max-width: 25rem;
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.55;
  color: rgba(30,26,22,0.48);
}
.form-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-group { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.34rem; }
.date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.form-group label { font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(30,26,22,0.48); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 0.84rem;
  padding: 0.78rem 0.88rem;
  border: 1px solid rgba(30,26,22,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.52);
  color: var(--umber);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: rgba(201,149,107,0.72);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 0 0 4px rgba(201,149,107,0.1);
}
.form-group textarea { resize: vertical; min-height: 108px; line-height: 1.55; }
/* Style the placeholder text to match the theme */
.form-group input::placeholder, .form-group textarea::placeholder {
  color: rgba(30, 26, 22, 0.34); opacity: 1;
}
.form-submit {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  /* MOBILE FIX: was 2.65rem (~42px) — raised to 2.75rem (44px) touch-target minimum */
  min-height: 2.75rem;
  margin-top: 0.05rem;
  padding: 0.76rem 1.15rem;
  border-radius: 4px;
  background: var(--umber);
  color: var(--ivory);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.35s, transform 0.35s, box-shadow 0.35s;
  align-self: flex-start;
}
.form-submit svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--ease);
}
.form-submit:hover { background: var(--rose); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(201,149,107,0.18); }
.form-submit:hover svg { transform: translateX(3px); }
.form-submit:disabled { cursor: wait; opacity: 0.72; transform: none; box-shadow: none; }

/* ─── Contact Form Status ─── */
#formStatus {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 3px;
  font-size: 0.8rem;
  display: none; /* Hidden by default */
  text-align: center;
  transition: all 0.3s;
}
#formStatus.success {
  display: block;
  background: rgba(138, 154, 126, 0.15); /* --sage, but lighter */
  color: var(--sage);
  border: 1px solid rgba(138, 154, 126, 0.2);
}
#formStatus.error {
  display: block;
  background: rgba(122, 59, 78, 0.1); /* --wine, but lighter */
  color: var(--wine);
  border: 1px solid rgba(122, 59, 78, 0.2);
}

/* ═══════ CUSTOM FLATPCIKR STYLING (CINEMATIC CALENDAR) ═══════ */
.flatpickr-calendar {
  background: var(--umber) !important;
  border: 1px solid rgba(201,149,107,0.2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  font-family: var(--font-body) !important;
  border-radius: 4px !important;
  /* Ensure it's above other elements but below modals */
  z-index: 1000 !important;
}

/* Month/Year header */
.flatpickr-months .flatpickr-month {
  background: var(--umber) !important;
  color: var(--ivory) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--umber) !important;
  border: 1px solid rgba(201,149,107,0.1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month {
  background: var(--umber) !important;
  color: var(--ivory) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month:hover {
  background: rgba(201,149,107,0.1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month.selected {
  background: rgba(201,149,107,0.2) !important;
  color: var(--rose) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-month.selected:hover {
  background: rgba(201,149,107,0.3) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-color: var(--rose) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
  color: var(--ivory) !important;
}

/* Weekdays */
.flatpickr-weekdays {
  background: var(--umber) !important;
}
.flatpickr-weekday {
  color: rgba(250,246,241,0.4) !important;
  font-weight: 300 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Days */
.flatpickr-day {
  color: var(--ivory) !important;
  font-weight: 300 !important;
  border-radius: 2px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.flatpickr-day.today {
  border-color: var(--rose) !important;
  background: rgba(201,149,107,0.1) !important;
  color: var(--rose) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--rose) !important;
  border-color: var(--rose) !important;
  color: var(--noir) !important; /* Text color on selected date */
}
.flatpickr-day.inRange {
  background: rgba(201,149,107,0.2) !important;
  border-color: rgba(201,149,107,0.2) !important;
  color: var(--ivory) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(250,246,241,0.15) !important;
}
.flatpickr-day:hover {
  background: rgba(201,149,107,0.15) !important;
  color: var(--ivory) !important;
}

/* Navigation arrows */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--rose) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--rose-light) !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer { background: var(--noir); color: var(--ivory); padding: 4.5rem 3.5rem 2rem; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,149,107,0.1), transparent); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 3.5rem; }
.footer-brand p {
  font-family: 'p22-mackinac-pro', var(--font-display);
  font-size: 0.9rem;
  color: rgba(250, 246, 241, 0.45);
  line-height: 1.8;
  max-width: 280px;
}
.footer-logo-container {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.footer-logo-container svg {
  height: 30px;
  width: auto;
}
.footer-logo-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  color: var(--ivory);
  margin-bottom: 0;
  position: relative;
  display: inline-block;
}
.footer-logo-dots {
  position: absolute;
  top: 0.32em;
  left: 1.0em;
  display: flex;
  gap: 0.16em;
}
.footer-logo-dots span {
  width: 0.12em; height: 0.12em;
  border-radius: 50%;
  background: var(--rose); opacity: 0.85;
}
.footer-col h5 { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rose); margin-bottom: 1rem; font-weight: 400; }
.footer-col a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(250,246,241,0.3); margin-bottom: 0.5rem; transition: color 0.3s; }
.footer-col a svg { flex-shrink: 0; opacity: 0.5; transition: opacity 0.3s; }
.footer-col a:hover svg { opacity: 1; }
.footer-col a:hover { color: var(--rose); }
.footer-bottom { border-top: 1px solid rgba(250,246,241,0.025); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 0.7rem; color: rgba(250,246,241,0.12); letter-spacing: 0.06em; }
.footer-social { display: flex; gap: 0.8rem; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(250,246,241,0.04); display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.footer-social a:hover { border-color: var(--rose); background: rgba(201,149,107,0.06); }
.footer-social a svg { width: 13px; height: 13px; fill: rgba(250,246,241,0.3); }
.footer-social a:hover svg { fill: var(--rose); }

/* ═══════════════════════════════════════════════════════════
   CINEMATIC GALLERY VIEWER
   ═══════════════════════════════════════════════════════════ */
.sw-gallery { position: fixed; inset: 0; z-index: 10001; display: none; background: var(--noir); overflow: hidden; }
.sw-gallery.sw-open { display: flex; flex-direction: column; }
.sw-gallery-enter { animation: swGalleryIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sw-gallery-exit  { animation: swGalleryOut 0.55s cubic-bezier(0.87, 0, 0.13, 1) both; }
@keyframes swGalleryIn  { from { opacity: 0; transform: scale(0.97) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes swGalleryOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
.sw-gallery-bar { position: absolute; top: 0; left: 0; right: 0; padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; z-index: 10; background: linear-gradient(to bottom, rgba(9,8,11,0.82), transparent); }
.sw-gallery-title-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sw-gallery-title  { font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; color: var(--ivory); letter-spacing: 0.04em; }
.sw-gallery-subtitle { font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); opacity: 0.7; margin-top: 0.2rem; }
.sw-gallery-bar-right { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; padding-left: 1.5rem; }
.sw-gallery-counter { font-family: var(--font-display); font-size: 1.1rem; color: rgba(250,246,241,0.2); letter-spacing: 0.1em; white-space: nowrap; }
/* MOBILE FIX: added min-height/padding so close button meets 44px touch target on all devices */
.sw-gallery-close { display: flex; align-items: center; gap: 0.5rem; font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,246,241,0.4); cursor: pointer; transition: color 0.3s; background: none; border: none; font-family: var(--font-body); white-space: nowrap; min-height: 44px; padding-inline: 0.25rem; }
.sw-gallery-close:hover { color: var(--rose); }
.sw-gallery-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sw-gallery-img { position: absolute; inset: -5%; background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; transition: background-image 0s; }
.sw-gallery-img.sw-img-enter { animation: swImgIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sw-gallery-img.sw-img-exit  { animation: swImgOut 0.3s cubic-bezier(0.87, 0, 0.13, 1) both; }
@keyframes swImgIn  { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@keyframes swImgOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.975); } }
.sw-gallery-stage::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 38%; background: linear-gradient(to top, rgba(9,8,11,0.92), transparent); z-index: 2; pointer-events: none; }
.sw-gallery-stage.sw-bg-anim::before { animation: swBgZoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes swBgZoom { from { transform: scale(1.15); opacity: 0; } to { transform: scale(1); opacity: 0.6; } }
.sw-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(250,246,241,0.08); background: rgba(9,8,11,0.4); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(250,246,241,0.5); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.sw-gallery-nav:hover { border-color: var(--rose); color: var(--rose); background: rgba(9,8,11,0.7); transform: translateY(-50%) scale(1.08); }
.sw-gallery-prev { left: 2.5rem; }
.sw-gallery-next { right: 2.5rem; }
.sw-gallery-strip { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 1.5rem 3rem 2rem; display: flex; gap: 0.5rem; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sw-gallery-strip::-webkit-scrollbar { display: none; }
.sw-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(250,246,241,0.06); z-index: 10; pointer-events: none; }
.sw-progress-fill { height: 100%; background: var(--rose); transition: width 0.52s cubic-bezier(0.16, 1, 0.3, 1); width: 0%; }
.sw-strip-thumb {
  width: 48px; height: 36px; border-radius: 2px; flex-shrink: 0;
  cursor: pointer; overflow: visible; position: relative;
  border: 1px solid rgba(250,246,241,0.05); background: var(--umber);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  /* Scale upward (toward images) for natural dock feel */
  transform-origin: bottom center;
  will-change: transform;
}
.sw-strip-thumb > * { overflow: hidden; border-radius: 2px; }
.sw-strip-thumb.active { width: 72px; border-color: var(--rose); box-shadow: 0 0 0 1px rgba(201,149,107,0.3); }
.sw-strip-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(60%); transition: filter 0.4s; border-radius: 2px; }
.sw-strip-thumb.active .sw-strip-thumb-img { filter: grayscale(0%); }
.sw-strip-thumb:hover .sw-strip-thumb-img { filter: grayscale(20%); }
/* Mac Dock Effect: smooth transform on interact, gentle return on leave */
.sw-gallery-strip:hover .sw-strip-thumb { transition: width 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.4s; }
/* Disable dock scale on touch/mobile — use normal tap instead */
@media (hover: none) {
  .sw-gallery-strip:hover .sw-strip-thumb { transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
  .sw-strip-thumb { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide { grid-column: span 1; aspect-ratio: 4/5; }
  .nyc-layout { grid-template-columns: 1fr; }
  .nyc-preview { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* Carousel responsive */
  .ethereal-carousel { height: 480px; }
  .ethereal-carousel .gallery-item { width: 300px; }
  .ethereal-carousel .vw-card,
  .ethereal-carousel .vw-card.wide { width: 500px; }
  .ec-prev { left: 1rem; }
  .ec-next { right: 1rem; }
}

@media (max-width: 1366px) and (hover: none), (max-width: 1366px) and (pointer: coarse) {
  .ethereal-carousel.is-native-scroll { perspective: none; overflow: hidden; }
  #portfolioCarousel.is-native-scroll .ec-track {
    padding-inline: max(1.5rem, calc((100vw - min(340px, 42vw)) / 2));
  }
  #videoCarousel.is-native-scroll .ec-track {
    padding-inline: max(1.5rem, calc((100vw - min(540px, 72vw)) / 2));
  }
  .ethereal-carousel.is-native-scroll .gallery-item { width: min(340px, 42vw); }
  .ethereal-carousel.is-native-scroll .vw-card,
  .ethereal-carousel.is-native-scroll .vw-card.wide {
    width: min(540px, 72vw);
    aspect-ratio: 16 / 9;
  }
}
/* ═══════════════════════════════════════════════════════════
   NYFW — BROADCAST × MARQUEE FUSION
   ═══════════════════════════════════════════════════════════ */

.nyfw-section {
  background: var(--dark);
  overflow: hidden;
}

/* ── Ticker ── */
.nyfw-ticker-wrap {
  background: var(--rose);
  overflow: hidden;
  padding: 0.55rem 0;
  width: 100%;
}
.nyfw-ticker-track {
  display: flex;
  white-space: nowrap;
  animation: nyfw-ticker 32s linear infinite;
  will-change: transform;
}
.nyfw-ticker-track span {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--dark);
  text-transform: uppercase;
}
@keyframes nyfw-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Marquee Header ── */
.nyfw-header {
  padding: 0 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(201,149,107,0.1);
}
.nyfw-header-inner {
  padding: 0.75rem 0 0.5rem;
}
.nyfw-section-tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  color: var(--rose);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.nyfw-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin: 0 0 0.6rem;
}
.nyfw-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  color: rgba(201,149,107,0.65);
  margin: 0;
}

/* ── Bulb rows ── */
.nyfw-bulb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  padding: 0.6rem 0;
}
.nyfw-bulb {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  animation: nyfw-bulb-glow 2.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  flex-shrink: 0;
}
@keyframes nyfw-bulb-glow {
  0%, 100% { opacity: 0.2;  box-shadow: none; }
  50%       { opacity: 0.95; box-shadow: 0 0 10px 3px rgba(201,149,107,0.5); }
}

/* ── Meta strip ── */
.nyfw-meta-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(240,234,220,0.3);
  text-transform: uppercase;
  margin-top: 0.75rem;
}
.nyfw-meta-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.45;
  flex-shrink: 0;
}

/* ── Cinematic 21:9 Hero ── */
.nyfw-hero {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, #1a1208 0%, #0d0b08 50%, #1a1410 100%);
}
.nyfw-hero-bg {
  position: absolute;
  inset: -6%;
  background-image: url('/images/nyfw-runway/1.jpg');
  background-size: cover;
  background-position: center top;
  animation: nyfw-ken-burns 20s ease-in-out infinite alternate;
}
@keyframes nyfw-ken-burns {
  from { transform: scale(1);    filter: brightness(0.65) saturate(0.9); }
  to   { transform: scale(1.09); filter: brightness(0.55) saturate(1.0); }
}
.nyfw-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.nyfw-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, transparent 25%, rgba(10,8,6,0.75) 100%);
  pointer-events: none;
}

/* Broadcast lower-third chyron */
.nyfw-chyron {
  position: absolute;
  bottom: clamp(1rem, 4%, 2.5rem);
  left: clamp(1rem, 4%, 3rem);
  display: flex;
  align-items: stretch;
  max-width: min(520px, 80%);
}
.nyfw-chyron-accent {
  width: 3px;
  background: var(--rose);
  flex-shrink: 0;
}
.nyfw-chyron-body {
  background: rgba(8,7,5,0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.65rem 1.25rem;
}
.nyfw-chyron-eyebrow {
  font-family: var(--font-body);
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  color: var(--rose);
  font-weight: 600;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.nyfw-chyron-main {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--ivory);
  line-height: 1.2;
  font-weight: 300;
}
.nyfw-chyron-sub {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(240,234,220,0.45);
  margin-top: 0.3rem;
}

/* Centre play / gallery hint */
.nyfw-hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
}
.nyfw-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,149,107,0.55);
  transition: transform 0.35s, border-color 0.35s;
}
.nyfw-hero-play svg {
  width: 22px;
  height: 22px;
  color: var(--rose);
  position: relative;
  z-index: 1;
}
.nyfw-hero-hint {
  position: absolute;
  top: calc(50% + 42px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: rgba(240,234,220,0.7);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s;
}
.nyfw-hero:hover .nyfw-hero-play,
.nyfw-hero:hover .nyfw-hero-hint { opacity: 1; }
.nyfw-hero:hover .nyfw-play-ring { transform: scale(1.15); border-color: var(--rose); }

/* ── 3-column editorial strip ── */
.nyfw-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201,149,107,0.1);
}
.nyfw-strip-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background: #0d0b08;
  border-right: 1px solid rgba(201,149,107,0.07);
}
.nyfw-strip-frame:last-child { border-right: none; }
.nyfw-strip-img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.9s;
  filter: brightness(0.5) saturate(0.75);
}
.nyfw-strip-frame:hover .nyfw-strip-img {
  transform: scale(1.06);
  filter: brightness(0.65) saturate(1.1);
}
.nyfw-strip-chyron {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(8,7,5,0.92) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.nyfw-strip-label {
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  color: var(--rose);
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.85;
}
.nyfw-strip-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--ivory);
  font-style: italic;
  font-weight: 300;
}

/* ── iPad landscape / small desktop (1024px–768px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .portfolio-tools { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .portfolio-actions { width: 100%; justify-content: flex-start; }
  .sov-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-text-overlay { left: 2rem; right: 5rem; top: clamp(7rem, 13vh, 9rem); min-height: min(24rem, 48vh); }
}

@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  nav.scrolled { padding: 0.6rem 1.5rem; }
  .nav-links { display: none; }
  /* MOBILE FIX: hamburger was ~30×22px — Apple HIG + WCAG require 44×44px minimum touch target */
  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: -0.5rem; /* compensate for added width so nav edge stays flush */
  }
  .section { padding: var(--section-space-tablet) var(--page-gutter-tablet); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 2rem; }
  .contact-info { position: static; padding-top: 0; }
  .contact-info h3 {
    font-size: clamp(2.8rem, 11vw, 5.1rem);
    white-space: normal;
  }
  .contact-form { margin-top: 0; }
  .contact-form-head { flex-direction: column; gap: 0.55rem; }
  .contact-form-head p { max-width: none; }
  .about-grid > .about-sticky, .about-grid > .about-text { grid-column: auto; position: static; }
  .about-text { max-width: none; }
  .about-image { max-height: 450px; }
  .about-name { font-size: 1.5rem; letter-spacing: 0.14em; }
  .about-lead { font-size: 0.9rem; line-height: 1.8; }
  .about-sanskrit { font-size: 0.92rem; line-height: 1.9; }
  .gallery-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .form-row, .date-grid { grid-template-columns: 1fr; }
  .date-grid input { min-width: 0; width: 100%; }
  .intro-title { font-size: clamp(2.1rem, 7.5vw, 3rem); letter-spacing: 0.28em; }
  .intro-title .v-dots { left: 1.16em; }
  .footer-top { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: 0.6rem; text-align: center; }
  footer { padding: 2.5rem 1.5rem 1.5rem; }
  .footer-logo-container { margin-bottom: 0.6rem; }
  .footer-brand p { line-height: 1.6; }
  .footer-col h5 { margin-bottom: 0.6rem; }
  .footer-col a { margin-bottom: 0.3rem; }
  .about-stats { gap: 2rem; }
  .about-actions { flex-direction: column; align-items: stretch; margin-top: 1.5rem; text-align: center; max-width: 20rem; }
  .intro-mark svg { width: 80px; height: 80px; }
  .cs-text-overlay { left: 1.5rem; right: 1.5rem; top: auto; bottom: 3rem; min-height: auto; display: block; max-width: none; }
  .cs-title { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .cs-counter { top: 1.5rem; right: 1.5rem; }
  .cs-dots { right: 1rem; }
  .cs-intro-title { font-size: clamp(2rem, 10vw, 3.5rem); }

  /* Services scroll-stack: same slide-over effect on mobile as desktop */

  /* ── Filter pills: horizontal scroll strip on mobile ── */
  .portfolio-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    gap: 0.4rem;
    max-width: 100%;
  }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filters button {
    flex-shrink: 0;
    font-size: 0.52rem;
    padding: 0.45rem 0.9rem;
    white-space: nowrap;
    /* MOBILE FIX: computed height was ~23px at this font-size; enforce 44px WCAG touch target */
    min-height: 44px;
  }

  .sw-gallery-bar { padding: 1rem 1.2rem; align-items: flex-start; }
  .sw-gallery-title { font-size: 1.05rem; }
  .sw-gallery-bar-right { flex-direction: column; align-items: flex-end; gap: 0.4rem; padding-left: 1rem; }
  .sw-gallery-counter { font-size: 0.75rem; }
  .sw-gallery-prev { left: 0.8rem; }
  .sw-gallery-next { right: 0.8rem; }
  /* MOBILE FIX: gallery nav arrows were 40×40px — raised to 44×44px touch-target minimum */
  .sw-gallery-nav { width: 44px; height: 44px; }
  .sw-gallery-strip { padding: 1rem 1.5rem 1.5rem; gap: 0.4rem; }
  /* Portfolio tools: stack vertically on mobile */
  .portfolio-tools { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .portfolio-actions { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .portfolio-select, .portfolio-search { min-width: unset; width: 100%; }
  /* MOBILE FIX: filmstrip thumbs at 768px were 40px tall — raised to 44px touch target minimum */
  .sw-strip-thumb { width: 52px; height: 44px; }
  .sw-strip-thumb.active { width: 78px; }
  /* Hero 3D float — reduce bob amplitude on mobile */
  .hero-title-float { animation: heroTitleFloat 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
  /* About stats: wrap on very small screens */
  .about-stats { flex-wrap: wrap; }
  /* Carousel responsive — mobile: clip overflow to prevent iOS Safari viewport expansion */
  .ethereal-carousel { height: 400px; overflow: hidden; perspective: 800px; }
  .ethereal-carousel .gallery-item { width: min(260px, 70vw); }
  .ethereal-carousel .vw-card,
  .ethereal-carousel .vw-card.wide { width: min(380px, 85vw); }
  .ethereal-carousel.is-native-scroll { perspective: none; overflow: hidden; }
  #portfolioCarousel.is-native-scroll .ec-track {
    padding-inline: max(1rem, calc((100vw - min(260px, 70vw)) / 2));
  }
  #videoCarousel.is-native-scroll .ec-track {
    padding-inline: max(1rem, calc((100vw - min(380px, 85vw)) / 2));
  }
  .ethereal-carousel.is-native-scroll .gallery-item { width: min(260px, 70vw); }
  .ethereal-carousel.is-native-scroll .vw-card,
  .ethereal-carousel.is-native-scroll .vw-card.wide {
    width: min(380px, 85vw);
    aspect-ratio: 16 / 9;
  }
  /* MOBILE FIX: was 38×38px — raised to 44×44px touch-target minimum */
  .ec-nav { width: 44px; height: 44px; }
  .ec-prev { left: 0.5rem; }
  .ec-next { right: 0.5rem; }

  .nav-links.show { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(9,8,11,1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 2rem; gap: 1.5rem; max-height: 85vh; overflow-y: auto; isolation: isolate; }

  /* Disable custom cursor on touch devices */
  .gallery-item { cursor: pointer; }
  .vw-card { cursor: pointer; }

  /* Video filter pills: horizontal scroll strip (matches portfolio filters) */
  .vw-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }
  .vw-filters::-webkit-scrollbar { display: none; }
  .vw-filters button { flex-shrink: 0; white-space: nowrap; }
  .form-group input,
  .form-group select,
  .form-group textarea,
  .flatpickr-input {
    font-size: 16px;
  }

}

/* ── Small phones (≤480px) — prevent text overflow, tighten spacing ── */
@media (max-width: 480px) {
  .contact-info h3 {
    font-size: clamp(2.25rem, 15vw, 3.25rem);
    line-height: 0.96;
  }
  .contact-note-list span {
    width: 100%;
    text-align: center;
  }
  .contact-form {
    padding: 1rem;
    border-radius: 6px;
  }
  .contact-form::before {
    display: none;
  }
  .form-submit {
    width: 100%;
  }
  .hero-title {
    font-size: clamp(1.85rem, 8.4vw, 2.65rem);
    letter-spacing: 0.12em;
  }
  .hero-title .v-dots {
    top: 0.12em;
    left: 0.78em;
    gap: 0.12em;
  }
  .nav-logo-text {
    font-size: 1.35rem;
    letter-spacing: 0.08em;
  }
  .nav-logo-text .nav-logo-dots {
    top: 0.36em;
    left: 0.74em;
  }
  .footer-logo-text {
    font-size: 1.35rem;
    letter-spacing: 0.18em;
  }
  .footer-logo-dots {
    top: 0.34em;
    left: 0.82em;
  }
  .section-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .section { padding: var(--section-space-mobile) var(--page-gutter-mobile); }
  /* MOBILE FIX: thumb height was 34px — raised to 44px so each filmstrip thumbnail
     meets the minimum touch-target height at ≤480px (iPhone SE / small Android) */
  .sw-strip-thumb { width: 44px; height: 44px; }
  .sw-strip-thumb.active { width: 62px; }
  .ethereal-carousel { height: 340px; }
}

/* ═══════════════════════════════════════════════════════════
   FIX 4 — VIDEO WORKS SECTION
   ═══════════════════════════════════════════════════════════ */

/* Filters — identical pattern to portfolio filters */
.vw-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.vw-filters button {
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250,246,241,0.32); font-weight: 300;
  padding: 0.5rem 1.3rem; border: 1px solid rgba(250,246,241,0.09);
  border-radius: 0; background: transparent; outline: none;
  transition: color 0.1s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-filters button:hover,
.vw-filters button.active { color: var(--rose); border-color: rgba(201,149,107,0.5); }

/* Grid */
.vw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.vw-card {
  position: relative; overflow: hidden; border-radius: 2px;
  cursor: none; aspect-ratio: 4/5;
  background: var(--umber);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-card.wide { grid-column: span 2; aspect-ratio: 8/5; }
.vw-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.3);
}

/* Poster / thumbnail */
.vw-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(0.7);
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.vw-card:hover .vw-poster { transform: scale(1.06); filter: brightness(0.85); }

/* Inline hover-preview video (lazy-loaded on first hover) */
.vw-poster video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-card:hover .vw-poster video,
.vw-poster.active video { opacity: 1; }

/* Gradient fallback swatches — use background-image to preserve background-size */
.vw-gi-1 { background-image: linear-gradient(135deg, #2a1f1a, #7a3b4e, #c9956b, #dbb08a); }
.vw-gi-2 { background-image: linear-gradient(135deg, #0e0d10, #1e1a16, #9b7082, #dbb08a); }
.vw-gi-3 { background-image: linear-gradient(135deg, #121a10, #4a6741, #8a9a7e, #c9956b); }
.vw-gi-4 { background-image: linear-gradient(135deg, #1a1520, #7a4060, #c9956b, #e8c4a8); }
.vw-gi-5 { background-image: linear-gradient(145deg, #09080b, #1e1a16, #3a3530, #c9956b); }
.vw-gi-6 { background-image: linear-gradient(135deg, #1a1012, #4a2030, #9b7082, #c9956b); }
.vw-gi-7 { background-image: linear-gradient(135deg, #0e1010, #1e2a20, #8a9a7e, #dbb08a); }
.vw-gi-8 { background-image: linear-gradient(135deg, #1a1612, #3a2a1e, #c9956b, #e8c4a8); }

/* ── VIDEO FOCUS RAIL ── */
/* .vfr-wrap removed — ambience now lives at section level */

#video-works {
  position: relative;
  overflow: hidden;
}

.vfr-ambience {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vfr-amb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(60px) saturate(1.8);
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.vfr-amb-img.vfr-amb-active { opacity: 0.6; }

.vfr-amb-overlay {
  position: absolute;
  inset: 0;
  /* Tight radial spotlight — glow only behind center card, edges fall to noir */
  background:
    radial-gradient(ellipse 55% 70% at 50% 42%, transparent 0%, rgba(9,8,11,0.82) 75%),
    linear-gradient(to top,    var(--noir) 8%,  transparent 35%),
    linear-gradient(to bottom, var(--noir) 0%,  transparent 25%),
    linear-gradient(to left,   var(--noir) 0%,  transparent 20%),
    linear-gradient(to right,  var(--noir) 0%,  transparent 20%);
}

.vfr-stage {
  position: relative;
  z-index: 1;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1800px;
  margin-bottom: 28px;
}

.vfr-card {
  position: absolute;
  width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--ease), opacity 0.4s ease, filter 0.4s ease;
  transform-style: preserve-3d;
  background: var(--umber);
}

.vfr-card.is-center {
  cursor: default;
  box-shadow: 0 28px 64px rgba(0,0,0,0.65);
}

.vfr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.vfr-card-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}

.vfr-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 20px;
}

.vfr-text {
  flex: 1;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.vfr-text.vfr-exit {
  opacity: 0;
  transform: translateY(-8px);
}

.vfr-text.vfr-enter {
  animation: vfrTextIn 0.3s ease forwards;
}

@keyframes vfrTextIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vfr-meta {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 6px;
}

.vfr-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--ivory);
  margin-bottom: 6px;
  line-height: 1.1;
}

.vfr-desc {
  font-size: 13px;
  color: rgba(250,246,241,0.48);
  max-width: 320px;
  line-height: 1.55;
}

.vfr-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.vfr-ctrl-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vfr-ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(250,246,241,0.45);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.vfr-ctrl-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ivory);
}

.vfr-ctrl-btn:active { transform: scale(0.92); }

.vfr-count {
  font-size: 11px;
  font-family: monospace;
  color: rgba(250,246,241,0.3);
  min-width: 38px;
  text-align: center;
}

.vfr-watch-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background: var(--rose);
  color: var(--noir);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.vfr-watch-btn:hover { opacity: 0.88; }
.vfr-watch-btn:active { transform: scale(0.96); }

.vfr-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.vfr-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(201,149,107,0.12);
}

.vfr-divider-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,149,107,0.38);
}

/* ── Cinematic Play button ── */
.vw-play-wrap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.vw-card:hover .vw-play-wrap { transform: translate(-50%, -50%) scale(1.15); }

/* Expanding ring pulse on hover */
.vw-play-ring {
  position: absolute;
  inset: -10px; border-radius: 50%;
  border: 1px solid rgba(201,149,107,0.4);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
}
.vw-card:hover .vw-play-ring { transform: scale(1.35); opacity: 0; }

.vw-play-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(201,149,107,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,149,107,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s, border-color 0.4s;
}
.vw-card:hover .vw-play-icon {
  background: rgba(201,149,107,0.28); border-color: var(--rose);
}
.vw-play-icon svg { width: 18px; height: 18px; margin-left: 3px; color: var(--rose); }

/* ── Info overlay ── */
.vw-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,8,11,0.93) 0%, rgba(9,8,11,0.18) 52%, transparent 100%);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.8rem 2rem; z-index: 3;
}
.vw-card:hover .vw-overlay { opacity: 1; }
.vw-overlay > * { transform: translateY(10px); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); }
.vw-card:hover .vw-overlay > * { transform: translateY(0); }
.vw-badge {
  font-size: 0.47rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 0.45rem;
}
.vw-overlay h4 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.1rem; color: var(--ivory); letter-spacing: 0.04em; margin-bottom: 0.2rem;
}
.vw-overlay p {
  font-size: 0.49rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(250,246,241,0.45);
}

/* Duration badge */
.vw-duration {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  font-size: 0.49rem; letter-spacing: 0.08em;
  color: rgba(250,246,241,0.8);
  background: rgba(9,8,11,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(250,246,241,0.08);
  padding: 0.25rem 0.65rem; border-radius: 20px;
  opacity: 0; transition: opacity 0.4s;
}
.vw-card:hover .vw-duration { opacity: 1; }

/* Hidden data source for multi-chapter (Haldi/Sangeet/Wedding) projects — read by JS on modal open, never shown in the grid */
.vw-chapters { display: none; }

/* "N Films" badge for multi-chapter projects — always visible (unlike .vw-duration's hover-only reveal) */
.vw-badge-count {
  position: absolute; top: 1rem; left: 1rem; z-index: 5;
  font-size: 0.49rem; letter-spacing: 0.08em;
  color: rgba(250,246,241,0.8);
  background: rgba(9,8,11,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(250,246,241,0.08);
  padding: 0.25rem 0.65rem; border-radius: 20px;
}

/* ── Video Modal ── */
.video-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-modal.vm-open { opacity: 1; pointer-events: auto; }
.vm-backdrop {
  position: absolute; inset: 0;
  background: rgba(9,8,11,0.96);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.vm-player {
  position: relative; z-index: 2;
  width: min(92vw, 960px);
  transform: translateY(28px) scale(0.97);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-modal.vm-open .vm-player { transform: translateY(0) scale(1); }

/* MOBILE FIX: added flex-wrap so title + close button don't overflow at 375px;
   min-width:0 on vm-title lets flexbox shrink the title instead of overflowing */
.vm-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 0.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(201,149,107,0.08);
  margin-bottom: 1.2rem;
}
.vm-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.4rem; color: var(--ivory); letter-spacing: 0.04em;
  min-width: 0;
}
.vm-subtitle {
  font-size: 0.49rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose); opacity: 0.75; margin-top: 0.3rem;
}
.vm-actions {
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
}
.vm-chapters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: -0.4rem 0 1.2rem;
}
/* Author rule above always beats the UA [hidden] rule on specificity/origin,
   so the hidden attribute needs an explicit override to actually hide the row. */
.vm-chapters[hidden] { display: none; }
.vm-chapter-tab {
  font-family: var(--font-body); font-size: 0.49rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(250,246,241,0.45);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(250,246,241,0.12);
  padding: 0.4rem 0.9rem; border-radius: 999px;
  cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.vm-chapter-tab:hover { color: var(--ivory); }
.vm-chapter-tab.active {
  color: var(--rose); border-color: rgba(201,149,107,0.5);
  background: rgba(201,149,107,0.08);
}
/* MOBILE FIX: vm-close had no minimum tap size — the only close control on touch devices.
   Added min-height and padding so the button reliably registers 44px touch target. */
.vm-close {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(250,246,241,0.35); cursor: pointer;
  transition: color 0.3s; background: none; border: none;
  font-family: var(--font-body); white-space: nowrap;
  min-height: 44px; padding-inline: 0.5rem; margin-right: -0.5rem;
  flex-shrink: 0;
}
.vm-close:hover { color: var(--rose); }
.vm-share {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(250,246,241,0.5); cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(250,246,241,0.12);
  border-radius: 999px;
  font-family: var(--font-body); white-space: nowrap;
  min-height: 44px; padding-inline: 0.85rem;
}
.vm-share:hover {
  color: var(--rose);
  border-color: rgba(201,149,107,0.45);
  background: rgba(201,149,107,0.08);
}
.vm-share[hidden] { display: none; }
.vm-stage {
  position: relative; background: #000;
  aspect-ratio: 16/9; border-radius: 2px; overflow: hidden;
}
#vmVideo {
  width: 100%; height: 100%; object-fit: contain;
  display: none;
}
.vm-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem;
  background: linear-gradient(145deg, #1e1a16, #2a2520, rgba(201,149,107,0.06));
}
.vm-placeholder-icon svg { width: 56px; height: 56px; opacity: 0.25; }
.vm-placeholder p {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250,246,241,0.18);
}
/* Toggle video/placeholder visibility */
.vm-stage.vm-has-video .vm-placeholder { display: none; }
.vm-stage.vm-has-video #vmVideo { display: block; }

/* Custom Video Controls */
.vm-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex; align-items: center; gap: 1rem;
  opacity: 0; transition: opacity 0.3s;
}
.vm-stage:hover .vm-controls { opacity: 1; }
/* MOBILE FIX: give each control button an explicit 44×44px touch target — icons are only 16–18px
   without this, all play/skip/mute/fullscreen buttons are untappable on small screens */
.vm-ctrl-btn {
  color: var(--ivory); opacity: 0.8; transition: opacity 0.3s;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
.vm-ctrl-btn:hover { opacity: 1; color: var(--rose); }
@media (hover: none) {
  .vm-controls {
    opacity: 1;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Skip overlays — YouTube-style on-screen indicators */
.vm-skip-overlay {
  position: absolute; top: 0; bottom: 0; width: 35%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; z-index: 5;
  transition: opacity 0.15s;
}
.vm-skip-back { left: 0; border-radius: 0 50% 50% 0; }
.vm-skip-fwd { right: 0; border-radius: 50% 0 0 50%; }
.vm-skip-overlay.vm-skip-active {
  opacity: 1;
  animation: vmSkipFlash 0.6s ease forwards;
}
.vm-skip-overlay svg { color: var(--ivory); filter: drop-shadow(0 0 8px rgba(0,0,0,0.5)); }
.vm-skip-ripple {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 70%);
  opacity: 0;
}
.vm-skip-overlay.vm-skip-active .vm-skip-ripple {
  animation: vmSkipRipple 0.6s ease forwards;
}
@keyframes vmSkipFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vmSkipRipple {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}
.vm-progress-track {
  flex: 1; height: 3px; background: rgba(255,255,255,0.2);
  cursor: pointer; position: relative; border-radius: 2px;
  transition: height 0.2s;
}
.vm-progress-track:hover { height: 5px; }
.vm-progress-fill { height: 100%; background: var(--rose); width: 0%; border-radius: 2px; position: relative; }
.vm-progress-fill::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--ivory); border-radius: 50%; opacity: 0; transition: opacity 0.2s; }
.vm-progress-track:hover .vm-progress-fill::after { opacity: 1; }
.vm-time { font-size: 0.65rem; font-family: var(--font-body); color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; min-width: 35px; text-align: right; }

/* Responsive Video Grid */
@media (max-width: 1024px) {
  .vw-grid { grid-template-columns: repeat(2, 1fr); }
  .vw-card.wide { grid-column: span 2; aspect-ratio: 8/5; }
}
@media (max-width: 768px) {
  .vw-grid { grid-template-columns: 1fr; }
  .vw-card.wide { grid-column: span 1; aspect-ratio: 4/5; }
  .vm-player { width: 95vw; }
  .vw-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    max-width: calc(100% + 2rem);
    margin: 0 -1rem 1.8rem;
    padding: 0 1rem 0.75rem;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .vw-filters::-webkit-scrollbar { display: none; }
  .vw-filters button {
    flex-shrink: 0;
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    padding: 0.56rem 0.95rem;
    /* MOBILE FIX: was 38px — raised to 44px to meet WCAG 2.5.5 touch-target minimum */
    min-height: 44px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  .vfr-stage { height: 240px; }
  .vfr-card { width: 320px; }
  .vfr-info { flex-direction: column; align-items: flex-start; padding: 0 20px; gap: 16px; }
  .vfr-desc { display: none; }
  .vfr-controls { width: 100%; }
  .vfr-watch-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vfr-amb-img,
  .vfr-card,
  .vfr-text { transition: none; }
  .vfr-text.vfr-enter { animation: none; opacity: 1; transform: none; }
}

@media (hover: none) {
  .vfr-ctrl-btn:hover { background: transparent; color: rgba(250,246,241,0.45); }
  .vfr-watch-btn:hover { opacity: 1; }
}

/* ── NYFW mobile ── */
@media (max-width: 768px) {
  .nyfw-hero { aspect-ratio: 16 / 9; }
  .nyfw-strip { grid-template-columns: 1fr; border-top: none; }
  .nyfw-strip-frame { aspect-ratio: 16 / 9; border-right: none; border-top: 1px solid rgba(201,149,107,0.07); }
  .nyfw-bulb { width: 5px; height: 5px; }
  .nyfw-chyron { bottom: 1rem; left: 1rem; max-width: 88%; }
  .nyfw-chyron-main { font-size: 1rem; }
  .nyfw-meta-strip { gap: 0.5rem; }
}
@media (max-width: 480px) {
  .nyfw-header { padding: 0 1rem 1.5rem; }
  .nyfw-bulb-row { gap: 0.6rem; }
}

@media (hover: none) {
  .gallery-item .gi-bg { filter: grayscale(0%) brightness(1) contrast(1) !important; }
  /* Framed Stories follows the desktop monochrome default on every cover.
     The first tap reveals color and text until another cover is selected.
     The second tap opens the album. Ignore emulated sticky :hover. */
  #portfolioCarousel .gallery-item .gi-bg {
    filter: grayscale(100%) brightness(0.9) contrast(1.05) !important;
    transform: none !important;
    transition: filter 280ms ease;
  }
  #portfolioCarousel .gallery-item.gi-tap-reveal .gi-bg,
  #portfolioCarousel .gallery-item.gi-color-reveal .gi-bg {
    filter: grayscale(0%) brightness(1) contrast(1) !important;
  }
  #portfolioCarousel .gallery-item .gi-overlay { opacity: 0; }
  #portfolioCarousel .gallery-item.gi-tap-reveal .gi-overlay,
  #portfolioCarousel .gallery-item.gi-color-reveal .gi-overlay { opacity: 1; }
  #portfolioCarousel .gallery-item.gi-cinematic .gi-overlay { padding: 2.25rem 1rem 2rem; }
  #portfolioCarousel .gi-cinematic .gi-title-group h4 {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.15;
  }
  #portfolioCarousel .gi-cinematic .gi-subtitle {
    font-size: 9px;
    letter-spacing: 0.14em;
    margin-bottom: 0.45rem;
  }
  #portfolioCarousel .gi-cinematic .gi-story {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    margin: 0;
  }
  #portfolioCarousel .gi-cinematic .gi-divider { margin: 0.5rem 0; }
  #portfolioCarousel .gallery-item.gi-tap-reveal .gi-subtitle,
  #portfolioCarousel .gallery-item.gi-tap-reveal .story-line {
    opacity: 1;
    transform: translateY(0);
  }
  #portfolioCarousel .gallery-item.gi-tap-reveal .gi-title-group h4 { transform: scale(1); }
  #portfolioCarousel .gallery-item.gi-tap-reveal .gi-divider { width: 80px; }
  #portfolioCarousel .gallery-item .gi-overlay::after {
    content: 'Tap again to open';
    margin-top: 1rem;
    color: var(--ivory);
    font: 400 0.6rem/1.4 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px #000;
  }
  .gallery-item:hover { transform: none; box-shadow: none; }
  .gallery-item:active { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(0,0,0,0.5); }
  .gallery-item .gi-overlay { opacity: 1; background: linear-gradient(to top, rgba(9,8,11,0.88) 0%, rgba(9,8,11,0.22) 48%, transparent 100%); }
  .gallery-item .gi-overlay > div { transform: translateY(0); }
  .gallery-item .gi-count { opacity: 1; transform: translateY(0); }
  .gallery-item.gi-editorial .gi-editorial-divider {
    width: 78px;
    opacity: 1;
  }
  .gallery-item.gi-editorial .gi-storyline {
    opacity: 1;
    max-height: 4.8rem;
    transform: translateY(0);
  }
  .cs-dot.active { background: var(--rose); }
  .testimonial-card:hover { transform: none; }
  .testimonial-card:active { transform: translateY(-3px); }
  .hero-cta:active::before { transform: scaleX(1); }
  .hero-cta:active { color: var(--noir); border-color: var(--rose); }
  .nav-links a:active { color: var(--rose); }
  .nyc-loc:hover { padding-left: 0; }
  .cursor-follow { display: none !important; }
  .gallery-item { cursor: pointer; }
  .gallery-item, .portfolio-filters button, .nyc-loc, .hero-cta, .nav-cta { touch-action: manipulation; }
  /* Video card touch overrides */
  .vw-card:hover { transform: none; box-shadow: none; }
  .vw-card:active { transform: translateY(-3px); }
  .vw-card .vw-overlay { opacity: 0; background: linear-gradient(to top, rgba(9,8,11,0.9) 0%, rgba(9,8,11,0.16) 42%, transparent 100%); }
  .vw-card .vw-overlay > * { transform: translateY(0); }
  .vw-card .vw-duration { opacity: 0; }
  .vw-card .vw-play-wrap { transform: translate(-50%, -50%) scale(0.94); }
  .vw-card .vw-play-ring { transform: scale(1); opacity: 0.18; }
  .vw-card .vw-poster { filter: grayscale(100%) brightness(0.72) contrast(1.05); }
  /* Carousel touch overrides */
  .ethereal-carousel .gallery-item[data-ec-offset="0"] .gi-overlay { opacity: 1; }
  .ethereal-carousel .gallery-item[data-ec-offset="0"] .gi-overlay > div { transform: translateY(0); }
  .ethereal-carousel .gallery-item[data-ec-offset="0"] .gi-count { opacity: 1; transform: translateY(0); }
  .ethereal-carousel .vw-card[data-ec-offset="0"] .vw-overlay { opacity: 1; }
  .ethereal-carousel .vw-card[data-ec-offset="0"] .vw-overlay > * { transform: translateY(0); }
  .ethereal-carousel .vw-card[data-ec-offset="0"] .vw-duration { opacity: 1; }
  .ethereal-carousel .vw-card[data-ec-offset="0"] .vw-poster { filter: grayscale(0%) brightness(0.86); }
  .ethereal-carousel .vw-card[data-ec-offset="1"] .vw-overlay,
  .ethereal-carousel .vw-card[data-ec-offset="-1"] .vw-overlay { opacity: 0; }
  .ethereal-carousel .vw-card[data-ec-offset="1"] .vw-duration,
  .ethereal-carousel .vw-card[data-ec-offset="-1"] .vw-duration { opacity: 0; }
  .ethereal-carousel .vw-card[data-ec-offset="1"] .vw-play-wrap,
  .ethereal-carousel .vw-card[data-ec-offset="-1"] .vw-play-wrap { transform: translate(-50%, -50%) scale(0.76); opacity: 0.62; }
  .ec-nav { width: 42px; height: 42px; opacity: 0.85; }
  .ec-nav:hover { transform: translateY(-50%); }
}

@media (max-width: 768px) {
  #video-works { scroll-margin-top: 5.75rem; }
  #videoCarousel .vw-card,
  #videoCarousel .vw-card.wide { width: min(350px, 80vw); }
  #videoCarousel .vw-card[data-ec-offset="1"],
  #videoCarousel .vw-card[data-ec-offset="-1"] {
    opacity: 0.62;
    filter: blur(0.9px) brightness(0.76) saturate(0.7);
  }
  #videoCarousel .vw-card[data-ec-offset="0"] {
    box-shadow:
      0 22px 42px rgba(0,0,0,0.5),
      0 0 76px rgba(201,149,107,0.07);
  }
  #videoCarousel .vw-overlay {
    padding: 1.2rem 1.25rem 1.15rem;
    background: linear-gradient(to top, rgba(9,8,11,0.9) 0%, rgba(9,8,11,0.14) 46%, transparent 100%);
  }
  #videoCarousel .vw-badge {
    font-size: 0.43rem;
    margin-bottom: 0.32rem;
    letter-spacing: 0.18em;
  }
  #videoCarousel .vw-overlay h4 {
    font-size: 0.96rem;
    margin-bottom: 0.14rem;
    line-height: 1.08;
  }
  #videoCarousel .vw-overlay p {
    font-size: 0.45rem;
    letter-spacing: 0.14em;
  }
  #videoCarousel .vw-play-wrap { top: 49%; }
  #videoCarousel .vw-play-icon {
    width: 48px;
    height: 48px;
  }
  #videoCarousel .vw-play-icon svg {
    width: 15px;
    height: 15px;
    margin-left: 2px;
  }
  #videoCarousel .vw-duration {
    top: 0.8rem;
    right: 0.8rem;
    font-size: 0.44rem;
    padding: 0.22rem 0.56rem;
    letter-spacing: 0.07em;
  }
  #videoCarousel .ec-nav {
    width: 36px;
    height: 36px;
    background: rgba(9,8,11,0.34);
    border-color: rgba(201,149,107,0.16);
    opacity: 0.78;
  }
  #videoCarousel .ec-prev { left: 0.35rem; }
  #videoCarousel .ec-next { right: 0.35rem; }
}

@media (max-width: 480px) {
  #video-works .section-desc {
    max-width: 18rem;
    line-height: 1.9;
  }
  .vw-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    max-width: 100%;
    margin: 0 0 1.55rem;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: none;
  }
  .vw-filters button {
    width: 100%;
    min-height: 36px;
    font-size: 0.45rem;
    padding: 0.5rem 0.62rem;
    letter-spacing: 0.14em;
  }
  .vw-filters button:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(12rem, 100%);
  }
  .vw-filters button:nth-child(6) {
    letter-spacing: 0.12em;
  }
  #videoCarousel .ec-nav {
    width: 34px;
    height: 34px;
  }
  #videoCarousel .ec-prev { left: 0.25rem; }
  #videoCarousel .ec-next { right: 0.25rem; }
  #videoCarousel .vw-card[data-ec-offset="1"],
  #videoCarousel .vw-card[data-ec-offset="-1"] {
    opacity: 0.66;
  }
  #videoCarousel .vw-play-wrap {
    top: 48.25%;
  }
  #videoCarousel .vw-card[data-ec-offset="1"] .vw-play-wrap,
  #videoCarousel .vw-card[data-ec-offset="-1"] .vw-play-wrap {
    opacity: 0.52;
  }
  #videoCarousel .vw-duration {
    top: 0.62rem;
    right: 0.62rem;
  }
  #videoCarousel .vw-overlay {
    padding: 0.96rem 0.98rem 0.92rem;
  }
  #videoCarousel .vw-overlay h4 {
    font-size: 0.88rem;
  }
  #videoCarousel .vw-overlay p {
    font-size: 0.43rem;
  }
  #videoCarousel .vw-card,
  #videoCarousel .vw-card.wide { width: min(338px, 81vw); }
}

@media (max-width: 380px) {
  .vw-filters {
    margin-bottom: 1.55rem;
    gap: 0.38rem;
  }
  .vw-filters button {
    font-size: 0.42rem;
    padding: 0.48rem 0.54rem;
    letter-spacing: 0.12em;
  }
  #videoCarousel .vw-card,
  #videoCarousel .vw-card.wide { width: min(332px, 82vw); }
  #videoCarousel .vw-overlay {
    padding: 0.9rem 0.92rem 0.88rem;
  }
  #videoCarousel .vw-overlay h4 {
    font-size: 0.84rem;
  }
  #videoCarousel .vw-play-wrap { top: 48.5%; }
  #videoCarousel .vw-play-icon {
    width: 44px;
    height: 44px;
  }
  #videoCarousel .vw-duration {
    top: 0.68rem;
    right: 0.68rem;
  }
}

/* Testimonials — placed after responsive block so mobile override (768px) takes effect */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TESTIMONIALS CAROUSEL (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Section fits within one screen */
  #testimonials.section { padding-block: var(--section-space-tablet); padding-inline: 0; }
  #testimonials .container { padding-left: 0; padding-right: 0; overflow: hidden; }
  #testimonials .section-tag,
  #testimonials .section-title,
  #testimonials .section-desc { padding-left: var(--page-gutter-tablet); padding-right: var(--page-gutter-tablet); }

  /* Carousel track: horizontal scroll, one card at a time */
  .testimonials-grid {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }

  /* Each card takes full viewport width */
  .testimonial-card {
    flex: 0 0 100vw;
    width: 100vw;
    max-width: 100vw;
    padding: 20px;
    scroll-snap-align: start;
    border-left: none;
    border-right: none;
    transition: transform 0.3s var(--ease);
    box-sizing: border-box;
  }
  .testimonial-card blockquote { font-size: 14px; line-height: 1.75; margin-bottom: 1.2rem; }
  .testimonial-author h5 { font-size: 13px; }
  .testimonial-author p { font-size: 11px; }

  /* Dot indicators */
  .tm-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 4px;
  }
  .tm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(201,149,107,0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .tm-dot.active {
    background: #c9956b;
    width: 8px;
    height: 8px;
  }

  /* Arrow hint icons */
  .tm-arrow-hints {
    position: relative;
    pointer-events: none;
  }
  .tm-arrow-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201,149,107,0.6);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 2;
  }
  .tm-arrow-hint.faded { opacity: 0; }
  .tm-arrow-hint--left { left: 8px; }
  .tm-arrow-hint--right { right: 8px; }
}

.tm-arrow-hint { display: none; }

.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 149, 107, 0.1);
  padding: 3rem;
  position: relative;
  transition: all 0.6s var(--ease);
}

.testimonial-card:hover {
  background: rgba(201, 149, 107, 0.05);
  border-color: var(--rose);
  transform: translateY(-6px);
}

.testimonial-card blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(250,246,241,0.55);
  margin-bottom: 1.8rem;
}

.testimonial-author h5 {
  color: var(--rose);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 400;
}
.sov-link-view {
    color: var(--ivory) !important;
    opacity: 0.6;
    border-bottom: 1px solid rgba(250, 246, 241, 0.2);
    padding-bottom: 2px;
    transition: all 0.4s var(--ease);
}

.sov-link-view:hover {
    opacity: 1;
    border-bottom-color: var(--rose);
    letter-spacing: 0.1em;
}

/* Mobile photo journal — selected when an album opens, retained on rotation. */
.sw-journal[hidden], .sw-journal-detail[hidden],
.sw-journal [hidden], .sw-journal-detail [hidden] { display: none !important; }
.sw-gallery.sw-journal-mode { color: var(--ivory); }
.sw-gallery.sw-journal-mode > .sw-gallery-bar,
.sw-gallery.sw-journal-mode > .sw-gallery-stage { display: none; }
.sw-journal { flex: 1; min-height: 0; }
.sw-journal-scroll {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  scrollbar-width: thin; scrollbar-color: var(--rose) transparent;
  scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.sw-journal-nav {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: var(--noir);
}
.sw-journal-action {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 8px 4px;
  color: var(--ivory); font: 400 14px/1.4 var(--font-body);
  cursor: pointer; transition: color 180ms ease;
}
.sw-journal-action svg { flex-shrink: 0; }
.sw-journal-action:hover { color: var(--rose-light); }
.sw-journal-action:disabled, .sw-journal-action[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.sw-journal-action:focus-visible, .sw-journal-photo:focus-visible {
  outline: 2px solid var(--rose-light); outline-offset: -2px;
}
.sw-journal-wordmark {
  margin-left: auto; color: var(--rose-light);
  font: 400 12px/1 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase;
}
.sw-journal-compact-title {
  display: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 22px/1.3 var(--font-display);
}
.sw-journal-scrolled .sw-journal-compact-title { display: block; }
.sw-journal-scrolled .sw-journal-back-label,
.sw-journal-scrolled .sw-journal-wordmark { display: none; }
.sw-journal-intro, .sw-journal-grid { max-width: 860px; margin-inline: auto; }
.sw-journal-intro {
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 22px max(16px, env(safe-area-inset-left, 0px));
}
.sw-journal-intro h2 {
  font: 300 clamp(30px, 8.4vw, 42px)/1.12 var(--font-display);
  color: var(--ivory); letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.sw-journal-subtitle {
  margin-top: 10px; color: var(--rose-light);
  font: 400 10px/1.7 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
}
.sw-journal-meta { margin-top: 16px; color: #bdb7b0; font: 300 13px/1.6 var(--font-body); }
.sw-journal-grid {
  display: flex; flex-direction: column; gap: 8px;
  padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
}
.sw-journal-row { display: flex; align-items: flex-start; gap: 8px; }
.sw-journal-photo {
  display: block; position: relative; flex-basis: 0; flex-shrink: 1; min-width: 0;
  padding: 0; border: 0; border-radius: 0; overflow: hidden;
  background: #1e1a1b; color: var(--ivory); cursor: zoom-in;
  scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
}
.sw-journal-photo img { display: block; width: 100%; height: auto; }
.sw-journal-photo.sw-photo-unavailable img { visibility: hidden; }
.sw-journal-error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; color: #bdb7b0; font: 400 13px/1.5 var(--font-body);
}
.sw-journal-status { padding: 32px 16px; text-align: center; color: #bdb7b0; font-size: 14px; }
.sw-journal-detail {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  background: var(--noir); padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px));
}
.sw-journal-detail-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; min-height: 60px; gap: 12px;
}
.sw-journal-detail-bar > span { color: #bdb7b0; font: 400 13px/1.4 var(--font-body); white-space: nowrap; }
.sw-journal-detail-title {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sw-journal-detail-stage { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.sw-journal-detail-stage img { width: 100%; height: 100%; object-fit: contain; }
.sw-journal-detail-error { max-width: 28ch; color: #bdb7b0; font-size: 16px; text-align: center; }
.sw-journal-detail-controls { display: flex; justify-content: space-between; flex-shrink: 0; padding-block: 8px; }
@media (prefers-reduced-motion: reduce) {
  .sw-gallery.sw-journal-mode.sw-gallery-enter,
  .sw-gallery.sw-journal-mode.sw-gallery-exit { animation-duration: 0.01ms; }
  .sw-journal-action { transition: none; }
}

/* ═══════ STATIC GALLERY MODE ═══════ */
.sw-gallery.sw-static .sw-gallery-img {
    inset: 12% 15%; /* Reduced size */
    transform: none !important; /* Disable parallax */
}
.sw-gallery.sw-static .sw-gallery-img.sw-img-enter {
    animation-name: swImgInStatic; /* Disable zoom-in animation */
}
@keyframes swImgInStatic {
    from { opacity: 0; filter: blur(5px); }
    to { opacity: 1; filter: blur(0); }
}

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ═══════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(9,8,11,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201,149,107,0.3); color: var(--rose);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0; transform: translateY(10px); pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--rose); color: var(--noir); border-color: var(--rose); transform: translateY(-3px); }
@media (max-width: 768px) {
  /* MOBILE FIX: was 38×38px — raised to 44×44px to meet touch-target minimum */
  .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE SIX WAYS — 2-COLUMN COMPACT GRID (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #services-overview.section { padding: var(--section-space-tablet) var(--page-gutter-tablet); }
  #services-overview .section-title { font-size: 22px; }

  /* 2 × 3 grid */
  .sov-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .sov-card {
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,149,107,0.1);
    border-radius: 2px;
    gap: 0.35rem;
  }
  .sov-stamp {
    width: 44px;
    height: 44px;
    top: 0.5rem;
    left: 0.5rem;
  }
  .sov-title {
    font-size: 13px;
    font-weight: 600;
    margin-top: 2.8rem;
    color: #c9956b;
  }
  .sov-desc { font-size: 12px; line-height: 1.6; }
  .sov-num { font-size: 1.6rem; top: 0.5rem; right: 0.7rem; }
  .sov-tags { display: none; } /* hidden to save space on mobile */
  .sov-price { font-size: 11px; }
  .sov-link { font-size: 10px; min-height: 44px; display: flex; align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   SUBTITLE FONT OVERRIDE
   ═══════════════════════════════════════════════════════════ */
#about .about-panel > p,
#contact .contact-info > p {
  font-family: 'p22-mackinac-pro', var(--font-display);
}
#portfolio .section-desc,
#video-works .section-desc {
  font-family: 'p22-mackinac-pro', var(--font-display);
  font-size: 1.1rem; /* Increased size for more prominence */
  color: rgba(250,246,241,0.5); /* Slightly increased opacity for better contrast */
  line-height: 1.8;
  max-width: none; /* Allow text to span a single line */
}
#services-overview .section-desc {
  max-width: none; /* Allow text to span a single line */
  font-family: 'p22-mackinac-pro', var(--font-display);
  font-size: 1.1rem; /* Increased size for more prominence */
  color: rgba(250,246,241,0.5); /* Consistent with other subtitles */
  margin: 0 auto;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — LAB PREMIUM FLOATING LAYOUT
   ═══════════════════════════════════════════════════════════ */

.lab-section-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(250, 246, 241, 0.08);
}
.lab-section-rail span {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(250, 246, 241, 0.42);
  white-space: nowrap;
}
.lab-section-rail span:nth-child(2) {
  text-align: center;
  color: rgba(250, 246, 241, 0.28);
}
.lab-section-rail span:last-child { text-align: right; }

.lab-testimonials-study {
  position: relative;
  background: #0d0b0c;
}

.lab-testimonial-wrapper {
  position: relative;
  height: calc((var(--testimonial-card-count, 4) + 0.55) * 100svh);
}

.lab-testimonial-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(122, 59, 78, 0.12), transparent 26%),
    radial-gradient(circle at 50% 68%, rgba(201, 149, 107, 0.1), transparent 34%),
    linear-gradient(180deg, #15110f 0%, #0d0b0c 48%, #17120f 100%);
  isolation: isolate;
  contain: layout paint;
}
.lab-testimonial-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(240, 235, 228, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 24%, transparent 78%, rgba(201, 149, 107, 0.04));
  pointer-events: none;
}

.lab-testimonial-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(5.4rem, 13.5vw, 14rem);
  line-height: 0.84;
  letter-spacing: -0.08em;
  color: rgba(201, 149, 107, 0.075);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.lab-testimonial-center {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.lab-testimonial-cta {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.45rem;
  padding: 1.02rem 2.05rem;
  border-radius: 999px;
  border: 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(34, 24, 19, 0.92);
  background:
    linear-gradient(180deg, rgba(240, 235, 228, 0.18), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(223, 179, 139, 0.94), rgba(183, 132, 91, 0.9));
  text-shadow:
    0 1px 0 rgba(255, 245, 235, 0.26),
    0 -1px 0 rgba(113, 74, 41, 0.3);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3px rgba(255, 255, 255, 0.34),
    inset -3px -3px 0.5px -3px rgba(120, 82, 50, 0.18),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.14),
    inset -1px -1px 1px -0.5px rgba(87, 61, 37, 0.16),
    inset 0 0 10px 8px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.35s var(--lab-ease),
    color 0.35s var(--lab-ease),
    box-shadow 0.35s var(--lab-ease),
    filter 0.35s var(--lab-ease);
}
.lab-testimonial-cta::before,
.lab-testimonial-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lab-testimonial-cta::before {
  inset: 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08) 24%, rgba(255, 255, 255, 0.02) 56%, rgba(113, 74, 41, 0.16)),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.2), transparent 38%),
    radial-gradient(circle at 70% 78%, rgba(122, 59, 78, 0.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 22px rgba(87, 61, 37, 0.18);
  z-index: 0;
}
.lab-testimonial-cta::after {
  inset: 0;
  padding: 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 36%, rgba(121, 84, 50, 0.28)),
    linear-gradient(90deg, rgba(229, 214, 198, 0.18), rgba(255, 255, 255, 0.02), rgba(229, 214, 198, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.95;
  z-index: 1;
}
.lab-testimonial-cta-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}
.lab-testimonial-cta-label::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.28),
    0 0 6px rgba(255, 255, 255, 0.34);
}
.lab-testimonial-cta:hover,
.lab-testimonial-cta:focus-visible {
  transform: translateY(-2px) scale(1.03);
  color: rgba(27, 18, 14, 0.94);
  filter: brightness(1.08);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.24),
    inset 3px 3px 0.5px -3px rgba(255, 255, 255, 0.34),
    inset -3px -3px 0.5px -3px rgba(120, 82, 50, 0.16),
    inset 0 0 12px 10px rgba(255, 255, 255, 0.05),
    0 0 18px rgba(201, 149, 107, 0.12);
  outline: none;
}

.lab-testimonial-marquee {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
.lab-testimonial-mobile-head,
.lab-testimonial-mobile-meta {
  display: none;
}
.lab-testimonial-mobile-head {
  position: relative;
  z-index: 3;
}
.lab-testimonial-mobile-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: rgba(255, 250, 244, 0.96);
}
.lab-testimonial-mobile-head p {
  margin: 0;
  color: rgba(250, 246, 241, 0.6);
  line-height: 1.75;
  font-size: 0.92rem;
}
.lab-testimonial-mobile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201, 149, 107, 0.76);
}
.lab-testimonial-mobile-kicker::before {
  content: "";
  width: 1.85rem;
  height: 1px;
  background: rgba(201, 149, 107, 0.42);
}
.lab-testimonial-mobile-meta {
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.lab-testimonial-mobile-count {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 246, 241, 0.54);
  white-space: nowrap;
}
.lab-testimonial-mobile-count strong {
  color: rgba(201, 149, 107, 0.9);
  font-weight: 500;
}
.lab-testimonial-mobile-pips {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.lab-testimonial-mobile-pip {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: rgba(250, 246, 241, 0.16);
  box-shadow: 0 0 0 1px rgba(250, 246, 241, 0.02);
  transition:
    transform 0.3s var(--lab-ease),
    background-color 0.3s var(--lab-ease),
    box-shadow 0.3s var(--lab-ease);
}
.lab-testimonial-mobile-pip.is-active {
  transform: scale(1.15);
  background: rgba(201, 149, 107, 0.92);
  box-shadow: 0 0 0 5px rgba(201, 149, 107, 0.08);
}
.lab-testimonial-marquee::before,
.lab-testimonial-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(16vw, 12rem);
  z-index: 2;
  pointer-events: none;
}
.lab-testimonial-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(21, 17, 15, 1) 0%, rgba(21, 17, 15, 0.92) 34%, transparent 100%);
}
.lab-testimonial-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(21, 17, 15, 1) 0%, rgba(21, 17, 15, 0.92) 34%, transparent 100%);
}

.lab-testimonial-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.lab-quote-card {
  --float-x: 0px;
  --float-y: 0px;
  --scroll-react-y: 0px;
  --float-rotate: 0deg;
  --card-scale: 1;
  --hover-bump: 0;
  --card-brightness: 1;
  --card-opacity: 0.2;
  --mobile-shift-x: 0px;
  --mobile-lift: 0px;
  --mobile-scale: 1;
  --mobile-rotateY: 0deg;
  --mobile-opacity: 1;
  --mobile-shadow: 0.14;
  --quote-parallax: 0px;
  --footer-parallax: 0px;
  --avatar-parallax: 0px;
  --seal-parallax: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(19rem, 23vw, 23rem);
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 26px;
  border: 1px solid rgba(201, 149, 107, 0.12);
  background:
    linear-gradient(180deg, rgba(39, 31, 27, 0.92), rgba(24, 20, 18, 0.88)),
    rgba(18, 14, 13, 0.84);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(calc(-50% + var(--card-safe-x, calc(var(--card-x, 0px) + var(--float-x)))), calc(var(--card-base-y, 0px) + var(--scroll-react-y) + var(--float-y)), 0) rotate(var(--float-rotate)) scale(calc(var(--card-scale) + var(--hover-bump)));
  filter: brightness(var(--card-brightness));
  opacity: var(--card-opacity);
  transition:
    transform 0.45s var(--lab-ease),
    border-color 0.45s var(--lab-ease),
    background-color 0.45s var(--lab-ease),
    filter 0.45s var(--lab-ease),
    box-shadow 0.45s var(--lab-ease),
    opacity 0.45s var(--lab-ease);
}
.lab-quote-card:hover {
  --hover-bump: 0.04;
  --card-brightness: 1.04;
  opacity: 1;
  border-color: rgba(201, 149, 107, 0.34);
  background:
    linear-gradient(180deg, rgba(47, 37, 31, 0.96), rgba(28, 22, 19, 0.9)),
    rgba(20, 15, 13, 0.88);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(201, 149, 107, 0.06);
}

.lab-quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.04rem;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: rgba(240, 235, 228, 0.8);
  transform: translate3d(0, var(--quote-parallax), 16px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-quote-card footer {
  position: relative;
  margin-top: 1.15rem;
  padding: 0.92rem 4.2rem 0.9rem 0.92rem;
  border: 1px solid rgba(201, 149, 107, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(55, 43, 36, 0.5), rgba(28, 22, 19, 0.72)),
    rgba(22, 17, 15, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: block;
  transform: translate3d(0, var(--footer-parallax), 14px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.lab-quote-person {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  min-width: 0;
}

.lab-quote-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.lab-quote-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: -0.1rem;
  border: 1px solid rgba(201, 149, 107, 0.12);
  background: linear-gradient(135deg, rgba(201, 149, 107, 0.34), rgba(122, 59, 78, 0.22));
  transform: translate3d(0, var(--avatar-parallax), 20px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.lab-quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-quote-meta strong,
.lab-quote-seal {
  font-weight: 400;
}
.lab-quote-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: rgba(232, 196, 168, 0.9);
  white-space: nowrap;
}
.lab-quote-meta span {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.46rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: rgba(240, 235, 228, 0.34);
  text-transform: uppercase;
  white-space: nowrap;
}

.lab-quote-seal {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%) translate3d(0, var(--seal-parallax), 20px);
  padding: 0.4rem 0.62rem;
  border: 1px solid rgba(201, 149, 107, 0.16);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(219, 176, 138, 0.78);
  background: rgba(201, 149, 107, 0.06);
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile overrides — testimonials */
@media (max-width: 768px) {
  .lab-testimonial-stage {
    min-height: auto;
    padding: 1.5rem 0 0.4rem;
    position: relative;
    height: auto;
    overflow: visible;
  }
  .lab-testimonial-wrapper {
    height: auto;
  }
  .lab-testimonial-word {
    display: none;
  }
.lab-testimonial-mobile-head {
  display: grid;
  gap: 0.85rem;
  width: min(100%, 34rem);
  margin: 0 auto 1.1rem;
  padding: 0 1.2rem;
  justify-items: center;
  text-align: center;
}
.lab-testimonial-mobile-head h3 {
  font-size: clamp(1.58rem, 7.2vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.002em;
  max-width: 14.2ch;
  text-wrap: balance;
}
.lab-testimonial-mobile-kicker {
  justify-content: center;
}
  .lab-testimonial-center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    justify-content: center;
    margin: 1.15rem auto 0;
    padding: 0 1rem;
  }
  .lab-testimonial-marquee {
    position: relative;
    inset: auto;
    overflow: visible;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 0.7rem;
    perspective: 1200px;
    perspective-origin: 50% 38%;
  }
  .lab-testimonial-marquee::before,
  .lab-testimonial-marquee::after {
    display: none;
  }
  .lab-testimonial-mobile-meta {
    display: flex;
    width: min(100%, 32rem);
    margin: 0.9rem auto 0.7rem;
    padding: 0 1rem;
  }
  .lab-testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 78vw);
    width: 100%;
    transform: none !important;
    gap: 0.7rem;
    overflow-x: auto;
    padding: 0.3rem max(1rem, 9vw) 0.85rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(1rem, 9vw);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform-style: preserve-3d;
    align-items: start;
  }
  .lab-testimonial-track::-webkit-scrollbar {
    display: none;
  }
  .lab-quote-card {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 16.4rem;
    padding: 1.4rem 1rem 1.05rem;
    border-radius: 24px;
    transform-origin: center center;
    transform: translate3d(var(--mobile-shift-x), var(--mobile-lift), 0) rotateY(var(--mobile-rotateY)) scale(var(--mobile-scale)) !important;
    filter: none;
    opacity: var(--mobile-opacity);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-shadow:
      0 18px 40px rgba(0, 0, 0, var(--mobile-shadow)),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
      transform 0.58s cubic-bezier(0.22, 1.08, 0.36, 1),
      border-color 0.38s var(--lab-ease),
      opacity 0.38s var(--lab-ease),
      box-shadow 0.38s var(--lab-ease);
  }
  .lab-quote-card.is-mobile-active {
    opacity: 1;
    border-color: rgba(201, 149, 107, 0.22);
    box-shadow:
      0 26px 58px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(201, 149, 107, 0.05);
  }
  .lab-quote-card blockquote {
    font-size: 1.1rem;
    line-height: 1.56;
  }
  .lab-quote-card footer {
    margin-top: 1.05rem;
    padding: 0.88rem 3.9rem 0.88rem 0.86rem;
  }
  .lab-quote-meta strong {
    font-size: 1.08rem;
  }
  .lab-quote-meta span {
    font-size: 0.5rem;
  }
  .lab-section-rail {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .lab-section-rail span:nth-child(2),
  .lab-section-rail span:last-child {
    text-align: left;
  }
}