/* ============================================================
   SPRITZ STUDIO, base editorial-suíça
   Estrutura inspirada em layout de estúdio premiado:
   grid rígido, 3 vozes tipográficas, preto sobre branco.
   ============================================================ */

:root {
  --black: #000;
  --white: #fff;
  --gray: #b3b3b3;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Archivo", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --pad: clamp(16px, 2.5vw, 32px);
  --rule: 1px solid var(--black);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
b { font-family: var(--font-sans); font-weight: 600; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============ NAV ============ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
  padding: 14px var(--pad) 0;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--pad);
}

.nav-item {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: var(--rule);
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-item:hover::after,
.nav-item--current::after { transform: scaleX(1); }

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--black);
  display: inline-block;
}

/* ============ HERO ============ */

.hero {
  min-height: 100svh;
  padding: 120px var(--pad) 0;
  display: flex;
  flex-direction: column;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  margin-left: auto;
  width: calc((100% - 5 * var(--pad)) / 6 * 2 + var(--pad));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-clock,
.hero-cities {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.clock { font-variant-numeric: tabular-nums; }

.hero-logo {
  text-align: center;
  margin: clamp(60px, 12vh, 140px) 0 clamp(50px, 10vh, 120px);
}

.hero-logo-mark {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: 0.08em;
}

/* Manifesto, serifa display gigante */

.manifesto {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 7.4vw, 118px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-align: justify;
}

.manifesto-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}

.reveal-line { display: block; }

.manifesto b {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: -0.02em;
}

/* Celular: as linhas não quebram (nowrap, para o reveal), então o corpo precisa caber
   na largura; a linha mais longa ("AI, virtual & grey room") mede 10,5x o corpo */
@media (max-width: 600px) {
  .manifesto { font-size: clamp(24px, 8.4vw, 38px); }
}

.m-dot {
  font-size: 0.35em;
  vertical-align: 0.55em;
  margin-right: 0.2em;
}

/* Word grid, palavras espalhadas */

.word-grid {
  margin: clamp(50px, 9vh, 110px) auto;
  width: min(560px, 80%);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wg-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* ============ SHOWREEL ============ */

.showreel {
  background: var(--black);
  color: var(--white);
  margin: 0 var(--pad);
  min-height: clamp(320px, 60vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.showreel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.showreel-year {
  font-weight: 400;
  font-family: var(--font-serif);
  font-size: clamp(64px, 10vw, 160px);
  line-height: 1;
}

.showreel-label,
.showreel-soon { opacity: 0.7; }

/* reel em vídeo: 16:9 limitado à altura da tela, trechos em crossfade por baixo do título */
.showreel {
  overflow: hidden;
  /* largura cheia; altura de 16:9, limitada a 88% da tela */
  height: min(calc((100vw - 2 * var(--pad)) * 9 / 16), 88svh);
}
.showreel-media,
.showreel-media::after {
  position: absolute;
  inset: 0;
}
.showreel-media::after {
  content: "";
  /* só um véu embaixo, para a legenda; o filme fica limpo */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 28%);
}
.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.reel-video.is-on { opacity: 1; }
.showreel-inner { position: relative; z-index: 1; }

/* link cobre o reel inteiro: leva ao case do trecho que está passando */
.showreel-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: none;
}
.showreel-caption {
  position: absolute;
  left: var(--pad);
  bottom: 18px;
  color: var(--white);
  opacity: 0.85;
}

/* ============ SECTIONS ============ */

.section-head {
  padding: 90px var(--pad) 18px;
  border-bottom: var(--rule);
  margin: 0 var(--pad);
  padding-left: 0;
  padding-right: 0;
}

.section-title { font-weight: 400; }

/* ============ CASE STUDIES ============ */

.case-studies { position: relative; }

.cs-list { margin: 0 var(--pad); }

.cs-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr 1.5fr;
  gap: var(--pad);
  padding: 34px 0 42px;
  border-bottom: var(--rule);
  position: relative;
  transition: opacity 0.3s ease;
}

.cs-list:hover .cs-row:not(:hover) { opacity: 0.25; }

.cs-name h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1;
}

.cs-tag { display: block; margin-top: 10px; color: var(--gray); }

.cs-label {
  display: block;
  color: var(--gray);
  margin-bottom: 12px;
}

.cs-recognitions ul li,
.cs-scope ul li { margin-bottom: 4px; }

/* preview flutuante no hover */
/* quadro que segue o mouse nas listas: só ele se move (transform pelo GSAP);
   aqui só opacity e scale, nunca transform, para não brigar com o GSAP */
.cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  scale: 0.9;
  transition: opacity 0.25s ease, scale 0.25s ease;
  will-change: transform;
}
.cursor-follow.is-visible { opacity: 1; scale: 1; }
.cursor-follow > img,
.cursor-follow > video,
.cursor-follow > .cursor-follow-vimeo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.cursor-follow > .is-on { opacity: 1; }

/* hover com loop do Vimeo: poster de fundo, iframe 16:9 cobrindo o quadro 240x300 */
.cursor-follow-vimeo {
  background: var(--black) center / cover no-repeat;
}
.cursor-follow-vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 533.34px;
  height: 300px;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.cursor-follow-vimeo iframe.is-on { opacity: 1; }

