/* ───────── tokens ───────── */
:root{
  --bg:#0a0a0b;
  --bg-2:#101013;
  --ink:#f2efe9;
  --ink-dim:#b4b0a9;
  --ink-soft:#8c8882;
  --line:rgba(242,239,233,.16);
  --accent:#ff4d2e;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --disp:"Anton",Impact,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --gut:clamp(20px,5vw,80px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* o rodapé encosta no pé da tela mesmo quando a página é curta: sem isso ele
   subia e descia conforme a quantidade de imagens do painel aberto */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100svh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > footer{flex:0 0 auto}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────── overlays de textura ───────── */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 48%,rgba(0,0,0,.5) 100%)}

/* ───────── topo ───────── */
.topbar{position:fixed;z-index:55;top:0;left:0;right:0;padding:16px var(--gut);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  font-family:var(--mono);font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  background:linear-gradient(to bottom,rgba(10,10,11,.8),transparent)}
.topbar .brand{font-family:var(--disp);font-size:19px;letter-spacing:.06em}
.topbar nav{display:flex;gap:clamp(12px,2.2vw,30px);flex-wrap:wrap}
.topbar nav a{color:#ddd9d2;transition:color .2s}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:#fff}
.topbar .tc{margin-left:auto;color:var(--ink-soft);font-size:12px}
@media(max-width:700px){.topbar{font-size:11px;gap:12px;padding:14px var(--gut)}
  .topbar .brand{font-size:16px}.topbar .tc{display:none}}

/* ───────── guia lateral ───────── */
.rail{position:fixed;z-index:52;right:calc(var(--gut) / 2.4);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:15px;align-items:flex-end}
.rail-dot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.rail-dot::before{content:attr(data-label);opacity:0;transform:translateX(6px);transition:.25s}
.rail-dot span{width:18px;height:2px;background:var(--line);transition:.25s}
.rail-dot:hover::before,.rail-dot.on::before{opacity:1;transform:none}
.rail-dot:hover span,.rail-dot.on span{background:var(--accent);width:32px}
@media(max-width:1100px){.rail{display:none}}

/* ───────── hero ───────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(24px,4vh,46px);overflow:hidden}
.hero-stage{position:absolute;inset:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-grade{clip-path:inset(0 0 0 var(--wipe,52%))}
.hero-stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,11,.96) 0%,rgba(10,10,11,.5) 30%,transparent 62%,rgba(10,10,11,.4) 100%)}
.hero-wipe{position:absolute;top:0;bottom:0;left:var(--wipe,52%);width:1px;background:rgba(242,239,233,.7);
  box-shadow:0 0 22px rgba(255,255,255,.3)}
.hero-wipe span{position:absolute;top:14%;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:#fff;mix-blend-mode:difference;white-space:nowrap}
.hero-wipe .wl-l{right:14px}
.hero-wipe .wl-r{left:14px}
.hero-type{position:relative;z-index:2}
.kicker{margin:0 0 16px;font-family:var(--mono);font-size:clamp(12px,1.25vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.kicker i{font-style:normal;color:var(--accent);margin:0 4px}
.hero-type h1{display:flex;flex-direction:column;line-height:1}
.hero-type .n1{font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(46px,10.5vw,152px);letter-spacing:-.005em}
.hero-type .n2{font-family:var(--body);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,5.7vw,82px);letter-spacing:.16em;margin-top:.1em;color:#fff;white-space:nowrap}
.hero-line{margin:22px 0 0;max-width:40ch;font-size:clamp(14px,1.25vw,17.5px);line-height:1.5;
  color:#ebe7e0;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-soc{display:flex;gap:20px;margin:22px 0 0;color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.6))}
.hero-soc a{display:flex;color:inherit;opacity:.88;transition:color .2s,opacity .2s}
.hero-soc a:hover{opacity:1;color:var(--accent)}
.reel-btn{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:20px 36px 20px 30px;
  border:1px solid rgba(242,239,233,.5);font-family:var(--mono);font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;backdrop-filter:blur(3px);transition:.22s}
.reel-btn i{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.reel-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero-foot{position:relative;z-index:2;margin-top:clamp(20px,4vh,40px)}
.palette{display:flex;gap:3px}
.palette i{width:46px;height:15px;display:block}

/* ───────── cabeçalho de seção ───────── */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(66px,11vh,130px) var(--gut) clamp(16px,2.4vh,26px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(20px,3vh,34px)}
.sec-head h2,.sec-link{font-family:var(--mono);font-weight:400;text-transform:uppercase;
  font-size:clamp(13px,1.45vw,16.5px);letter-spacing:.2em}
.sec-head h2{color:var(--ink)}
.sec-link{color:var(--ink-dim)}
a.sec-link:hover{color:var(--accent)}
.sec-link--mute{color:var(--ink-soft)}

/* ───────── tiras de projeto (home) ───────── */
.clip{padding-bottom:clamp(18px,2.8vh,30px)}
.rhy{position:relative;padding:18px 0}
.rhy::before,.rhy::after{content:"";position:absolute;left:0;right:0;height:4px;
  background-image:linear-gradient(90deg,rgba(242,239,233,.6) 0 1px,transparent 1px 100%);
  background-size:26px 4px}
.rhy::before{top:0}
.rhy::after{bottom:0}
.clip-meta{display:flex;align-items:baseline;gap:14px;padding:0 var(--gut) 10px}
.clip-meta h3{font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(28px,5.2vw,72px);line-height:1;letter-spacing:-.01em;transition:color .2s}
.clip-meta a:hover h3{color:var(--accent)}
.clip-meta .yr{margin-left:auto;font-family:var(--mono);font-size:clamp(11.5px,1.15vw,14px);
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.strip{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x proximity;padding:0;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.frame{position:relative;flex:0 0 auto;scroll-snap-align:start;cursor:pointer;display:block;
  width:clamp(260px,38vw,620px);aspect-ratio:16/9;overflow:hidden;background:var(--bg-2);border:0;padding:0}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.frame:hover img{transform:scale(1.04)}
.frame::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.25s}
.frame:hover::after{border-color:rgba(242,239,233,.5)}
.frame--more{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  background:none;width:clamp(180px,16vw,260px)}
.frame--more:hover{color:var(--ink);border-color:var(--ink)}

/* ───────── grade de cards ───────── */
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));
  gap:clamp(10px,1.4vw,18px);padding:0 var(--gut)}
