/* ==========================================================================
   PAG SISTEM — styles
   Palette: black #0a0a0a / white #f5f5f5 / red #ff0019 (+ greys)
   CSP-safe: no inline styles anywhere; dynamic values arrive via CSS custom
   properties set with element.style.setProperty() from /js/main.js
   ========================================================================== */

:root {
  --black: #0a0a0a;
  --white: #f5f5f5;
  --red: #ff0019;
  --red-deep: #7a000c;
  --g-900: #111111;
  --g-850: #161616;
  --g-800: #1c1c1c;
  --g-700: #262626;
  --g-600: #3a3a3a;
  --g-500: #5c5c5c;
  --g-400: #8a8a8a;
  --g-300: #b3b3b3;

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);

  /* Motion tokens (MOTION-REFERENCE.md §0) — mirrored in /js/main.js as EASE / DUR */
  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.2s;
  --e-out: cubic-bezier(.25, 1, .5, 1);
  --e-in: cubic-bezier(.5, 0, .75, 0);
  --e-inout: cubic-bezier(.75, 0, .25, 1);
  --e-base: cubic-bezier(.25, .1, .25, 1);
  --e-dive: cubic-bezier(.6, 0, 0, 1);
  --e-hscroll: cubic-bezier(.25, 0, .75, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}
/* Desktop effects on ordinary-density screens: the same 180px grain tile, pre-rendered (rendered from
   the SVG above). The live feTurbulence filter makes the GPU compile a Perlin-noise shader the first
   time a grain layer is rasterised: a ~0.5 s freeze on integrated graphics when the portfolio comes in.
   High-density screens keep the SVG (it stays sharp at 2×). */
@media (max-resolution: 1.49dppx) {
  html.fx { --noise: url("/assets/noise.webp?v=1"); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body, h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}
/* No horizontal overflow — the wide tracks (marquee, portfolio reel) must never widen the mobile
   layout viewport. `clip` (unlike `hidden`) creates no scroll container, so position: sticky keeps
   working. Fallback: hidden on <html> only (propagates to the viewport; body stays visible). */
html { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body.is-locked { overflow: hidden; }

::selection { background: var(--red); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
main:focus { outline: none; }
section[tabindex="-1"]:focus { outline: none; }

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

.skip-link {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 2000;
  padding: 12px 18px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* ---------- REC dot ---------- */
.rec-dot {
  display: inline-block;
  width: .62em; height: .62em;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(225, 6, 0, .8);
  animation: rec-blink 1.1s steps(2, jump-none) infinite;
  vertical-align: middle;
}
@keyframes rec-blink { 0% { opacity: 1; } 100% { opacity: .15; } }

/* ==========================================================================
   PRELOADER — dome window (MOTION-REFERENCE §2)
   The black fill with the dome-shaped hole and the two frame lines are SVG
   paths redrawn by JS from two numbers (window width / top). Until JS draws
   them the overlay is a plain black background.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  /* Fallback: never keep the page covered. Without JS, css/nojs.css (via <noscript>) hides it at
     once; with JS the dive waits for the page to be ready (capped at 7s) and the JS safety timer
     fires at 10s, so this 12s net only matters if the script dies mid-way. */
  animation: pl-fallback .01s 12s forwards;
}
@keyframes pl-fallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader.is-masked { background: transparent; }
.preloader.is-diving { pointer-events: none; }
.preloader.is-done { display: none; }
html.is-preloading,
html.is-preloading body { overflow: hidden; }

.pl-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.pl-fill { fill: var(--black); }
.pl-frame { fill: none; vector-effect: non-scaling-stroke; }
.pl-frame-inner { stroke: var(--red); stroke-width: 1.5; }
.pl-frame-outer { stroke: rgba(245, 245, 245, .28); stroke-width: 1; }

.pl-ui { position: absolute; inset: 24px; pointer-events: none; }
.pl-ui .vf-corner { border-color: rgba(245, 245, 245, .5); }
.pl-rec {
  position: absolute;
  top: 14px; left: 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .15em;
}
.pl-tc { color: var(--g-300); font-variant-numeric: tabular-nums; }

.pl-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 0 16px;
  text-align: center;
}
.pl-mark { width: min(26vmin, 170px); height: auto; aspect-ratio: 1; }
.pl-mark .mark-ring {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  animation: ring-draw var(--dur-m) .1s var(--e-inout) forwards;
}
.pl-mark .mark-grid { animation: grid-turn var(--dur-m) .3s var(--e-inout) both; }
.pl-mark .mark-sq { animation: sq-in .6s var(--e-out) both; }
.pl-mark .sq-tl { --sx: -26px; --sy: -26px; animation-delay: .04s; }
.pl-mark .sq-tr { --sx: 26px; --sy: -26px; animation-delay: .09s; }
.pl-mark .sq-br { --sx: 26px; --sy: 26px; animation-delay: .14s; }
.pl-mark .sq-bl { --sx: -26px; --sy: 26px; animation-delay: .19s; }
.pl-mark .mark-dot { animation: dot-rec 1s .9s steps(2, jump-none) infinite; }
.preloader.is-short .pl-stage,
.preloader.is-short .pl-progress,
.preloader.is-short .pl-count,
.preloader.is-short .pl-rec { display: none; }

/* Official wordmark, rebuilt by JS as 9 masked strips (≈ one per letter) */
.pl-word { position: relative; width: min(72vw, 420px); }
.pl-word img { display: block; width: 100%; height: auto; }
.pl-word.has-strips img { visibility: hidden; }
.pl-strips { position: absolute; inset: 0; display: flex; }
.pl-strip { flex: 1 1 0; height: 100%; overflow: hidden; margin-right: -.5px; }
.pl-strip > span {
  display: block;
  height: 100%;
  background: url("/assets/pag-wordmark.webp?v=2") no-repeat;
  background-size: 900% 100%;
  background-position: calc(var(--i, 0) * 12.5%) 0;
}
.pl-tag {
  font-family: var(--f-mono);
  font-size: clamp(.6rem, 1.6vw, .78rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-300);
}
.pl-tag .pl-pag { color: var(--white); border-bottom: 2px solid var(--red); }
html.js .pl-word:not(.has-strips),
html.js .pl-tag:not(.is-split) { opacity: 0; }
/* start states (WAAPI takes over with fill: both) */
.pl-tag .char { display: inline-block; opacity: 0; }
.pl-strip > span { transform: translateY(105%); }

/* Vertical progress line 1px × 96px + counter */
.pl-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 72px);
  width: 1px;
  height: 96px;
  background: rgba(245, 245, 245, .18);
  overflow: hidden;
}
.pl-progress-fill {
  position: absolute; inset: 0;
  background: var(--red);
  transform: translateY(-100%);
}
.pl-count {
  position: absolute;
  left: calc(50% + 14px);
  bottom: clamp(28px, 7vh, 72px);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--g-300);
  font-variant-numeric: tabular-nums;
}

/* Hero is shown at .75 inside the window, then grows to 1 during the dive */
html.is-preloading .hero { transform: scale(.75); transform-origin: 50% 0; }

/* ---------- Shared logo mark (inline SVG) ---------- */
.mark { display: block; overflow: visible; }
.mark .mark-grid,
.mark .mark-sq,
.mark .mark-ring { transform-box: fill-box; transform-origin: center; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes grid-turn { from { transform: rotate(-90deg) scale(.86); } to { transform: rotate(0) scale(1); } }
@keyframes sq-in {
  from { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(45deg) scale(.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes dot-rec { 0% { fill: #ff0019; } 100% { fill: #0a0a0a; } }

/* ==========================================================================
   WIPE (anchor transitions)
   ========================================================================== */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.wipe-label {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 14vw, 12rem);
  letter-spacing: .02em;
  color: var(--black);
  text-transform: uppercase;
}

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor, .cursor-dot { display: none; }
html.has-cursor .cursor,
html.has-cursor .cursor-dot {
  display: block;
  position: fixed;
  top: 0; left: 0;
  z-index: 1400;
  pointer-events: none;
  will-change: transform;
}
/* Alvo de foco de câmara: 4 cantos de enquadramento (retículo AF) + cruz e ponto ao centro.
   Normal = enquadrar · is-hover = foco trancado (cantos fecham) · is-play = abre a vermelho com "● PLAY". */
html.has-cursor .cursor {
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  display: grid;
  place-items: center;
}
.cursor::before {
  --c: var(--white);
  --l: 12px;   /* comprimento de cada perna do canto */
  --t: 1.5px;  /* espessura */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
  filter: drop-shadow(0 0 1px rgba(10, 10, 10, .55)); /* legível sobre vídeo e sobre o vermelho */
  transition: transform .45s var(--ease-out), opacity .3s ease;
}
.cursor.is-hover::before { transform: scale(.62); --t: 2px; }
.cursor.is-play::before { transform: scale(2.1); --c: var(--red); --l: 9px; --t: 1px; }
.cursor.is-down::before { transform: scale(.5); }
.cursor.is-play.is-down::before { transform: scale(1.85); }
.cursor.is-hidden::before { opacity: 0; }
/* until the first mouse move the reticle/dot have no position yet (would sit at 0,0) */
html.cursor-idle .cursor,
html.cursor-idle .cursor-dot { visibility: hidden; }
.cursor-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--white);
  text-shadow: 0 0 6px rgba(10, 10, 10, .8);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .4s var(--ease-out);
}
.cursor-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.cursor.is-play .cursor-label { opacity: 1; transform: scale(1); }
/* centro do alvo: ponto vermelho com cruz fina */
html.has-cursor .cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .5);
}
.cursor-dot::before,
.cursor-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: rgba(245, 245, 245, .75);
}
.cursor-dot::before { width: 15px; height: 1px; margin: -.5px 0 0 -7.5px; }
.cursor-dot::after { width: 1px; height: 15px; margin: -7.5px 0 0 -.5px; }
/* sobre os vídeos o centro dá lugar ao "● PLAY" */
html:has(.cursor.is-play) .cursor-dot { opacity: 0; }
html.has-cursor .cursor-dot { transition: opacity .2s ease; }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor select,
html.has-cursor label { cursor: none; }
html.has-cursor input,
html.has-cursor textarea { cursor: text; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: transform .5s var(--ease-out), background-color .4s ease;
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -1;
}
.site-header.is-scrolled::before { opacity: 1; }
/* Desktop scroll effects: no backdrop blur over the constantly-repainting hero/dome — near-solid fill instead */
html.fx .site-header::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(10, 10, 10, .94);
}
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.brand-mark { width: 40px; height: 40px; }
.brand-mark .mark-grid { transition: transform .8s var(--ease-io); }
.brand-mark .mark-dot { transition: fill .3s ease; }
.brand:hover .brand-mark .mark-grid,
.brand:focus-visible .brand-mark .mark-grid { transform: rotate(90deg); }
.brand:hover .brand-mark .mark-dot,
.brand:focus-visible .brand-mark .mark-dot { fill: #ff0019; }
/* letreiro oficial (2000×561) */
.brand-name { display: block; height: 34px; width: auto; transition: transform .5s var(--ease-out); }
.brand:hover .brand-name,
.brand:focus-visible .brand-name { transform: scale(1.04) rotate(-1.5deg); }

.main-nav ul { display: flex; gap: clamp(12px, 2vw, 32px); }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .9rem;
  font-weight: 500;
  padding: 6px 0;
}
.nav-num {
  font-family: var(--f-mono);
  font-size: .62rem;
  color: var(--g-400);
  transition: color .3s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.main-nav a:hover .nav-num,
.main-nav a.is-current .nav-num { color: var(--red); }

.menu-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 48px; height: 48px;
  border: 1px solid var(--g-600);
  border-radius: 50%;
  place-items: center;
}
.menu-toggle-bars { display: grid; gap: 6px; width: 20px; }
.menu-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform .45s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Film-timeline scroll progress */
.timeline-progress {
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(245, 245, 245, .12) 6px 10px) center / 100% 2px no-repeat;
  overflow: hidden;
  pointer-events: none;
}
.timeline-fill {
  position: absolute;
  left: 0; top: 2px;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}
.timeline-head {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 6px;
  background: var(--white);
  transform: translateX(calc(var(--progress, 0) * 100vw - 2px));
}

/* Header re-theme per section (MOTION-REFERENCE §7): JS sets data-theme from the
   section under the header's centre line. Forced dark while the mobile menu is open. */
.brand-mark { will-change: transform; }
.site-header .main-nav a,
.site-header .menu-toggle,
.timeline-fill,
.timeline-head { transition: color .5s ease, background-color .5s ease, border-color .5s ease; }
.site-header::before { transition: opacity .4s ease, background-color .5s ease; }
html:not(.menu-open) .site-header[data-theme="red"] { color: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"]::before { background: rgba(255, 0, 25, .82); }
html.fx:not(.menu-open) .site-header[data-theme="red"]::before { background: var(--red); }
html:not(.menu-open) .site-header[data-theme="red"] .nav-num { color: rgba(10, 10, 10, .72); }
html:not(.menu-open) .site-header[data-theme="red"] .main-nav a::after { background: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .main-nav a:hover .nav-num,
html:not(.menu-open) .site-header[data-theme="red"] .main-nav a.is-current .nav-num { color: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .header-cta { background: var(--black); border-color: var(--black); color: var(--white); }
html:not(.menu-open) .site-header[data-theme="red"] .header-cta:hover,
html:not(.menu-open) .site-header[data-theme="red"] .header-cta:focus-visible { color: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .menu-toggle { border-color: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .menu-toggle-bars span { background: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .timeline-fill { background: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] .timeline-head { background: var(--black); }
html:not(.menu-open) .site-header[data-theme="red"] :focus-visible { outline-color: var(--black); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --mx: 0px; --my: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px;
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--white);
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .5s var(--ease-out), color .4s ease, border-color .4s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--white);
  transform: translateY(101%);
  transition: transform .55s var(--ease-io);
  z-index: -1;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--black); }
.btn > span, .btn-icon { transition: transform .5s var(--ease-out); }
.btn-icon { width: 16px; height: 16px; }
.btn:hover .btn-icon { transform: translateX(4px); }

/* Black label on red (≈5.3:1 — white small mono on #ff0019 is only ≈4:1). Hover/focus: white fill
   slides in, label stays black and the border turns white, so the state change is still obvious. */
.btn-red { background: var(--red); border-color: var(--red); color: var(--black); }
.btn-red:hover, .btn-red:focus-visible { border-color: var(--white); }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .72rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 80px) 0 clamp(88px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}
/* Background layer is 150% tall so it can drift up (parallax) without showing an edge */
.hero-bg {
  position: absolute;
  inset: 0 0 -50% 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 75%;
  background: var(--black);
}
/* The reel (and its poster) fill the visible part of the layer; the extra 50% below stays black
   and is only reached while the dome covers the hero. */
.hero-reel {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 66.67%;
  object-fit: cover;
  z-index: -3;
  opacity: .6;
}
/* Legibility: darken towards the title (left / bottom) plus a static brand-red light leak */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0 0 33.34% 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(10 10 10 / .6) 0%, rgb(10 10 10 / .08) 26%, rgb(10 10 10 / .3) 60%, var(--black) 100%),
    linear-gradient(90deg, rgb(10 10 10 / .7), rgb(10 10 10 / .05) 72%),
    radial-gradient(55% 45% at 88% 62%, rgb(255 0 25 / .22), transparent 70%);
}
.hero-bg .hero-vignette { bottom: 33.34%; }

/* Desktop + motion: sticky hero inside a tall area, red dome rises over it (MOTION-REFERENCE §1).
   Area = 200vh + 50vw; the dome overlaps it by 100vh + 50vw, so it enters at the viewport
   bottom on load and fully covers the screen exactly when the hero un-sticks. */
html.fx .hero-area { position: relative; z-index: 0; height: calc(200vh + 50vw); }
html.fx .hero { position: sticky; top: 0; height: 100vh; min-height: 0; }
html.fx .hero-bg, html.fx .hero-content { will-change: transform; }
/* Film grain: one noise texture (drawn once by main.js) in a canvas 16% larger than the hero,
   jumped around by a stepped transform animation: compositor only, no canvas redraw per frame. */
.hero-grain-box {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 66.67%;
  z-index: -1;
  overflow: hidden;
  opacity: .08;
  pointer-events: none;
}
.hero-grain {
  position: absolute;
  left: -8%; top: -8%;
  width: 116%;
  max-width: none; /* the reset caps replaced elements at 100% */
  height: 116%;
  animation: hero-grain .6s steps(1, end) infinite;
}
.hero-grain.is-off { animation-play-state: paused; }
@keyframes hero-grain {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(-5.2%, 3.1%, 0); }
  20%  { transform: translate3d(4.4%, -6%, 0); }
  30%  { transform: translate3d(-2.6%, 6.2%, 0); }
  40%  { transform: translate3d(6.1%, 1.8%, 0); }
  50%  { transform: translate3d(-6.3%, -4.1%, 0); }
  60%  { transform: translate3d(1.9%, 4.7%, 0); }
  70%  { transform: translate3d(5.3%, -2.2%, 0); }
  80%  { transform: translate3d(-3.8%, -6.4%, 0); }
  90%  { transform: translate3d(2.7%, 5.9%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* static scanlines only (a rolling bar would repaint the whole hero, video included, every frame) */
.hero-scan {
  position: absolute; inset: 0 0 33.34% 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(245 245 245 / .02) 0 1px, transparent 1px 3px);
}
.hero-vignette {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .7));
}

.viewfinder {
  position: absolute;
  inset: calc(var(--header-h) + 18px) var(--gutter) 24px;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--g-300);
}
.vf-corner {
  position: absolute;
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  border: 0 solid rgba(245, 245, 245, .7);
}
.vf-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vf-cross {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  opacity: .35;
  background:
    linear-gradient(var(--white), var(--white)) center / 1px 100% no-repeat,
    linear-gradient(var(--white), var(--white)) center / 100% 1px no-repeat;
}
.hud {
  position: absolute;
  left: clamp(30px, 4vw, 56px);
  right: clamp(30px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 32px);
}
.hud-top { top: 14px; }
.hud-bottom { bottom: 14px; justify-content: flex-end; }
/* Keep the frame clear of the floating WhatsApp button (52px at 16px from the corner). The centre
   crosshair is hidden on the hero: at every width it lands on the big title. */
.hero .vf-cross { display: none; }
@media (min-width: 641px) {
  .hero .viewfinder { left: max(var(--gutter), 84px); right: max(var(--gutter), 84px); }
}
@media (max-width: 640px) {
  .hero .hud-bottom { right: 64px; }
}
.hud-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 500; }
.hud-tc { color: var(--white); font-variant-numeric: tabular-nums; }
.hud-top .hud-item { margin-left: auto; }
.hud-batt {
  width: 26px; height: 12px;
  border: 1px solid var(--g-300);
  padding: 1px;
  position: relative;
}
.hud-batt::after {
  content: "";
  position: absolute;
  right: -4px; top: 3px;
  width: 2px; height: 4px;
  background: var(--g-300);
}
.hud-batt span { display: block; height: 100%; width: 72%; background: var(--white); }

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 calc(var(--gutter) + clamp(12px, 3vw, 44px));
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-300);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--red); }

.hero-title {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  /* also capped by the viewport height, so on short laptop screens (1366×657) the three lines plus
     the lead still fit under the header (≈158px at 1440×900, ≈92px at 1366×657, clear of the HUD) */
  font-size: clamp(2.5rem, min(11vw, 27vh - 85px), 12.5rem);
  /* .96: room for the accents (É of ESTRATÉGICO must not touch AUDIOVISUAL) */
  line-height: .96;
  letter-spacing: -.005em;
}
.hero-title .line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  /* espaço extra no topo para acentos (É) não serem cortados pela máscara */
  padding-top: .2em;
  margin-top: -.2em;
  padding-bottom: .04em;
}
.line-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}
.line-outline .char { color: transparent; }
.hero-title .pag .char,
.hero-title .pag { color: var(--red); -webkit-text-stroke-color: var(--red); }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .char { display: inline-block; }
/* chars fall back into their line with a slight 3D tip; they only get layers while the entrance runs */
html.js .hero-title .line { perspective: 800px; }
html.js .hero-title[data-split] .char {
  transform: translate3d(0, 110%, 0) rotateX(-35deg);
  transform-origin: 50% 100%;
  transition: transform var(--dur-l) var(--e-out);
  transition-delay: calc(var(--i, 0) * 26ms + 60ms);
}
html.js .hero-title[data-split]:not(.is-settled) .char { will-change: transform; }
html.js .hero-title.is-in .char { transform: none; }

.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin-top: clamp(24px, 4vw, 44px);
}
.hero-lead {
  max-width: 44ch;
  color: #d0d0d0; /* over the reel: a step brighter than --g-300 */
  text-shadow: 0 1px 14px rgb(10 10 10 / .7);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-300);
}
.scroll-cue-line {
  width: 1px; height: 36px;
  background: var(--g-600);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--red);
  animation: cue 1.8s var(--ease-io) infinite;
}
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-block: 1px solid var(--g-700);
  padding: clamp(18px, 3vw, 30px) 0;
  background: var(--black);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 64s linear infinite;
}
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; } /* .is-paused: off-screen (main.js) */
.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
  flex-shrink: 0;
}
.marquee-group li {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--g-400);
  transition: color .4s ease, -webkit-text-stroke-color .4s ease;
}
.marquee-group li:hover { color: var(--white); -webkit-text-stroke-color: var(--white); }
.marquee-group li.marquee-sep {
  font-weight: 500;
  color: var(--red);
  -webkit-text-stroke: 0;
  opacity: .9;
}
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   DOME — red half-circle (the logo's ring) that swallows the hero
   ========================================================================== */
.dome {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* the clients marquee follows the icon (centre 50vw, half-size clamp(75px, 12vw, 200px)) closely,
     instead of leaving a long empty red stretch */
  padding-top: calc(50vw + clamp(75px, 12vw, 200px) + 8vw);
  background: var(--red);
  color: var(--black);
  border-radius: 50vw 50vw 0 0;
  overflow: clip;
}
/* The dome overlaps the sticky hero by 100vh + 50vw. It may be shorter than that overlap: the next
   section (opaque, above the hero) then covers the end of the hero area. */
html.fx .dome { margin-top: calc(-100vh - 50vw); }
html.fx .about { position: relative; z-index: 1; background: var(--black); }
.dome-zone { position: absolute; top: 20vw; right: 0; bottom: 0; left: 0; pointer-events: none; }
.dome-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.dome-text {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 58px;
  letter-spacing: 7px;
  text-transform: uppercase;
  fill: var(--black);
  word-spacing: 24px;
}
/* main.js splits the ring into one <svg> per word (.dome-word, same box as the ring) and spreads
   them by rotating each one around the circle's centre: compositor-only, the glyphs are rasterised
   once. The original text stays as the (hidden) measuring source; without JS it is the visible text. */
.dome-ring.is-split .dome-text { visibility: hidden; }
.dome-word { will-change: transform; }
.dome-icon {
  position: absolute;
  left: 50%;
  top: 50vw;
  width: clamp(150px, 24vw, 400px);
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}
/* the icon's drop shadow is painted once on a static disc behind it (a shadow on the rotating
   image had to be re-rasterised with it) */
.dome::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50vw;
  width: clamp(150px, 24vw, 400px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow: 0 30px 80px rgba(10, 10, 10, .35);
  pointer-events: none;
}
html.fx .dome-icon { will-change: transform; }
.dome .marquee { background: transparent; border-color: rgba(10, 10, 10, .22); }
/* nomes a cheio com separador "/" (estilo da Proposta 2, pedido do cliente) */
.dome .marquee-group li { color: var(--black); -webkit-text-stroke: 0; }
.dome .marquee-group li:hover { color: var(--white); }
.dome .marquee-group li.marquee-sep { color: var(--white); }
.dome ::selection { background: var(--black); color: var(--white); }

/* ==========================================================================
   SECTIONS — shared
   ========================================================================== */
.section {
  position: relative;
  padding: clamp(88px, 12vw, 180px) 0;
}
.kicker {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g-300);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker-num {
  color: var(--white);
  padding: 3px 8px;
  border: 1px solid var(--red);
}
.section-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 7rem);
  line-height: 1; /* accents (É, Ç, Ã) must clear the line above */
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.section-title em { font-style: normal; color: var(--red); }
.section-intro {
  color: var(--g-300);
  max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- Scroll reveals (only when JS is active) ---------- */
/* CTN (MOTION-REFERENCE §4): opacity 0 + translateY(3.33rem) → 0, 1.2s Out */
html.js [data-reveal="up"] {
  transition:
    opacity var(--dur-l) var(--e-out),
    transform var(--dur-l) var(--e-out);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, 3.33rem, 0); }
/* mask / wipe: clip-path animations run in WAAPI. Their pre-state must not be a clip-path —
   IntersectionObserver measures the clipped (zero-size) box and would never fire. */
html.js [data-reveal="mask"]:not(.is-in),
html.js [data-reveal="wipe"]:not(.is-in) { opacity: 0; }

/* H — titles split per character (spans built by JS; real text kept in a visually-hidden copy).
   The animation itself is WAAPI; CSS only holds the pre-reveal state. */
.split .word { display: inline-block; white-space: nowrap; }
.split .char { display: inline-block; }
html.js [data-reveal="chars"]:not(.is-in) .char { opacity: 0; }

/* P — paragraphs split per line, each line masked (split only while animating) */
html.js [data-reveal="lines"]:not(.is-in) { opacity: 0; }
.line-mask { display: block; overflow: clip; padding: .14em 0 .08em; margin: -.14em 0 -.08em; } /* room for accents */
.line-inner { display: block; }

/* Slide — slanted clip-path wipe on the frame + zoom-out of its content (§5) */
/* Pre-state is opacity (not clip-path: IntersectionObserver measures the clipped box and would
   never fire); the WAAPI start keyframe applies the collapsed polygon the moment it starts. */
html.js [data-reveal="slide"]:not(.is-in) { opacity: 0; }
html.js [data-reveal="slide"]:not(.is-in) .slide-inner { transform: scale(1.5) translateX(25%); }
[data-reveal="slide"].is-revealing { overflow: hidden; }

/* ==========================================================================
   FOOTAGE (CSS-generated placeholder "video")
   ========================================================================== */
.footage {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(160deg, #1f1f1f, #0b0b0b);
  isolation: isolate;
}
.footage > span { position: absolute; display: none; }
/* vídeo real: capa + pré-visualização muda (toca ao passar o rato/foco) */
.footage-preview,
.footage-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: grayscale(.35) contrast(1.05);
  transition: filter .5s ease, transform 1.2s var(--ease-out);
}
.work:hover .footage-preview,
.work:focus-visible .footage-preview { filter: none; transform: scale(1.04); }
.footage::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: var(--noise);
  opacity: .18;
  z-index: 3;
  pointer-events: none;
}
/* The grain is static: it only moves on the card being hovered / focused (and in the open player).
   No animation at all at rest, not even a paused one: a paused transform animation still gives every
   card its own 4×-area layer inside the moving reel, which was the main paint cost of the portfolio. */
.work:hover .footage::before,
.work:focus-visible .footage::before,
.modal[open] .footage::before { animation: grain-shift .6s steps(5) infinite; }
.footage::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    radial-gradient(110% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7));
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

/* Wedding: sunset + hills */
.f-wedding {
  background: linear-gradient(180deg, #2b2b2b 0%, #4a1511 52%, #1a0a08 53%, #0b0b0b 100%);
}
.f-wedding .footage-sun {
  display: block;
  width: 34%; aspect-ratio: 1;
  left: 50%; top: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, #f5f5f5 0 18%, rgba(245, 170, 160, .6) 32%, rgba(225, 6, 0, .25) 55%, transparent 70%);
  transform: translateX(-50%);
  animation: sun-drift 9s ease-in-out infinite alternate;
}
.f-wedding .footage-horizon {
  display: block;
  left: -10%; right: -10%; bottom: 0; height: 52%;
  background:
    radial-gradient(60% 50% at 30% 10%, #151515 60%, transparent 61%),
    radial-gradient(70% 55% at 80% 18%, #0f0f0f 60%, transparent 61%),
    linear-gradient(#0b0b0b, #0b0b0b) bottom / 100% 70% no-repeat;
  animation: pan-slow 16s ease-in-out infinite alternate;
}
@keyframes sun-drift { from { transform: translate(-50%, 0); } to { transform: translate(-46%, 10%); } }
@keyframes pan-slow { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

/* Corporate: perspective grid */
.f-corp { background: linear-gradient(180deg, #1c1c1c, #0a0a0a 70%); }
.f-corp .footage-grid {
  display: block;
  left: -50%; right: -50%; top: 45%; bottom: -60%;
  background:
    repeating-linear-gradient(90deg, rgba(245, 245, 245, .22) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(245, 245, 245, .22) 0 1px, transparent 1px 60px);
  transform: perspective(400px) rotateX(62deg);
  transform-origin: top;
  animation: grid-run 4s linear infinite;
}
.f-corp::before { background-color: transparent; }
@keyframes grid-run { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 60px; } }

/* Clip: red beam */
.f-clip { background: radial-gradient(80% 60% at 50% 110%, #3a0200, #070707 70%); }
.f-clip .footage-beam {
  display: block;
  left: 50%; top: -20%;
  width: 140%; height: 140%;
  transform-origin: 50% 0;
  background: conic-gradient(from 168deg at 50% 0, transparent 0deg, rgba(225, 6, 0, .75) 12deg, rgba(245, 245, 245, .5) 13deg, rgba(225, 6, 0, .7) 14deg, transparent 26deg);
  filter: blur(6px);
  animation: beam 5s ease-in-out infinite alternate;
}
@keyframes beam { from { transform: translateX(-50%) rotate(-14deg); } to { transform: translateX(-50%) rotate(14deg); } }

/* Ad / product: rotating rings */
.f-ad { background: radial-gradient(circle at 50% 50%, #2a2a2a, #0a0a0a 70%); }
.f-product { background: linear-gradient(135deg, #121212, #2a0a08 60%, #0a0a0a); }
.f-ad .footage-circle, .f-product .footage-circle {
  display: block;
  width: 64%; aspect-ratio: 1;
  left: 18%; top: 50%;
  margin-top: -32%;
  border-radius: 50%;
}
.f-ad .footage-circle {
  background:
    radial-gradient(circle, #0a0a0a 0 30%, transparent 31%),
    repeating-conic-gradient(from 0deg, rgba(245, 245, 245, .25) 0 3deg, transparent 3deg 12deg),
    radial-gradient(circle, #5a2a20 0 60%, #1a1a1a 61%);
  animation: spin 18s linear infinite;
}
.f-product .footage-circle {
  width: 40%; left: 30%; margin-top: -20%;
  background: radial-gradient(circle at 35% 30%, #f5f5f5 0 4%, #6b6b6b 20%, #1a1a1a 60%, #0a0a0a);
  box-shadow: 0 0 0 1px rgba(245, 245, 245, .08), 18px 0 60px rgba(225, 6, 0, .6);
  animation: product-float 5s ease-in-out infinite alternate;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes product-float { from { transform: translateY(-4%); } to { transform: translateY(4%) rotate(8deg); } }

/* Event: bokeh lights */
.f-event { background: linear-gradient(180deg, #0a0a0a, #1a0806); }
.f-event .footage-lights {
  display: block;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(245, 245, 245, .6) 0 3%, transparent 6%),
    radial-gradient(circle at 35% 20%, rgba(225, 6, 0, .7) 0 5%, transparent 9%),
    radial-gradient(circle at 60% 35%, rgba(245, 245, 245, .45) 0 4%, transparent 8%),
    radial-gradient(circle at 80% 22%, rgba(225, 6, 0, .6) 0 6%, transparent 11%),
    radial-gradient(circle at 50% 60%, rgba(245, 245, 245, .25) 0 7%, transparent 14%),
    radial-gradient(circle at 25% 70%, rgba(225, 6, 0, .4) 0 4%, transparent 9%),
    radial-gradient(90% 40% at 50% 100%, #000 55%, transparent 56%);
  animation: flicker 2.4s steps(6) infinite, pan-slow 10s ease-in-out infinite alternate;
}
@keyframes flicker {
  0%, 100% { opacity: 1; } 20% { opacity: .75; } 40% { opacity: .95; } 60% { opacity: .6; } 80% { opacity: .9; }
}

/* Drone: topographic contours */
.f-drone { background: #0f0f0f; }
.f-drone .footage-topo {
  display: block;
  inset: -40%;
  background:
    repeating-radial-gradient(circle at 40% 45%, transparent 0 14px, rgba(245, 245, 245, .18) 14px 15px),
    repeating-radial-gradient(circle at 75% 70%, transparent 0 20px, rgba(225, 6, 0, .35) 20px 21px);
  animation: drone-push 12s ease-in-out infinite alternate;
}
@keyframes drone-push { from { transform: scale(1) rotate(0); } to { transform: scale(1.35) rotate(10deg); } }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 5vw, 72px) clamp(16px, 2vw, 32px);
}
.about .section-head { grid-column: 1 / span 7; }
.about-body {
  grid-column: 8 / span 5;
  align-self: end;
  display: grid;
  gap: 18px;
  color: var(--g-300);
}
.about-lead { color: var(--white); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; }
/* Team photos (from the client's deck). The files are small (274px wide, 165px for the hands):
   a strip of narrow portraits of equal height — flex-grow = each photo's aspect ratio — capped so
   that no photo is shown above ~1.3× its native size. Never full-bleed. */
.team {
  grid-column: 6 / -1;
  align-self: center;
  display: grid;
  gap: 18px;
  justify-items: start;
  width: 100%;
  max-width: 760px;
  justify-self: end;
}
.team-strip {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
}
.team-shot {
  position: relative;
  display: block;
  flex: var(--ar) 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--g-700);
  background: var(--g-850);
}
.team-shot img { width: 100%; height: auto; }
.team-shot-1 { --ar: .6075; margin-top: 40px; }
.team-shot-2 { --ar: .5341; }
.team-shot-3 { --ar: .3078; margin-top: 56px; }
.team-shot-4 { --ar: .3208; margin-top: 16px; }
.frame-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--g-300);
}
.stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--g-700);
}
.stat {
  padding: 28px 20px 0 0;
  display: grid;
  gap: 6px;
}
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--g-700); }
.stat-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5.6vw, 5.2rem); /* "150 MIL+" must fit one column */
  line-height: .9;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  white-space: nowrap;
}
.stat-num > span { color: var(--white); }
.stat-label {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-300);
}

.stats-source {
  grid-column: 1 / -1;
  margin-top: calc(-1 * clamp(8px, 2.4vw, 36px));
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--g-400);
}
.stats-source a { color: var(--g-300); text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease; }
.stats-source a:hover { color: var(--white); }

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
/* Five services: two wide cards on top, three below (6-column grid: 3 + 3 / 2 + 2 + 2). */
.service-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--g-700);
  border-left: 1px solid var(--g-700);
}
.service {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  grid-column: span 2;
  min-height: 280px;
  padding: clamp(22px, 2.4vw, 34px);
  border-right: 1px solid var(--g-700);
  border-bottom: 1px solid var(--g-700);
  overflow: hidden;
  isolation: isolate;
}
.service::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--red);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .7s var(--ease-io);
}
.service:hover::before { clip-path: inset(0 0 0 0); }
.service:nth-child(-n+2) { grid-column: span 3; }
.service:nth-child(-n+2) .service-title { font-size: clamp(2.2rem, 3.8vw, 3.9rem); }
.service-num {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--g-400);
  transition: color .4s ease;
}
.service-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  line-height: 1.05; /* Ç/Ã of PRODUÇÃO must not touch the next line */
  text-transform: uppercase;
  hyphens: auto;
  margin-top: auto;
  padding-top: 60px;
  transition: transform .6s var(--ease-out);
}
.service-text { color: var(--g-300); transition: color .4s ease; max-width: 36ch; }
.service:hover .service-num,
.service:hover .service-text { color: var(--white); }
.service:hover .service-title { transform: translateX(8px); }

/* Zoom-through (MOTION-REFERENCE §9): the section sticks with its bottom on the viewport
   bottom for an extra 60vh while the grid scales up and the block fades out. */
html.fx .services-area { height: calc(var(--svc-h, 100vh) + 60vh); overflow-x: clip; }
html.fx .services { position: sticky; top: min(0px, calc(100vh - var(--svc-h, 100vh))); }
html.fx .services .container { will-change: opacity; }
html.fx .service-list { transform-origin: 50% 40%; }
/* only promoted while the scrub runs (a permanent layer rasterised at ×1 blurs the text when scaled) */
html.fx .service-list.is-scrubbing { will-change: transform; }

/* ==========================================================================
   PORTFÓLIO — pinned horizontal reel
   ========================================================================== */
.portfolio {
  position: relative;
  background: var(--g-900);
  border-block: 1px solid var(--g-700);
  overflow-x: clip; /* clip, not hidden: keeps the pinned .portfolio-sticky working */
}
.portfolio-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
  padding: clamp(88px, 12vw, 140px) 0 clamp(48px, 8vw, 80px);
  overflow: hidden;
}
.portfolio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 32px;
}
.portfolio-head .kicker { width: 100%; margin-bottom: 0; }
.portfolio-head .section-title { font-size: clamp(2.4rem, 6vw, 5.8rem); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--g-600);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.chip:hover { border-color: var(--white); }
.chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--black); }
.chip-count { color: var(--g-400); }
.chip[aria-pressed="true"] .chip-count { color: var(--red-deep); }
.portfolio-track > li.is-entering .work { animation: card-in .7s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.portfolio-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  padding-bottom: 12px;
}
.portfolio-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  padding: 12px var(--gutter);
  width: max-content;
}
.portfolio-track > li { scroll-snap-align: center; }

/* Pinned mode (desktop, motion allowed) */
html.pin-on .portfolio { height: var(--pin-h, auto); }
html.pin-on .portfolio-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--header-h) + 24px) 0 40px;
  /* se o conteúdo não couber, alinhar ao topo em vez de empurrar o título para baixo do header */
  justify-content: safe center;
  /* altura máxima do "footage": ecrã − header, título, legenda e margens (~620px medidos) */
  --card-h: max(170px, calc(100svh - 620px));
}
html.pin-on .work { width: min(clamp(260px, 36vw, 560px), calc(var(--card-h) * 1.6)); }
html.pin-on .portfolio-track > li:nth-child(even) .work { width: min(clamp(220px, 26vw, 400px), max(200px, calc(var(--card-h) * .8))); }
html.pin-on .work-cta { width: min(clamp(240px, 30vw, 440px), calc(var(--card-h) + 60px)); }
html.pin-on .portfolio-track > li:nth-child(even) .work .footage { aspect-ratio: auto; height: min(var(--card-h), calc(clamp(220px, 26vw, 400px) * 1.25)); }
html.pin-on .portfolio-viewport { overflow: visible; scroll-snap-type: none; }
/* Pinned: every footage is var(--card-h) tall, so top-aligning the cards puts all the info blocks
   (1–4 line titles) on one line instead of re-centring each card by its caption height. */
html.pin-on .portfolio-track { align-items: flex-start; }
/* short laptop screens: long titles on the narrow cards wrap to 4 lines — keep the captions on screen */
@media (max-height: 760px) {
  html.pin-on .work-title { font-size: clamp(1.3rem, 1.9vw, 1.8rem); }
}
/* translateX of the track is written by the scroll engine (dead zones + --e-hscroll + 0.25s lerp) */
html.pin-on .portfolio-track { will-change: transform; }

/* Scissor title: the two lines drift in opposite directions while the reel scrolls */
.scissor .split { display: block; }
.scissor-line { display: block; width: fit-content; }
html.pin-on .scissor-line { will-change: transform; }

.work {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  display: grid;
  gap: 14px;
  width: clamp(260px, 36vw, 560px);
  text-align: left;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out);
  transform-style: preserve-3d;
}
/* .is-tilted (main.js): from the first pointer move over a card until it has eased back.
   The layer hint is only there while the card is actually moving. */
.work.is-tilted { will-change: transform; }
.work.is-tilting { transition: transform .12s linear; }
.work .footage {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--g-700);
  transition: border-color .4s ease;
}
.portfolio-track > li:nth-child(even) .work { width: clamp(220px, 26vw, 400px); }
.portfolio-track > li:nth-child(even) .work .footage { aspect-ratio: 4 / 5; }
.work:hover .footage,
.work:focus-visible .footage { border-color: var(--red); }
.work:hover .footage > span,
.work:focus-visible .footage > span { animation-duration: 1.2s; }
.work:hover .footage { animation: glitch 1.6s steps(1, end) infinite; }
@keyframes glitch {
  0%   { filter: none; transform: none; clip-path: inset(0); }
  8%   { filter: drop-shadow(5px 0 0 rgba(225, 6, 0, .85)) drop-shadow(-5px 0 0 rgba(245, 245, 245, .55)); transform: translateX(-2px); clip-path: inset(12% 0 60% 0); }
  12%  { filter: drop-shadow(-4px 0 0 rgba(225, 6, 0, .85)) drop-shadow(4px 0 0 rgba(245, 245, 245, .55)); transform: translateX(3px); clip-path: inset(0); }
  16%  { filter: none; transform: none; clip-path: inset(0); }
  54%  { filter: drop-shadow(3px 0 0 rgba(225, 6, 0, .7)) drop-shadow(-3px 0 0 rgba(245, 245, 245, .4)); clip-path: inset(55% 0 20% 0); transform: translateX(4px); }
  58%  { filter: none; transform: none; clip-path: inset(0); }
  100% { filter: none; transform: none; clip-path: inset(0); }
}
.work-info {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 14px;
  transform: translateZ(30px);
}
.work-num { font-family: var(--f-mono); font-size: .72rem; color: var(--red); grid-row: span 2; }
.work-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
}
.work-meta {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-300);
}
.work-cta {
  display: grid;
  place-content: center;
  gap: 10px;
  width: clamp(240px, 30vw, 440px);
  aspect-ratio: 1;
  border: 1px dashed var(--g-500);
  padding: 24px;
  transition: background-color .5s ease, border-color .5s ease;
}
.work-cta:hover { background: var(--red); border-color: var(--red); }
.work-cta:hover .accent { color: var(--white); }
.work-cta-small {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g-300);
}
.work-cta:hover .work-cta-small { color: var(--white); }
.work-cta-big {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: .9;
  text-transform: uppercase;
}
.portfolio-reel {
  margin: 0 var(--gutter);
  height: 2px;
  background: var(--g-700);
  position: relative;
  overflow: hidden;
}
html:not(.pin-on) .portfolio-reel { display: none; }
.portfolio-reel-fill {
  position: absolute; inset: 0;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(0);
}

/* ==========================================================================
   PROCESSO
   ========================================================================== */
/* Head on top (full width); below it the camera (left, sticky) and the steps (right). */
.process-head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.process-head .section-intro { margin-top: 20px; }
.process-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.timeline {
  --tl: 0;
  position: relative;
  padding-left: clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--g-700);
}
.timeline::after {
  background: var(--red);
  transform-origin: top;
  transform: scaleY(var(--tl));
}
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(40px, 5vw, 64px) + 1px);
  top: 6px;
  width: 14px; height: 14px;
  border: 2px solid var(--g-500);
  background: var(--black);
  z-index: 1;
  transition: background-color .5s ease, border-color .5s ease, transform .5s var(--ease-out);
}
.step.is-active::before { background: var(--red); border-color: var(--red); transform: rotate(45deg); }
.step-tc {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--g-400);
}
.step.is-active .step-tc { color: var(--white); }
.step-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: .95;
  text-transform: uppercase;
  margin: 6px 0 12px;
  color: var(--g-500);
  transition: color .6s ease;
}
.step.is-active .step-title { color: var(--white); }
.step p { color: var(--g-300); max-width: 48ch; }

/* ---------- Câmara 3D (decorativa) ----------
   Poster <img> always in the markup (fixed box → no CLS). Desktop: main.js lazy-loads the Three.js
   bundle and appends a <canvas>; .is-live fades the poster out once the first frame is drawn.
   Touch / small screens: one pre-rendered still per step (.is-stills), swapped as the steps light up. */
.cam3d {
  position: sticky;
  /* pinned in the middle of the space under the header (box height ≈ min(448px, 52vh)) */
  top: calc(var(--header-h) + (100vh - var(--header-h) - min(448px, 52vh)) / 2);
  justify-self: center;
  /* never taller than about half the screen, so it is whole on screen when the first step lights up */
  width: min(100%, 560px, 65vh);
}
html.js [data-reveal="cam"] {
  transition: opacity .9s var(--e-out) var(--d, 0ms), transform .9s var(--e-out) var(--d, 0ms), filter .9s var(--e-out) var(--d, 0ms);
}
html.js [data-reveal="cam"]:not(.is-in) { opacity: 0; transform: translate3d(0, 2rem, 0); filter: blur(14px); }
.cam3d-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  isolation: isolate;
}
/* soft studio floor light behind the body: separates the matte black from the page */
.cam3d-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4% 2%;
  z-index: -1;
  background:
    radial-gradient(46% 12% at 50% 84%, rgb(0 0 0 / .85), transparent 70%),
    radial-gradient(52% 46% at 50% 52%, rgb(245 245 245 / .075), transparent 72%);
  pointer-events: none;
}
/* same film grain as the rest of the site, on top, so the render never looks pasted on */
.cam3d-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: var(--noise);
  opacity: .1;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  pointer-events: none;
}
.cam3d-poster,
.cam3d-still,
.cam3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cam3d-poster { transition: opacity .6s var(--e-out); }
.cam3d-canvas { z-index: 1; opacity: 0; transition: opacity .6s var(--e-out); }
.cam3d.is-live .cam3d-canvas { opacity: 1; }
.cam3d.is-live .cam3d-poster,
.cam3d.is-stills .cam3d-poster { opacity: 0; }
.cam3d-still { opacity: 0; transition: opacity .5s var(--e-out); }
.cam3d-still.is-on { opacity: 1; }
.cam3d-hud {
  position: absolute;
  z-index: 2;
  left: 6%;
  top: 6%;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--g-300);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity .35s var(--e-out), transform .5s var(--e-out);
}
.cam3d.is-rec .cam3d-hud { opacity: 1; transform: none; }
/* Two columns: the steps start a little below the camera's top edge, so the camera is already whole
   on screen when the first step lights up (60% of the viewport height), and a short tail keeps it
   pinned while the last step is read. */
@media (min-width: 961px) {
  .process .timeline {
    margin-top: clamp(40px, 14vh, 140px);
    margin-bottom: clamp(48px, 20vh, 200px);
    /* a little more scroll per step, so each camera move has room to play */
    gap: clamp(64px, 13vh, 128px);
  }
}

/* ==========================================================================
   PARA AGÊNCIAS — three collaboration models
   ========================================================================== */
.agencies { background: var(--g-900); border-block: 1px solid var(--g-700); overflow: hidden; }
/* legacy #depoimentos links land on the top of this section */
.anchor-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.agency-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.agency {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--g-700);
  background: var(--black);
  overflow: hidden;
}
.agency::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-io);
}
.agency.is-in::before { transform: scaleX(.18); }
.agency:hover::before { transform: scaleX(1); }
.agency-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--g-500);
  transition: -webkit-text-stroke-color .5s ease, color .5s ease;
}
.agency:hover .agency-num { color: var(--red); -webkit-text-stroke-color: var(--red); }
.agency-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin-top: clamp(16px, 3vw, 44px);
}
.agency-text { color: var(--g-300); max-width: 42ch; }
/* stepped composition on wide screens (01 ↘ 02 ↘ 03) */
@media (min-width: 961px) {
  .agency:nth-child(2) { margin-top: clamp(24px, 3.4vw, 56px); }
  .agency:nth-child(3) { margin-top: clamp(48px, 6.8vw, 112px); }
}
@media (max-width: 960px) {
  .agency-list { grid-template-columns: 1fr; }
  .agency { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 4vw, 32px); }
  .agency-num { grid-row: span 2; font-size: clamp(3.4rem, 12vw, 5rem); min-width: 1.2em; } /* same column for 01 / 02 / 03 */
  .agency-title { margin-top: 0; align-self: end; }
}

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-info .section-intro { margin-top: 24px; }
.contact-list { margin-top: 40px; display: grid; gap: 20px; }
.contact-list div { border-top: 1px solid var(--g-700); padding-top: 14px; }
.contact-list dt {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-400);
}
.contact-list dd { font-size: 1.1rem; margin-top: 4px; }
.contact-list a { background: linear-gradient(var(--red), var(--red)) left bottom / 0 2px no-repeat; transition: background-size .5s var(--ease-out); }
.contact-list a:hover { background-size: 100% 2px; }
.contact-list dd { overflow-wrap: anywhere; }
.contact-signoff {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1.1rem;
}
.contact-signoff::before { content: ""; width: 28px; height: 2px; background: var(--red); flex-shrink: 0; }

.contact-form {
  position: relative;
  display: grid;
  gap: 26px;
  padding: clamp(24px, 4vw, 48px);
  padding-top: 0;
  background: var(--g-850);
  border: 1px solid var(--g-700);
}
.form-slate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 calc(-1 * clamp(24px, 4vw, 48px));
  padding: 44px clamp(24px, 4vw, 48px) 14px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  color: var(--g-300);
  border-bottom: 1px solid var(--g-700);
  position: relative;
}
.form-slate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: repeating-linear-gradient(-55deg, var(--white) 0 18px, var(--black) 18px 36px);
  transform-origin: left bottom;
  transition: transform .6s var(--ease-out);
}
.contact-form.is-sending .form-slate::before { animation: clap .5s var(--ease-io); }
@keyframes clap { 0% { transform: rotate(0); } 40% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }

.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-300);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--g-500);
  border-radius: 0;
  padding: 10px 0 12px;
  font-size: 1.1rem;
  color: var(--white);
  transition: border-color .3s ease, box-shadow .3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--red);
  box-shadow: 0 1px 0 0 var(--red);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.field select option { background: var(--g-850); color: var(--white); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field [aria-invalid="true"] { border-bottom-color: var(--red); }
.field-error {
  font-size: .85rem;
  color: var(--white);
  min-height: 0;
}
.field-error:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--red);
  margin-right: 8px;
  transform: rotate(45deg);
  vertical-align: 1px;
}
.field-meta { display: flex; justify-content: space-between; gap: 12px; }
.char-count { font-family: var(--f-mono); font-size: .72rem; color: var(--g-400); margin-left: auto; }
.char-count.is-near { color: var(--white); }

.hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.btn-submit { min-width: 220px; }
.btn-spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-submit[aria-busy="true"] .btn-spinner { display: inline-block; }
.btn-submit:disabled { opacity: .7; cursor: progress; }
.btn-mail { min-width: 200px; }
.field-optional { font-weight: 400; letter-spacing: .08em; opacity: .65; }
.form-hint { flex: 1 0 100%; font-size: .85rem; color: var(--g-400); }
.form-status { flex: 1 0 100%; font-size: .95rem; min-height: 1.5em; }
.form-status-link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.form-status-link:hover { color: var(--red); }
.form-status.is-error { color: var(--white); padding-left: 12px; border-left: 2px solid var(--red); }
.form-status.is-success { color: var(--white); padding-left: 12px; border-left: 2px solid var(--white); }
.form-status.is-info { color: var(--g-300); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Red footer (closes the "ring" opened by the dome). Text is black on red (≈5.3:1). */
.site-footer {
  padding: clamp(80px, 10vw, 140px) 0 40px;
  background: var(--red);
  color: var(--black);
}
/* título a preto cheio; no hover/foco enche de branco da esquerda (estilo da Proposta 2, pedido do cliente) */
.site-footer .footer-big {
  -webkit-text-stroke: 0;
  background:
    linear-gradient(var(--white), var(--white)) left / 0 100% no-repeat,
    linear-gradient(var(--black), var(--black));
  -webkit-background-clip: text;
  background-clip: text;
}
.site-footer .footer-big:hover, .site-footer .footer-big:focus-visible { background-size: 100% 100%, auto; }
.site-footer .footer-big .accent { color: var(--white); -webkit-text-stroke: 0; }
.site-footer .footer-row { border-top-color: rgba(10, 10, 10, .28); }
.site-footer .footer-brand-tag,
.site-footer .socials a,
.site-footer .footer-copy { color: var(--black); }
.site-footer .socials a { text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color .3s ease; }
.site-footer .socials a:hover { color: var(--black); text-decoration-color: var(--black); }
.site-footer .back-top:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--black); }
.site-footer ::selection { background: var(--black); color: var(--white); }

/* Footer close (MOTION-REFERENCE §10): on desktop the footer waits underneath the page
   (sticky bottom) and <main> is clipped into a rounded card as it scrolls away. */
html.fx main { position: relative; z-index: 1; background: var(--black); }
/* At least one screen tall so that everything behind the closing card is red (no black band at the
   top / black corners) and the card leaves the screen completely at the end. */
html.fx .site-footer {
  position: sticky; bottom: 0; z-index: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
html.fx .footer-inner { transform-origin: 50% 100%; will-change: transform, opacity; }
/* The "card" edges: red side strips + rounded bottom corners painted over the end of <main>
   (element created by main.js; --x / --r written by the scroll engine). */
.main-close { display: none; }
html.fx .main-close {
  --x: 0px; --r: 0px;
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
  background:
    linear-gradient(var(--red), var(--red)) left top / var(--x) 100% no-repeat,
    linear-gradient(var(--red), var(--red)) right top / var(--x) 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--r) - 1px), var(--red) var(--r)) left var(--x) bottom 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 0 0, transparent calc(var(--r) - 1px), var(--red) var(--r)) right var(--x) bottom 0 / var(--r) var(--r) no-repeat;
}
html.fx .main-close.is-on { visibility: visible; }
.footer-big {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 10.6vw, 11.5rem);
  line-height: .88;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  background: linear-gradient(var(--white), var(--white)) left / 0 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size .9s var(--ease-io);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.footer-big .accent { -webkit-text-stroke-color: var(--red); color: var(--red); }
.footer-big:hover, .footer-big:focus-visible { background-size: 100% 100%; }
.footer-row {
  margin-top: clamp(48px, 8vw, 96px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding-top: 24px;
  border-top: 1px solid var(--g-700);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand-text { display: grid; gap: 2px; }
.footer-brand > img { width: 48px; height: 48px; }
/* o lema ocupa o lugar do letreiro (pedido do cliente) */
.footer-brand-tag { font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; color: var(--g-300); }
.socials { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-right: auto; }
.socials a {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-300);
  transition: color .3s ease;
  padding: 6px 0;
  display: inline-block;
}
.socials a:hover { color: var(--white); }
.footer-copy { font-size: .8rem; color: var(--g-400); }
.footer-credit {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-credit strong { font-weight: 700; letter-spacing: .08em; }
.back-top { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.back-top:hover { color: var(--red); }

/* ==========================================================================
   MODAL / PLAYER
   ========================================================================== */
.modal {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 1px solid var(--g-600);
  background: var(--black);
  color: var(--white);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(5, 5, 5, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal[open] { animation: tv-on .7s var(--ease-io); }
.modal[open]::backdrop { animation: fade-in .4s ease; }
.modal.is-closing { animation: tv-off .45s var(--ease-io) forwards; }
.modal.is-closing::backdrop { animation: fade-out .45s ease forwards; }
@keyframes tv-on {
  0% { clip-path: inset(50% 0 50% 0); filter: brightness(3); }
  45% { clip-path: inset(49.6% 0 49.6% 0); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes tv-off {
  0% { clip-path: inset(0 0 0 0); }
  60% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.5); }
  100% { clip-path: inset(50% 50% 50% 50%); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

.modal-inner { padding: clamp(16px, 3vw, 32px); display: grid; gap: 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-meta {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-300);
}
.modal-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}
.modal-close {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--g-600);
  border-radius: 50%;
  transition: background-color .3s ease, transform .5s var(--ease-out);
}
.modal-close svg { width: 20px; height: 20px; }
.modal-close:hover { background: var(--red); border-color: var(--red); transform: rotate(90deg); }
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--g-700);
  overflow: hidden;
}
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-placeholder { position: absolute; inset: 0; }
.player-placeholder .footage { position: absolute; inset: 0; }
.player-hud {
  position: absolute;
  left: 16px; right: 16px; top: 14px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
}
.player-tc { font-variant-numeric: tabular-nums; }
.player-note {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(10, 10, 10, .8);
  border: 1px solid var(--g-600);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.player-note svg { width: 16px; height: 16px; color: var(--red); }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.modal-desc { color: var(--g-300); max-width: 70ch; flex: 1 1 280px; }

/* ==========================================================================
   P.A.G. ACRONYM (Sobre)
   ========================================================================== */
.acronym { grid-column: 1 / span 5; align-self: center; border-top: 1px solid var(--g-700); }
.acronym-row {
  display: grid;
  grid-template-columns: clamp(56px, 7vw, 104px) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px clamp(16px, 3vw, 40px);
  padding: clamp(14px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--g-700);
}
.acronym-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: .8;
  color: var(--red);
  transition: transform .6s var(--ease-out);
}
.acronym-row:hover .acronym-letter { transform: translateX(10px); }
.acronym-word {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.1vw, 2.9rem);
  line-height: .95;
  text-transform: uppercase;
}

/* ---------- 404 mark ---------- */
.notfound-mark { width: clamp(72px, 12vw, 120px); height: auto; }
.notfound-mark .mark-dot { animation: dot-rec 1s steps(2, jump-none) infinite; }

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
.wa-cta {
  --mx: 0px; --my: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--red);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .5s var(--ease-out), color .4s ease;
}
.wa-cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--white);
  transform: translateX(-101%);
  transition: transform .6s var(--ease-io);
}
.wa-cta:hover::before, .wa-cta:focus-visible::before { transform: none; }
.wa-cta:hover, .wa-cta:focus-visible { color: var(--black); }
.wa-icon { width: 40px; height: 40px; flex-shrink: 0; }
.wa-cta-text { display: grid; gap: 4px; }
.wa-cta-small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.wa-cta-big {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
}
.contact-socials { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; }
.contact-socials a {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-300);
  padding: 6px 0;
  display: inline-block;
  transition: color .3s ease;
}
.contact-socials a:hover { color: var(--white); }