.cs-archive-link {
  margin: 0 var(--pad);
  padding: 40px 0;
  text-align: center;
}

.archive-cta {
  display: inline-block;
  border-bottom: var(--rule);
  padding-bottom: 6px;
}

/* ============ RECOGNITIONS ============ */

.rec-list { margin: 0 var(--pad); }

.rec-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: var(--pad);
  padding: 20px 0;
  border-bottom: var(--rule);
  align-items: baseline;
}

.rec-org {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 36px);
}

.rec-count { text-align: right; }

/* ============ ABOUT ============ */

.about { padding-bottom: 120px; }

.about-statement {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 72px);
  line-height: 1.02;
  padding: 60px var(--pad) 40px;
}

.about-statement .reveal-line { display: block; overflow: hidden; }

.about-statement i { font-style: italic; }

.about-meta {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--pad);
  color: var(--gray);
}

/* ============ FOOTER ============ */

.footer {
  background: var(--black);
  color: var(--white);
  padding: 90px var(--pad) 40px;
}

.footer-note {
  max-width: 340px;
  opacity: 0.6;
  margin-bottom: 50px;
  line-height: 1.7;
}

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--white);
  padding-bottom: 24px;
  margin-bottom: 90px;
}

.footer-cta-text {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(30px, 5.4vw, 84px);
  line-height: 1;
}

.footer-cta-arrow {
  font-size: clamp(24px, 3.6vw, 56px);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer-cta:hover .footer-cta-arrow { transform: translateX(14px); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pad);
}

.footer-col { display: flex; flex-direction: column; gap: 8px; }

.footer-col a { opacity: 0.7; transition: opacity 0.2s ease; }
.footer-col a:hover { opacity: 1; }

.footer-heading { opacity: 0.4; margin-bottom: 8px; }

.footer-col--right { text-align: right; }

/* ============ RESPONSIVO ============ */

@media (max-width: 900px) {
  .site-nav { display: none; }
  .hero-meta { width: 100%; }
  .cs-row { grid-template-columns: 1fr 2fr; row-gap: 24px; }
  .cs-recognitions { display: none; }
  /* no celular o resultado (Shortlist, Finalist) desce para baixo do festival */
  .rec-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .rec-type { grid-column: 1; grid-row: 2; }
  .rec-count { grid-column: 2; grid-row: 1; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .footer-col--right { text-align: left; }
  .cursor-follow { display: none; }
}

/* ============ MOVIMENTO REDUZIDO ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   COMPONENTES ADICIONAIS, páginas internas e animações
   ============================================================ */

/* ---------- Cabeçalho de página interna ---------- */

.page-hero {
  padding: 140px var(--pad) 0;
}

.page-hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 9vw, 140px);
  line-height: 0.94;
  overflow: hidden;
}

.page-hero-sub {
  margin-top: 28px;
  max-width: 520px;
  color: var(--black);
}

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.marquee-track {
  display: inline-flex;
  align-items: baseline;
  will-change: transform;
}

.marquee-item {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(30px, 5.4vw, 84px);
  line-height: 1.15;
  padding-right: 0.6em;
}

.marquee-item .arrow { font-size: 0.7em; padding-left: 0.2em; }

/* ---------- Accordion ---------- */

.accordion { border-top: var(--rule); }

.accordion-item { border-bottom: var(--rule); }

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px 0;
  cursor: pointer;
  text-align: left;
  gap: var(--pad);
}

.accordion-title {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 44px);
  line-height: 1;
}

.accordion-chevron {
  font-family: var(--font-mono);
  font-size: 14px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.accordion-body {
  padding: 0 0 30px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-body ul { list-style: none; }
.accordion-body li { margin-bottom: 4px; }

/* ---------- Showreel cursor ---------- */

.showreel { cursor: none; position: relative; }

.showreel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 60;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
}

.showreel-cursor.is-visible { opacity: 1; }

/* ---------- Archive ---------- */

.archive-table { margin: 0 var(--pad); border-top: var(--rule); }

.archive-row {
  display: grid;
  grid-template-columns: 0.7fr 2.5fr 2fr 1fr;
  gap: var(--pad);
  padding: 18px 0;
  border-bottom: var(--rule);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.archive-table:hover .archive-row:not(:hover) { opacity: 0.3; }

.archive-row-name {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1;
}

.archive-row-year, .archive-row-scope, .archive-row-status { align-self: center; }

.archive-row-status { text-align: right; color: var(--gray); }

.archive-row.is-viewed .archive-row-status::after { content: " · viewed"; }

/* overlay */

.archive-lightbox {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 96;
  display: none;
  flex-direction: column;
  padding: var(--pad);
}

.archive-lightbox.is-open { display: flex; }

html.overlay-open { overflow: hidden; }

.archive-lightbox-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--rule);
  padding-bottom: 14px;
  margin-bottom: 30px;
}

.archive-lightbox-title {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1;
}