.card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.card img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s}
.card:hover img{transform:scale(1.04);filter:brightness(1)}
.card figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;
  align-items:baseline;gap:12px;background:linear-gradient(to top,rgba(8,8,9,.85),transparent)}
.card h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);line-height:1}
.card .meta{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-dim);text-align:right}
/* quando só cabe uma coluna, a grade vira rolagem lateral — empilhar card
   grande um embaixo do outro deixa a seção comprida demais */
@media(max-width:900px){
  .index{display:flex;gap:10px;overflow-x:auto;padding:0 var(--gut) 10px;
    scroll-snap-type:x proximity;scrollbar-width:none}
  .index::-webkit-scrollbar{display:none}
  .index .card{flex:0 0 78vw;scroll-snap-align:center}
}

/* ───────── comparador 709 → grade ───────── */
.ba-rail{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;padding:0 var(--gut) 10px;
  scrollbar-width:none;overflow-anchor:none}
.ba-rail::-webkit-scrollbar{display:none}
.ba-item{flex:0 0 auto;width:clamp(290px,50vw,760px)}
.cmp{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2);
  cursor:ew-resize;touch-action:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .grade{clip-path:inset(0 0 0 var(--p,50%))}
.cmp .bar{position:absolute;top:0;bottom:0;height:auto;left:var(--p,50%);width:1px;background:#fff;opacity:.85}
.cmp .bar::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;
  transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;background:rgba(0,0,0,.2)}
.cmp .lbl{position:absolute;top:10px;z-index:3;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;color:#fff;mix-blend-mode:difference}
.cmp .lbl-l{left:12px}.cmp .lbl-r{right:12px}
.ba-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.ba-cap button{background:none;border:0;padding:0;color:var(--ink-dim);cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit}
.ba-cap button:hover{color:var(--accent)}

/* ───────── sobre ───────── */
.about{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(20px,3.5vw,54px);
  padding:clamp(70px,12vh,150px) var(--gut) clamp(50px,9vh,110px);align-items:end}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.about-portrait{margin:0}
.about-portrait img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 42%}
.about-text h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3.6vw,52px);margin-bottom:18px}
.about-text p{margin:0 0 13px;font-size:15px;line-height:1.65;color:#ded9d2}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:24px 0 0;
  border-top:1px solid var(--line);padding-top:18px}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:3px}
