@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600&family=Manrope:wght@500;600;700&display=swap");

:root {
  color-scheme: dark;
  --red: #e00000;
  --red-deep: #b80000;
  --black: #0a0a0a;
  --coal: #111111;
  --soft-black: #181818;
  --paper: #f0efeb;
  --white: #ffffff;
  --muted: #a4a4a4;
  --ink: #111111;
  --line: rgba(255,255,255,.16);
  --dark-line: rgba(10,10,10,.18);
  --pad: clamp(1.25rem, 4vw, 4.75rem);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue Condensed", sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --title-modern: Manrope, "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-neutral: "DM Sans", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem; left: .75rem;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--black);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
::selection { color: var(--white); background: var(--red); }

.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 6.25rem;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(224,0,0,.28);
  background: #000;
  transition: height .3s, background .3s, backdrop-filter .3s;
}
.site-header.scrolled {
  height: 4.75rem;
  background: #000;
  backdrop-filter: none;
}
.brand { display: inline-flex; width: max-content; flex-direction: column; line-height: .8; }
.brand-name {
  font-family: var(--display);
  font-size: 1.65rem;
  letter-spacing: .045em;
}
.brand-name span, .brand-studio { color: var(--red); }
.brand-studio { margin-top: .3rem; font-size: .49rem; font-weight: 800; letter-spacing: .58em; }
.site-header .brand {
  width: clamp(4.4rem, 5.2vw, 5.2rem);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.38);
}
.site-header.scrolled .brand { width: 4rem; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.75rem); }
.desktop-nav a {
  position: relative;
  padding: .5rem 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #d1d1d1;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: .15rem;
  height: 1px;
  background: var(--red);
  transition: right .25s;
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-cta {
  justify-self: end;
  padding: .72rem 0;
  border-bottom: 1px solid var(--red);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.header-cta span { color: var(--red); margin-left: .5rem; }
.menu-toggle { display: none; }
.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(8.7rem, 15vh, 10.5rem) var(--pad) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 18vw);
  align-items: center;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.045) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.03) 0 1px, transparent 1.5px) 0 0 / 7px 7px;
}
.hero-grid {
  position: absolute;
  inset: 6.25rem 0 0;
  opacity: .38;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), var(--line) 25%, transparent calc(25% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--line) 75%, transparent calc(75% + 1px));
}
.hero-copy { position: relative; z-index: 2; align-self: end; padding-bottom: clamp(3rem, 9vh, 7rem); }
.eyebrow, .section-label {
  margin: 0 0 clamp(2rem, 5vh, 4rem);
  color: var(--muted);
  font-size: clamp(.58rem, .75vw, .72rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.8rem; height: 1px;
  margin-right: .8rem;
  background: var(--red);
  vertical-align: middle;
}
.hero h1, .display-title, .impact h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .86;
}
.hero h1 { max-width: 13ch; font-size: clamp(4.1rem, 9.25vw, 10.4rem); }
.hero h1 span, .display-title em, .impact em { color: var(--red); font-style: normal; }
.hero-lower {
  margin-top: clamp(2rem, 5vh, 4rem);
  max-width: 67rem;
  display: grid;
  grid-template-columns: minmax(17rem, 31rem) auto;
  align-items: end;
  gap: 3rem;
}
.hero-lower > p {
  margin: 0;
  color: #c6c6c6;
  font-size: clamp(.95rem, 1.25vw, 1.2rem);
  line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; gap: 1.75rem; }
