@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat Alternates';
  src: url('../fonts/MontserratAlternates-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

/* ─── FILM GRAIN (GPU, pure CSS) ───────────────────────────────────────────
   Replaces the old per-frame canvas noise. A tiny tiled noise texture
   (assets/images/noise.png — grayscale with low baked-in alpha, matching the
   old look) is shifted between offsets via background-position, which the
   compositor handles without touching the main thread. */
.philosophy-grain, .process-grain, .clients-grain, .contact-grain,
.footer-grain, .port-grain, .proj-grain, .proj-below-grain, .about-grain {
  background-image: url('../images/noise.png');
  background-repeat: repeat;
  animation: grain-flicker 0.5s steps(1) infinite;
}
@keyframes grain-flicker {
  0%   { background-position:   0px   0px; }
  12%  { background-position: -47px  29px; }
  24%  { background-position:  13px -71px; }
  36%  { background-position: -91px -17px; }
  48%  { background-position:  29px  53px; }
  60%  { background-position: -67px  41px; }
  72%  { background-position:  89px -23px; }
  84%  { background-position: -31px -89px; }
  100% { background-position:   0px   0px; }
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-grain, .process-grain, .clients-grain, .contact-grain,
  .footer-grain, .port-grain, .proj-grain, .proj-below-grain, .about-grain {
    animation: none;
  }
}

:root {
  --black: #0a0a0a;
  --white: #f5f5f0;
  --cream: #f0ede6;
  --grey: #888;
  --accent: #c8ff00;
  --font-display: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-display-black: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-hero: 'Montserrat Alternates', Helvetica, Arial, sans-serif;
  --font-body: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-mono: 'Montserrat', monospace;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── CUSTOM PLAY CURSOR (global) ──────────────────────── */
.ve-play-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  will-change: opacity;
  white-space: nowrap;
  mix-blend-mode: difference;
}

/* ─── GLOBAL BOTTOM BLUR ────────────────────────────────── */
.bottom-blur {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9vh;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  pointer-events: none;
  z-index: 9998;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }


/* ─── PAGE TRANSITIONS (View Transitions API) ─── */
@view-transition {
  navigation: auto;
}
/* Aktuelle Seite bleibt als Screenshot stehen — Menü bleibt sichtbar */
::view-transition-old(root) {
  animation: none;
}
/* Neue Seite gleitet von unten über die aktuelle Seite */
::view-transition-new(root) {
  animation: ve-slide-up 0.75s cubic-bezier(0.43, 0.2, 0.02, 1) both;
}
@keyframes ve-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Fallback (und Koordination mit View Transitions) */
html.ve-entering .page-content {
  animation: ve-slide-up 0.75s cubic-bezier(0.43, 0.2, 0.02, 1) both;
}

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 3rem;
  mix-blend-mode: difference;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.nav-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* ─── TOGGLE BUTTON ─── */
.nav-toggle {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--white);
  z-index: 600;
  position: relative;
}
.nav-toggle-label {
  font-family: var(--font-body);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 700;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  display: block;
  position: relative;
}
.nav-toggle-label::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--white);
  transition: width .3s ease;
}
.nav-toggle:hover .nav-toggle-label::after { width: 100%; }
.nav-toggle-label-inner {
  display: block;
  transition: transform .9s cubic-bezier(0.14, 1, 0.34, 1);
}
.nav-toggle-label-inner::after {
  content: attr(data-close);
  display: block;
}
.nav-toggle.is-open .nav-toggle-label-inner {
  transform: translateY(-50%);
}

/* Page shift when menu opens */
.page-content {
  transition: transform 1.4s cubic-bezier(0.43, 0.2, 0.02, 1);
  will-change: transform;
}
.menu-is-open .page-content {
  transform: translateY(-8vh);
}

/* ─── MENU OVERLAY ─── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--black);
  transform: translateY(100%);
  transition: transform 1s cubic-bezier(0.43, 0.2, 0.02, 1);
  pointer-events: none;
}
.menu-overlay.is-open {
  transform: translateY(0);
  pointer-events: all;
}
.menu-overlay-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Tagline top center */
.menu-tagline {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  border: 1px solid rgba(255,255,255,.0);
  border-radius: 50px;
  padding: .45rem 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity .4s ease .55s,
    border-color .4s ease .55s;
}
.menu-overlay.is-open .menu-tagline {
  opacity: .55;
  border-color: rgba(255,255,255,.25);
}
.menu-tagline-text {
  display: inline-block;
  letter-spacing: .8em;
  opacity: 0;
  transition:
    letter-spacing .9s cubic-bezier(0.05, 0.9, 0.3, 1) .2s,
    opacity .4s ease .2s;
}
.menu-overlay.is-open .menu-tagline-text {
  letter-spacing: .18em;
  opacity: 1;
}

