/* ===== Serendipia Audiovisual — cinematic/editorial theme ===== */

/* Self-hosted fonts — latin subsets */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
}

:root{
  --bg: #0e0d0b;
  --bg-rgb: 14,13,11;
  --bg-soft: #141210;
  --paper: #f3ede1;
  --paper-dim: #cfc7b6;
  --amber: #d98a3d;
  --amber-bright: #f0a94f;  
  --rust: #b04a2c;
  --logo: #6b93c9;
  --logo-dim: rgba(107,147,201,0.55);
  --line: rgba(243,237,225,0.14);
  --line-strong: rgba(243,237,225,0.28);

  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;

  --container: 1240px;

  color-scheme: dark;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f3ede1;
  --bg-rgb: 243,237,225;
  --bg-soft: #e9e0cd;
  --paper: #1c1712;
  --paper-dim: #5c5346;
  --amber: #b5601f;
  --amber-bright: #954d16;
  --rust: #a13d20;
  --logo: #3A5E8A;
  --logo-dim: rgba(58,94,138,0.4);
  --line: rgba(28,23,18,0.12);
  --line-strong: rgba(28,23,18,0.24);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family: var(--serif); font-weight:500; }
p{ margin:0; }

/* film grain overlay */
.grain{
  position: fixed; inset:0; z-index: 500; pointer-events:none;
  opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
:root[data-theme="light"] .grain{ opacity:.035; mix-blend-mode: multiply; }

/* sprocket rails */
.sprockets{
  position: fixed; top:0; bottom:0; width:22px; z-index:400; pointer-events:none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 14px, var(--line-strong) 14px 15px);
}
.sprockets::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, var(--line-strong) 2.5px, transparent 2.6px);
  background-size: 100% 30px;
  background-position: center 8px;
}
.sprockets--left{ left:0; }
.sprockets--right{ right:0; }
@media (max-width: 900px){ .sprockets{ display:none; } }

/* ===== Nav ===== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(24px, 5vw, 64px);
  backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(var(--bg-rgb),0.85), transparent);
  transition: background .3s ease;
}
.nav__mark{
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.18em;
  display:flex; align-items:center; gap:10px; font-weight:500;
}
.nav__logo{
  height: 18px; width: auto; opacity: 0.7; object-fit: contain;
  transition: opacity .25s ease;
}
.nav__mark:hover .nav__logo{ opacity: 0.9; }
.nav__rec{
  width:8px; height:8px; border-radius:50%; background: var(--rust);
  box-shadow: 0 0 8px var(--rust);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.nav__links{ display:flex; gap: 36px; font-size:14px; }
.nav__links a{ position:relative; opacity:.85; transition: opacity .2s; }
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--logo); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav__links a:hover::after{ transform: scaleX(1); }

.nav__cta{
  font-family: var(--mono); font-size:13px; letter-spacing:.05em;
  border:1px solid var(--line-strong); padding:9px 18px; border-radius:2px;
  transition: background .2s, color .2s;
}
.nav__cta:hover{ background: var(--paper); color: var(--bg); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav__burger span{ width:22px; height:2px; background: var(--paper); }

/* theme toggle */
.theme-toggle{
  position: relative; width: 44px; height: 26px; border-radius: 20px;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  display:flex; align-items:center; padding: 0 5px; justify-content: space-between;
  font-size: 12px; line-height:1; transition: background .3s ease, border-color .3s ease;
}
.theme-toggle__icon{ opacity:.55; transition: opacity .2s ease; position:relative; z-index:1; }
.theme-toggle::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background: var(--amber); transition: transform .3s cubic-bezier(.65,0,.35,1);
}
:root[data-theme="light"] .theme-toggle::before{ transform: translateX(18px); }
:root[data-theme="light"] .theme-toggle .theme-toggle__icon--sun{ opacity: 1; }
:root:not([data-theme="light"]) .theme-toggle .theme-toggle__icon--moon{ opacity: 1; }

.mobile-menu{
  position: fixed; inset:0; z-index:900; background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  font-family: var(--serif); font-size: 34px;
  transform: translateY(-100%); transition: transform .4s ease;
}
.mobile-menu.open{ transform: translateY(0); }

@media (max-width: 860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(24px, 5vw, 64px);
  overflow:hidden;
  /* hero stays a dark cinematic frame regardless of site theme */
  background: #0e0d0b;
  color: #f3ede1;
}
.hero .hero__desc{ color: #cfc7b6; }
.hero .hero__eyebrow{ color: #cfc7b6; }
.hero .btn--ghost{ border-color: rgba(243,237,225,0.28); }
.hero .btn--ghost:hover{ border-color: #f3ede1; }
.hero .hero__scroll span{ color: #cfc7b6; }
.hero__filmstrip{
  position:absolute; inset:0; top: 8%; height: 42%;
  display:flex; align-items:center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
.hero__reel{
  display:flex; flex-shrink:0; gap: 3px;
  animation: reel-scroll 52s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .hero__reel{ animation: none; } }
.hero__frame{
  position:relative; flex-shrink:0; width: clamp(180px, 18vw, 280px); aspect-ratio: 4/3;
  overflow:hidden; border-left: 2px solid rgba(14,13,11,0.6);
}
.hero__frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,13,11,0.15), rgba(14,13,11,0.55) 85%);
}
.hero__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(0.55) sepia(0.35) saturate(1.4) contrast(1.05) brightness(0.62);
}
.hero__frame-cap{
  position:absolute; left:12px; bottom:10px; z-index:2;
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em; color: rgba(243,237,225,0.75);
  text-transform: uppercase;
}
@keyframes reel-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-100% - 3px)); }
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 15%, rgba(176,74,44,0.14), transparent 60%),
    linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.35) 30%, rgba(14,13,11,0.5) 55%, #0e0d0b 100%);
}
.hero__content{ position:relative; z-index:2; max-width: 900px; padding-top: 90px; }

.hero__eyebrow{
  font-family: var(--mono); font-size: 13px; letter-spacing:.1em; color: var(--paper-dim);
  margin-bottom: 26px; display:flex; align-items:center; gap:12px;
}
.tc{ color: var(--amber-bright); }

.hero__title{
  font-size: clamp(48px, 8.4vw, 118px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero__title-line{ display:block; }
.hero__title-line--em{ font-style: italic; font-weight:400; color: var(--amber-bright); }

.hero__desc{
  margin-top: 30px; max-width: 520px; font-size: 18px; line-height:1.6; color: var(--paper-dim);
}

.hero__actions{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; }
.btn{
  font-family: var(--mono); font-size: 13px; letter-spacing:.06em;
  padding: 15px 30px; border-radius:2px; display:inline-block; transition: all .25s ease;
}
.btn--primary{ background: var(--amber); color: #000; }
.btn--primary:hover{ background: var(--amber-bright); transform: translateY(-2px); }
.btn--ghost{ border:1px solid var(--line-strong); }
.btn--ghost:hover{ border-color: var(--paper); }

.hero__scroll{
  position:absolute; bottom: 36px; left: clamp(24px, 5vw, 64px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll span{ font-family: var(--mono); font-size:11px; letter-spacing:.2em; color: var(--paper-dim); writing-mode: vertical-rl; }
.hero__scroll-line{ width:1px; height:50px; background: linear-gradient(var(--amber), transparent); animation: scrolldown 2s ease-in-out infinite; }
@keyframes scrolldown{ 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }

/* ===== Shared section chrome ===== */
.section-label{
  font-family: var(--mono); font-size: 13px; letter-spacing:.1em; color: var(--logo);
  margin-bottom: 14px;
}
.section-label--light{ color: var(--logo); }
.section-title{ font-size: clamp(32px, 4vw, 52px); margin-bottom: 50px; max-width: 700px; }
.section-title--light{ color: var(--paper); }

/* ===== Intro ===== */
.intro{
  max-width: var(--container); margin: 0 auto; padding: 140px clamp(24px,5vw,64px) 80px;
}
.intro__text{
  font-family: var(--serif); font-weight:300; font-size: clamp(24px, 3vw, 34px); line-height:1.45;
  color: var(--paper-dim); max-width: 900px;
}
.intro__text strong{ color: var(--paper); font-weight:500; }

/* ===== Services ===== */
.services{ max-width: var(--container); margin: 0 auto; padding: 60px clamp(24px,5vw,64px) 120px; }
.services__list{ border-top: 1px solid var(--line); }
.service{
  position: relative;
  display:grid; grid-template-columns: 70px 240px 1fr; align-items:baseline; gap: 24px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  padding-left: 0;
  transition: padding-left .45s cubic-bezier(.4,0,.2,1), background .45s cubic-bezier(.4,0,.2,1);
}
.service::before{
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 2px; height: 70%;
  background: var(--amber);
  border-radius: 1px;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  transform-origin: bottom;
}
.service:hover{ padding-left: 20px; background: rgba(217,138,61,0.04); }
.service:hover::before{ transform: translateY(-50%) scaleY(1); transform-origin: top; }
.service__num{
  font-family: var(--mono); color: var(--logo); font-size:14px;
  transition: color .45s cubic-bezier(.4,0,.2,1);
}
.service:hover .service__num{ color: var(--amber-bright); }
.service__name{
  font-size: clamp(24px,3vw,32px);
  transition: color .45s cubic-bezier(.4,0,.2,1);
}
.service:hover .service__name{ color: var(--amber-bright); }
.service__desc{ color: var(--paper-dim); font-size: 15px; max-width: 480px; }
.service__num,
.service__name,
.service__desc{
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.service:hover .service__num,
.service:hover .service__name,
.service:hover .service__desc{
  transform: translateX(8px);
}
@media (max-width: 720px){
  .service{ grid-template-columns: 40px 1fr; }
  .service__desc{ grid-column: 2 / 3; margin-top:6px; }
}

/* ===== Work ===== */
.work{ background: var(--bg-soft); padding: 120px clamp(24px,5vw,64px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.work__grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
@media (max-width: 980px){ .work__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .work__grid{ grid-template-columns: 1fr;} }

.project{ position:relative; padding: 28px 24px 30px; cursor:pointer; }
.project__thumb{
  aspect-ratio: 16/10; margin-bottom: 20px; border-radius:2px; position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(var(--tint),1) 0%, rgba(14,13,11,1) 100%);
  display:flex; align-items:center; justify-content:center;
}
.project__thumb::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px);
}
.project__thumb::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(14,13,11,0.15) 0%, rgba(14,13,11,0.55) 100%);
}
.project__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(.35) contrast(1.05) brightness(.85) sepia(.1);
  transition: filter .4s ease, transform .5s ease;
}
.project:hover .project__img{ filter: grayscale(0) contrast(1.05) brightness(.95) sepia(0); transform: scale(1.04); }
.project__play{
  position:relative; z-index:3;
  font-size: 15px; color: var(--paper); width:52px; height:52px; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center;
  padding-left:3px; transition: transform .3s ease, background .3s ease, border-color .3s ease;
  background: rgba(14,13,11,0.4);
}
.project:hover .project__play{ transform: scale(1.12); background: var(--amber); color:#000; border-color: var(--amber); }
.project:hover .project__thumb{ box-shadow: inset 0 0 0 1px var(--amber); }

.project__video{ position:absolute; inset:0; width:100%; height:100%; z-index:4; border:0; }

.project__client{ font-family: var(--mono); font-size:12px; letter-spacing:.06em; color: var(--logo); margin-bottom:8px; }
.project__title{ font-size: 21px; line-height:1.25; font-weight:500; }

/* ===== Team ===== */
.team{ max-width: var(--container); margin:0 auto; padding: 130px clamp(24px,5vw,64px); }
.team__text{ font-size:17px; line-height:1.6; color:var(--paper-dim); max-width:600px; margin-bottom:48px; }
.team__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (max-width: 700px){ .team__grid{ grid-template-columns: 1fr; } }
.member{ padding: 44px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.member__slate{ font-family: var(--mono); font-size:11px; color: var(--paper-dim); letter-spacing:.1em; }
.member__name{ font-size: clamp(26px,3vw,34px); margin-top:18px; margin-bottom:6px; }
.member__role{ color: var(--amber-bright); font-size:14px; margin-bottom: 22px; }
.member__mail{ font-family: var(--mono); font-size:13px; color: var(--paper-dim); border-bottom: 1px solid var(--line-strong); padding-bottom:2px; }
.member__mail:hover{ color: var(--paper); border-color: var(--paper); }

/* ===== Contact ===== */
.contact{ background: var(--bg-soft); border-top:1px solid var(--line); padding: 130px clamp(24px,5vw,64px); }
.contact__inner{ max-width: var(--container); margin:0 auto; }
.contact__title{ font-size: clamp(44px, 7vw, 88px); line-height:0.98; margin-bottom: 70px; font-style:italic; font-weight:400; }
.contact__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (max-width: 900px){ .contact__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .contact__grid{ grid-template-columns: 1fr; } }
.contact__label{ display:block; font-family: var(--mono); font-size:12px; letter-spacing:.1em; color: var(--logo); margin-bottom:14px; }
.contact__block a, .contact__block p{ font-size: 17px; color: var(--paper-dim); line-height:1.5; }
.contact__block a:hover{ color: var(--amber-bright); }
.contact__social{ display:flex; flex-direction:column; gap:8px; }

/* ===== Footer ===== */
.footer{
  display:flex; justify-content:space-between; padding: 30px clamp(24px,5vw,64px);
  font-family: var(--mono); font-size: 12px; color: var(--paper-dim); letter-spacing:.04em;
}

/* ===== Cinema overlay ===== */
.cinema{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  visibility:hidden; pointer-events:none;
}
.cinema.is-open{ visibility:visible; pointer-events:auto; }

.cinema__bg{
  position:absolute; inset:0; background:#050403; opacity:0;
  transition: opacity .6s ease;
}
.cinema.is-open .cinema__bg{ opacity:.96; }

.cinema__close{
  position:absolute; top:28px; right:32px; z-index:10;
  width:48px; height:48px; background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.7);
  transition: opacity .5s ease .3s, transform .5s ease .3s;
}
.cinema.is-open .cinema__close{ opacity:1; transform: scale(1); }
.cinema__close span{
  position:absolute; width:22px; height:1.5px; background: var(--paper);
  transition: background .2s ease;
}
.cinema__close span:first-child{ transform: rotate(45deg); }
.cinema__close span:last-child{ transform: rotate(-45deg); }
.cinema__close:hover span{ background: var(--amber-bright); }

.cinema__stage{
  position:relative; width:92vw; max-width:1200px;
  opacity:0; transform: translateY(30px) scale(.96);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.cinema.is-open .cinema__stage{ opacity:1; transform: translateY(0) scale(1); }

.cinema__mask{ position:relative; }

.cinema__letterbox{
  position:absolute; left:0; right:0; z-index:3; background:#050403;
  height:0; transition: height .7s cubic-bezier(.65,0,.35,1) .25s;
}
.cinema__letterbox--top{ top:0; }
.cinema__letterbox--bottom{ bottom:0; }
.cinema.is-open .cinema__letterbox{
  height: clamp(28px, 5vh, 60px);
}

.cinema__frame{
  position:relative; background:#0a0907; border-radius:3px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(243,237,225,0.08), 0 30px 80px rgba(0,0,0,.7);
}

.cinema__curtain{
  position:absolute; top:0; bottom:0; z-index:2; width:0;
  background: linear-gradient(to right, #0c0a07 0%, #1a130b 100%);
  transition: width .8s cubic-bezier(.65,0,.35,1) .1s;
}
.cinema__curtain--left{ left:0; }
.cinema__curtain--right{ right:0; }
.cinema.is-open .cinema__curtain{ width: 3.8%; }

.cinema__drapery{
  position:absolute; top:0; bottom:0; width:100%;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(217,138,61,0.04) 7px 10px),
    linear-gradient(90deg, rgba(243,237,225,0.02) 0%, transparent 100%);
}
.cinema__curtain--right .cinema__drapery{
  background-image:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(217,138,61,0.04) 7px 10px),
    linear-gradient(270deg, rgba(243,237,225,0.02) 0%, transparent 100%);
}

.cinema__screen{
  position:relative; z-index:1; aspect-ratio:16/9; width:100%;
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
.cinema__screen iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.cinema__loader{
  font-family: var(--mono); font-size:13px; letter-spacing:.12em;
  color: rgba(243,237,225,0.35);
  transition: opacity .4s ease;
}
.cinema__screen.is-loaded .cinema__loader{ opacity:0; }

.cinema__info{
  margin-top:24px; text-align:center;
  font-family: var(--serif); font-size: clamp(18px,2.4vw,26px); font-weight:400; font-style:italic;
  color: var(--paper);
  opacity:0; transform: translateY(8px);
  transition: opacity .6s ease .4s, transform .6s ease .4s;
}
.cinema.is-open .cinema__info{ opacity:1; transform: translateY(0); }

@media (max-width: 860px){
  .cinema__stage{ width:98vw; }
  .cinema__close{ top:16px; right:20px; }
  .cinema.is-open .cinema__curtain{ width:0; }
  .cinema.is-open .cinema__letterbox{ height: clamp(14px,3vh,30px); }
}

/* ===== Custom block modules ===== */
.text-block{ padding: 100px clamp(24px,5vw,64px); }
.text-block__inner{ max-width: var(--container); margin:0 auto; }
.text-block__content{ font-family: var(--serif); font-size: clamp(18px,2vw,22px); line-height:1.6; color: var(--paper-dim); max-width:800px; }

.image-block{ padding: 80px clamp(24px,5vw,64px); text-align:center; }
.image-block__inner{ max-width: var(--container); margin:0 auto; }
.image-block__img{ max-width:100%; height:auto; border-radius:3px; }
.image-block__caption{ font-family: var(--mono); font-size:13px; color: var(--paper-dim); margin-top:16px; letter-spacing:.04em; }

.video-block{ padding: 80px clamp(24px,5vw,64px); }
.video-block__inner{ max-width: var(--container); margin:0 auto; }
.video-block__embed{ position:relative; aspect-ratio:16/9; width:100%; margin-top:20px; border-radius:3px; overflow:hidden; background:#000; }
.video-block__embed iframe,
.video-block__embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== Reveal on scroll ===== */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }