/* ============================================================
   1877 Lab — main.css
   Tokens, temas, tipografia, seções
   ============================================================ */

/* ---------- Fontes ---------- */
/* Placeholder — soltar os arquivos em site/fonts/ com estes nomes */
@font-face {
  font-family: 'ZT Nature';
  src: url('../fonts/ZTNature-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Nature';
  src: url('../fonts/ZTNature-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Nature';
  src: url('../fonts/ZTNature-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'ZT Nature';
  src: url('../fonts/ZTNature-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta da marca */
  --c-offwhite: #F2EDE9;
  --c-green:    #475756;
  --c-orange:   #B25000;
  --c-black:    #010302;
  --c-gray:     #CECECE;

  /* Estado global (trocado via JS por seção) */
  --bg-color:  var(--c-black);
  --sun-color: var(--c-orange);

  /* Tokens de texto (tema dark = default) */
  --ink:        var(--c-offwhite);
  --ink-muted:  rgba(242, 237, 233, 0.62);
  --ink-faint:  rgba(242, 237, 233, 0.28);
  --accent:     #C9660F;

  /* Tipografia */
  --font-display: 'ZT Nature', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-numeric: 'Helvetica Neue', 'Arial Black', Helvetica, Arial, sans-serif;
  --font-body:    'ZT Nature', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Legendas técnicas do case Behance v3: coordenadas, cotas, rótulos */
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Mundo petróleo (case Behance v3): tudo parte do preto-rocha e do petróleo */
  --c-petrol-deep: #0B1110;
  --c-petrol-mid:  #1B2423;

  --fs-h1:    clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2:    clamp(1.75rem, 3.5vw, 3rem);
  --fs-body:  clamp(1rem, 1.2vw, 1.25rem);
  --fs-label: 0.8125rem;

  --sun-size: clamp(120px, 22vw, 340px);

  /* Montanha em proporção NATURAL (viewBox 841.89×430.14 ≈ 1.96:1).
     A altura do wrapper corta apenas a base sólida — nunca deforma a silhueta. */
  --hero-mountain-h:   clamp(300px, 42vh, 520px);
  /* Footer: altura mínima garante que o corte aconteça na zona 100% verde
     (linha do cume nas bordas = 31,4vw) — emenda invisível com a base */
  --footer-mountain-h: clamp(340px, max(46vh, calc(31.5vw + 12px)), 700px);
  --footer-base-h:     clamp(120px, 18vh, 170px);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(6rem, 14vh, 10rem);
}

@media (max-width: 768px) {
  :root {
    --sun-size: clamp(90px, 30vw, 140px);
    /* No mobile o SVG tem 180% de largura → altura intrínseca ≈ 92vw */
    --hero-mountain-h:   min(45vh, 91vw);
    --footer-mountain-h: min(52vh, 91vw);
  }
}

/* ---------- Temas por seção ---------- */
body[data-theme='green'] {
  --ink:       var(--c-offwhite);
  --ink-muted: rgba(242, 237, 233, 0.68);
  --ink-faint: rgba(242, 237, 233, 0.3);
  --accent:    #E0872F;
}
body[data-theme='light'] {
  --ink:       var(--c-black);
  --ink-muted: var(--c-green);
  --ink-faint: rgba(1, 3, 2, 0.25);
  --accent:    #A34A00;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background-color: var(--bg-color);
  color: var(--ink);
  /* Troca de tema cinematográfica: curva longa e suave, como uma luz que vira */
  transition: background-color 1.2s cubic-bezier(0.65, 0, 0.35, 1),
              color 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  overflow-x: hidden;
}
::selection { background: var(--c-orange); color: var(--c-offwhite); }

section {
  position: relative;
  min-height: 90svh;
  padding: var(--section-pad) 0;
  scroll-margin-top: 4rem;
  display: flex;
  align-items: center;
}
.section-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Utilitários de texto ---------- */
h1, h2, h3 { line-height: 1.06; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 300; }

/* Composição em dois tempos: a preparação sussurra, a resposta ocupa a tela */
.t-quiet {
  font-weight: 300;
  color: var(--ink-muted);
}
.t-loud {
  font-weight: 300;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* Altímetro fixo — sobe de 0 a 1.877 m conforme o scroll */
.altimeter {
  position: fixed;
  right: var(--gutter);
  bottom: 1.5rem;
  z-index: 4;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  pointer-events: none;
  transition: color 0.9s ease, opacity 0.4s ease;
}
.altimeter.at-summit { opacity: 0; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  color: var(--ink);
  transition: color 1.2s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.5s ease;
}
html[data-scrolled] .site-header {
  background-color: color-mix(in srgb, var(--bg-color) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.logo-lockup {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1;
}
.logo-lockup .logo-numerals {
  font-family: var(--font-numeric);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  line-height: 0.86;
}
.logo-lockup .logo-tag {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--accent);
  padding-bottom: 0.1em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.site-nav a:hover { opacity: 1; }
.btn-cta {
  font-size: var(--fs-label) !important;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.65em 1.4em;
  opacity: 1 !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-cta:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-offwhite);
}
@media (max-width: 768px) {
  .site-nav a:not(.btn-cta) { display: none; }
  .site-nav .btn-cta { white-space: nowrap; padding: 0.6em 1em; font-size: 0.62rem !important; }
}

/* ============================================================
   Montanha (inline SVG, hero + footer)
   ============================================================ */
.mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
  overflow: hidden;
}
/* Proporção intrínseca do desenho — o topo fica sempre visível,
   o excesso da base sai pelo overflow do wrapper */
.mountain svg {
  width: 100%;
  max-width: none; /* o reset limita a 100% e anulava o corte de 180% no mobile */
  height: auto;
}
.mountain--hero   { height: var(--hero-mountain-h); }
/* -1px: sobrepõe a base e elimina a emenda de antialiasing */
.mountain--footer { height: var(--footer-mountain-h); bottom: calc(var(--footer-base-h) - 1px); }
/* Telas estreitas: a montanha amplia e corta as laterais, nunca achata */
@media (max-width: 768px) {
  .mountain svg {
    width: 180%;
    margin-left: -40%;
  }
}
/* Camadas sólidas: o sol nunca vaza através da montanha */
.mountain-ridge { fill: var(--ridge, #0E1514); }
.mountain-mist  { fill: var(--mist, #5D5D5D); }
/* Footer: montanha nas cores da marca — o logo se monta no cume */
.mountain--footer { --ridge: var(--c-green); --mist: var(--c-gray); }

/* ============================================================
   1 · Hero
   ============================================================ */
#hero {
  min-height: 100svh;
  padding: 0;
  overflow: hidden; /* as curvas de nível passam da borda */
}
/* Mar de nuvens em câmera lenta — a paisagem real atrás da silhueta da marca */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05) brightness(0.78);
}
/* Scrim: protege o texto à esquerda, funde o rodapé no preto da montanha */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 3, 2, 0.62) 0%, rgba(1, 3, 2, 0.24) 32%, rgba(1, 3, 2, 0.18) 55%, rgba(1, 3, 2, 0.85) 84%, #010302 100%),
    linear-gradient(90deg, rgba(1, 3, 2, 0.68) 0%, rgba(1, 3, 2, 0.3) 52%, rgba(1, 3, 2, 0.06) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-media {
    background: url('../assets/hero-clouds-poster.jpg') center / cover no-repeat;
  }
}
#hero .section-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-height: 100svh;
  padding-top: 6rem;
  padding-bottom: clamp(4rem, 12vh, 8rem);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.75rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 11em;
}
.hero-title em {
  font-style: normal;
  color: var(--ink-muted);
}
.hero-sub {
  max-width: 30em;
  margin-top: 1.75rem;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}
.btn-cta--hero {
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.95em 1.9em;
  background: var(--c-offwhite);
  border-color: var(--c-offwhite);
  color: var(--c-black);
}
.btn-cta:active { transform: translateY(1px); }
/* Convite à subida — espelha o altímetro no canto oposto */
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 1.5rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(242, 237, 233, 0.75);
  transition: color 0.25s ease;
}
.scroll-cue:hover { color: var(--c-offwhite); }
.scroll-cue span {
  display: inline-block;
  animation: cue-drift 2.6s ease-in-out infinite;
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
}

/* ============================================================
   2 · Manifesto
   ============================================================ */
/* Cada frase em dois tempos: preparação leve, resposta no peso máximo.
   Os blocos deslocam lateralmente como o relevo — nunca uma coluna reta. */
.mf { margin-bottom: clamp(2.75rem, 7vh, 5rem); }
.mf:last-child { margin-bottom: 0; }
.mf-setup {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 26em;
}
/* Rodapé de um beat: o método listado, sussurrado depois do punch */
.mf-follow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 24em;
  margin-top: 1rem;
}
.mf-punch {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.3em;
  max-width: 11em;
  text-wrap: balance;
  color: var(--ink);
}
.mf-punch--accent { color: var(--ink-muted); } /* laranja só no sol */
.mf-punch--mid { font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.08; }
.mf--2 { margin-left: clamp(2rem, 14vw, 260px); }
.mf--4 { margin-left: clamp(1rem, 7vw, 130px); }
@media (max-width: 700px) {
  .mf--2, .mf--4 { margin-left: 0; }
}

/* Camadas imersivas do Manifesto: curvas de nível + grão de filme */
#manifesto { overflow: hidden; }
.mf-topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  color: rgba(242, 237, 233, 0.11); /* traço faint offwhite */
}
.mf-topo svg {
  width: min(150vh, 115%);
  aspect-ratio: 1;
  transform: translate(16%, 4%); /* desloca pra direita, atrás da rota do sol */
}
.mf-topo use {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}
.topo-drift {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: topo-drift 90s linear infinite;
}
@keyframes topo-drift {
  to { transform: rotate(360deg); }
}
/* Grão de filme sutil sobre o fundo (não cobre o texto, que fica em z-2) */
.mf-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) {
  .topo-drift { animation: none; }
}

/* ============================================================
   Serviços · lista em altitudes (servicos.html)
   ============================================================ */
/* Trilha em zigue-zague: os serviços sobem a montanha em curvas */
.services-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vh, 6rem);
}
.services-list li { max-width: 72%; }
.services-list li:nth-child(even) {
  margin-left: auto;
  text-align: right;
}
.services-list li:nth-child(even) p { margin-left: auto; }
/* Cota de altitude como curva de nível: o número puxa um fio de contorno.
   Empilhadas, as quatro cotas leem como um mapa topográfico — a subida medida. */
.srv-alt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  margin-bottom: 0.85rem;
}
.srv-alt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--ink-faint),
    transparent);
}
/* Itens à direita: número à direita, fio corre pra esquerda */
.services-list li:nth-child(even) .srv-alt { flex-direction: row-reverse; }
.services-list li:nth-child(even) .srv-alt::after {
  background: linear-gradient(270deg,
    var(--ink-faint),
    transparent);
}
.services-list h3 {
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
}
.services-list p {
  color: var(--ink-muted);
  max-width: 30em;
  margin-top: 0.6rem;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .services-list li,
  .services-list li:nth-child(even) {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .services-list li:nth-child(even) p { margin-left: 0; }
}

/* Eixos em escadaria ascendente — a subida da montanha */
.eixos {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vh, 5.5rem);
}
.eixo--2 { margin-left: clamp(1.5rem, 12vw, 220px); }
.eixo--3 { margin-left: clamp(3rem, 24vw, 440px); }
@media (max-width: 700px) {
  .eixo--2 { margin-left: 1rem; }
  .eixo--3 { margin-left: 2rem; }
}
.eixo h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.01em;
}
.eixo p {
  margin-top: 0.6rem;
  max-width: 26em;
  color: var(--ink-muted);
  line-height: 1.6;
}
.eixo p strong { color: var(--ink); font-weight: 600; }

