/* UNLABEL: imagens integradas, ritmo editorial e leitura em primeiro plano. */
:root { --gutter: max(6vw, calc((100vw - 1440px) / 2)); }
body { background: #101216; }
.header { position: fixed; height: 94px; z-index: 20; padding-inline: var(--gutter); transition: background .3s, height .3s; }
.header.is-scrolled, .header.menu-open { background: #101216ed; backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.header nav { gap: clamp(18px, 2.3vw, 36px); }
.header nav a { position: relative; padding-block: 12px; }
.header nav a[aria-current]::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 20px; height: 2px; background: var(--acid); }
.menu-toggle { display: none; }
.button { border-radius: 50px; padding-inline: 27px; gap: 24px; }
.button::after { content: '↗'; font-size: 20px; line-height: 1; }
.button:hover { background: var(--acid); color: var(--ink); }
.section { padding-inline: var(--gutter); }
.section-head { padding-top: 30px; border-top: 1px solid var(--line); }
.section-head .eyebrow { color: var(--acid); }
.section-head h2 { font-size: clamp(44px,6.2vw,92px); }
/* Todas as aberturas ocupam a largura da tela, com texto protegido pelo degradê. */
.route-page.editorial-page { --page-gutter: var(--gutter); padding: 0 var(--page-gutter) 110px; }
#page-servicos,#page-branding,#page-blog { padding-inline: var(--page-gutter); }
.editorial-page .page-intro { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(880px, 88svh); min-height: max(680px, min(880px, 88svh)); margin: 0 calc(-1 * var(--page-gutter)) 70px; padding: 170px var(--page-gutter) 135px; overflow: hidden; background: #0b0d10; opacity: 1; transform: none; }
.editorial-page .page-intro-copy { position: relative; z-index: 2; max-width: 800px; min-width: 0; }
.editorial-page .page-intro .eyebrow { color: var(--acid); padding: 0; margin-bottom: 30px; display: flex; align-items: center; gap: 14px; }
.editorial-page .page-intro .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.editorial-page .page-intro h2 { font-size: clamp(58px,7.4vw,112px); color: #fff; line-height: 1.01; letter-spacing: -.035em; text-wrap: balance; }
.editorial-page .page-intro-copy > p:not(.eyebrow) { max-width: 46ch; color: #e0e1e3; font-size: 17px; line-height: 1.8; margin-top: 30px; }
.editorial-page .page-intro .button { margin-top: 30px; }
.editorial-page .page-intro-art { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; border: 0; border-radius: 0; }
.editorial-page .page-intro-art img { position: absolute; inset: 0 0 0 auto; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; animation: image-arrive 1.6s cubic-bezier(.2,.65,.3,1) both; }
.editorial-page .page-intro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0b0d10 0%,#0b0d10ed 22%,#0b0d10b8 47%,#0b0d1020 85%),linear-gradient(0deg,#101216 0%,#10121600 28%,#10121600 72%,#10121685 100%); }
#page-branding .page-intro-art img { object-position: 64% center; }
#page-instagram .page-intro-art img { object-position: 60% center; }
#page-contato .page-intro-art img { width: 100%; }
.hero-foot { position: absolute; bottom: 35px; left: var(--page-gutter); right: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid #ffffff36; color: #c5c7cb; font: 11px monospace; text-transform: uppercase; letter-spacing: .08em; }
.explore-link { border: 0; padding: 8px 0; background: none; color: white; font: 13px Arial,sans-serif; display: flex; gap: 26px; align-items: center; }
.explore-link span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff5c; border-radius: 50%; font-size: 22px; color: var(--acid); transition: transform .25s,background .25s; }
.explore-link:hover span { transform: translateY(3px); background: #edff0012; }
[id$='offers'],[id$='project'],[id$='notes'],[id$='feed'],[id$='channels'] { scroll-margin-top: 120px; outline: none; }
@keyframes image-arrive { from { transform: scale(1.07); opacity: .5; } to { transform: scale(1); opacity: 1; } }
/* Página inicial: tipografia maior, recortes de imagem e contraste entre capítulos. */
.hero { min-height: max(730px,100svh); }
.hero-inner { padding: 190px var(--gutter) 35px; }
.hero h1 { font-size: clamp(54px,7.8vw,122px); max-width: 1300px; }
.hero:after { background: linear-gradient(90deg,#070910c9,#07091025),linear-gradient(0deg,#101216,transparent 40%); }
.hero-art { animation: image-arrive 1.8s ease both; }
.hero-index { margin-top: 65px; }
.video-feature { margin: 0 2.5%; min-height: 78svh; border-radius: 4px; padding-block: 95px; }
.video-feature-bg video { opacity: .68; }
.video-feature-bg:after { background: linear-gradient(90deg,#06070be8,#06070b20),linear-gradient(0deg,#06070bbf,transparent 80%); }
.video-feature-content h2 { font-size: clamp(64px,9vw,132px); }
.motion-toggle { position: absolute; top: 30px; right: 35px; border: 1px solid #ffffff50; border-radius: 30px; background: #10121670; color: white; padding: 11px 18px; font-size: 12px; display: flex; gap: 18px; backdrop-filter: blur(10px); }
.video-feature-mark { display: none; }
.work-section { padding-block: 125px; }
.brand-grid { gap: 65px 4%; align-items: start; }
.brand-card:nth-child(even) { margin-top: 100px; }
.brand-card .brand-cover { aspect-ratio: 1.2; border-radius: 4px; }
.brand-card .project-caption { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.brand-card .project-caption h3 { font-size: clamp(28px,3vw,42px); }
.brand-cover .project-open { border-radius: 30px; padding: 10px 17px; }
.project-image img { transition: transform .9s cubic-bezier(.2,.65,.3,1); }
.project:hover .project-image img { transform: scale(1.06); }
.portfolio-filters button { border-radius: 30px; }
.studio-section { border-radius: 32px 32px 0 0; padding-block: 110px; position: relative; }
.studio-statement { font-size: clamp(40px,5.7vw,85px); }
.studio-statement span { color: #565b64; }
.studio-mark { aspect-ratio: .9; border-radius: 4px; }
.studio-body { gap: 6%; }
.studio-copy { columns: 1; max-width: 650px; font-size: 18px; }
.differences .service-icon { display: none; }
.differences .number { font-size: 36px; color: #555a60; font-family: Cal; }
.differences article { border-top: 1px solid #10121640; padding-top: 25px; }
.differences { border: 0; }
.services .section-head { position: relative; isolation: isolate; min-height: 400px; padding: 55px 4%; border: 0; overflow: hidden; align-items: end; }
.services .section-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#101216ed,#101216b3),url('assets/editorial/servicos-design.jpg') center/cover; }
.services .section-head > p { color: #d3d5d9; }
.services .service-list details { background: linear-gradient(120deg,#1d2027,#13161b); transition: border-color .3s; }
.services .service-list details[open] { border-color: #edff0066; }
.service-icon { background: none; border: 0; border-radius: 0; }
#page-servicos .route-service-grid { gap: 24px; }
#page-servicos .route-service-grid article { position: relative; overflow: hidden; border-radius: 4px; padding: 42px; background: linear-gradient(120deg,#20242b,#15181e); transition: border-color .3s,transform .3s; }
#page-servicos .route-service-grid article:hover { border-color: #edff0099; transform: translateY(-4px); }
#page-servicos .route-service-grid .number { font: 68px Cal; line-height: 1; color: #ffffff1f; }
#page-servicos .route-service-grid h3 { font-size: clamp(32px,3.8vw,52px); }
#page-servicos .route-service-grid p { color: #bdc0c7; }
.process { background: #171a20; gap: 12%; }
.process-intro { align-self: start; position: sticky; top: 130px; }
.process-steps li { gap: 32px; padding-block: 32px; }
.process-steps li > span { font: 36px Cal; line-height: 1; color: var(--acid); }
.conversation { min-height: 700px; }
.conversation-logo { opacity: .65; transform: rotate(-8deg); }
/* Leitura e projetos têm espaço próprio depois da abertura. */
#page-branding .branding-sample { gap: 7%; background: #191c22; border: 1px solid var(--line); padding: 28px; border-radius: 4px; }
#page-branding .branding-sample-art { border-radius: 2px; aspect-ratio: 1.05; }
.branding-sample .text-button { display: inline-flex; gap: 26px; min-height: 44px; align-items: center; }
.branding-sample .text-button::after { content: '↗'; font-size: 24px; color: var(--acid); }
#page-blog .blog-grid { gap: 24px; counter-reset: notes; }
#page-blog .blog-grid article { position: relative; min-width: 0; padding: 36px 30px; border-radius: 4px; background: linear-gradient(140deg,#20242b,#15181e); counter-increment: notes; }
#page-blog .blog-grid article::before { content: '0' counter(notes); color: #ffffff1f; font: 76px Cal; line-height: 1; margin-bottom: 35px; }
#page-blog .blog-grid h3 { margin-top: 25px; font-size: clamp(28px,2.6vw,40px); }
#page-blog .blog-grid article>p { margin-bottom: 28px; }
#page-blog .blog-grid details { margin-top: auto; }
#page-blog .blog-grid details[open] { margin-top: 0; }
.instagram-grid { gap: 24px; align-items: start; }
.instagram-grid a:nth-child(3n+2) { margin-top: 60px; }
.contact-grid { gap: 24px; border: 0; }
.contact-grid>a,.contact-grid>div,.contact-grid>a+*,.contact-grid>div+* { border: 1px solid var(--line); padding: 30px; background: #171a20; }
.contact-grid .eyebrow { color: var(--acid); }
.contact-grid strong { font-size: clamp(20px,1.8vw,28px); }
.contact-grid a:hover { border-color: var(--acid); }
footer { padding: 50px var(--gutter); background: #0b0d10; }
/* Mobile tem composição própria, sem depender de efeitos de hover. */
@media(max-width:1050px) {
  .header { gap: 20px; }
  .brand { width: 135px; }
  .header nav { font-size: 13px; gap: 18px; }
  .section-head { gap: 35px; }
  .services .section-head { flex-direction: column; align-items: start; }
  .services .section-head>p { max-width: 560px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media(max-width:760px) {
  :root { --gutter: 6vw; }
  .header { height: 80px; gap: 16px; }
  .header .brand { width: 120px; flex-shrink: 0; }
  .header .contact-link { margin-left: auto; font-size: 11px; }
  .menu-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: white; padding: 12px 0; font-size: 13px; order: 3; }
  .menu-toggle span { color: var(--acid); font-size: 24px; line-height: 1; transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span { transform: rotate(45deg); }
  .header nav { display: none; position: absolute; left: 0; right: 0; top: 79px; max-width: none; max-height: calc(100svh - 80px); overflow-y: auto; padding: 20px var(--gutter) 36px; background: #101216fa; border-bottom: 1px solid var(--line); white-space: normal; }
  .header.menu-open nav { display: grid; gap: 0; }
  .header nav a { font: 30px Cal; padding-block: 13px; border-bottom: 1px solid var(--line); }
  .header nav a[aria-current] { color: var(--acid); }
  .header nav a[aria-current]::after { display: none; }
  .editorial-page .page-intro { min-height: 760px; min-height: max(720px,94svh); padding: 170px var(--gutter) 135px; align-items: flex-end; margin-bottom: 40px; }
  .editorial-page .page-intro h2 { font-size: clamp(48px,11.5vw,74px); }
  .editorial-page .page-intro-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; max-width: 36ch; margin-top: 25px; }
  .editorial-page .page-intro .eyebrow { margin-bottom: 24px; }
  .editorial-page .page-intro .button { max-width: 100%; white-space: normal; text-align: left; font-size: 13px; padding-inline: 22px; gap: 16px; }
  .button::after { flex-shrink: 0; }
  .editorial-page .page-intro-art img { width: 100%; object-position: 65% center; }
  .editorial-page .page-intro::before { background: linear-gradient(0deg,#101216 1%,#0b0d10d9 30%,#0b0d10a3 64%,#0b0d1050),linear-gradient(90deg,#10121655,transparent); }
  .hero-foot { bottom: 22px; gap: 12px; }
  .hero-foot>span { max-width: 110px; font-size: 9px; line-height: 1.7; }
  .explore-link { font-size: 12px; gap: 12px; }
  .explore-link span { width: 34px; height: 34px; }
  .hero { min-height: max(760px,100svh); }
  .hero-inner { padding-top: 160px; }
  .hero h1 { font-size: clamp(44px,10.5vw,76px); }
  .hero-bottom { margin-top: 30px; }
  .hero-index { margin-top: 50px; }
  .video-feature { margin: 0; min-height: 700px; padding-block: 65px; }
  .motion-toggle { top: 28px; right: 6%; }
  .video-feature-content h2 { font-size: 76px; }
  .brand-grid { gap: 40px; }
  .brand-card:nth-child(even) { margin-top: 0; }
  .brand-card .brand-cover { aspect-ratio: 1.3; }
  .work-section { padding-block: 75px; }
  .studio-section { border-radius: 20px 20px 0 0; padding-block: 70px; }
  .studio-mark { max-width: none; aspect-ratio: 1.5; }
  .studio-copy { font-size: 16px; }
  .services .section-head { padding: 35px 24px; min-height: 450px; }
  .services .section-head h2 { font-size: 42px; }
  .services .section-head>p { font-size: 15px; }
  #page-servicos .route-service-grid article { padding: 30px 25px; }
  #page-servicos .route-service-grid .number { font-size: 56px; }
  .process-intro { position: static; }
  .conversation { min-height: 0; }
  .conversation-logo { width: 70%; margin-left: auto; }
  #page-branding .branding-sample { padding: 16px; gap: 28px; }
  #page-branding .branding-sample>div { padding: 0 10px 14px; }
  #page-branding .branding-sample-art { aspect-ratio: 1.3; }
  #page-blog .blog-grid article { padding: 30px 25px; }
  #page-blog .blog-grid article::before { font-size: 56px; margin-bottom: 25px; }
  #page-blog .blog-grid h3 { font-size: 34px; }
  .instagram-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .instagram-grid a:nth-child(3n+2) { margin-top: 0; }
  .instagram-grid a:nth-child(even) { margin-top: 35px; }
  footer { gap: 26px; }
}
@media(max-width:400px) {
  .header { gap: 12px; }
  .header .brand { width: 100px; }
  .header .contact-link { font-size: 10px; white-space: nowrap; }
}
@media(prefers-reduced-motion:reduce) {
  .editorial-page .page-intro-art img,.hero-art { animation: none; }
  .project:hover .project-image img,.conversation-logo,#page-servicos .route-service-grid article:hover { transform: none; }
}