.facts dd{margin:0;font-size:14px}
@media(max-width:720px){.facts{grid-template-columns:1fr}}

/* ───────── contato / rodapé ───────── */
.contact{padding:clamp(60px,10vh,130px) var(--gut) 44px;border-top:1px solid var(--line)}
.contact h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,7.2vw,112px);
  letter-spacing:-.015em;margin-bottom:clamp(26px,4vh,48px)}
.contact--slim{padding-top:clamp(40px,7vh,80px)}
.contact--slim .avail{margin:0 0 clamp(18px,3vh,30px);font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(16px,1.9vw,27px);line-height:1.1}
.slim-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.contact--slim .links{margin:0}
.avail-li{color:var(--ink-soft)}
/* no about a frase já está em cima, do lado do texto: no rodapé seria eco */
body.is-about .contact--slim .avail{display:none}
.mailto{display:inline-block;font-family:var(--mono);font-size:clamp(14px,2.2vw,26px);
  border-bottom:1px solid var(--accent);padding-bottom:4px}
.mailto:hover{color:var(--accent)}
.links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:clamp(26px,4vh,48px) 0 0}
.links a{font-family:var(--mono);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim)}
.links a:hover{color:var(--ink)}
.colophon{margin:36px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}

/* ───────── works: painel dividido ───────── */
.split{display:grid;grid-template-columns:minmax(210px,23%) 1fr;gap:clamp(20px,3vw,50px);
  padding:clamp(100px,16vh,180px) var(--gut) clamp(50px,9vh,110px);align-items:start}
.plista{position:sticky;top:clamp(92px,13vh,130px);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pnome{background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.5vw,40px);line-height:1.04;
  color:#4e4c49;transition:color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.pnome:hover{color:#8d8a85}
.pnome.on{color:var(--ink);transform:translateX(6px)}
.plista .sub{margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.9}
.painel[data-oculto]{display:none}
.painel:not([data-oculto]) + .painel:not([data-oculto]){margin-top:clamp(40px,7vh,90px)}
.painel-topo{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:12px}
.painel-topo h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.4vw,34px);
  letter-spacing:.01em;line-height:1}
.painel-topo .m{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
.painel-topo h2 a{transition:color .2s}
.painel-topo h2 a:hover,.painel-topo .go:hover{color:var(--accent)}
.painel-topo .go{margin-left:auto;font-family:var(--mono);font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.painel-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:start}
.capas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.capa{position:relative;display:block;padding:0;border:0;background:var(--bg-2);cursor:pointer;
  aspect-ratio:16/9;overflow:hidden;text-align:left}
.capa img{width:100%;height:100%;object-fit:cover;filter:brightness(.78);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.capa:hover img{transform:scale(1.04);filter:brightness(1)}
.capa::after{content:"";position:absolute;inset:auto 0 0;height:50%;
  background:linear-gradient(to top,rgba(8,8,9,.82),transparent)}
.c-nome{position:absolute;left:16px;bottom:34px;z-index:2;font-family:var(--disp);text-transform:uppercase;
  font-size:clamp(20px,2vw,30px);line-height:1;color:var(--ink)}
.c-m{position:absolute;left:16px;bottom:13px;z-index:2;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.pnome--todos{font-size:clamp(16px,1.5vw,24px);margin-bottom:6px}
.painel-grade figure{margin:0;aspect-ratio:var(--ar,16/9);overflow:hidden;background:var(--bg-2);cursor:pointer}
.painel-grade img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.painel-grade figure:hover img{transform:scale(1.04)}
@media(min-width:1500px){
  .capas,.painel-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:clamp(24px,5vh,40px)}
  .plista{position:static}
  .pnome{font-size:clamp(22px,6vw,34px)}
  .capas{grid-template-columns:1fr}
}

/* ───────── página de projeto ───────── */
.proj-head{padding:clamp(110px,18vh,200px) var(--gut) clamp(20px,3vh,36px)}
.proj-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(44px,10vw,160px);letter-spacing:-.015em}
.proj-meta{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,64px);margin:clamp(18px,3vh,32px) 0 0;
  border-top:1px solid var(--line);padding-top:16px}
.proj-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:4px}
.proj-meta dd{margin:0;font-size:14px}
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 var(--gut);align-items:start}
@media(max-width:1240px){.plates{grid-template-columns:1fr}}
@media(min-width:2200px){.plates{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plate{position:relative;margin:0;aspect-ratio:var(--ar,16/9);background:var(--bg-2);overflow:hidden;cursor:pointer}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.plate:hover img{transform:scale(1.03)}
.all-work{display:flex;justify-content:center;padding:clamp(46px,7vh,86px) var(--gut)}
.all-work a{font-family:var(--mono);font-size:clamp(15px,1.7vw,19px);letter-spacing:.22em;
  text-transform:uppercase;transition:color .22s}
.all-work a:hover{color:var(--accent)}
.more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);padding:0 var(--gut)}
.more .card{aspect-ratio:21/9}
@media(max-width:720px){.more{grid-template-columns:1fr}}

/* ───────── páginas simples: showreel, about, 404 ───────── */
.page-head{padding:clamp(110px,18vh,200px) var(--gut) clamp(20px,3vh,40px)}
.page-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(44px,10vw,150px);letter-spacing:-.015em}
.page-head .eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.player-wrap{padding:0 var(--gut)}
.player{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer}
.player img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:filter .4s}
.player:hover img{filter:brightness(.9)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:#fff}
.player .play span{display:flex;align-items:center;justify-content:center;width:clamp(68px,7vw,104px);
  aspect-ratio:1;border:1px solid rgba(255,255,255,.7);border-radius:50%;transition:.25s}
.player .play:hover span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.player .play svg{width:34%}
/* o showreel cabe numa tela: o título fica mais contido e o player é limitado
   pela altura que sobra, não pela largura da página — as margens laterais são
   o que sobra dos lados */
body.is-showreel .page-head{padding-top:clamp(96px,12vh,150px);padding-bottom:clamp(16px,2.4vh,30px)}
body.is-showreel .page-head h1{font-size:clamp(34px,5.6vw,92px)}
@media(min-width:901px){
  body.is-showreel main{height:100svh;display:flex;flex-direction:column}
  body.is-showreel .player-wrap{flex:1 1 auto;min-height:0;display:flex;justify-content:center;
    padding-bottom:clamp(26px,5vh,60px)}
  body.is-showreel .player{height:100%;width:auto;max-width:100%}
}
/* a imagem abre a página, encostada no topo, com o nome dentro dela */
.about-hero{position:relative;height:clamp(380px,70svh,820px);overflow:hidden}
.about-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.12)}
.about-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,9,.92),rgba(8,8,9,.25) 46%,rgba(8,8,9,.5))}
.about-hero-type{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(30px,6vh,70px)}
.about-hero-type .eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.about-hero-type h1{font-family:var(--disp);text-transform:uppercase;line-height:.95;
  font-size:clamp(44px,10vw,150px);letter-spacing:-.015em}
.about-page{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(30px,5vw,90px);align-items:start;
  padding:clamp(40px,7vh,86px) var(--gut) clamp(50px,9vh,110px)}
/* a página não tem rodapé: o mesmo bloco de contato da home sobe para o lado
   do texto, à direita. O corpo da frase é medido na coluna (cqw), não na
   página, senão ela não caberia em três linhas */
.about-page .about-side{grid-column:2;grid-row:1 / span 2;container-type:inline-size;
  align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;padding:0;border:0}
/* a frase fica colada em cima e o contato, em baixo */
.about-side h2{font-size:min(11cqw,112px);margin-bottom:auto}
.about-side .mailto{margin-top:clamp(44px,9vh,96px)}
.about-side .links{justify-content:flex-end}
.about-page .txt,.about-page .facts{grid-column:1}
.about-page .txt{max-width:68ch}
.about-page .txt p{margin:0 0 17px;font-size:clamp(15px,1.25vw,17px);line-height:1.68;color:#ded9d2}
.about-page .txt p:first-child{font-size:clamp(19px,1.9vw,27px);line-height:1.42;color:var(--ink);
  margin-bottom:26px;max-width:34ch}
.about-page .facts{align-self:end;max-width:68ch;margin-top:clamp(30px,4vw,52px);
  border-top:0;padding-top:0}
@media(max-width:900px){
  /* numa coluna só: texto, Base e Training, e o contato fechando a página —
     continua alinhado à direita, como na versão larga */
  .about-page{grid-template-columns:1fr}
  .about-page .about-side{grid-column:1;grid-row:auto;order:2;margin-top:clamp(34px,7vh,60px)}
  .about-side h2{font-size:min(13cqw,64px)}
  .about-page .facts{order:1;margin-top:clamp(26px,4vh,40px)}
}
@media(max-width:720px){
  .about-hero{height:clamp(320px,52svh,480px)}
  .about-hero img{object-position:50% 34%;transform:scale(1.2)}
}

/* ───────── overlays ───────── */
.reel,.cmpview,.lb{position:fixed;inset:0;z-index:70;background:rgba(6,6,7,.985);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vh,70px) clamp(24px,7vw,110px)}
.reel[hidden],.cmpview[hidden],.lb[hidden]{display:none}
.reel-frame{width:100%;max-width:1400px;aspect-ratio:16/9}
.reel-frame iframe{width:100%;height:100%;border:0}
/* o comparador expandido usa a mesma tira do lightbox; como todo par é 16:9,
   a fatia nasce da altura do palco para o quadro nunca ser cortado */
.cmpview{flex-direction:column;gap:clamp(14px,2.4vh,26px);padding-inline:0}
.cmp-slide{flex:0 0 min(62vw, calc(var(--sh, 60vh) * 16 / 9))}
.cmp-slide .cmp{width:100%}
.lb-slide:not(.on) .cmp{pointer-events:none}
.ov-close{position:absolute;top:20px;right:24px;background:none;border:0;color:var(--ink);
  font-size:17px;cursor:pointer;z-index:2}
.ov-close:hover{color:var(--accent)}
/* o lightbox mostra as vizinhas espiando nas bordas, como uma tira de
   contato: a do meio em tamanho cheio, as duas dos lados apagadas */
/* sem folga nas laterais: é por ela que as imagens vizinhas aparecem */
.lb{flex-direction:column;gap:clamp(14px,2.4vh,26px);padding-inline:0}
.lb-stage{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden}
.lb-track{display:flex;align-items:center;height:100%;gap:2.2vw;will-change:transform;
  transition:transform .52s cubic-bezier(.22,.75,.2,1)}
.lb-slide{flex:0 0 62vw;height:100%;margin:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transform:scale(.9);filter:brightness(.38);
  transition:transform .52s cubic-bezier(.22,.75,.2,1),filter .52s}
.lb-slide img{width:100%;height:100%;object-fit:contain}
.lb-slide.on{transform:scale(1);filter:none;cursor:default}
.lb-slide:not(.on):hover{filter:brightness(.6)}
.lb-bar{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim)}
.lb-step{background:none;border:0;color:var(--ink);font-size:24px;line-height:1;padding:2px 8px;
  cursor:pointer;opacity:.6}
.lb-step:hover{opacity:1;color:var(--accent)}
.lb-bar .lb-link{margin-left:16px}
.ov-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink);
  font-size:38px;padding:10px 18px;cursor:pointer;opacity:.6;z-index:3}
.ov-nav:hover{opacity:1;color:var(--accent)}
.ov-nav[hidden]{display:none}
.ov-prev{left:6px}.ov-next{right:6px}

/* ───────── revelar ao rolar ───────── */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js [data-rv].in{opacity:1;transform:none}

/* ───────── telas pequenas ───────── */
@media(max-width:720px){
  .hero-wipe span{display:none}
  /* o kicker cabe numa linha só: o corpo acompanha a largura da tela */
  .kicker{white-space:nowrap;font-size:min(2.75vw,13px);letter-spacing:.085em}
  .kicker i{margin:0 3px}
  .frame{width:84vw}
  .strip{padding:0 0 0 16px}
  .ba-item{width:88vw}
  .reel,.cmpview,.lb{padding:16px}
  .lb-slide{flex:0 0 86vw;transform:scale(.94)}
  .lb-track{gap:4vw}
  .clip-meta{flex-wrap:wrap;gap:6px}
  .clip-meta .yr{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none}
  .grain{animation:none}
  html{scroll-behavior:auto}
}