/* ... existing code ... -->
:root {
  --zy-beige: #F4EEE7;      /* Primary Background */
  --zy-sand: #E9DFD3;       /* Secondary Background */
  --zy-brown: #2B2520;      /* Primary Text */
  --zy-taupe: #6B5F53;      /* Secondary Text */
  --zy-gold: #C2A27B;       /* Accent Gold */
  --zy-border: #D7C8B5;     /* Soft Sand Border */
  --zy-white: #FFFFFF;      /* Pure White */
  --zy-shadow: 0 8px 24px rgba(43, 37, 32, 0.06);
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--zy-beige);
  color: var(--zy-brown);
  -webkit-font-smoothing: antialiased;
}

/* Luxury Display Typography */
.hero-display-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(32px, 7.5vw, 86px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  word-break: break-word;
  overflow-wrap: break-word;
}

.section-title {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* ... existing code ... -->
/* Hide Scrollbar for Horizontal Touch Swiping */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Vertical 9:16 Video Reel Card */
.reel-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--zy-shadow);
  border: 1px solid var(--zy-border);
  background-color: var(--zy-brown);
}
.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Marquee Animation - Contained strictly to parent */
@keyframes marqueeScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.animate-marquee {
  display: inline-flex;
  flex-shrink: 0;
  width: max-content;
  min-width: 200%;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}
.animate-marquee:hover {
  animation-play-state: paused;
}