/* criō V5 — base V4 (escura) com header, serviços e estúdio da V3 */
@font-face { font-family:'PP Neue Montreal'; src:url(assets/fonts/ppneuemontreal-book.otf) format('opentype'); font-weight:300 400; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url(assets/fonts/ppneuemontreal-medium.otf) format('opentype'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url(assets/fonts/ppneuemontreal-italic.otf) format('opentype'); font-style:italic; font-weight:300 900; font-display:swap; }
@font-face { font-family:'Retro Signature'; src:url(assets/fonts/RetroSignature.otf) format('opentype'); font-display:swap; }
:root { --bg:#0a0a0a; --fg:#f6f5f0; --lime:#e5fb00; --mute:#7d7c77; --line:#2a2a28; --card:#151514;
  --disp:'Anton', Impact, sans-serif; --lab:'Space Grotesk', sans-serif; --txt:'PP Neue Montreal', Helvetica, sans-serif; --pad:clamp(16px, 3.4vw, 56px); }
* { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:clip; background:var(--bg); }
body { background:var(--bg); color:var(--fg); font:400 17px/1.5 var(--txt); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:var(--lime); color:var(--bg); }
.lab { font:500 12px/1.3 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.mute { color:var(--mute); }
.lime { color:var(--lime); }
.hl { background:var(--lime); color:var(--bg); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.out { -webkit-text-stroke:1.5px currentColor; color:transparent; }
.sig { font-family:'Retro Signature', cursive; font-weight:400; text-transform:none; }
.tbd { font-style:normal; outline:1.5px dashed #555; outline-offset:2px; color:var(--mute); padding:0 4px; }
.wrap { padding:0 var(--pad); }

/* carregamento */
.load { position:fixed; inset:0; z-index:200; background:var(--lime); color:var(--bg); display:flex; flex-direction:column; justify-content:space-between; padding:24px var(--pad); transition:transform .9s cubic-bezier(.8,0,.2,1); }
.load.go { transform:translateY(-100%); }
.load .n { font:400 clamp(110px, 26vw, 420px)/.8 var(--disp); }
html.loading { overflow:hidden; }

/* menu */
.nav { position:fixed; inset:0 0 auto; z-index:60; display:flex; align-items:center; gap:28px; padding:18px var(--pad); transition:background .3s, transform .4s; }
.nav.solid { background:rgba(10,10,10,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.nav.hide { transform:translateY(-100%); }
.nav .logo img { height:24px; width:auto; }
.nav .links { display:flex; gap:22px; margin-left:auto; }
.nav .links a { font:500 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.nav .links a { position:relative; }
.nav .links a::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:6px; background:var(--lime); transform:scaleX(0); transform-origin:left; transition:transform .3s; z-index:-1; }
.nav .links a:hover::after { transform:scaleX(1); }
.pill { display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; background:var(--fg); color:var(--bg); padding:13px 18px; border-radius:99px; transition:background .25s, color .25s; }
.pill i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 1px rgba(10,10,10,.25); }
.pill:hover { background:var(--lime); } .pill:hover i { background:var(--bg); }
@media (max-width:760px) { .nav .links { display:none; } .nav .pill { margin-left:auto; padding:11px 14px; } }
.btn { display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; background:var(--lime); color:var(--bg); padding:15px 20px; border-radius:99px; transition:background .25s, color .25s; will-change:transform; }
.btn:hover { background:var(--fg); }
.btn.ghost { background:none; color:var(--fg); box-shadow:inset 0 0 0 1.5px var(--fg); }
.btn.ghost:hover { background:var(--fg); color:var(--bg); }

/* capa: lanterna */
.top-h { padding:5vh var(--pad) 0; }
.top-h .top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.top-h .top .bc { height:26px; width:auto; margin-bottom:8px; filter:invert(1); }
.top-h h1 { font:400 clamp(52px, 10.4vw, 196px)/.98 var(--disp); text-transform:uppercase; letter-spacing:-.005em; margin:3.5vh 0 3vh; }
.top-h h1 span { display:block; overflow:hidden; padding:.26em 0 .08em; margin:-.26em 0 -.08em; white-space:nowrap; }
.top-h h1 span:first-child { position:relative; z-index:1; }
.top-h h1 span b { display:inline-block; font-weight:400; transform:translateY(140%); animation:up 1s 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.top-h h1 span:nth-child(2) b { animation-delay:1.52s; }
.top-h h1 .hl { --hw:0%; color:var(--bg); background:linear-gradient(transparent 22%, var(--lime) 22%, var(--lime) 90%, transparent 90%) no-repeat 0 0 / var(--hw, 100%) 100%; padding:0 .05em; animation:hl .9s 2.3s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes up { to { transform:none; } }
@keyframes hl { to { --hw:100%; } }
@property --hw { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@media (max-width:760px) { .top-h h1 { font-size:11.8vw; margin:5vh 0 4vh; } }
@media (prefers-reduced-motion:reduce) { .top-h h1 span b { transform:none; } .top-h h1 .hl { --hw:100%; } }
.hero { position:relative; height:max(60svh, 420px); margin:76px var(--pad) 0; border-radius:18px; overflow:hidden; cursor:none; }
.hero::after { content:""; position:absolute; inset:0; border:1px solid var(--line); border-radius:inherit; pointer-events:none; z-index:3; }
.hero .under { position:absolute; inset:-4%; display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; transform:rotate(-4deg) scale(1.08); }
.hero .under img { width:100%; aspect-ratio:1; object-fit:cover; }
.hero .over { position:absolute; inset:0; background:var(--bg); -webkit-mask:radial-gradient(circle var(--r, 170px) at var(--mx, 50%) var(--my, 50%), transparent 96%, #000 100%); mask:radial-gradient(circle var(--r, 170px) at var(--mx, 50%) var(--my, 50%), transparent 96%, #000 100%); }
.hero .ring { position:absolute; left:var(--mx, 50%); top:var(--my, 50%); width:calc(var(--r, 170px) * 2); height:calc(var(--r, 170px) * 2); border:2px solid var(--lime); border-radius:50%; transform:translate(-50%, -50%); pointer-events:none; }
.hero .hint { position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:2; color:var(--mute); }
@media (max-width:760px) { .hero .under { grid-template-columns:repeat(4, 1fr); } }

/* faixa de manifesto */
.mani { padding:22vh var(--pad); display:grid; grid-template-columns:1fr 2fr; gap:40px; }
.mani p { font:500 clamp(28px, 3.6vw, 60px)/1.08 var(--txt); letter-spacing:-.03em; }
.mani p em { font-style:normal; color:var(--lime); }
.mani .vals { display:flex; flex-direction:column; gap:12px; }
.mani .vals b { font:400 clamp(28px, 3vw, 48px)/1 var(--disp); text-transform:uppercase; }
.mani .vals b:nth-child(3) { color:var(--lime); }
@media (max-width:860px) { .mani { grid-template-columns:1fr; } }

/* cabeçalho de seção */
.sh { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:0 var(--pad) 22px; border-bottom:1px solid var(--line); margin:0 0 0; }

/* trabalhos: nomes gigantes, KV no fundo */
.works { position:relative; padding:18vh 0 10vh; overflow:clip; }
.works .bgs { position:sticky; top:0; height:100svh; margin-bottom:-100svh; overflow:hidden; pointer-events:none; }
.works .bgs img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.works .bgs img.on { opacity:.62; transform:none; }
.works .bgs::after { content:''; position:absolute; inset:0; background:radial-gradient(transparent 30%, rgba(10,10,10,.7)); }
.works ol { list-style:none; position:relative; }
.works li a { display:grid; grid-template-columns:70px 1fr minmax(0, 340px); gap:20px; align-items:center; padding:2.4vh var(--pad); border-bottom:1px solid var(--line); transition:opacity .4s; }
.works li .i { font:500 12px var(--lab); letter-spacing:.08em; }
.works li h3 { font:400 clamp(30px, 5.2vw, 100px)/1 var(--disp); text-transform:uppercase; transition:color .3s, -webkit-text-stroke .3s; }
.works li .meta { display:grid; gap:6px; opacity:0; transform:translateX(-14px); transition:.45s; }
.works li .meta i { font:italic 400 19px/1.25 var(--txt); }
.works li .meta span { font:500 11px/1.5 var(--lab); letter-spacing:.08em; text-transform:uppercase; color:#cfcec8; }
.works li .meta .go { color:var(--lime); }
.works ol.act li a { opacity:.28; }
.works ol.act li.on a { opacity:1; }
.works li.on h3 { color:var(--lime); }
.works li.on .meta { opacity:1; transform:none; }
.works .foot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:34px var(--pad) 0; position:relative; }
.link { font:500 15px var(--txt); border-bottom:1.5px solid; padding-bottom:2px; }
.link:hover { color:var(--lime); }
@media (max-width:760px) { .works li a { grid-template-columns:1fr; gap:6px; } .works li .meta { opacity:1; transform:none; } .works li .i { display:none; } }

/* serviços: três palavras grandes (v3) */
.sec-h { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:0 var(--pad); margin-bottom:28px; }
.sec-h h2 { font:400 clamp(44px, 7vw, 120px)/1 var(--disp); text-transform:uppercase; }
.svc { padding:24vh 0 0; }
.svc .row { border-top:1.5px solid var(--fg); position:relative; overflow:hidden; cursor:default; transition:color .35s; }
.svc .row:last-of-type { border-bottom:1.5px solid var(--fg); }
.svc .row::before { content:''; position:absolute; inset:0; background:var(--lime); transform:scaleY(0); transform-origin:bottom; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.svc .row:hover, .svc .row.open { color:var(--bg); }
.svc .row:hover::before, .svc .row.open::before { transform:none; }
.svc .rin { position:relative; display:grid; grid-template-columns:70px 1fr 1fr; gap:24px; align-items:center; padding:2vh var(--pad); }
.svc .n { font:500 12px var(--lab); letter-spacing:.08em; }
.svc h3 { font:500 clamp(54px, 9.35vw, 170px)/.95 var(--txt); letter-spacing:-.06em; }
.svc .det { display:grid; gap:12px; opacity:0; transform:translateY(10px); transition:.4s; }
.svc .row:hover .det, .svc .row.open .det { opacity:1; transform:none; }
.svc .det p { font-size:clamp(17px, 1.4vw, 21px); line-height:1.35; max-width:36ch; }
.svc .det ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.svc .det li { font:500 12px/1 var(--lab); letter-spacing:.04em; padding:7px 11px; border:1.2px solid currentColor; border-radius:99px; }
.svc .also { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:22px var(--pad) 0; }
.svc .also b { font:500 30px/1 var(--txt); letter-spacing:-.04em; margin-right:6px; }
.svc .also span { font:500 13px var(--lab); color:var(--mute); }
@media (hover:none), (max-width:860px) { .svc .det { opacity:1; transform:none; } .svc .rin { grid-template-columns:1fr; gap:10px; padding:3vh var(--pad); } .svc .row::before { display:none; } .svc .row.open { color:inherit; } }
/* processo: número fixo que troca */
.proc { padding:22vh 0 0; }
.proc .grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 90px); padding:0 var(--pad); }
.proc .pin { position:sticky; top:12vh; height:76vh; display:flex; flex-direction:column; justify-content:space-between; }
.proc .big { font:400 clamp(110px, min(20vw, 30vh), 360px)/.8 var(--disp); -webkit-text-stroke:2px var(--lime); color:transparent; position:relative; height:.8em; overflow:hidden; }
.proc .big span { display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.proc .pin img { border-radius:14px; width:100%; max-height:calc(76vh - min(20vw, 30vh) - 24px); aspect-ratio:16/10; object-fit:cover; }
.proc .intro h2 { font:400 clamp(44px, 6vw, 104px)/1 var(--disp); text-transform:uppercase; margin:16px 0 18px; }
.proc .intro p { color:#c6c5bf; max-width:42ch; }
.proc .st { min-height:62vh; display:flex; flex-direction:column; justify-content:center; gap:14px; opacity:.25; transition:opacity .5s; }
.proc .st.on { opacity:1; }
.proc .st h3 { font:500 clamp(34px, 3.6vw, 60px)/1 var(--txt); letter-spacing:-.05em; }
.proc .st p { font-size:clamp(17px, 1.4vw, 21px); line-height:1.5; color:#d6d5cf; max-width:40ch; }
@media (max-width:860px) { .proc .grid { grid-template-columns:1fr; } .proc .pin { position:sticky; top:64px; height:auto; z-index:2; background:var(--bg); padding:8px 0; flex-direction:row; align-items:center; gap:16px; } .proc .big { font-size:100px; } .proc .pin img { width:min(46vw, 220px); max-height:none; } .proc .st { min-height:46vh; } }


/* parede de sites em perspectiva */
.wall { position:relative; height:120vh; overflow:hidden; margin-top:16vh; }
.wall .persp { position:absolute; inset:-30% -10%; perspective:1400px; }
.wall .cols { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; transform:rotateX(28deg) rotateZ(-14deg); transform-style:preserve-3d; height:100%; }
.wall .col { display:flex; flex-direction:column; gap:22px; animation:rise 60s linear infinite; }
.wall .col:nth-child(even) { animation-direction:reverse; animation-duration:75s; }
.wall .col a { display:block; border-radius:10px; overflow:hidden; background:#fff; aspect-ratio:3/4; }
.wall .col img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s; }
.wall .col a:hover img { transform:scale(1.04); }
@keyframes rise { to { transform:translateY(-50%); } }
.wall .shade { position:absolute; inset:0; background:linear-gradient(var(--bg), transparent 26%, transparent 60%, var(--bg)); pointer-events:none; }
.wall .txt { position:absolute; left:var(--pad); right:var(--pad); bottom:8vh; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; pointer-events:none; }
.wall .txt > * { pointer-events:auto; }
.wall h2 { font:400 clamp(54px, 9vw, 170px)/.98 var(--disp); text-transform:uppercase; }
.wall .names { display:flex; flex-wrap:wrap; gap:6px; max-width:520px; justify-content:flex-end; }
.wall .names a { font:500 12px/1 var(--lab); letter-spacing:.06em; text-transform:uppercase; padding:9px 12px; border-radius:99px; background:rgba(10,10,10,.75); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid #3a3a37; }
.wall .names a:hover { background:var(--lime); color:var(--bg); }
@media (prefers-reduced-motion:reduce) { .wall .col { animation:none; } }

/* estúdio */
.studio { display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px, 5vw, 90px); padding:24vh var(--pad) 0; align-items:start; }
.studio .phw { position:sticky; top:90px; }
.studio .ph { position:relative; border-radius:14px; overflow:hidden; }
.studio .ph img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .6s; }
.studio .phw:hover img { filter:none; }
.studio h2 { font:400 clamp(56px, 8vw, 150px)/.98 var(--disp); text-transform:uppercase; margin:14px 0 14px; }
.studio .role { font:500 12px/1.6 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.studio .lead { font:500 clamp(22px, 2vw, 32px)/1.25 var(--txt); letter-spacing:-.02em; margin:30px 0 34px; max-width:28ch; }
.studio dl div { display:grid; grid-template-columns:180px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.studio dt { font:500 12px/1.7 var(--lab); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.studio dd { color:#d6d5cf; }
.studio .quote { margin-top:34px; font:italic 400 clamp(22px, 2vw, 30px)/1.25 var(--txt); }
.studio .vals { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.studio .vals span { font:500 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; padding:9px 12px; border-radius:99px; background:var(--fg); color:var(--bg); }
.studio .vals span:nth-child(3n) { background:var(--lime); }
@media (max-width:860px) { .studio { grid-template-columns:1fr; } .studio .phw { position:relative; top:0; max-width:460px; } .studio dl div { grid-template-columns:1fr; gap:4px; } }

/* contato */
.talk { margin-top:24vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:12vh var(--pad); position:relative; border-top:1px solid var(--line); }
.talk .lab { margin-bottom:26px; }
.talk h2 { font:400 clamp(70px, 16vw, 300px)/.82 var(--disp); text-transform:uppercase; }
.talk h2 .out { -webkit-text-stroke:2px var(--lime); }
.talk p { font-size:clamp(18px, 1.5vw, 22px); color:#c6c5bf; max-width:36ch; margin:30px auto 30px; }
.talk .btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.talk .orb { width:clamp(150px, 15vw, 220px); aspect-ratio:1; border-radius:50%; background:var(--lime); color:var(--bg); display:flex; align-items:center; justify-content:center; text-align:center; font:600 13px/1.25 var(--lab); letter-spacing:.08em; text-transform:uppercase; margin:34px auto 0; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s; }
.talk .orb:hover { background:var(--fg); }

/* arquivo */
.arch { padding:20vh 0 14vh; }
.arch .flt { display:flex; gap:6px; padding:22px var(--pad) 18px; }
.arch .flt button { font:500 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; padding:9px 13px; border-radius:99px; border:1.2px solid #4a4a47; background:none; cursor:pointer; color:var(--fg); }
.arch .flt button.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.arch ol { list-style:none; columns:2; column-gap:40px; padding:0 var(--pad); }
.arch li { break-inside:avoid; }
.arch li a { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); transition:color .2s, padding .3s; }
.arch li a:hover { color:var(--lime); padding-left:10px; }
.arch li b { font:500 20px/1.15 var(--txt); letter-spacing:-.03em; }
.arch li .n, .arch li em { font:500 11px var(--lab); letter-spacing:.08em; text-transform:uppercase; font-style:normal; color:var(--mute); }
.arch .more { margin:22px var(--pad) 0; background:none; border:0; border-bottom:1.5px solid; color:var(--fg); cursor:pointer; }
.peek { position:fixed; left:0; top:0; width:240px; aspect-ratio:1; border-radius:10px; overflow:hidden; pointer-events:none; z-index:40; opacity:0; transform:translate(-50%, -50%) scale(.85) rotate(-3deg); transition:opacity .25s, transform .25s; }
.peek.on { opacity:1; transform:translate(-50%, -50%) scale(1) rotate(-3deg); }
.peek img { width:100%; height:100%; object-fit:cover; }
@media (max-width:760px) { .arch ol { columns:1; } .peek { display:none; } }

/* rodapé */
.foot { padding:12vh var(--pad) 26px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; align-items:end; }
.foot .lg { width:min(416px, 80%); }
.foot .col { display:grid; gap:8px; }
.foot .col a { width:fit-content; }
.foot .col a:hover { color:var(--lime); }
.foot .meta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap; }
.foot .meta img { height:22px; width:auto; filter:invert(1); }
.foot .bcw { position:relative; display:inline-block; line-height:0; }
.foot .bcw .fm { position:absolute; right:6px; bottom:calc(100% + 10px); width:clamp(92px, 8.5vw, 132px); height:auto; filter:none; transform:rotate(-6deg); }
@media (max-width:760px) { .foot { grid-template-columns:1fr; } }

/* cursor */
.cur { position:fixed; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--lime); pointer-events:none; z-index:150; display:flex; align-items:center; justify-content:center; font:600 11px var(--lab); letter-spacing:.08em; text-transform:uppercase; color:var(--bg); transition:width .25s, height .25s, opacity .2s; }
.cur span { opacity:0; transition:opacity .2s; }
.cur.big { width:84px; height:84px; } .cur.big span { opacity:1; }
.cur.off { opacity:0; }
@media (hover:none), (pointer:coarse) { .cur { display:none; } .hero { cursor:auto; } }

.rv { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *, *::before { animation:none !important; transition:none !important; } .rv { opacity:1; transform:none; } }

/* ---------- páginas de case e site (tema escuro) ---------- */
.cs-hero { padding:120px var(--pad) 5vh; display:flex; flex-direction:column; gap:14px; }
.cs-hero .back { width:fit-content; margin-bottom:6vh; } .cs-hero .back:hover { color:var(--lime); }
.cs-hero h1 { font:400 clamp(64px, 14vw, 260px)/.96 var(--disp); text-transform:uppercase; }
.cs-hero .tl { font:italic 400 clamp(22px, 2.4vw, 38px)/1.2 var(--txt); max-width:30ch; color:var(--lime); }
.cs-kv { margin:0 var(--pad); border-radius:16px; overflow:hidden; } .cs-kv img { width:100%; }
.cs-facts { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; padding-top:26px; padding-bottom:26px; }
.cs-facts dt { font:500 11px/1.6 var(--lab); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.cs-facts dd { font:500 17px/1.35 var(--txt); }
.cs-intro { padding-top:16vh; } .cs-intro p { font:500 clamp(28px, 3.4vw, 56px)/1.1 var(--txt); letter-spacing:-.03em; max-width:24ch; margin-top:18px; }
.cs-steps, .cs-roll { padding-top:16vh; }
.cs-steps h2, .cs-roll h2 { font:400 clamp(44px, 7vw, 120px)/1 var(--disp); text-transform:uppercase; }
.cs-steps .hd, .cs-roll .hd { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:28px; }
.cs-steps ol { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.cs-steps li { background:var(--card); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:12px; border:1px solid var(--line); }
.cs-steps li b { font:400 70px/.8 var(--disp); -webkit-text-stroke:1.5px var(--lime); color:transparent; }
.cs-steps li h3 { font:500 26px/1 var(--txt); letter-spacing:-.04em; }
.cs-steps li p { font-size:15.5px; color:#c6c5bf; }
.cs-roll figure { border-radius:16px; overflow:auto; max-height:88vh; } .cs-roll figure img { width:100%; }
.cs-next { display:grid; grid-template-columns:1fr 2fr; gap:16px; padding:16vh var(--pad) 0; }
.cs-next a { display:flex; flex-direction:column; justify-content:flex-end; gap:8px; border-radius:16px; padding:28px; min-height:40vh; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.cs-next b { font:400 clamp(40px, 5vw, 90px)/1 var(--disp); text-transform:uppercase; position:relative; z-index:1; }
.cs-next .lab { position:relative; z-index:1; }
.cs-next .nx img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.cs-next .nx:hover img { transform:scale(1.05); opacity:1; }
.cs-next .pv:hover { background:var(--lime); color:var(--bg); }
.devs { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:end; }
.devs .lap { border-radius:12px; overflow:hidden; background:#fff; }
.devs .bar { display:flex; align-items:center; gap:6px; padding:10px 12px; font:500 11px var(--lab); color:#888; background:#1c1c1b; }
.devs .bar i { width:9px; height:9px; border-radius:50%; background:#3a3a38; } .devs .bar span { margin-left:10px; }
.devs .lap .scr { height:min(66vh, 620px); overflow:auto; }
.devs .mob { border:10px solid #2a2a28; border-radius:36px; overflow:hidden; background:#fff; }
.devs .mob .scr { height:540px; overflow:auto; }
.devs img { width:100%; }
.talk.small { min-height:auto; padding:16vh var(--pad); }
.talk.small h2 { font-size:clamp(60px, 11vw, 200px); }
@media (max-width:860px) { .cs-facts { grid-template-columns:1fr 1fr; } .cs-steps ol { grid-template-columns:1fr; } .cs-next { grid-template-columns:1fr; } .cs-next .pv { min-height:auto; } .devs { grid-template-columns:1fr; } .devs .mob { max-width:280px; } }
.proc .big { line-height:.92; height:.92em; padding-top:0; }
.proc .big span { height:.92em; }
.works .bgs img.on { opacity:.5; }
.works .bgs::after { background:radial-gradient(rgba(10,10,10,.25) 20%, rgba(10,10,10,.8)); }
@media (max-width:860px) { .proc .pin { top:0; padding-top:64px; } }
.cs-steps .hd, .cs-roll .hd { flex-wrap:wrap; }
@media (hover:none), (pointer:coarse) { .hero .hint { display:none; } }

/* grifo limão sempre por trás do texto: não cobre a linha de cima nem a de baixo */
:has(> .hl) { isolation:isolate; }
.hl { position:relative; z-index:-1; }

/* nike: quadro de formatos — cada peça no seu tamanho real, dentro de um quadro */
.bento { padding:20vh var(--pad) 0; }
.bento .bh { display:grid; grid-template-columns:1fr minmax(0, 380px); gap:30px; align-items:end; margin-bottom:34px; }
.bento .bh .lab { display:block; margin-bottom:12px; }
.bento h2 { font:400 clamp(44px, 6.6vw, 124px)/1.05 var(--disp); text-transform:uppercase; }
.bento .bh p { color:#c6c5bf; }
.bento .bg { display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:clamp(62px, 6.6vw, 118px); gap:10px; }
.bento figure { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:14px 14px 32px; transition:border-color .3s, opacity .8s, transform .8s; }
.bento figure img { max-width:100%; max-height:100%; object-fit:contain; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.bento figure.p-kv { padding:0; }
.bento figure.p-bb, .bento figure.p-lb { padding:8px 12px 24px; }
.bento figure.p-kv img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.bento figure:hover { border-color:var(--lime); }
.bento figure:hover img { transform:scale(1.03); }
.bento figcaption { position:absolute; left:12px; bottom:9px; font:500 10px var(--lab); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.bento .p-kv figcaption { background:var(--bg); color:var(--fg); padding:3px 7px; border-radius:4px; }
.bento .cnt { background:var(--lime); color:var(--bg); border-radius:12px; padding:clamp(16px, 2vw, 28px); display:flex; flex-direction:column; justify-content:space-between; gap:12px; }
.bento .cnt b { font:400 clamp(56px, 6vw, 110px)/.85 var(--disp); }
.bento .cnt b small { font-size:.4em; margin-left:.1em; }
.bento .cnt span { font:500 15px/1.35 var(--txt); max-width:26ch; }
.p-kv { grid-column:1/7; grid-row:1/5; } .p-st { grid-column:7/9; grid-row:1/5; } .p-mub { grid-column:9/11; grid-row:1/5; } .p-36 { grid-column:11/13; grid-row:1/5; }
.p-out { grid-column:1/6; grid-row:5/7; } .p-bb { grid-column:6/11; grid-row:5/6; } .p-lb { grid-column:6/11; grid-row:6/7; } .p-32 { grid-column:11/13; grid-row:5/7; }
.p-fd { grid-column:1/3; grid-row:7/9; } .p-car { grid-column:3/5; grid-row:7/9; } .p-em { grid-column:5/9; grid-row:7/9; } .p-16 { grid-column:9/10; grid-row:7/9; } .p-cnt { grid-column:10/13; grid-row:7/9; }
@media (max-width:760px) {
  .bento .bh { grid-template-columns:1fr; gap:14px; }
  .bento .bg { grid-template-columns:repeat(4, 1fr); grid-auto-rows:22vw; grid-auto-flow:dense; gap:8px; }
  .bento .bg > * { grid-column:auto; grid-row:auto; }
  .bento .p-kv { grid-column:span 4; grid-row:span 3; }
  .bento .t { grid-column:span 2; grid-row:span 4; }
  .bento .w { grid-column:span 4; grid-row:span 2; }
  .bento .w1 { grid-column:span 4; grid-row:span 1; }
  .bento .q { grid-column:span 2; grid-row:span 2; }
  .bento .p-cnt { grid-column:span 4; grid-row:span 3; }
  .bento figure { padding:10px 10px 28px; }
}

/* troca de idioma no menu: chave PT/EN com contorno, o idioma ativo fica em limão */
.nav .lng { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1.5px solid var(--fg); border-radius:99px; font:600 11px/1 var(--lab); letter-spacing:.08em; }
.nav .lng b { font-weight:600; padding:7px 9px; border-radius:99px; color:var(--mute); transition:background .25s, color .25s; }
html[lang="pt-BR"] .nav .lng b:first-child, html[lang="en"] .nav .lng b:last-child { background:var(--lime); color:var(--bg); }
.nav .lng:hover b { color:var(--fg); }
html[lang="pt-BR"] .nav .lng:hover b:first-child, html[lang="en"] .nav .lng:hover b:last-child { color:var(--bg); }
.pill { white-space:nowrap; }
@media (max-width:760px) { .nav { gap:10px; } .nav .lng { margin-left:auto; } .nav .pill { margin-left:0; padding:11px 12px; font-size:11px; gap:8px; } }