.button { white-space: nowrap; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.button-primary {
  padding: 1.1rem 1.35rem;
  background: var(--red);
  transition: background .2s, transform .2s;
}
.button-primary:hover { background: #f00000; transform: translateY(-2px); }
.button span { margin-left: .75rem; }
.button-text { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.hero-index {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
}
.hero-index strong {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.46);
  font-family: var(--display);
  font-size: clamp(7rem, 14vw, 14rem);
  line-height: .9;
}
.hero-index span {
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .24em;
  writing-mode: vertical-rl;
}
.hero-orbit {
  position: absolute;
  z-index: 1;
  width: clamp(22rem, 42vw, 43rem);
  aspect-ratio: 1;
  right: -13vw; top: 11%;
  border: 1px solid rgba(224,0,0,.32);
  border-radius: 50%;
  animation: orbit-drift 9s ease-in-out infinite alternate;
}
.hero-orbit::before, .hero-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.hero-orbit::after { inset: 33%; background: var(--red); opacity: .75; }
.hero-orbit span {
  position: absolute;
  top: 12%; left: 8%;
  color: var(--red);
  font: 700 .65rem/1 Arial;
  letter-spacing: .2em;
}
.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 1.6rem; left: var(--pad);
  display: flex;
  gap: .8rem;
  align-items: center;
  color: var(--muted);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-cue i { width: 4rem; height: 1px; background: var(--red); }

.section-shell { position: relative; padding: clamp(6rem, 11vw, 11rem) var(--pad); }
.light-section { background: var(--paper); color: var(--ink); }
.light-section .section-label { color: #5d5d5d; }
.display-title { font-size: clamp(3.9rem, 7.7vw, 8.7rem); }
.section-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  gap: 4rem;
  margin-bottom: clamp(4rem, 9vw, 8rem);
}
.section-intro {
  max-width: 37rem;
  margin: 2.5rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.65;
}
.light-section .section-intro { color: #444; }

.manifesto {
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  gap: 4rem;
  overflow: hidden;
}
.manifesto-main { position: relative; z-index: 1; }
.manifesto-copy {
  max-width: 40rem;
  margin: 4rem 0 0 auto;
  display: grid;
  gap: 1.5rem;
  color: #343434;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.7;
}
.manifesto-copy p { margin: 0; }
.section-number {
  position: absolute;
  right: -1vw; bottom: -4vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(10,10,10,.09);
  font: 900 clamp(14rem, 28vw, 32rem)/.65 var(--display);
}

.ticker {
  height: clamp(6rem, 9vw, 9rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker div {
  width: max-content;
  white-space: nowrap;
  font: 900 clamp(2.7rem, 5vw, 5.3rem)/1 var(--display);
  letter-spacing: .035em;
  animation: marquee 28s linear infinite;
}
.ticker b { margin: 0 1.2rem; color: var(--red); font-family: var(--body); font-size: .6em; }

.services { overflow: hidden; }
.services::before {
  content: "11";
  position: absolute;
  right: -2vw; top: 10vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  font: 900 35vw/.7 var(--display);
}
.services-list { position: relative; border-top: 1px solid var(--line); }
.service-row {
  position: relative;
  min-height: 16rem;
  padding: 2.8rem 0;
  display: grid;
  grid-template-columns: .5fr 1.65fr 1.5fr 1.5fr;
  gap: clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding .3s, background .3s;
}
.service-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--pad) * -1);
  z-index: -1;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s ease;
}
.service-row:hover::before, .service-row:focus::before { transform: scaleY(1); }
.service-row:hover, .service-row:focus { padding-left: 1rem; padding-right: 1rem; outline: 0; }
.service-number { color: var(--red); font: 900 1.25rem/1 var(--display); }
.service-row:hover .service-number, .service-row:focus .service-number { color: var(--white); }
.service-title h3 {
  max-width: 14ch;
  margin: 0 0 1rem;
  font: 900 clamp(2rem, 3.2vw, 3.7rem)/.94 var(--display);
  text-transform: uppercase;
}
.service-title span {
  color: var(--muted);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.service-row > p { margin: 0; color: #bdbdbd; line-height: 1.7; font-size: .95rem; }
.service-row ul { list-style: none; color: #8c8c8c; font-size: .78rem; line-height: 1.9; }
.service-row li::before { content: "—"; margin-right: .5rem; color: var(--red); }
.service-row:hover p, .service-row:hover ul, .service-row:hover .service-title span,
.service-row:focus p, .service-row:focus ul, .service-row:focus .service-title span { color: rgba(255,255,255,.88); }
.service-row:hover li::before, .service-row:focus li::before { color: var(--white); }

.projects { overflow: hidden; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.project-card { margin: 0; }
.project-card.wide { grid-column: span 2; }
.project-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9d8d3;
}
.project-card.wide .project-visual { aspect-ratio: 16 / 7; }
.project-visual img, .project-visual video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-visual video { display: block; background: var(--black); }
.project-visual .project-media-contain { object-fit: contain; background: var(--black); }
.project-visual video { cursor: pointer; touch-action: manipulation; }
.project-card:hover .project-visual img, .project-card:hover .project-visual video { transform: scale(1.035); }
.project-placeholder { position: absolute; inset: 0; overflow: hidden; }
.project-placeholder::before, .project-placeholder::after { content: ""; position: absolute; }
.theme-red { background: var(--red); }
.theme-red::before {
  width: 42%; aspect-ratio: 1;
  left: 31%; top: 16%;
  border: clamp(2rem, 5vw, 6rem) solid #0a0a0a;
  border-radius: 50%;
}
.theme-red::after {
  content: "01";
  right: 3%; bottom: -7%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  font: 900 clamp(8rem, 20vw, 20rem)/1 var(--display);
}
.theme-light { background: #e5e3dc; }
.theme-light::before {
  inset: 12% 18%;
  border: 1px solid #111;
  transform: rotate(-7deg);
  box-shadow: 1.2rem 1.2rem 0 var(--red);
}
.theme-light::after {
  content: "E";
  left: 33%; top: 12%;
  color: #111;
  font: 900 clamp(10rem, 24vw, 24rem)/1 var(--display);
}
.theme-lines {
  background:
    repeating-linear-gradient(105deg, transparent 0 2.3rem, rgba(255,255,255,.15) 2.3rem calc(2.3rem + 1px)),
    #111;
}
.theme-lines::before {
  width: 40%; aspect-ratio: 1;
  left: 30%; top: 18%;
  background: var(--red);
  border-radius: 50%;
  filter: blur(.1px);
}
.theme-lines::after {
  content: "03";
  inset: 25% auto auto 8%;
  color: #fff;
  font: 900 clamp(6rem, 13vw, 12rem)/1 var(--display);
  mix-blend-mode: difference;
}
.theme-type { background: #111; }
.theme-type::before {
  content: "PRESENÇA";
  left: 4%; top: 12%;
  color: #fff;
  font: 900 clamp(5rem, 15vw, 15rem)/.78 var(--display);
  letter-spacing: -.04em;
}
.theme-type::after {
  content: "VISUAL";
  right: 3%; bottom: 5%;
  color: var(--red);
  font: 900 clamp(5rem, 15vw, 15rem)/.78 var(--display);
}
.project-meta {
  padding: 1.25rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  border-top: 1px solid var(--dark-line);
}
.project-meta h3 { margin: 0; font: 900 clamp(1.6rem, 2.5vw, 2.6rem)/1 var(--display); text-transform: uppercase; }
.project-meta p { margin: .5rem 0 0; max-width: 31rem; color: #555; font-size: .82rem; line-height: 1.5; }
.project-meta span { color: var(--red); font-size: .63rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.before-after {
  display: grid;
  grid-template-columns: minmax(16rem,.78fr) minmax(0,1.5fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: end;
  border-top: 1px solid var(--line);
}
.before-after-heading { align-self: start; }
.compare {
  --position: 54%;
  position: relative;
  min-height: clamp(25rem, 58vw, 48rem);
  overflow: hidden;
  background: #1b1b1b;
  user-select: none;
}
.compare-layer { position: absolute; inset: 0; padding: clamp(1.5rem, 3vw, 3rem); overflow: hidden; }
.compare-before {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.07) 48% 52%, transparent 52%),
    repeating-linear-gradient(90deg, #202020 0 3rem, #242424 3rem 6rem);
  color: #777;
}
.compare-after {
  clip-path: inset(0 0 0 var(--position));
  background: var(--red);
  color: var(--white);
}
.compare-after::before {
  content: "";
  position: absolute;
  width: 70%; aspect-ratio: 1;
  right: -15%; top: 6%;
  border: clamp(2rem, 5vw, 5rem) solid #0a0a0a;
  border-radius: 50%;
}
.compare-after.has-image::before { display: none; }
.compare-layer span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(10,10,10,.72);
  color: var(--white);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .2em;
  backdrop-filter: blur(7px);
}
.compare-layer strong {
  position: absolute;
  left: 8%; bottom: -4%;
  font: 900 clamp(18rem, 43vw, 38rem)/.72 var(--display);
}
.compare-after strong { left: auto; right: 7%; color: var(--white); }
.compare-layer small {
  position: absolute;
  z-index: 1;
  right: 2rem; bottom: 2rem;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compare-before small { right: auto; left: 2rem; }
.compare-line {
  position: absolute;
  z-index: 3;
  top: 0; bottom: 0; left: var(--position);
  width: 1px;
  background: var(--white);
  pointer-events: none;
}
.compare-line i {
  position: absolute;
  top: 50%; left: 50%;
  width: 3.2rem; height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-style: normal;
  transform: translate(-50%,-50%);
}
.compare input {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-help {
  grid-column: 2;
  margin: -5rem 0 0;
  transform: translateY(7rem);
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compare-help span { color: var(--red); margin-left: .6rem; }

.process { overflow: hidden; }
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 2rem; left: 0; right: 0;
  height: 1px;
  background: var(--dark-line);
}
.timeline li { position: relative; padding: 5rem clamp(1rem, 2vw, 2.5rem) 0 0; }
.timeline li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.55rem; left: 0;
  width: .9rem; height: .9rem;
  border: .28rem solid var(--paper);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.timeline span { color: var(--red); font: 900 1rem/1 var(--display); }
.timeline h3 { margin: 1.5rem 0 1rem; font: 900 clamp(1.8rem, 2.8vw, 3.2rem)/1 var(--display); text-transform: uppercase; }
.timeline p { max-width: 15rem; margin: 0; color: #4c4c4c; font-size: .9rem; line-height: 1.65; }

.about {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(17rem, .95fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(4rem, 8vw, 9rem);
  overflow: hidden;
}
.about-art {
  position: relative;
  min-height: 37rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, var(--line) 50%, transparent 50.2%);
}
.about-art strong {
  position: relative;
  z-index: 1;
  color: var(--red);
  font: 900 clamp(12rem, 25vw, 25rem)/1 var(--display);
}
.about-ring {
  position: absolute;
  width: 72%; aspect-ratio: 1;
  border: 1px solid rgba(224,0,0,.65);
  border-radius: 50%;
}
.about-ring::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}
.about-art i {
  position: absolute;
  left: 1.5rem; bottom: 1.5rem;
  color: var(--muted);
  font-size: .55rem;
  font-style: normal;
  letter-spacing: .22em;
}
.about-copy .display-title { font-size: clamp(3.5rem, 6.8vw, 7.6rem); }
.about-text {
  max-width: 42rem;
  margin: 4rem 0 0 auto;
  display: grid;
  gap: 1.35rem;
  color: #b8b8b8;
  font-size: clamp(.95rem, 1.18vw, 1.12rem);
  line-height: 1.75;
}
.about-text p { margin: 0; }

.impact {
  position: relative;
  min-height: 100vh;
  padding: clamp(7rem, 12vw, 12rem) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--red);
}
.impact .section-label { position: relative; z-index: 2; color: rgba(255,255,255,.65); }
.impact h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(5rem, 12vw, 13.5rem);
}
.impact h2 span { color: var(--black); }
.impact > p:not(.section-label) {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin: 4rem 8vw 0 0;
  color: var(--white);
  font: 900 clamp(1.6rem, 3vw, 3.7rem)/.98 var(--display);
  text-align: right;
}
.impact > p em { color: var(--black); }
.impact-mark {
  position: absolute;
  right: -3vw; bottom: -6vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(10,10,10,.28);
  font: 900 clamp(20rem, 43vw, 48rem)/.7 var(--display);
}
.impact-lines {
  position: absolute;
  inset: 0;
  opacity: .2;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 1px), #fff 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(90deg, transparent calc(66.66% - 1px), #fff 66.66%, transparent calc(66.66% + 1px));
}

.contact {
  display: grid;
  grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr);
  gap: clamp(4rem, 10vw, 11rem);
}
.contact-intro { position: sticky; top: 7rem; align-self: start; }
.contact-intro .display-title { font-size: clamp(4.6rem, 8vw, 9rem); }
.direct-whatsapp {
  max-width: 26rem;
  margin-top: 3rem;
  padding: 1.15rem 1.25rem;
  display: flex;
  justify-content: space-between;
  border: 0;
  background: var(--red);
  color: var(--white);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.direct-whatsapp span { color: var(--white); }
.direct-whatsapp:hover, .direct-whatsapp:focus-visible { background: var(--red-deep); }
.contact-form {
  color-scheme: light;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem 1.6rem;
  align-self: start;
}
.field { position: relative; }
.field-full { grid-column: span 2; }
.field label {
  display: block;
  margin-bottom: .8rem;
  color: #3a3a3a;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.field label span { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #969696;
  border-radius: 0;
  padding: .65rem 0 1rem;
  background: transparent;
  color: var(--ink);
  outline: 0;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select { cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: #888; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
.field [aria-invalid="true"] { border-color: var(--red); }
.form-bottom {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.form-bottom p { margin: 0; color: #666; font-size: .72rem; line-height: 1.5; }
.form-bottom p.error { color: var(--red); font-weight: 700; }
.submit-button {
  min-width: 14rem;
  padding: 1.2rem 1.4rem;
  display: flex;
  justify-content: space-between;
  border: 0;
  background: var(--red);
  color: var(--white);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.submit-button:hover { background: var(--red-deep); transform: translateY(-2px); }

.site-footer { padding: clamp(5rem, 8vw, 8rem) var(--pad) 2rem; border-top: 1px solid var(--line); background: #000; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: start;
}
.footer-brand .brand-name { font-size: clamp(2.5rem, 4vw, 4.5rem); }
.footer-brand .brand-studio { font-size: clamp(.48rem, .7vw, .72rem); }
.footer-brand {
  width: clamp(7rem, 10vw, 9rem);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-top nav, .footer-social { display: flex; flex-direction: column; gap: 1rem; }
.footer-top nav a, .footer-social a {
  color: #b9b9b9;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-top nav a:hover, .footer-social a:hover { color: var(--white); }
.footer-social { justify-self: end; text-align: right; }
.footer-bottom {
  margin-top: clamp(5rem, 9vw, 9rem);
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 2rem;
  border-top: 1px solid var(--line);
  color: #737373;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-bottom p { margin: 0; }

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes orbit-drift { to { transform: translate(-2rem, 1.5rem) rotate(4deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1050px) {
  .service-row { grid-template-columns: .35fr 1.25fr 1.25fr; }
  .service-row ul { grid-column: 2 / -1; columns: 2; }
  .before-after { grid-template-columns: 1fr; }
  .before-after-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
  .before-after-heading .section-intro { grid-column: 2; }
  .compare-help { grid-column: 1; margin: 0; transform: none; }
  .about { grid-template-columns: .8fr 1.2fr; }
}

@media (max-width: 850px) {
  .site-header { height: 5.25rem; grid-template-columns: 1fr auto; }
  .site-header .brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle {
    justify-self: end;
    width: 2.75rem; height: 2.75rem;
    display: grid;
    place-content: center;
    gap: .42rem;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle i { display: block; width: 1.65rem; height: 1px; background: var(--white); transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(.25rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-.25rem) rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    z-index: 25;
    inset: 0;
    padding: 8rem var(--pad) 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--black);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1rem);
    transition: visibility .3s, opacity .3s, transform .3s;
  }
  .mobile-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a {
    padding: .72rem 0;
    border-bottom: 1px solid var(--line);
    font: 900 clamp(2.9rem, 11vw, 5rem)/1 var(--display);
    text-transform: uppercase;
  }
  .mobile-menu nav span { margin-right: 1rem; color: var(--red); font: 700 .65rem/1 var(--body); }
  .mobile-menu > p { margin: 0; color: var(--muted); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }

  .hero { min-height: 100svh; grid-template-columns: 1fr; padding-top: 7.5rem; }
  .hero-grid { inset: 5.25rem 0 0; }
  .hero-copy { align-self: center; padding-bottom: 5rem; }
  .hero h1 { font-size: clamp(2.8rem, 14vw, 7.2rem); }
  .hero-lower { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions { flex-wrap: wrap; }
  .hero-index { display: none; }
  .hero-orbit { width: 26rem; right: -14rem; top: 14%; }

  .manifesto, .section-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .manifesto { min-height: auto; }
  .manifesto-copy { margin-left: 0; }
  .display-title { font-size: clamp(3.5rem, 13vw, 6.3rem); }

  .service-row { min-height: auto; grid-template-columns: .25fr 1fr; }
  .service-row > p, .service-row ul { grid-column: 2; }
  .service-row ul { columns: 1; }
  .service-row::before { inset: 0 calc(var(--pad) * -1); }
  .service-row:hover, .service-row:focus { padding-left: 0; padding-right: 0; }

  .project-grid { gap: 2rem 1rem; }
  .project-meta { grid-template-columns: 1fr; }
  .project-meta span { grid-row: 1; }
  .project-card.wide .project-visual { aspect-ratio: 4 / 3; }

  .before-after-heading { display: block; }
  .compare { min-height: 33rem; }

  .timeline { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
  .timeline::before { display: none; }
  .timeline li { padding-top: 2rem; border-top: 1px solid var(--dark-line); }
  .timeline li::before { top: -.45rem; }

  .about { min-height: auto; grid-template-columns: 1fr; }
  .about-art { min-height: 25rem; order: 2; }
  .about-text { margin-left: 0; }

  .impact { min-height: 80vh; }
  .impact h2 { font-size: clamp(4.2rem, 17vw, 8rem); }
  .impact > p:not(.section-label) { margin-right: 0; }

  .contact { grid-template-columns: 1fr; }
  .contact-intro { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-social { justify-self: start; text-align: left; }
  .footer-bottom { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hero-lower > p { max-width: 28rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .button-primary { width: 100%; display: flex; justify-content: space-between; }
  .section-shell { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .display-title { font-size: clamp(2.85rem, 12.5vw, 5.5rem); }
  .section-heading { margin-bottom: 3.5rem; }
  .section-label { margin-bottom: 1.5rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card.wide { grid-column: auto; }
  .project-card.wide .project-visual, .project-visual { aspect-ratio: 1 / 1; }
  .project-meta { padding-top: 1rem; }
  .compare { min-height: 27rem; }
  .compare-layer strong { font-size: 17rem; }
  .compare-layer small { max-width: 8rem; }
  .timeline { grid-template-columns: 1fr; gap: 2rem; }
  .timeline p { max-width: 22rem; }
  .about-art { min-height: 21rem; }
  .impact { min-height: 75vh; }
  .impact h2 { font-size: clamp(2.9rem, 14vw, 6.2rem); }
  .contact-form { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .form-bottom { grid-template-columns: 1fr; }
  .submit-button { width: 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-social { margin-top: 1rem; }
  .footer-bottom { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .service-row::before { display: none; }
  .service-row:hover .service-number { color: var(--red); }
  .service-row:hover p { color: #bdbdbd; }
  .service-row:hover ul, .service-row:hover .service-title span { color: #8c8c8c; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Tipografia refinada aplicada exclusivamente aos 23 textos marcados. */
#hero-title,
#manifesto-title,
#services-title,
#projects-title,
#before-after-title,
#process-title,
#about-title,
#impact-title,
#contact-title {
  font-family: var(--title-modern);
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: -.045em;
  line-height: .96;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

.service-row:nth-child(-n+5) .service-title h3,
.project-card:nth-child(-n+4) .project-meta h3,
.timeline li:nth-child(-n+4) h3,
.impact > p:not(.section-label) {
  font-family: var(--text-neutral);
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

#hero-title {
  max-width: 15ch;
  font-size: clamp(3.35rem, 7.8vw, 8.75rem);
}

#manifesto-title,
#services-title,
#projects-title,
#process-title {
  max-width: 16ch;
  font-size: clamp(3.3rem, 6.35vw, 7.5rem);
}

#before-after-title {
  max-width: 12ch;
  font-size: clamp(3.15rem, 5.35vw, 6.25rem);
}

#about-title {
  max-width: 16ch;
  font-size: clamp(3rem, 4.85vw, 6.1rem);
  line-height: .99;
}

#impact-title {
  max-width: 13.5ch;
  font-size: clamp(4.6rem, 10vw, 11.25rem);
  line-height: .96;
}

#contact-title {
  max-width: 13ch;
  font-size: clamp(3.6rem, 6.45vw, 7.5rem);
}

.service-row:nth-child(-n+5) .service-title h3 {
  max-width: 16ch;
  font-size: clamp(1.55rem, 2.25vw, 2.65rem);
}

.project-card:nth-child(-n+4) .project-meta h3 {
  max-width: 24ch;
  font-size: clamp(1.3rem, 1.8vw, 2rem);
  line-height: 1.15;
}

.timeline li:nth-child(-n+4) h3 {
  max-width: 12ch;
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  line-height: 1.12;
}

.impact > p:not(.section-label) {
  max-width: 22ch;
  font-size: clamp(1.45rem, 2.4vw, 3.1rem);
  line-height: 1.15;
}

@media (max-width: 850px) {
  #hero-title {
    max-width: 14ch;
    font-size: clamp(2.9rem, 9.6vw, 5.2rem);
  }

  #manifesto-title,
  #services-title,
  #projects-title,
  #process-title,
  #contact-title {
    max-width: 15ch;
    font-size: clamp(2.8rem, 9.5vw, 5.1rem);
    line-height: .98;
  }

  #before-after-title {
    font-size: clamp(2.75rem, 8.8vw, 4.8rem);
  }

  #about-title {
    max-width: 15ch;
    font-size: clamp(2.7rem, 8.5vw, 4.9rem);
  }

  #impact-title {
    max-width: 13ch;
    font-size: clamp(3.6rem, 12vw, 7rem);
  }

  .service-row:nth-child(-n+5) .service-title h3 {
    max-width: 17ch;
    font-size: clamp(1.45rem, 4.5vw, 2.2rem);
  }

  .timeline li:nth-child(-n+4) h3 {
    max-width: 14ch;
    font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  }
}

@media (max-width: 560px) {
  #hero-title {
    max-width: 13ch;
    font-size: clamp(2.25rem, 10.8vw, 4.25rem);
    line-height: .98;
  }

  #manifesto-title,
  #services-title,
  #projects-title,
  #process-title,
  #contact-title {
    max-width: 14ch;
    font-size: clamp(2.05rem, 9.8vw, 4rem);
  }

  #before-after-title,
  #about-title {
    max-width: 14ch;
    font-size: clamp(2.1rem, 9.5vw, 3.75rem);
    line-height: 1;
  }

  #impact-title {
    max-width: 12.5ch;
    font-size: clamp(2.5rem, 11.8vw, 5.3rem);
    line-height: .98;
  }

  .service-row:nth-child(-n+5) .service-title h3 {
    max-width: 18ch;
    font-size: clamp(1.35rem, 6vw, 1.9rem);
  }

  .project-card:nth-child(-n+4) .project-meta h3,
  .timeline li:nth-child(-n+4) h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.65rem);
  }

  .impact > p:not(.section-label) {
    max-width: 19ch;
    font-size: clamp(1.3rem, 5.5vw, 2rem);
    line-height: 1.2;
  }
}

/* Comparador quadrado: imagem e vídeo preenchem a mesma área sem bordas. */
.before-after { align-items: start; }
.compare {
  width: min(100%, 30rem);
  min-height: 0;
  aspect-ratio: var(--compare-aspect, 1 / 1);
  justify-self: center;
  background: #080d11;
}
.compare-layer {
  padding: 0;
  background-color: #080d11;
}
.compare-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  pointer-events: none;
}
.compare-help {
  margin: 1rem 0 0;
  transform: none;
}

/* Consentimento de Analytics: camada fixa, sem alterar o fluxo do layout. */
.analytics-consent {
  position: fixed;
  z-index: 80;
  left: var(--pad);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: min(34rem, calc(100vw - (var(--pad) * 2)));
  padding: 1.35rem;
  border: 1px solid rgba(255,255,255,.18);
  background: #0a0a0a;
  color: var(--white);
  box-shadow: 0 1.2rem 3.5rem rgba(0,0,0,.38);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  background: var(--red);
}
.analytics-consent-label {
  margin: 0 0 .7rem;
  color: var(--red);
  font-family: var(--text-neutral);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.analytics-consent h2 {
  margin: 0;
  font-family: var(--title-modern);
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.analytics-consent > p:last-of-type {
  margin: .8rem 0 0;
  color: #bdbdbd;
  font-size: .86rem;
  line-height: 1.55;
}
.analytics-consent-actions {
  display: flex;
  gap: .65rem;
  margin-top: 1.15rem;
}
.analytics-consent-actions button {
  min-height: 2.75rem;
  padding: .72rem 1rem;
  border: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.analytics-consent-deny { background: transparent; }
.analytics-consent-deny:hover,
.analytics-consent-deny:focus-visible { border-color: var(--white); }
.analytics-consent-accept {
  border-color: var(--red) !important;
  background: var(--red);
  color: var(--white);
}
.analytics-consent-accept:hover,
.analytics-consent-accept:focus-visible { background: var(--red-deep); }

@media (max-width: 560px) {
  .analytics-consent {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
    padding: 1.1rem;
  }
  .analytics-consent-actions { display: grid; grid-template-columns: 1fr; }
  .analytics-consent-actions button { width: 100%; }
}