/* Lightbox do filme completo */
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(1, 3, 2, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.work-lightbox.open { opacity: 1; visibility: visible; }
.work-lightbox video {
  width: min(100%, 1360px);
  max-height: 84vh;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.work-lightbox iframe {
  display: none;
  width: min(100%, 1360px);
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  border: 0;
  border-radius: 4px;
  background: #000;
}
.work-lightbox.is-yt iframe { display: block; }
.work-lightbox.is-yt video { display: none; }
.work-lightbox-close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-offwhite);
  background: rgba(242, 237, 233, 0.08);
  border: 1px solid rgba(242, 237, 233, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.work-lightbox-close:hover { background: rgba(242, 237, 233, 0.2); }

/* ============================================================
   6 · Contato / Footer
   ============================================================ */
#contato {
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: calc(var(--footer-mountain-h) + var(--footer-base-h) + 2rem);
}
#contato h2,
.contact-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 12em;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.contact-sub {
  color: var(--ink-muted);
  max-width: 30em;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2.25rem;
}
.contact-links a {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* A base verde da capa: continua a montanha e recebe o lockup da marca */
.footer-base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-base-h);
  background: var(--c-green);
  z-index: 3;
}
.footer-numerals {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2.25rem, 5.5vh, 3.25rem);
  display: flex;
  flex-direction: column;
  font-family: var(--font-numeric);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  letter-spacing: -0.02em;
  line-height: 0.86;
  color: var(--c-offwhite);
}
.footer-lab {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.25rem, 5.5vh, 3.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--c-offwhite);
}
.footer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(242, 237, 233, 0.6);
}
.footer-bar .footer-altitude { text-transform: uppercase; }
@media (max-width: 700px) {
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ============================================================
   Reveals (estado inicial aplicado só via JS — conteúdo sempre
   visível sem JS e com prefers-reduced-motion)
   ============================================================ */
html.js [data-reveal] {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js [data-reveal].reveal-init {
  opacity: 0;
  transform: translateY(24px);
}
html.js [data-reveal].revealed {
  opacity: 1;
  transform: none;
}
/* Cadência: irmãos entram escalonados, não em bloco.
   Nos dois tempos, a resposta chega um respiro depois da preparação. */
html.js .mf-punch { transition-delay: 0.16s; }
/* Kinetic type do Manifesto: a resposta "sobe" revelada por wipe (a subida) */
html.js .mf-punch {
  transition:
    opacity 0.7s ease 0.16s,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s,
    clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s,
    -webkit-clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s;
}
html.js .mf-punch.reveal-init {
  transform: translateY(0.5em);
  -webkit-clip-path: inset(-0.12em 0 110% 0);
  clip-path: inset(-0.12em 0 110% 0);
}
html.js .mf-punch.revealed {
  -webkit-clip-path: inset(-0.12em 0 -0.12em 0);
  clip-path: inset(-0.12em 0 -0.12em 0);
}
html.js .mf-follow { transition-delay: 0.32s; }
html.js .services-list li:nth-child(2) { transition-delay: 0.07s; }
html.js .services-list li:nth-child(3) { transition-delay: 0.14s; }
html.js .services-list li:nth-child(4) { transition-delay: 0.21s; }
html.js .eixo--2 { transition-delay: 0.1s; }
html.js .eixo--3 { transition-delay: 0.2s; }
html.js .hero-sub { transition-delay: 0.12s; }
html.js .btn-cta--hero { transition-delay: 0.24s; }

/* ============================================================
   Páginas internas (A 1877 · Serviços · Contato)
   ============================================================ */
/* Foto de fundo incorporada — reutilizável, funde nas bordas */
.bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Sobre seção escura: escurece o lado do texto (esquerda) e funde no preto */
.bg-photo--dark img { filter: contrast(1.05) saturate(0.8) brightness(0.64); }
.bg-photo--dark::after {
  background:
    linear-gradient(90deg, #010302 0%, rgba(1, 3, 2, 0.7) 42%, rgba(1, 3, 2, 0.25) 100%),
    linear-gradient(0deg, #010302 1%, rgba(1, 3, 2, 0) 38%, rgba(1, 3, 2, 0) 68%, rgba(1, 3, 2, 0.55) 100%);
}

/* Cabeçalho de página (dois tempos, sem eyebrow/numeração) */
.page-hero {
  min-height: 100svh;
  align-items: flex-end;
  padding-top: 8rem;
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.page-hero .section-inner { position: relative; z-index: 2; }

/* Foto full-bleed de HERO. Enquadramento subido pra faixa larga mostrar
   montanha + pessoa + carro (o pneu desce e deixa de dominar). Scrim no
   rodapé e à esquerda protege o texto. */
.page-hero .bg-photo img { object-position: 50% 32%; }
.page-hero .bg-photo--dark img { filter: contrast(1.05) saturate(0.86) brightness(0.74); }
.page-hero .bg-photo--dark::after {
  background:
    linear-gradient(0deg, #010302 0%, rgba(1, 3, 2, 0.72) 20%, rgba(1, 3, 2, 0.12) 46%, rgba(1, 3, 2, 0.12) 70%, rgba(1, 3, 2, 0.5) 100%),
    linear-gradient(90deg, rgba(1, 3, 2, 0.72) 0%, rgba(1, 3, 2, 0.28) 42%, rgba(1, 3, 2, 0) 72%);
}
.page-hero .page-title { max-width: 48rem; }
.page-hero .page-lead { max-width: 36rem; }
@media (max-width: 768px) {
  .page-hero .bg-photo img { object-position: 56% 30%; }
  .page-hero .bg-photo--dark::after {
    background:
      linear-gradient(0deg, #010302 0%, rgba(1, 3, 2, 0.75) 26%, rgba(1, 3, 2, 0.2) 55%, rgba(1, 3, 2, 0.35) 100%);
  }
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.04;
  max-width: 14em;
}
.page-title .t-loud { display: inline-block; }
.page-lead {
  margin-top: 1.75rem;
  max-width: 40em;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Bloco de conteúdo padrão de página interna */
.page-block { max-width: var(--container); }
.page-statement {
  max-width: 48rem;
}
.page-statement .t-quiet,
.page-statement .t-loud { display: block; }
.page-statement .t-loud {
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  margin-top: 0.3em;
  line-height: 1.05;
}
.page-note {
  margin-top: 1.5rem;
  max-width: 34em;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* Rodapé compacto das páginas internas */
.site-footer {
  position: relative;
  background: var(--c-green);
  color: var(--c-offwhite);
  padding: clamp(3rem, 9vh, 6rem) 0 0.75rem;
}
.site-footer .section-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.footer-lockup {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.footer-lockup .footer-numerals {
  position: static;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.footer-lockup .footer-lab {
  position: static;
  padding-bottom: 0.15em;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}
.site-footer nav a {
  font-family: var(--font-display);
  text-decoration: none;
  color: var(--c-offwhite);
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease;
}
.site-footer nav a:hover { border-color: var(--c-offwhite); }
.site-footer .footer-bar {
  position: static;
  width: 100%;
  margin-top: clamp(2rem, 6vh, 4rem);
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(242, 237, 233, 0.18);
}

/* ============================================================
   Mundo petróleo (case Behance v3)
   Legenda em mono, grão de filme, curvas de nível reais do pico
   ============================================================ */
.mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
}
.link-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.3em;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.link-mono:hover { border-color: var(--ink); }
:focus-visible { outline: 1px solid var(--c-offwhite); outline-offset: 4px; }

/* Grão de filme sobre o site inteiro (o mesmo do case) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%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 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Mobília de canto em mono */
.chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chrome > * { position: absolute; color: var(--ink-muted); }
.chrome-bl { left: var(--gutter); bottom: 1.5rem; }
@media (max-width: 768px) { .chrome { display: none; } } /* divide o rodapé com o altímetro */
.altimeter { font-family: var(--font-mono); font-size: 0.7rem; }

/* Hero: nuvens em gradient map petróleo, o sol é a única cor */
.hero-media video { filter: grayscale(1) contrast(1.1) brightness(0.72); }
.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-green);
  mix-blend-mode: color;
}
.hero-media::after { z-index: 2; }
.hero-topo {
  position: absolute;
  left: -10%;
  top: -18%;
  width: 130%;
  max-width: none;
  z-index: 1;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 60% at 60% 55%, #000 30%, transparent 85%);
  mask-image: radial-gradient(60% 60% at 60% 55%, #000 30%, transparent 85%);
}

/* ============================================================
   Trabalhos: o trilho lateral
   Sem JS (ou com movimento reduzido) os painéis empilham na vertical.
   Com JS, o main.js fixa a seção e o scroll empurra o trilho pro lado.
   ============================================================ */
#trabalhos {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--c-petrol-deep);
}
.h-track { display: flex; flex-direction: column; }
#trabalhos.is-horizontal { height: 100vh; height: 100dvh; overflow: hidden; }
#trabalhos.is-horizontal .h-track {
  flex-direction: row;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.panel {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#trabalhos.is-horizontal .panel {
  flex: 0 0 auto;
  width: 100vw;
  height: 100%;
  min-height: 0;
}
.panel-cat { color: var(--ink-muted); }
.panel-cat--top {
  position: absolute;
  top: clamp(5.5rem, 13vh, 7.5rem);
  left: var(--gutter);
  z-index: 2;
}

/* Filmes: tela cheia */
.panel--film .work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}
.panel--film::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(1, 3, 2, 0.85) 0%, rgba(1, 3, 2, 0.2) 42%, rgba(1, 3, 2, 0) 62%),
    linear-gradient(180deg, rgba(1, 3, 2, 0.55) 0%, rgba(1, 3, 2, 0) 20%);
}
.panel-copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(3.5rem, 10vh, 6rem);
  z-index: 2;
  max-width: 40rem;
}
.panel-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 7.5rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.panel-sub {
  margin: 0.75rem 0 1.75rem;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

/* Social: um cliente por tela; celular com o feed rolando + posts em destaque */
.panel--ig {
  background: radial-gradient(70% 80% at 72% 50%, rgba(71, 87, 86, 0.5), transparent 70%), var(--c-petrol-deep);
}
.ig-stage {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 7vw, 7rem);
  transform: translateY(-46%);
  display: flex;
  align-items: center;
}
.phone {
  position: relative;
  z-index: 2;
  height: min(74dvh, 680px);
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 44px;
  background: #050807;
  box-shadow: 0 0 0 1px rgba(242, 237, 233, 0.12), 0 40px 90px rgba(1, 3, 2, 0.7);
}
.phone-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 0.9rem 0.8rem;
  border-radius: 34px 34px 0 0;
  background: #0d1312;
}
.ig-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.9rem;
  background: var(--c-offwhite);
  color: var(--c-black);
  box-shadow: 0 0 0 2px #0d1312, 0 0 0 3.5px var(--c-orange);
}
.ig-name { flex: 1; font-size: 0.85rem; }
.ig-follow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45em 0.9em;
  border-radius: 6px;
  background: rgba(242, 237, 233, 0.12);
}
.phone-screen {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  background: #0d1312;
}
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.phone-screen.is-looping .ig-grid { animation: reel-grid 38s linear infinite; }
@keyframes reel-grid { to { transform: translateY(calc(-50% - 1px)); } }
.ig-float {
  position: relative;
  width: clamp(150px, 15vw, 260px);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(1, 3, 2, 0.6);
}
.ig-float--a { margin-right: -2.5rem; transform: rotate(-6deg) translateY(-14%); z-index: 1; }
.ig-float--b { margin-left: -2.5rem; transform: rotate(5deg) translateY(16%); z-index: 3; }
@media (max-width: 900px) {
  .ig-float { display: none; }
  .ig-stage { right: 50%; top: 42%; transform: translate(50%, -50%); }
  .phone { height: min(56dvh, 520px); }
}
@media (prefers-reduced-motion: reduce) { .phone-screen .ig-grid { animation: none; } }

/* Capa de case: a imagem inteira é clicável */
.panel-link { position: absolute; inset: 0; z-index: 2; }
.panel--cover .panel-copy { z-index: 3; }
.panel--cover img { object-position: 30% 50%; }

/* Fotos e impressos: uma imagem por tela, sangrando */
.panel--shot { margin: 0; background: var(--c-petrol-deep); }
.panel--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel--shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(1, 3, 2, 0.7) 0%, rgba(1, 3, 2, 0) 30%),
              linear-gradient(180deg, rgba(1, 3, 2, 0.45) 0%, rgba(1, 3, 2, 0) 18%);
}
/* Peça vertical: inteira, centrada no petróleo, nunca cortada */
/* Mockup de impresso no celular: inteiro, nunca cortado */
@media (max-width: 768px) {
  .panel--print img { object-fit: contain; padding: 6rem var(--gutter) 13rem; }
}
.panel--contain img { object-fit: contain; padding: clamp(5.5rem, 13vh, 7rem) var(--gutter) clamp(11rem, 26vh, 14rem); } /* embaixo: espaço da legenda + CTA */
/* Dois retratos lado a lado preenchendo a tela */
.panel--pair { display: grid; grid-template-columns: 1fr 1fr; }
.panel--pair img { position: relative; inset: auto; }
.panel-copy--shot { display: flex; flex-direction: column; gap: 0.5rem; }
.shot-cap {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Fim do trilho */
.panel--end {
  align-items: flex-start;
  padding-inline: var(--gutter);
  gap: 2.25rem;
}
#trabalhos.is-horizontal .panel--end { width: max(70vw, 30rem); }
.end-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 10em;
}
.end-title em { font-style: normal; color: var(--ink-muted); }

