/* ═══════════════════════════════════════════════════════════════
   FORTUNA FILM — AWWWARDS-LEVEL DESIGN OVERHAUL
   Premium CSS layer on top of existing TailwindCSS build
   ═══════════════════════════════════════════════════════════════ */

/* Native cross-document view transitions (Chrome/Edge 126+; other
   browsers just ignore this and navigate as before — no fallback
   needed). Elements sharing a view-transition-name across the two
   pages morph into each other instead of a hard cut. */
@view-transition {
  navigation: auto;
}

/* ─── 0. BASE OVERRIDES ────────────────────────────────────────── */
html {
  scroll-behavior: auto !important; /* Lenis handles smooth scroll */
  scroll-snap-type: y proximity; /* gentle assist only where .case-section opts in */
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Improved anti-aliasing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ─── 1. ULTRA-SLEEK CINEMATIC PRELOADER ───────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: all;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.95s cubic-bezier(0.87, 0, 0.13, 1),
              opacity 0.6s ease;
  will-change: clip-path, opacity;
}

.preloader.preloader--exiting {
  clip-path: inset(0 0 100% 0);
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.preloader.preloader--exiting .preloader__inner {
  transform: translateY(-40px) scale(0.96);
  opacity: 0;
}

.preloader__logo {
  font-family: var(--font-jetbrains-mono, 'JetBrains Mono', monospace);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.preloader__logo-mark {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signal, #FF4423);
  box-shadow: 0 0 16px var(--signal, #FF4423);
  display: inline-block;
  animation: preloader-pulse 2s infinite;
}

.preloader__logo span {
  color: var(--signal, #FF4423);
}

.preloader__bar-track {
  width: clamp(160px, 25vw, 320px);
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.preloader__bar-fill {
  height: 100%;
  width: 0%;
  background: var(--signal, #FF4423);
  box-shadow: 0 0 16px var(--signal, #FF4423);
  transition: width 0.12s ease-out;
}

.preloader__counter {
  font-family: var(--font-jetbrains-mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.preloader__status {
  font-family: var(--font-jetbrains-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--signal, #FF4423);
  opacity: 0.7;
}

@keyframes preloader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ─── 2. SCROLL PROGRESS BAR ─────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--signal, #FF4423), #FF8F70);
  z-index: 9998;
  transition: none;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255,68,35,0.6), 0 0 30px rgba(255,68,35,0.2);
}

/* ─── 3. ENHANCED HERO ────────────────────────────────────────── */

/* Hero word reveal — each word clips from below */
.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero-word-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

/* Hero eyebrow dash animation */
.hero-eyebrow-dash {
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--signal, #FF4423);
  vertical-align: middle;
  margin: 0 0.8em;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-eyebrow-dash.is-visible {
  width: 3em;
}

/* Floating particles in hero */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255,68,35,0.4);
  border-radius: 50%;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Hero scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
  opacity: 0;
}

.hero-scroll-indicator__text {
  font-family: var(--font-jetbrains-mono, monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.35);
  writing-mode: vertical-rl;
}

.hero-scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--signal, #FF4423), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ─── 6. STATS COUNTER ANIMATION ─────────────────────────────── */
.stat-number {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.stat-number[data-counted="true"] .stat-digit {
  transform: translateY(0);
}

/* ─── 7. MAGNETIC BUTTONS ─────────────────────────────────────── */
.magnetic-btn {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.magnetic-btn__inner {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ─── 8. 3D TILT CARDS (Team) ────────────────────────────────── */
.tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.tilt-card__inner {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card__shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,0.06),
    transparent 40%
  );
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: inherit;
}

.tilt-card:hover .tilt-card__shine {
  opacity: 1;
}

/* ─── 9. SECTION REVEAL ANIMATIONS ─────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.975);
  transition: opacity .75s cubic-bezier(0.22, 1, 0.36, 1),
              transform .75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-clip.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Stagger children delay */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.08s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.16s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.24s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.32s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.40s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.48s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.56s; }

/* ─── 10. AURORA GRADIENT FOOTER CTA ────────────────────────── */
.aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.aurora-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: aurora-drift 12s ease-in-out infinite alternate;
}

.aurora-bg__blob--1 {
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(255,68,35,0.25), transparent 70%);
  top: -20%;
  left: -10%;
}

.aurora-bg__blob--2 {
  width: 40vw;
  height: 40vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%);
  bottom: -30%;
  right: -10%;
  animation-delay: -4s;
  animation-duration: 15s;
}

.aurora-bg__blob--3 {
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(circle, rgba(255,143,112,0.15), transparent 70%);
  top: 30%;
  right: 20%;
  animation-delay: -8s;
  animation-duration: 18s;
}

@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
  100% { transform: translate(10px, -10px) scale(1.05); }
}

/* ─── 11. ENHANCED GRAIN ANIMATION ─────────────────────────── */
.grain {
  animation: grain-shift 0.5s steps(6) infinite !important;
  opacity: 0.035 !important;
}

@keyframes grain-shift {
  0%, 100% { background-position: 0 0; }
  16% { background-position: -5% -10%; }
  33% { background-position: 10% 5%; }
  50% { background-position: -10% 15%; }
  66% { background-position: 15% -5%; }
  83% { background-position: -5% 10%; }
}

/* ─── 12. CUSTOM CURSOR ──────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none;
  border-radius: 9999px;
  opacity: 0;
  will-change: transform;
  mix-blend-mode: difference;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0)
             translate(-50%, -50%)
             scale(var(--cs, 1)) !important;
}

.cursor-dot {
  z-index: 201;
  width: 6px;
  height: 6px;
  background: var(--signal, #FF4423);
  transition: opacity .25s ease;
}

.cursor-ring {
  z-index: 200;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-strong, rgba(246,243,236,0.2));
  transition: opacity .25s ease,
              width .25s cubic-bezier(0.34,1.56,0.64,1),
              height .25s cubic-bezier(0.34,1.56,0.64,1),
              border-color .2s ease;
}

/* Only shown once the pointer has actually moved — otherwise the ring
   parks itself in the top-left corner of the page. */
body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring { opacity: 1; }

body.cursor-hover .cursor-ring {
  --cs: 1.55;
  border-color: var(--signal, #FF4423);
}

body.cursor-video .cursor-ring {
  width: 76px;
  height: 76px;
  border-color: var(--signal, #FF4423);
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ─── 13. ENHANCED VIDEO TILES ─────────────────────────────── */
.video-tile-btn {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0) rotateY(0);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease !important;
}

/* ─── 14. GLOWING DIVIDER LINES ────────────────────────────── */
.glow-line {
  position: relative;
}

.glow-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,68,35,0.3) 20%,
    rgba(255,68,35,0.6) 50%,
    rgba(255,68,35,0.3) 80%,
    transparent
  );
  opacity: 0;
  transition: opacity 1s ease;
}

.glow-line.is-visible::after {
  opacity: 1;
}

/* ─── 16. ENHANCED NAV MORPH ────────────────────────────────── */
header .pointer-events-auto {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled state nav — glass morphism pill */
header.is-scrolled .pointer-events-auto {
  max-width: 820px !important;
  border-radius: 9999px !important;
  background: rgba(10, 10, 10, 0.75) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  margin-top: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Progress bar in nav */
header.is-scrolled .pointer-events-auto .absolute.bottom-0 {
  opacity: 1 !important;
}

/* ─── 17. SECTION HEADING OVERRIDES ────────────────────────── */
.heading-eyebrow,
.heading-title {
  opacity: 1 !important; /* Override the inline opacity: 0, we handle reveal in JS */
}

/* ─── 18. RESPONSIVE REFINEMENTS ─────────────────────────── */
@media (max-width: 768px) {
  .hero-scroll-indicator {
    display: none;
  }
  
  header.is-scrolled .pointer-events-auto {
    max-width: calc(100% - 2rem) !important;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ─── 19. PERFORMANCE HINTS ──────────────────────────────── */
.hero-frame video {
  will-change: transform;
}

section {
  will-change: auto;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal-up,
  .reveal-left,
  .reveal-scale,
  .reveal-clip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  
  .preloader {
    display: none !important;
  }
}

/* ─── 20. VIDEO MODAL ENHANCEMENT ─────────────────────────── */
/* Make the existing video overlay more cinematic */
[class*="bg-black/95"] {
  backdrop-filter: blur(20px) saturate(0.5);
  -webkit-backdrop-filter: blur(20px) saturate(0.5);
}

/* ─── 21. PHOTO LIGHTBOX MODAL ───────────────────────────────── */
html.photo-lightbox-open,
html.photo-lightbox-open body {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(25px) saturate(1.2);
  -webkit-backdrop-filter: blur(25px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.photo-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.94);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-lightbox.active .photo-lightbox__content {
  transform: scale(1);
}

.photo-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 68, 35, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.photo-lightbox__caption {
  margin-top: 1rem;
  font-family: var(--font-jetbrains-mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

.photo-lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10001;
}

.photo-lightbox__close:hover {
  background: var(--signal, #FF4423);
  border-color: var(--signal, #FF4423);
  transform: rotate(90deg) scale(1.1);
}

.photo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10001;
}

.photo-lightbox__nav--prev {
  left: 2rem;
}

.photo-lightbox__nav--next {
  right: 2rem;
}

.photo-lightbox__nav:hover {
  background: var(--signal, #FF4423);
  border-color: var(--signal, #FF4423);
  transform: translateY(-50%) scale(1.1);
}

/* ─── 22. LIVE STATUS BADGE ─────────────────────────────────── */
.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.hero-live-pill:hover {
  border-color: rgba(255, 68, 35, 0.4);
  background: rgba(255, 68, 35, 0.08);
}

.live-dot {
  position: relative;
  display: flex;
  width: 8px;
  height: 8px;
}

.live-dot__ping {
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: var(--signal, #FF4423);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.live-dot__center {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  background-color: var(--signal, #FF4423);
  box-shadow: 0 0 8px var(--signal, #FF4423);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ─── 23. SOUNDWAVE VISUALIZER ──────────────────────────────── */
.soundwave-container {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}

.soundwave-bar {
  width: 2px;
  background: var(--signal, #FF4423);
  border-radius: 1px;
  animation: soundwave-pulse 1.2s ease-in-out infinite alternate;
}

.soundwave-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.soundwave-bar:nth-child(2) { height: 90%; animation-delay: 0.3s; }
.soundwave-bar:nth-child(3) { height: 60%; animation-delay: 0.2s; }
.soundwave-bar:nth-child(4) { height: 100%; animation-delay: 0.4s; }

@keyframes soundwave-pulse {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* ─── 24. SELECTION HIGHLIGHT & SCROLLBAR ───────────────────── */
::selection {
  background: var(--signal, #FF4423);
  color: #000;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid #050505;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--signal, #FF4423);
}


/* ─── 25. OVERLAY SCROLL LOCK ─────────────────────────────── */
/* One lock for every overlay (video modal + photo lightbox). */
html.scroll-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html.scroll-locked body {
  overflow: hidden;
  touch-action: none;
}

/* ─── 26. IMAGE FADE-IN ───────────────────────────────────── */
/* Stops decoded images from popping in over the layout. */
html.js img {
  opacity: 1;
  transition: opacity .5s ease;
}

html.js img.img-ready { opacity: var(--img-opacity, 1); }

@media (prefers-reduced-motion: reduce) {
  html.js img { opacity: 1; transition: none; }
}

/* ─── 27. HERO VIDEO ──────────────────────────────────────── */
/* The poster carries first paint; the loop fades over it once it
   can actually play, so the hero never flashes black. */
.js .hero-video {
  opacity: 1;
  transition: opacity .8s ease;
  will-change: opacity;
}

.hero-video.is-playing { opacity: 1; }

/* ─── 28. MENU OPEN ───────────────────────────────────────── */
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   29. LATEST RELEASE — full-bleed cinematic frame
   Hand-authored block, so it gets real CSS rather than Tailwind
   utilities (this page ships a pre-built stylesheet; classes that
   weren't in the original source were never compiled).
   ═══════════════════════════════════════════════════════════════ */
.latest {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--line, rgba(246,243,236,0.1));
  isolation: isolate;
}

.latest__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.latest__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s ease,
              opacity .6s ease;
  filter: saturate(0.92) contrast(1.05);
}

.latest:hover .latest__img { transform: scale(1.075); filter: saturate(1) contrast(1.02); }

/* Legibility scrim — bottom third only, so the frame stays vibrant
   instead of sitting under a flat dark tint (matches .case-cover). */
.latest__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 20%, transparent 42%);
}

.latest__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 45%, transparent 55%, rgba(0,0,0,.4) 100%);
}

/* Top status bar */
.latest__bar {
  position: absolute;
  top: clamp(5.5rem, 11vh, 8.5rem);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(246,243,236,.55);
}

.latest__live { position: relative; display: inline-flex; width: 7px; height: 7px; flex: none; }
.latest__live-dot,
.latest__live-ping {
  position: absolute; inset: 0; border-radius: 999px; background: var(--signal, #FF4423);
}
.latest__live-ping { animation: latest-ping 2.4s cubic-bezier(0,0,.2,1) infinite; }

@keyframes latest-ping {
  0%   { transform: scale(1);   opacity: .8; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

.latest__kicker { color: var(--signal, #FF4423); font-weight: 700; }
.latest__rule { flex: 1 1 auto; height: 1px; background: linear-gradient(to right, rgba(246,243,236,.22), transparent); }
.latest__date { flex: none; }

/* Content */
.latest__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 62rem;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 8vh, 6rem);
  pointer-events: none;
}

.latest__content > * { pointer-events: auto; }

.latest__tags {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.latest__tag {
  color: var(--signal, #FF4423);
  font-weight: 700;
}

.latest__dot { color: rgba(246,243,236,.3); }
.latest__spec { color: rgba(246,243,236,.5); }

.latest__title {
  margin: 0;
  font-family: var(--font-sans, ui-sans-serif, system-ui);
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.latest__title span { display: inline-block; }

.latest__artists {
  margin: 1.15rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(.8rem, 1.5vw, .95rem);
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,68,35,.92);
}

.latest__desc {
  margin: .9rem 0 0;
  max-width: 34rem;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 1.65;
  color: rgba(246,243,236,.66);
}

/* CTA */
.latest__cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding: .55rem 1.6rem .55rem .55rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(0.16,1,0.3,1);
}

.latest__cta:hover {
  border-color: #fff;
  background: rgba(255,255,255,.14);
  transform: translateY(-2px);
}

.latest__cta-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 999px;
  background: var(--signal, #FF4423);
  color: #0a0a0c;
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1);
}

.latest__cta-icon svg { width: 1.05rem; height: 1.05rem; margin-left: 2px; }
.latest__cta:hover .latest__cta-icon { transform: scale(1.08); }

.latest__cta-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Whole frame is clickable, sitting under the copy */
.latest__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 640px) {
  .latest { min-height: 88svh; }
  .latest__desc { display: none; }
  .latest__bar { font-size: 9px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .latest__img { transition: none; }
  .latest:hover .latest__img { transform: scale(1.04); }
  .latest__live-ping { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   30. HERO — video only, no overlay copy
   ═══════════════════════════════════════════════════════════════ */
#top { background: #000; }

/* ═══════════════════════════════════════════════════════════════
   31. VIDEO TILES — flat hover, no 3D skew
   ═══════════════════════════════════════════════════════════════ */
.video-tile-btn {
  transform: none !important;
  transform-style: flat;
  transition: box-shadow .45s ease, border-color .45s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   33. CLIENT LOGOS — bare grid, no cards
   ═══════════════════════════════════════════════════════════════ */
.clients {
  border-bottom: 1px solid var(--line, rgba(246,243,236,0.1));
  background: var(--bg, #0a0a0c);
  padding-block: clamp(4rem, 9vh, 7rem);
}

.clients__inner {
  margin-inline: auto;
  max-width: 1600px;
  padding-inline: clamp(1.5rem, 5vw, 2.5rem);
}

.clients__label {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--signal, #FF4423);
}

.clients__label span { color: rgba(246,243,236,.22); }

.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) { .clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .clients__grid { grid-template-columns: repeat(4, 1fr); } }

.client-cell { display: flex; align-items: center; justify-content: center; }

.client {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
}

button.client { cursor: pointer; }

.client__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Marks vary wildly in source color/brightness (near-black wordmarks
     next to solid-white ones) — grayscale alone left the dark ones
     unreadable. Force everything to the same light tone instead; the
     "solid block" look this used to have was actually the leaked
     img placeholder background (fixed above), not this filter. */
  filter: brightness(0) invert(1);
  --img-opacity: .55;
  opacity: var(--img-opacity);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

button.client:hover .client__img,
button.client:focus-visible .client__img {
  --img-opacity: 1;
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════
   34. PROCESS ICONS
   ═══════════════════════════════════════════════════════════════ */
.proc-icon__svg {
  width: 26px;
  height: 26px;
  color: var(--signal, #FF4423);
  opacity: .85;
  transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1),
              transform .9s cubic-bezier(0.22, 1, 0.36, 1);
}

.proc-row:hover .proc-icon__svg { opacity: 1; transform: scale(1.06); }

/* ═══════════════════════════════════════════════════════════════
   35. HOVER PACING — slower, longer ease
   The markup carries Tailwind duration-300/500/700 utilities, which
   read as snappy/abrupt. These override them on the surfaces that
   actually get hovered.
   ═══════════════════════════════════════════════════════════════ */
.video-tile-btn,
.video-tile-btn img,
.photo-tile,
.photo-tile img,
.proc-row,
.team-card,
.team-card img,
.case-section img,
.client-logo-btn {
  transition-duration: 1s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.photo-tile img,
.case-section img,
.video-tile-btn img {
  transition-property: transform, filter, opacity !important;
}

/* Scale back the pounce on hover so it reads as a drift, not a pop */
.proc-row:hover { transform: translateY(-2px); }
.team-card { transition-property: transform, border-color, box-shadow !important; }

@media (prefers-reduced-motion: reduce) {
  .video-tile-btn, .video-tile-btn img, .photo-tile, .photo-tile img,
  .proc-row, .team-card, .team-card img, .case-section img, .client-logo-btn,
  .client__img, .proc-icon__svg {
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   36. TEAM CARDS — settle, don't bounce
   ═══════════════════════════════════════════════════════════════ */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-fade.is-visible { opacity: 1; }

.team-card { transform: none !important; }

.tilt-card__shine { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-fade { opacity: 1; transition: none; }
  .team-card:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   38. HOVER PACING (inner layers)
   The tiles were already slowed, but their inner overlays and play
   badges still carried duration-300, which is what read as snappy.
   ═══════════════════════════════════════════════════════════════ */
.video-tile-btn *,
.photo-tile *,
.team-card * {
  transition-duration: .85s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .video-tile-btn *, .photo-tile *, .team-card * { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   39. HEADER BREAKPOINT
   The inline nav switches on at 768px, where the links, the wordmark
   and the CTA collide. Hold the burger until there's real room.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  header nav.hidden.items-center { display: none !important; }
  header a.group\/btn { display: none !important; }
  header button[aria-expanded] { display: flex !important; }
}

@media (min-width: 1024px) {
  header button[aria-expanded] { display: none !important; }
  header .fixed.inset-0.top-0.z-40 { display: none !important; }
}

/* Give the wordmark and links room to breathe once they are shown */
header nav.hidden.items-center { gap: clamp(1.25rem, 2.2vw, 2rem); }

/* ═══════════════════════════════════════════════════════════════
   40. LATEST RELEASE — clear the fixed header
   ═══════════════════════════════════════════════════════════════ */
.latest__bar { top: clamp(7rem, 14vh, 10rem); }

@media (max-width: 640px) {
  .latest__bar { top: 6.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   41. HOVER — no lift, no pounce
   The markup uses hover:-translate-y-* and group-hover:scale-110 on
   tiles, cards and logos. Those are what read as "flying up". Hover
   now stays put; only the image itself drifts, slowly.
   ═══════════════════════════════════════════════════════════════ */
.video-tile-btn:hover,
.photo-tile:hover,
.case-section .group\/tile:hover,
.client-logo-btn:hover,
button.client:hover,
.proc-row:hover,
#show-all-photos:hover {
  transform: none !important;
}

/* The play badge inside a tile: fade in, don't spring */
.video-tile-btn .group-hover\/tile\:scale-100,
.video-tile-btn [class*="scale-75"],
.video-tile-btn [class*="scale-110"] {
  transform: none !important;
}

/* Image drift — the one motion we keep */
.video-tile-btn > img,
.photo-tile > img,
.photo-tile img,
.case-section img {
  transform: scale(1.02) !important;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .5s ease !important;
}

.video-tile-btn:hover > img,
.photo-tile:hover img,
.case-section .group\/tile:hover img,
.case-section a:hover img {
  transform: scale(1.045) !important;
}

/* Logos: opacity only */
button.client:hover .client__img,
button.client:focus-visible .client__img {
  transform: none !important;
}

.client__img {
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Team cards smooth drift */

@media (prefers-reduced-motion: reduce) {
  .video-tile-btn > img, .photo-tile img, .case-section img {
    transition: none !important;
    transform: scale(1.02) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   42. PROJECT GRID — editorial, caption under the frame
   Every tile has the same four children (image, play overlay,
   caption, scrim). CSS grid stacks the first two in one cell and
   lifts the caption out from on top of the picture.
   ═══════════════════════════════════════════════════════════════ */
.case-section .video-tile-btn {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left;
}

.case-section .video-tile-btn > img {
  grid-area: 1 / 1;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(.72) brightness(.82) !important;
  transform: scale(1) !important;
  transition: filter 1.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .5s ease !important;
}

.case-section .video-tile-btn:hover > img {
  filter: saturate(1) brightness(1) !important;
  transform: scale(1) !important;
}

/* Play overlay shares the image cell */
.case-section .video-tile-btn > div:nth-child(2) {
  grid-area: 1 / 1;
  position: relative !important;
  inset: auto !important;
  align-self: stretch;
  justify-self: stretch;
  border-radius: 4px;
  background: transparent !important;
}

.case-section .video-tile-btn > div:nth-child(2) > div {
  width: 3.25rem !important;
  height: 3.25rem !important;
  border-color: rgba(246, 243, 236, .35) !important;
  background: rgba(10, 10, 12, .45) !important;
}

/* Scrim no longer has to carry text, so it just seats the image */
.case-section .video-tile-btn > div:nth-child(4) {
  grid-area: 1 / 1;
  border-radius: 4px;
  opacity: .35;
}

/* Caption drops below the frame */
.case-section .video-tile-btn > div:nth-child(3) {
  grid-area: 2 / 1;
  position: relative !important;
  inset: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 1.05rem .15rem 0 !important;
  border-top: 1px solid rgba(246, 243, 236, .09);
  margin-top: 1.05rem;
  transition: border-color 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-section .video-tile-btn:hover > div:nth-child(3) {
  border-color: rgba(255, 68, 35, .5);
}

/* Kicker: strip the chip, keep the words */
.case-section .video-tile-btn > div:nth-child(3) > span:first-child {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, .38) !important;
  transition: color 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-section .video-tile-btn:hover > div:nth-child(3) > span:first-child {
  color: var(--signal, #FF4423) !important;
}

/* Title */
.case-section .video-tile-btn > div:nth-child(3) h5,
.case-section .video-tile-btn > div:nth-child(3) > *:not(span:first-child) {
  padding: 0 !important;
  background: none !important;
  font-size: clamp(.95rem, 1.3vw, 1.08rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: rgba(246, 243, 236, .92) !important;
  text-shadow: none !important;
}

/* Roomier gutters so the grid breathes */
.case-section .grid { gap: clamp(1.75rem, 3vw, 2.75rem) !important; }

@media (prefers-reduced-motion: reduce) {
  .case-section .video-tile-btn > img { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   43. LUXURIOUS AWWWARDS HOVER PACING
   Soft, unhurried, silky-smooth transitions across all elements.
   Replaces fast snappy 300ms transitions with elegant 0.8s-1.2s easing.
   ═══════════════════════════════════════════════════════════════ */

/* Global transition easing overrides */
.photo-tile,
.photo-tile img,
.photo-tile button {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.photo-tile:hover img {
  transform: scale(1.025) !important;
  filter: brightness(0.92) contrast(1.02) !important;
}

/* Video tiles & case cards */
.video-tile-btn,
.video-tile-btn img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.video-tile-btn:hover img {
  transform: scale(1.02) !important;
}

/* Interactive buttons, filter pills, and navigation links */
button,
a,
.filter-btn,
.latest__cta,
nav a,
.btn-primary,
.btn-secondary {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover play badge inside video tiles */
.video-tile-btn .lucide-play,
.video-tile-btn div[class*="rounded-full"],
.video-tile-btn svg {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.video-tile-btn:hover div[class*="rounded-full"] {
  transform: scale(1.05) !important;
}

/* ═══════════════════════════════════════════════════════════════
   44. TEAM CARDS — Ultra-Smooth Cinematic Hover Pacing
   Soft, unhurried 1.2s - 1.4s cubic-bezier transition for image
   scale, brightness, contrast, card lift & overlay gradients.
   ═══════════════════════════════════════════════════════════════ */
.team-card {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, border-color, box-shadow;
}

.team-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.04) !important;
}

.team-card img {
  transform: scale(1.01) !important;
  filter: brightness(0.72) contrast(1.02) !important;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, filter;
}

.team-card:hover img {
  transform: scale(1.04) !important;
  filter: brightness(0.92) contrast(1.04) !important;
}

.team-card * {
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}




/* ═══════════════════════════════════════════════════════════════
   45. CINEMATIC MODALS, LIGHTBOX & SOUND TOGGLE
   ═══════════════════════════════════════════════════════════════ */

/* Video & Photo Fullscreen Overlay */
.cinema-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 6, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Video Modal Dialog */
.video-modal__container {
  position: relative;
  width: 92vw;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 68, 35, 0.15);
  background: #000;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-overlay.is-open .video-modal__container {
  transform: scale(1) translateY(0);
}

.video-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%);
  pointer-events: none;
}

.video-modal__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.video-modal__category {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ff4423;
  font-weight: 700;
}

.video-modal__title {
  font-family: var(--font-sans, sans-serif);
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.video-modal__close-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal__close-btn:hover {
  background: rgba(255, 68, 35, 0.9);
  border-color: rgba(255, 68, 35, 1);
  transform: scale(1.08) rotate(90deg);
}

/* Photo Lightbox */
.photo-lightbox__img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.9);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-overlay.is-open .photo-lightbox__img {
  transform: scale(1);
}

.photo-lightbox__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

.photo-lightbox__nav-btn--prev { left: 2rem; }
.photo-lightbox__nav-btn--next { right: 2rem; }

.photo-lightbox__nav-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.photo-lightbox__counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  backdrop-filter: blur(12px);
}

/* Spotlight track on cards */
.has-spotlight {
  position: relative;
}

.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 5;
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* Ensure all video and photo thumbnails are 100% visible */
.video-tile-btn img,
.photo-tile img,
.team-card img {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   46. BILDER SUBPAGE — clear the fixed header
   pt-32/md:pt-40 aren't in the pre-compiled Tailwind build, so they
   silently did nothing and the content sat under the fixed header.
   ═══════════════════════════════════════════════════════════════ */
.bilder-main {
  padding-top: clamp(7rem, 16vh, 11rem);
}

.bilder-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(246, 243, 236, .5);
  transition: color .3s ease;
  cursor: pointer;
}

.bilder-back:hover { color: var(--fg, #f6f3ec); }

@media (max-width: 640px) {
  .bilder-main { padding-top: 6.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   47. "BOKA ETT MÖTE" — orbiting-ring CTA
   Adapted from a Uiverse.io button (by Kaizen0000) — the original
   is pure Tailwind arbitrary-value utilities (bg-[conic-gradient(...)],
   animate-[spin_4s_linear_infinite], etc.), none of which exist in
   this site's pre-compiled Tailwind build, so it would render inert.
   Rebuilt as real CSS and recolored to the signal orange instead of
   the original's purple/blue/pink/yellow.
   ═══════════════════════════════════════════════════════════════ */
.cta-orbit {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s ease;
}

.cta-orbit__icon,
.cta-orbit__divider,
.cta-orbit__label {
  flex: none;
}

.cta-orbit:active { transform: scale(.96); }

.cta-orbit__ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  opacity: .35;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}

.cta-orbit:hover .cta-orbit__ring { opacity: .7; }

.cta-orbit__ring-spin {
  position: absolute;
  inset: -1000%;
  animation: cta-orbit-spin 4s linear infinite;
  background: conic-gradient(from 90deg at 50% 50%, #262626 0%, #171717 50%, #262626 100%);
  transition: background .5s ease;
}

.cta-orbit:hover .cta-orbit__ring-spin {
  background: conic-gradient(from 90deg at 50% 50%, var(--signal, #FF4423) 0%, #ffb84d 50%, var(--signal, #FF4423) 100%);
}

@keyframes cta-orbit-spin { to { transform: rotate(360deg); } }

.cta-orbit__surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(10, 10, 10, .92);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: background .3s ease;
  z-index: 0;
}

.cta-orbit:hover .cta-orbit__surface { background: rgba(20, 20, 20, .95); }

.cta-orbit__shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  transform: translateX(-150%) skewX(12deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cta-orbit:hover .cta-orbit__shine { transform: translateX(100%) skewX(12deg); }

.cta-orbit__icon {
  position: relative;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  color: rgba(246, 243, 236, .6);
  transition: color .4s ease;
}

.cta-orbit:hover .cta-orbit__icon { color: #fff; }

.cta-orbit__divider {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 1.35rem;
  background: rgba(255, 255, 255, .15);
  transition: background .4s ease;
}

.cta-orbit:hover .cta-orbit__divider { background: rgba(255, 255, 255, .3); }

.cta-orbit__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, .82);
  transition: color .4s ease;
  white-space: nowrap;
}

.cta-orbit:hover .cta-orbit__label { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cta-orbit__ring-spin { animation: none; }
  .cta-orbit__shine { transition: none; }
}

/* Compact variant for the header nav — hidden below the breakpoint
   where the nav switches from the mobile burger to inline links. */
.cta-orbit--nav {
  display: none;
  height: 2.5rem;
  padding: 0 1.1rem;
  gap: .6rem;
}

@media (min-width: 768px) {
  .cta-orbit--nav { display: inline-flex; }
}

.cta-orbit--nav .cta-orbit__icon { width: 1rem; height: 1rem; }
.cta-orbit--nav .cta-orbit__divider { height: 1rem; }
.cta-orbit--nav .cta-orbit__label { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   48. CONTACT — minimal icon-led rows
   ═══════════════════════════════════════════════════════════════ */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.contact-info-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: rgba(246, 243, 236, .35);
}

.contact-info-value {
  font-size: 1rem;
  color: var(--fg, #f6f3ec);
  text-decoration: none;
  transition: color .3s ease;
}

a.contact-info-value:hover { color: var(--signal, #FF4423); }

.contact-social-list {
  display: flex;
  gap: 1rem;
}

.contact-social-link {
  font-size: 1rem;
  color: var(--fg, #f6f3ec);
  text-decoration: none;
  transition: color .3s ease;
}

.contact-social-link:hover { color: var(--signal, #FF4423); }

/* ═══════════════════════════════════════════════════════════════
   49. CONTACT FORM — minimal underline fields + pill selector
   Boxed fields read as a generic admin form. Stripped back to a
   quiet underline that lights up on focus, and swapped the project-
   type dropdown for toggleable pills.
   ═══════════════════════════════════════════════════════════════ */
.contact-field {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.contact-field__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.contact-field__required { color: rgba(255, 255, 255, .35); }

.contact-field__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  background: transparent;
  padding: .65rem .1rem;
  color: var(--fg, #f6f3ec);
  outline: none;
  transition: border-color .3s ease;
}

.contact-field__input::placeholder { color: rgba(255, 255, 255, .3); }

.contact-field__input:hover { border-color: rgba(255, 255, 255, .3); }

.contact-field__input:focus { border-color: #fff; }

.contact-field__input--area { resize: none; line-height: 1.6; padding-top: .75rem; }

.contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.contact-pill {
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}

.contact-pill:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }

.contact-pill.is-active {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.contact-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 1.5rem;
}

.contact-book-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 2.5rem;
  padding: .75rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}

.contact-book-btn svg { width: 1rem; height: 1rem; }

.contact-book-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .06);
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: fit-content;
  margin-top: .5rem;
  padding: .95rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), background .3s ease;
}

.contact-submit-btn svg { width: 1rem; height: 1rem; transition: transform .3s ease; }

.contact-submit-btn:hover { transform: translateY(-2px); }
.contact-submit-btn:hover svg { transform: translate(2px, -2px); }
.contact-submit-btn:disabled { cursor: wait; opacity: .6; transform: none; }

/* Keep the short contact-info column in view alongside the taller form */
@media (min-width: 1024px) {
  .contact-info-col {
    position: sticky;
    top: 8rem;
    align-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   50. CASE COVER — one full-bleed panel per project
   Each project in "Arbete" now opens with a big editorial cover
   (image, title, client, metadata) instead of just a plain header
   sitting above the video grid.
   ═══════════════════════════════════════════════════════════════ */
.case-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 44rem;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.case-cover:hover {
  border-color: color-mix(in srgb, var(--case-accent, #FF4423) 55%, rgba(255,255,255,.15));
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .6),
              0 0 0 1px color-mix(in srgb, var(--case-accent, #FF4423) 25%, transparent) inset;
}

.case-cover__img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  --img-scale: 1.02;
  transform: translateY(var(--py, 0px)) scale(var(--img-scale));
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-cover:hover .case-cover__img {
  --img-scale: 1.06;
}

.case-cover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.88) 10%,
    rgba(0,0,0,.55) 20%,
    rgba(0,0,0,.15) 32%,
    transparent 44%);
}

.case-cover__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.case-cover__num {
  position: relative;
  padding-left: 1rem;
  color: rgba(255, 255, 255, .6);
}

.case-cover__num::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 2px;
  height: .9em;
  background: var(--case-accent, #FF4423);
}

.case-cover__cat { color: #fff; font-weight: 800; }

.case-cover__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.case-cover__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.case-cover__title {
  margin: 0;
  font-family: var(--font-sans, ui-sans-serif, system-ui);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.case-cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.6rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(246, 243, 236, .14);
}

.case-cover__meta-item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.case-cover__meta-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, .42);
}

.case-cover__meta-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.case-cover__play {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: border-color .4s ease, background .4s ease, color .4s ease, transform .4s ease;
}

.case-cover__play svg { width: 12px; height: 12px; }

.case-cover:hover .case-cover__play {
  border-color: #fff;
  background: #fff;
  color: #000;
  transform: scale(1.06) translate(2px, -2px);
}

@media (max-width: 640px) {
  .case-cover { aspect-ratio: 4 / 5; max-height: none; }
  .case-cover__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .case-cover__meta { gap: 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-cover__img { transition: none; --py: 0px !important; }
  .case-cover:hover .case-cover__img { --img-scale: 1.04; }
}

/* Filmstrip rhythm — projects sit close enough to feel like one
   continuous reel rather than separate, far-apart blocks. */
.case-reel {
  gap: clamp(.75rem, 2vw, 1.25rem);
}

.case-reel > .case-section {
  scroll-snap-align: start;
  scroll-margin-top: 6rem;
}

/* Title wipes up into view like a title card, instead of just
   fading in with the rest of the cover. */
.case-cover__title { overflow: hidden; }
.case-cover__title-inner {
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-cover.is-visible .case-cover__title-inner {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .case-cover__title-inner { transition: none; clip-path: inset(0 0 0 0); }
}

/* ═══════════════════════════════════════════════════════════════
   51. CONTACT SECTION — clear the fixed header on anchor-scroll
   scroll-mt-24 sits on an inner div, not the #kontakt target Lenis
   actually scrolls to, so the anchor jump landed with the eyebrow
   almost touching the header. Padding-top on the real target fixes
   it regardless of how the scroll lands.
   ═══════════════════════════════════════════════════════════════ */
.kontakt-section {
  padding-top: clamp(7rem, 15vh, 10rem);
  /* pb-20/md:pb-24 in the markup aren't in the precompiled Tailwind
     bundle, so they're silent no-ops — real padding-bottom here. */
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .kontakt-section { padding-bottom: 6rem; }
}

@media (max-width: 640px) {
  .kontakt-section { padding-top: 6.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   52. TEAM CARDS — one role, quiet IMDb link
   Was up to five stacked pills per card (a resume checklist, not a
   studio credit). Down to name + one role, plain text.
   ═══════════════════════════════════════════════════════════════ */
.team-card__name {
  margin: 0;
  font-family: var(--font-sans, ui-sans-serif, system-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.team-card__role {
  margin: .4rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
}

.team-card__imdb {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .65rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  transition: color .3s ease;
}

.team-card__imdb:hover { color: #f5c518; }

/* Pull the three brighter/warmer headshots toward the same low-key
   mood as the fourth, so the row reads as one consistent grade. */
.team-card img[src*="karim"],
.team-card img[src*="hugo"],
.team-card img[src*="alexander"] {
  filter: brightness(.68) contrast(1.1) saturate(.82) !important;
}

.team-card:hover img[src*="karim"],
.team-card:hover img[src*="hugo"],
.team-card:hover img[src*="alexander"] {
  filter: brightness(.85) contrast(1.06) saturate(.88) !important;
}


/* ═══════════════════════════════════════════════════════════════
   53. TYPE SCALE — one display, one heading, one sub
   Every section heading used to be the same thing: mono eyebrow in
   signal orange, then Inter Black at text-8xl with the last word in
   orange. Four sections, four identical shapes, so nothing read as
   more important than anything else and the orange stopped meaning
   anything. The scale below gives the page one display size (the
   work), one heading size (everything else) and one sub size.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --t-display: clamp(2.6rem, 7.2vw, 6.5rem);
  --t-h2:      clamp(2rem, 4.2vw, 3.75rem);
  --t-h3:      clamp(1.25rem, 1.7vw, 1.6rem);
  --t-lede:    clamp(1.05rem, 1.15vw, 1.2rem);
  --t-label:   0.6875rem;

  --tr-display: -0.045em;
  --tr-h2:      -0.035em;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* The mark from the wordmark — an aperture. Used as a mask so it
     always inherits currentColor and never needs a second asset. */
  --aperture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
}

/* The work is the page's argument, so it gets the display size. */
#galleri h2 {
  font-size: var(--t-display);
  line-height: 0.86;
  letter-spacing: var(--tr-display);
  font-weight: 900;
  max-width: 14ch;
}

/* Everything else steps down and stays there. */
#bilder .heading-title,
#process .heading-title,
#om-oss h2,
#kontakt .heading-title,
footer h2 {
  font-size: var(--t-h2);
  line-height: 0.92;
  letter-spacing: var(--tr-h2);
  font-weight: 800;
  max-width: 18ch;
}

@media (min-width: 768px) {
  #galleri h2,
  #bilder .heading-title,
  #process .heading-title,
  #om-oss h2,
  #kontakt .heading-title,
  footer h2 {
    font-size: inherit; /* reset the md:text-8xl utility... */
  }
  #galleri h2 { font-size: var(--t-display); }
  #bilder .heading-title,
  #process .heading-title,
  #om-oss h2,
  #kontakt .heading-title,
  footer h2 { font-size: var(--t-h2); }
}


/* ═══════════════════════════════════════════════════════════════
   54. SIGNAL DISCIPLINE — orange is a verb, not a colour
   The signal was on five headings, every eyebrow, every rule and
   every accent, so it had stopped pointing at anything. It now marks
   only things you can act on: play, submit, link, active state — and
   exactly one headline, the one the page is actually arguing for.
   ═══════════════════════════════════════════════════════════════ */
#bilder .heading-title .text-signal,
#process .heading-title .text-signal,
#om-oss h2 .text-signal,
#kontakt .heading-title .text-signal {
  color: var(--fg);
}

/* Eyebrows go quiet — the rule beside them does the pointing now. */
.heading-eyebrow,
#galleri .font-mono.text-signal,
#om-oss .font-mono.text-signal {
  color: var(--fg-muted);
  letter-spacing: 0.3em;
}


/* ═══════════════════════════════════════════════════════════════
   55. THE SECTION RULE — the aperture, used as structure
   One device replaces the five that were doing this job (orange
   eyebrows, glowing dividers, blurred colour blobs, icon chips,
   card borders). The mark is the aperture from the wordmark; the
   figure on the right is real — how many photos, projects, steps —
   so the rule carries information instead of decorating the top of
   a section.
   ═══════════════════════════════════════════════════════════════ */
.sec-rule {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--fg-muted);
}

.sec-rule__mark {
  flex: none;
  width: 11px;
  height: 11px;
  background-color: var(--signal);
  -webkit-mask: var(--aperture) center / contain no-repeat;
  mask: var(--aperture) center / contain no-repeat;
}

.sec-rule__label,
.sec-rule__meta {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1;
  white-space: nowrap;
}

.sec-rule__label { color: var(--fg); }
.sec-rule__meta  { display: none; }

.sec-rule__line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  background: linear-gradient(90deg,
    rgba(246, 243, 236, 0.16) 0%,
    rgba(246, 243, 236, 0.06) 60%,
    rgba(246, 243, 236, 0) 100%);
}

@media (max-width: 640px) {
  .sec-rule { gap: 0.625rem; }
  .sec-rule__label { letter-spacing: 0.2em; }
}


/* ═══════════════════════════════════════════════════════════════
   56. PROCESS — a timeline, not six cards
   Six identical rounded cards with tinted backgrounds, boxed icons
   with a glow behind them, a hover lift, and the word "PROCESS"
   repeated beside every step. The steps are a real sequence, so the
   spine that was already in the markup should carry them: the icon
   sits on the line as its marker, the number is the only label that
   says anything, and the chrome goes.
   ═══════════════════════════════════════════════════════════════ */
.proc-row {
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 !important;
  border-top: 1px solid rgba(246, 243, 236, 0.08) !important;
  overflow: visible !important;
  transition: none !important;
}

/* The mouse-tracking spotlight (section 20 in awwwards.js) was built for
   a bounded, rounded card. On this borderless hairline row it paints a
   sharp-edged rectangle that reads as a stray hover box, so it's off here. */
.proc-row.has-spotlight::before {
  content: none !important;
}

.proc-row:first-child { border-top: 0 !important; }

/* The radial wash that lit up on hover — gone. */
.proc-row > div[style*="radial-gradient"] { display: none !important; }

/* The icon becomes the marker on the spine: hairline, no box, no glow. */
.proc-icon {
  height: 2.5rem !important;
  width: 2.5rem !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: color 0.7s var(--ease-soft) !important;
  color: var(--fg-muted);
  margin-left: -0.5rem;
}

.proc-icon > div { display: none !important; } /* the blur glow layer */

.proc-icon__svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.2;
}

.proc-row:hover .proc-icon { color: var(--signal); }

/* "STEG 01" stays — it is a real sequence. The "PROCESS" tag beside
   it said nothing six times over, so it goes. */
.proc-row .font-mono.uppercase > span:nth-child(2),
.proc-row .font-mono.uppercase > span:nth-child(3) { display: none; }

.proc-row .font-mono.uppercase > span:first-child {
  color: var(--signal);
  letter-spacing: 0.28em;
  font-size: var(--t-label);
}

.proc-row h3 {
  font-size: var(--t-h3) !important;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-top: 0.5rem !important;
}

.proc-row:hover h3 { color: var(--fg) !important; }

.proc-row p {
  max-width: 58ch;
  font-size: 1rem !important;
  line-height: 1.65;
  color: var(--fg-muted) !important;
}

/* The spine: hairline, one colour, no glow bloom. */
.proc-progress {
  background: var(--signal) !important;
  box-shadow: none !important;
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   57. TEAM — settle, don't lift
   rounded-3xl + shadow-2xl + hover:-translate-y-2 + a blurred orange
   glow behind each card. Four separate ways of saying "card". The
   photograph is the thing; the frame around it should be almost
   nothing, and only the image should move.
   ═══════════════════════════════════════════════════════════════ */
.team-card {
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  transform: none !important;
  border-color: rgba(246, 243, 236, 0.07) !important;
  transition: border-color 1.1s var(--ease-soft) !important;
}

.team-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(246, 243, 236, 0.16) !important;
}

/* The blurred orange bloom behind the card. */
.team-card > div[style*="radial-gradient"] { display: none !important; }

.team-card img {
  transform: scale(1.015) !important;
  transition: transform 1.4s var(--ease-soft), filter 1.2s var(--ease-soft) !important;
}

.team-card:hover img { transform: scale(1.05) !important; }


/* ═══════════════════════════════════════════════════════════════
   58. CLIENTS — give the grid a floor and a top
   The logo wall arrived with no introduction and sat in the middle
   of the page as a block of grey. It now opens with the same rule
   every other section uses, and the cells sit on a hairline grid so
   the wall reads as deliberate rather than as leftover space.
   ═══════════════════════════════════════════════════════════════ */
.clients__inner { padding-top: clamp(4rem, 7vw, 7rem) !important; }

.client {
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1rem !important;
}

.client__img {
  max-height: 34px;
  width: auto;
  margin: 0 auto;
}

.client:hover .client__img,
.client:focus-visible .client__img { opacity: 0.9; }


/* ═══════════════════════════════════════════════════════════════
   59. PERFORMANCE — stop painting what nobody is looking at
   Five full-viewport radial blurs (blur-[150px]) were compositing on
   every frame for an effect that reads as a faint smudge. They are
   removed in the markup; the sections below the fold now also skip
   layout and paint until they are near the viewport.
   ═══════════════════════════════════════════════════════════════ */
#bilder,
#process,
#om-oss,
#kontakt {
  content-visibility: auto;
}

#bilder  { contain-intrinsic-size: auto 1900px; }
#process { contain-intrinsic-size: auto 1600px; }
#om-oss  { contain-intrinsic-size: auto 1100px; }
#kontakt { contain-intrinsic-size: auto 900px; }

/* Images fade in rather than pop, but they must never be invisible
   if the fade never runs — decoding failures used to leave holes.
   Client marks are excluded: they're small, mostly-transparent, and
   this placeholder tone showed through as a visible box around each one. */
img:not(.client__img) { background-color: var(--bg-raised); }


/* ═══════════════════════════════════════════════════════════════
   60. QUALITY FLOOR — focus, motion, mobile
   ═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 767px) {
  section[id] { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

  .proc-row { padding: 1.5rem 0 !important; }
  .proc-row p { font-size: 0.9375rem !important; }

  /* The step icon and the mobile "STEP 01" pill said the same thing
     twice in the same row. */
  .proc-row .font-mono.md\:hidden { display: none !important; }

  .team-card { aspect-ratio: 3 / 3.6 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card img,
  .proc-icon,
  .client__img { transition: none !important; }
  .team-card:hover img { transform: scale(1.015) !important; }
  .proc-progress { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   61. RESPONSIVE IMAGES — keep the drift after the <picture> wrap
   Every photograph now ships as WebP at the size it is actually
   displayed, which means each <img> gained a <picture> parent. The
   hover rules in section 41 target `> img`, so they need the extra
   level; the wrapper itself must not become a layout box.
   ═══════════════════════════════════════════════════════════════ */
.video-tile-btn > picture,
.photo-tile > picture,
.team-card > picture,
.case-cover > picture,
.client > picture {
  display: contents;
}

.video-tile-btn > picture > img,
.photo-tile > picture > img,
.case-section .video-tile-btn > picture > img {
  transform: scale(1.02) !important;
  transition: transform 1.4s var(--ease-soft),
              filter 1.2s var(--ease-soft),
              opacity .5s ease !important;
}

.video-tile-btn:hover > picture > img,
.photo-tile:hover > picture > img,
.case-section .video-tile-btn:hover > picture > img {
  transform: scale(1.045) !important;
}

@media (prefers-reduced-motion: reduce) {
  .video-tile-btn > picture > img,
  .photo-tile > picture > img,
  .case-section .video-tile-btn > picture > img {
    transition: none !important;
    transform: scale(1.02) !important;
  }
}

/* The client wall's new heading sits in the same gutter as the grid. */
.clients__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }