/* di nascimento — v1 · linguagem derivada de warmnfuzzy.tv */

:root{
  --hdh:30px;   /* altura da barra do topo (o contato começa a foto abaixo dela) */
  --ink:#0E0E0E; --paper:#F2F0ED; --mag:#BE3455;
  --bg:var(--ink); --fg:var(--paper); --tint:#ffffffa8; --line:#ffffff24;
  --e:cubic-bezier(.26,1,.48,1);
  --es:cubic-bezier(.5,0,0,1);
  --gut:clamp(16px,2.2vw,30px);
}
[data-theme="ink"]   { --bg:#0E0E0E; --fg:#F2F0ED; --tint:#ffffffa8; --line:#ffffff24 }
[data-theme="home"]  { --bg:#0E0E0E; --fg:#F2F0ED; --tint:#F2F0ED; --line:#f2f0ed59; --box:#0e0e0e14 }   /* 1ª tela: textos brancos de novo (08/out, noite; antes amarelo #F7EB1E); boxes do topo a 8% de preto, só para descolar */
[data-theme="paper"] { --bg:#F2F0ED; --fg:#0E0E0E; --tint:#0e0e0eab; --line:#0e0e0e24 }
[data-theme="magenta"]{ --bg:#BE3455; --fg:#FFF4F6; --tint:#FFF4F6;  --line:#fff4f642 }
[data-theme="rosa"]   { --bg:#E4087E; --fg:#F7EB1E; --tint:#F7EB1E; --line:#f7eb1e57; --sombra:rgba(70,0,28,.34) }   /* contato (07/out): o About invertido */
[data-theme="amarelo"]{ --bg:#F7EB1E; --fg:#E4087E; --tint:#E4087E;  --line:#e4087e42; --sombra:rgba(96,58,0,.30); --box:#f7eb1ed9 }   /* barra a 85% amarela: legível sobre o colete (08/out) */   /* About desde 07/out (antes magenta) */

/* voz de destaque (07/out): Switzer Black, servida daqui (fonts/; ITF Free Font License, Fontshare).
   títulos do About e do rodapé; a linha da home usa os mesmos desenhos em vetor */
@font-face{ font-family:'Switzer'; src:url('fonts/switzer-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap }
@font-face{ font-family:'Switzer'; src:url('fonts/switzer-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap }
.stmt__h, .ft__h{ font-family:'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif; font-weight:900; letter-spacing:-.035em; word-spacing:.08em; line-height:.9 }

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scrollbar-color:#3a3a3a #0E0E0E; caret-color:var(--mag); scroll-behavior:smooth }
body{
  background:#0E0E0E; color:#F2F0ED;
  font-family:Poppins,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(15px,.3vw + 13.8px,17px); line-height:1.5; letter-spacing:-.016em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:var(--mag); color:#FFF4F6 }
:focus-visible{ outline:2px solid #F2F0ED; outline-offset:3px; box-shadow:0 0 0 5px #0e0e0ecc }
[data-theme="paper"] :focus-visible{ outline-color:#0E0E0E; box-shadow:0 0 0 5px #f2f0edcc }
[data-theme="rosa"] :focus-visible{ outline-color:#F7EB1E; box-shadow:0 0 0 5px #e4087ecc }
[data-theme="amarelo"] :focus-visible{ outline-color:#E4087E; box-shadow:0 0 0 5px #f7eb1ecc }
::-webkit-scrollbar{ width:11px } ::-webkit-scrollbar-track{ background:#0E0E0E }
::-webkit-scrollbar-thumb{ background:#333; border:3px solid #0E0E0E; border-radius:99px }
a{ color:inherit }
.skip{ position:fixed; top:10px; left:10px; z-index:99; padding:10px 16px; background:#F2F0ED; color:#0E0E0E; text-decoration:none; transform:translateY(-200%); transition:transform .3s var(--e) }
.skip:focus{ transform:none }

section,footer{ background:var(--bg); color:var(--fg); transition:background-color .6s var(--es), color .6s var(--es) }

/* ── cursor: mão tatuada sobre o hero, disco play/pause dentro do teatro ── */
.cursor{
  position:fixed; top:0; left:0; z-index:100; pointer-events:none;
  transform:translate3d(-100px,-100px,0); opacity:0;
  transition:opacity .3s var(--e);
}
.cursor.on{ opacity:1 }
.cursor.off{ opacity:0 }
/* a ponta do indicador (53,6% da largura, no topo da imagem) fica exatamente sob o mouse.
   a mão gira em volta dela: perspectiva pela posição na tela, balanço pela velocidade (script.js). */
.cursor__mao{
  --tx:37px; --ty:1px;
  display:block; width:69px; height:132px;
  transform:translate(calc(-1 * var(--tx)), calc(-1 * var(--ty))) scale(.765);
  transform-origin:var(--tx) var(--ty);
  perspective:520px; perspective-origin:var(--tx) var(--ty);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.42));
  transition:transform .45s var(--e);
}
.cursor.on .cursor__mao{ transform:translate(calc(-1 * var(--tx)), calc(-1 * var(--ty))) scale(.85) }  /* mão 15% menor (06/out) */
/* as duas mãos ficam no mesmo ponto; cada uma num invólucro sem transformação, que o script recorta na borda de cima
   do About: a do play aparece acima da borda (sobre o hero), a do keep scrolling abaixo dela (sobre o amarelo) */
.cursor__vis{ position:absolute; top:0; left:0; display:block }
.cursor__mao--ks{ --tx:28.7px; --ty:1.1px; width:61.3px; height:132px }   /* ponta do médio (o dedo mais alto) sob o mouse */
/* o gesto em quadros reais (09/out): 9 quadros gerados da própria mão (os dois dedos dobrando para baixo, como no
   trackpad), costas, tatuagem e punho idênticos em todos (../keep-scrolling/E/sprite/). um arrasto a cada 1,6 s:
   desce em 0,5 s, segura, volta em 0,25 s e descansa; a mão acompanha 3 px no arrasto */
.ks__sprite{ position:absolute; inset:0; display:block; background:url(media/ks-sprite.webp?v=1009hd) 0 0 / 900% 100% no-repeat }
.cursor .ks__sprite, .ks .ks__sprite{ animation:ks-sprite 1.6s step-end infinite }
.cursor:not(.on) .ks__sprite, .ks:not(.on) .ks__sprite{ animation-play-state:paused }
@keyframes ks-sprite{
  0%      { background-position:0 0 }
  6.062%  { background-position:12.5% 0 }
  10.688% { background-position:25% 0 }
  14.188% { background-position:37.5% 0 }
  17.25%  { background-position:50% 0 }
  20.25%  { background-position:62.5% 0 }
  23.312% { background-position:75% 0 }
  26.812% { background-position:87.5% 0 }
  31.438% { background-position:100% 0 }
  42.5%   { background-position:87.5% 0 }
  46.375% { background-position:62.5% 0 }
  50.312% { background-position:37.5% 0 }
  54.25%  { background-position:12.5% 0 }
  58.125%, 100% { background-position:0 0 }
}
.cursor .ks__puxa, .ks .ks__rig{ animation:ks-puxa-s 1.6s infinite }
@keyframes ks-puxa-s{
  0%           { transform:translateY(0);   animation-timing-function:cubic-bezier(.45,0,.55,1) }
  37.5%, 42.5% { transform:translateY(3px); animation-timing-function:cubic-bezier(.3,0,.2,1) }
  58.12%, 100% { transform:translateY(0) }
}
/* movimento reduzido: mesmos seletores das regras acima (a media query não soma força) */
@media (prefers-reduced-motion:reduce){
  .cursor .ks__sprite, .ks .ks__sprite{ animation:none; background-position:0 0 }
  .cursor .ks__puxa, .ks .ks__rig{ animation:none; transform:none }
}
  46%, 52%  { transform:translateY(var(--desce)); animation-timing-function:cubic-bezier(.4,0,.2,1) }
  76%, 100% { transform:translateY(0) }
}
.cursor__vis[data-mao="ks"]{ clip-path:inset(100%) }   /* até o script medir: escondida */
/* thumbs up (09/out): a última mão. a ponta do polegar fica sob o mouse; entra com um pulo quando o contato aparece
   (.cursor.fim, script.js) e dá um joinha a cada 1,8 s, girando no punho */
.cursor__mao--ok{ --tx:24.1px; --ty:1px; width:108px; height:82.3px }   /* a mão deitada (09/out, Di): o braço sai para a direita; a área da mão do keep scrolling */
.cursor__vis[data-mao="ok"]{ display:none }
.cursor.fim .cursor__vis[data-mao="ks"]{ display:none }
.cursor.fim .cursor__vis[data-mao="ok"]{ display:block; animation:ok-entra .5s cubic-bezier(.3,1.5,.5,1) both }
@keyframes ok-entra{ from{ opacity:0; transform:scale(.5) rotate(-14deg) } to{ opacity:1; transform:none } }
.ok__pula{ position:relative; display:block; width:100%; height:100%; transform-origin:72% 66%; animation:ok-pula 1.8s infinite }   /* gira no punho */
.ok__pula img{ position:absolute; inset:0; display:block; width:100%; height:100% }
@keyframes ok-pula{
  0%, 40%, 100% { transform:translateY(0) rotate(0);             animation-timing-function:cubic-bezier(.3,0,.2,1) }
  10%           { transform:translateY(-5px) rotate(-7deg);     animation-timing-function:cubic-bezier(.5,0,.6,1) }
  20%           { transform:translateY(0) rotate(1.5deg);       animation-timing-function:cubic-bezier(.3,0,.2,1) }
  28%           { transform:translateY(-2px) rotate(-3deg);     animation-timing-function:cubic-bezier(.5,0,.6,1) }
}
.cursor:not(.on) .ok__pula, .okh:not(.on) .ok__pula{ animation-play-state:paused }
.okh{ position:fixed; left:50%; margin-left:calc(-.656 * clamp(56px, 6.4vw, 94px)); bottom:calc(var(--ok-b, var(--gut)) + env(safe-area-inset-bottom, 0px)); z-index:90;
  height:clamp(56px, 6.4vw, 94px); aspect-ratio:732 / 558; pointer-events:none;
  opacity:0; transform:translate3d(0, 16px, 0); transition:opacity .45s var(--e), transform .7s var(--e);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)) }
.okh.on{ opacity:1; transform:none }
body.theater .okh{ display:none }
@media (hover:hover) and (pointer:fine){ .okh{ display:none } }
@media (prefers-reduced-motion:reduce){
  .ok__pula{ animation:none }
  .cursor.fim .cursor__vis[data-mao="ok"]{ animation:none }
  .okh{ transition:opacity .3s linear; transform:none }
}
.ks__puxa{ position:relative; display:block; width:100%; height:100%; will-change:transform }
.cursor:not(.on) .ks__puxa, .ks:not(.on) .ks__rig{ animation-play-state:paused }
/* sobre o About o cursor do sistema some (a mão é o cursor), só onde há mouse de verdade */
@media (hover:hover) and (pointer:fine){ .stmt, .stmt *, .ft, .ft *{ cursor:none } }   /* 09/out: o contato também (a mão vai até o fim) */
.cursor__rig{ position:relative; display:block; width:100%; height:100%; transform-origin:var(--tx) var(--ty); will-change:transform }
.cursor__rig img{ position:absolute; inset:0; display:block; width:100%; height:100% }
/* tap: o indicador é uma camada à parte e gira só na junta da base (nó do dedo, 40,7% × 40,4%),
   inclinando para dentro da tela como um clique, sem dobrar as outras falanges. */
.cursor__dedo{ --pd:260px; transform-origin:40.7% 40.4%; animation:tap 1.9s infinite }
@keyframes tap{
  0%, 60%, 100% { transform:perspective(var(--pd)) rotateX(0);      animation-timing-function:cubic-bezier(.55,0,.8,.3) }
  67%           { transform:perspective(var(--pd)) rotateX(24deg);  animation-timing-function:cubic-bezier(.2,.7,.3,1) }
  76%           { transform:perspective(var(--pd)) rotateX(-2.5deg); animation-timing-function:ease-out }
  83%           { transform:perspective(var(--pd)) rotateX(0) }
}
.cursor__d{
  display:none; place-items:center;
  width:66px; height:66px; border-radius:50%;
  background:#F2F0ED; color:#0E0E0E;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .4s var(--e);
}
.cursor__d svg{ width:24px; height:24px; fill:currentColor; stroke:none }
body.theater .cursor__mao{ display:none }
body.theater .cursor__d{ display:grid }
.cursor[data-state="playing"] .cursor__play{ display:none }
.cursor[data-state="paused"]  .cursor__pause{ display:none }
.cursor.beat .cursor__d{ transform:translate(-50%,-50%) scale(.84) }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }

/* ── cabeçalho: logo à esquerda | about · résumé · contact à direita ──
   nada de mix-blend-mode: sobre o reel ele some em frames de cinza médio
   (o take dos fones é fundo branco). a cor vem do tema da seção de baixo.
   o logo é o logo_topo_site_b.ai vetorizado (Poppins Regular + SemiBold); proporção 14,067:1.
   tipografia do site: Poppins — SemiBold (600) no que é display, Regular (400) no texto corrido. */
.hd{
  --lh:clamp(15.3px,1.3175vw,19.55px);   /* logo e links 15% menores (06/out); altura da barra não muda */
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:stretch; justify-content:space-between;
  height:clamp(30px,2.3vw,34.5px); padding:0 0 0 var(--gut);   /* mais baixa, menos respiro (07/out) */
  border-bottom:1px solid var(--line);
  color:var(--fg);
  transition:color .55s var(--es), opacity .35s var(--e);
}
.hd::before{
  /* box do topo: cor a 20% (--box: rosa na 1ª tela, preto no resto), fechado por uma linha
     embaixo da mesma espessura e cor dos fios entre About, Résumé e Contact */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--box,#0e0e0e33); transition:background-color .55s var(--es);
}
.hd__mark{ flex:none; display:flex; align-items:center; text-decoration:none; color:inherit }
.hd__crop{ display:block; overflow:hidden; line-height:0 }
.hd__logo{ display:block; height:var(--lh); width:auto }
.hd__nav{ display:flex; align-items:stretch }
.hd__nav a{
  display:flex; align-items:center;
  padding:1px clamp(14px,1.55vw,26px) 0;   /* 1px em cima: assenta na linha de base do logo */
  border-left:1px solid var(--line);
  /* menu proporcional ao logo: 62% da altura dele (as maiúsculas ficam ~87% da altura-x de "di nascimento") */
  font-size:calc(var(--lh) * .62); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; text-decoration-thickness:1px;
  transition:text-decoration-color .35s var(--e);
}
.hd__nav a:last-child{ padding-right:var(--gut) }
.hd__nav a:hover{ text-decoration-color:currentColor }
/* o link ocupa a altura toda do topo: anel por dentro, senão a borda da tela corta */
.hd__nav a:focus-visible{ outline-offset:-4px; box-shadow:none }
/* tela estreita: o logo mostra só "di nascimento" (termina em 43,2% da largura; a barra em 46,5%) */
@media (max-width:640px){
  :root{ --hdh:27.5px }
  .hd{ --lh:14.875px; height:27.5px }
  .hd__crop{ width:calc(var(--lh) * 14.067 * .448) }
  .hd__nav a{ padding:2px 9px 0; letter-spacing:.06em }
  .hd__nav a:last-child{ padding-right:var(--gut) }
}
@media (max-width:360px){
  .hd{ --lh:12.75px }
  .hd__nav a{ padding:1px 6px 0; letter-spacing:.03em }
}

/* ── hero ── */
/* hero fixo, altura de tela cheia; o vídeo é a maior caixa 16:9 que cabe, centrada.
   as seções seguintes rolam por cima.  --h: min(100vw / 1.778, 100svh)  */
.hero{
  position:sticky; top:0; z-index:0;
  height:100svh; padding:0;
  display:grid; place-items:center; overflow:hidden;
}
/* o preview preenche a tela e corta o que sobrar — é assim na referência.
   quem aparece na proporção certa, com as barras, é o reel depois do play. */
.hero__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden; cursor:none; background:#000;
}
.hero__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.hero__media:focus-visible{ outline-offset:-5px }
.hero__veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#0e0e0e5c 0%,#0e0e0e00 26%,#0e0e0e00 52%,#0e0e0ecc 100%) }
/* tudo que vem depois do hero passa por cima dele */
main > section:not(.hero){ position:relative; z-index:1 }
footer.ft{ position:relative; z-index:1 }
/* a linha de baixo (08/out, 4ª — opção B escolhida pelo Di): cinco campos sobre um fio de ponta a ponta, como os
   capítulos de um player, estático (o fio não anda com o vídeo). cada campo tem o número (Poppins, voz dos links do
   topo) sobre a frase (Switzer Black) e um tique que sobe do fio; os campos ocupam a largura com folgas iguais.
   o fio fica a uma margem (--gut) da borda de baixo, a mesma das laterais */
.hero__h1{
  position:absolute; left:var(--gut); right:var(--gut); bottom:var(--gut); z-index:2; pointer-events:none;
  margin:0; display:flex; justify-content:space-between; align-items:stretch; --rcg:.7em;   /* todos os tiques da mesma altura */
  font:900 min(clamp(14px,1.65vw,30px),3.6svh)/.92 'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.03em; word-spacing:.08em; text-transform:uppercase; color:var(--fg);
}
.rc__ch{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:.62em; padding:0 .6em var(--rcg) .5em; border-left:1px solid var(--line) }   /* tique com o mesmo traço do fio (08/out) */
.rc__ch:last-of-type{ padding-right:0 }
.rc__n{ font:400 .53em/1 Poppins,"Helvetica Neue",Arial,sans-serif; letter-spacing:.14em }
.rc__t{ white-space:nowrap }
.rc__rail{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line) }
/* celular: a faixa 16:9 é estreita; as frases longas quebram em duas linhas */
@media (max-width:760px){
  .hero__h1{ font-size:clamp(10.5px,2.95vw,14px); --rcg:.62em }
  .rc__ch{ gap:.5em; padding:0 .3em var(--rcg) .45em }
  .rc__t{ line-height:.95 }
  .rc__t > span:not(.vh){ display:block; white-space:nowrap }
  .rc__n{ font-size:max(8px,.62em) }
}
/* ── keep scrolling (08/out): a mão esquerda tatuada (irmã do cursor), dois dedos rolando o trackpad para baixo ──
   com mouse ela é o cursor sobre o About (ver .cursor__vis); em tela de toque aparece no centro de baixo quando a
   rolagem fica parada no meio do caminho (script.js) e some ao rolar.
   duas camadas como o cursor: base + dedos, que dobram na linha dos nós (58,32% × 40,57%); duas passadas a cada 2,2 s */
.ks{
  position:fixed; left:50%; margin-left:calc(-.2323 * clamp(84px, 8.4vw, 124px)); bottom:calc(var(--ks-b, var(--gut)) + env(safe-area-inset-bottom, 0px)); z-index:90;
  height:clamp(84px, 8.4vw, 124px); aspect-ratio:985 / 2120; pointer-events:none;
  opacity:0; transform:translate3d(0, 16px, 0); transition:opacity .45s var(--e), transform .7s var(--e);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.34));
}
.ks.on{ opacity:1; transform:none }
.ks__rig{ position:relative; width:100%; height:100%; will-change:transform }
.ks__rig img{ position:absolute; inset:0; display:block; width:100%; height:100% }
@media (prefers-reduced-motion:reduce){ .ks{ transition:opacity .3s linear; transform:none } }
body.theater .ks{ display:none }
@media (hover:hover) and (pointer:fine){ .ks{ display:none } }   /* com mouse, a mão é o cursor (sobre o About); o aviso fixo é só para toque */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }
/* em tela estreita o 16:9 vira uma faixa baixa: a linha fica no pé dela, com a mesma folga */
@media (max-width:760px){
  .hero{ position:relative; height:auto; padding:0; place-items:stretch }
  .hero__media{ position:relative; inset:auto; width:100%; height:auto; aspect-ratio:16/9 }
  .hero__veil{ background:linear-gradient(180deg,#0e0e0e4d 0%,#0e0e0e00 34%,#0e0e0e00 48%,#0e0e0ed6 100%) }
}
/* ── celular em pé (09/out, Di: "verticalizar a home, o About e os prêmios"): versão vertical ──
   o hero é a tela inteira (100svh, sob a barra do topo) com o loop vertical próprio (media/loop2-m.*, 608x1080: a janela
   9:16 anda por plano para o assunto ficar no quadro; ../mobile/pipeline/). os cinco campos viram uma lista numerada no
   pé, à esquerda, com os fios do --line entre as linhas, sobre um degradê escuro. a mesma media query está no script do
   vídeo (index.html) e no script.js (vert) */
@media (max-width:600px) and (max-aspect-ratio:4/5){
  .hero{ position:relative; height:100vh; height:100svh; padding:0; display:block }
  .hero__media{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto }
  .hero__veil{ background:linear-gradient(180deg,#0e0e0e66 0%,#0e0e0e00 15%,#0e0e0e00 38%,#0e0e0e8c 56%,#0e0e0ed9 74%,#0e0e0ef2 100%) }
  .hero__h1{ left:max(var(--gut), env(safe-area-inset-left, 0px)); right:max(var(--gut), env(safe-area-inset-right, 0px));
    bottom:calc(var(--gut) + env(safe-area-inset-bottom, 0px)); display:block; font-size:clamp(22px,6.6vw,28px); line-height:1.1;
    text-align:left; white-space:nowrap }
  /* (09/out, Di: "um bloco só de texto embaixo, meio que corrido ... em três linhas, ajustado à esquerda"): sem números
     e sem fios; GLOBAL PRODUCT LAUNCH / MOTION · CGI · FILM / AI & EMERGING TECH */
  .rc__rail, .rc__n{ display:none }
  .rc__ch{ display:inline; padding:0; border:0 }
  .rc__t, .rc__t > span:not(.vh){ display:inline; white-space:nowrap; line-height:inherit }
  .rc__ch:nth-child(1)::after, .rc__ch:nth-child(4)::after{ content:"\A"; white-space:pre }
  .rc__ch:nth-child(3)::before, .rc__ch:nth-child(4)::before{ content:"\00b7\00a0"; opacity:.6 }   /* o espaço antes já vem do HTML */
}

/* ── About (08/out): o braço esticado; com a rolagem ele anda para a esquerda, segura o colete fechado e abre: AWARDS ──
   base (sem JS, ou tela baixa demais para a sequência): tudo em fluxo — o quadro 16:9 do braço, o texto e os prêmios.
   com JS (.stmt--seq) a seção ganha 3,6 telas e a caixa .stmt__pin fica parada enquanto o script troca os quadros 16:9
   (fundo no amarelo exato da página, então a imagem emenda na seção). --cp tira o texto do About; --ap revela os prêmios. */
.stmt{ position:relative }
.stmt__pin{ position:relative }
.stmt__seq{ position:relative; margin:var(--hdh) 0 0; aspect-ratio:16 / 9;
  -webkit-mask-image:linear-gradient(#000 82%, transparent); mask-image:linear-gradient(#000 82%, transparent) }   /* o pé do quadro dissolve no amarelo */
.stmt__f{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 0; visibility:hidden }
.stmt__f.on{ visibility:visible }
/* texto do About (09/out, opção 3 do Di): título em duas linhas ("Me?" abre a segunda) e quatro colunas da agência ao
   estúdio, com o Dig deeper no fim; sem faixa de números (o time e os programas foram para a coluna da agência).
   base = celular, tela em pé e fluxo: cada coluna vira uma linha (rótulo numa coluna estreita à esquerda, texto à
   direita, fio em cima, como os prêmios). desktop (bloco mais abaixo): grade de 12 da margem até antes do colete.
   rosa sobre amarelo dá ~3,6:1, então o texto pequeno fica em 600 e o corrido não desce de 14px */
.stmt__copy{ position:relative; z-index:1; padding:clamp(20px,4svh,40px) var(--gut) 0;
  --cg:clamp(20px,2.4vw,48px); --g1:clamp(14px,2.2svh,22px) }
.stmt__h{ margin:0 0 var(--g1); font-size:calc(min(clamp(30px,5.6vw,80px),7svh) * 1.04); text-transform:uppercase }
.stmt__h > span{ display:block; text-wrap:balance }
/* a coluna do rótulo tem a largura do maior rótulo (subgrid): os textos começam todos no mesmo x */
.stmt__cv{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:clamp(14px,4vw,24px) }
.stmt__cv li{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; padding:9px 0 11px; border-top:1px solid var(--line) }
.stmt__cv li:last-child{ border-bottom:1px solid var(--line) }
.cv__k{ margin:0; padding-top:.3em; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.3 }
.cv__k > span{ display:block }
.cv__k > .cv__s{ display:none }
.cv__t{ margin:0; font-size:14.5px; line-height:1.45; text-wrap:pretty }
.cv__c{ display:none }   /* versão resumida de cada experiência: só no celular em pé (09/out, Di) */
.stmt__copy > .pill{ display:flex; width:fit-content; margin-top:var(--g1) }
/* prêmios: tipografia, sem selos (são licenciados a quem inscreve). o número é o que se lê primeiro */
.stmt__aw{ position:relative; z-index:1; padding:clamp(40px,8svh,96px) var(--gut) }
.aw__h{ margin:0 0 clamp(14px,2.4svh,32px); max-width:16ch; font:900 calc(min(clamp(30px,5.6vw,80px),7svh) * .84)/.9 'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.035em; word-spacing:.08em; text-transform:uppercase; text-wrap:balance }   /* 80% do título do About (08/out) */
.aw__l{ margin:0; padding:0; list-style:none }
.aw__l li{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:1fr auto auto 1fr;
  column-gap:clamp(12px,1.1vw,20px); padding:clamp(5px,1.1svh,12px) 0; border-top:1px solid var(--line) }
.aw__l li:last-child{ border-bottom:1px solid var(--line) }
/* o nome e o país formam um grupo só, de entrelinha curta, centrado na altura do número; os anos à direita (08/out) */
.aw__l b{ grid-column:1; grid-row:1 / 5; align-self:center; font:900 clamp(40px,min(4.6vw,9svh),84px)/.82 'Switzer',Poppins,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.aw__l span{ grid-column:2; grid-row:2; font-size:clamp(15px,1.15vw,22px); font-weight:600; line-height:1.05 }
.aw__l i{ grid-column:2; grid-row:3; font-style:normal; font-size:clamp(12px,.6vw,16px); letter-spacing:.14em; text-transform:uppercase; line-height:1.1; margin-top:.2em }
.aw__l em{ grid-column:3; grid-row:1 / 5; align-self:center; justify-self:end; text-align:right; font-style:normal;
  font-size:clamp(12px,.68vw,16px); letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap }

/* quantos prêmios em cada ano (09/out, pedido do Di: a soma tem que fechar com o número grande). conta em cima,
   ano embaixo, alinhados à direita; números do MASTER_FACTS / Mapa_Premios_x_Cargos (itens 01–21, sem a duplicata 09) */
.aw__l em.aw__anos{ display:flex; gap:clamp(9px,.9vw,16px); justify-content:flex-end; white-space:nowrap; letter-spacing:.04em }
.aw__anos time{ display:flex; flex-direction:column; align-items:center; gap:.18em; font-size:clamp(10px,.56vw,13px); line-height:1 }
.aw__anos small:not(.vh){ font-size:1.55em; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums }
/* sequência (com JS): caixa fixa de uma tela; o texto sai (--cp) e os prêmios entram (--ap) por cima do quadro */
.stmt--seq{ height:420vh; height:420svh }   /* 3,2 telas de curso: duas paradas (texto e prêmios) + a sequência */
/* ímã leve nas paradas (o script liga html.ima com a sequência ativa): o texto montado (topo) e os prêmios (top em px pelo script) */
.stmt__ima{ display:none }
.stmt--seq .stmt__ima{ display:block; position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; scroll-snap-align:start }
html.ima{ scroll-snap-type:y proximity }
.stmt--seq.stmt--reduz{ height:220vh; height:220svh }
.stmt--seq .stmt__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip }
.stmt--seq .stmt__seq{ position:absolute; margin:0; will-change:transform }
.stmt--seq .stmt__copy{ position:absolute; padding:0; left:var(--gut); right:var(--gut);
  opacity:calc(1 - var(--cp,0)); transform:translate3d(calc(var(--cp,0) * -1 * var(--gut)),0,0) }
.stmt--seq .stmt__aw{ position:absolute; padding:0; left:var(--gut); right:var(--gut);
  opacity:var(--ap,0); transform:translate3d(0,calc((1 - var(--ap,0)) * 3svh),0) }
.stmt--seq .stmt__copy.fora, .stmt--seq .stmt__aw.fora{ pointer-events:none }
/* celular e tablet em pé: o quadro 16:9 no topo, sob a barra, com o pé dissolvendo no amarelo; texto e prêmios embaixo */
.stmt--seq .stmt__seq{ top:var(--hdh); left:0; right:0; aspect-ratio:16 / 9 }
.stmt--seq .stmt__copy, .stmt--seq .stmt__aw{ top:calc(var(--hdh) + 56.25vw + clamp(16px,3svh,36px)) }
/* celular (09/out): o texto novo é mais alto que a janela sob o quadro; ele corre dentro dela com a rolagem, 1:1 como a
   página (script.js: .stmt--rola, --cy), e some num degradê curto logo abaixo do quadro. 6px de folga dos lados para o
   anel de foco do Dig deeper não ser cortado */
.stmt--seq.stmt--rola .stmt__copy{ top:calc(var(--hdh) + 56.25vw + clamp(16px,3svh,36px) - 18px); bottom:0;
  left:calc(var(--gut) - 6px); right:calc(var(--gut) - 6px); padding:18px 6px 0; overflow:hidden; overflow:clip;
  -webkit-mask-image:linear-gradient(transparent, #000 18px); mask-image:linear-gradient(transparent, #000 18px) }
.stmt--seq.stmt--rola .stmt__copy > *{ transform:translate3d(0,var(--cy,0px),0) }
/* desktop (largo e alto o bastante): o quadro cobre a seção. a caixa tem a largura inteira do "cover" (16:9 da altura,
   ou a tela) e é centrada, então a imagem não é cortada dentro dela e a entrada da direita não fatia o braço.
   o corpo termina a ~70% da imagem: os prêmios ficam na faixa à direita dele */
@media (min-width:761px) and (min-aspect-ratio:13/10) and (min-height:600px){
  .stmt--seq .stmt__seq{ top:0; bottom:0; right:auto; left:50%; width:max(100vw, 177.78svh); margin-left:calc(max(100vw, 177.78svh) / -2);
    aspect-ratio:auto; -webkit-mask-image:none; mask-image:none }
  /* o texto fica NO MEIO do vão entre o braço e o pé da tela (09/out, Di: "deixa no meio, exatamente no meio"), com o
     mesmo respiro em cima e embaixo. o ponto mais baixo do braço no a0 está a 36% da altura da imagem (medido no a0@3:
     ombro 0,360, cotovelo 0,35, punho 0,28–0,30; a caixa usa 0,33 — a média visual com o punho, 09/out: "sobe só um pouquinho") e a imagem é "cover" com o topo na borda: max(100svh, 56,25vw) de
     altura. a caixa vai dessa linha até o pé da tela e centra o bloco (align-content); a margem negativa do título
     desconta o vão entre o topo da linha e o topo das maiúsculas (Switzer, entrelinha .9), então o respiro de cima é
     medido na letra, e o de baixo na borda do Dig deeper (o pé do bloco).
     o a0 não muda até o texto sair (SAI_TXT) e o respiro do punho só desloca na horizontal, então o braço nunca desce
     sobre o texto. se o bloco não couber com 12px de cada lado, script.js liga .stmt--aperto (e, se nem assim, fluxo).
     na largura vai da margem até antes do colete: na parada a imagem começa no respiro do punho (script.js, resp:
     2% da tela entre 14 e 36px) e o colete começa a 82,5% dela (medido no a0); folga de ~3vw até ele */
  .stmt--seq .stmt__copy{ top:calc(.33 * max(100svh, 56.25vw)); bottom:0; align-content:center; align-content:safe center;
    right:max(var(--gut), calc(100% - clamp(14px,2vw,36px) - .825 * max(100vw, 177.78svh) + clamp(28px,3.2vw,60px))) }
  .stmt--seq .stmt__h{ margin-top:-.11em }   /* topo das maiúsculas a .11em do topo da linha (medido em 1280–1920) */
  /* movimento reduzido: a imagem fica centrada (sem o respiro), então o colete começa em 50% + 32,5% dela */
  .stmt--seq.stmt--reduz .stmt__copy{ right:max(var(--gut), calc(50% - .325 * max(100vw, 177.78svh) + clamp(28px,3.2vw,60px))) }
  /* prêmios: a mão no colete fica a ~71% da imagem; no fim o corpo desliza 10vw para a esquerda (script.js, DESL) e o texto
     começa 3,5vw depois da mão: .5vw + .711L - 10vw + 3,5vw - .5L  =  .211L + 43,5vw  (L = largura do "cover") */
  .stmt--seq .stmt__aw{ top:var(--hdh); bottom:0; left:calc(.211 * max(100vw, 177.78svh) + 43.5vw); display:flex; flex-direction:column; justify-content:safe center }
}
/* texto do About no desktop (em fluxo ou na sequência): dois andares no meio do vão sob o braço, numa grade de 12 com o
   mesmo respiro (--cg). 1) o título, no tamanho de sempre, mas limitado pela largura do bloco (cqi) para cada frase
   caber numa linha; 2) as quatro colunas (3 + 3 + 3 + 3; a lista tem 4 trilhas com o mesmo respiro, a mesma
   geometria), fio em cima de cada uma. o Dig deeper fecha o bloco no canto de baixo à direita (colunas 10–12), no pé
   da coluna mais longa, no vão sob o texto do estúdio (o mais curto): a coluna do estúdio reserva embaixo a altura do
   botão (--ph) + um respiro, então o botão nunca encosta no texto dela. tamanhos e respiros também pela altura (svh),
   para caber entre o braço e o pé da tela de 1280×720 a 1920×1080 */
@media (min-width:761px) and (min-aspect-ratio:13/10){
  .stmt__copy{ container-type:inline-size; --g1:min(clamp(16px,2vw,36px),3svh); --ph:48px;
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cg) }
  .stmt__h{ grid-column:1 / -1; font-size:min(calc(min(clamp(30px,5.6vw,80px),7svh) * 1.04), 4.8cqi) }
  .stmt__cv{ grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--cg) }
  .stmt__cv li{ grid-column:auto; display:block; padding:min(clamp(10px,.9vw,16px),1.5svh) 0 0 }
  .stmt__cv li:last-child{ border-bottom:0; padding-bottom:calc(var(--ph) + clamp(12px,1.6svh,22px)) }
  .cv__k{ padding:0; font-size:clamp(12px,.45vw + 6px,13px); line-height:1.2; white-space:nowrap }
  .cv__k > span, .cv__k > .cv__s{ display:inline }
  /* quebra comum (não "pretty"): no Chrome o pretty encurta as 4 últimas linhas e abria um dente na coluna da marca;
     a última palavra não fica sozinha porque "launches included" vem com espaço inquebrável no HTML */
  .cv__t{ margin-top:min(.6em,1svh); max-width:34ch; font-size:clamp(15px,min(.95vw,1.7svh),17px); line-height:1.45; text-wrap:wrap }   /* 15px no mínimo: rosa sobre amarelo pede corpo (09/out) */
  .stmt__copy > .pill{ grid-column:10 / -1; grid-row:2; justify-self:end; align-self:end; margin:0 }
  /* versão apertada (script.js liga .stmt--aperto quando o bloco não cabe no vão entre o braço e o pé da tela com 12px de cada lado:
     telas largas e baixas, como 1920×700 de navegador): respiros e título menores, entrelinha um pouco mais curta */
  .stmt--aperto .stmt__copy{ --g1:min(12px,1.7svh) }
  .stmt--aperto .stmt__cv li:last-child{ padding-bottom:calc(var(--ph) + 10px) }
  .stmt--aperto .stmt__h{ font-size:min(calc(min(clamp(30px,5.6vw,80px),5.8svh) * 1.04), 4.8cqi) }
  .stmt--aperto .stmt__cv li{ padding-top:min(9px,1.3svh) }
  .stmt--aperto .cv__t{ margin-top:5px; line-height:1.38 }
}
/* About e prêmios no celular em pé (09/out): em fluxo, sem tela fixa e sem nada passando por baixo de imagem.
   1) caixa 4:5 da largura da tela com os quadros a0→a26 (a figura de sempre): o script troca o quadro conforme ela passa
   pela tela e anda a janela com o corpo (--ox, de data-m45 = seq.json "m45"; a imagem 16:9 em "cover" mostra 45% da
   largura); no a0 a janela mostra a tatuagem do antebraço inteira. 2) título, as quatro linhas e o Dig deeper. 3) a 2ª
   caixa 4:5 (.stmt__aws, a27→a35: o colete abre), na tatuagem do peito. 4) os prêmios. sem JS: a0 e a35 parados */
.stmt__aws{ display:none }
@media (max-width:600px) and (max-aspect-ratio:4/5){
  .stmt__seq, .stmt__aws{ position:relative; margin:0; aspect-ratio:4 / 5; overflow:hidden; overflow:clip;
    -webkit-mask-image:linear-gradient(#000 86%, transparent); mask-image:linear-gradient(#000 86%, transparent) }   /* o pé do quadro (tronco cortado) dissolve no amarelo; o texto vem depois, nunca por baixo */
  .stmt__seq .stmt__f{ object-position:var(--ox, 31.8%) 0 }
  /* (09/out, Di: "o braço ... bem pertinho do texto ... caber numa tela só") a caixa do About é uma faixa baixa só no
     braço do a0: do punho (x 0) até 62% do quadro (a tatuagem inteira, sem o colete, que começa em 83%) e do topo até 39%
     da altura (o braço vai de 2,6% a 36%). a imagem tem 161,3% da largura da caixa; sem degradê no pé. o script a faz
     entrar da direita para a esquerda com a rolagem, ao sair da home */
  .stmt__seq{ aspect-ratio:2.83; -webkit-mask-image:none; mask-image:none }
  .stmt{ overflow-x:hidden; overflow-x:clip }   /* a faixa entrando pela direita não abre rolagem lateral */
  .stmt__seq .stmt__f{ inset:auto; left:0; top:0; width:161.3%; height:auto; aspect-ratio:16 / 9; object-fit:fill }
  .cv__l{ display:none }
  .cv__c{ display:inline }
  .stmt__aws{ display:block; margin-top:clamp(44px,8svh,72px) }
  .stmt__aws .stmt__f{ object-position:var(--ox, 35.5%) 0 }
  .stmt__copy{ padding-top:clamp(4px,1svh,10px) }
  .cv__t{ font-size:15px }
  .stmt__aw{ padding:clamp(20px,3.4svh,32px) var(--gut) clamp(64px,12svh,104px) }
}
.pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:99px; border:1px solid currentColor; text-decoration:none; font-size:13px; letter-spacing:.14em; text-transform:uppercase; transition:gap .45s var(--e),background-color .45s var(--e),color .45s var(--e) }
.pill svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.pill:hover{ gap:16px; background:var(--fg); color:var(--bg) }

/* ── work ── */
.wk{ padding:clamp(72px,11vw,160px) var(--gut) }
.wk__h{ margin:0 0 clamp(50px,7vw,110px); max-width:19ch; font-size:clamp(28px,5.2vw,74px); font-weight:600; line-height:1.02; letter-spacing:-.042em; text-transform:uppercase; text-wrap:balance }
.wk__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:clamp(26px,3vw,42px) }
.wk__bar h3{ margin:0; font-size:clamp(20px,2vw,30px); font-weight:600; letter-spacing:-.035em }
.wk__bar span{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--tint) }
.wk__grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(26px,3vw,46px) clamp(16px,2vw,30px); grid-template-columns:1fr }
@media (min-width:660px){ .wk__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1040px){ .wk__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.wk__i figure{ margin:0 0 15px; overflow:hidden; background:#000; aspect-ratio:16/9 }
.wk__i img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .7s var(--e), filter .6s var(--e); filter:saturate(.96) }
.wk__i:hover img{ transform:scale(1.055); filter:saturate(1.06) }
.wk__i h4{ margin:0 0 5px; font-size:clamp(16px,1.25vw,19px); font-weight:600; letter-spacing:-.028em; line-height:1.2 }
.wk__i p{ margin:0; font-size:14px; line-height:1.5; color:var(--tint); max-width:40ch }
.wk__i span{ display:block; margin-top:7px; font-size:11px; letter-spacing:.18em; color:var(--tint); font-variant-numeric:tabular-nums }

/* ── sobre ── */
.ab{ padding:clamp(72px,11vw,160px) var(--gut) }
.ab__h{ margin:0 0 clamp(36px,5vw,70px); font-size:clamp(30px,5.6vw,80px); font-weight:600; line-height:1.0; letter-spacing:-.042em }
.ab__cols{ display:grid; gap:clamp(26px,4vw,58px) }
@media (min-width:880px){ .ab__cols{ grid-template-columns:minmax(0,290px) minmax(0,1fr); align-items:start } }
.ab__fig{ margin:0 } .ab__fig img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.05) }
.ab__txt p{ margin:0 0 17px; max-width:66ch; font-size:clamp(15px,1vw,17px); line-height:1.64; color:var(--tint) }
.ab__txt p:last-child{ margin-bottom:0 }
.ab__aw{ padding-top:17px; border-top:1px solid var(--line) }

/* ── serviços ── */
.sv{ padding:0 var(--gut) clamp(72px,11vw,160px) }
.sv__h{ margin:0 0 clamp(26px,3vw,40px); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--tint); font-weight:400 }
.sv__list{ list-style:none; margin:0 0 clamp(34px,4vw,54px); padding:0; display:grid; gap:0; border-top:1px solid var(--line) }
@media (min-width:720px){ .sv__list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,4vw,70px) } }
.sv__list li{ padding:clamp(13px,1.5vw,20px) 0; border-bottom:1px solid var(--line); font-size:clamp(19px,2.3vw,34px); font-weight:600; letter-spacing:-.035em; transition:transform .5s var(--e),color .5s var(--e) }
.sv__list li:hover{ transform:translateX(12px) }
.sv__note{ margin:0; max-width:64ch; font-size:14px; line-height:1.6; color:var(--tint) }

/* ── rodapé ── */
.ft{ position:relative; min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr);
  padding:0 var(--gut) clamp(24px,4svh,52px); overflow:hidden; overflow:clip }
/* contato em tela cheia (07/out): a perna à esquerda com o corte de cima rente à borda da seção, texto à direita */
/* a foto já vem com fundo #E4087E e as sombras das botas (gerada no lugar do verde), então emenda sem recorte.
   o corte de cima dela (jeans e mão) é o corte da própria seção: o topo da foto encosta na borda */
.ft__perna{ box-sizing:border-box; margin:0 calc(-1 * var(--gut)); height:min(46svh, 100vw);
  display:flex; justify-content:center; line-height:0 }
.ft__rig{ position:relative; height:100%; aspect-ratio:1856 / 2304; flex:none }
.ft__base{ display:block; height:100%; width:100%; max-width:none }
/* a calça subindo: só a região que muda (mão, calça, canela) por cima da foto final; o script troca data-q */
.ft__q{ position:absolute; height:auto; max-width:none; visibility:hidden }
.ft__rig[data-q="0"] .ft__q[data-k="0"],
.ft__rig[data-q="1"] .ft__q[data-k="1"],
.ft__rig[data-q="2"] .ft__q[data-k="2"],
.ft__rig[data-q="3"] .ft__q[data-k="3"],
.ft__rig[data-q="4"] .ft__q[data-k="4"],
.ft__rig[data-q="5"] .ft__q[data-k="5"],
.ft__rig[data-q="6"] .ft__q[data-k="6"],
.ft__rig[data-q="7"] .ft__q[data-k="7"],
.ft__rig[data-q="8"] .ft__q[data-k="8"],
.ft__rig[data-q="9"] .ft__q[data-k="9"],
.ft__rig[data-q="10"] .ft__q[data-k="10"],
.ft__rig[data-q="11"] .ft__q[data-k="11"],
.ft__rig[data-q="12"] .ft__q[data-k="12"],
.ft__rig[data-q="13"] .ft__q[data-k="13"],
.ft__rig[data-q="14"] .ft__q[data-k="14"],
.ft__rig[data-q="15"] .ft__q[data-k="15"],
.ft__rig[data-q="16"] .ft__q[data-k="16"],
.ft__rig[data-q="17"] .ft__q[data-k="17"],
.ft__rig[data-q="18"] .ft__q[data-k="18"]{ visibility:visible }
.ft__txt{ display:flex; flex-direction:column; padding-top:clamp(20px,4svh,40px) }
@media (min-width:761px) and (min-aspect-ratio:13/10){   /* lado a lado só quando a foto consegue ocupar a altura */
  /* o topo da foto (corte do jeans e da mão) é a borda da seção; ela entra 4,5vw para a direita e o resto dela é o
     mesmo rosa. TAMANHO INEGOCIÁVEL (09/out, Di): a perna tem a altura da página (104%, a bota chega ao pé) em qualquer
     proporção de tela; antes, em 16:10, um teto de 57vw a deixava menor. o teto agora é 66vw (só morde em telas quase
     quadradas). a coluna do texto começa depois do conteúdo da foto: a roda da moto termina a 76,5% da altura dela */
  .ft{ grid-template-columns:max(calc(50% - 1.75vw), calc(4.5vw + .765 * min(104svh, 66vw) + clamp(52px,5vw,100px))) minmax(0,1fr); column-gap:0; padding:0 var(--gut) 0 0 }
  .ft__perna{ position:absolute; top:0; left:4.5vw; z-index:0; margin:0; height:min(104vh, 66vw); height:min(104svh, 66vw); justify-content:flex-start }
  .ft__txt{ grid-column:2; position:relative; z-index:1; padding:calc(var(--hdh) + clamp(24px,5svh,72px)) 0 clamp(24px,4svh,52px) }
  .ft__txt > .ft__h{ margin-top:auto }
  /* 09/out (Di): mais respiro entre a moto da foto e o bloco; a linha do versículo vai até a borda direita (cortada) */
  .ft .ft__vs{ margin-right:calc(-1 * var(--gut)); padding-right:var(--gut) }   /* .ft na frente: o margin do .ft__vs mais abaixo zeraria a direita */
}
.ft__h{ margin:0 0 clamp(20px,2.6vw,34px); font-size:calc(clamp(28px,5.4vw,76px) * 1.04); text-transform:uppercase }
/* contatos (09/out): lista com marcador pendurado, e-mail, LinkedIn e Vimeo no mesmo corpo (o do e-mail de antes; o script
   reduz se a coluna for estreita); o título tem a largura do e-mail; a localização numa linha, menor */
.ft__h > span{ display:inline-block; white-space:nowrap }
.ft__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.18em; font-size:clamp(19px,3vw,40px); font-weight:600; letter-spacing:-.038em; line-height:1.15 }
.ft__lista li{ position:relative; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap }
.ft__lista a{ text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:transparent; text-underline-offset:.16em; transition:text-decoration-color .45s var(--e) }
.ft__lista a:hover{ text-decoration-color:currentColor }
.ft__loc{ margin:clamp(16px,2svh,26px) 0 0; font-size:13px; font-weight:600; line-height:1.4; color:var(--tint); white-space:nowrap }
.ft__loc.quebra{ white-space:normal }
.ft__vs{ margin:auto 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:15px; font-weight:600; line-height:1.5; color:var(--tint) }
.ft__loc{ margin-bottom:clamp(32px,5vw,72px) }
.ft__vsq{ margin:0 }
.ft__vsq p{ display:inline; margin:0 }
.ft__vsq cite{ font-style:normal; white-space:nowrap }
.ft__vsq cite::before{ content:"— " }
/* LinkedIn e Vimeo (09/out, opção D): ícones na linha do versículo, à direita */
.ft__vs{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(20px,3vw,56px); align-items:start }
.ft__soc{ display:flex; gap:14px; margin:0; padding-top:2px }
.ft__soc a{ display:block; line-height:0; transition:transform .35s var(--e) }
.ft__soc a:hover{ transform:translateY(-3px) }
.ft__soc .ic{ width:34px; height:34px; fill:currentColor }
.ft__copy{ background:none; border:0; padding:0; color:inherit; font:inherit; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:text-decoration-color .35s var(--e) }
.ft__copy:hover{ text-decoration-color:currentColor }

/* ── modo teatro: overlay próprio, com o reel completo e som ── */
.th{
  position:fixed; inset:0; z-index:90;
  background:#000; display:grid; place-items:center;
  cursor:none; animation:teatro .45s var(--e);
}
.th[hidden]{ display:none }
@keyframes teatro{ from{ opacity:0 } to{ opacity:1 } }
.th video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#000 }
/* (09/out, Di) presa nas quatro bordas: na grade, com a tela mais larga que 16:9 (celular deitado, 21:9) a altura do vídeo
   seguia a largura e passava da tela (cortava em cima e embaixo); assim o reel cabe inteiro, com faixas pretas nas laterais */
.th:fullscreen{ width:100%; height:100%; background:#000 }
.th:-webkit-full-screen{ width:100%; height:100%; background:#000 }
body.theater{ overflow:hidden }
body.theater .hd{ opacity:0; pointer-events:none }
.hd{ transition:opacity .35s var(--e), background-color .55s var(--es), color .55s var(--es), border-color .55s var(--es) }

.pl{ position:absolute; inset:0; z-index:3; pointer-events:none; transition:opacity .4s var(--e) }
.pl[data-idle="1"]{ opacity:0 }
.pl button{
  position:absolute; display:grid; place-items:center; pointer-events:auto;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:#0e0e0eb3; color:#F2F0ED; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .35s var(--e), transform .35s var(--e);
}
.pl[data-idle="1"] button{ pointer-events:none }
.pl button:hover{ background:#0e0e0ee0; transform:scale(1.06) }
.pl button svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px #000000b3) }
.pl__x{ top:clamp(14px,1.8vw,26px); right:clamp(14px,1.8vw,26px) }
.pl__v{ bottom:clamp(14px,1.8vw,26px); right:clamp(14px,1.8vw,26px) }
.pl__v .pl__off{ display:none } .pl__v[data-muted="1"] .pl__on{ display:none } .pl__v[data-muted="1"] .pl__off{ display:block }
.pl__t{
  position:absolute; bottom:clamp(14px,1.8vw,26px); left:clamp(14px,1.8vw,26px);
  font-size:12px; letter-spacing:.16em; color:#F2F0ED; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 14px #000000a6;
}
.pl__t[data-load="1"]{ animation:pulsa 1.6s var(--es) infinite }
@keyframes pulsa{ 0%,100%{ opacity:.42 } 50%{ opacity:1 } }
/* play/pause central: só para quem não tem o cursor-disco.
   seletor duplo porque ".pl button" acima tem especificidade maior. */
.pl .pl__c{ display:grid; opacity:0; pointer-events:none; top:50%; left:50%; width:68px; height:68px;
  transform:translate(-50%,-50%); background:#f2f0ede6; color:#0E0E0E }
.pl .pl__c:focus-visible{ opacity:1; pointer-events:auto }
.pl .pl__c:hover{ background:#F2F0ED; transform:translate(-50%,-50%) scale(1.06) }
.pl .pl__c svg{ width:26px; height:26px; fill:currentColor; stroke:none }
.pl .pl__c[data-state="playing"] .pl__pl{ display:none }
.pl .pl__c[data-state="paused"]  .pl__pa{ display:none }
@media (hover:none),(pointer:coarse){ .th{ cursor:auto } .pl .pl__c{ opacity:1; pointer-events:auto } }
/* tela de toque (09/out, Di: "na hora que dá o play, precisa sair o botão de play do meio ... e abrir um playerzinho de
   rolagem embaixo"): o play do centro só pausado; embaixo, sobre um degradê, play/pausa pequeno, tempo, a barra de progresso
   (arrasta para ir a outro ponto) e o som. tudo some com a ociosidade (data-idle) e volta no toque */
.pl__p, .pl__r{ display:none }
@media (hover:none),(pointer:coarse){
  .pl .pl__c[data-state="playing"]{ opacity:0; pointer-events:none }
  .pl::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:-1;
    background:linear-gradient(transparent, #000000a6); pointer-events:none }
  .pl .pl__p{ display:grid; left:max(12px, env(safe-area-inset-left, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); width:44px; height:44px }
  .pl .pl__p svg{ width:20px; height:20px; fill:currentColor; stroke:none }
  .pl .pl__p[data-state="playing"] .pl__pl{ display:none }
  .pl .pl__p[data-state="paused"]  .pl__pa{ display:none }
  .pl__t{ left:calc(max(12px, env(safe-area-inset-left, 0px)) + 52px); bottom:calc(12px + 15px + env(safe-area-inset-bottom, 0px)); letter-spacing:.1em }
  .pl__v{ right:max(12px, env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)) }
  .pl__r{ display:block; position:absolute; pointer-events:auto; margin:0;
    left:calc(max(12px, env(safe-area-inset-left, 0px)) + 106px); right:calc(max(12px, env(safe-area-inset-right, 0px)) + 56px);
    bottom:calc(12px + 8px + env(safe-area-inset-bottom, 0px)); height:28px; accent-color:#F2F0ED; background:transparent }
  .pl[data-idle="1"] .pl__r{ pointer-events:none }
}
@media (prefers-reduced-motion:reduce){ .pl .pl__c{ opacity:1; pointer-events:auto } }

/* ── movimento ── */
[data-rv]{ opacity:0; transform:translate3d(0,24px,0) }
[data-rv].in{ opacity:1; transform:none; transition:opacity .9s var(--es) var(--d,0s), transform 1s var(--e) var(--d,0s) }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
  [data-rv]{ opacity:1!important; transform:none!important }
  .cursor{ display:none }
  /* sem o cursor desenhado, devolve o do sistema (antes ficava sem cursor nenhum) */
  .hero__media{ cursor:pointer } .th{ cursor:auto }
}

/* ── composição do painel em qualquer tela de desktop ──
   referência: a página a 660px de largura (topo, mão e box de baixo como ficaram lá).
   acima de 760px, essas peças crescem junto com a largura: --u = 1px da referência.
   o crescimento para em 1920px para não virar gigante em monitor ultrawide. */
@media (min-width:761px){
  :root{ --u:calc(min(100vw, 1920px) / 660) }
  /* topo 30% menor que a referência do painel (40 → 28, logo 18 → 12,6, espaçamentos idem) */
  :root{ --hdh:max(26px, calc(16.8 * var(--u))) }
  .hd{ --lh:max(13px, calc(8.57 * var(--u))); height:var(--hdh) }   /* topo inteiro 20% menor: barra, logo e links (08/out) */
  .hd__nav a{ padding:calc(.56 * var(--u)) calc(7.84 * var(--u)) 0 }
  .hd__nav a:last-child{ padding-right:var(--gut) }
  .cursor__mao{
    --tx:calc(37 * var(--u)); --ty:calc(1 * var(--u));
    width:calc(69 * var(--u)); height:calc(132 * var(--u));
    perspective:calc(520 * var(--u));
    filter:drop-shadow(0 calc(16 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.42));
  }
  /* cada mão na proporção dela (09/out): sem isto a do keep scrolling esticava 13% na largura e a do joinha ficava em pé */
  .cursor__mao--ks{ --tx:calc(28.7 * var(--u)); --ty:calc(1.1 * var(--u)); width:calc(61.3 * var(--u)) }
  .cursor__mao--ok{ --tx:calc(24.1 * var(--u)); --ty:calc(1 * var(--u)); width:calc(108 * var(--u)); height:calc(82.3 * var(--u)) }
  .cursor__dedo{ --pd:calc(260 * var(--u)) }
}

/* ── play no toque (09/out, Di: "quando a pessoa der o tap ... um ícone fixo de play showreel ... com transparência no
   centro"): só em tela de toque, onde não existe a mão do cursor. disco de vidro fosco com o play e o rótulo embaixo,
   com um pulso leve; o toque passa para o vídeo (pointer-events:none), que já abre o reel com som ── */
.hero__tap{ display:none }
@media (hover:none),(pointer:coarse){
  .hero__tap{ position:absolute; left:50%; top:50%; z-index:2; display:grid; justify-items:center; gap:12px;
    transform:translate(-50%,-50%); pointer-events:none; color:#F2F0ED }
  .hero__tap-d{ display:grid; place-items:center; width:76px; height:76px; border-radius:50%;
    background:rgba(242,240,237,.16); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
    box-shadow:inset 0 0 0 1px rgba(242,240,237,.4); animation:tap-pulso 2.4s ease-out infinite }
  .hero__tap-d svg{ width:30px; height:30px; margin-left:3px; fill:currentColor }
  .hero__tap-t{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.55) }
  @keyframes tap-pulso{
    0%      { box-shadow:inset 0 0 0 1px rgba(242,240,237,.4), 0 0 0 0 rgba(242,240,237,.32) }
    70%,100%{ box-shadow:inset 0 0 0 1px rgba(242,240,237,.4), 0 0 0 20px rgba(242,240,237,0) }
  }
}
@media (prefers-reduced-motion:reduce){ .hero__tap-d{ animation:none } }
body.theater .hero__tap{ display:none }