/* ============================================================
   PROJECT PAGE — Styles (Full-Bleed 100% Edge-to-Edge Layout)
   (Typography and @font-face are loaded globally via style.css)
   ============================================================ */


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

body.is-loading {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

:root {
  --bg: #0a0a0a;
  --bg-alt: #121212;
  --hero-bg: #0a0a0a;
  --text: #f0ede6;
  --text-muted: #888888;
  --accent: #0844f5;
  --border: rgba(255, 255, 255, 0.08);
  --font-main: 'Kurdis', sans-serif;
  --font-body: 'Kurdis', sans-serif;
  --font-title: 'Kurdis', sans-serif;
  --font-display: 'Kurdis', sans-serif;
  --font-mono: 'Kurdis', sans-serif;
  --font-serif: 'Kurdis', sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── GLOBAL TYPOGRAPHY DIRECTIVES ─── */
h1, h2, h3, h4, h5, h6,
.project-hero__title,
.project-intro__title,
.next-title,
.ww-videos-title,
.reels-title,
.msc-posts-title,
.msc-brand-title {
  font-family: var(--font-title);
  letter-spacing: 0;
}

p,
.project-detail__desc,
.project-intro__tagline,
.next-subtitle {
  font-family: var(--font-body);
}

/* ─── THEMATIC PROJECT PALETTES (Exact Aesthetic Design Directives) ─── */
body.theme-msc {
  --bg: #071524;
  --hero-bg: #071524;
  --bg-alt: #0d2238;
  --text: #f0f7ff;
  --text-muted: #7ca3c7;
  --accent: #00e5ff;
  --border: rgba(0, 229, 255, 0.2);
}

body.theme-dos,
body.theme-crumble {
  --bg: #09090b;
  --hero-bg: #09090b;
  --bg-alt: #141418;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --accent: #cbd5e1;
  --border: rgba(255, 255, 255, 0.16);
}

body.theme-fapav {
  --bg: #080808;
  --hero-bg: #080808;
  --bg-alt: #121214;
  --text: #ffffff;
  --text-muted: #88888e;
  --accent: #e50914;
  --border: rgba(229, 9, 20, 0.22);
}

body.theme-fluid {
  --bg: #0c1e13;
  --bg-alt: #122b1b;
  --text: #ebf7ed;
  --text-muted: #84a58c;
  --accent: #0844f5;
  --border: rgba(8, 68, 245, 0.16);
}

body.theme-airc,
body.theme-cyber {
  --bg: #06121e;
  --hero-bg: #061628;
  --bg-alt: #0a1b2d;
  --text: #eef6fc;
  --text-muted: #7e9cb6;
  --accent: #00a8ff;
  --border: rgba(0, 168, 255, 0.16);
}

body.theme-etoile {
  --bg: #07090f;
  --hero-bg: #090d16;
  --bg-alt: #0e1422;
  --text: #f3f5f8;
  --text-muted: #8591a6;
  --accent: #ffea00;
  --hero-title-color: #ffea00;
  --border: rgba(255, 234, 0, 0.2);
}

body.theme-wonderwhy {
  --bg: #040817;
  --hero-bg: #060b1e;
  --bg-alt: #0a112c;
  --text: #ffffff;
  --text-muted: #8c9dc3;
  --accent: #00f5d4;
  --hero-title-color: #ffffff;
  --border: rgba(0, 245, 212, 0.18);
}

body.theme-herbatint {
  --bg: #071912;
  --hero-bg: #0b2b20;
  --bg-alt: #0e3326;
  --text: #f4faf6;
  --text-muted: #88aba0;
  --accent: #52b788;
  --hero-title-color: #ffffff;
  --border: rgba(82, 183, 136, 0.18);
}

body.theme-aircampus {
  --bg: #061329;
  --hero-bg: #07b3e5;
  --bg-alt: #0a1f42;
  --text: #f4f8fc;
  --text-muted: #8ca5c2;
  --accent: #07b3e5;
  --hero-title-color: #ffffff;
  --border: rgba(7, 179, 229, 0.22);
}

body.theme-clubzero {
  --bg: #270050;
  --hero-bg: #270050;
  --bg-alt: #36006e;
  --text: #f9f5ff;
  --text-muted: #c2addc;
  --accent: #ca8aff;
  --hero-title-color: #ffffff;
  --border: rgba(202, 138, 255, 0.24);
}

body {
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  width: 100% !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}

main {
  width: 100% !important;
  max-width: 100% !important;
  flex-grow: 1;
  display: block;
  background-color: var(--bg);
}

/* Logo & Navigation */
.logo-link {
  font-size: 20px;
  font-weight: 100;
  font-family: var(--font-title);
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0;
}

.nav {
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav.is-hidden {
  transform: translateY(-100%);
}

.nav-menu-btn {
  position: relative;
  z-index: 100000;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Page Transition */
.page-transition {
  position: fixed;
  inset: 0;
  background-color: var(--bg) !important;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  overflow: hidden;
}

/* Noise Overlay */
.noise-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url('images/noise.png');
  background-repeat: repeat;
  background-size: 140px 140px;
  animation: grain-animation 0.5s steps(6) infinite;
  z-index: 100001;
  pointer-events: none;
  opacity: 0.35;
  will-change: transform;
}

@keyframes grain-animation {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(-5%, -10%); }
  33% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); }
  67% { transform: translate(9%, 4%); }
  83% { transform: translate(-1%, 7%); }
}

#cursor {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 200000 !important;
}

#cursorFollower {
  z-index: 199999 !important;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  mix-blend-mode: normal;
  transition: opacity 0.3s ease;
}

#cursor, #cursorFollower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
  --tx: -100px;
  --ty: -100px;
  --scale: 1;
  transform: translate3d(var(--tx), var(--ty), 0) translate(-50%, -50%) scale(var(--scale));
  opacity: 0;
}

body.cursor-hover #cursor,
body.is-hovering #cursor {
  width: 60px;
  height: 60px;
  background: #ffffff !important;
  mix-blend-mode: difference !important;
}

body.cursor-hover #cursorFollower,
body.is-hovering #cursorFollower {
  opacity: 0 !important;
}

/* When mobile menu curtain is open: ensure bright pointer visibility */
body.menu-open #cursor {
  mix-blend-mode: normal !important;
  background: var(--accent, #0844f5) !important;
  box-shadow: 0 0 14px rgba(8, 68, 245, 0.9);
}

body.menu-open #cursorFollower {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 768px), (pointer: coarse) {
  html, body, a, button, input, select, textarea, [role="button"], .cursor-hover {
    cursor: auto !important;
  }
  #cursor, #cursorFollower {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

body.page-about .page-transition,
.page-about .page-transition {
  background-color: #0c0c0e !important;
}

@media (max-width: 768px) {
  .footer-massive-logo-wrap canvas {
    display: none !important;
  }
  .footer-massive-logo {
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .footer-email-big {
    white-space: nowrap !important;
    word-break: normal !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: clamp(0.95em, 5.2vw, 1.75em) !important;
  }
}

/* ─── Hero Showcase Section ─── */
.project-hero {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: var(--hero-bg, var(--bg));
  padding: 0 !important;
  margin: 0 !important;
}

/* 1. Huge Central Project Title (Visible in center BEHIND image card, covered as image expands) */
.project-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1500px;
  text-align: center;
  font-size: max(4.5rem, min(9.5vw, 13rem));
  font-family: var(--font-title);
  font-weight: 100;
  text-transform: uppercase;
  line-height: var(--line-height, 85%);
  letter-spacing: 0;
  color: var(--hero-title-color, #ffffff);
  z-index: 4 !important; /* Behind image card (z-index: 10) so expanding image covers it */
  pointer-events: none;
  user-select: none;
  margin: 0;
  padding: 0 2vw;
  box-sizing: border-box;
  white-space: normal;
}

@media screen and (max-width: 959.8px) {
  .project-hero__title {
    font-size: clamp(2.4rem, 8.5vw, 5.5rem);
    width: 94vw;
    padding: 0 2vw;
  }
}

/* SplitText Character Animation  */
.project-hero__title.st,
.st {
  line-height: var(--line-height, 80%);
  visibility: hidden;
}

.st .word {
  display: inline-block;
  white-space: nowrap;
  margin: 0 0.15em;
  vertical-align: top;
}

.st .char-mask {
  display: inline-block;
  overflow: hidden;
  clip-path: inset(-20% -20% -20% -20%);
  vertical-align: top;
  line-height: 1;
}

.st .char {
  display: inline-block;
  position: relative;
  transform: translate3d(0, 115%, 0);
  will-change: transform;
}

.st.no-t {
  visibility: visible;
}
.st.no-t .char {
  transition: none;
}

.st.is-inview,
.project-hero.is-inview .st {
  visibility: visible !important;
}

.st.is-inview .char,
.project-hero.is-inview .st .char {
  transform: translateZ(0) !important;
  transition: transform var(--speed, 1.25s) cubic-bezier(.19, 1, .22, 1) calc(var(--index, 0) * var(--stagger, 0.035s) + var(--delay, 0s)) !important;
}

/* 2. Hero Wrap & Media  */
.project-hero__wrap {
  width: 100vw !important;
  height: 100svh !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
}

.project-hero__image {
  clip-path: inset(45% 45% 45% 45%);
  -webkit-clip-path: inset(45% 45% 45% 45%);
  height: 100svh !important;
  width: 100vw !important;
  object-fit: cover !important;
  position: relative !important;
  transform: translate3d(0, 25%, 0) rotate(-14deg);
  opacity: 0;
  transition: opacity 0.35s ease 0.75s,
              transform 1s cubic-bezier(.19, 1, .22, 1) .75s,
              clip-path 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
  -webkit-transition: opacity 0.35s ease 0.75s,
                      transform 1s cubic-bezier(.19, 1, .22, 1) .75s,
                      -webkit-clip-path 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
  will-change: clip-path, transform, opacity;
  z-index: 10 !important;
}

@media screen and (max-width: 959.8px) {
  .project-hero__image {
    transform: translate3d(0, 80%, 0) rotate(-14deg);
    clip-path: inset(40% 12% 40% 12%);
    -webkit-clip-path: inset(40% 12% 40% 12%);
  }
}

@media screen and (orientation: portrait) {
  .project-hero__image {
    clip-path: inset(40% 12% 40% 12%);
    -webkit-clip-path: inset(40% 12% 40% 12%);
  }
}

/* When .is-inview is added: thumbnail arrives at 0.75s, then unclips and scales at 1.3s */
.project-hero.is-inview .project-hero__image {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
  transform: translateZ(0) rotate(0deg) !important;
}

/* Inner media starts scaled at 0.4 and un-scales to 1.0 with the exact same curve and delay */
.picture__wrapper {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.picture {
  width: 100%;
  height: 100%;
  display: block;
}

.picture__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.project-hero__image .picture,
.project-hero__image img,
.project-hero__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(.4, .4, 1);
  will-change: transform;
}

.project-hero.is-inview .project-hero__image .picture,
.project-hero.is-inview .project-hero__image img,
.project-hero.is-inview .project-hero__image video {
  transform: scale(1) !important;
  transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
  -webkit-transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
}

/* Vimeo / Iframes in Hero */
.project-hero__image iframe.hero-vimeo-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100svh;
  transform: translate(-50%, -50%) scale3d(.4, .4, 1);
  -webkit-transform: translate(-50%, -50%) scale3d(.4, .4, 1);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  border: none;
  pointer-events: none;
  will-change: transform;
}

