/* Walk Productions · site v4 */

@font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fundo: #08080a;
  --fundo-2: #101014;
  --linha: #1e1e22;
  --tinta: #fafafa;
  --tinta-2: #a1a1a6;
  --bone: #f2efe6;
  --sinal: #EE3A0C;

  --sans: 'General Sans', 'Switzer', system-ui, sans-serif;
  --serifa: 'Instrument Serif', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, monospace;

  --curva: cubic-bezier(0.9, 0, 0.1, 1);
  --macia: cubic-bezier(0.16, 1, 0.3, 1);

  /* 1 px da composição de 1920 */
  --u: calc(min(100vw, 1920px) / 1920);
  --margem: calc(100 * var(--u));
  --regra: 1px solid var(--tinta-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  font-size: max(16px, calc(24 * var(--u)));
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.travado { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

:focus-visible { outline: 2px solid var(--sinal); outline-offset: 4px; }
::selection { background: var(--sinal); color: var(--fundo); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 50; background: var(--sinal); color: var(--fundo); padding: 10px 16px; border-radius: 5px; font-family: var(--mono); font-size: 14px; }
.pular:focus { top: 16px; }

.mono { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.serifa-it { font-family: var(--serifa); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }

.container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--margem); }

/* título de seção ("Serviços:") — 48 px light, regra acima */
.title {
  font-size: max(22px, calc(48 * var(--u)));
  font-weight: 300;
  padding-top: calc(15 * var(--u));
  margin-bottom: calc(50 * var(--u));
  border-top: var(--regra);
}

/* botão com borda (menu e rodapé) */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tinta);
  border-radius: 10px;
  background: var(--fundo);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.button:hover { background: var(--tinta); color: var(--fundo); }
.button:focus-visible { background: var(--fundo); color: var(--tinta); }
.button--sinal { background: var(--sinal); border-color: var(--sinal); color: var(--fundo); }
.button--sinal:hover { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }

/* pincel em sinal (grifo) */
.pincel { position: absolute; z-index: -1; overflow: visible; pointer-events: none; }
.pincel path { fill: none; stroke: var(--sinal); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------------- 03 · menu ---------------- */
.header { position: relative; z-index: 5; padding-top: calc(64 * var(--u)); height: calc(140 * var(--u)); min-height: 76px; font-size: max(17px, calc(36 * var(--u))); }
.header__nav { display: flex; align-items: center; justify-content: space-between; height: calc(76 * var(--u)); min-height: 44px; }
.header__logo { display: block; color: var(--bone); transition: color 0.3s ease-in-out; }
.header__logo svg { height: calc(56 * var(--u)); min-height: 28px; width: auto; }
.header__logo:hover, .header__logo:focus-visible { color: var(--sinal); }
.header__wrapper { display: flex; align-items: center; gap: calc(80 * var(--u)); }
.header__menu { display: flex; gap: calc(80 * var(--u)); }
.header__item a { transition: color 0.3s; }
.header__item a:hover, .header__item a:focus-visible { color: var(--sinal); }
.header__btn { height: calc(76 * var(--u)); min-height: 40px; padding: 0 calc(44 * var(--u)); }
.header__hamburger { display: none; }

/* ---------------- 05 · hero ---------------- */
.promo { padding: calc(100 * var(--u)) 0; }
.promo__inner { position: relative; }
.promo__video-wrapper {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1720 / 973.5;
  border-radius: 20px; overflow: hidden;
  background: var(--fundo-2);
  box-shadow: inset 0 0 0 1px var(--linha);
  transform-origin: 100% 0;
  transform: scale(0.3);
  will-change: transform;
}
.promo__ascii, .promo__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.promo__video { object-fit: cover; opacity: 0; pointer-events: none; }
.sem-webgl .promo__video { opacity: 1; }
.sem-webgl .promo__ascii { display: none; }
.promo__hud { position: absolute; inset: 0; pointer-events: none; font-size: max(11px, calc(16 * var(--u))); color: var(--tinta); opacity: 0; }
.hud { position: absolute; display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.6em; background: rgba(8, 8, 10, 0.72); border-radius: 5px; }
.hud--se { top: calc(30 * var(--u)); left: calc(30 * var(--u)); }
.hud--ie { bottom: calc(30 * var(--u)); left: calc(30 * var(--u)); }
.hud--id { bottom: calc(30 * var(--u)); right: calc(30 * var(--u)); }
.hud b { font-weight: 500; }
.rec { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--sinal); animation: rec 1.6s steps(1) infinite; }
.rec { display: inline-block; flex: none; }
@keyframes rec { 50% { opacity: 0.15; } }

.promo__play {
  position: absolute; left: 50%; top: 50%;
  width: calc(100 * var(--u)); min-width: 56px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden;
  transition: transform 0.3s, opacity 0.3s;
}
.promo__play:hover { transform: translate(-50%, -50%) scale(1.2); }
.promo__play svg { width: 100%; height: 100%; }
.promo__play circle { fill: rgba(8, 8, 10, 0.55); stroke: var(--tinta); stroke-width: 2; }
.promo__play path { stroke: var(--tinta); stroke-width: 5; fill: none; }
.promo__play .icone-play { fill: var(--tinta); stroke: none; display: none; }
.promo__play[aria-pressed="true"] .icone-pausa { display: none; }
.promo__play[aria-pressed="true"] .icone-play { display: block; }
.promo__play.visivel { opacity: 1; visibility: visible; }

.promo__abs { position: absolute; inset: 0; pointer-events: none; }
.promo__abs a, .promo__abs button { pointer-events: auto; }
.promo__list { display: flex; gap: calc(28 * var(--u)); padding-top: calc(50 * var(--u)); font-size: max(13px, calc(26 * var(--u))); color: var(--tinta); }
.promo__greeting {
  margin-top: calc(100 * var(--u));
  font-size: calc(124 * var(--u));
  line-height: 1.25;
  text-transform: uppercase;
}
.promo__greeting .linha { display: block; }
.grifo { position: relative; display: inline-block; z-index: 0; isolation: isolate; }
.grifo .pincel { left: -6%; right: -4%; top: 6%; width: 110%; height: 92%; }
.promo__greeting .pincel path:first-child { stroke-width: calc(58 * var(--u)); }
.promo__greeting .pincel path:last-child { stroke-width: calc(26 * var(--u)); }
.promo__greeting .serifa-it { font-size: 1.12em; line-height: 1; padding: 0 0.06em; }
.promo__note {
  width: calc(688 * var(--u)); margin: calc(40 * var(--u)) 0 0 auto;
  text-transform: uppercase; font-size: max(13px, calc(24 * var(--u))); line-height: 1.25;
}

