:root { --ink:#0b0b0c; --rose:#d8608f; --violet:#57257a; --peach:#f2b38b; --teal:#1f8e9c; --g:clamp(16px,2.2vw,36px);
  --grad:linear-gradient(90deg,var(--peach),var(--rose),var(--violet),var(--teal)); }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:#fff; color:var(--ink); font-family:'PP Neue Montreal', system-ui, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.serif { font-family:'PP Neue Montreal', sans-serif; font-weight:400; }
.it { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; }
.gt { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.G { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--g); padding:0 var(--g); }
.blob { position:fixed; left:0; top:0; width:44vw; height:44vw; border-radius:50%; pointer-events:none; z-index:0; filter:blur(80px); opacity:.7;
  background:conic-gradient(from 0deg, var(--peach), var(--rose), var(--violet), var(--teal), var(--peach)); transform:translate(-50%,-50%); animation:spin 16s linear infinite; mix-blend-mode:multiply; }
@keyframes spin { to { rotate:360deg; } }
.cols { position:fixed; inset:0; z-index:1; pointer-events:none; } .cols > div { height:100%; } .cols i { border-left:1px solid rgba(0,0,0,.045); }
main { position:relative; z-index:2; }
.back { position:fixed; left:16px; bottom:16px; z-index:20; background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:8px 14px; border-radius:99px; }
.folio { grid-column:1/13; display:flex; justify-content:space-between; border-top:1px solid var(--ink); padding:10px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:56px; }
.sh { grid-column:1/13; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--g); border-top:2px solid var(--ink); padding:12px 0 28px; font-size:13px; }
.sh b { grid-column:1/4; } .sh .it { grid-column:5/10; font-size:22px; line-height:1; } .sh span:last-child { grid-column:10/13; text-align:right; color:#777; }

/* ---------- capa ---------- */
.cover { min-height:100vh; display:flex; flex-direction:column; }
.topbar { padding-top:16px; padding-bottom:12px; font-size:13px; }
.topbar a:nth-child(1) { grid-column:1/4; font-weight:800; } .topbar a:nth-child(2) { grid-column:6/8; } .topbar a:nth-child(3) { grid-column:8/10; } .topbar a:nth-child(4) { grid-column:10/13; text-align:right; }
.mast { padding:0 var(--g); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); display:flex; align-items:flex-end; justify-content:space-between; }
.mast h1 { font-weight:900; font-size:21vw; line-height:.8; letter-spacing:-.075em; margin-left:-.05em; padding-top:1vw; }
.mast h1 span { font-weight:300; }
.issue { font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:right; padding-bottom:1.6vw; line-height:1.8; }
.coverbody { flex:1; padding-top:22px; padding-bottom:28px; align-items:start; }
.lines { grid-column:1/5; display:flex; flex-direction:column; gap:22px; }
.lines div small { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#777; margin-bottom:4px; }
.lines div .serif { font-size:clamp(24px,2.2vw,34px); line-height:1.02; }
.lines .big { font-weight:900; font-size:clamp(40px,4.4vw,72px); line-height:.9; letter-spacing:-.05em; }
.coverimg { grid-column:5/13; position:relative; aspect-ratio:1672/941; overflow:hidden; }
.coverimg img { width:100%; height:100%; object-fit:cover; }
.tint { position:absolute; inset:0; background:linear-gradient(160deg,var(--peach),var(--rose) 40%,var(--violet) 75%,var(--teal)); mix-blend-mode:color; transition:opacity .7s; pointer-events:none; }
.reveal:hover .tint, .reveal.on .tint { opacity:0; }
.coverimg figcaption { position:absolute; left:12px; bottom:10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; }

/* ---------- sumário (index) ---------- */
.toc { padding-top:90px; }
.list { grid-column:1/8; }
.r { display:grid; grid-template-columns:4ch 1fr 11ch 5ch; gap:14px; align-items:baseline; padding:11px 0; border-top:1px solid #ddd; cursor:pointer; position:relative; }
.r .n { font-size:12px; color:#999; font-variant-numeric:tabular-nums; }
.r b { font-size:clamp(22px,2.5vw,38px); font-weight:800; letter-spacing:-.035em; }
.r .it { font-size:17px; color:#666; } .r em { font-style:normal; font-size:12px; color:#999; text-align:right; }
.r::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.r:hover::after, .r.on::after { transform:scaleX(1); }
.prev { grid-column:9/13; position:sticky; top:20px; align-self:start; }
.pv { position:relative; aspect-ratio:4/5; overflow:hidden; background:#eee; }
.pv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pv-cap { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; } .pv-cap b { font-weight:800; font-size:15px; } .pv-cap .it { font-size:18px; color:#666; }

/* ---------- matéria ---------- */
.art { padding-top:110px; align-items:start; }
.art .num { grid-column:1/3; font-weight:900; font-size:clamp(70px,9vw,150px); line-height:.8; letter-spacing:-.07em; }
.art .head { grid-column:3/7; }
.art .kick { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#777; }
.art h2 { font-family:'PP Neue Montreal', sans-serif; font-weight:400; font-style:italic; font-size:clamp(54px,6.4vw,110px); line-height:.86; letter-spacing:-.02em; margin:10px 0 18px; }
.art .dek { font-size:clamp(18px,1.5vw,22px); line-height:1.3; font-weight:500; letter-spacing:-.01em; }
.art .body { columns:2; column-gap:var(--g); font-size:14px; line-height:1.6; color:#3b3b3e; margin-top:22px; }
.art .body p + p { margin-top:10px; }
.art .cred { margin-top:22px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#777; border-top:1px solid #ddd; padding-top:10px; }
.art figure { grid-column:7/13; position:relative; }
.art figure .ph { position:relative; aspect-ratio:1672/941; overflow:hidden; }
.art figure img { width:100%; height:100%; object-fit:cover; display:block; }
.art figure figcaption { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#777; margin-top:8px; }
.art.flip .num { grid-column:11/13; grid-row:1; text-align:right; } .art.flip .head { grid-column:7/11; grid-row:1; } .art.flip figure { grid-column:1/7; grid-row:1; }

/* ---------- página cheia ---------- */
.full { margin-top:110px; position:relative; min-height:92vh; color:#fff; padding:0; }
.full > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.full::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.05) 60%); }
.full .G { position:relative; z-index:1; min-height:92vh; align-content:end; padding-bottom:40px; }
.full .q { grid-column:1/7; font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-size:clamp(40px,5vw,84px); line-height:.95; }
.full .q::before { content:'“'; display:block; font-size:1.6em; line-height:.5; }
.full .who { grid-column:1/7; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-top:14px; }
.full .folio { border-color:#fff; }

/* ---------- especial ---------- */
.sp { padding-top:110px; }
.sp h2 { grid-column:1/9; font-weight:900; font-size:clamp(56px,7.4vw,130px); line-height:.84; letter-spacing:-.06em; }
.sp h2 .it { font-weight:400; letter-spacing:-.02em; }
.sp p { grid-column:9/13; align-self:end; font-size:15px; line-height:1.55; color:#444; }
.pieces { grid-column:1/13; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--g); margin-top:40px; align-items:end; }
.pieces figure { position:relative; } .pieces img { width:100%; display:block; }
.pieces figcaption { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#777; margin-top:6px; display:flex; gap:8px; } .pieces figcaption b { color:var(--ink); }

/* ---------- websites ---------- */
.web { padding-top:110px; }
.webg { grid-column:1/13; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); row-gap:44px; }
.site { display:block; }
.site .win { position:relative; border:1px solid var(--ink); background:#fff; }
.site .bar { height:26px; border-bottom:1px solid var(--ink); display:flex; align-items:center; gap:6px; padding:0 10px; font-size:11px; color:#777; }
.site .bar i { width:8px; height:8px; border-radius:50%; border:1px solid var(--ink); }
.site .bar span { margin-left:8px; }
.site .scr { position:relative; aspect-ratio:16/10; overflow:hidden; }
.site .scr img { position:absolute; left:0; top:0; width:100%; min-height:100%; background:#f3f2ef; transition:transform 0s; will-change:transform; }
.site:hover .scr img { transition:transform var(--dur,8s) linear; transform:translateY(var(--to,0)); }
.site .mob { position:absolute; right:-6px; bottom:-18px; width:22%; border:1px solid var(--ink); border-radius:12px; overflow:hidden; background:#fff; aspect-ratio:390/844; box-shadow:6px 6px 0 rgba(0,0,0,.08); }
.site .mob img { width:100%; display:block; }
.site .cap { display:flex; justify-content:space-between; align-items:baseline; margin-top:26px; border-top:1px solid #ddd; padding-top:10px; }
.site .cap b { font-size:20px; font-weight:800; letter-spacing:-.03em; } .site .cap .it { font-size:17px; color:#666; }
.site .cap em { font-style:normal; font-size:12px; color:#999; }
.site .tint { opacity:.85; } .site:hover .tint { opacity:0; }
.filt { grid-column:1/13; display:flex; gap:8px; margin:-10px 0 18px; }
.filt button { -webkit-appearance:none; appearance:none; color:var(--ink); -webkit-tap-highlight-color:transparent; border:1px solid var(--ink); background:#fff; font:600 12px 'PP Neue Montreal'; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border-radius:99px; cursor:pointer; }
.filt button.on { background:var(--ink); color:#fff; }
.r .tp { font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:1px solid #bbb; border-radius:99px; padding:2px 7px; margin-left:8px; color:#777; vertical-align:middle; font-weight:600; }
@media (max-width:860px) { .webg { grid-template-columns:1fr; } }

/* ---------- serviços (3 frentes) + processo ---------- */
.manchete { grid-column:1/10; font-weight:900; font-size:clamp(36px,4.6vw,78px); line-height:.92; letter-spacing:-.045em; word-spacing:.14em; margin-bottom:44px; }
.manchete .it { font-weight:400; letter-spacing:-.02em; }
.svc3 { grid-column:1/13; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); }
.svc3 > div { border-top:2px solid var(--ink); padding-top:12px; }
.svc3 small { font-size:12px; color:#999; }
.svc3 h3 { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(40px,4vw,64px); line-height:1; margin:4px 0 14px; }
.svc3 ul { list-style:none; }
.svc3 li { font-size:17px; padding:8px 0; border-top:1px solid #e3e3e3; display:flex; justify-content:space-between; }
.svc3 li::after { content:'↗'; color:#bbb; }
.proc { padding-top:110px; }
.pi { grid-column:1/13; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--g); align-items:end; margin-bottom:40px; }
.pi h2 { grid-column:1/8; font-weight:900; font-size:clamp(56px,8vw,140px); line-height:.82; letter-spacing:-.06em; }
.pi h2 .it { font-weight:400; letter-spacing:-.02em; }
.pi p { grid-column:9/13; font-size:15px; line-height:1.55; color:#444; }
.steps { grid-column:1/13; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--g); }
.steps li { border-top:2px solid var(--ink); padding-top:12px; }
.steps li span { font-weight:900; font-size:clamp(48px,5vw,88px); line-height:.8; letter-spacing:-.06em; display:block; }
.steps li:hover span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps h3 { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(26px,2.2vw,36px); margin:14px 0 8px; }
.steps p { font-size:14px; line-height:1.55; color:#555; }
@media (max-width:860px) { .svc3, .steps { grid-template-columns:1fr; } .manchete, .pi h2, .pi p { grid-column:1/13; } }

/* ---------- serviços, marcas, contracapa ---------- */
.svc { padding-top:110px; }
.svcg { grid-column:1/13; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); }
.svcg div { border-top:1px solid #ddd; padding-top:12px; }
.svcg small { font-size:12px; color:#999; } .svcg h3 { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(30px,2.8vw,44px); margin:6px 0 8px; line-height:1; } .svcg p { font-size:14px; color:#555; line-height:1.55; }
.marq { overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:16px 0; margin:110px 0; }
.marq div { display:flex; gap:48px; width:max-content; animation:mq 34s linear infinite; font-size:clamp(28px,4vw,62px); font-weight:900; letter-spacing:-.05em; white-space:nowrap; }
.marq .it { font-weight:400; letter-spacing:0; }
@keyframes mq { to { transform:translateX(-50%); } }
.end h2 { font-weight:900; font-size:16vw; line-height:.8; letter-spacing:-.07em; padding:0 var(--g); }
.end h2 .it { font-weight:400; letter-spacing:-.03em; }
.end .G { padding-top:28px; padding-bottom:40px; font-size:14px; }
.end .G a { grid-column:1/6; font-size:clamp(18px,2vw,28px); font-weight:500; border-bottom:2px solid var(--ink); width:fit-content; }
.end .G span { grid-column:10/13; text-align:right; color:#777; }
@media (max-width:860px) {
  .lines, .coverimg, .list, .art .head, .art figure, .art.flip .head, .art.flip figure, .sp h2, .sp p, .full .q, .full .who { grid-column:1/13 !important; grid-row:auto !important; }
  .prev { display:none; } .art .num, .art.flip .num { grid-column:1/13; text-align:left; } .r { grid-template-columns:3ch 1fr 5ch; } .r .it { display:none; }
  .svcg { grid-template-columns:1fr; } .art .body { columns:1; } .topbar a:nth-child(2), .topbar a:nth-child(3) { display:none; }
  .pieces figure { grid-column:span 6 !important; }
}

/* ---------- site final: extras ---------- */
.rv { transform:translateY(22px); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.in { transform:none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } .blob, .marq div { animation:none; } }
.more { display:inline-flex; gap:8px; align-items:center; margin-top:20px; font-weight:700; font-size:14px; border-bottom:2px solid var(--ink); padding-bottom:2px; }
.more:hover { border-image:var(--grad) 1; }
.end .links { grid-column:1/13; display:flex; gap:10px; margin-top:6px; }
.end .links a { border:1px solid var(--ink); border-radius:99px; padding:9px 16px; font-size:13px; font-weight:600; }
.end .links a:hover { background:var(--ink); color:#fff; }

/* ---------- página de case ---------- */
.ch { padding-top:56px; align-items:end; }
.ch .backl { grid-column:1/13; font-size:13px; font-weight:600; margin-bottom:26px; }
.ch .backl:hover { color:var(--rose); }
.ch .num { grid-column:1/3; font-weight:900; font-size:clamp(70px,9vw,150px); line-height:.8; letter-spacing:-.07em; }
.ch .tt { grid-column:3/10; }
.ch .kick { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#777; }
.ch h1 { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(60px,8vw,140px); line-height:.86; letter-spacing:-.02em; margin-top:10px; }
.ch .facts { grid-column:10/13; font-size:13px; line-height:1.6; }
.ch .facts div { border-top:1px solid #ddd; padding:8px 0; display:flex; justify-content:space-between; gap:10px; }
.ch .facts span { color:#777; }
.dek2 { grid-column:3/10; font-size:clamp(20px,1.8vw,26px); font-weight:500; line-height:1.3; letter-spacing:-.01em; margin-top:30px; }
.kvbig { grid-column:1/13; margin-top:44px; position:relative; overflow:hidden; }
.kvbig img { width:100%; display:block; }
.label { grid-column:1/13; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#777; margin-top:8px; }
.roll { grid-column:2/12; margin-top:90px; }
.roll img { width:100%; display:block; border:1px solid var(--ink); }
.nextp { grid-column:1/13; display:grid; grid-template-columns:1fr 1fr; gap:var(--g); margin-top:110px; border-top:2px solid var(--ink); padding-top:14px; }
.nextp a { display:block; }
.nextp small { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#777; }
.nextp b { display:block; font-weight:900; font-size:clamp(30px,3.4vw,56px); letter-spacing:-.05em; margin:6px 0 12px; }
.nextp .ph { position:relative; aspect-ratio:16/9; overflow:hidden; }
.nextp .ph img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.nextp a:hover .ph img { transform:scale(1.04); }
.nextp a:last-child { text-align:right; }

/* ---------- página de website ---------- */
.devices { grid-column:1/13; display:grid; grid-template-columns:1fr 300px; gap:var(--g); margin-top:44px; align-items:start; }
.laptop { border:1px solid var(--ink); background:#fff; }
.laptop .bar, .phone .bar { height:30px; border-bottom:1px solid var(--ink); display:flex; align-items:center; gap:6px; padding:0 12px; font-size:12px; color:#777; }
.laptop .bar i { width:9px; height:9px; border-radius:50%; border:1px solid var(--ink); }
.laptop .bar span { margin-left:10px; }
.screen { height:min(72vh,760px); overflow-y:auto; scrollbar-width:thin; }
.screen img { width:100%; display:block; }
.phone { border:1px solid var(--ink); border-radius:28px; overflow:hidden; background:#fff; }
.phone .screen { height:min(72vh,640px); }
.devices .hint { grid-column:1/3; font-size:12px; color:#777; margin-top:6px; }
.golive { display:inline-flex; gap:10px; align-items:center; margin-top:22px; background:var(--ink); color:#fff; padding:13px 22px; border-radius:99px; font-weight:700; font-size:14px; }
.golive:hover { background:var(--violet); }
@media (max-width:860px) {
  .ch .num, .ch .tt, .ch .facts, .dek2 { grid-column:1/13; } .roll { grid-column:1/13; }
  .devices { grid-template-columns:1fr; } .phone { width:70%; margin:0 auto; } .nextp { grid-template-columns:1fr; } .nextp a:last-child { text-align:left; }
}
.art .fig { display:block; }
@media (max-width:860px) { .art .fig { grid-column:1/13 !important; grid-row:auto !important; } }
@media (max-width:640px) {
  .mast { flex-direction:column; align-items:flex-start; }
  .issue { text-align:left; padding:6px 0 10px; line-height:1.4; }
  .issue br { display:none; } .issue br + * { margin-left:6px; }
}
.issue .dot { font-style:normal; display:none; }
@media (max-width:640px) { .issue .dot { display:inline; } .issue br + * { margin-left:0; } }

/* efeito de luz desligado (teste sem o degradê seguindo o mouse) */
.blob { display:none; }

/* ---------- processo criativo por case ---------- */
.dek2 .tag-line { display:block; font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(30px,3vw,48px); line-height:1.02; letter-spacing:-.01em; margin-bottom:14px; }
.proc6 { grid-column:1/13; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:44px var(--g); }
.proc6 li { border-top:2px solid var(--ink); padding-top:12px; min-width:0; }
.proc6 span { font-weight:900; font-size:clamp(40px,4vw,68px); line-height:.8; letter-spacing:-.06em; display:block; }
.proc6 li:hover span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.proc6 h3 { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(24px,2vw,32px); margin:12px 0 8px; line-height:1; }
.proc6 p { font-size:15px; line-height:1.6; color:#3b3b3e; max-width:46ch; }
@media (max-width:860px) { .proc6 { grid-template-columns:1fr; gap:28px; } }

/* ---------- mosaico da home ---------- */
.mosaic-sec { padding-top:70px; }
.mosaic { grid-column:1/13; display:grid; grid-template-columns:repeat(8,1fr); grid-auto-flow:dense; gap:6px; }
.tile { position:relative; aspect-ratio:1; overflow:hidden; background:#eee; display:block; }
.tile.big { grid-column:span 2; grid-row:span 2; }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.tile .tint { opacity:.55; }
.tile:hover .tint, .tile:focus-visible .tint { opacity:0; }
.tile:hover img { transform:scale(1.06); }
.tile .lbl { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; opacity:0; transform:translateY(8px); transition:.35s; }
.tile .lbl b { font-size:14px; font-weight:800; letter-spacing:-.02em; } .tile .lbl i { font-family:'PP Neue Montreal', sans-serif; font-size:15px; opacity:.85; }
.tile.big .lbl b { font-size:22px; }
.tile:hover .lbl, .tile:focus-visible .lbl { opacity:1; transform:none; }
@media (max-width:860px) { .mosaic { grid-template-columns:repeat(4,1fr); } }
@media (max-width:520px) { .mosaic { grid-template-columns:repeat(3,1fr); gap:4px; } .tile.big { grid-column:span 2; grid-row:span 2; } .tile .lbl { opacity:1; transform:none; padding:6px 8px; } .tile .lbl i { display:none; } .tile .lbl b { font-size:11px; } }

/* ---------- capa: manifesto do site original ---------- */
.coverbody { row-gap:28px; }
.manifesto { grid-column:1/7; align-self:start; }
.manifesto h2 { font-weight:800; font-size:clamp(30px,3.3vw,56px); line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.manifesto h2 .it { font-weight:400; letter-spacing:-.01em; }
.manifesto p { margin-top:22px; font-size:16px; line-height:1.55; color:#444; max-width:52ch; }
.coverimg { grid-column:7/13; }
.lines { grid-column:1/13; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--g); border-top:1px solid var(--ink); padding-top:14px; }
.lines div .serif { font-size:clamp(20px,1.7vw,28px); }
@media (max-width:860px) { .manifesto, .coverimg, .lines { grid-column:1/13; } .lines { grid-template-columns:1fr; gap:14px; } }
/* capa do tamanho do conteúdo (sem buraco em telas altas) */
.cover { min-height:0; }
.coverbody { flex:none; padding-bottom:10px; }
.mosaic-sec { padding-top:56px; }

/* ===== correções v2: sem degradê, índice em 2 colunas, capa com área de vídeo ===== */
.gt { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; -webkit-text-fill-color:currentColor; }
.tint { display:none !important; }
.r::after { background:var(--ink); }
.steps li:hover span, .proc6 li:hover span { background:none; color:var(--ink); -webkit-text-fill-color:currentColor; }
.more:hover { border-image:none; opacity:.6; }
.end h2 { font-size:8vw; }

/* índice: só a lista, 2 colunas, cor chapada no hover */
.list.two { grid-column:1/13; display:block; columns:2; column-gap:var(--g); }
.list.two .r { break-inside:avoid; }
.list.two .r { grid-template-columns:3.5ch 1fr auto; padding:11px 10px; transition:background .25s, color .25s; }
.list.two .r .it { display:none; }
.list.two .r b { font-size:clamp(20px,2vw,30px); }
.list.two .r::after { display:none; }
.list.two .r:hover { background:var(--hv,#111); color:#fff; }
.list.two .r:hover .n, .list.two .r:hover em, .list.two .r:hover .tp { color:#fff; border-color:#fff; }
.morebtn { grid-column:1/13; justify-self:start; margin-top:24px; font:inherit; font-weight:800; font-size:14px; letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:#fff; border:0; padding:14px 22px; border-radius:99px; cursor:pointer; transition:background .25s; }
.morebtn:hover { background:#d8608f; }

/* capa: placeholder do vídeo (tipografia animada) */
.covervideo { background:var(--ink); color:#fff; display:flex; align-items:center; padding:0 6%; }
.covervideo video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cv-inner { display:flex; flex-direction:column; line-height:.9; }
.cv-we { font-size:clamp(14px,1.3vw,20px); font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:10px; }
.cv-word { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-size:clamp(40px,5.4vw,92px); letter-spacing:-.02em; transition:opacity .35s, transform .35s; }
.cv-word.out { opacity:0; transform:translateY(12px); }
@media (max-width:860px) { .list.two { columns:1; } .end h2 { font-size:13vw; } }

/* menu com 4 itens: Sumário, Serviços, Websites, Contato */
.topbar a:nth-child(2) { grid-column:4/6; } .topbar a:nth-child(3) { grid-column:6/8; } .topbar a:nth-child(4) { grid-column:8/10; text-align:left; } .topbar a:nth-child(5) { grid-column:10/13; text-align:right; }
@media (max-width:860px) {
  .topbar a:nth-child(2), .topbar a:nth-child(4) { display:none; }
  .topbar a:nth-child(3) { display:block; grid-column:5/9; } .topbar a:nth-child(5) { grid-column:9/13; }
}

/* no celular, o card do site mostra só a tela de computador */
@media (max-width:860px) { .site .mob { display:none; } }

/* menu fixo no topo, sempre visível, com âncoras suaves */
html { scroll-behavior:smooth; }
main { padding-top:var(--tb,46px); }
.topbar { position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.08); padding-top:max(14px, env(safe-area-inset-top,0px)); padding-bottom:12px; }
.topbar a { transition:color .2s; }
.topbar a:hover, .topbar a.on { color:var(--rose); }
section[id], div[id="articles"] > section[id] { scroll-margin-top:calc(var(--tb,46px) + 14px); }

/* página de site no celular: telas empilhadas, proporção real, sem rolagem presa (a página rola sozinha dentro da moldura) */
.devices .hint { grid-column:1/-1; }
@media (max-width:860px) {
  .devices { gap:28px; }
  .laptop .screen { height:auto; aspect-ratio:16/10; overflow:hidden; }
  .phone { width:62%; }
  .phone .screen { height:auto; aspect-ratio:390/700; overflow:hidden; }
  .screen img { animation:pan var(--dur,14s) ease-in-out 1s infinite alternate; }
}
@keyframes pan { from { transform:translateY(0); } to { transform:translateY(var(--to,0)); } }
@media (prefers-reduced-motion:reduce) { .screen img { animation:none; } }

/* seletor de idioma PT | EN no menu (6º item) */
.topbar > a:nth-child(1) { grid-column:1/3; } .topbar > a:nth-child(2) { grid-column:3/5; } .topbar > a:nth-child(3) { grid-column:5/7; }
.topbar > a:nth-child(4) { grid-column:7/9; text-align:left; } .topbar > a:nth-child(5) { grid-column:9/11; text-align:left; }
.topbar .lang { grid-column:11/13; justify-self:end; display:flex; gap:2px; font-size:12px; letter-spacing:.06em; }
.topbar .lang a { display:inline-block !important; padding:1px 6px; border:1px solid transparent; border-radius:99px; color:#888; }
.topbar .lang a.on { color:var(--ink); border-color:var(--ink); }
.topbar .lang a:hover { color:var(--rose); }
.topbar .tn { font-style:normal; }
@media (max-width:860px) {
  .topbar .tn { display:none; }
  .topbar > a:nth-child(1) { grid-column:1/4; } .topbar > a:nth-child(3) { grid-column:4/7; } .topbar > a:nth-child(5) { grid-column:7/10; text-align:left; }
  .topbar .lang { grid-column:10/13; }
}

/* Safari (iPhone/iPad): a imagem dentro de uma caixa com aspect-ratio estica a caixa.
   Solução: a imagem sai do fluxo (absolute) e a moldura fica com a altura certa em qualquer navegador. */
.site .mob { height:auto; }
.site .mob img { position:absolute; left:0; top:0; width:100%; }
@media (max-width:860px) {
  .laptop .screen, .phone .screen { position:relative; }
  .laptop .screen img, .phone .screen img { position:absolute; left:0; top:0; width:100%; }
}

/* =====================================================================
   criō creative studio — identidade do KV (preto, off-white, cinza, limão)
   PP Neue Montreal (texto) · Anton (títulos) · Space Grotesk (rótulos)
   Montserrat ExtraBold (logo) · Retro Signature (assinatura)
   ===================================================================== */
@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-bold.otf) format('opentype'); font-weight:700 900; 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 { --ink:#0a0a0a; --lime:#e5fb00; --paper:#f6f5f0; --gray:#a7a7a7; --rose:var(--ink); --violet:var(--ink);
  --disp:'Anton', 'Impact', sans-serif; --lab:'Space Grotesk', 'PP Neue Montreal', sans-serif; }
body { background:var(--paper); }
::selection { background:var(--lime); color:var(--ink); }
.it { font-style:italic; font-weight:400; }
.serif { font-weight:500; letter-spacing:-.01em; }
/* destaque marca-texto limão, como no KV ("CURIOUS.", "IMPERFEITOS.") */
.hl { background:linear-gradient(transparent 14%, var(--lime) 14%, var(--lime) 90%, transparent 90%); -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .06em; color:var(--ink); }
.tag { display:inline-block; font:600 11px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; background:var(--lime); color:var(--ink); padding:5px 8px 4px; }
.sig { font-family:'Retro Signature', cursive; font-weight:400; text-transform:none; letter-spacing:0; }
.ring { position:relative; display:inline-block; }
.ring::after { content:''; position:absolute; inset:-.12em -.28em -.08em; border:3px solid var(--lime); border-radius:50%; transform:rotate(-4deg); pointer-events:none; }

/* rótulos em Space Grotesk */
.sh, .kick, .folio, .issue, .lines small, .cred, .label, .r .n, .r em, .tp, .nextp small, .facts span, .pieces figcaption, .site .cap em, .tile .lbl i, .art .fig figcaption { font-family:var(--lab); }
.sh .it { font-family:'PP Neue Montreal', sans-serif; }

/* logo criō: Montserrat ExtraBold, barra limão sobre o "o" */
.o { position:relative; font-weight:inherit; }
.o::before { content:''; position:absolute; left:.1em; right:.1em; top:.02em; height:.11em; background:var(--lime); }
.mast h1 { font-family:'Crio Logo', sans-serif; font-weight:800; font-size:23vw; line-height:.78; letter-spacing:-.045em; margin-left:-.04em; padding-top:2.4vw; display:flex; align-items:flex-end; }
.mast h1 .cs { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(16px,3vw,50px); letter-spacing:-.02em; line-height:1; margin:0 0 .5em .5em; }
.mast h1 .cs sup { font-size:.4em; font-style:normal; vertical-align:super; }
.issue { font-weight:500; }

/* menu */
.topbar { background:rgba(246,245,240,.92); }
.topbar .logo-s { font-family:'Crio Logo', sans-serif; font-weight:800; font-size:22px; letter-spacing:-.04em; line-height:1; }
.topbar a:hover, .topbar a.on { color:var(--ink); background:linear-gradient(transparent 55%, var(--lime) 55%); }
.topbar .logo-s:hover { background:none; }
.topbar > a.cta { grid-column:11/13; justify-self:end; background:var(--lime); color:var(--ink); padding:5px 14px; border-radius:99px; font-weight:600; margin:-5px 0; }
.topbar > a.cta:hover, .topbar > a.cta.on { background:var(--ink); color:var(--lime); }
@media (max-width:860px) { .topbar > a.cta { grid-column:10/13; } }

/* capa */
.manifesto h2 { font-weight:500; letter-spacing:-.035em; line-height:1.04; margin-top:14px; }
.manifesto p { color:#3d3d3d; }
.vals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:26px; max-width:520px; }
.vals div { background:var(--ink); color:#fff; padding:12px 12px 10px; font-size:12px; line-height:1.3; }
.vals b { display:block; font:600 13px var(--lab); text-transform:uppercase; letter-spacing:.02em; }
.vals .on { background:var(--lime); color:var(--ink); }
.covervideo { background:var(--ink); align-items:center; padding:0 6%; }
.cv-inner { position:relative; z-index:1; }
.cv-we { font-family:var(--disp); font-weight:400; font-size:clamp(40px,6.2vw,108px); line-height:.92; letter-spacing:0; text-transform:uppercase; opacity:1; margin:0; }
.cv-we.lime { color:var(--lime); }
.cv-word { font-family:'PP Neue Montreal', sans-serif; font-style:italic; font-weight:400; font-size:clamp(22px,2.6vw,42px); color:#fff; margin-top:12px; }
.covervideo .mascote { position:absolute; right:5%; bottom:9%; height:62%; width:auto; filter:invert(1) hue-rotate(180deg) saturate(1.6) brightness(1.15); mix-blend-mode:screen; transform:rotate(6deg); }
.covervideo figcaption { font-family:'PP Neue Montreal', sans-serif; text-transform:none; letter-spacing:-.01em; font-size:clamp(13px,1.1vw,17px); left:6%; bottom:6%; }
.covervideo figcaption .sig { font-size:1.9em; color:var(--lime); }
.lines div .serif { font-weight:500; }

/* títulos em Anton, caixa alta */
.manchete, .sp h2, .pi h2, .end h2, .art .num, .art h2, .ch .num, .ch h1, .steps li span, .proc6 span, .marq div, .nextp b, .bio h2 { font-family:var(--disp); font-weight:400; font-style:normal; text-transform:uppercase; letter-spacing:0; }
.manchete { font-size:clamp(40px,5.4vw,92px); line-height:.94; word-spacing:0; }
.sp h2, .pi h2 { line-height:.9; }
.art h2, .ch h1 { line-height:.9; }
.art .num, .ch .num { color:var(--ink); }
.art .dek { font-weight:500; }
.end h2 { font-size:9vw; line-height:.9; }
.marq div { font-size:clamp(28px,4.4vw,68px); gap:0; }
.marq div span { padding-right:.4em; }
.marq .hl { padding:0 .1em; }
.svc3 h3, .steps h3, .proc6 h3 { font-family:'PP Neue Montreal', sans-serif; font-style:normal; font-weight:500; letter-spacing:-.035em; }
.steps li:hover span, .proc6 li:hover span { color:var(--ink); background:linear-gradient(transparent 20%, var(--lime) 20%, var(--lime) 92%, transparent 92%); -webkit-text-fill-color:currentColor; }
.svc3 li:hover { background:var(--lime); }
.svc3 li { padding-left:4px; padding-right:4px; transition:background .2s; }

/* índice */
.list.two .r:hover { background:var(--hv,#111); color:var(--hc,#fff); }
.list.two .r:hover .n, .list.two .r:hover em, .list.two .r:hover .tp { color:var(--hc,#fff); border-color:var(--hc,#fff); }
.morebtn:hover { background:var(--lime); color:var(--ink); }
.filt button { background:transparent; font-family:var(--lab); }
.filt button.on { background:var(--ink); color:var(--lime); }
.more:hover { opacity:1; background:linear-gradient(transparent 55%, var(--lime) 55%); }
.site .win, .site .mob, .laptop, .phone { background:#fff; }
.golive:hover { background:var(--lime); color:var(--ink); }
.ch .backl:hover { color:var(--ink); background:linear-gradient(transparent 55%, var(--lime) 55%); }
.tile { background:#e4e4df; }
.end .links a:hover { background:var(--lime); color:var(--ink); border-color:var(--ink); }

/* estúdio / quem faz */
.studio { padding-top:110px; align-items:start; }
.me { grid-column:1/6; margin:0; }
.me img { width:100%; aspect-ratio:1; object-fit:cover; display:block; filter:grayscale(1); }
.me figcaption { display:flex; justify-content:space-between; font:500 11px var(--lab); letter-spacing:.1em; text-transform:uppercase; color:#777; margin-top:8px; }
.bio { grid-column:6/10; }
.bio h2 { font-size:clamp(56px,6.6vw,118px); line-height:.86; margin:14px 0 14px; }
.bio h2 span { display:block; }
.bio .role { font:600 13px/1.4 var(--lab); text-transform:uppercase; letter-spacing:.02em; background:var(--lime); display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:2px 6px; }
.bio p:not(.role) { font-size:16px; line-height:1.55; color:#3d3d3d; margin-top:18px; max-width:46ch; }
.bio .role + p { margin-top:26px; }
.sig.big { display:block; font-size:clamp(34px,3.2vw,52px); margin-top:22px; transform:rotate(-4deg); transform-origin:left; }
.atitude { grid-column:10/13; list-style:none; font-weight:500; font-size:clamp(22px,2vw,32px); line-height:1.12; text-transform:uppercase; letter-spacing:-.02em; }
.atitude .tag { margin-bottom:12px; }
@media (max-width:860px) { .me, .bio, .atitude { grid-column:1/13; } .me { max-width:520px; } }

@media (max-width:860px) {
  .mast h1 { font-size:30vw; flex-wrap:wrap; }
  .vals { grid-template-columns:1fr 1fr 1fr; }
  .covervideo { aspect-ratio:4/5; align-items:flex-start; padding-top:10%; }
  .covervideo .mascote { height:46%; }
  .cv-we { font-size:15vw; }
  .end h2 { font-size:13vw; }
}
@media (max-width:640px) { .mast h1 .cs { font-size:5.4vw; margin-left:.4em; } }
/* ajustes após revisão no navegador */
.o::before { left:.15em; right:.15em; top:.1em; height:.1em; }
.covervideo { flex-direction:column; align-items:flex-start; justify-content:center; }
.cv-we { font-size:clamp(34px,4.9vw,84px); }
.cv-word { color:var(--lime); margin-top:10px; min-height:1.1em; }
.covervideo figcaption { bottom:5%; }
.topbar > a { justify-self:start; }
.topbar > a.cta { justify-self:end; }
@media (max-width:860px) { .covervideo { justify-content:flex-start; padding-top:12%; } .covervideo .mascote { height:40%; bottom:12%; } }
.cols { overflow:hidden; } html { overflow-x:clip; }
/* mascote como adesivo branco (mantém a coroa limão do KV) */
.covervideo .mascote { filter:none; mix-blend-mode:normal; background:#fff; padding:1.2% 1.6%; box-shadow:6px 6px 0 var(--lime); height:52%; }
@media (max-width:860px) { .covervideo .mascote { height:34%; } }

/* ===== logo em vetor (assets/crio/*.svg) no lugar do logo em CSS ===== */
.mast { align-items:flex-end; padding-top:2.2vw; padding-bottom:1.8vw; }
.mast h1 { display:block; font-size:0; line-height:0; margin:0; padding:0; flex:1; max-width:39%; }
.mast h1 img { display:block; width:100%; height:auto; }
.issue { padding-bottom:0; }
.topbar .logo-s { display:block; line-height:0; font-size:0; }
.topbar .logo-s img { height:22px; width:auto; display:block; }
@media (max-width:640px) { .mast h1 { max-width:none; width:50%; } .mast { padding-top:16px; } .issue { padding-top:12px; padding-bottom:12px; } }

/* ===== caixas limão: texto centrado de verdade (corta o respiro da fonte acima/abaixo das letras) ===== */
.topbar { align-items:center; }
.topbar > a { line-height:1; }
.topbar > a.cta { margin:0; display:inline-flex; align-items:center; padding:8px 14px; line-height:1; text-box:trim-both cap alphabetic; }
.tag { padding:6px 8px; line-height:1; text-box:trim-both cap alphabetic; }
.vals b, .vals div { text-box:trim-both cap alphabetic; }
.vals div { padding:14px 12px; display:flex; flex-direction:column; gap:7px; }
.bio .role { line-height:1.9; padding:3px 6px; }
.morebtn, .filt button, .end .links a { line-height:1; text-box:trim-both cap alphabetic; }
.morebtn { padding:16px 22px; } .filt button { padding:10px 14px; } .end .links a { padding:11px 16px; }
/* marca-texto: faixa acompanhando a altura das letras de cada fonte */
.hl { background:linear-gradient(transparent 22%, var(--lime) 22%, var(--lime) 92%, transparent 92%); }
.manchete .hl, .sp h2 .hl, .pi h2 .hl, .end h2 .hl, .marq .hl { background:linear-gradient(transparent 6%, var(--lime) 6%, var(--lime) 96%, transparent 96%); }
.topbar a:hover, .topbar a.on { background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 100%); }
.manchete .hl, .sp h2 .hl, .pi h2 .hl, .end h2 .hl, .marq .hl { background:linear-gradient(transparent 10%, var(--lime) 10%, var(--lime) 90%, transparent 90%); }

/* "real" em assinatura: maior e apoiado na mesma linha de base da frase
   (a Retro Signature desenha as letras bem acima da própria base, por isso o deslocamento) */
.covervideo figcaption .sig { display:inline-block; font-size:3.2em; line-height:0; position:relative; top:.2em; margin:0 .02em 0 .06em; }

/* marcador limão sempre por trás do texto: a frase inteira vira uma camada e o marcador fica no fundo dela,
   então a faixa nunca cobre letras da linha de cima ou de baixo */
:has(> .hl) { isolation:isolate; }
.hl { position:relative; z-index:-1; }

/* ===== menu em Space Grotesk (como os rótulos do KV) ===== */
.topbar > a { font-family:var(--lab); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.topbar > a.cta { font-weight:600; }

/* ===== código de barras do KV: capa (como em revista) e rodapé ===== */
.bc { display:block; height:30px; width:auto; aspect-ratio:118/20; }
.issue .bc { height:38px; margin:0 0 10px auto; }
.end .G span .bc { height:26px; margin:0 0 8px auto; }
@media (max-width:640px) { .issue .bc { margin:0 0 8px 0; height:30px; } }
@media (max-width:860px) { .end .G span .bc { margin-left:auto; } }
@media (max-width:860px) { .end .G a[data-mail] { grid-column:1/13; } .end .G span { grid-column:1/13; grid-row:3; text-align:left; margin-top:18px; } .end .G span .bc { margin:0 0 8px 0; } }

/* ================= V2 ================= */
/* campo ainda sem informação: aparece tracejado para ser preenchido */
.tbd { font-style:normal; outline:1.5px dashed #b5b5b5; outline-offset:2px; color:#8a8a8a; padding:0 4px; }
/* posicionamento na capa */
.manifesto .pos { font:500 clamp(17px,1.35vw,21px)/1.35 'PP Neue Montreal', sans-serif; color:var(--ink); margin:14px 0 4px; max-width:34ch; }
.manifesto .pos b { font-weight:500; background:linear-gradient(transparent 55%, var(--lime) 55%); }
/* trabalhos selecionados */
.sel-sec { padding-top:70px; }
.sel { grid-column:1/13; display:grid; grid-template-columns:repeat(12,1fr); gap:44px var(--g); }
.card { grid-column:span 4; display:flex; flex-direction:column; min-width:0; }
.card.big { grid-column:span 6; }
.card .ph { aspect-ratio:16/9; overflow:hidden; background:#e8e7e1; }
.card .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.card:hover .ph img { transform:scale(1.04); }
.card .ct { display:flex; align-items:baseline; gap:10px; border-top:2px solid var(--ink); margin-top:14px; padding-top:10px; }
.card .ct .n { font:600 12px var(--lab); }
.card .ct b { font:400 clamp(26px,2.4vw,40px)/1 var(--disp); text-transform:uppercase; }
.card.big .ct b { font-size:clamp(32px,3.4vw,56px); }
.card .ct .it { margin-left:auto; font-size:15px; color:#555; }
.card:hover .ct b { background:linear-gradient(transparent 14%, var(--lime) 14%, var(--lime) 90%, transparent 90%); }
.card .tl { font:italic 400 18px/1.25 'PP Neue Montreal', sans-serif; margin-top:8px; color:#333; }
.cr { display:grid; gap:4px; margin-top:12px; font-size:13px; }
.cr div { display:grid; grid-template-columns:76px 1fr; gap:8px; border-top:1px solid #dddcd5; padding-top:5px; }
.cr dt { font:600 10px/1.9 var(--lab); letter-spacing:.08em; text-transform:uppercase; color:#777; }
.sel-sec > .more { grid-column:1/13; justify-self:start; margin-top:40px; }
@media (max-width:860px) { .card, .card.big { grid-column:1/13; } .sel { gap:36px; } }
/* faixa de contato */
.ctaband { padding-top:56px; padding-bottom:56px; margin-top:90px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); align-items:end; }
.ctaband > p { grid-column:1/8; font:400 clamp(36px,4.4vw,76px)/.95 var(--disp); text-transform:uppercase; }
.ctab { grid-column:8/13; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ctab span { flex:1 0 100%; font-size:16px; color:#3d3d3d; margin-bottom:6px; }
.btn { display:inline-block; font:600 13px/1 var(--lab); letter-spacing:.06em; text-transform:uppercase; padding:14px 20px 13px; border-radius:99px; background:var(--lime); color:var(--ink); border:2px solid var(--lime); }
.btn.ghost { background:none; border-color:var(--ink); }
.btn:hover { background:var(--ink); color:var(--lime); border-color:var(--ink); }
.ctaband.dark { background:var(--ink); color:#fff; border:0; margin-left:calc(var(--g) * -1); margin-right:calc(var(--g) * -1); padding-left:var(--g); padding-right:var(--g); }
.ctaband.dark .ctab span { color:#bbb; }
.ctaband.dark .btn.ghost { border-color:#fff; color:#fff; }
.ctaband.dark .btn:hover { background:#fff; color:var(--ink); border-color:#fff; }
@media (max-width:860px) { .ctaband > p, .ctab { grid-column:1/13; } .ctab { margin-top:22px; } }
/* serviços: problema que resolve + complementos */
.svc3 .pb { font-size:16px; line-height:1.45; color:#3d3d3d; margin:0 0 16px; min-height:4.4em; }
.also { grid-column:1/13; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; margin-top:44px; border-top:1px solid var(--ink); padding-top:14px; }
.also b { font:500 32px/1 'PP Neue Montreal', sans-serif; letter-spacing:-.035em; }
.also > span { font:600 11px var(--lab); letter-spacing:.08em; text-transform:uppercase; color:#777; }
.also ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.also li { border:1px solid #c9c8c0; border-radius:99px; padding:5px 12px; font-size:14px; }
/* processo com case real */
.pkv { grid-column:1/13; display:block; margin:10px 0 50px; position:relative; }
.pkv img { width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
.pkv span { display:block; font:600 11px var(--lab); letter-spacing:.1em; text-transform:uppercase; color:#777; margin-top:8px; }
.proc > .more { grid-column:1/13; justify-self:start; margin-top:36px; }
/* websites */
.web .manchete { grid-column:1/13; margin-bottom:40px; }
.wobj { font-size:14px; color:#555; margin-top:6px; }
/* estúdio: para quem, trajetória, depoimento */
.facts2 { margin:22px 0 10px; }
.facts2 div { display:grid; grid-template-columns:150px 1fr; gap:14px; border-top:1px solid #dddcd5; padding:10px 0; }
.facts2 dt { font:600 11px/1.7 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.facts2 dd { font-size:15px; line-height:1.5; color:#3d3d3d; }
@media (max-width:640px) { .facts2 div { grid-template-columns:1fr; gap:4px; } }
.studio .quote { grid-column:1/13; margin-top:50px; border-top:2px solid var(--ink); padding-top:14px; }
.studio .quote p { font:italic 400 clamp(22px,2.4vw,36px)/1.2 'PP Neue Montreal', sans-serif; margin-top:12px; }
/* seletor PT/EN ao lado do Contato */
.topbar .lang { grid-column:10/11; justify-self:end; align-self:center; font:500 12px/1 var(--lab); }
.topbar .lang a { padding:4px 7px 3px; }
.topbar .lang a.on { border-color:var(--ink); }
.topbar .lang a:hover { background:none; color:var(--ink); }
@media (max-width:860px) { .topbar > a:nth-child(5) { display:none; } .topbar > a:nth-child(3) { grid-column:4/7; } .topbar .lang { grid-column:7/10; justify-self:center; } }

/* ---------- ajustes 27/10 ---------- */
/* "designed by me" sobre a foto, como na v3 */
.me .phw { position:relative; }
.me .phw .sig { position:absolute; right:-10px; bottom:-24px; font-size:clamp(42px, 4.4vw, 72px); line-height:1.15; background:var(--lime); color:var(--ink); padding:0 .25em; transform:rotate(-4deg); }
.me figcaption { margin-top:14px; }
/* rodapé no formato da v3 */
.marq { margin-bottom:70px; }
.foot { padding:0 var(--g) 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; align-items:end; }
.foot .lg { width:min(520px, 100%); display:block; }
.foot .col { display:grid; gap:8px; font:500 12px/1.4 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.foot .col a { width:fit-content; }
.foot .col a:hover { background:var(--lime); }
.foot .mute { color:#8a8983; }
.foot .meta { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:22px; margin-top:20px; border-top:1px solid #dcdbd3; font:500 12px/1.4 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.foot .meta img { height:22px; width:auto; }
@media (max-width:760px) { .foot { grid-template-columns:1fr; } }
.mast { align-items:center; padding-top:2vw; padding-bottom:2vw; }
@media (max-width:640px) { .mast { align-items:flex-start; } }

/* ---------- header da V3 (28/10) ---------- */
/* menu: logo à esquerda, links à direita, pílula preta com ponto limão */
.topbar { display:flex !important; align-items:center; gap:24px; padding:16px var(--g) !important; background:rgba(246,245,240,.88); border-bottom:0; }
.topbar > a { grid-column:auto !important; }
.topbar > a:nth-child(2) { margin-left:auto; }
.topbar .tn { display:none; }
.topbar > a:not(.logo-s):not(.cta) { position:relative; background:none !important; }
.topbar > a:not(.logo-s):not(.cta)::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; }
.topbar > a:not(.logo-s):not(.cta):hover::after, .topbar > a.on:not(.cta)::after { transform:scaleX(1); }
.topbar .lang { margin-left:4px; }
.topbar > a.cta { display:inline-flex !important; align-items:center; gap:10px; background:var(--ink); color:#f6f5f0; padding:13px 18px; border-radius:99px; font:600 12px/1 var(--lab); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:background .25s, color .25s; }
.topbar > a.cta i { width:8px; height:8px; border-radius:50%; background:var(--lime); font-style:normal; }
.topbar > a.cta:hover, .topbar > a.cta.on { background:var(--lime); color:var(--ink); }
.topbar > a.cta:hover i, .topbar > a.cta.on i { background:var(--ink); }
@media (max-width:860px) { .topbar > a:not(.logo-s):not(.cta) { display:none !important; } .topbar .lang { margin-left:auto; } .topbar { gap:12px; } .topbar > a.cta { padding:11px 13px; font-size:11px; } }
/* etiquetas + título grande */
.top-h { padding:14px var(--g) 0; }
.top-h .top { border-top:2px solid var(--ink); padding-top:16px; }
.top-h .top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; font:500 12px/1.3 var(--lab); letter-spacing:.08em; text-transform:uppercase; }
.top-h .top .bc { height:22px; width:300px; max-width:52vw; margin-bottom:10px; display:block; }
.top-h .mute { color:#8a8983; }
.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:v3up 1s cubic-bezier(.2,.8,.2,1) forwards; }
.top-h h1 span:nth-child(2) b { animation-delay:.12s; }
.top-h h1 :has(> .hl3) { isolation:isolate; }
.top-h h1 .hl3 { font-style:normal; position:relative; z-index:-1; padding:0 .05em; background:linear-gradient(transparent 22%, var(--lime) 22%, var(--lime) 90%, transparent 90%) no-repeat 0 0 / var(--hw3, 100%) 100%; --hw3:0%; animation:v3hl .9s .9s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes v3up { to { transform:none; } }
@keyframes v3hl { to { --hw3:100%; } }
@property --hw3 { 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; animation:none; } .top-h h1 .hl3 { --hw3:100%; animation:none; } }

/* ---------- títulos em Anton: mesma entrelinha e entreletra do "We think. We play. We make" (28/10) ---------- */
.manchete, .sp h2, .pi h2, .end h2, .art .num, .art h2, .ch .num, .ch h1, .steps li span, .proc6 span, .marq div, .nextp b, .bio h2,
.card .ct b, .ctaband > p, .top-h h1, .cv-we { line-height:.92 !important; letter-spacing:0 !important; }
/* grifo limão por trás e centralizado nas maiúsculas da Anton (as letras ocupam de 21% a 79% da caixa) */
:is(.manchete, .sp h2, .pi h2, .end h2, .art h2, .ch h1, .marq div, .nextp b, .bio h2, .ctaband > p) .hl,
.top-h h1 .hl3 { background-image:linear-gradient(transparent 18%, var(--lime) 18%, var(--lime) 81%, transparent 81%) !important; padding:0 .06em; }