.archive-lightbox-close {
  background: none;
  border: var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.archive-lightbox-close:hover { background: var(--black); color: var(--white); }

.archive-lightbox .swiper { overflow: hidden; flex: 1; }

.archive-lightbox .swiper-wrapper { display: flex; height: 100%; }

.archive-lightbox .swiper-slide {
  width: auto;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.archive-lightbox .swiper-slide img {
  height: min(60vh, 600px);
  width: auto;
}

.archive-slider-nav {
  display: flex;
  gap: var(--pad);
  justify-content: flex-end;
  padding-top: 20px;
}

.archive-slider-prev, .archive-slider-next {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: var(--rule);
}

/* ---------- Case study page ---------- */

.cs-hero { padding: 140px var(--pad) 0; }

.cs-back {
  display: inline-block;
  margin-bottom: 40px;
}

.cs-hero-title {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(48px, 10vw, 150px);
  line-height: 0.92;
  overflow: hidden;
}

.cs-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 50px;
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.cs-hero-grid > div {
  padding: 20px var(--pad) 26px 18px;
  border-left: 1px solid #e3e3e3;
}

.cs-hero-grid > div:first-child { border-left: 0; padding-left: 0; }

/* valores da ficha em sans com mais presença; labels seguem em mono cinza */
.cs-hero-grid p.mono,
.cs-hero-grid ul.mono li {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.cs-hero-grid .cs-label { margin-bottom: 14px; }

.cs-figure { margin: clamp(60px, 12vh, 160px) var(--pad) 0; }

.cs-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
}

.cs-figure figcaption { padding-top: 10px; color: var(--gray); }

.cs-inline-desc {
  margin: clamp(60px, 12vh, 160px) var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--pad);
  max-width: 1100px;
}

.cs-inline-desc h2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gray);
}

.cs-inline-desc p {
  font-weight: 400;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.25;
}

.more-cases { margin: clamp(80px, 16vh, 200px) var(--pad) 0; }

.more-cases-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  padding-bottom: 16px;
}

.more-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: var(--rule);
}

.more-row-name {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 44px);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--pad) * 2);
  padding: 70px var(--pad) 0;
}

.contact-form { display: flex; flex-direction: column; gap: 26px; }

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
}

.form-field input,
.form-field textarea {
  border: none;
  border-bottom: var(--rule);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
}

.form-field input:focus,
.form-field textarea:focus { outline: none; border-bottom-width: 2px; }

.form-submit {
  align-self: flex-start;
  background: var(--black);
  color: var(--white);
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.form-submit:hover { opacity: 0.75; }
.form-submit:disabled { opacity: 0.5; cursor: wait; }

/* campo-isca contra robôs: fora da tela, gente de verdade não preenche */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* resultado do envio, abaixo do botão */
.form-status {
  min-height: 1.4em;
  margin-top: -10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-soft);
}
.form-status.is-visible { opacity: 1; }
.form-status a { text-decoration: underline; text-underline-offset: 3px; }

.contact-aside { display: flex; flex-direction: column; gap: 30px; }

.contact-aside .big-link {
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.05;
  border-bottom: var(--rule);
  padding-bottom: 10px;
  display: inline-block;
}

/* Questions: perguntas espalhadas no grid, sem accordion. Clicar leva a pergunta
   para a caixa de mensagem do formulário (a resposta vem na conversa) */
.ask { padding: clamp(96px, 14vh, 160px) var(--pad) clamp(120px, 18vh, 200px); }
.ask .section-head { margin: 0; }

.ask-intro {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  max-width: 30ch;
  margin-top: 40px;
}

.ask-list {
  list-style: none;
  margin: clamp(64px, 10vh, 120px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pad);
  row-gap: clamp(48px, 7vh, 88px);
}

/* zigue-zague: cada par ocupa uma linha, o segundo desce e muda de coluna */
.ask-item:nth-child(4n+1) { grid-column: 1 / span 6; }
.ask-item:nth-child(4n+2) { grid-column: 7 / span 6; margin-top: clamp(56px, 9vh, 120px); }
.ask-item:nth-child(4n+3) { grid-column: 2 / span 6; }
.ask-item:nth-child(4n+4) { grid-column: 8 / span 5; margin-top: clamp(56px, 9vh, 120px); }

.ask-q {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  row-gap: 22px;
  width: 100%;
  padding: 18px 0 0;
  border: 0;
  border-top: var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.3s var(--ease-out);
}

.ask-index { font-size: 11px; padding-top: 0.5em; }

.ask-text {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 20ch;
  text-wrap: balance;
}

.ask-cue {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.2s var(--ease-out);
}

.ask-arrow { display: inline-block; transition: transform 0.2s var(--ease-out); }

/* foco na pergunta sob o cursor: as outras recuam, como nas listas do site */
@media (hover: hover) and (pointer: fine) {
  .ask-list:hover .ask-q:not(:hover) { opacity: 0.3; }
  .ask-q:hover .ask-cue { opacity: 1; }
  .ask-q:hover .ask-arrow { transform: translateY(-4px); }
}

.ask-q:focus-visible { outline: 1px solid var(--black); outline-offset: 8px; }
.ask-q:focus-visible .ask-cue,
.ask-q.is-asked .ask-cue { opacity: 1; }

/* aviso abaixo da caixa de mensagem quando uma pergunta entra nela */
.form-note {
  min-height: 1.4em;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-soft);
}
.form-note.is-visible { opacity: 1; }

@media (max-width: 900px) {
  .ask-list { grid-template-columns: minmax(0, 1fr); }
  .ask-item:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .ask-text { max-width: none; }
}

/* ---------- About ---------- */

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--pad) * 2);
  padding: 70px var(--pad) 0;
}

.about-col p { margin-bottom: 16px; max-width: 480px; }

.founder {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--pad) * 2);
  padding: 90px var(--pad) 0;
  align-items: start;
}

.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.services { padding: 90px var(--pad) 0; }

/* ---------- Menu mobile ---------- */

.menu-open-btn, .menu-close-btn { display: none; }

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  color: var(--white);
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  gap: 8px;
}

.mobile-menu-overlay.is-open { display: flex; }

.mobile-menu-link-mask { overflow: hidden; }

.mobile-menu-link {
  display: block;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(40px, 11vw, 80px);
  line-height: 1.05;
}

.mobile-menu-social {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  display: flex;
  gap: 24px;
  opacity: 0.6;
}

@media (max-width: 900px) {
  .menu-open-btn {
    display: block;
    position: fixed;
    top: 12px;
    right: var(--pad);
    z-index: 95;
    background: var(--white);
    border: var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    cursor: pointer;
  }

  .menu-close-btn {
    display: block;
    position: absolute;
    top: 14px;
    right: var(--pad);
    background: none;
    border: 1px solid var(--white);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    cursor: pointer;
  }

  .contact-grid, .about-cols, .founder { grid-template-columns: 1fr; }
  .archive-row { grid-template-columns: 1fr 2fr; }
  .archive-row-scope, .archive-row-status { display: none; }
  .cs-hero-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .cs-inline-desc { grid-template-columns: 1fr; }
}

/* ============================================================
   VERTICAIS (home), Directors / Creators / Entertainment
   ============================================================ */

.vert-list { margin: 0 var(--pad); }

.vert-row {
  display: grid;
  grid-template-columns: 0.6fr 4fr 0.6fr;
  gap: var(--pad);
  align-items: center;
  padding: 44px 0;
  border-bottom: var(--rule);
  transition: opacity 0.3s ease;
}

.vert-list:hover .vert-row:not(:hover) { opacity: 0.25; }

.vert-title {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(36px, 6vw, 96px);
  line-height: 0.95;
}

.vert-desc { color: var(--gray); margin-top: 12px; max-width: 480px; }

.vert-num { color: var(--gray); }

.vert-arrow {
  font-size: clamp(24px, 3vw, 48px);
  text-align: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.vert-row:hover .vert-arrow { transform: translateX(12px); }

/* ============================================================
   VIDEO PLAYER (portfólio dos diretores)
   ============================================================ */

.director-reels { margin-top: clamp(60px, 12vh, 140px); }

.video-player {
  position: relative;
  margin: 0 var(--pad) clamp(50px, 10vh, 120px);
  background: var(--black);
  cursor: none;
}

.video-player video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vp-ui {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 0;
  color: var(--black);
}

.vp-time { font-variant-numeric: tabular-nums; }

.vp-progress {
  height: 2px;
  background: rgba(0, 0, 0, 0.15);
  margin-top: 10px;
  cursor: pointer;
}

.vp-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--black);
}

/* cursor Play/Pause seguindo o mouse */
.vp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 60;
  background: var(--white);
  color: var(--black);
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
}

.vp-cursor.is-visible { opacity: 1; }

/* ============================================================
   CREATORS, grid de cards
   ============================================================ */

.creators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--pad) * 2) var(--pad);
  padding: 70px var(--pad) 0;
}

.creator-photo {
  aspect-ratio: 4 / 5;
  background: #e3e3e3;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: var(--gray);
  margin-bottom: 18px;
}

.creator-name {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
}

.creator-model { display: block; color: var(--gray); margin: 8px 0 10px; }

.creator-bio { max-width: 320px; }

/* ============================================================
   ENTERTAINMENT, listas por categoria
   ============================================================ */

.ent-list { margin: 0 var(--pad); }

.ent-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 0.6fr;
  gap: var(--pad);
  align-items: baseline;
  padding: 26px 0;
  border-bottom: var(--rule);
  transition: opacity 0.3s ease;
}

.ent-list:hover .ent-row:not(:hover) { opacity: 0.3; }

.ent-title {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 52px);
  line-height: 1;
}

.ent-year { text-align: right; }

@media (max-width: 900px) {
  .vert-row { grid-template-columns: 1fr; gap: 10px; }
  .vert-arrow { display: none; }
  .creators-grid { grid-template-columns: 1fr 1fr; }
  .ent-row { grid-template-columns: 2fr 1fr; }
  .ent-row .mono:nth-child(3) { display: none; }
}

@media (max-width: 560px) {
  .creators-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   VIMEO EMBED (portfólios com material real)
   ============================================================ */

.vimeo-player { margin: 0 var(--pad) clamp(50px, 10vh, 120px); }

.vimeo-frame {
  aspect-ratio: 16 / 9;
  background: var(--black);
  position: relative;
}

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

.vp-meta { color: var(--gray); }

/* ============================================================
   SPRITZ VIMEO PLAYER, UI própria sobre o iframe
   ============================================================ */

.vimeo-frame { overflow: hidden; }

.vimeo-frame.is-playing { cursor: none; }

/* loading dot */
.vp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.vp-loading.is-hidden { opacity: 0; }
.vp-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: vp-pulse 1.3s ease-in-out infinite;
}
@keyframes vp-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* clique em qualquer lugar */
.vp-toggle-area {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

/* fade inferior para legibilidade */
.vp-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  z-index: 2;
}
.vp-fade.visible { opacity: 1; }

/* barra de controles */
.vp-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: none;
}
.vp-controls.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.vp-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.vp-btn:hover { opacity: 1; transform: scale(1.12); }

/* ícones play/pause e volume alternam por estado */
.vp-btn-play .ic-pause { display: none; }
.is-playing .vp-btn-play .ic-play { display: none; }
.is-playing .vp-btn-play .ic-pause { display: inline; }
.vp-btn-mute .ic-mut { display: none; }
.is-muted .vp-btn-mute .ic-vol { display: none; }
.is-muted .vp-btn-mute .ic-mut { display: inline; }

.vp-t {
  font-size: 10px;
  letter-spacing: 0.06em;
  min-width: 34px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.vp-t-total { text-align: right; }

/* scrubber, linha de 1px que engrossa no hover, thumb aparece */
.vp-timeline {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.vp-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  transition: height 0.15s ease-out;
}
.vp-timeline:hover .vp-track { height: 3px; }
.vp-fill {
  height: 100%;
  width: 0%;
  background: var(--white);
  transition: width 0.1s linear;
}
.vp-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease-out;
  pointer-events: none;
}
.vp-timeline:hover .vp-thumb { transform: translate(-50%, -50%) scale(1); }

@media (max-width: 640px) {
  .vp-controls { padding: 12px 14px; gap: 10px; }
  .vp-t-total, .vp-btn-fs { display: none; }
}

/* ============================================================
   WORK GRID, thumbs full-bleed estilo Iconoclast
   ============================================================ */

.work-grid {
  margin-top: clamp(60px, 12vh, 140px);
  width: 100%;
}

.work-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.work-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  isolation: isolate;
}

.thumb-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.thumb-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: opacity 0.3s ease-out, transform 0.5s ease-out;
}

.work-thumb:hover .thumb-image { transform: scale(1.02); }

/* loop mudo de fundo, aparece no hover */
.thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in 0.15s;
}
.thumb-video.is-on { opacity: 1; }

/* overlay cliente + título */
.thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.work-thumb:hover .thumb-overlay { opacity: 1; }

.thumb-client {
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(8px);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
}

.thumb-title {
  font-weight: 400;
  font-family: var(--font-serif);
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 44px);
  line-height: 1.02;
  max-width: 20ch;
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}

.work-thumb:hover .thumb-client,
.work-thumb:hover .thumb-title { transform: translateY(0); }

/* hero BIG, altura de viewport, overlay sempre visível */
.work-thumb.is-big .thumb-media {
  aspect-ratio: auto;
  height: 100svh;
  max-height: 100svh;
}
.work-thumb.is-big .thumb-overlay {
  background: none;
  opacity: 1;
}
.work-thumb.is-big .thumb-client,
.work-thumb.is-big .thumb-title {
  transform: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.work-thumb.is-big .thumb-title {
  font-size: clamp(32px, 4.4vw, 72px);
  max-width: 24ch;
}
.work-thumb.is-big:hover .thumb-image { transform: none; }

/* iframe do hero cobre a viewport (comportamento cover para iframe) */
.work-thumb.is-big .thumb-video {
  top: 50%;
  left: 50%;
  inset: auto;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78svh;
  min-height: 100svh;
  transform: translate(-50%, -50%);
}

/* ============================================================
   WORK OVERLAY, player fullscreen
   ============================================================ */

.work-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 96;
  display: none;
  flex-direction: column;
}
.work-overlay.is-open { display: flex; }

.work-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  color: var(--white);
}

.work-overlay-title { opacity: 0.85; }

.work-overlay-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.work-overlay-close:hover { background: var(--white); color: var(--black); }

/* o frame do player preenche o overlay */
.work-overlay .vimeo-frame {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: var(--black);
}
.work-overlay .vimeo-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .work-line { grid-template-columns: 1fr; }
  .work-thumb.is-big .thumb-media { height: 60svh; }
}

/* ============================================================
   FILTROS DE FILMES + GRID PLANO (página de diretor)
   ============================================================ */

/* cabeçalho Filmography: título à esquerda, filtros à direita, régua embaixo */
.filmography-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--pad);
  margin: clamp(48px, 9vh, 90px) var(--pad) 0;
  padding-bottom: 14px;
  border-bottom: var(--rule);
}

.work-filters {
  display: flex;
  gap: 28px;
}

.filter-count {
  color: var(--gray);
  margin-left: 6px;
}

.filter-tab {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.45;
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.filter-tab:hover { opacity: 0.8; }
.filter-tab.is-active { opacity: 1; border-bottom-color: var(--black); }

/* grid plano: 3 colunas, reflui quando itens são filtrados */
.work-grid--flat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(20px, 3vh, 36px);
}

.work-grid--flat .work-thumb.is-filtered { display: none; }

@media (max-width: 900px) {
  .work-grid--flat { grid-template-columns: 1fr; }
  .work-filters { flex-wrap: wrap; gap: 16px; }
  .filmography-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cs-hero-grid > div { border-left: 0; padding-left: 0; }
}


/* ============================================================
   CREATOR COM FOTO REAL
   ============================================================ */

.creator-photo--img { position: relative; overflow: hidden; }

.creator-photo--img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.creator-card:hover .creator-photo--img img { transform: scale(1.03); }

/* gradiente sutil garante leitura do número sobre qualquer foto */
.creator-photo--img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  z-index: 1;
  pointer-events: none;
}

.creator-photo--img .mono {
  position: relative;
  z-index: 2;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}


/* link do creator (portfólio externo) */
.creator-link {
  display: inline-block;
  margin-top: 12px;
  border-bottom: var(--rule);
  padding-bottom: 4px;
  transition: opacity 0.25s ease;
}
.creator-link:hover { opacity: 0.6; }

.creator-bio i { font-style: italic; }


/* card de creator clicável */
.creator-card--link { display: block; cursor: pointer; }

.creator-card--link .creator-name {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.creator-card--link:hover .creator-name { border-bottom-color: var(--black); }

/* estado vazio do grid de obras */
.work-empty {
  display: none;
  color: var(--gray);
  padding: clamp(50px, 10vh, 110px) var(--pad);
  text-align: center;
}

.work-empty.is-visible { display: block; }

/* vídeo local no hover do thumb (mesmo comportamento do iframe) */
video.thumb-video { object-fit: cover; }

/* grid vertical, conteúdo social (9:16 / 4:5) */
.work-grid--vertical .thumb-media { aspect-ratio: 4 / 5; }
.work-grid--vertical .thumb-title { font-size: clamp(20px, 2vw, 32px); }

/* overlay com vídeo local */
.work-overlay .vimeo-frame video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  /* tamanho original do arquivo; só reduz se não couber na tela */
  max-width: 100%;
  max-height: 100%;
  background: var(--black);
}

/* ============================================================
   ABOUT, colagem do time, frentes e clientes
   ============================================================ */

.team { padding-top: 90px; }

.team-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 40px var(--pad) 0;
}

.team-tile {
  position: relative;
  overflow: hidden;
  background: #e8e8e8;
  aspect-ratio: 4 / 3;
}

.team-tile--wide { grid-column: span 2; }
.team-tile--tall { grid-row: span 2; aspect-ratio: 3 / 4; }

.team-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease-out;
}

.team-tile:hover img { transform: scale(1.03); }

/* slot vazio mantém o ritmo do mosaico até a foto chegar */
.team-tile.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, #e8e8e8 0 10px, #e2e2e2 10px 20px);
}

.team-caption {
  color: var(--gray);
  margin: 18px var(--pad) 0;
}

/* frentes, texto mais denso que na home */
.fronts { padding-top: 90px; }

.front-text {
  margin-top: 14px;
  max-width: 62ch;
  line-height: 1.55;
}

/* clientes em marquee */
.clients { padding: 90px 0 40px; }

.clients-marquee { margin-top: 34px; }

.clients-marquee .marquee-item {
  font-size: clamp(26px, 3.6vw, 56px);
  padding-right: 0;
}

.client-sep {
  color: var(--gray);
  padding: 0 0.45em;
}

@media (max-width: 900px) {
  .team-collage { grid-template-columns: repeat(2, 1fr); }
  .team-tile--wide { grid-column: span 2; }
  .team-tile--tall { grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* ============================================================
   GRID EM PROPORÇÃO NATURAL, cada vídeo no seu formato original
   (masonry por colunas: verticais e horizontais convivem sem corte)
   ============================================================ */

.work-grid--natural {
  display: block;
  columns: 3;
  column-gap: 4px;
  margin-top: clamp(20px, 3vh, 36px);
  padding: 0 var(--pad);
}

.work-grid--natural .work-thumb {
  break-inside: avoid;
  margin-bottom: 4px;
  width: 100%;
}

/* o container herda a proporção do arquivo, definida inline pelo build */
.work-grid--natural .thumb-media { aspect-ratio: auto; }

/* sem recorte: a imagem preenche exatamente o quadro da própria proporção */
.work-grid--natural .thumb-image,
.work-grid--natural .thumb-video { object-fit: cover; }

.work-grid--natural .thumb-title { font-size: clamp(18px, 1.8vw, 30px); }

@media (max-width: 900px) {
  .work-grid--natural { columns: 2; }
}

@media (max-width: 560px) {
  .work-grid--natural { columns: 1; }
}


/* área preta ao redor do vídeo: cursor de saída */
.vp-toggle-area.is-backdrop { cursor: zoom-out; }

/* ============================================================
   PLAYER EM FUNDO BRANCO
   O vídeo fica centrado sobre branco; a barra de controles ganha
   fundo sólido para permanecer legível sobre qualquer conteúdo.
   ============================================================ */

.work-overlay { background: var(--white); }

.work-overlay-top { color: var(--black); }

.work-overlay-close {
  border-color: var(--black);
  color: var(--black);
}
.work-overlay-close:hover { background: var(--black); color: var(--white); }

.work-overlay .vimeo-frame,
.work-overlay .vimeo-frame video { background: var(--white); }

/* barra de controles: faixa branca com traço, tipografia preta */
.work-overlay .vp-controls {
  background: var(--white);
  border-top: var(--rule);
  color: var(--black);
  padding: 14px var(--pad);
}

.work-overlay .vp-btn { color: var(--black); }

.work-overlay .vp-track { background: rgba(0, 0, 0, 0.2); }
.work-overlay .vp-fill,
.work-overlay .vp-thumb { background: var(--black); }

/* sem véu escuro sobre o branco */
.work-overlay .vp-fade { display: none; }

.work-overlay .vp-loading-dot { background: rgba(0, 0, 0, 0.5); }

/* modo preenchido: vídeo cobre a tela toda; título, Close e controles
   ficam brancos sobre o filme, com véus escuros para leitura */
.work-overlay .vimeo-frame.is-fill video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  background: var(--black);
}
.work-overlay.is-fill .vimeo-frame { background: var(--black); }

.work-overlay.is-fill .work-overlay-top {
  color: var(--white);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  padding-bottom: 48px;
  pointer-events: none;
}
.work-overlay.is-fill .work-overlay-close {
  border-color: var(--white);
  color: var(--white);
  pointer-events: auto;
}
.work-overlay.is-fill .work-overlay-close:hover { background: var(--white); color: var(--black); }

.work-overlay.is-fill .vp-controls {
  background: none;
  border-top: 0;
  color: var(--white);
}
.work-overlay.is-fill .vp-btn { color: var(--white); }
.work-overlay.is-fill .vp-track { background: rgba(255, 255, 255, 0.3); }
.work-overlay.is-fill .vp-fill,
.work-overlay.is-fill .vp-thumb { background: var(--white); }
.work-overlay.is-fill .vp-fade { display: block; }
.work-overlay.is-fill .vp-loading-dot { background: rgba(255, 255, 255, 0.6); }

/* ============================================================
   CASE COM FILMES (fanta-halloween): filme principal em largura
   total, demais em 2 colunas; ficha de créditos no fim
   ============================================================ */
.work-grid--case { grid-template-columns: repeat(2, 1fr); }
.work-grid--case .work-thumb:first-child { grid-column: 1 / -1; }
.work-grid--pair .work-thumb:first-child { grid-column: auto; }
.work-grid--trio { grid-template-columns: repeat(3, 1fr); }
.work-grid--trio .work-thumb:first-child { grid-column: auto; }
.work-grid--quad { grid-template-columns: repeat(4, 1fr); }
.work-grid--quad .work-thumb:first-child { grid-column: auto; }
@media (max-width: 1100px) { .work-grid--quad { grid-template-columns: repeat(2, 1fr); } }

.cs-credits { margin: clamp(60px, 12vh, 160px) var(--pad) 0; }
.cs-credits .cs-hero-grid { margin-top: 14px; }
.cs-hero-grid--5 a { text-decoration: underline; text-underline-offset: 3px; }
.cs-hero-grid--5 { grid-template-columns: repeat(5, 1fr); }
.cs-hero-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cs-hero-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .work-grid--case { grid-template-columns: 1fr; }
  .cs-hero-grid--5 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   DIRETOR COM REELS DO INSTAGRAM (embed oficial, provisório)
   ============================================================ */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(20px, 3vh, 36px) var(--pad) 0;
  background: #e3e3e3;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.ig-cell { background: var(--white); }
.ig-cell iframe {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 18.4;
  border: 0;
}
.ig-profile { color: var(--gray); }
.ig-profile:hover { color: var(--black); }
.cs-hero-grid a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ig-grid { grid-template-columns: 1fr; } }

/* respiro entre o último bloco de texto (About) e o rodapé preto */
main > .cs-inline-desc:last-child,
main > .more-cases:last-child,
main > .creators-grid:last-child,
main > .case-studies:last-child { margin-bottom: clamp(96px, 14vh, 160px); }

/* grid agrupado por projeto (ordem fixa): título do projeto em linha cheia,
   filmes lado a lado do mesmo tamanho (4 por linha = span-3, 3 por linha = padrão) */
.work-grid--groups { grid-template-columns: repeat(12, 1fr); }
.work-grid--groups .work-thumb { grid-column: span 4; }
.work-grid--groups .work-thumb.span-3 { grid-column: span 3; }
.work-grid--groups .work-thumb.span-12 { grid-column: 1 / -1; }
.work-grid--groups .work-thumb.span-6 { grid-column: span 6; }
.work-group-title {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pad);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
  padding: clamp(56px, 8vh, 96px) var(--pad) 14px;
  border-bottom: var(--rule);
  margin: 0 0 1px;
}
.work-group-count {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gray);
  white-space: nowrap;
}
.work-grid--groups .work-group-title:first-child { padding-top: 8px; }
/* em telas estreitas os filmes de um projeto continuam lado a lado:
   3 por linha seguem 3, 4 por linha viram 2x2 */
@media (max-width: 900px) {
  .work-grid--groups .work-thumb.span-3 { grid-column: span 6; }
  .work-grid--groups .work-thumb:not(.span-3):not(.span-6):not(.span-12) .thumb-title { font-size: 16px; }
  .work-grid--groups .work-thumb:not(.span-3):not(.span-6):not(.span-12) .thumb-client { display: none; }
}

/* ============================================================
   ENTERTAINMENT, curta em destaque (thumb que toca + ficha)
   ============================================================ */
.ent-features { margin-top: 0; }
.ent-feature {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: calc(var(--pad) * 2);
  align-items: end;
  margin: 40px var(--pad) 40px;
}
.ent-feature + .ent-feature { margin-top: clamp(60px, 10vh, 120px); }
/* curtas alternam o lado do filme */
.ent-feature--flip { grid-template-columns: 1fr 1.5fr; }
.ent-feature--flip .ent-feature-media { order: 2; }
.ent-feature-kicker { color: var(--gray); }
.ent-feature-title {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 0.9;
  margin: 14px 0 0;
}
.ent-feature-desc { max-width: 34ch; margin: 18px 0 0; }
.ent-feature .cs-hero-grid { margin-top: 32px; }
.ent-feature .cs-hero-grid a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ent-feature, .ent-feature--flip { grid-template-columns: 1fr; gap: 28px; }
  .ent-feature--flip .ent-feature-media { order: 0; }
}

/* respiro antes do rodapé preto também no Entertainment */
main > .ent-section:last-of-type { margin-bottom: clamp(96px, 14vh, 160px); }
.ent-features + .ent-list { margin-top: clamp(60px, 10vh, 120px); }

/* ============================================================
   CASE DE ENTRETENIMENTO: números de audiência e guia de episódios
   ============================================================ */
.case-stats { margin: clamp(64px, 10vh, 120px) var(--pad) 0; }
.case-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pad);
  padding-bottom: 14px;
}
.case-stats-source { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.case-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.case-stats-grid > div { padding: 20px var(--pad) 26px 18px; border-left: 1px solid #e3e3e3; }
.case-stats-grid > div:first-child { border-left: 0; padding-left: 0; }
.case-stats-grid dt { display: block; margin-bottom: 14px; }
.case-stats-grid dd {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.ep-guide { margin: clamp(80px, 12vh, 140px) var(--pad) 0; }
.ep-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: var(--rule); }
.ep-row {
  display: grid;
  grid-template-columns: 6em 1fr auto;
  gap: var(--pad);
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #e3e3e3;
}
.ep-num, .ep-dur { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ep-dur { color: var(--gray); }
.ep-line {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.2;
}

@media (max-width: 900px) {
  .case-stats-head { flex-direction: column; gap: 6px; }
  .case-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-stats-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .case-stats-grid > div:nth-child(n+3) { border-top: 1px solid #e3e3e3; }
  .ep-row { grid-template-columns: 4.5em 1fr; }
  .ep-dur { display: none; }
}

/* série em destaque no Entertainment: mídia que leva ao case */
.ent-series-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black);
}
.ent-series-media img,
.ent-series-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ent-series-media video { transition: opacity 0.6s var(--ease-out-soft); }
.ent-series-cta {
  display: inline-block;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: var(--rule);
  padding-bottom: 6px;
}
.ent-series-cta:hover { opacity: 0.6; }

/* números de audiência compactos, como segunda linha da ficha do topo */
.case-stats-grid--compact { border-top: 0; }
.case-stats-grid--compact > div { padding: 16px var(--pad) 18px 18px; }
.case-stats-grid--compact dt { margin-bottom: 10px; }
.case-stats-grid--compact dd { font-size: clamp(28px, 2.8vw, 44px); }
/* dentro do grid agrupado (abaixo de uma série): linha cheia, com régua em cima */
.work-grid--groups > .case-stats-grid {
  grid-column: 1 / -1;
  margin: 0 var(--pad);
  border-top: 0;
}

/* Entertainment: números de performance abaixo da série em destaque */
.ent-stats { margin: 32px var(--pad) 0; border-top: var(--rule); }

/* o bloco de texto de cada projeto também abre o projeto */
.ent-feature-info.is-link { cursor: pointer; }
.ent-feature-info.is-link .ent-feature-title { transition: opacity 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ent-feature-info.is-link:hover .ent-feature-title { opacity: 0.6; }
}

/* TESTE: logo real no lugar da palavra "Spritz" do manifesto da home.
   Altura igual à das maiúsculas da serifa; a imagem senta na linha de base */
.manifesto .m-logo {
  display: inline-block;
  /* arquivo com o S inteiro (ele passa um pouco acima e abaixo das outras letras)
     e 4px de respiro: maiúsculas (442px de 466) = 0.735em; desce o que sobra embaixo */
  height: 0.775em;
  width: auto;
  vertical-align: -0.02em;
}