/* ---------------- 06 · manifesto ---------------- */
.philosophy { padding-top: calc(100 * var(--u)); }
.philosophy__inner { display: flex; justify-content: space-between; position: relative; }
.philosophy__img { width: calc(466 * var(--u)); flex: none; }
.philosophy__img svg { width: 100%; height: auto; overflow: visible; }
.philosophy__img path { fill: none; stroke: var(--sinal); stroke-width: calc(16 * var(--u)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.philosophy__text { width: calc(1032 * var(--u)); display: flex; flex-direction: column; gap: calc(40 * var(--u)); font-size: calc(56 * var(--u)); line-height: 1.25; }
.philosophy__text span {
  background-image: linear-gradient(45deg, var(--tinta) 50%, var(--tinta-2) 50%);
  background-size: 200% auto;
  background-position-x: 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.philosophy__text .serifa-it { font-size: 1.1em; }
.philosophy__text span .serifa-it {
  background-image: linear-gradient(45deg, var(--sinal) 50%, var(--tinta-2) 50%);
  background-size: 200% auto; background-position-x: inherit;
  -webkit-background-clip: text; background-clip: text;
}
.philosophy__link { display: inline-flex; align-items: baseline; gap: calc(20 * var(--u)); color: var(--tinta-2); font-size: calc(50 * var(--u)); line-height: 1.14; transition: color 0.3s ease-in-out; align-self: flex-start; }
.philosophy__link svg { width: calc(33 * var(--u)); height: calc(34 * var(--u)); }
.philosophy__link path { fill: none; stroke: currentColor; stroke-width: 2; }
.philosophy__link:hover, .philosophy__link:focus-visible { color: var(--tinta); }

/* ---------------- 07 · serviços ---------------- */
.services { padding-top: calc(100 * var(--u)); }
.services__list { margin-left: calc(285.5 * var(--u)); }
.services__item { border-top: var(--regra); }
.services__item:last-child { border-bottom: var(--regra); }
.services__btn {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: calc(25 * var(--u)) 0; text-align: left;
  font-size: calc(50 * var(--u)); line-height: 1.26; isolation: isolate;
}
.services__btn .pincel { left: calc(-40 * var(--u)); top: 50%; width: calc(479 * var(--u)); height: calc(69 * var(--u)); transform: translateY(-50%); }
.services__btn .pincel path { stroke-width: calc(52 * var(--u)); transition: stroke-dashoffset 0.6s var(--curva); }
.services__btn:hover .pincel path, .services__btn:focus-visible .pincel path { stroke-dashoffset: 0; }
.services__btn .seta { width: calc(43 * var(--u)); min-width: 20px; height: auto; transition: transform 0.5s var(--macia); }
.services__btn .seta path { fill: none; stroke: currentColor; stroke-width: 2; }
.services__btn[aria-expanded="true"] .seta { transform: rotate(-90deg); }
.services__sublist { color: var(--tinta-2); font-size: calc(32 * var(--u)); line-height: 1.25; height: 0; overflow: hidden; visibility: hidden; opacity: 0; }
.services__sublist li { max-width: calc(980 * var(--u)); }
.services__sublist li + li { margin-top: calc(10 * var(--u)); }
.services__sublist li:first-child { color: var(--tinta); }
.services__sublist .mono { font-size: max(12px, calc(20 * var(--u))); }
.services__sublist li:last-child { padding-bottom: calc(30 * var(--u)); }
.services__sublist a { color: var(--tinta); border-bottom: 1px solid var(--sinal); transition: color 0.3s; }
.services__sublist a:hover, .services__sublist a:focus-visible { color: var(--sinal); }

/* ---------------- 08 · trabalho ---------------- */
.works { padding-top: calc(100 * var(--u)); }
.works__grid {
  display: grid; gap: calc(30 * var(--u));
  grid-template-columns: 258.6fr 258.6fr 270.2fr 258.6fr 258.6fr 265.5fr;
  margin-bottom: calc(100 * var(--u));
}
.works__grid-item { display: block; }
.works__grid-item img, .works__bloco { width: 100%; object-fit: cover; border-radius: 5px; margin-bottom: calc(35 * var(--u)); background: var(--fundo-2); }
.works__subtitle { font-size: calc(50 * var(--u)); line-height: 1; opacity: 0.5; transition: opacity 0.3s; }
.works__grid-item p { opacity: 0.5; margin-top: calc(8 * var(--u)); transition: opacity 0.3s; font-size: max(14px, calc(24 * var(--u))); line-height: 1.25; }
.etiqueta { display: block; font-size: max(11px, calc(16 * var(--u))); margin-bottom: 0.4em; }
.works__grid-item:hover .works__subtitle, .works__grid-item:hover p,
.works__grid-item:focus-visible .works__subtitle, .works__grid-item:focus-visible p { opacity: 1; }

.w1 { grid-column: 1 / -1; }
.w1 img { height: calc(768.5 * var(--u)); }
.w2 { grid-column: 2 / 5; }
.w2 img { height: calc(366 * var(--u)); }
.w3 { grid-column: 5 / 7; }
.w3 img { height: calc(383 * var(--u)); }
.w4 { grid-column: 1 / 2; grid-row: 3; }
.w4 img { height: calc(210 * var(--u)); }
.w5 { grid-column: 2 / 4; grid-row: 3; }
.w5 img { height: calc(369 * var(--u)); }
.w6 { grid-column: 4 / 5; grid-row: 3; align-self: end; }
.w6 img { height: calc(209.4 * var(--u)); }
.w7 { grid-column: 6 / 7; grid-row: 3; align-self: end; }
.w7 img { height: calc(215 * var(--u)); }
.w8 { grid-column: 3 / 4; grid-row: 4; }
.w8 img { height: calc(227.5 * var(--u)); }
.w9 { grid-column: 4 / 7; grid-row: 4; margin-top: calc(67.4 * var(--u)); }
.works__bloco { height: calc(364 * var(--u)); display: flex; align-items: center; justify-content: center; border: 1px solid var(--linha); }
.works__bloco span { font-size: calc(90 * var(--u)); font-weight: 500; letter-spacing: -0.02em; color: var(--tinta); }

.works__wrapper { position: relative; }
.works__follower {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: calc(465 * var(--u)); height: calc(325 * var(--u));
  border-radius: 7px; overflow: hidden; pointer-events: none;
  transform: scale(0); background: var(--fundo-2);
}
.works__img-box img { width: 100%; height: calc(325 * var(--u)); object-fit: cover; }
.works__item { border-top: var(--regra); }
.works__item:last-child { border-bottom: var(--regra); }
.works__link { position: relative; display: block; padding: calc(30 * var(--u)) 0; }
.works__link p { font-size: calc(32 * var(--u)); font-weight: 300; max-width: calc(300 * var(--u)); margin-top: calc(10 * var(--u)); line-height: 1.25; }
.works__link:hover .works__subtitle, .works__link:focus-visible .works__subtitle { opacity: 1; }

/* ---------------- 09 · contato ---------------- */
.contact-us__wrapper { padding: calc(150 * var(--u)) 0 calc(90 * var(--u)); }
.contact-us__top-block { display: flex; align-items: stretch; }
.contact-us__title { width: calc(1100 * var(--u)); font-size: calc(152 * var(--u)); line-height: 1; text-transform: uppercase; }
.contact-us__title .serifa-it { color: var(--sinal); font-size: 1.08em; }
.contact-us__btn {
  position: relative; flex: none;
  width: calc(473 * var(--u)); aspect-ratio: 1; margin: 0 calc(73.5 * var(--u));
  border-radius: 50%; background: var(--sinal); color: var(--tinta);
  font-size: calc(64 * var(--u)); line-height: 1.05; isolation: isolate;
  transition: color 0.3s;
}
.contact-us__btn span { display: block; padding: 0 12%; }
.contact-us__anel { position: absolute; width: calc(650 * var(--u)); height: auto; left: -13%; top: 50%; transform: translateY(-50%) rotate(-8deg); z-index: -1; overflow: visible; pointer-events: none; }
.contact-us__anel path { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--curva); }
.contact-us__btn:hover .contact-us__anel path, .contact-us__btn:focus-visible .contact-us__anel path { stroke-dashoffset: 0; }
.contact-us__btn:focus-visible { outline-color: var(--tinta); }
.contact-us__bottom-block { margin-top: calc(140 * var(--u)); }
.contact-us__list { display: flex; justify-content: space-between; gap: calc(40 * var(--u)); padding: calc(50 * var(--u)) 0 calc(70 * var(--u)); border-top: var(--regra); }
.contact-us__item { display: flex; flex-direction: column; min-width: calc(250 * var(--u)); }
.contact-us__item-title { font-size: calc(50 * var(--u)); line-height: 1.14; }
.contact-us__item-text { margin: calc(50 * var(--u)) 0 calc(15 * var(--u)); line-height: 1.17; }
.contact-us__item a, .contact-us__item .mono { margin-top: auto; line-height: 1.17; }
.contact-us__item .mono { font-size: max(11px, calc(18 * var(--u))); color: var(--tinta-2); }
.contact-us__item a { color: var(--tinta-2); transition: color 0.3s; }
.contact-us__item a:hover, .contact-us__item a:focus-visible { color: var(--sinal); }
.contact-us__text { max-width: 60%; font-size: calc(40 * var(--u)); line-height: 1; text-transform: uppercase; }

/* ---------------- 10 · rodapé ---------------- */
.footer { padding: calc(50 * var(--u)) 0; }
.footer__nav { display: grid; grid-template-columns: 435fr 642.5fr 642.5fr; border-top: var(--regra); padding-top: calc(50 * var(--u)); }
.footer__logo-wrapper { display: flex; flex-direction: column; gap: calc(40 * var(--u)); align-items: flex-start; }
.footer__logo { color: var(--bone); transition: color 0.3s ease-in-out; }
.footer__logo svg { height: calc(48 * var(--u)); min-height: 24px; width: auto; }
.footer__logo:hover, .footer__logo:focus-visible { color: var(--sinal); }
.footer__email { font-size: max(14px, calc(29 * var(--u))); text-transform: uppercase; transition: color 0.3s; }
.footer__email:hover, .footer__email:focus-visible { color: var(--sinal); }
.footer__btn { width: calc(435 * var(--u)); height: calc(105 * var(--u)); min-height: 52px; font-size: calc(44 * var(--u)); background: var(--fundo-2); }
.footer__menu { display: flex; flex-direction: column; gap: calc(40 * var(--u)); margin-left: calc(400 * var(--u)); font-size: max(16px, calc(35 * var(--u))); line-height: 1; }
.footer__menu a, .footer__socials-list a { transition: color 0.3s; }
.footer__menu a:hover, .footer__menu a:focus-visible, .footer__socials-list a:hover, .footer__socials-list a:focus-visible { color: var(--sinal); }
.footer__socials { display: flex; flex-direction: column; gap: calc(40 * var(--u)); font-size: max(16px, calc(35 * var(--u))); line-height: 1; justify-self: end; width: calc(370 * var(--u)); }
.footer__socials-list { display: grid; grid-template-columns: auto auto; gap: calc(40 * var(--u)) calc(100 * var(--u)); color: var(--tinta-2); justify-content: start; }

/* ---------------- 04 · fundo dos painéis ---------------- */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(8, 8, 10, 0.9); opacity: 0; }

.painel__fechar { width: calc(70 * var(--u)); min-width: 36px; aspect-ratio: 1; flex: none; }
.painel__fechar svg { width: 100%; height: 100%; }
.painel__fechar path { stroke: currentColor; stroke-width: 3; fill: none; transition: stroke 0.3s; }
.painel__fechar:hover path, .painel__fechar:focus-visible path { stroke: var(--sinal); }

/* ---------------- 02 · gaveta: diagnóstico ---------------- */
.feedback {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: calc(1000 * var(--u)); min-width: 420px; max-width: 100vw;
  background: var(--fundo-2); border-left: 1px solid var(--linha);
  display: flex; flex-direction: column; align-items: flex-end;
  padding: calc(30 * var(--u)) calc(35 * var(--u)) calc(60 * var(--u));
  overflow-y: auto;
}
.feedback__corpo { width: 100%; margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(40 * var(--u)); padding: 0 calc(55 * var(--u)); }
.feedback__hud { font-size: max(12px, calc(18 * var(--u))); color: var(--tinta-2); }
.feedback__titulo { font-size: max(34px, calc(100 * var(--u))); line-height: 1; text-transform: uppercase; }
.feedback__texto { font-size: max(18px, calc(36 * var(--u))); line-height: 1.3; font-weight: 300; }
.feedback .button { height: calc(76 * var(--u)); min-height: 48px; padding: 0 calc(60 * var(--u)); font-size: max(17px, calc(36 * var(--u))); }
.feedback__rodape { font-size: max(11px, calc(16 * var(--u))); color: var(--tinta-2); }

/* ---------------- 01 · tela cheia: briefing ---------------- */
.form { position: fixed; inset: 0; z-index: 30; }
.form__wrapper { position: relative; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.form__left {
  position: relative; z-index: 0;
  background: var(--fundo); display: flex; flex-direction: column; justify-content: center;
  padding: 0 calc(35 * var(--u)) 0 var(--margem); gap: calc(40 * var(--u));
}
.form__hud { font-size: max(12px, calc(18 * var(--u))); color: var(--tinta-2); }
.header-text { font-size: calc(100 * var(--u)); line-height: 1; text-transform: uppercase; }
.form__header .pincel { left: -4%; width: 108%; top: 4%; height: 96%; }
.form__header .pincel path:first-child { stroke-width: calc(52 * var(--u)); }
.form__header .pincel path:last-child { stroke-width: calc(22 * var(--u)); }
.form__lede { font-size: max(18px, calc(32 * var(--u))); font-weight: 300; line-height: 1.3; max-width: calc(760 * var(--u)); }
.form__lede--peq { font-size: max(15px, calc(24 * var(--u))); }
.form__lede a { border-bottom: 1px solid currentColor; }
.form__right {
  position: relative; z-index: 1;
  background: var(--bone); color: var(--fundo);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(30 * var(--u)) var(--margem) calc(40 * var(--u)) calc(35 * var(--u));
}
.form__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(30 * var(--u)); }
.form__social { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.form__logo { width: calc(40 * var(--u)); min-width: 28px; height: auto; }
.form__social ul { display: flex; gap: calc(24 * var(--u)); font-size: max(12px, calc(16 * var(--u))); }
.form__link { border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.form__link:hover, .form__link:focus-visible { border-color: currentColor; }
.form__form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)) calc(24 * var(--u)); margin: auto 0; }
.campo { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.campo--largo { grid-column: 1 / -1; }
.campo label, .campo legend { font-family: var(--mono); text-transform: uppercase; font-size: max(12px, calc(16 * var(--u))); letter-spacing: 0.02em; padding: 0; }
.campo small { text-transform: none; font-family: var(--sans); font-size: 1em; font-weight: 300; color: var(--fundo); margin-left: 0.5em; letter-spacing: 0; }
.form__input {
  width: 100%; font: inherit; font-size: max(17px, calc(30 * var(--u))); color: var(--fundo);
  background: transparent; border: 1px solid var(--fundo); border-radius: 10px;
  padding: calc(20 * var(--u)) calc(30 * var(--u));
}
.form__input:focus { outline: none; border-color: var(--sinal); box-shadow: 0 0 0 1px var(--sinal); }
.form__input--textarea { resize: vertical; min-height: calc(160 * var(--u)); }
.form__input[aria-invalid="true"] { border-color: var(--sinal); border-width: 2px; }
.fichas { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); }
.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ficha span { display: block; padding: 0.45em 1em; border: 1px solid var(--fundo); border-radius: 50px; font-size: max(14px, calc(22 * var(--u))); transition: background 0.2s, color 0.2s; }
.ficha input:checked + span { background: var(--fundo); color: var(--bone); }
.ficha input:focus-visible + span { outline: 2px solid var(--sinal); outline-offset: 3px; }
.form__wrap { display: flex; justify-content: space-between; align-items: center; gap: calc(30 * var(--u)); }
.form__descr { font-size: max(11px, calc(14 * var(--u))); max-width: calc(420 * var(--u)); line-height: 1.4; }
.form__btn { height: calc(76 * var(--u)); min-height: 48px; padding: 0 calc(50 * var(--u)); font-size: max(17px, calc(30 * var(--u))); }
.form__btn:focus-visible { outline-color: var(--fundo); }
.form__erro { grid-column: 1 / -1; font-size: max(15px, calc(22 * var(--u))); color: var(--fundo); border-left: 4px solid var(--sinal); padding-left: 0.7em; }
.responce { margin: auto 0; display: flex; flex-direction: column; gap: calc(30 * var(--u)); }
.responce:focus { outline: none; }

/* ---------------- telas menores ---------------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .header__menu { gap: 28px; }
  .header__wrapper { gap: 28px; }
}

@media (max-width: 899px) {
  :root { --margem: 20px; }
  body { font-size: 16px; }
  .header { height: auto; padding: 20px 0; }
  .header__logo svg { height: 30px; }
  .header__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; z-index: 12; }
  .header__hamburger span { display: block; width: 30px; height: 2px; background: var(--tinta); margin-left: auto; transition: transform 0.3s, opacity 0.3s; }
  .header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .header__wrapper {
    position: fixed; inset: 0; z-index: 11; background: var(--fundo);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; padding: 0 20px;
    visibility: hidden;
  }
  .header__wrapper.aberto { visibility: visible; }
  .header__wrapper .header__btn { visibility: visible; z-index: 12; }
  .header__menu { flex-direction: column; gap: 22px; font-size: 40px; }
  .header__btn { position: fixed; left: 20px; right: 20px; bottom: 20px; height: 56px; font-size: 18px; }

  .promo { padding: 24px 0 40px; }
  .promo__abs { position: relative; }
  .promo__inner { display: flex; flex-direction: column-reverse; gap: 28px; }
  .promo__video-wrapper { transform: none; aspect-ratio: 4 / 5; border-radius: 12px; }
  .promo__hud { opacity: 1; font-size: 10px; }
  .hud--se, .hud--ie { left: 10px; } .hud--se { top: 10px; } .hud--ie, .hud--id { bottom: 10px; } .hud--id { right: 10px; }
  .promo__play { opacity: 1; visibility: visible; }
  .promo__list { flex-wrap: wrap; gap: 6px 14px; padding-top: 0; font-size: 12px; }
  .promo__greeting { margin-top: 26px; font-size: clamp(36px, 11vw, 64px); }
  .promo__note { width: auto; margin-top: 22px; font-size: 14px; }
  .promo__greeting .pincel path:first-child { stroke-width: 26px; }
  .promo__greeting .pincel path:last-child { stroke-width: 11px; }

  .title { font-size: 22px; padding-top: 12px; margin-bottom: 26px; }
  .philosophy, .services, .works { padding-top: 64px; }
  .philosophy__inner { flex-direction: column; gap: 24px; }
  .philosophy__img { width: 46%; }
  .philosophy__img path { stroke-width: 10px; }
  .philosophy__text { width: auto; font-size: 27px; gap: 26px; }
  .philosophy__link { font-size: 22px; gap: 10px; } .philosophy__link svg { width: 16px; height: 16px; }

  .services__list { margin-left: 0; }
  .services__btn { font-size: 30px; padding: 16px 0; }
  .services__btn .pincel { width: 260px; height: 44px; left: -16px; }
  .services__btn .pincel path { stroke-width: 34px; }
  .services__sublist { font-size: 17px; }
  .services__sublist li { max-width: none; } .services__sublist li + li { margin-top: 8px; }
  .services__sublist .mono { font-size: 12px; } .services__sublist li:last-child { padding-bottom: 22px; }

  .works__carrossel { overflow: hidden; margin: 0 -20px 56px; padding: 0 20px; }
  .works__grid { display: flex; gap: 0; margin-bottom: 0; }
  .works__grid-item { flex: none; width: 82%; margin-top: 0 !important; }
  .works__grid-item img, .works__bloco { height: auto !important; aspect-ratio: 16 / 10; margin-bottom: 14px; }
  .works__bloco span { font-size: 44px; }
  .works__subtitle { font-size: 26px; }
  .works__grid-item p { font-size: 15px; }
  .etiqueta { font-size: 11px; }
  .works__follower { display: none; }
  .works__link { padding: 18px 0; }
  .works__link p { font-size: 15px; max-width: none; margin-top: 6px; }

  .contact-us__wrapper { padding: 80px 0 40px; }
  .contact-us__top-block { flex-direction: column; gap: 36px; }
  .contact-us__title { width: auto; font-size: clamp(44px, 13vw, 76px); }
  .contact-us__btn { width: min(72vw, 300px); margin: 0 auto; font-size: 30px; }
  .contact-us__anel { width: 130%; }
  .contact-us__bottom-block { margin-top: 60px; }
  .contact-us__list { flex-wrap: wrap; gap: 32px 20px; padding: 32px 0 40px; }
  .contact-us__item { width: calc(50% - 10px); min-width: 0; }

  .contact-us__item-title { font-size: 24px; }
  .contact-us__item-text { margin: 14px 0 10px; font-size: 15px; }
  .contact-us__item a { font-size: 15px; }
  .contact-us__text { max-width: none; font-size: 22px; }

  .footer { padding: 30px 0 100px; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-top: 30px; }
  .footer__logo-wrapper { grid-column: 1 / -1; gap: 20px; }
  .footer__btn { width: 100%; font-size: 20px; height: 56px; }
  .footer__menu { margin-left: 0; gap: 18px; font-size: 18px; }
  .footer__socials { width: auto; justify-self: start; gap: 18px; font-size: 18px; }
  .footer__socials-list { grid-template-columns: 1fr; gap: 18px; }

  .feedback { width: 100vw; min-width: 0; padding: 16px 20px 40px; }
  .feedback__corpo { padding: 0; gap: 22px; }
  .form__wrapper { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .form__left { padding: 70px 20px 28px; gap: 14px; }
  .header-text { font-size: 38px; }
  .form__header .pincel path:first-child { stroke-width: 22px; } .form__header .pincel path:last-child { stroke-width: 10px; }
  .form__right { padding: 20px; overflow: visible; }
  .form__topo { position: absolute; top: 14px; right: 16px; left: 20px; margin: 0; color: var(--tinta); }
  .form__social { display: none; }
  .form__topo { justify-content: flex-end; }
  .form__form { grid-template-columns: 1fr; gap: 18px; }
  .form__wrap { flex-direction: column; align-items: stretch; }
  .form__btn { width: 100%; }
  .form__descr { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .promo__video-wrapper { transform: none; }
  .promo__hud { opacity: 1; }
  .promo__play { opacity: 1; visibility: visible; }
  .pincel path, .philosophy__img path { stroke-dashoffset: 0; }
  .philosophy__text span { background-position-x: 0%; }
}