.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--g-850);
  color: var(--white);
  border: 1px solid var(--g-600);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  transition: background-color .3s ease, border-color .3s ease, transform .5s var(--ease-out), opacity .3s ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--g-850);
  animation: rec-blink 1.4s steps(2, jump-none) infinite;
}
.wa-float:hover, .wa-float:focus-visible { background: var(--red); border-color: var(--red); transform: translateY(-3px); }
html.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* ==========================================================================
   404
   ========================================================================== */
.notfound {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(60% 50% at 50% 60%, rgba(225, 6, 0, .2), transparent 70%), var(--black);
}
.notfound::before {
  content: "";
  position: absolute; inset: -50%;
  background-image: var(--noise);
  opacity: .12;
  z-index: -1;
  animation: grain-shift .6s steps(5) infinite;
}
.notfound-inner { display: grid; justify-items: center; gap: 22px; }
.notfound-code {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(8rem, 36vw, 26rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
  position: relative;
}
.notfound-code span { color: var(--red); -webkit-text-stroke-color: var(--red); }
.notfound-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
}
.notfound p { color: var(--g-300); max-width: 44ch; }
.notfound .viewfinder { inset: 24px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .service-list { grid-template-columns: repeat(2, 1fr); }
  .service, .service:nth-child(-n+2) { grid-column: auto; }
  .service:last-child { grid-column: 1 / -1; }
  .service:nth-child(-n+2) .service-title { font-size: clamp(1.8rem, 2.5vw, 2.6rem); }
}

/* no desktop o botão "Contacto" do cabeçalho já leva ao contacto: o item do menu seria duplicado */
@media (min-width: 1081px) {
  .main-nav .nav-contact { display: none; }
}

@media (max-width: 1080px) {
  .about .section-head, .about-body, .acronym, .team { grid-column: 1 / -1; }
  .team { justify-self: start; }
  .acronym-word { font-size: clamp(1.8rem, 5vw, 3.2rem); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--g-700); margin-top: 28px; }
}

@media (max-width: 1080px) {
  .menu-toggle { display: grid; }
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--black);
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    overflow-y: auto;
    clip-path: circle(0 at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2));
    visibility: hidden;
    transition: clip-path .8s var(--ease-io), visibility 0s .8s;
  }
  .main-nav.is-open {
    clip-path: circle(150% at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2));
    visibility: visible;
    transition: clip-path .8s var(--ease-io), visibility 0s 0s;
  }
  .main-nav ul { flex-direction: column; gap: 4px; width: 100%; }
  .main-nav a {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 11vw, 4.8rem);
    text-transform: uppercase;
    line-height: 1.05;
    gap: 14px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s ease, transform .7s var(--ease-out);
  }
  .main-nav.is-open a { opacity: 1; transform: none; }
  .main-nav.is-open li:nth-child(2) a { transition-delay: .06s; }
  .main-nav.is-open li:nth-child(3) a { transition-delay: .12s; }
  .main-nav.is-open li:nth-child(4) a { transition-delay: .18s; }
  .main-nav.is-open li:nth-child(5) a { transition-delay: .24s; }
  .main-nav.is-open li:nth-child(6) a { transition-delay: .3s; }
  .main-nav .nav-num { font-size: .8rem; }

}

@media (max-width: 960px) {
  .process-grid, .contact-grid { grid-template-columns: 1fr; }
  /* Processo: the camera becomes a slim status bar pinned under the header (thumbnail on the right,
     REC + timecode on the left), so the still swapping per step stays visible while the steps are read. */
  .process-grid { gap: 20px; }
  .cam3d {
    top: var(--header-h);
    z-index: 3;
    justify-self: stretch;
    width: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--black);
    border-bottom: 1px solid var(--g-700);
    transition: top .5s var(--ease-out);
  }
  /* the header slides away while scrolling down: the bar follows it to the top edge */
  html:has(.site-header.is-hidden) .cam3d { top: 0; }
  .cam3d-stage { order: 2; flex: 0 0 auto; width: clamp(92px, 26vw, 132px); }
  .cam3d-stage::after { display: none; }
  .cam3d-hud {
    position: static;
    order: 1;
    opacity: 1;
    transform: none;
    color: var(--g-400);
  }
  .cam3d-hud .hud-rec { color: inherit; }
  .cam3d:not(.is-rec) .rec-dot { background: var(--g-500); box-shadow: none; animation: none; }
  .cam3d.is-rec .cam3d-hud { color: var(--white); }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .header-cta { display: none; }
  .hud-hide-sm { display: none; }
  .service-list { grid-template-columns: 1fr; }
  .service, .service:nth-child(-n+2), .service:last-child { grid-column: auto; min-height: 0; }
  .service-title { padding-top: 24px; }
  /* team photos: 2 × 2 crops (a four-photo strip would be too small to read on a phone) */
  .team-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .team-shot { margin-top: 0; aspect-ratio: 4 / 5; }
  .team-shot img { height: 100%; object-fit: cover; }
  .team-shot-1 img { object-position: 50% 40%; }
  .team-shot-2 img { object-position: 50% 6%; }
  .team-shot-3 img { object-position: 50% 22%; }
  .team-shot-4 img { object-position: 50% 24%; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .scroll-cue { display: none; }
  .stat { padding-right: 8px; }
  .stat + .stat { padding-left: 12px; }
  .stat:nth-child(3) { padding-left: 0; }
  .work { width: min(78vw, 320px); }
  .portfolio-track > li:nth-child(even) .work { width: min(66vw, 260px); }
  .work-cta { width: min(70vw, 280px); }
  .form-slate { font-size: .6rem; }
  .chips { margin-left: 0; }
  .wa-cta { padding: 16px 18px; gap: 14px; }
  .wa-icon { width: 32px; height: 32px; }
  .btn-submit, .btn-mail { width: 100%; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 2.45rem; }
}

/* ==========================================================================
   LITE MODE — html.lite is set by the frame-time watchdog in main.js (desktop, sustained jank while
   scrolling; kept for the session). Only decoration goes: layout, content, reveals, the dome, the
   pinned reel, the zoom-through and the footer close stay. JS side: no hero background zoom, no
   card tilt, native wheel scrolling, no camera pointer parallax, camera at 1× pixel ratio.
   ========================================================================== */
html.lite .hero-grain-box,
html.lite .hero-scan { display: none; }
html.lite .footage::before { display: none; }
html.lite .work:hover .footage { animation: none; }
html.lite .footage-preview,
html.lite .footage-still { filter: none; transition: none; }
html.lite .work:hover .footage-preview,
html.lite .work:focus-visible .footage-preview { transform: none; }
html.lite .cam3d-stage::after { display: none; }
html.lite.js [data-reveal="cam"]:not(.is-in) { filter: none; }
html.lite .modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 5, 5, .94); }
html.lite .modal[open] .footage::before { display: none; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .rec-dot { animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; }
  html.js [data-reveal]:not(.is-in) { opacity: 1; transform: none; clip-path: none; filter: none; }
  html.js [data-reveal]:not(.is-in) .char { opacity: 1; }
  html.js [data-reveal]:not(.is-in) .slide-inner { transform: none; }
  html.js .hero-title[data-split] .char { transform: none; }
  .preloader { display: none; }
  html.is-preloading .hero { transform: none; }
  .work:hover .footage { animation: none; }
  .agency.is-in::before { transform: scaleX(.18); }
}

@media (forced-colors: active) {
  .btn, .modal-close, .menu-toggle { border: 1px solid ButtonText; }
  .line-outline, .line-outline .char, .footer-big, .notfound-code { color: CanvasText; -webkit-text-stroke: 0; }
}

/* ==========================================================================
   PORTFOLIO STILLS (podcasts: image only — a <figure>, not a button; no player, no PLAY cursor)
   Always landscape (the stills are 16:9), whatever their position in the wide / narrow rhythm.
   Kept at the end of the file so these win over the nth-child(even) card rules above.
   ========================================================================== */
.work-still { cursor: default; }
.work-still:hover .footage { animation: none; border-color: var(--g-700); }
.portfolio-track > li:nth-child(n) .work-still { width: clamp(260px, 36vw, 560px); }
.portfolio-track > li:nth-child(n) .work-still .footage { aspect-ratio: 16 / 10; height: auto; }
html.pin-on .portfolio-track > li:nth-child(n) .work-still { width: min(clamp(260px, 36vw, 560px), calc(var(--card-h) * 1.6)); }
html.pin-on .portfolio-track > li:nth-child(n) .work-still .footage { aspect-ratio: 16 / 10; height: auto; }
@media (max-width: 640px) {
  .portfolio-track > li:nth-child(n) .work-still { width: min(78vw, 320px); }
}