.project-hero.is-inview .project-hero__image iframe.hero-vimeo-iframe {
  transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
  -webkit-transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
}

/* Post-intro cleanup state: zero transform, zero clip-path for maximal performance */
.project-hero.is-expanded .project-hero__image {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  will-change: auto !important;
}

.project-hero.is-expanded .project-hero__image .picture,
.project-hero.is-expanded .project-hero__image img,
.project-hero.is-expanded .project-hero__image video {
  transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  will-change: auto !important;
}

.project-hero.is-expanded .project-hero__image iframe.hero-vimeo-iframe {
  transform: translate(-50%, -50%) scale(1) !important;
  transition: none !important;
  -webkit-transition: none !important;
  will-change: auto !important;
}

/* ─── Project Narrative & Specifications ─── */
.project-intro {
  width: 100% !important;
  max-width: 100% !important;
  background-color: var(--bg);
  padding: 120px 5vw 120px 5vw;
  box-sizing: border-box;
}

.project-intro__container {
  max-width: 1400px;
  margin: 0 auto 70px auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 50px;
  align-items: start;
}

@media screen and (max-width: 900px) {
  .project-intro__container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.project-intro__title {
  font-size: clamp(34px, 4.8vw, 72px);
  font-family: var(--font-title);
  font-weight: 100;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
}

.project-intro__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-intro__tagline {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: 0;
}

.project-intro__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.project-intro__year {
  font-size: 16px;
  color: var(--text-muted);
  font-family: var(--font-body);
}

.project-collaboration-note {
  display: block;
  margin-top: 8px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.project-intro__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.project-intro__tag {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 18px;
  color: var(--accent);
}

.project-intro__details {
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

.project-detail__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  gap: 40px;
}

@media screen and (max-width: 900px) {
  .project-detail__list {
    grid-template-columns: 1fr 1fr;
  }
  .project-detail__editorial {
    grid-column: span 2;
  }
}

.project-detail__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-detail__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: 100;
}

.project-detail__item p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ─── GALLERY ENGINE (Standard 40px Rhythm across all blocks) ──── */
.project-gallery {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 40px !important;
  box-sizing: border-box;
}

/* 1. Full Bleed Row (100% Width Alone) */
.gallery-row.full-width {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* 1.1 Fullscreen Row (100vw x 100vh Viewport Takeover & Edge-to-Edge Video Cover) */
.gallery-row.fullscreen,
.gallery-row.fullscreen-row {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  display: block;
  background: #000000;
}

.gallery-row.fullscreen .gallery-item,
.gallery-row.fullscreen-row .gallery-item {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden;
  position: relative;
}

.gallery-row.fullscreen .vimeo-video-wrap,
.gallery-row.fullscreen-row .vimeo-video-wrap,
.fullscreen-video-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  background: #000000;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.gallery-row.fullscreen .vimeo-video-wrap iframe,
.gallery-row.fullscreen-row .vimeo-video-wrap iframe,
.fullscreen-video-wrap iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  /* Mathematical Cover Formula: perfectly covers the viewport with 0 black bars on any screen */
  width: max(100vw, calc(100vh * 240 / 350)) !important;
  height: max(100vh, calc(100vw * 350 / 240)) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  pointer-events: auto !important;
}

/* 2. Framed Inset Row (Alone in container) */
.gallery-row.inset-container {
  width: 90vw !important;
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block;
}

/* 3. Near Full-Width Row (40px from page edges to align with logo & nav) */
.gallery-row.near-full {
  width: calc(100% - 80px) !important;
  max-width: none !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  padding: 0 !important;
  display: block;
  box-sizing: border-box;
}

.gallery-item {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.gallery-item video,
.gallery-item img,
.interactive-video-wrap video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  will-change: transform;
  transform-origin: center center;
}

/* ─── MSC CHRISTMAS FEATURE VIDEO PLAYER (Vimeo Embed Style) ─── */
.vimeo-embed-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  user-select: none;
}

.vimeo-embed-player video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  cursor: pointer;
}

/* Vimeo Center Play Button (Visible in STOP / PAUSE) */
.vimeo-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 48px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.vimeo-center-play svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
  margin-left: 2px;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.vimeo-center-play:hover {
  background: #00adef;
  border-color: #00adef;
  transform: translate(-50%, -50%) scale(1.08);
}

.vimeo-center-play:hover svg {
  fill: #ffffff;
}

.vimeo-embed-player.is-playing .vimeo-center-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Vimeo Bottom Controls Bar: ONLY Play, Timeline, Audio */
.vimeo-controls-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
  z-index: 12;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.vimeo-embed-player.is-playing.is-idle .vimeo-controls-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Vimeo Action Buttons (Pure Icons) */
.vimeo-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.vimeo-btn:hover {
  color: #00adef;
  transform: scale(1.12);
}

.vimeo-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Play/Pause icon toggle */
.vimeo-btn--play .vimeo-icon--pause {
  display: none;
}
.vimeo-embed-player.is-playing .vimeo-btn--play .vimeo-icon--play {
  display: none;
}
.vimeo-embed-player.is-playing .vimeo-btn--play .vimeo-icon--pause {
  display: block;
}

/* Audio icon toggle */
.vimeo-btn--audio .vimeo-icon--sound-on {
  display: none;
}
.vimeo-btn--audio .vimeo-icon--sound-off {
  display: block;
}
.vimeo-embed-player.is-unmuted .vimeo-btn--audio .vimeo-icon--sound-on {
  display: block;
}
.vimeo-embed-player.is-unmuted .vimeo-btn--audio .vimeo-icon--sound-off {
  display: none;
}

/* Vimeo Scrubber Timeline */
.vimeo-timeline-wrap {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.vimeo-timeline-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  transition: height 0.15s ease;
}

.vimeo-timeline-wrap:hover .vimeo-timeline-track,
.vimeo-timeline-wrap.is-dragging .vimeo-timeline-track {
  height: 6px;
}

.vimeo-timeline-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

.vimeo-timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #00adef;
  border-radius: 2px;
  transition: width 0.05s linear;
}

.vimeo-scrubber-handle {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.vimeo-timeline-wrap:hover .vimeo-scrubber-handle,
.vimeo-timeline-wrap.is-dragging .vimeo-scrubber-handle {
  transform: translateY(-50%) scale(1);
}

/* ─── WONDER WHY 3-VIDEO SHOWCASE ─── */
.ww-videos-block {
  width: 100%;
  padding: 30px 0 50px 0;
  box-sizing: border-box;
}

.ww-videos-block--full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 90px 4vw 110px;
  background: radial-gradient(circle at center 20%, rgba(0, 245, 212, 0.05) 0%, rgba(4, 8, 23, 0.96) 65%, #02050f 100%);
  border-top: 1px solid rgba(0, 245, 212, 0.16);
  border-bottom: 1px solid rgba(0, 245, 212, 0.16);
  box-sizing: border-box;
}

.ww-videos-header {
  text-align: left;
  margin-bottom: 24px;
}

.ww-videos-header--center {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 48px auto;
}

.ww-videos-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00f5d4;
  margin-bottom: 8px;
}

.ww-videos-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 100;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0;
}

.ww-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
}

.ww-videos-block--full .ww-videos-grid {
  max-width: 1540px;
  margin: 0 auto;
  gap: 36px;
}

/* ─── HERBATINT SHOWCASE STYLES ─── */
.reels-showcase-section--herbatint {
  background-color: #071912 !important;
}

.reels-showcase-section--herbatint .reels-subtitle {
  color: #52b788 !important;
}

.reels-showcase-section--herbatint .reel-card:hover .reel-video-wrap {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8), 0 0 0 1.5px rgba(82, 183, 136, 0.6) !important;
}

/* Herbatint Responsive Feature Film Player */
.herbatint-feature-player {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-color: #000000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.herbatint-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  cursor: pointer;
}

.herbatint-video--mobile {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .herbatint-feature-player {
    aspect-ratio: 9 / 16;
    max-height: 80vh;
  }
  .herbatint-video--desktop {
    display: none !important;
  }
  .herbatint-video--mobile {
    display: block !important;
  }
}

/* Herbatint Editorial Tavole in Motion */
.herbatint-tavole-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3840 / 2382;
  background-color: #071912;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden;
  box-shadow: none !important;
}

.herbatint-tavole-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  border: none !important;
  cursor: pointer;
}

.ww-video-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ww-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #030610;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.ww-video-card:hover .ww-video-wrap {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.7), 0 0 0 1.5px rgba(0, 245, 212, 0.6);
}

.ww-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ww-video-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  pointer-events: auto;
}

.ww-sound-btn {
  background: rgba(4, 10, 22, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s, border-color 0.25s, color 0.25s;
}

.ww-sound-btn:hover {
  background: #00f5d4;
  color: #030610;
  border-color: #00f5d4;
  transform: scale(1.1);
}

.ww-sound-btn svg {
  width: 18px;
  height: 18px;
}

.ww-sound-btn .ww-icon-unmuted {
  display: none;
}
.ww-video-card.is-unmuted .ww-sound-btn .ww-icon-unmuted {
  display: block;
}
.ww-video-card.is-unmuted .ww-sound-btn .ww-icon-muted {
  display: none;
}
.ww-video-card.is-unmuted .ww-sound-btn {
  background: #00f5d4;
  color: #030610;
  border-color: #00f5d4;
}

.ww-video-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 100;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  pointer-events: none;
  z-index: 5;
}

@media screen and (max-width: 860px) {
  .ww-videos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ─── INTERACTIVE VIDEO CONTROLS (Video 03) ──────────────── */
.interactive-video-wrap {
  position: relative;
  width: 100% !important;
  overflow: hidden;
}

.sound-toggle-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sound-toggle-btn:hover {
  background: #0844f5;
  color: #000000;
  border-color: #0844f5;
  transform: scale(1.05);
}

.video-status-badge {
  display: none !important;
}

.video-controls-group {
  position: absolute;
  bottom: 36px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.video-control-btn {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-control-btn:hover {
  background: #0844f5;
  color: #000000;
  border-color: #0844f5;
  transform: translateY(-2px) scale(1.04);
}

body.theme-msc .video-control-btn:hover,
body.theme-msc .sound-toggle-btn:hover {
  background: #00e5ff !important;
  color: #071524 !important;
  border-color: #00e5ff !important;
}

body.theme-dos .video-control-btn:hover,
body.theme-dos .sound-toggle-btn:hover {
  background: #cbd5e1 !important;
  color: #09090b !important;
  border-color: #cbd5e1 !important;
}

body.theme-fapav .video-control-btn:hover,
body.theme-fapav .sound-toggle-btn:hover {
  background: #e50914 !important;
  color: #ffffff !important;
  border-color: #e50914 !important;
}

.video-play-center-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  pointer-events: none;
  opacity: 0;
  z-index: 9;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-play-center-indicator.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ─── SQUARE TRIMMED LOGO ANIMATION (No dark letterbox background) ─── */
.gallery-row.square-row {
  width: min(calc(100% - 80px), 860px) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box;
}

.gallery-row.square-row .gallery-item {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  overflow: hidden !important;
  position: relative !important;
}

.interactive-video-wrap.logo-animation-wrap {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
}

.interactive-video-wrap.logo-animation-wrap video {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  transform-origin: center center;
}

/* 4. Multi-Column Rows (2 columns & 3 columns side-by-side: 40px horizontal gap) */
.gallery-row.two-columns,
.gallery-row.two-col,
.gallery-row.two-cols-equal {
  width: calc(100% - 80px) !important;
  max-width: none !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  box-sizing: border-box;
}

.gallery-row.three-columns {
  width: calc(100% - 80px) !important;
  max-width: none !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 40px !important;
  box-sizing: border-box;
}

.gallery-row.three-columns.clubzero-three-posts {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
}

.gallery-row.three-columns.clubzero-three-posts .gallery-item {
  aspect-ratio: auto !important;
  background: transparent !important;
  border-radius: 4px !important;
  overflow: visible !important;
  position: relative !important;
}

.gallery-row.three-columns.clubzero-three-posts .gallery-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 38px -6px rgba(0, 0, 0, 0.5), 0 6px 16px -2px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
}

.gallery-row.two-columns.clubzero-manifesto-posts .gallery-item {
  aspect-ratio: auto !important;
  background: transparent !important;
  border-radius: 4px !important;
  overflow: visible !important;
  position: relative !important;
}

.gallery-row.two-columns.clubzero-manifesto-posts .gallery-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 38px -6px rgba(0, 0, 0, 0.5), 0 6px 16px -2px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
}

.gallery-item.transparent-bg,
.gallery-row.transparent-bg .gallery-item,
.clubzero-no-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.gallery-row.full-width.clubzero-mobile-row {
  padding-top: 50px !important;
  overflow: visible !important;
}

.gallery-row.full-width.clubzero-mobile-row .gallery-item {
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.gallery-row.full-width.clubzero-mobile-row .gallery-item img {
  transform-origin: center bottom !important;
}


/* 5. Vimeo Responsive Video Wrappers */
.vimeo-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
  border-radius: 0;
}

.vimeo-video-wrap.poster-aspect {
  aspect-ratio: 1.22 / 1;
}

.vimeo-video-wrap.aspect-09 {
  aspect-ratio: 374 / 240 !important;
}

.vimeo-video-wrap.aspect-10 {
  aspect-ratio: 360 / 240 !important;
}

.vimeo-video-wrap.aspect-14 {
  aspect-ratio: 368 / 240 !important;
}

.vimeo-video-wrap.aspect-15 {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 240 / 350 !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000;
}

.vimeo-video-wrap.mobile-aspect {
  width: min(100%, 380px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.vimeo-video-wrap.no-pillarbox iframe {
  width: 101% !important;
  height: 101% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.02) !important;
}

.vimeo-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none; /* Let clicks pass through or controlled via wrap */
}

.interactive-video-wrap .vimeo-video-wrap iframe {
  pointer-events: none;
}

.vimeo-video-wrap.standard-player iframe {
  pointer-events: auto !important;
  cursor: pointer;
}

.hero-vimeo-iframe,
.project-hero__image iframe.hero-vimeo-iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 56.25vw !important; /* 16:9 aspect */
  min-height: 100svh !important;
  min-width: 177.78svh !important; /* 16:9 cover on tall viewports */
  transform: translate(-50%, -50%) scale3d(0.4, 0.4, 1) !important;
  -webkit-transform: translate(-50%, -50%) scale3d(0.4, 0.4, 1) !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  pointer-events: none !important;
  border: none !important;
  display: block !important;
  opacity: 1 !important;
  will-change: transform;
}

.project-hero.is-inview .project-hero__image iframe.hero-vimeo-iframe,
.project-hero.is-inview .hero-vimeo-iframe {
  transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
  -webkit-transition: transform 1.35s cubic-bezier(.86, 0, .07, 1) 1.3s !important;
}

.project-hero.is-expanded .project-hero__image iframe.hero-vimeo-iframe,
.project-hero.is-expanded .hero-vimeo-iframe {
  transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  transition: none !important;
  -webkit-transition: none !important;
  will-change: auto !important;
}

@media (min-aspect-ratio: 16/9) {
  .hero-vimeo-iframe,
  .project-hero__image iframe.hero-vimeo-iframe {
    width: 100vw !important;
    height: 56.25vw !important;
  }
}

@media (max-aspect-ratio: 16/9) {
  .hero-vimeo-iframe,
  .project-hero__image iframe.hero-vimeo-iframe {
    width: 177.78svh !important;
    height: 100svh !important;
  }
}

/* ─── MOBILE HERO SCALING (Proportional & Responsive) ─── */
@media (max-width: 768px) {
  .project-hero {
    height: 56svh !important;
    min-height: 320px !important;
    max-height: 520px !important;
  }

  .project-hero__wrap,
  .project-hero__image {
    height: 100% !important;
    min-height: 320px !important;
    max-height: 520px !important;
  }

  .project-hero__title {
    font-size: clamp(2rem, 11vw, 3.6rem) !important;
  }

  .hero-vimeo-iframe,
  .project-hero__image iframe.hero-vimeo-iframe {
    width: 100vw !important;
    height: 56.25vw !important;
    min-height: 100% !important;
    min-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .gallery-row.square-row {
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .video-controls-group {
    bottom: 20px;
    right: 20px;
    gap: 8px;
  }
  .video-control-btn {
    padding: 9px 16px;
    font-size: 10px;
  }
  .video-status-badge {
    top: 20px;
    left: 20px;
    font-size: 9px;
    padding: 6px 14px;
  }
}

/* ─── NEXT PROJECT (Hierarchical & Styled to Match Home) ─── */
.next-project-section {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  padding: 100px 40px 120px;
  background-color: var(--bg, #0a0a0a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
  isolation: isolate;
}

.next-project-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  padding: 40px 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: #ffffff;
  position: relative;
  z-index: 10;
  mix-blend-mode: difference;
  overflow: visible;
  box-sizing: border-box;
  gap: 40px;
}

.next-project-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0844f5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.next-project-link:hover::after {
  transform: scaleX(1);
}

/* Left-aligned Content Stack */
.next-project-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  max-width: 800px;
  position: relative;
  z-index: 10;
}

/* Eyebrow: Matches Home Section Labels */
.next-project-section .section-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0844f5;
  display: inline-block;
  margin-bottom: 4px;
  transition: color 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.next-project-link:hover .section-label {
  transform: translateX(6px);
}

/* Title: Matches Home Selected Works & Services Typography */
.next-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 4.5vw, 68px);
  font-weight: 100;
  margin: 0;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  color: #f0ede6;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.next-project-link:hover .next-title {
  color: #0844f5;
  transform: translateX(8px);
}

/* Subtitle: Matches Home Body / Description Typography */
.next-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 4px 0 0 0;
  max-width: 580px;
  letter-spacing: 0;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.next-project-link:hover .next-subtitle {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(8px);
}

/* Tags: Matches Home .service-tag Styling */
.next-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.next-project-link:hover .next-tags {
  transform: translateX(8px);
}

.next-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 100;
  color: rgba(240, 237, 230, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.next-project-link:hover .next-tag {
  border-color: rgba(8, 68, 245, 0.5);
  background: rgba(8, 68, 245, 0.12);
  color: #ffffff;
}

/* Right-aligned Circular Arrow Button: Matches Home Aesthetic */
.next-arrow {
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  position: relative;
  z-index: 10;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  will-change: transform, opacity;
}

.next-arrow svg {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.next-arrow svg path {
  transition: stroke 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.next-project-link:hover .next-arrow {
  transform: rotate(45deg) scale(1.06);
  background: #0844f5;
  border-color: #0844f5;
  color: #000000;
  box-shadow: 0 10px 30px rgba(8, 68, 245, 0.3);
}

.next-project-link:hover .next-arrow svg path {
  stroke: #000000;
}

/* ─── AWWWARDS NEXT PROJECT CURSOR FOLLOWER PREVIEW (CLEAN & SHARP) ─── */
.next-project-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(320px, 26vw, 440px);
  aspect-ratio: 16 / 10;
  border-radius: 0 !important;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65) rotate(0deg);
  transform-origin: center center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15);
  background-color: #000000;
  will-change: transform, opacity;
  display: block;
}

.next-project-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transform: scale(1.08);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (hover: none), (max-width: 768px) {
  .next-project-preview {
    display: none !important;
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 992px) {
  .project-info-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .gallery-row.two-cols-asym,
  .gallery-row.two-cols-equal {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .gallery-row.two-cols-asym .gallery-col:nth-child(2) {
    margin-top: 0;
  }

  .project-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .project-info-section,
  .next-project-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .gallery-row.near-full {
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .next-project-section {
    padding: 30px 20px 60px !important;
  }
  .next-arrow {
    width: 56px;
    height: 56px;
  }

  .gallery-row.inset-container,
  .gallery-row.two-cols-asym,
  .gallery-row.two-cols-equal {
    width: calc(100vw - 40px) !important;
  }

  .gallery-row.two-columns,
  .gallery-row.two-col,
  .gallery-row.three-columns {
    width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .project-specs {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─── VERTICAL REELS SHOWCASE SECTION ─── */
.reels-showcase-section {
  position: relative;
  width: 100%;
  margin: 0 0 40px 0 !important;
  padding: 70px 40px 65px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #021226;
}

.reels-bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.reels-bg-img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  filter: none;
  opacity: 1;
}

.reels-bg-overlay {
  display: none;
}

.reels-container {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.reels-header {
  text-align: center;
  margin-bottom: 38px;
}

.reels-subtitle {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0844f5;
  margin-bottom: 8px;
}

.reels-title {
  font-family: var(--font-title);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 100;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

.reel-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.reel-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #02070e;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), box-shadow 0.45s ease;
}

.reel-card:hover .reel-video-wrap {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 0 0 1.5px rgba(8, 68, 245, 0.5);
}

.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
}

.reel-controls-overlay {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 7;
  pointer-events: auto;
}

.reel-control-btn {
  background: rgba(4, 12, 22, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s, border-color 0.25s, color 0.25s;
  user-select: none;
}

.reel-control-btn:hover {
  background: rgba(8, 68, 245, 0.25);
  border-color: #0844f5;
  color: #0844f5;
  transform: scale(1.05);
}

.reel-control-btn.is-active {
  background: #0844f5;
  border-color: #0844f5;
  color: #060e15;
}

.reel-play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(4, 12, 22, 0.75);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(.16, 1, .3, 1), transform 0.3s cubic-bezier(.16, 1, .3, 1);
  z-index: 4;
}

.reel-card.is-paused .reel-play-indicator {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.reel-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 5;
  overflow: hidden;
}

.reel-progress-fill {
  width: 0%;
  height: 100%;
  background: #0844f5;
  transition: width 0.1s linear;
}

.reel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 0 8px;
}

.reel-number {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 100;
  color: #0844f5;
  letter-spacing: 0.08em;
}

.reel-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 100;
  color: #ffffff;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1024px) {
  .reels-grid {
    gap: 20px;
  }
  .reels-showcase-section {
    padding: 80px 4vw 60px;
  }
}

@media (max-width: 768px) {
  .reels-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 40px;
  }
  .reels-showcase-section {
    padding: 60px 20px 50px;
  }
}

/* ─── FOOTER (PURE BLACK LUXURY) ─── */
.footer-premium,
body[class*="theme-"] .footer-premium {
  position: relative;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 140px 0 60px !important;
  overflow: hidden;
}

.footer-premium::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url('images/noise.png');
  background-repeat: repeat;
  background-size: 130px 130px;
  animation: grain-animation 0.35s steps(6) infinite;
  opacity: 0.18; /* Tactile concrete paper grain */
  pointer-events: none;
  z-index: 1;
}

.footer-premium > * {
  position: relative;
  z-index: 2;
}

.footer-premium .footer-label,
body[class*="theme-"] .footer-premium .footer-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-premium .footer-email-big,
body[class*="theme-"] .footer-premium .footer-email-big {
  position: relative;
  display: inline-block;
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.footer-premium .footer-email-big::after,
body[class*="theme-"] .footer-premium .footer-email-big::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0844f5 !important;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.footer-premium .footer-email-big:hover,
body[class*="theme-"] .footer-premium .footer-email-big:hover {
  color: #0844f5 !important;
  opacity: 1 !important;
}

.footer-premium .footer-email-big:hover::after,
body[class*="theme-"] .footer-premium .footer-email-big:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer-premium .footer-link,
body[class*="theme-"] .footer-premium .footer-link {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-premium .footer-link:hover,
body[class*="theme-"] .footer-premium .footer-link:hover {
  color: #0844f5 !important;
  transform: translateX(6px);
}

.footer-massive-logo-wrap {
  width: 100%;
  margin: 70px 0 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.45));
}

.footer-premium .footer-massive-logo {
  filter: none;
  opacity: 0.12;
  transition: opacity 0.4s ease;
}

.footer-premium .footer-bottom,
body[class*="theme-"] .footer-premium .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-premium .footer-bottom span,
.footer-premium .back-to-top-btn,
body[class*="theme-"] .footer-premium .footer-bottom span,
body[class*="theme-"] .footer-premium .back-to-top-btn {
  color: #ffffff !important;
}

.footer-premium .back-to-top-btn:hover,
body[class*="theme-"] .footer-premium .back-to-top-btn:hover {
  color: #0844f5 !important;
}

@media (max-width: 768px) {
  .footer-premium .footer-top {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-premium .footer-contact {
    min-width: unset;
    width: 100%;
    text-align: left !important;
  }

  .footer-premium .footer-label {
    text-align: left !important;
  }

  .footer-premium .footer-email-big {
    text-align: left !important;
    display: block;
    word-break: break-word;
  }

  .footer-premium .footer-groups {
    gap: 32px;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-premium .footer-group {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-premium .footer-links-wrap {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-premium .footer-bottom,
  body[class*="theme-"] .footer-premium .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .footer-premium .footer-bottom-left,
  .footer-premium .footer-bottom-right,
  body[class*="theme-"] .footer-premium .footer-bottom-left,
  body[class*="theme-"] .footer-premium .footer-bottom-right {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100%;
  }

  .footer-premium .footer-bottom span,
  .footer-premium .footer-bottom a,
  .footer-premium .back-to-top-btn,
  body[class*="theme-"] .footer-premium .footer-bottom span,
  body[class*="theme-"] .footer-premium .footer-bottom a,
  body[class*="theme-"] .footer-premium .back-to-top-btn {
    text-align: left !important;
    align-self: flex-start !important;
  }
}

/* ─── MSC POSTS INFINITY LOOP SHOWCASE (Full Width Seamless Marquee with bg-video.jpg) ─── */
.msc-posts-section {
  position: relative;
  width: 100%;
  margin: 0 0 40px 0 !important;
  padding: 65px 0 55px 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #021226;
}

.msc-posts-bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.msc-posts-bg-img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  filter: none;
  opacity: 1;
}

.msc-posts-bg-overlay {
  display: none;
}

.msc-posts-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.msc-posts-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 5vw;
}

.msc-posts-subtitle {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff; /* MSC Cyan */
  margin-bottom: 8px;
}

.msc-posts-title {
  font-family: var(--font-title);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 100;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
}

.msc-posts-marquee {
  width: 100vw;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  mask-image: none;
  -webkit-mask-image: none;
  /* Generous vertical clearance so floating drop shadows never get cut off */
  padding: 55px 0 75px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.msc-posts-marquee.is-dragging {
  cursor: grabbing;
}

.msc-posts-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: none;
}

.msc-posts-group {
  display: flex;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}

.msc-post-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(250px, 19.5vw, 300px);
  aspect-ratio: 789 / 1210;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  border: none !important;
  outline: none !important;
  transform-origin: center center;
  will-change: transform;
  transform: translateZ(0);
  opacity: 1; /* Pure 100% opacity on all posts across the entire screen */
  cursor: pointer;
  /* Deep, natural drop shadow */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.msc-post-card.is-center {
  /* Rich, deep centered shadow without cyan border or colored aura */
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46), 0 8px 20px rgba(0, 0, 0, 0.24);
  border: none !important;
  outline: none !important;
}

.msc-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  pointer-events: none;
}

.msc-posts-active-info {
  display: none !important;
}

.msc-active-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff;
}

.msc-active-dot-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.msc-active-title {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.msc-posts-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
  position: relative;
  z-index: 10;
}

.msc-posts-nav {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              color 0.35s ease;
  padding: 0;
}

.msc-posts-nav:hover {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00e5ff;
  color: #00e5ff;
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
}

.msc-posts-nav:active {
  transform: scale(0.93);
}

.msc-posts-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.msc-posts-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.msc-posts-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.msc-posts-dot.is-active {
  width: 34px;
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.65);
}

@media (max-width: 768px) {
  .msc-posts-section {
    padding: 60px 0 80px 0;
  }
  .msc-posts-header {
    margin-bottom: 30px;
  }
  .msc-posts-marquee {
    padding: 45px 0 65px 0;
  }
  .msc-post-card {
    width: 230px;
    border-radius: 26px;
  }
  .msc-post-img {
    border-radius: 26px;
  }
  .msc-posts-group {
    gap: 18px;
    padding-right: 18px;
  }
  .msc-posts-active-info {
    padding: 6px 18px;
    font-size: 12px;
  }
  .msc-active-title {
    font-size: 12px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .msc-posts-nav {
    width: 44px;
    height: 44px;
  }
}

/* ─── ACCESSIBILITY: REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}