/* Menu links — fill full height, last item pinned to bottom */
.menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.menu-link-wrap {
  overflow: hidden;
  position: relative;
}
.menu-divider {
  margin: 0 1.5rem;
  height: 1px;
  background: rgba(255,255,255,.18);
  transform: scaleX(1);
  transform-origin: left; /* overridden by JS on show/hide */
  transition: transform 1s cubic-bezier(0.05, 0.9, 0.3, 1);
}
.menu-divider.hidden {
  transform: scaleX(0);
}
.menu-link {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.5vw, 7rem);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.05;
  display: block;
  padding: .04em 1.5rem;
  transform: translateY(110%);
  transition:
    transform 1.1s cubic-bezier(0.05, 0.9, 0.3, 1),
    color .3s ease;
  position: relative;
}
.menu-link-wrap[data-index="1"] .menu-link,
.menu-link-wrap[data-index="3"] .menu-link {
  transform: translateY(-110%);
}
.menu-overlay.is-open .menu-link {
  transform: translateY(0);
}
.menu-overlay.is-open .menu-link-wrap[data-index="0"] .menu-link { transition-delay: .65s; }
.menu-overlay.is-open .menu-link-wrap[data-index="1"] .menu-link { transition-delay: .73s; }
.menu-overlay.is-open .menu-link-wrap[data-index="2"] .menu-link { transition-delay: .81s; }
.menu-overlay.is-open .menu-link-wrap[data-index="3"] .menu-link { transition-delay: .89s; }

/* Dim all when any item was hovered */
.menu-links.is-dimmed .menu-link { opacity: .2; }
.menu-links.is-dimmed .menu-link:hover { opacity: 1; }

@media (max-width: 768px) {
  .nav { padding: 1.2rem 1.5rem; }
  .menu-link { font-size: clamp(2rem, 12vw, 3.5rem); padding: .18em 1.5rem; }
}

/* ─── HERO ─── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg-video {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 125%;
  object-fit: cover;
  z-index: 0;
}
.hero-bg-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #2a3a2a 0%, #3a4a3a 30%, #4a5a4a 60%, #3a4a3a 100%);
  z-index: 0;
}
.hero-bg-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.18);
}
.hero-overlay {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}

/* Top: "Some write. Some design." */
.hero-pre-text {
  position: absolute;
  top: 12vh; left: 3rem;
  font-family: var(--font-body);
  font-size: clamp(.8rem, 1vw, .95rem);
  line-height: 1.6;
  opacity: .85;
  z-index: 3;
}

/* Rigid stage: headline + preview scale and move as one unit.
   `font-size` is the single scaling knob, locked to the video width
   (width / 16.2), so every em offset inside stays fixed to the video. */
.hero-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 26vw, 340px);   /* = preview video width */
  aspect-ratio: 16 / 10;              /* = preview video box */
  font-size: clamp(12.35px, 1.605vw, 21px);
  z-index: 4;
}