/* Barra de progresso do trilho */
.h-progress { display: none; }
#trabalhos.is-horizontal .h-progress {
  display: block;
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.25rem;
  z-index: 4;
  height: 1px;
  background: var(--ink-faint);
}
.h-progress span {
  display: block;
  height: 100%;
  background: var(--c-offwhite);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ============================================================
   Páginas de texto (StoryBrand): problema, plano, sucesso
   ============================================================ */
.site-nav a[aria-current="page"]:not(.btn-cta) { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; }
.page-kicker { display: block; margin-bottom: 1.25rem; color: var(--ink-muted); }
.page-note--loud {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.stake-list {
  list-style: none;
  margin-top: 1.75rem;
  max-width: 40rem;
  border-top: 1px solid var(--ink-faint);
}
.stake-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-faint);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
}
.plan-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 8vh, 5rem);
}
.plan-list li { border-top: 1px solid var(--ink-faint); padding-top: 1.25rem; }
.plan-list li:nth-child(2) { margin-top: clamp(2rem, 6vh, 4rem); }
.plan-list li:nth-child(3) { margin-top: clamp(4rem, 12vh, 8rem); }
.plan-list .mono { color: var(--ink-muted); }
.plan-list h3 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  letter-spacing: -0.03em;
}
.plan-list p { margin-top: 0.6rem; color: var(--ink-muted); line-height: 1.55; max-width: 22em; }
@media (max-width: 760px) {
  .plan-list { grid-template-columns: 1fr; }
  .plan-list li:nth-child(n) { margin-top: 0; }
}
/* Manifesto (A 1877): curvas de nível reais do pico, à direita, atrás da rota do sol */
.mf-topo-img {
  position: absolute;
  top: 50%;
  right: -12%;
  width: min(120vh, 90%);
  max-width: none;
  transform: translateY(-50%);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* ============================================================
   CTA de agendar: presente em toda seção e em todo painel
   ============================================================ */
.btn-agendar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  background: var(--c-offwhite);
  color: var(--c-black);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.btn-agendar:hover { background: var(--c-orange); color: var(--c-offwhite); }
.btn-agendar:active { transform: translateY(1px); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.panel-copy--shot .btn-agendar { margin-top: 0.9rem; }
.panel-copy--social { top: auto; right: auto; }
.section-cta { margin-top: clamp(2rem, 5vh, 3rem); }

/* Logo oficial (numerais + "creative lab" na vertical), nunca recomposto em texto */
.logo-img { display: block; height: 2.6rem; width: auto; }
.footer-logo { display: block; height: clamp(3.5rem, 7vw, 5rem); width: auto; }
.footer-logo--base { position: absolute; left: var(--gutter); bottom: clamp(2.6rem, 6vh, 3.4rem); }

/* Página de case (apresentação em pranchas, como no Behance) */
.case-head { min-height: auto; padding-top: clamp(8rem, 18vh, 11rem); padding-bottom: clamp(3rem, 8vh, 5rem); }
.case-back { display: inline-block; margin-bottom: clamp(2rem, 5vh, 3rem); }
.case-actions { margin-top: 2rem; }
.case-boards { display: block; min-height: 0; padding: 0; }
.case-boards img { display: block; width: 100%; max-width: 1600px; height: auto; margin-inline: auto; }
.case-end { min-height: 70svh; }

/* ============================================================
   Seções editoriais das páginas internas (linguagem do case:
   rótulo mono + título Light em dois tons + grade com fios)
   ============================================================ */
.sec { display: block; min-height: 0; padding: clamp(5.5rem, 14vh, 9rem) 0; border-top: 1px solid var(--ink-faint); }
.sec-head { max-width: 46rem; }
.sec-head .mono { display: block; color: var(--ink-muted); margin-bottom: 1.25rem; }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.sec-head h2 .t-quiet { color: var(--ink-muted); }
.sec-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.sec-note { color: var(--ink-muted); line-height: 1.6; max-width: 34em; }
.rule-list { list-style: none; margin-top: 1.5rem; border-top: 1px solid var(--ink-faint); }
.rule-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--ink-faint); font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.45; }
.sec-quote {
  margin-top: clamp(2rem, 5vh, 3rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.steps, .trio { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); margin-top: clamp(3rem, 8vh, 4.5rem); }
.steps li, .trio > div { border-top: 1px solid var(--ink); padding-top: 1.4rem; position: relative; }
.steps li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.steps .mono, .trio .mono { color: var(--ink-muted); }
.steps h3, .trio h3 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.steps p, .trio p { margin-top: 0.7rem; color: var(--ink-muted); line-height: 1.55; max-width: 24em; }
.alt-table { list-style: none; margin-top: clamp(3rem, 8vh, 4.5rem); border-top: 1px solid var(--ink-faint); }
.alt-table li {
  display: grid;
  grid-template-columns: 8rem 1fr 1.2fr;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3.5vh, 2.25rem) 0;
  border-bottom: 1px solid var(--ink-faint);
}
.alt-table .mono { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.alt-table h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.alt-table p { color: var(--ink-muted); line-height: 1.55; }
.sec--end { padding-bottom: clamp(7rem, 18vh, 11rem); }
.sec-head--end { max-width: 52rem; }
@media (max-width: 860px) {
  .sec-split, .steps, .trio { grid-template-columns: 1fr; }
  .alt-table li { grid-template-columns: 1fr; gap: 0.5rem; }
}
.btn-cta--hero { display: inline-flex; align-items: center; } /* inline-block ignorava a margem e encostava no título */
.page-hero .page-title { font-size: clamp(2.6rem, 5.2vw, 4.75rem); max-width: 16em; letter-spacing: -0.035em; }

/* Capa clara (Pólen): texto em tinta escura, sem véu escuro, título menor que o logo da capa */
.panel--cover::after { background: linear-gradient(0deg, rgba(242, 237, 233, 0.85) 0%, rgba(242, 237, 233, 0) 32%); }
.panel--cover .panel-copy { color: var(--c-black); }
.panel--cover .panel-cat, .panel--cover .panel-sub { color: rgba(1, 3, 2, 0.62); }
.panel--cover .panel-title { font-size: clamp(2.4rem, 4.6vw, 4.25rem); }
.panel--cover .link-mono { color: var(--c-black); border-color: rgba(1, 3, 2, 0.3); }
.panel--cover .btn-agendar { background: var(--c-black); color: var(--c-offwhite); }
#contato .contact-title { max-width: none; font-size: clamp(2rem, 3.4vw, 3.1rem); } /* uma linha: cabe acima da montanha */
.panel--capa .shot-cap { font-size: clamp(2.4rem, 4.4vw, 4.2rem); max-width: 6em; letter-spacing: -0.035em; line-height: 0.95; } /* abre a seção; cabe no canto livre ao lado do cartão */
.shot-sub { color: var(--ink-muted); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.ig-avatar { object-fit: cover; }
.ig-name { color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-name:hover { text-decoration: underline; }
.ig-stage { z-index: 3; }

/* ============================================================
   Motion design: mosaico na Home (vários de uma vez, pode cortar)
   Unidade de coluna = 27dvh: vertical 2×2 ≈ 9:16, horizontal 3×1 ≈ 16:10
   ============================================================ */
.panel--motion { flex-direction: row; align-items: stretch; background: var(--c-petrol-deep); }
#trabalhos.is-horizontal .panel--motion { width: auto; }
.motion-intro {
  flex: 0 0 auto;
  width: min(36rem, 88vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(3.5rem, 10vh, 6rem);
}
.motion-mosaic {
  --u: 27dvh;
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: var(--u);
  gap: 6px;
  height: 100svh;
  padding-right: 6px;
}
#trabalhos.is-horizontal .motion-mosaic { height: 100%; }
.mt { position: relative; overflow: hidden; display: block; background: #000; color: var(--c-offwhite); }
.mt--v { grid-column: span 2; grid-row: span 2; }
.mt--h { grid-column: span 3; }
.mt--s { grid-column: span 2; }
.mt video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mt:hover video { transform: scale(1.04); }
.mt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 3, 2, 0.7) 0%, rgba(1, 3, 2, 0) 30%); pointer-events: none; }
.mt .mono { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; z-index: 1; font-size: 0.62rem; }
#trabalhos:not(.is-horizontal) .panel--motion { flex-direction: column; }
#trabalhos:not(.is-horizontal) .motion-mosaic { overflow-x: auto; }

/* Página de motions: cada peça inteira, no formato original */
.motion-wall {
  display: block;
  min-height: 0;
  padding: 0 var(--gutter) clamp(4rem, 10vh, 6rem);
  columns: 3 300px;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 1500px;
  margin-inline: auto;
}
.mv { break-inside: avoid; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.mv video { width: 100%; height: auto; border-radius: 4px; background: #000; }
.mv figcaption { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.75rem; }
.mv figcaption .mono { color: var(--ink-muted); }
.motion-intro .panel-title { font-size: clamp(2.6rem, 5vw, 4.75rem); }
/* Motion na Home: uma tela só, 4 peças lado a lado (cortadas), texto por cima */
#trabalhos.is-horizontal .panel--motion { width: 100vw; }
.panel--motion { display: block; }
.panel--motion .motion-mosaic { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-auto-columns: auto; gap: 4px; height: 100%; padding: 0; }
#trabalhos:not(.is-horizontal) .panel--motion .motion-mosaic { height: 100svh; }
.panel--motion .motion-intro { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(40rem, 100%); pointer-events: none; }
.panel--motion .motion-intro a { pointer-events: auto; }
.panel--motion::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(1, 3, 2, 0.88) 0%, rgba(1, 3, 2, 0.35) 34%, rgba(1, 3, 2, 0) 55%); }
.panel--motion .mt .mono { top: clamp(5.5rem, 12vh, 7rem); bottom: auto; }
@media (max-width: 768px) { .panel--motion .motion-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } }