/* Design System Tokens */
:root {
  --bg-color: #fff6e7;
  --bg-card: #fffdf7;
  --bg-header: rgba(255, 246, 231, 0.96);
  --accent-color: #e86652;
  --accent-color-rgb: 232, 102, 82;
  --accent-ink: #183d43;
  --accent-teal: #179da0;
  --accent-mango: #f2b84a;
  --text-main: #183d43;
  --text-muted: #5f7477;
  --border-color: rgba(24, 61, 67, 0.16);
  --border-hover: rgba(232, 102, 82, 0.55);
  --font-title: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --split-percent: 50%;
  --section-anchor-offset: 5.25rem;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-color);
}

a {
  text-decoration: none;
  color: inherit;
}

/* `hidden` must win over the display values set further down. */
[hidden] {
  display: none !important;
}

ul {
  list-style: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-center {
  text-align: center;
}

/* Common Section Styles */
section {
  padding: 7rem 0;
  border-bottom: 1px solid var(--border-color);
}

/* Keep hash navigation section headings below the fixed header. */
section[id] {
  scroll-margin-top: var(--section-anchor-offset);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  color: var(--text-main);
}

.section-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 650px;
  margin: -2rem auto 3.5rem auto;
  line-height: 1.6;
}

/* Button UI */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background-color: var(--accent-color);
  color: #000;
  border: 1px solid var(--accent-color);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Floating Navigation Header */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background-color: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;

  /* Hidden by default on start */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Shown when scrolled */
.main-header.scrolled {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.logo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--text-main);
}

.logo-accent {
  color: var(--accent-color);
}

.nav-menu ul {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-link {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition-smooth);
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-color);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after, .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-contact-nav {
  border: 1px solid var(--border-color);
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
}

.btn-contact-nav::after {
  display: none;
}

.btn-contact-nav:hover {
  border-color: var(--accent-color);
  background-color: rgba(var(--accent-color-rgb), 0.05);
}

/* Header Alignment Containers & Language Switcher */
.header-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

@media (max-width: 480px) {
  .header-left {
    gap: 1rem;
  }
}

.header-right {
  display: flex;
  align-items: center;
}

.lang-selector {
  display: flex;
  gap: 0.3rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}

.btn-lang {
  background: none;
  border: none;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.15rem 0;
  width: 28px;
  text-align: center;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.btn-lang:hover {
  color: var(--text-main);
}

.btn-lang.active {
  background-color: var(--accent-color);
  color: #000;
  font-weight: 600;
}

/* Mobile Navigation Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}

.menu-bar {
  width: 25px;
  height: 2px;
  background-color: var(--text-main);
  transition: var(--transition-smooth);
}

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(7, 8, 10, 0.4) 0%, rgba(7, 8, 10, 0.95) 90%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
  padding: 0 2rem;
}

.hero-title-container {
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--accent-color-rgb), 0.35);
  letter-spacing: 0.08em;
  position: relative;
  animation: textStrokeAnim 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes textStrokeAnim {
  0% {
    -webkit-text-stroke: 1.5px rgba(var(--accent-color-rgb), 0.15);
    letter-spacing: 0.15em;
  }
  100% {
    -webkit-text-stroke: 1.5px rgba(var(--accent-color-rgb), 1);
    color: rgba(255, 255, 255, 0.03);
    letter-spacing: 0.05em;
    text-shadow: 0 0 40px rgba(var(--accent-color-rgb), 0.15);
  }
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 3rem;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

/* Video Control Button */
.video-controls {
  position: absolute;
  bottom: 2rem;
  right: 3rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Loading spinner shown over the poster until the video is ready */
.video-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  /* Soft dark halo so the spinner and label keep contrast over any poster */
  background: radial-gradient(circle at center, rgba(7, 8, 10, 0.62) 0%, rgba(7, 8, 10, 0.32) 16%, rgba(7, 8, 10, 0) 34%);
}

.hero-section.video-ready .video-loader {
  opacity: 0;
  visibility: hidden;
}

.video-loader-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 246, 231, 0.28);
  border-top-color: #fff6e7;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55));
  animation: video-loader-spin 0.85s linear infinite;
}

.video-loader-text {
  color: #fff6e7;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

@keyframes video-loader-spin {
  to { transform: rotate(360deg); }
}

.btn-control {
  background: none;
  border: none;
  color: #fff6e7;
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.btn-control:hover {
  color: var(--accent-color);
  transform: translateY(-1px);
}

.control-icon {
  width: 20px;
  height: 20px;
}

/* Scroll Indicator Mouse */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.mouse-icon {
  width: 26px;
  height: 42px;
  border: 2px solid var(--text-muted);
  border-radius: 15px;
  display: block;
  position: relative;
  transition: var(--transition-smooth);
}

.mouse-icon:hover {
  border-color: var(--accent-color);
}

.wheel {
  width: 4px;
  height: 8px;
  background-color: var(--accent-color);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
  0% { top: 8px; opacity: 1; }
  100% { top: 22px; opacity: 0; }
}

/* Positioning Section */
.positioning-section {
  background: linear-gradient(180deg, var(--bg-color) 0%, #0c0e11 100%);
}

.positioning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.editorial-motto {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.editorial-text .lead-text {
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--text-main);
}

.editorial-text .body-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
}

/* AI Orchestration Banner */
.agent-orchestration-banner {
  margin-top: 5rem;
  padding: 3rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.banner-accent {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--accent-color);
  margin-bottom: 1.25rem;
}

.banner-quote {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .agent-orchestration-banner {
    margin-top: 3.5rem;
    padding: 2rem;
  }
}

/* Services Section */
.services-section {
  background-color: #0c0e11;
  padding: 5rem 0; /* Reduced vertical padding */
}

.services-grid {
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(255, 255, 255, 0.05);
}

.services-grid::-webkit-scrollbar {
  height: 6px;
}

.services-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.services-grid::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

.service-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1.5rem; /* Reduced padding */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 0 1px 1px rgba(var(--accent-color-rgb), 0.1);
}

.service-icon {
  color: var(--accent-color);
  margin-bottom: 1rem; /* Reduced margin */
  transition: var(--transition-smooth);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(var(--accent-color-rgb), 0.4));
}

.service-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1rem; /* Smaller font size */
  margin-bottom: 0.5rem;
}

.service-desc {
  font-size: 0.85rem; /* Smaller font size */
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 300;
}

/* Work Section Styling */
.work-section {
  background-color: var(--bg-color);
}

.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
  flex-wrap: wrap;
  gap: 2rem;
}

.section-header-flex .section-title {
  margin-bottom: 0;
}

/* Filter buttons */
.filter-controls {
  display: flex;
  gap: 0.75rem;
  background-color: rgba(18, 20, 24, 0.8);
  padding: 0.4rem;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}

.btn-filter {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-filter:hover {
  color: var(--text-main);
}

.btn-filter.active {
  background-color: var(--accent-color);
  color: #000;
  font-weight: 600;
}

/* Grid layout */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.work-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.work-item.hidden {
  display: none;
}

.work-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.work-img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #000;
}

.work-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-item:hover .work-img-container img {
  transform: scale(1.05);
}

.work-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-family: var(--font-title);
  font-weight: 500;
  border-radius: 4px;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge-client {
  background-color: rgba(0, 255, 102, 0.15);
  color: #00ff66;
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.badge-personal {
  background-color: rgba(255, 107, 53, 0.15);
  color: #ff6b35;
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.badge-ai {
  background-color: rgba(204, 255, 0, 0.15);
  color: var(--accent-color);
  border: 1px solid rgba(204, 255, 0, 0.3);
}

/* Hover overlay detail button */
.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 8, 10, 0.6);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: var(--transition-smooth);
}

.work-item:hover .work-overlay {
  opacity: 1;
}

.btn-work-explore {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  background-color: var(--text-main);
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  transform: translateY(15px);
  transition: var(--transition-smooth);
}

.work-item:hover .btn-work-explore {
  transform: translateY(0);
}

.btn-work-explore:hover {
  background-color: var(--accent-color);
}

.work-info {
  padding: 2.25rem;
}

.work-cat {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}

.work-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.work-summary {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.work-tags span {
  font-size: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

/* Before / After Slider Section Styles */
.before-after-section {
  background-color: #0c0e11;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.slider-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  user-select: none;
}

/* The source contains raw footage and final VFX side by side. It is decoded
   once, while the canvas reveals either half at the slider position. */
.vfx-comparison-source {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vfx-comparison-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Text tags inside slider */
.slider-label {
  position: absolute;
  top: 1.5rem;
  background-color: rgba(7, 8, 10, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--border-color);
  padding: 0.4rem 1rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--text-main);
  z-index: 12;
  pointer-events: none;
}

.label-before {
  left: 1.5rem;
  border-left: 2px solid #ff6b35;
}

.label-after {
  right: 1.5rem;
  border-right: 2px solid var(--accent-color);
}

/* Slider Handle Bar Line */
.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split-percent);
  width: 2px;
  background-color: var(--accent-color);
  z-index: 15;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.8);
}

.handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}

/* Range input styled transparently to cover image */
.slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  z-index: 20;
}

.vfx-expand-button {
  position: absolute;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  z-index: 25;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-main);
  background: rgba(255, 246, 231, 0.9);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0.4rem 1.25rem rgba(7, 8, 10, 0.2);
  transition: var(--transition-smooth);
}

.vfx-expand-button:hover,
.vfx-expand-button:focus-visible {
  color: var(--text-main);
  background: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
  transform: scale(1.08);
}

.vfx-play-button {
  position: absolute;
  right: 4.25rem;
  bottom: 1rem;
  z-index: 25;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text-main);
  background: rgba(255, 246, 231, 0.9);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0.4rem 1.25rem rgba(7, 8, 10, 0.2);
  transition: var(--transition-smooth);
}

.vfx-play-button:hover,
.vfx-play-button:focus-visible {
  color: var(--text-main);
  background: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
  transform: scale(1.08);
}

.vfx-play-button:disabled {
  cursor: wait;
  opacity: 0.48;
}

.vfx-play-button .vfx-pause-icon,
.vfx-play-button.is-playing .vfx-play-icon {
  display: none;
}

.vfx-play-button.is-playing .vfx-pause-icon {
  display: block;
}

.vfx-compare-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 18;
  padding: 0.55rem 0.85rem;
  color: #fff6e7;
  background: rgba(24, 61, 67, 0.9);
  border: 1px solid rgba(255, 246, 231, 0.32);
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.vfx-compare-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.vfx-comparison-modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 3vw, 3rem);
  background: transparent;
  border: 0;
  overflow: visible;
}

.vfx-comparison-modal::backdrop {
  background: rgba(7, 8, 10, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vfx-modal-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.vfx-comparison-modal .slider-wrapper {
  width: min(94vw, 1600px);
  max-width: none;
  margin: 0;
}

.vfx-comparison-modal .vfx-expand-button {
  display: none;
}

.vfx-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  color: #fff6e7;
  background: rgba(24, 61, 67, 0.88);
  border: 1px solid rgba(255, 246, 231, 0.32);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition-smooth);
}

.vfx-modal-close svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  stroke-linecap: round;
}

.vfx-modal-close:hover,
.vfx-modal-close:focus-visible {
  color: var(--text-main);
  background: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
  transform: rotate(90deg);
}

/* How We Work Section Styles */
.collab-section {
  --collab-cutout-color: #e9f6f3;
  position: relative;
  isolation: isolate;
  min-height: 54rem;
  overflow: hidden;
  padding: clamp(2.25rem, 3.5vw, 3.5rem) 0 clamp(2.5rem, 4vw, 3.75rem);
  background: #183d43;
}

.collab-section .container {
  position: relative;
  z-index: 2;
}

.collab-backdrops,
.collab-section-scrim {
  position: absolute;
  inset: 0;
}

.collab-backdrops {
  z-index: 0;
  overflow: hidden;
  background: #183d43;
}

.collab-backdrop {
  /* The bleed must outgrow the blur radius, otherwise blur() samples past the
     image edge, fades it to transparent inside the visible box and exposes the
     flat .collab-backdrops backing as a soft-edged rectangle mid-transition.
     A percentage bleed shrinks with the viewport while the blur stays in px,
     so both are derived from one variable instead. */
  --collab-backdrop-blur: 16px;
  --collab-backdrop-bleed: calc(var(--collab-backdrop-blur) * 3);
  position: absolute;
  inset: calc(var(--collab-backdrop-bleed) * -1);
  z-index: 0;
  width: calc(100% + var(--collab-backdrop-bleed) * 2);
  height: calc(100% + var(--collab-backdrop-bleed) * 2);
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  filter: blur(var(--collab-backdrop-blur)) saturate(0.88) brightness(0.9);
  transition: none;
}

.collab-backdrop.is-active,
.collab-backdrop.is-leaving {
  visibility: visible;
}

.collab-backdrop.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1) brightness(1);
}

.collab-backdrop.is-leaving {
  z-index: 2;
  opacity: 0;
  transform: scale(1.02);
  filter: blur(var(--collab-backdrop-blur)) saturate(0.92);
  animation: collab-backdrop-glass-out 1.4s cubic-bezier(0.25, 0.55, 0.45, 1) both;
}

@keyframes collab-backdrop-glass-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
  }
  22% {
    opacity: 0.88;
    transform: scale(1.004);
    filter: blur(calc(var(--collab-backdrop-blur) * 0.25)) saturate(0.99);
  }
  58% {
    opacity: 0.46;
    transform: scale(1.012);
    filter: blur(calc(var(--collab-backdrop-blur) * 0.5625)) saturate(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(var(--collab-backdrop-blur)) saturate(0.92);
  }
}

.collab-section-scrim {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 31, 34, 0.56) 0%, rgba(8, 31, 34, 0.08) 36%, rgba(8, 31, 34, 0.18) 62%, rgba(8, 31, 34, 0.58) 100%),
    linear-gradient(90deg, rgba(8, 31, 34, 0.18), transparent 26%, transparent 74%, rgba(8, 31, 34, 0.18));
}

.collab-section .section-header {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
}

.collab-section .section-tag {
  margin-bottom: clamp(0.55rem, 1vw, 0.9rem);
  color: #ff9b88;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.22em;
  text-shadow: 0 2px 16px rgba(6, 25, 27, 0.48);
}

.collab-section .section-title {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 0 clamp(0.75rem, 1.8vw, 2.25rem);
  color: transparent;
  background:
    radial-gradient(circle at 16% 42%, rgba(255, 255, 255, 0.98) 0 4%, transparent 19%),
    radial-gradient(circle at 74% 58%, rgba(255, 218, 126, 0.92) 0 5%, transparent 21%),
    linear-gradient(112deg, #f4fff8 0%, #75ddd2 20%, #fff0ae 39%, #ff927c 59%, #6fd3cf 79%, #fff8e9 100%);
  background-size: 180% 210%, 170% 200%, 230% 100%;
  background-position: 0% 25%, 100% 70%, 0% 50%;
  background-blend-mode: screen, screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Inter', sans-serif;
  font-size: clamp(4.5rem, 9vw, 11rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.082em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  filter:
    drop-shadow(0 2px 0 rgba(8, 31, 34, 0.34))
    drop-shadow(0 12px 30px rgba(8, 31, 34, 0.24));
  animation: collab-title-caustics 13s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes collab-title-caustics {
  0% {
    background-position: 0% 25%, 100% 70%, 0% 50%;
  }
  50% {
    background-position: 56% 62%, 44% 35%, 52% 50%;
  }
  100% {
    background-position: 100% 38%, 0% 62%, 100% 50%;
  }
}

html:lang(ru) .collab-section .section-title {
  font-size: clamp(3.75rem, 7.25vw, 8.75rem);
}

html:lang(zh) .collab-section .section-title,
html:lang(ja) .collab-section .section-title {
  font-size: clamp(5rem, 10vw, 11.5rem);
  letter-spacing: -0.045em;
}

.collab-explorer {
  position: relative;
  display: flex;
  min-height: clamp(38rem, 52vw, 44rem);
  flex-direction: column;
}

.collab-tabs-shell {
  position: relative;
  z-index: 3;
  width: min(58rem, 100%);
  margin: clamp(1.35rem, 2.5vw, 2.25rem) auto 0;
  overflow: hidden;
  background: rgba(255, 248, 233, 0.18);
  border: 1px solid rgba(255, 248, 233, 0.36);
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(7, 31, 34, 0.22);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.collab-section[data-collab-direction='forward'] .collab-tabs-shell.is-moving {
  transform-origin: left center;
  animation: collab-tabs-shell-forward 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.collab-section[data-collab-direction='backward'] .collab-tabs-shell.is-moving {
  transform-origin: right center;
  animation: collab-tabs-shell-backward 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes collab-tabs-shell-forward {
  0%, 100% { transform: scaleX(1); }
  48% { transform: scaleX(1.012); }
}

@keyframes collab-tabs-shell-backward {
  0%, 100% { transform: scaleX(1); }
  48% { transform: scaleX(1.012); }
}

.collab-tabs {
  --collab-indicator-x: 0.35rem;
  --collab-indicator-width: calc((100% - 2.1rem) / 3);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  padding: 0.35rem;
}

.collab-tab-indicator {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  z-index: 0;
  width: var(--collab-indicator-width);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.27), transparent 42%),
    var(--accent-color);
  box-shadow:
    0 8px 22px rgba(var(--accent-color-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: translate3d(var(--collab-indicator-x), 0, 0);
  transition:
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.collab-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  min-width: 0;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 248, 233, 0.78);
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.25s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.collab-tab-number {
  display: inline-block;
  margin-right: 0.55rem;
  color: #ff9b88;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  transition: color 0.25s ease;
}

.collab-tab.is-active {
  color: #fff8eb;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.collab-tab.is-active .collab-tab-number {
  color: #fff8eb;
}

.collab-tab:focus-visible {
  outline: 2px solid rgba(255, 248, 233, 0.72);
  outline-offset: -3px;
}

.collab-stage {
  --collab-text-glass-wash: rgba(255, 253, 247, 0.2);
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  margin-top: auto;
  transform: translateY(clamp(1rem, 2.2vw, 2rem));
}

.collab-stage::before,
.collab-stage::after {
  content: '';
  position: absolute;
  inset: 0 2rem;
  border-radius: 0.55rem 1.35rem 0.55rem 1.35rem;
}

.collab-stage::before {
  z-index: 0;
  background: rgba(255, 253, 247, 0.94);
  border: 1px solid rgba(255, 248, 233, 0.7);
  box-shadow: 0 22px 54px rgba(7, 31, 34, 0.24), 6px 7px 0 rgba(24, 61, 67, 0.13);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.collab-stage::after {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.collab-stage.is-text-changing::after {
  animation: collab-text-glass-wash 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes collab-text-glass-wash {
  0% {
    opacity: 0;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  34% {
    opacity: 0.82;
    background: var(--collab-text-glass-wash);
    backdrop-filter: blur(11px) saturate(1.06);
    -webkit-backdrop-filter: blur(11px) saturate(1.06);
  }
  64% {
    opacity: 0.42;
    background: var(--collab-text-glass-wash);
    backdrop-filter: blur(7px) saturate(1.03);
    -webkit-backdrop-filter: blur(7px) saturate(1.03);
  }
  100% {
    opacity: 0;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

.collab-panel {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  visibility: hidden;
  pointer-events: none;
}

.collab-panel.is-active,
.collab-panel.is-leaving {
  visibility: visible;
}

.collab-panel.is-active {
  z-index: 2;
  pointer-events: auto;
}

.collab-panel.is-leaving .collab-panel-index,
.collab-panel.is-leaving .collab-facts dt {
  visibility: hidden;
}

.collab-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  width: calc(100% - 4rem);
  margin: 0 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: transparent;
}

.collab-copy {
  max-width: 37rem;
  text-align: left;
}

.collab-panel-index {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--accent-color);
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.collab-type {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  color: var(--text-main);
  margin-bottom: 0.65rem;
  position: relative;
}

.collab-desc {
  max-width: none;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: 400;
}

.collab-facts {
  display: block;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-top: 0;
  border-left: 1px solid var(--border-color);
}

.collab-facts > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.72rem 0;
  text-align: left;
  border-right: 0;
  border-bottom: 1px solid var(--border-color);
}

.collab-facts > div:first-child {
  padding-top: 0;
}

.collab-facts > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.collab-facts dt {
  color: var(--text-muted);
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collab-facts dd {
  max-width: 16rem;
  color: var(--text-main);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.45;
}

.collab-accessible-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.collab-animated-text {
  display: inline;
}

.collab-word,
.collab-space,
.collab-char {
  display: inline-block;
}

.collab-space {
  white-space: pre;
}

.collab-char {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0) scale(0.94);
  filter: blur(10px);
}

.collab-panel.is-active .collab-char {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.collab-explorer.has-switched .collab-panel.is-active .collab-char {
  animation: collab-char-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) calc(420ms + var(--collab-char-delay, 0ms)) both;
}

.collab-explorer.has-switched .collab-panel.is-leaving .collab-char {
  opacity: 0;
  transform: translate3d(0, -0.12em, 0) scale(0.985);
  filter: blur(12px);
  animation: collab-char-out 0.64s cubic-bezier(0.4, 0, 0.2, 1) var(--collab-char-exit-delay, 0ms) both;
}

@keyframes collab-char-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0) scale(0.94);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes collab-char-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -0.12em, 0) scale(0.985);
    filter: blur(12px);
  }
}

.collab-type::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 0.18em;
  vertical-align: -0.04em;
  background: var(--accent-color);
  opacity: 0;
}

.collab-explorer.has-switched .collab-panel.is-active .collab-type::after {
  animation: collab-type-caret 0.58s step-end 2 0.18s;
}

@keyframes collab-type-caret {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

html[data-theme='dark'] .collab-tabs-shell {
  background: rgba(11, 40, 44, 0.36);
  border-color: rgba(255, 248, 233, 0.28);
}

html[data-theme='dark'] .collab-section {
  --collab-cutout-color: #0e2a2f;
}

html[data-theme='dark'] .collab-stage {
  --collab-text-glass-wash: rgba(15, 52, 57, 0.28);
}

html[data-theme='dark'] .collab-stage::before {
  background: rgba(27, 68, 72, 0.94);
  border-color: rgba(255, 248, 233, 0.18);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28), 6px 7px 0 rgba(0, 0, 0, 0.14);
}

@media (max-width: 900px) {
  .collab-section {
    min-height: 52rem;
    padding-top: 3rem;
    padding-bottom: 2.75rem;
  }

  .collab-section .section-title {
    max-width: none;
    font-size: clamp(3.6rem, 8.75vw, 5rem);
    line-height: 0.84;
  }

  html:lang(ru) .collab-section .section-title {
    font-size: clamp(3rem, 7vw, 4.25rem);
  }

  .collab-explorer {
    min-height: 39rem;
  }

  .collab-tabs-shell {
    margin-top: 1.5rem;
  }

  .collab-stage {
    transform: translateY(0.75rem);
  }

  .collab-panel-body {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    padding: 1.35rem;
  }

  .collab-stage::before,
  .collab-stage::after {
    inset: 0 0.5rem;
  }

  .collab-facts {
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--border-color);
    border-left: 0;
  }
}

@media (max-width: 768px) {
  .collab-section {
    min-height: 57rem;
  }

  .collab-explorer {
    min-height: 43rem;
  }

  .collab-section .section-title {
    width: auto;
    max-width: 11ch;
    margin-left: 0;
    padding: 0;
    font-size: clamp(2.85rem, 10vw, 4rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
    text-align: left;
    white-space: normal;
  }

  html:lang(ru) .collab-section .section-title,
  html:lang(zh) .collab-section .section-title,
  html:lang(ja) .collab-section .section-title {
    font-size: clamp(2.65rem, 9vw, 3.65rem);
  }

  /* A 16px blur costs 48px of bleed on each side, which on a phone-width
     backdrop would crop the image by a quarter. Scale the blur down instead —
     at this size it reads the same and keeps the bleed cheap. */
  .collab-backdrop {
    --collab-backdrop-blur: 9px;
  }

  /* Phones get a fitted 3-up segmented control instead of a bleeding
     horizontal scroller: every format stays visible and tappable. */
  .collab-tabs-shell {
    width: 100%;
    margin-right: 0;
    border-radius: 1.6rem;
    /* No backdrop-filter here. The indicator animating inside this pill forces
       the backdrop layer to re-rasterise every frame, and mid-switch it gets
       composited at the wrong offset — a stray blurred rectangle flashes just
       below the toggle. The backdrop is already a blurred, scrimmed image, so
       a denser fill reads the same without the filter. */
    background: rgba(255, 248, 233, 0.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html[data-theme='dark'] .collab-tabs-shell {
    background: rgba(11, 40, 44, 0.52);
  }

  .collab-tabs {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .collab-tab-indicator {
    top: 0.3rem;
    bottom: 0.3rem;
    border-radius: 1.3rem;
  }

  .collab-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 3.15rem;
    padding: 0.6rem 0.4rem;
    border-radius: 1.3rem;
    font-size: 0.75rem;
    line-height: 1.18;
    white-space: normal;
  }

  .collab-tab-number {
    margin-right: 0;
    font-size: 0.62rem;
  }

  .collab-panel-body {
    width: 100%;
    margin: 0;
    padding: 1.35rem;
  }

  .collab-stage::before,
  .collab-stage::after {
    inset: 0;
  }
}

@media (max-width: 480px) {
  .collab-section {
    min-height: 60rem;
  }

  .collab-section .section-title {
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
  }

  .collab-explorer {
    min-height: 46rem;
  }

  .collab-stage {
    transform: none;
  }

  .collab-tabs {
    gap: 0.2rem;
    padding: 0.28rem;
  }

  .collab-tab-indicator {
    top: 0.28rem;
    bottom: 0.28rem;
  }

  .collab-tab {
    min-height: 3.4rem;
    padding: 0.55rem 0.3rem;
    font-size: 0.7rem;
    letter-spacing: -0.005em;
  }

  .collab-tab-number {
    font-size: 0.58rem;
  }

  .collab-panel-body {
    padding: 1.15rem;
  }

  .collab-desc {
    font-size: 0.9rem;
  }

  .collab-facts > div {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }

  .collab-facts > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collab-panel,
  .collab-tab,
  .collab-tabs-shell,
  .collab-tab-indicator,
  .collab-backdrop {
    animation: none;
    transition: none;
  }

  .collab-char,
  .collab-type::after,
  .collab-section .section-title {
    animation: none !important;
  }

  .collab-stage.is-text-changing::after {
    opacity: 0;
    animation: none;
  }
}

/* Contact Block Styles */
.contact-section {
  background: linear-gradient(180deg, var(--bg-color) 0%, #080a0d 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: 5rem;
  align-items: start;
}

/* On desktop the crew rail spans the full section width as its own row
   below the text/form columns. Squeezed into the narrow text column it
   clipped the cards even though the screen had plenty of room. */
.contact-text-column {
  grid-column: 1;
  grid-row: 1;
}

.contact-form-column {
  grid-column: 2;
  grid-row: 1;
}

.people-block {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Let the grid tracks shrink to the container instead of being blown out
   to their content's min-content width (the crew rail + form fields would
   otherwise push the columns past the viewport and clip on the right). */
.contact-grid > * {
  min-width: 0;
}

.contact-heading {
  margin-bottom: 1.5rem;
}

.contact-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 3rem;
  font-weight: 300;
}

.people-label {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent-color);
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.people-rail {
  display: flex;
  gap: 1rem;
  margin: 0 -0.35rem;
  padding: 0.35rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  /* Free horizontal scrolling: scroll-snap proximity made the rail feel
     "stuck" at the right edge — a small leftward gesture snapped back to the
     last card instead of moving. Keep the gesture on the rail at the edges
     instead of chaining to the page, like the work rail. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.people-rail::-webkit-scrollbar {
  display: none;
}

.person-card {
  display: flex;
  flex: 0 0 auto;
  gap: 1.15rem;
  align-items: stretch;
  width: min(23rem, 100%);
  padding: 1.35rem;
  border: 1px solid var(--border-color);
  border-radius: 1.1rem;
  background: var(--bg-card);
  box-shadow: 0 14px 34px rgba(7, 31, 34, 0.08);
  scroll-snap-align: start;
  transition: var(--transition-smooth);
}

.person-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.person-photo {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(150deg, rgba(var(--accent-color-rgb), 0.9), var(--accent-teal));
}

.person-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hidden by script.js when the portrait file is missing, so the
   initials underneath show through instead. */
.person-photo img[hidden] {
  display: none;
}

.person-initials {
  color: #fff8e9;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.person-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.person-name {
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.person-role {
  color: var(--accent-color);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 500;
}

.person-bio {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
}

.person-links {
  display: flex;
  gap: 1.1rem;
  margin-top: auto;
  padding-top: 0.65rem;
}

.person-links a {
  color: var(--text-main);
  font-family: var(--font-title);
  font-size: 0.82rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.45);
  transition: var(--transition-smooth);
}

.person-links a:hover {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.method-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.method-label {
  font-size: 0.75rem;
  font-family: var(--font-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-color);
}

.method-link {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--text-main);
  transition: var(--transition-smooth);
}

.method-link:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.social-links {
  display: flex;
  gap: 2rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.social-links a {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.social-links a:hover {
  color: var(--accent-color);
}

/* Contact Form UI */
.contact-form {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 3rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.form-group {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main);
}

.form-group input, .form-group textarea {
  background-color: rgba(7, 8, 10, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.9rem 1.2rem;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-smooth);
}

.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background-color: rgba(7, 8, 10, 0.9);
  box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.1);
}

.form-status-msg {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-family: var(--font-title);
  transition: var(--transition-smooth);
}

.form-status-msg.success {
  color: #00ff66;
}

.form-status-msg.error {
  color: #ff3b30;
}

/* Site Footer */
.site-footer {
  padding: 3rem 0;
  border-top: 1px solid var(--border-color);
  background-color: #07080a;
}

.site-footer p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-privacy {
  margin-top: 0.75rem;
}

.footer-privacy summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #dcefed;
  font-size: 0.78rem;
  text-decoration: underline;
  text-decoration-color: rgba(220, 239, 237, 0.45);
  text-underline-offset: 0.25em;
  cursor: pointer;
  list-style: none;
}

.footer-privacy summary::-webkit-details-marker {
  display: none;
}

.footer-privacy summary::after {
  content: "+";
  color: var(--accent-color);
  text-decoration: none;
}

.footer-privacy[open] summary::after {
  content: "−";
}

.footer-privacy summary:hover,
.footer-privacy summary:focus-visible,
.footer-privacy-copy a:hover,
.footer-privacy-copy a:focus-visible {
  color: var(--accent-color);
}

.footer-privacy-copy {
  max-width: 56rem;
  margin: 0.85rem auto 0;
}

.site-footer .footer-privacy-copy p {
  line-height: 1.65;
  color: #c3d8d6;
}

.footer-privacy-copy a {
  display: inline-block;
  margin-top: 0.55rem;
  color: #dcefed;
  font-size: 0.75rem;
  text-underline-offset: 0.25em;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .main-header {
    padding: 1.25rem 2rem;
  }
  
  .positioning-grid {
    gap: 3rem;
  }
  
  .work-grid {
    gap: 2rem;
  }
  
  .collab-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  /* Single-column grid: let the blocks flow in document order
     (text → crew rail → form) instead of the desktop row placement. */
  .contact-text-column,
  .contact-form-column,
  .people-block {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 4.75rem;
  }

  section {
    padding: 5rem 0;
  }

  /* On portrait phones the 16:9 hero video would lose ~70% of its width
     with plain object-fit: cover. Cap the crop at 30% by giving the video
     the aspect ratio of its central 70% (1344/1080). The remaining height
     is filled with the near-black hero color, which blends into the
     existing radial overlay at the edges. */
  .hero-video-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #07080a;
  }

  .hero-video {
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 1344 / 1080;
    object-fit: cover;
    object-position: center;
    /* Video sits flush with the top; only the bottom edge fades into the
       dark field so there is no hard letterbox seam below. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  }

  /* Sit the sound toggle at the bottom edge of the video band (video
     height = 100vw * 1080/1344) instead of the viewport bottom, and make
     it a touch more transparent. */
  .video-controls {
    bottom: auto;
    top: calc(100vw * 1080 / 1344 - 3.25rem);
  }

  .btn-control {
    opacity: 0.7;
  }

  /* Responsive Header Navigation Drawer */
  .menu-toggle {
    display: flex;
    z-index: 1100;
  }
  
  .main-header.nav-open .menu-toggle .menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  
  .main-header.nav-open .menu-toggle .menu-bar:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -6px);
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background-color: #0a0b0e;
    border-left: 1px solid var(--border-color);
    padding: 7rem 2.5rem 3rem 2.5rem;
    transform: translateX(100%);
    transition: var(--transition-smooth);
    z-index: 1050;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }
  
  .main-header.nav-open .nav-menu {
    transform: translateX(0);
  }
  
  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  
  .nav-link {
    font-size: 1.1rem;
  }
  
  .positioning-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .work-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-form {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn {
    width: 100%;
  }
  
  .video-controls {
    right: 2rem;
  }
  
  .method-link {
    font-size: 1.15rem;
  }
}

/* Project Details Modal Styles */
.project-modal {
  background: transparent;
  border: none;
  padding: 0;
  margin: auto;
  max-width: 1100px;
  width: 90%;
  max-height: 85vh;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
}

.project-modal[open] {
  opacity: 1;
  pointer-events: auto;
  display: flex;
  animation: modalFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.project-modal::backdrop {
  background-color: rgba(7, 8, 10, 0.88);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  animation: backdropFadeIn 0.4s ease forwards;
}

.modal-wrapper {
  background-color: #0c0e11;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
  padding: 3rem;
  overflow-y: auto;
  max-height: 85vh;
  width: 100%;
}

/* Thin Scrollbar for Modal content */
.modal-wrapper::-webkit-scrollbar {
  width: 6px;
}
.modal-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.modal-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.modal-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 1.75rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  z-index: 100;
}

.modal-close-btn:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #000;
  transform: rotate(90deg);
}

.modal-grid {
  display: grid;
  /* minmax(0, …) so a long project title or client line wraps instead of
     widening its track and pushing the details column out of the modal. */
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 4.5fr);
  gap: 3.5rem;
  align-items: start;
}

/* Media Column Layout */
.modal-media-col {
  display: flex;
  flex-direction: column;
}

.modal-hero-media {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
}

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

.modal-video {
  cursor: pointer;
}

.modal-thumbnails {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.modal-thumbnails::-webkit-scrollbar {
  height: 4px;
}
.modal-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.modal-thumb {
  position: relative;
  width: 90px;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  cursor: pointer;
  opacity: 1;
  transition: var(--transition-smooth);
  flex-shrink: 0;
  background-color: #000;
}

.modal-thumb img,
.modal-thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.modal-thumb:hover, .modal-thumb.active {
  border-color: var(--accent-color);
}

.modal-thumb:hover img,
.modal-thumb.active img,
.modal-thumb:hover .modal-thumb-fallback,
.modal-thumb.active .modal-thumb-fallback {
  opacity: 1;
}

.modal-thumb-video-marker {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding-left: 0.08rem;
  color: #fff6e7;
  background: rgba(7, 8, 10, 0.78);
  border: 1px solid rgba(255, 246, 231, 0.52);
  border-radius: 0.3rem 0.55rem 0.3rem 0.55rem;
  box-shadow: 0 0.18rem 0.55rem rgba(7, 8, 10, 0.34);
  font-size: 0.52rem;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Info Column Layout */
.modal-info-col {
  display: flex;
  flex-direction: column;
}

.modal-category {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-color);
  display: block;
  margin-bottom: 0.5rem;
}

.modal-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1.75rem;
  color: var(--text-main);
}

.modal-meta-table {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 0;
  margin-bottom: 1.75rem;
}

.modal-meta-row {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  align-items: start;
  gap: 1rem;
}

.modal-meta-row .meta-label {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.modal-meta-row .meta-value {
  font-size: 0.92rem;
  color: var(--text-main);
  font-weight: 300;
}

.modal-description-heading {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.modal-description-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
}

.modal-actions {
  margin-top: 2rem;
}

/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Modal Adjustments */
@media (max-width: 900px) {
  .modal-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .modal-wrapper {
    padding: 3rem 1.5rem 2rem 1.5rem;
  }
  
  .project-modal {
    max-height: 90vh;
  }
}

/* Easter Egg Cat Placeholder */
.easter-egg-cat {
  position: fixed; 
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  text-align: center;
  pointer-events: none;
}

.cat-placeholder {
  background: var(--accent-color);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: bold;
  font-family: var(--font-title);
  box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.28);
}

/* Nomad Catapult workshop redesign: paint, paper and tropical daylight */
.main-header {
  padding: 1rem 2rem;
  background-color: var(--bg-header);
  border-bottom-color: rgba(24, 61, 67, 0.18);
  box-shadow: 0 8px 28px rgba(24, 61, 67, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.logo-accent,
.nav-link:hover,
.nav-link.active,
.section-tag,
.banner-accent,
.work-cat,
.method-label,
.modal-category {
  color: var(--accent-color);
}

.nav-link::after {
  height: 2px;
  background-color: var(--accent-color);
  border-radius: 99px;
}

.btn-contact-nav,
.lang-selector {
  background-color: #fffdf7;
  border-color: var(--border-color);
  border-radius: 999px;
}

.btn-lang.active,
.btn-primary,
.btn-filter.active,
.handle-button {
  background-color: var(--accent-color);
  color: var(--accent-ink);
}

.btn-primary,
.btn-secondary,
.btn-contact-nav,
.btn-filter,
.service-card,
.work-item,
.collab-card,
.contact-form {
  box-shadow: 3px 3px 0 rgba(24, 61, 67, 0.08);
}

.hero-section {
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 620px;
  border-bottom: 0;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(24, 61, 67, 0.24) 0%, rgba(24, 61, 67, 0.04) 46%, rgba(24, 61, 67, 0.1) 100%),
    linear-gradient(0deg, rgba(24, 61, 67, 0.26) 0%, transparent 44%);
}

.hero-content {
  max-width: 620px;
  margin: 0 0 clamp(4rem, 9vh, 7rem) clamp(1.5rem, 7vw, 8rem);
  padding: 0;
  text-align: left;
}

.hero-title-container {
  margin-bottom: 0.8rem;
}

.hero-title {
  display: inline-block;
  padding: 0.26em 0.42em 0.3em;
  color: var(--text-main);
  background: #fff6e7;
  border: 2px solid var(--text-main);
  border-radius: 1.1rem 0.25rem 1.1rem 0.25rem;
  box-shadow: 7px 7px 0 rgba(24, 61, 67, 0.24);
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  letter-spacing: 0.035em;
  line-height: 1;
  -webkit-text-stroke: 0;
  animation: none;
}

.hero-subtitle {
  width: fit-content;
  max-width: 540px;
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent-mango);
  border-radius: 0 0.45rem 0.45rem 0;
  background: rgba(255, 246, 231, 0.93);
  color: var(--text-main);
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  font-weight: 400;
}

.video-controls {
  right: 2rem;
}

.btn-secondary:hover,
.btn-contact-nav:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: #fffdf7;
  box-shadow: 3px 3px 0 rgba(var(--accent-color-rgb), 0.2);
}

.mouse-icon {
  border-color: #fff6e7;
}

.wheel {
  background-color: var(--accent-mango);
}

.positioning-section {
  background: linear-gradient(180deg, #fff6e7 0%, #fcebd4 100%);
}

.agent-orchestration-banner {
  padding: 2.6rem 3rem;
  background: #fffdf7;
  border: 1px solid var(--border-color);
  border-left: 6px solid var(--accent-teal);
  border-radius: 0.55rem 1.5rem 0.55rem 1.5rem;
  box-shadow: 7px 7px 0 rgba(24, 61, 67, 0.09);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.banner-accent::before,
.section-tag::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.55em;
  border-radius: 50% 50% 50% 0;
  background: var(--accent-mango);
  transform: rotate(-28deg);
}

.services-section {
  background: #e9f6f3;
  padding: 6rem 0;
}

.services-grid {
  padding: 0.75rem 0.25rem 1.75rem;
  scrollbar-color: var(--accent-color) rgba(24, 61, 67, 0.1);
}

.lang-selector {
  gap: 0.18rem;
  padding: 0.22rem;
}

.btn-lang {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 28px;
  border-radius: 999px;
}

.btn-lang.active {
  border-radius: 999px;
}

.header-right {
  gap: 0.75rem;
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-main);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.theme-toggle:hover {
  color: var(--accent-color);
  transform: rotate(8deg);
}

.theme-icon {
  position: absolute;
  font-size: 1.2rem;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.theme-icon-moon {
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
}

.services-grid::-webkit-scrollbar-track {
  background: rgba(24, 61, 67, 0.1);
}

.service-card,
.collab-card,
.contact-form {
  background: #fffdf7;
  border-color: var(--border-color);
  border-radius: 0.55rem 1.35rem 0.55rem 1.35rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.service-card {
  padding: 1.7rem;
}

.service-card:hover,
.collab-card:hover {
  border-color: var(--accent-color);
  box-shadow: 6px 7px 0 rgba(var(--accent-color-rgb), 0.22);
}

.service-icon {
  color: var(--accent-teal);
}

.service-card:hover .service-icon {
  filter: none;
}

.work-section {
  background: #fff6e7;
}

.filter-controls {
  background: #fffdf7;
  border-color: var(--border-color);
  box-shadow: 2px 2px 0 rgba(24, 61, 67, 0.07);
  backdrop-filter: none;
}

.work-item {
  background: #fffdf7;
  border-radius: 0.55rem 1.5rem 0.55rem 1.5rem;
}

.work-item:hover {
  border-color: var(--accent-teal);
  box-shadow: 7px 8px 0 rgba(23, 157, 160, 0.2);
}

.work-img-container {
  background: var(--text-main);
}

.work-overlay {
  background: rgba(24, 61, 67, 0.62);
}

.btn-work-explore {
  background: #fff6e7;
  color: var(--text-main);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(24, 61, 67, 0.22);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --bg-color: #112f34;
  --bg-card: #1c4549;
  --bg-header: rgba(17, 47, 52, 0.97);
  --accent-color: #ff927c;
  --accent-color-rgb: 255, 146, 124;
  --accent-teal: #5dcbc7;
  --accent-mango: #ffd076;
  --accent-ink: #19383d;
  --text-main: #fff8e9;
  --text-muted: #c3d8d6;
  --border-color: rgba(255, 248, 233, 0.19);
  --border-hover: rgba(255, 146, 124, 0.65);
}

html[data-theme='dark'] .main-header,
html[data-theme='dark'] .lang-selector,
html[data-theme='dark'] .btn-contact-nav {
  background-color: #173b40;
}

html[data-theme='dark'] .theme-icon-sun {
  opacity: 0;
  transform: scale(0.6) rotate(20deg);
}

html[data-theme='dark'] .theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

html[data-theme='dark'] .hero-title,
html[data-theme='dark'] .hero-subtitle {
  color: #19383d;
  background: #fff5df;
}

html[data-theme='dark'] .positioning-section,
html[data-theme='dark'] .work-section,
html[data-theme='dark'] .contact-section {
  background: linear-gradient(180deg, #12363b 0%, #173e42 100%);
}

html[data-theme='dark'] .services-section,
html[data-theme='dark'] .collab-section {
  background: #0e2a2f;
}

html[data-theme='dark'] .before-after-section {
  background: #17383c;
}

html[data-theme='dark'] .agent-orchestration-banner,
html[data-theme='dark'] .service-card,
html[data-theme='dark'] .collab-card,
html[data-theme='dark'] .contact-form,
html[data-theme='dark'] .filter-controls,
html[data-theme='dark'] .work-item,
html[data-theme='dark'] .modal-wrapper {
  background: #1b4448;
}

html[data-theme='dark'] .work-tags span {
  background: #14363b;
  color: var(--text-muted);
}

html[data-theme='dark'] .form-group input,
html[data-theme='dark'] .form-group textarea {
  color: var(--text-main);
  background: #14363b;
  border-color: rgba(255, 248, 233, 0.23);
}

html[data-theme='dark'] .form-group input:focus,
html[data-theme='dark'] .form-group textarea:focus {
  background: #163e43;
}

html[data-theme='dark'] .slider-label,
html[data-theme='dark'] .btn-work-explore,
html[data-theme='dark'] .modal-close-btn {
  color: var(--text-main);
  background: #173b40;
}

html[data-theme='dark'] .site-footer {
  background: #0c2428;
}

.btn-work-explore:hover {
  background-color: var(--accent-mango);
}

.work-tags span {
  background: #eef7f4;
  color: var(--text-muted);
  border-radius: 999px;
}

.work-badge {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.badge-client {
  background: #e1f4e7;
  color: #197150;
  border-color: #a4d8b4;
}

.badge-personal {
  background: #fff0dd;
  color: #b74937;
  border-color: #f2bb91;
}

.badge-ai {
  background: #fff5c9;
  color: #82611b;
  border-color: #ead27b;
}

.before-after-section {
  background: #fcebd4;
}

.slider-wrapper {
  border-color: rgba(24, 61, 67, 0.22);
  border-radius: 0.55rem 1.5rem 0.55rem 1.5rem;
  box-shadow: 8px 9px 0 rgba(24, 61, 67, 0.13);
}

.slider-label {
  background: rgba(255, 246, 231, 0.93);
  color: var(--text-main);
  border-color: rgba(24, 61, 67, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.label-before {
  border-left-color: var(--accent-color);
}

.slider-handle {
  background-color: var(--accent-color);
  box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.5);
}

.collab-section {
  background: #e9f6f3;
}

.contact-section {
  background: linear-gradient(180deg, #fff6e7 0%, #fce6cf 100%);
}

.form-group input,
.form-group textarea {
  background: #fffaf0;
  border-color: rgba(24, 61, 67, 0.2);
  color: var(--text-main);
  border-radius: 0.45rem;
}

.form-group input:focus,
.form-group textarea:focus {
  background: #fffdf7;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.14);
}

.site-footer {
  background: var(--text-main);
  border-top: 0;
}

.site-footer p {
  color: #dcefed;
}

.modal-wrapper {
  background: #fffdf7;
  border-color: rgba(24, 61, 67, 0.2);
  border-radius: 0.75rem 1.65rem 0.75rem 1.65rem;
}

.project-modal::backdrop {
  background-color: rgba(24, 61, 67, 0.72);
}

.modal-hero-media,
.modal-thumb {
  background: var(--text-main);
}

.modal-close-btn {
  background: #fff6e7;
  color: var(--text-main);
}

.modal-close-btn:hover {
  color: var(--text-main);
}

main > section {
  content-visibility: auto;
  contain-intrinsic-size: auto 850px;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .collab-card:hover,
  .work-item:hover {
    transform: translateY(-5px) rotate(-0.25deg);
  }

  .work-item:hover .work-img-container img {
    transform: scale(1.035);
  }

  .btn:hover,
  .btn-filter:hover,
  .social-links a:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .hero-content {
    margin: 0 1.25rem 5.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .main-header {
    padding: 0.9rem 1.25rem;
  }

  .nav-menu {
    background: #fff6e7;
    box-shadow: -8px 0 26px rgba(24, 61, 67, 0.18);
  }

  html[data-theme='dark'] .nav-menu {
    background: #173b40;
  }
}

/* Pre-AI showreel archive */
.archive-section {
  --archive-year-shift-x: 0px;
  --archive-year-shift-y: 0px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(5rem, 9vw, 8rem) 0;
  background:
    radial-gradient(circle at 78% 24%, rgba(172, 83, 200, 0.3), transparent 30%),
    radial-gradient(circle at 17% 88%, rgba(59, 167, 158, 0.2), transparent 34%),
    linear-gradient(145deg, #090d16 0%, #151026 52%, #07191a 100%);
  border-bottom: 0;
  color: #eef9f4;
}

.archive-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(238, 249, 244, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 249, 244, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 80%, transparent);
}

.archive-strata {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.archive-strata span {
  position: absolute;
  left: -8%;
  width: 116%;
  height: clamp(4rem, 8vw, 7rem);
  border: 1px solid rgba(217, 255, 114, 0.16);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.archive-strata span:nth-child(1) {
  top: 7%;
  border-color: rgba(243, 122, 202, 0.2);
  transform: rotate(4deg) scaleX(1.1);
}

.archive-strata span:nth-child(2) {
  top: 72%;
  height: clamp(6rem, 12vw, 10rem);
  transform: rotate(-6deg) scaleX(1.2);
}

.archive-strata span:nth-child(3) {
  top: 83%;
  border-color: rgba(82, 216, 198, 0.18);
  transform: rotate(3deg) scaleX(1.3);
}

.archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(2.75rem, 7vw, 7rem);
}

.archive-copy {
  position: relative;
}

.archive-section .section-tag {
  color: #d8ff72;
}

.archive-section .section-title {
  max-width: 10ch;
  margin-bottom: 1.25rem;
  color: #f6fff8;
}

.archive-description {
  max-width: 34rem;
  color: rgba(238, 249, 244, 0.78);
  font-size: 1.08rem;
  line-height: 1.75;
}

.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  margin-top: 1.6rem;
  color: rgba(238, 249, 244, 0.68);
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-meta li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin: 0 0 0.16rem 1.15rem;
  border-radius: 50%;
  background: #d8ff72;
}

.archive-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  color: #d8ff72;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.25s ease, transform 0.25s ease;
}

.archive-link:hover {
  color: #fff;
  transform: translateX(0.3rem);
}

.archive-media {
  position: relative;
}

.archive-media::before {
  content: '2021';
  position: absolute;
  top: -6.8rem;
  right: -3.1rem;
  z-index: 1;
  color: rgba(216, 255, 114, 0.32);
  font-family: var(--font-title);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
  pointer-events: none;
  transform: translate3d(var(--archive-year-shift-x), var(--archive-year-shift-y), 0);
  will-change: transform;
}

.archive-media-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(238, 249, 244, 0.34);
  border-radius: 0.6rem 2.2rem 0.6rem 2.2rem;
  background: #050b0d;
  box-shadow: 18px 20px 0 rgba(216, 255, 114, 0.12), 0 28px 70px rgba(0, 0, 0, 0.36);
}

.archive-media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(216, 255, 114, 0.28);
  border-radius: inherit;
  pointer-events: none;
}

.archive-media-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1280px) and (min-width: 769px) {
  .main-header {
    padding-right: 1.7rem;
    padding-left: 1.7rem;
  }

  .header-left {
    gap: 1.25rem;
  }

  .logo {
    font-size: 1.08rem;
  }

  .nav-menu ul {
    gap: 1.1rem;
  }

  .nav-link {
    font-size: 0.8rem;
  }
}

@media (max-width: 1120px) and (min-width: 769px) {
  .main-header {
    padding: 1rem 1.5rem;
  }

  .menu-toggle {
    display: flex;
    z-index: 1100;
  }

  .main-header.nav-open .menu-toggle .menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }

  .main-header.nav-open .menu-toggle .menu-bar:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    padding: 7rem 2.5rem 3rem;
    border-left: 1px solid var(--border-color);
    background: #fff6e7;
    box-shadow: -8px 0 26px rgba(24, 61, 67, 0.18);
    transform: translateX(100%);
    transition: var(--transition-smooth);
    z-index: 1050;
  }

  html[data-theme='dark'] .nav-menu {
    background: #173b40;
    box-shadow: -8px 0 26px rgba(0, 0, 0, 0.32);
  }

  .main-header.nav-open .nav-menu {
    transform: translateX(0);
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .nav-link {
    font-size: 1.1rem;
  }
}

@media (max-width: 900px) {
  .archive-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .archive-section .section-title {
    max-width: 15ch;
  }

  .archive-media {
    max-width: 48rem;
  }
}

@media (max-width: 768px) {
  .archive-section {
    padding: 5rem 0;
  }

  .archive-media::before {
    top: -4.6rem;
    right: -1.65rem;
  }

  .archive-media-frame {
    border-radius: 0.5rem 1.25rem 0.5rem 1.25rem;
    box-shadow: 10px 12px 0 rgba(216, 255, 114, 0.12), 0 24px 56px rgba(0, 0, 0, 0.32);
  }
}

/* Hero reveal and NomadCanvas promo */
.hero-content {
  transform: translateY(4.5rem);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;
}

.hero-section.hero-intro-revealed .hero-content {
  transform: translateY(0);
  opacity: 1;
}

.scroll-indicator a {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.scroll-hint {
  color: #fff6e7;
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-section.hero-intro-revealed .scroll-hint {
  color: var(--accent-mango);
}

.nomadcanvas-promo {
  --canvas-parallax-x: 0px;
  --canvas-parallax-y: 0px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 28rem;
  display: grid;
  align-items: center;
  background: #071115;
  border-bottom: 0;
  color: #ecf7ef;
}

.nomadcanvas-promo::before {
  content: '';
  position: absolute;
  inset: -1.5rem;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(4, 11, 14, 0.96) 0%, rgba(4, 11, 14, 0.82) 36%, rgba(4, 11, 14, 0.42) 63%, rgba(4, 11, 14, 0.14) 100%),
    url('assets/images/NomadCanvas.jpg') center / cover no-repeat,
    #071115;
  filter: brightness(0.8) saturate(0.75);
  transform: translate3d(var(--canvas-parallax-x), var(--canvas-parallax-y), 0) scale(1.04);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.nomadcanvas-promo.is-canvas-parallax::before {
  will-change: transform;
}

.nomadcanvas-promo-content {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  padding: 1.5rem 0;
}

.nomadcanvas-promo .section-tag {
  color: #c9ff5b;
}

.nomadcanvas-promo .section-tag::before {
  background: #c9ff5b;
}

.nomadcanvas-promo .section-title {
  margin-bottom: 0.75rem;
  color: #f4fff5;
}

.nomadcanvas-promo-subtitle {
  color: #c9ff5b;
  font-family: var(--font-title);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  font-weight: 500;
  line-height: 1.4;
}

.nomadcanvas-promo-description {
  max-width: 34rem;
  margin-top: 1rem;
  color: rgba(236, 247, 239, 0.82);
  font-size: 1.02rem;
  line-height: 1.7;
}

.nomadcanvas-promo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.canvas-promo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.canvas-promo-button-primary {
  background: #c9ff5b;
  color: #0a1410;
}

.canvas-promo-button-secondary {
  border-color: rgba(236, 247, 239, 0.48);
  color: #f4fff5;
}

.canvas-promo-button:not(.is-disabled):hover {
  transform: translateY(-2px);
}

.canvas-promo-button-secondary:not(.is-disabled):hover {
  border-color: #c9ff5b;
  color: #c9ff5b;
}

.canvas-promo-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

@media (max-width: 768px) {
  .hero-content {
    transform: translateY(3.25rem);
  }

  .scroll-hint {
    font-size: 0.62rem;
  }

  .nomadcanvas-promo {
    padding: 5rem 0;
  }

  .nomadcanvas-promo-content {
    max-width: none;
    padding: 0;
  }

  .nomadcanvas-promo-actions {
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content {
    transform: none;
    opacity: 1;
  }

  .archive-media::before {
    will-change: auto;
  }
}

/* Full-bleed services strip
   ---------------------------------------------------------------------------
   The scroller sits outside .container, so the strip spans the whole page and
   cards leave the screen at the viewport edge instead of being cut off inside
   the centered column. The inline padding is a percentage of the scroller, so
   the first and last card still line up with the container gutter. */
.services-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* No snapping at all: mandatory snapping threw the strip back before the end
     and proximity snapping still fought the drag. A plain free-scrolling strip
     behaves predictably in both directions. */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(24, 61, 67, 0.1);
}

.services-scroller::-webkit-scrollbar {
  height: 6px;
}

.services-scroller::-webkit-scrollbar-track {
  background: rgba(24, 61, 67, 0.1);
  border-radius: 4px;
}

.services-scroller::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

html[data-theme='dark'] .services-scroller {
  scrollbar-color: var(--accent-color) rgba(255, 255, 255, 0.05);
}

html[data-theme='dark'] .services-scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.services-grid {
  /* NOT max-content. A percentage-based padding on a max-content box is sized
     as zero while the intrinsic width is computed and applied for real during
     layout, so the scrollable width and the cards' actual positions disagreed:
     the strip ran off to the left and the scrollbar stopped halfway. An
     auto-width flex row resolves the leading percentage correctly. */
  width: auto;
  overflow: visible;
  scroll-snap-type: none;
  /* Vertical padding leaves room for the hover lift and drop shadow, which the
     scroller would otherwise clip. */
  padding-block: 0.85rem 1.5rem;
  padding-left: max(2rem, calc((100% - 1200px) / 2 + 2rem));
  padding-right: 0;
}

/* Scroll containers drop trailing padding, and a trailing margin is not always
   counted in scrollWidth either — a real flex item always is. */
.services-grid::after {
  content: '';
  /* The preceding 1.5rem flex gap plus this spacer exactly mirrors the
     container-aligned leading inset at every viewport width. */
  flex: 0 0 max(0.5rem, calc((100vw - 1200px) / 2 + 0.5rem));
}

/* Work collage
   ---------------------------------------------------------------------------
   The tile is the work. Media fills the frame edge to edge and the copy sits
   over it as a compact caption; the full write-up is in the project modal. */
.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1.25rem;
}

.work-item {
  position: relative;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

/* The lead piece runs the full width as a cinematic band. */
.work-item--featured {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

.featured-work-stage {
  grid-column: 1 / -1;
  min-width: 0;
}

.featured-work-placeholder {
  display: none;
}

/* On a spacious screen, the single lead is framed by two playful side scenes.
   They make the showcase feel open-ended today and can turn into real featured
   projects later without changing the composition. */
@media (min-width: 1440px) {
  .featured-work-stage {
    --featured-work-width: min(1136px, calc(100vw - 4rem));
    --featured-work-slot-width: var(--featured-work-width);
    display: grid;
    grid-template-columns: var(--featured-work-slot-width) var(--featured-work-width) var(--featured-work-slot-width);
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: visible;
  }

  .featured-work-stage .work-item--featured {
    grid-column: 2;
    width: 100%;
  }

  .featured-work-placeholder {
    display: grid;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    background: linear-gradient(135deg, rgba(24, 61, 67, 0.58), rgba(var(--accent-color-rgb), 0.12));
    border: 1px solid var(--border-color);
    border-radius: 0.55rem 1.5rem 0.55rem 1.5rem;
  }

  .featured-work-illustration {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .featured-work-placeholder--left .featured-work-illustration {
    object-position: right center;
  }

  .featured-work-placeholder--right .featured-work-illustration {
    object-position: left center;
  }

  .featured-work-placeholder::before,
  .featured-work-placeholder::after,
  .work-rail-cta::before,
  .work-rail-cta::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: '';
    pointer-events: none;
  }

  /* A slow transform-only colour drift gives the side panels some life without
     adding a canvas, video, or WebGL layer to the page. */
  .featured-work-placeholder::before,
  .work-rail-cta::before {
    inset: -38%;
    z-index: 1;
    opacity: 0.42;
    background:
      radial-gradient(circle at 22% 28%, rgba(var(--accent-color-rgb), 0.5), transparent 32%),
      radial-gradient(circle at 78% 66%, rgba(93, 203, 199, 0.38), transparent 36%),
      linear-gradient(120deg, transparent 28%, rgba(255, 248, 233, 0.12) 51%, transparent 72%);
    transform: translate3d(-8%, -4%, 0) rotate(-7deg);
    will-change: transform;
    animation: featured-placeholder-drift 16s ease-in-out infinite alternate;
  }

  .featured-work-placeholder::after,
  .work-rail-cta::after {
    z-index: 2;
    opacity: 0.1;
    background-image:
      linear-gradient(rgba(255, 248, 233, 0.24) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 248, 233, 0.24) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  }

}

@keyframes featured-placeholder-drift {
  to {
    transform: translate3d(8%, 5%, 0) rotate(7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-work-placeholder::before,
  .work-rail-cta::before {
    animation: none;
  }
}

/* The archive intentionally grows sideways in one clean row below the lead
   film. It keeps the current showcase compact, while a future second lead can
   become part of a shared two-tier rail without changing the card system. */
.work-rail-shell {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
}

.work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto;
  grid-auto-columns: clamp(15rem, 25vw, 20.5rem);
  align-items: start;
  gap: 1.25rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  /* Native free scrolling is more predictable here than snapping, especially
     when a trackpad reverses direction near either deliberate end position. */
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(24, 61, 67, 0.12);
  /* Desktop cards rise by 5px on hover. Keep a real top buffer inside the
     horizontal scroller so its overflow mask never clips that movement; the
     matching negative margin preserves the original vertical alignment. */
  margin-top: -0.35rem;
  padding: 0.55rem 0.2rem 0.8rem;
}

.work-rail::-webkit-scrollbar {
  height: 6px;
}

.work-rail::-webkit-scrollbar-track {
  background: rgba(24, 61, 67, 0.12);
  border-radius: 999px;
}

.work-rail::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 999px;
}

.work-rail .work-item {
  width: 100%;
  scroll-snap-align: start;
}

.work-rail-cta {
  display: none;
}

.work-rail-control {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  color: rgba(24, 61, 67, 0.9);
  background: rgba(255, 253, 247, 0.68);
  border: 1px solid rgba(24, 61, 67, 0.22);
  border-radius: 50%;
  box-shadow: 0 0.55rem 1.25rem rgba(24, 61, 67, 0.16);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

html[data-theme='dark'] .work-rail-control {
  color: #fff6e7;
  background: rgba(23, 59, 64, 0.72);
  border-color: rgba(255, 246, 231, 0.3);
  box-shadow: 0 0.65rem 1.35rem rgba(7, 8, 10, 0.28);
}

.work-rail-control[hidden] {
  display: none;
}

.work-rail-control svg {
  width: 1.3rem;
  height: 1.3rem;
}

.work-rail-control--previous {
  left: -1.1rem;
}

.work-rail-control--next {
  right: -1.1rem;
}

/* The rail is deliberately allowed to leave the text safe area on larger
   screens. Cards still start on the same line as the LADA lead, but the strip
   reaches the real window edge, so the partial next card reads as intentional
   continuation rather than an accidental crop inside the container. */
@media (min-width: 769px) {
  .work-rail-shell {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .work-rail {
    --work-rail-content-start: max(2rem, calc((100vw - 1200px) / 2 + 2rem));
    /* The rail has the same left and right stops as the LADA feature: first
       project aligns to its left edge, final project aligns to its right edge. */
    padding-inline: var(--work-rail-content-start);
    scroll-padding-inline: var(--work-rail-content-start);
  }

  .work-rail-control--previous {
    left: 0.85rem;
  }

  .work-rail-control--next {
    right: 0.85rem;
  }
}

/* On a wide screen the two text cells become actual items in the same rail.
   Their width is exactly the outer LADA gutter minus the card gap, preserving
   the project-to-LADA alignment at both ends of the scroll. */
@media (min-width: 1440px) {
  .work-rail {
    display: flex;
    align-items: stretch;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .work-rail .work-item {
    flex: 0 0 clamp(15rem, 25vw, 20.5rem);
    width: auto;
  }

  .work-rail-cta {
    position: relative;
    display: grid;
    flex: 0 0 calc(var(--work-rail-content-start) - 1.25rem);
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    padding: 1rem;
    color: var(--text-main);
    background: linear-gradient(135deg, rgba(24, 61, 67, 0.58), rgba(var(--accent-color-rgb), 0.12));
    border: 1px solid var(--border-color);
    border-radius: 0.55rem 1.5rem 0.55rem 1.5rem;
    place-items: center;
    text-align: center;
  }

  .work-rail-cta p {
    position: relative;
    z-index: 3;
    max-width: 13ch;
    font-family: var(--font-title);
    font-size: clamp(0.72rem, 0.88vw, 0.9rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1.5rem rgba(7, 8, 10, 0.45);
  }
}

.work-rail-control:hover:not(:disabled),
.work-rail-control:focus-visible:not(:disabled) {
  color: #07080a;
  background: var(--accent-color);
  border-color: rgba(var(--accent-color-rgb), 0.88);
  box-shadow: 0 0.65rem 1.4rem rgba(var(--accent-color-rgb), 0.28);
  outline: none;
  transform: translateY(-50%) scale(1.08);
}

.work-rail-control:disabled {
  cursor: default;
  opacity: 0.34;
}

.work-img-container {
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.work-loop {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.work-item.is-looping .work-loop {
  opacity: 1;
}

.work-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  /* Generous top padding gives the gradient a long ramp, so the caption stays
     legible even over a bright frame. */
  padding: 3.25rem 1.4rem 1.25rem;
  color: #fff6e7;
  background: linear-gradient(
    to top,
    rgba(7, 8, 10, 0.94) 0%,
    rgba(7, 8, 10, 0.78) 38%,
    rgba(7, 8, 10, 0.3) 74%,
    rgba(7, 8, 10, 0) 100%
  );
  pointer-events: none;
}

.work-caption .work-cat {
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.work-caption .work-title {
  margin-bottom: 0;
  color: #fff6e7;
  font-size: 1.15rem;
  line-height: 1.25;
}

.work-item--featured .work-caption {
  padding: 4.5rem 2rem 1.75rem;
}

.work-item--featured .work-caption .work-title {
  font-size: 1.75rem;
}

/* The summary rides along on the lead tile and is a hover detail elsewhere, so
   a resting collage shows almost nothing but the work. */
.work-caption .work-summary {
  max-width: 46ch;
  margin-bottom: 0;
  margin-top: 0.5rem;
  color: rgba(255, 246, 231, 0.82);
  font-size: 0.85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .work-item:not(.work-item--featured) .work-caption .work-summary {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.4s ease, opacity 0.3s ease;
  }

  .work-item:not(.work-item--featured):hover .work-caption .work-summary,
  .work-item:not(.work-item--featured):focus-within .work-caption .work-summary {
    max-height: 4rem;
    margin-top: 0.5rem;
    opacity: 1;
  }
}

.work-overlay {
  z-index: 4;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.25rem;
  background-color: transparent;
}

.btn-work-explore {
  transform: none;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  color: #07080a;
  background-color: rgba(255, 246, 231, 0.94);
  box-shadow: 0 0.2rem 0.6rem rgba(7, 8, 10, 0.3);
}

.work-badge {
  z-index: 5;
}

/* Project modal — media first
   ---------------------------------------------------------------------------
   The work is video, so the stage takes the room and the write-up sits in a
   narrow fixed column beside it instead of splitting the modal in half. */
.project-modal {
  width: 95%;
  max-width: min(95vw, 1560px);
  max-height: 93vh;
}

.modal-wrapper {
  padding: 2rem;
  max-height: 93vh;
}

.modal-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: 2rem;
}

.modal-hero-media {
  /* A cinematic stage capped against the viewport so the thumbnail collage and
     the first lines of copy stay visible without scrolling. */
  aspect-ratio: 16 / 9;
  max-height: 64vh;
  margin-bottom: 0.75rem;
  background: #07080a;
}

/* Thumbnails become a collage grid under the stage rather than a strip that
   scrolls sideways. */
.modal-thumbnails {
  display: grid;
  /* auto-fit, not auto-fill: the actual media stretches to fill the row instead
     of leaving empty tracks at the end of the collage. */
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 0.6rem;
  overflow: visible;
  padding-bottom: 0;
}

.modal-thumb {
  width: auto;
}

/* Copy column: present, but no longer half the window. */
.modal-title {
  font-size: clamp(1.35rem, 1.6vw, 1.8rem);
  margin-bottom: 1.25rem;
}

.modal-meta-table {
  gap: 0.7rem;
  padding: 1rem 0;
  margin-bottom: 1.25rem;
}

.modal-meta-row .meta-value {
  font-size: 0.86rem;
}

.modal-description-text {
  font-size: 0.9rem;
  line-height: 1.6;
}

.modal-close-btn {
  top: 1rem;
  right: 1rem;
}

/* Below this the fixed copy column would squeeze the stage, so it stacks. */
@media (max-width: 1024px) {
  .modal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .modal-hero-media {
    max-height: 52vh;
  }
}

@media (max-width: 640px) {
  .modal-wrapper {
    padding: 3rem 1rem 1.5rem;
  }

  /* Every pixel of width counts for a 2.4:1 frame on a phone, so the stage
     bleeds to the modal edges. */
  .modal-hero-media {
    width: auto;
    margin-inline: -1rem;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .modal-thumbnails {
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.45rem;
  }

  .modal-thumb-video-marker {
    left: 0.25rem;
    bottom: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.46rem;
  }
}

/* VFX comparison labels
   ---------------------------------------------------------------------------
   Labels live in their own strip element now. On wide screens it is laid over
   the top of the frame exactly as before; on phones it becomes a real row
   above the video (see the mobile block below). */
.slider-labels {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

.slider-label {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}

@media (max-width: 768px) {
  /* Seven filter pills never fit one phone-width row. Wrapping keeps every
     filter reachable instead of clipping the last ones off the pill. */
  .section-header-flex {
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  /* A fixed three-column grid keeps the controls balanced in every language
     instead of letting flex wrapping leave a stray pill at the edge. */
  .filter-controls {
    display: grid;
    /* minmax(0, 1fr) so a long label (Japanese runs widest) shrinks its track
       instead of pushing the whole pill past the container edge. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.35rem;
    padding: 0.45rem;
    border-radius: 1rem;
  }

  .btn-filter {
    padding: 0.5rem 0.4rem;
    font-size: 0.74rem;
    line-height: 1.25;
  }

  /* Animation is the seventh and final filter, so it sits under the middle
     column rather than looking detached at the edge of its own row. */
  .btn-filter:last-child {
    grid-column: 2;
  }

  /* Collage on a phone: one column, tiles sized by aspect ratio so the media
     always fits the screen width and the page only ever scrolls down. */
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .work-rail {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-columns: auto;
    overflow: visible;
    padding: 0;
    scrollbar-width: auto;
  }

  .work-rail-control {
    display: none !important;
  }

  /* One aspect for every tile: the lead piece should not end up the shortest
     item in the column just because its frame is wider. */
  .work-item,
  .work-item--featured {
    aspect-ratio: 4 / 3;
  }

  .work-caption,
  .work-item--featured .work-caption {
    padding: 2.75rem 1rem 0.9rem;
  }

  .work-caption .work-cat {
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    margin-bottom: 0.2rem;
  }

  .work-caption .work-title,
  .work-item--featured .work-caption .work-title {
    font-size: 1.05rem;
  }

  .work-caption .work-summary {
    display: none;
  }

  .work-badge {
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.68rem;
  }

  .work-overlay {
    padding: 0.8rem;
  }

  /* Labels drop out of the overlay and into a strip above the video. */
  .slider-labels {
    position: static;
    padding: 0.55rem 0.65rem;
    gap: 0.5rem;
  }

  .slider-label {
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
  }

  /* Icon-only controls: the round plates ate a large share of a phone-width
     frame. A hard shadow keeps the glyph readable over both the bright plate
     and the dark graded half of the comparison. */
  .vfx-expand-button,
  .vfx-play-button,
  .vfx-expand-button:hover,
  .vfx-play-button:hover,
  .vfx-expand-button:focus-visible,
  .vfx-play-button:focus-visible {
    width: 2.1rem;
    height: 2.1rem;
    bottom: 0.55rem;
    color: #fff6e7;
    background: none;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    /* Tight shadow first: it reads as an outline on the blown-out side of the
       comparison, where a soft glow alone would wash out. */
    filter:
      drop-shadow(0 0 1px rgba(7, 8, 10, 0.95))
      drop-shadow(0 1px 2px rgba(7, 8, 10, 0.9))
      drop-shadow(0 0 8px rgba(7, 8, 10, 0.55));
  }

  .vfx-expand-button {
    right: 0.5rem;
  }

  .vfx-play-button {
    right: 3.15rem;
  }

  .vfx-expand-button svg,
  .vfx-play-button svg {
    width: 22px;
    height: 22px;
  }

  .vfx-compare-hint {
    bottom: 0.7rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.62rem;
  }
}

@media (max-width: 380px) {
  .btn-filter {
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
  }
}

/* Two columns once three would squeeze the tiles; the lead piece keeps the
   full width at every size. */
@media (max-width: 1024px) and (min-width: 769px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-item--featured {
    aspect-ratio: 16 / 9;
  }

  .work-rail {
    grid-template-rows: auto;
    grid-auto-columns: min(62vw, 22rem);
  }
}

/* Touch devices never fire the hover overlay, so a tile gave no sign that it
   opens anything — keep the Details chip permanently visible there. */
@media (hover: none), (pointer: coarse) {
  .work-overlay {
    opacity: 1;
  }

  .btn-work-explore {
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
  }
}

/* Portrait-video project gallery
   ---------------------------------------------------------------------------
   Enabled only for projects with mediaLayout: "vertical-grid" in script.js.
   The existing landscape modal remains unchanged for every other project. */
#modal-hero-media[hidden],
#modal-thumbnails[hidden],
.modal-vertical-gallery[hidden],
.modal-horizontal-gallery[hidden] {
  display: none !important;
}

.modal-vertical-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.9rem;
  width: 100%;
}

.modal-vertical-card {
  position: relative;
  width: 100%;
  min-width: 0;
}

.modal-vertical-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vertical-video-aspect, 9 / 16);
  overflow: hidden;
  background: #07080a;
  border: 1px solid var(--border-color);
  border-radius: 0.55rem 1.2rem 0.55rem 1.2rem;
  box-shadow: 0 0.7rem 1.8rem rgba(7, 8, 10, 0.18);
}

.modal-vertical-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #07080a;
  cursor: pointer;
}

.modal-vertical-index {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 1.65rem;
  padding: 0 0.45rem;
  color: #fff6e7;
  background: rgba(7, 8, 10, 0.72);
  border: 1px solid rgba(255, 246, 231, 0.24);
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}


/* Process + verticals layout
   ---------------------------------------------------------------------------
   Enabled for projects with mediaLayout: "process-verticals". The landscape
   process clip and both portrait before/after clips are shown together in one
   equal-height row — nothing hidden behind a toggle or scroll. The container's
   aspect-ratio makes the row width-driven, so every clip keeps its native
   proportions at a shared height. (16/9 + 2 × 406/720 ≈ 2.91; the container
   ratio adds slack for the two gaps.) On narrow screens the row wraps: the
   process clip takes the full width and the two verticals sit side by side. */
.modal-vertical-gallery--pv {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  aspect-ratio: 3.15 / 1;
  max-height: 60vh;
}

.modal-pv-process,
.modal-pv-vertical {
  position: relative;
  height: 100%;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  background: #07080a;
  border: 1px solid var(--border-color);
  border-radius: 0.55rem 1.2rem 0.55rem 1.2rem;
  box-shadow: 0 0.7rem 1.8rem rgba(7, 8, 10, 0.18);
}

.modal-pv-process {
  aspect-ratio: 16 / 9;
}

.modal-pv-vertical {
  aspect-ratio: 406 / 720;
}

.modal-pv-process-video,
.modal-pv-vertical-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #07080a;
  cursor: pointer;
}

.modal-vertical-play,
.modal-pv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  color: #fff6e7;
  background: rgba(7, 8, 10, 0.76);
  border: 1px solid rgba(255, 246, 231, 0.56);
  border-radius: 0.45rem 0.8rem 0.45rem 0.8rem;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.25rem 0.9rem rgba(7, 8, 10, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal-vertical-play span,
.modal-pv-play span {
  display: block;
  margin-left: 0.1rem;
  font-size: 0.72rem;
  line-height: 1;
}

.modal-vertical-play:hover,
.modal-vertical-play:focus-visible,
.modal-pv-play:hover,
.modal-pv-play:focus-visible {
  background: rgba(7, 8, 10, 0.9);
  border-color: var(--accent-color);
  color: var(--accent-color);
  outline: none;
  transform: translate(-50%, -50%) scale(1.05);
}

.modal-vertical-card.has-started .modal-vertical-play,
.modal-pv-process.has-started .modal-pv-play,
.modal-pv-vertical.has-started .modal-pv-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* On narrow screens the row wraps: the process clip spans the full width and
   the two verticals share the row below it. */
@media (max-width: 640px) {
  .modal-vertical-gallery--pv {
    flex-wrap: wrap;
    aspect-ratio: auto;
    max-height: none;
    gap: 0.6rem;
  }

  .modal-pv-process {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
  }

  .modal-pv-vertical {
    flex: 1 1 0;
    width: auto;
    height: auto;
    max-width: calc(50% - 0.3rem);
  }
}

.modal-thumb-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff6e7;
  font-size: 1.2rem;
}

/* Landscape images that accompany a portrait-video project. */
.modal-horizontal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  width: 100%;
  margin-top: 1rem;
}

.modal-horizontal-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #07080a;
  border: 1px solid var(--border-color);
  border-radius: 0.55rem 1.2rem 0.55rem 1.2rem;
  box-shadow: 0 0.7rem 1.8rem rgba(7, 8, 10, 0.14);
}

.modal-horizontal-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Three portrait clips still fit comfortably when the info column drops below. */
@media (max-width: 1024px) {
  .modal-vertical-gallery {
    gap: 0.75rem;
  }
}

/* On phones the portrait clips become a swipeable row instead of three very
   narrow columns or one excessively long stack. */
@media (max-width: 700px) {
  .modal-vertical-gallery {
    display: flex;
    gap: 0.8rem;
    width: auto;
    margin-inline: -0.1rem;
    padding: 0.2rem 0.1rem 0.8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(24, 61, 67, 0.1);
  }

  .modal-vertical-gallery::-webkit-scrollbar {
    height: 5px;
  }

  .modal-vertical-gallery::-webkit-scrollbar-track {
    background: rgba(24, 61, 67, 0.1);
    border-radius: 99px;
  }

  .modal-vertical-gallery::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 99px;
  }

  .modal-vertical-card {
    flex: 0 0 min(72vw, 18rem);
    scroll-snap-align: center;
  }

  .modal-vertical-play,
  .modal-pv-play {
    width: 2.25rem;
    height: 2.25rem;
  }

  .modal-horizontal-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 0.85rem;
  }
}

/* Video states ------------------------------------------------------------
   A clip is always announced before it starts: the poster remains visible,
   while a play affordance and a compact loading state make slow connections
   feel intentional rather than like an empty frame. */
.vfx-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.5rem;
  color: #fff6e7;
  background:
    linear-gradient(135deg, rgba(7, 8, 10, 0.78), rgba(7, 8, 10, 0.36)),
    url('assets/images/work_cleanup_after.png') center / cover;
  text-align: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.vfx-video-placeholder.is-ready {
  opacity: 0;
  visibility: hidden;
}

.vfx-video-placeholder-mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding-left: 0.12rem;
  color: var(--text-main);
  background: rgba(255, 246, 231, 0.94);
  border: 1px solid rgba(24, 61, 67, 0.22);
  border-radius: 50%;
  box-shadow: 0 0.75rem 2rem rgba(7, 8, 10, 0.3);
}

.vfx-video-placeholder-label,
.modal-video-gate-type {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vfx-video-placeholder-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.5rem;
}

.vfx-video-placeholder .video-loader-spinner {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 2px;
}

.vfx-video-placeholder .video-loader-text {
  font-size: 0.62rem;
}

.modal-video-gate {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: #fff6e7;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.modal-video-gate[hidden] {
  display: none;
}

.modal-video-gate.is-ready {
  opacity: 0;
  visibility: hidden;
}

.modal-video-gate-type {
  display: none;
}

.modal-video-gate-play {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  color: #fff6e7;
  background: rgba(7, 8, 10, 0.76);
  border: 1px solid rgba(255, 246, 231, 0.56);
  border-radius: 0.45rem 0.8rem 0.45rem 0.8rem;
  box-shadow: 0 0.25rem 0.9rem rgba(7, 8, 10, 0.3);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.modal-video-gate-play > span:first-child {
  display: block;
  margin-left: 0.1rem;
  font-size: 0.72rem;
  line-height: 1;
}

.modal-video-gate-play > [data-i18n] {
  display: none;
}

.modal-video-gate-play:hover,
.modal-video-gate-play:focus-visible {
  color: var(--accent-color);
  background: rgba(7, 8, 10, 0.9);
  border-color: var(--accent-color);
  outline: none;
  transform: translate(-50%, -50%) scale(1.05);
}

.modal-video-gate.is-loading .modal-video-gate-play {
  opacity: 0;
  pointer-events: none;
}

.modal-video-gate-loader,
.project-video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  color: #fff6e7;
  background: rgba(7, 8, 10, 0.7);
  border: 1px solid rgba(255, 246, 231, 0.23);
  border-radius: 999px;
  box-shadow: 0 0.6rem 1.5rem rgba(7, 8, 10, 0.3);
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.modal-video-gate.is-loading .modal-video-gate-loader,
.modal-pv-process.is-loading .project-video-loader,
.modal-pv-vertical.is-loading .project-video-loader,
.modal-vertical-card.is-loading .project-video-loader {
  opacity: 1;
  visibility: visible;
}

.modal-video-gate-loader .video-loader-spinner,
.project-video-loader-spinner {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 246, 231, 0.3);
  border-top-color: #fff6e7;
  border-radius: 50%;
  animation: video-loader-spin 0.85s linear infinite;
}

.modal-video-gate-loader .video-loader-text,
.project-video-loader-text {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: none;
}

.modal-pv-process.is-loading .modal-pv-play,
.modal-pv-vertical.is-loading .modal-pv-play,
.modal-vertical-card.is-loading .modal-vertical-play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .modal-video-gate-play {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Chapter typography -------------------------------------------------------
   Major page sections share one editorial scale without repeating the
   animated collaboration treatment everywhere. The full-bleed titles occupy
   existing header whitespace; contained sections keep their original grids. */
.chapter-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

html:lang(ru) .chapter-title {
  padding-top: 0.07em;
  font-family: 'Golos Text', sans-serif;
  font-weight: 900;
  line-height: 0.88;
}

html:lang(zh) .chapter-title {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
}

html:lang(zh) .chapter-title,
html:lang(ja) .chapter-title {
  overflow: visible;
  padding-top: 0.12em;
  padding-bottom: 0.14em;
  line-height: 1;
}

.services-section .chapter-title,
.work-section .chapter-title,
.before-after-section .chapter-title {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding-right: clamp(1rem, 2.5vw, 3rem);
  padding-left: clamp(1rem, 2.5vw, 3rem);
  color: transparent;
  background:
    linear-gradient(
      105deg,
      var(--text-main) 4%,
      var(--accent-teal) 48%,
      var(--accent-color) 76%,
      var(--text-main) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(4.25rem, 7.6vw, 9.25rem);
  line-height: 0.82;
  letter-spacing: -0.078em;
  text-align: center;
  white-space: nowrap;
  filter: drop-shadow(0 10px 28px rgba(24, 61, 67, 0.1));
}

.work-section .chapter-title {
  font-size: clamp(4.5rem, 8.6vw, 10.25rem);
}

.before-after-section .chapter-title {
  font-size: clamp(3.9rem, 6.5vw, 8rem);
}

html:lang(ru) .services-section .chapter-title,
html:lang(ru) .work-section .chapter-title {
  font-size: clamp(3.8rem, 6.6vw, 8rem);
}

html:lang(ru) .before-after-section .chapter-title {
  font-size: clamp(3.45rem, 5.35vw, 6.5rem);
}

html:lang(zh) .services-section .chapter-title,
html:lang(zh) .work-section .chapter-title {
  font-size: clamp(5.5rem, 14vw, 12rem);
}

html:lang(zh) .before-after-section .chapter-title {
  font-size: clamp(4.8rem, 10vw, 10rem);
}

html:lang(ja) .services-section .chapter-title,
html:lang(ja) .work-section .chapter-title {
  font-size: clamp(4.8rem, 8.5vw, 10rem);
}

html:lang(ja) .before-after-section .chapter-title {
  font-size: clamp(4rem, 6.8vw, 8.25rem);
}

.services-section {
  padding-top: clamp(3.25rem, 5vw, 4.5rem);
}

.services-section .section-header {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.services-section .services-title {
  margin-bottom: 0;
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

html:lang(ru) .services-section .services-title {
  padding-top: 0.06em;
  font-family: 'Golos Text', sans-serif;
}

html:lang(zh) .services-section .services-title {
  padding-block: 0.08em 0.12em;
  font-family: 'Noto Sans SC', sans-serif;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.work-section {
  padding-top: clamp(3.25rem, 5vw, 4.5rem);
}

.work-section .section-header-flex {
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.work-section .section-header-flex > div:first-child {
  width: 100%;
}

.before-after-section {
  padding-top: clamp(3.25rem, 5vw, 4.5rem);
}

.before-after-section .chapter-title {
  margin-bottom: 0;
}

.before-after-section .section-subtitle {
  margin: clamp(1rem, 2vw, 1.5rem) auto clamp(2.5rem, 4vw, 3.5rem);
}

.nomadcanvas-promo .chapter-title,
.contact-section .chapter-title {
  font-size: clamp(3rem, 4.5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.archive-section .chapter-title {
  max-width: 10ch;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
}

.nomadcanvas-promo .chapter-title {
  max-width: 9ch;
  margin-bottom: 0.8rem;
}

.contact-section .chapter-title {
  max-width: 10ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3rem, 4.15vw, 5rem);
}

@media (max-width: 900px) {
  .services-section .chapter-title,
  .work-section .chapter-title,
  .before-after-section .chapter-title,
  html:lang(ru) .services-section .chapter-title,
  html:lang(ru) .work-section .chapter-title,
  html:lang(ru) .before-after-section .chapter-title,
  html:lang(zh) .services-section .chapter-title,
  html:lang(zh) .work-section .chapter-title,
  html:lang(zh) .before-after-section .chapter-title,
  html:lang(ja) .services-section .chapter-title,
  html:lang(ja) .work-section .chapter-title,
  html:lang(ja) .before-after-section .chapter-title {
    font-size: clamp(3.25rem, 8.5vw, 5rem);
  }

  .archive-section .chapter-title {
    max-width: 15ch;
  }
}

@media (max-width: 768px) {
  .services-section,
  .work-section,
  .before-after-section {
    padding-top: 4rem;
  }

  .services-section .chapter-title,
  .work-section .chapter-title,
  .before-after-section .chapter-title {
    width: auto;
    max-width: 12ch;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    font-size: clamp(2.65rem, 10.5vw, 4rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
    text-align: left;
    white-space: normal;
  }

  html:lang(ru) .services-section .chapter-title,
  html:lang(ru) .work-section .chapter-title,
  html:lang(ru) .before-after-section .chapter-title,
  html:lang(zh) .services-section .chapter-title,
  html:lang(zh) .work-section .chapter-title,
  html:lang(zh) .before-after-section .chapter-title,
  html:lang(ja) .services-section .chapter-title,
  html:lang(ja) .work-section .chapter-title,
  html:lang(ja) .before-after-section .chapter-title {
    font-size: clamp(2.65rem, 10.5vw, 4rem);
  }

  .before-after-section .chapter-title {
    max-width: 11ch;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .nomadcanvas-promo .chapter-title,
  .contact-section .chapter-title {
    font-size: clamp(2.65rem, 10vw, 4rem);
    line-height: 0.94;
    letter-spacing: -0.05em;
  }

  .archive-section .chapter-title {
    max-width: 15ch;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Five language codes (EN · RU · FR · ZH · JA) need a tighter switcher on
   narrow phones, otherwise the header pushes the theme and menu buttons off
   screen. */
@media (max-width: 560px) {
  .header-left {
    gap: 0.75rem;
  }

  .lang-selector {
    gap: 0.06rem;
    padding: 0.18rem;
  }

  .btn-lang {
    width: 23px;
    min-height: 23px;
    font-size: 0.6rem;
    letter-spacing: 0.01em;
  }
}

/* Narrowest phones (320px): claw back header padding so the switcher, theme
   toggle and menu button all stay on screen. */
@media (max-width: 400px) {
  .main-header {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .header-left {
    gap: 0.5rem;
  }

  .btn-lang {
    width: 20px;
  }
}