/* Big headline — bottom quarter of "told." overlaps the video's top edge */
.hero-big-headline {
  position: absolute;
  right: 24%;                         /* end of "told." sits ~76% across the video */
  bottom: calc(100% - 0.8em);         /* drop 0.8em into the video → bottom ¼ overlaps */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-title-block {
  position: relative;
}
.hero-title-text {
  font-family: var(--font-hero);
  font-size: 4.8em;                   /* em of .hero-stage → locked to video */
  font-weight: 900;
  line-height: .85;
  text-transform: lowercase;
  color: var(--white);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hero-title-text .line {
  display: block;
  text-align: left;
}

/* Preview video box */
.hero-preview {
  position: absolute;
  inset: 0;                /* fills .hero-stage = the video box */
  background: transparent;
  overflow: visible;
  z-index: 2;
}
.hero-video-wrap {
  position: absolute; inset: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: none;
}
.hero-preview video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-preview .placeholder-img {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2a2520 0%, #3a3530 50%, #2a2520 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.15);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.hero-watch-now {
  position: absolute;
  bottom: -0.6rem;
  right: -1.8rem;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(.7rem, .9vw, .85rem);
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: pointer;
  z-index: 5;
  white-space: nowrap;
  color: var(--white);
}
.hero-watch-now::after {
  content: ' ▸';
}

/* Bottom text */
.hero-bottom {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  max-width: 38rem;
}
.hero-bio {
  font-family: var(--font-body);
  font-size: clamp(.75rem, .95vw, .88rem);
  line-height: 1.65;
  opacity: .85;
  margin-bottom: 1.2rem;
}
.hero-cta-text {
  font-family: var(--font-body);
  font-size: clamp(.8rem, 1vw, .9rem);
  font-weight: 600;
  letter-spacing: .02em;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-pre-text { animation: heroFadeIn 1s ease .4s forwards; opacity: 0; }
.hero-big-headline { animation: heroFadeIn 1s ease .6s forwards; opacity: 0; }
.hero-bottom { animation: heroFadeIn 1s ease 1s forwards; opacity: 0; }

/* ─── HERO SCROLL HINT ─── */
.hero-scroll-hint {
  position: absolute;
  right: 3rem;
  bottom: 5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  animation: heroFadeIn 1s ease 1.4s forwards;
  opacity: 0;
}
.hero-scroll-hint span {
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .75;
  writing-mode: vertical-rl;
  color: var(--white);
}
.hero-scroll-line {
  width: 1px;
  height: 4rem;
  background: rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.6);
  animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { top: -100%; }
  100% { top: 100%; }
}
@media (max-width: 768px) {
  .hero-scroll-hint { display: none; }
}

/* ─── SELECTED WORKS ─── */
.works-section {
  padding: 6rem 3rem;
}
.works-section .section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  opacity: .4;
  margin-bottom: .5rem;
}
.works-section .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 900;
  margin-bottom: .8rem;
}
.works-section .section-subtitle {
  font-size: .9rem;
  opacity: .5;
  max-width: 30rem;
  margin-bottom: 4rem;
}

.work-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.work-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.work-card:nth-child(even) { direction: rtl; }
.work-card:nth-child(even) > * { direction: ltr; }

.work-image {
  position: relative;
  aspect-ratio: 16/10;
  background: #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
}
.work-image .placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: rgba(255,255,255,.15);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.work-image:hover .placeholder {
  background: linear-gradient(135deg, #1e1e1e, #2e2e2e);
}

.work-info { padding: 1rem 0; }
.work-description {
  font-size: .85rem;
  opacity: .5;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.work-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  font-style: italic;
  margin-bottom: .5rem;
}
.work-client {
  font-size: .8rem;
  opacity: .4;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.work-meta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1rem;
  font-size: .75rem;
}
.work-meta span {
  padding: .35rem .8rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  opacity: .6;
  cursor: pointer;
  transition: all .3s;
}
.work-meta span:hover {
  opacity: 1;
  border-color: rgba(255,255,255,.4);
}
.work-view {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: .8rem;
  letter-spacing: .1em;
  opacity: .6;
  position: relative;
  transition: opacity .3s;
}
.work-view::after {
  content: '→'; margin-left: .5rem;
  transition: margin-left .3s;
}
.work-view:hover { opacity: 1; }
.work-view:hover::after { margin-left: .8rem; }

/* ─── AI Section Label ─── */
.ai-section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  opacity: .4;
  margin-bottom: 3rem;
  padding: 0 3rem;
}

/* ─── AWARDS ─── */
.awards-section {
  padding: 6rem 3rem;
  text-align: center;
}
.awards-section .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 900;
  margin-bottom: 3rem;
}
.awards-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem;
  max-width: 50rem; margin: 0 auto;
}
.award-item {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.award-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .6;
}
.award-name {
  font-size: .7rem;
  opacity: .4;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ─── CLIENTS ─── */
.clients-section {
  padding: 4rem 3rem;
  text-align: center;
}
.clients-section .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 900;
  margin-bottom: 3rem;
}
.clients-logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem;
  opacity: .35;
}
.client-logo {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em;
}

/* ─── BIG TYPE ABOUT ─── */
.about-big {
  padding: 8rem 3rem;
  position: relative;
}
.about-big-text {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  max-width: 60rem;
}
.about-big-text .outline {
  -webkit-text-stroke: 1.5px var(--white);
  color: transparent;
}
.about-description {
  margin-top: 3rem;
  font-size: .9rem;
  opacity: .5;
  max-width: 34rem;
  line-height: 1.8;
}

/* ─── HOW I WORK ─── */
.process-section {
  padding: 6rem 3rem;
}
.process-section .section-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  opacity: .4;
  margin-bottom: .3rem;
}
.process-section .section-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  opacity: .6;
  margin-bottom: 4rem;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}
.process-step {
  padding: 2rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  transition: border-color .3s, transform .3s;
}
.process-step:hover {
  border-color: rgba(255,255,255,.15);
  transform: translateY(-4px);
}
.step-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  opacity: .3;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 1rem;
}
.step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: .8rem;
}
.step-desc {
  font-size: .8rem;
  opacity: .45;
  line-height: 1.7;
}

/* ─── CTA SECTION ─── */
.cta-section {
  padding: 8rem 3rem;
  text-align: center;
  position: relative;
}
.cta-big {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
}
.cta-big .outline {
  -webkit-text-stroke: 1.5px var(--white);
  color: transparent;
}
.cta-sub {
  margin-top: 2rem;
  font-size: .9rem;
  opacity: .5;
}
.cta-button {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 1rem 2.5rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  font-size: .85rem;
  letter-spacing: .1em;
  transition: all .3s ease;
}
.cta-button:hover {
  background: var(--white);
  color: var(--black);
}

/* ─── FOOTER ─── */
.footer {
  padding: 3rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2rem;
  font-size: .75rem;
  opacity: .4;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer a:hover { opacity: .8; }

/* ─── POPUP / MODAL ─── */
.popup-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .3s;
}
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup-content {
  background: #151515;
  padding: 3rem;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  position: relative;
  transform: scale(.95);
  transition: transform .3s;
}
.popup-overlay.active .popup-content { transform: scale(1); }
.popup-close {
  position: absolute; top: 1.2rem; right: 1.5rem;
  font-size: .8rem; opacity: .5; cursor: pointer;
  transition: opacity .3s;
}
.popup-close:hover { opacity: 1; }
.popup-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.popup-list {
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem;
}
.popup-list li {
  font-size: .85rem;
  opacity: .6;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ─── VIMEO OVERLAY ─── */
.vimeo-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .3s;
}
.vimeo-overlay.active { opacity: 1; visibility: visible; }
.vimeo-box {
  width: 80vw; max-width: 900px;
  aspect-ratio: 16/9;
  position: relative;
}
.vimeo-box iframe {
  width: 100%; height: 100%;
  border-radius: 12px;
}
.vimeo-close {
  position: absolute; top: -2.5rem; right: 0;
  font-size: .85rem; cursor: pointer; opacity: .6;
  transition: opacity .3s;
  color: var(--white);
}
.vimeo-close:hover { opacity: 1; }

/* ─── SHOWREEL OVERLAY ─── */
.showreel-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .3s;
}
.showreel-overlay.active { opacity: 1; visibility: visible; }
.showreel-box {
  width: 80vw; max-width: 900px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.showreel-box iframe {
  width: 100%; height: 100%;
  display: block;
}
.showreel-close {
  position: absolute; top: -2.5rem; right: 0;
  font-size: .85rem; cursor: pointer; opacity: .6;
  transition: opacity .3s;
}
.showreel-close:hover { opacity: 1; }

/* ─── SCROLL ANIMATIONS ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .nav { padding: 1.2rem 1.5rem; }
  .hero { padding: 7rem 1.5rem 3rem; }
  .work-card { grid-template-columns: 1fr; }
  .work-card:nth-child(even) { direction: ltr; }
  .works-section, .awards-section, .clients-section,
  .about-big, .process-section, .cta-section, .footer,
  .story-section { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ai-section-label { padding: 0 1.5rem; }
  .menu-links a { font-size: 2rem; }
  .hero-pre-text { left: 1.5rem; top: 10vh; }
  /* Narrow screens: the wide headline overhangs left, so shift the whole
     unit right to keep it on-screen (relation to the video stays locked). */
  /* Video stays centered (left:50% from base); headline is made smaller so
     it still fits beside the centered video instead of shifting it.
     Sits slightly above true center for optical balance with the bio text. */
  .hero-stage { width: 52vw; font-size: 3.21vw; top: 45%; }   /* font = width / 16.2 */
  .hero-title-text { font-size: 3.2em; }
  /* Let the bio text reflow naturally on mobile instead of hard-wrapping.
     Keeps the break after "…Czauderna." (plain <br>), drops the rest. */
  .hero-bio-br { display: none; }
  .hero-bio { max-width: none; }
  /* Keep text legible over bright video frames */
  .hero-bio, .hero-cta-text { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
  .hero-watch-now { right: -1rem; font-size: .65rem; }
  .hero-bottom { padding: 0 1.5rem; width: 100%; max-width: none; }
}


/* ─── PROCESS FLOW ─── */
.process-flow {
  position: relative;
  background: #181818;
  padding: 8rem 3rem;
  overflow: hidden;
}
.process-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.process-flow-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.process-flow-header {
  margin-bottom: 5rem;
}
.process-flow-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  opacity: .35;
  margin-bottom: 1rem;
}
.process-flow-sub {
  font-size: clamp(.85rem, 1.1vw, 1rem);
  opacity: .45;
  letter-spacing: .04em;
}
.process-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.process-flow-step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 2rem;
}
.process-step-num {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 900;
  font-style: italic;
  opacity: .2;
  letter-spacing: .1em;
  padding-top: 1.6rem;
  text-align: right;
}
.process-step-glass {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 1.6rem 2rem;
  margin-bottom: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 24px rgba(0,0,0,.3);
  transition: background .3s, border-color .3s;
}
.process-step-glass:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.process-step-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.process-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.process-step-tag {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .35;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  padding: .3rem .8rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: .2rem;
}
.process-step-body {
  font-size: clamp(.78rem, .95vw, .88rem);
  line-height: 1.75;
  opacity: .55;
}
.process-step-connector {
  grid-column: 2;
  width: 1px;
  height: 1.8rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), transparent);
  margin-left: 2rem;
}
@media (max-width: 768px) {
  .process-flow { padding: 5rem 1.5rem; }
  .process-flow-steps { gap: 0; }
  .process-flow-step { grid-template-columns: 2.5rem 1fr; column-gap: 1rem; }
  .process-step-glass { padding: 1.2rem 1.4rem; }
  .process-step-top { flex-direction: column; gap: .5rem; }
}

/* ─── CLIENTS LOGO SLIDER ─── */
.clients-slider {
  position: relative;
  background: #181818;
  padding: 4rem 0;
  overflow: hidden;
}
.clients-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.clients-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.clients-track:hover { animation-play-state: paused; }
.clients-track img {
  width: 130px;
  height: 44px;
  object-fit: contain;
  opacity: .5;
  transition: opacity .3s;
  flex-shrink: 0;
}
.clients-track img:hover { opacity: 1; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── CONTACT SECTION ─── */
.contact-section {
  position: relative;
  background: #181818;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 8rem 3rem 3rem;
}
.contact-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.contact-headline {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 2rem;
  text-align: center;
}
.contact-headline-italic {
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  font-size: .85em;
}
.contact-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.contact-word-inner {
  display: inline-block;
}
.contact-letstalk-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.contact-letstalk {
  display: inline-block;
}
.contact-field {
  position: relative;
}
.contact-field-line {
  height: 1px;
  background: rgba(255,255,255,.2);
  transform: scaleX(0);
  transform-origin: left;
}
.contact-sub {
  font-size: .9rem;
  opacity: .5;
  margin-bottom: 3.5rem;
  text-align: center;
}
.contact-sub a {
  text-decoration: underline;
  opacity: 1;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: .6rem 0;
  outline: none;
  transition: border-color .3s;
  resize: none;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(255,255,255,.35);
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(255,255,255,.6);
}
.contact-field--full { width: 100%; }
.contact-submit {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.contact-submit button {
  padding: .85rem 3rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .05em;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.contact-submit button:hover {
  background: var(--white);
  color: #181818;
}

/* ─── SITE FOOTER ─── */
.site-footer {
  position: relative;
  background: #181818;
  overflow: hidden;
  padding: 0 3rem 0;
}
.footer-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.site-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1.8rem;
  margin-bottom: 2.5rem;
}
.site-footer-brand {
  font-family: var(--font-body);
  font-size: .8rem;
  opacity: .35;
  letter-spacing: .05em;
}
.site-footer-nav {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
}
.site-footer-nav a {
  font-size: .8rem;
  opacity: .35;
  transition: opacity .3s;
}
.site-footer-nav a:hover { opacity: 1; }
.site-footer-wordmark {
  pointer-events: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
.wordmark-clip {
  overflow: hidden;
  width: 100%;
}
.wordmark-clip--1 {
  height: calc(8.5vw * 0.85 * 0.35);
  opacity: .2;
}
.wordmark-clip--2 {
  height: calc(8.5vw * 0.85 * 0.5);
  opacity: .5;
}
.wordmark-clip--3 {
  height: calc(8.5vw * 0.85 * 0.8);
  opacity: 1;
}
.site-footer-wordmark-row {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 8.5vw;
  line-height: .85;
  text-transform: uppercase;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--white);
  display: block;
  text-align: center;
}
@media (max-width: 768px) {
  .site-footer { padding: 4rem 1.5rem 0; }
  .site-footer-top { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
}

.contact-feedback {
  text-align: center;
  font-size: .85rem;
  min-height: 1.2rem;
  opacity: .7;
}
.contact-feedback.success { color: #a8e6a3; }
.contact-feedback.error   { color: #e6a3a3; }
@media (max-width: 768px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-section { padding: 6rem 1.5rem 2rem; }
}

/* ─── FEATURED SLIDER ─── */
.featured-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--black);
}
.featured-bg-video {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  z-index: 0;
  transition: opacity .5s ease;
}
.featured-bg-video.fading { opacity: 0; }
.featured-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.18) 65%,
    transparent 100%
  );
}

/* Left info panel */
.featured-info {
  position: absolute;
  z-index: 2;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: 36%;
}
.featured-category {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  opacity: .5;
  display: block;
  margin-bottom: 1rem;
}
.feat-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.feat-word-inner {
  display: inline-block;
}
.featured-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 900;
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
  transition: opacity .3s;
}
.featured-description {
  font-size: clamp(.78rem, .9vw, .88rem);
  line-height: 1.72;
  opacity: .6;
  margin-bottom: 2rem;
  transition: opacity .3s;
}
.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .65rem 1.6rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: background .3s, border-color .3s;
  color: var(--white);
}
.featured-cta:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
}

/* Right cards panel */
.featured-cards {
  position: absolute;
  z-index: 2;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: .9rem;
  align-items: center;
}
.featured-card {
  position: relative;
  width: clamp(110px, 12vw, 165px);
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .4s ease, opacity .4s ease, box-shadow .4s ease;
  opacity: .5;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.featured-card.active {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
}
.featured-card:hover:not(.active) {
  opacity: .78;
  transform: scale(1.04);
}
.featured-card video,
.featured-card-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.featured-card-placeholder {
  background: linear-gradient(160deg, #1c201c, #252a2e);
}
.featured-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.78) 100%);
}
.featured-card-info {
  position: absolute;
  bottom: .75rem; left: .75rem; right: .75rem;
  z-index: 1;
}
.featured-card-category {
  font-size: .52rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .55;
  display: block;
  margin-bottom: .2rem;
}
.featured-card-title {
  font-family: var(--font-display);
  font-size: clamp(.65rem, .9vw, .82rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Bottom bar */
.featured-bottom {
  position: absolute;
  z-index: 2;
  bottom: 2.5rem;
  left: 3rem;
  right: 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.featured-nav {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.featured-nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: var(--white);
  font-size: .85rem;
  cursor: pointer;
  transition: background .3s;
  display: flex; align-items: center; justify-content: center;
}
.featured-nav-btn:hover { background: rgba(255,255,255,.2); }
.featured-progress {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
  border-radius: 1px;
  overflow: hidden;
}
.featured-progress-fill {
  height: 100%;
  background: var(--white);
  border-radius: 1px;
  transition: width .5s ease;
}
.featured-counter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  opacity: .3;
  letter-spacing: .05em;
  flex-shrink: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .featured-info {
    left: 1.5rem;
    max-width: 65%;
    top: auto;
    bottom: 9rem;
    transform: none;
  }
  .featured-cards {
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: .6rem;
  }
  .featured-card { width: clamp(80px, 20vw, 110px); }
  .featured-bottom { left: 1.5rem; right: 1.5rem; }
}

/* ─── PHILOSOPHY SECTION ─── */
.philosophy-section {
  position: relative;
  background: #181818;
  overflow: hidden;
  padding: 8rem 0 7rem;
  color: var(--white);
}
.philosophy-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.philosophy-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
}
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 6rem;
}
.philosophy-img-wrap--left {
  transform: rotate(-10deg) translateX(-.5rem) translateY(1rem);
  transform-origin: center center;
}
.philosophy-img-wrap--right {
  transform: rotate(8deg) translateX(.5rem) translateY(-0.5rem);
  transform-origin: center center;
}
.philosophy-img {
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.14);
}
.philosophy-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-vimeo] {
  cursor: pointer;
}
.philosophy-img-placeholder {
  width: 100%;
  height: 100%;
}
.philosophy-img-placeholder--1 {
  background: linear-gradient(145deg, #b4c0b4 0%, #c4d0c0 50%, #ccd8c8 100%);
}
.philosophy-img-placeholder--2 {
  background: linear-gradient(145deg, #989ea8 0%, #a8aeb8 50%, #b8c0c8 100%);
}
.philosophy-headline-wrap {
  text-align: center;
  padding: 2rem 1rem;
}
.philosophy-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.philosophy-headline em {
  font-style: italic;
}
.phil-word {
  display: inline-block;
  opacity: .12;
}
.phil-body-word {
  display: inline-block;
}
.philosophy-bottom {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto;
  padding-top: 3rem;
}
@media (max-width: 768px) {
  .philosophy-bottom { padding-top: 5rem; }
}
.philosophy-label {
  font-family: var(--font-body);
  font-size: clamp(.75rem, .95vw, .88rem);
  line-height: 1.65;
  opacity: .85;
  margin-bottom: 1.2rem;
  color: var(--white);
}
.philosophy-body {
  font-family: var(--font-body);
  font-size: clamp(.75rem, .95vw, .88rem);
  line-height: 1.65;
  opacity: .85;
  color: var(--white);
}
@media (max-width: 768px) {
  .philosophy-section { padding: 5rem 0 5rem; }
  .philosophy-inner { padding: 0 1.5rem; }
  .philosophy-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "headline headline"
      "left right";
    gap: 2rem 0.5rem;
    margin-bottom: 4rem;
  }
  .philosophy-headline-wrap {
    grid-area: headline;
    padding: 0 0 1rem;
  }
  .philosophy-headline {
    white-space: normal;
  }
  .philosophy-img-wrap--left {
    grid-area: left;
    transform: rotate(-6deg);
    position: relative;
    z-index: 1;
  }
  .philosophy-img-wrap--right {
    grid-area: right;
    transform: rotate(6deg) translateY(-2rem) translateX(-1.2rem);
    position: relative;
    z-index: 2;
  }
}

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ─── COOKIE / CONSENT BANNER (self-hosted) ───────────────────────────────── */
.ve-consent {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 9999;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(18,18,18,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.ve-consent.is-visible { opacity: 1; transform: translateY(0); }
.ve-consent-inner { display: flex; flex-direction: column; gap: 1rem; }
.ve-consent-text {
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0;
}
.ve-consent-text a { color: #fff; text-decoration: underline; }
.ve-consent-actions { display: flex; gap: .6rem; }
.ve-consent-btn {
  flex: 1;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
/* Reject must be as easy/visible as accept — equal size, both clearly styled */
.ve-consent-deny {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}
.ve-consent-deny:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.ve-consent-accept {
  background: #fff;
  border: 1px solid #fff;
  color: #111;
}
.ve-consent-accept:hover { background: rgba(255,255,255,.85); }

/* Click-to-load placeholder inside a Vimeo overlay */
.ve-gate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  padding: 1.5rem;
  background: rgba(10,10,10,.9);
  border-radius: inherit;
}
.ve-gate-text {
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.ve-gate-btn {
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: #fff;
  border: none;
  color: #111;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
.ve-gate-btn:hover { background: rgba(255,255,255,.85); }
.ve-gate-link {
  font-family: var(--font-body);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .ve-consent-actions { flex-direction: column-reverse; }
}