/* ===== styles.css ===== */
/* TRIBYTE — sistema visual: preto, branco e vermelho neon. */
@font-face {
  font-family: Space Grotesk;
  src: url("assets/space-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Space Mono;
  src: url("assets/space-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #0b0b0b;
  --surface: #121212;
  --surface-alt: #191919;
  --text: #f4f3ee;
  --muted: #a5a5a2;
  --line: #303030;
  --accent: #fb1023;
  --accent-ink: #ff5260;
  --on-accent: #130608;
  --header: rgba(11, 11, 11, 0.91);
  --display: "Space Grotesk", Arial, sans-serif;
  --mono: "Space Mono", monospace;
  --gutter: clamp(22px, 4.4vw, 80px);
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f1f0ea;
  --surface: #e7e5de;
  --surface-alt: #deddd6;
  --text: #151515;
  --muted: #5b5b58;
  --line: #c9c7c0;
  --accent: #fb1023;
  --accent-ink: #a90d1c;
  --header: rgba(241, 240, 234, 0.94);
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  transition:
    background 0.3s,
    color 0.3s;
  overflow-x: clip;
}
body.modal-open,
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button,
a,
input,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  background: none;
  border: 0;
}
button[hidden],
[hidden] {
  display: none !important;
}
svg {
  display: block;
  max-width: 100%;
}
img {
  max-width: 100%;
  display: block;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 7px;
}
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}
::selection {
  background: var(--accent);
  color: #0b0b0b;
}
.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;
}
.section-shell {
  padding-inline: var(--gutter);
  max-width: 1800px;
  margin-inline: auto;
}
.section-space {
  padding-block: 110px;
}
.mono-label {
  font: 10px/1.5 var(--mono);
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.mono-label i {
  width: 7px;
  height: 7px;
  background: var(--accent);
  display: inline-block;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 100;
  background: var(--accent);
  color: #000;
  padding: 12px 22px;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
}
.cursor-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(251, 16, 35, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s,
    height 0.2s,
    background 0.2s,
    opacity 0.2s;
  mix-blend-mode: difference;
}
.cursor-halo.is-hovering {
  width: 56px;
  height: 56px;
  background: rgba(251, 16, 35, 0.15);
}
/* Header */
.site-header {
  height: 93px;
  padding: 0 var(--gutter);
  max-width: 1800px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  backdrop-filter: blur(18px);
}
.wordmark {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -1.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.brand-icon {
  width: 26px;
  height: 28px;
  color: var(--accent);
}
.brand-dot {
  font-size: 11px;
  align-self: flex-start;
  margin: 1px 0 0 -4px;
  letter-spacing: 0;
}
.desktop-nav {
  display: flex;
  gap: 34px;
  align-items: center;
  margin-left: 80px;
}
.desktop-nav a {
  font-size: 12px;
  position: relative;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
  transform: scaleX(1);
}
.desktop-nav a span {
  font: 8px var(--mono);
  color: var(--accent-ink);
  margin-left: 5px;
  vertical-align: super;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 8px;
}
.theme-toggle {
  border: 1px solid var(--line);
  border-radius: 50%;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
}
.moon-icon {
  display: none;
}
:root[data-theme="light"] .sun-icon {
  display: none;
}
:root[data-theme="light"] .moon-icon {
  display: block;
}
.header-cta {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 25px;
}
.header-cta span {
  font-size: 23px;
  color: var(--accent-ink);
}
.menu-toggle {
  display: none;
}
.mobile-menu {
  display: none;
}
/* Abertura e objeto vetorial */
.hero {
  position: relative;
  padding-top: 28px;
  overflow: hidden;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 9px var(--mono);
  letter-spacing: 0.07em;
  color: var(--muted);
}
.status-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px #fb102366;
  flex: none;
}
.hero-location {
  margin-left: auto;
  color: var(--muted);
}
.hero-composition {
  position: relative;
  min-height: 635px;
  padding-top: 63px;
}
.hero-copy {
  position: relative;
  z-index: 3;
  pointer-events: none;
  max-width: 820px;
}
.hero-copy a {
  pointer-events: auto;
}
.hero h1 {
  font-size: clamp(72px, 8.7vw, 151px);
  line-height: 0.91;
  letter-spacing: -0.065em;
  font-weight: 700;
}
.hero h1 > span {
  display: block;
}
.hero h1 .red-type {
  color: var(--accent);
  font-size: 0.97em;
}
.title-period {
  color: var(--text);
}
.hero-intro {
  display: flex;
  align-items: flex-start;
  gap: 23px;
  margin-top: 30px;
  margin-left: 5px;
}
.mini-cross {
  color: var(--accent-ink);
  font-size: 40px;
  line-height: 1.25;
  font-family: Arial, sans-serif;
}
.hero-intro p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.button {
  min-height: 48px;
  padding: 13px 21px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.5;
  transition:
    transform 0.25s,
    background 0.25s;
  white-space: nowrap;
}
.button span {
  font-size: 19px;
  line-height: 1;
}
.button:hover {
  transform: translateY(-3px);
}
.button-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.button-primary:hover {
  background: #ff6170;
}
.button-outline {
  border-color: var(--line);
  color: var(--text);
}
.hero .button {
  margin: 26px 0 42px 5px;
}
.hero-art {
  position: absolute;
  width: 55%;
  height: 590px;
  top: 0;
  right: -3%;
  perspective: 900px;
  z-index: 1;
}
.art-grid {
  position: absolute;
  inset: 20px 25px 40px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
  transform: rotate(-12deg);
}
.artifact {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 40px #ff183524);
  transform: rotate(-15deg) rotateY(-13deg) rotateX(10deg);
  animation: artifact-float 8s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.artifact-shadow {
  position: absolute;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 18%;
  background: radial-gradient(ellipse, #ff173820, transparent 65%);
  filter: blur(20px);
}
.art-orbit {
  position: absolute;
  width: 76%;
  height: 76%;
  left: 12%;
  top: 13%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: rotate(-25deg) scaleX(0.75);
  opacity: 0.5;
}
.orbit-two {
  transform: rotate(40deg) scaleX(0.75);
  opacity: 0.25;
}
.art-coordinate {
  position: absolute;
  font: 9px var(--mono);
  color: var(--muted);
  z-index: 3;
}
.coordinate-top {
  top: 30px;
  right: 17%;
}
.coordinate-bottom {
  bottom: 65px;
  left: 20%;
  letter-spacing: 0.15em;
}
.artifact-caption {
  position: absolute;
  right: 6%;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
  font: 9px/1.6 var(--mono);
}
.caption-rule {
  display: block;
  width: 50px;
  height: 1px;
  background: var(--accent);
}
.art-spark {
  position: absolute;
  font: 18px var(--mono);
  color: var(--accent);
  z-index: 3;
}
.spark-one {
  top: 100px;
  left: 16%;
}
.spark-two {
  bottom: 126px;
  right: 7%;
}
.hero-bottom {
  min-height: 76px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 8px var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hero-bottom p span {
  color: var(--accent-ink);
  margin-right: 17px;
}
.hero-bottom a {
  display: flex;
  align-items: center;
  gap: 17px;
  color: var(--text);
}
.hero-bottom a > span {
  font-size: 23px;
}
.hero-bottom-note {
  text-align: right;
}
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--accent);
  color: #180508;
  padding: 15px 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  animation: ticker 38s linear infinite;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.marquee b {
  font-size: 25px;
  line-height: 1;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
/* Projetos: interfaces criadas em HTML/CSS, sem capturas fictícias. */
.section-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 40px;
}
.section-aside {
  color: var(--muted);
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 45px;
}
h2 {
  font-size: clamp(35px, 4.6vw, 72px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1.04;
}
.outline-text {
  -webkit-text-stroke: 1px var(--text);
  color: transparent;
}
.section-heading > p,
.project-heading-side > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.project-heading-side {
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.project-heading-side > p {
  align-self: flex-start;
}
.project-filters {
  display: flex;
  gap: 6px;
}
.filter-button {
  font-size: 11px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: all 0.2s;
}
.filter-button:hover {
  border-color: var(--accent);
}
.filter-button.is-active {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.filter-button sup {
  font: 7px var(--mono);
  margin-left: 4px;
}
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 30px;
}
.project-featured {
  grid-column: 1/-1;
}
.project-open {
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
}
.project-visual {
  height: 360px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffffff06;
  background: #1f1f22;
}
.project-featured .project-visual {
  height: 535px;
}
.visual-label {
  position: absolute;
  left: 25px;
  top: 22px;
  font: 8px var(--mono);
  color: #d4d2e6;
  letter-spacing: 0.07em;
  z-index: 3;
}
.visual-label-right {
  left: auto;
  right: 25px;
  font-size: 7px;
  color: #a5a1c1;
}
.smart-visual {
  background: #c8c2d9;
  background-image:
    radial-gradient(ellipse at 75% 20%, #e8def5, transparent 70%),
    linear-gradient(125deg, #b4a9ca, #d8d4e4);
}
.smart-visual .visual-label {
  color: #49415d;
}
.smart-visual .visual-label-right {
  color: #6d627e;
}
.smart-dashboard {
  position: absolute;
  top: 17%;
  width: 73%;
  height: 88%;
  left: 13.5%;
  background: #f7f7fb;
  border: 6px solid #ffffff70;
  border-radius: 13px;
  display: flex;
  transform: perspective(1100px) rotateX(8deg) rotateY(-7deg) rotateZ(-3deg);
  box-shadow: 0 30px 60px #40334f35;
  transition: transform 0.7s var(--ease);
  color: #222333;
  overflow: hidden;
}
.project-open:hover .smart-dashboard {
  transform: perspective(1100px) rotateX(2deg) rotateY(-3deg) rotateZ(-1deg)
    translateY(-10px);
}
.mock-sidebar {
  width: 57px;
  flex: none;
  border-right: 1px solid #e8e7f0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 10px;
  background: white;
  gap: 19px;
}
.mock-logo {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -2px;
  color: #7764ef;
  margin-bottom: 15px;
}
.mock-logo > span {
  font-size: 8px;
  vertical-align: top;
}
.mock-nav {
  font-size: 17px;
  color: #a0a0ae;
  font-style: normal;
  line-height: 1;
}
.mock-nav.active {
  background: #ece8fd;
  border-radius: 6px;
  padding: 7px;
  color: #7764ef;
}
.mock-nav-bottom {
  margin-top: auto;
}
.mock-main {
  padding: 21px 30px;
  flex: 1;
  min-width: 0;
}
.mock-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #92929d;
}
.mock-top b {
  color: #535364;
  font-weight: 500;
  margin-left: 20px;
}
.mock-avatar {
  border-radius: 50%;
  background: #e5dff8;
  color: #7764ef;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: 8px;
}
.mock-welcome {
  display: flex;
  flex-direction: column;
  margin: 24px 0 20px;
}
.mock-welcome small {
  font-size: 7px;
  color: #9291a5;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.mock-welcome strong {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.6;
}
.mock-welcome > span {
  font-size: 9px;
  color: #8b8a9a;
}
.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mock-stats > div {
  border: 1px solid #e9e8f0;
  border-radius: 8px;
  background: white;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
}
.mock-stats small {
  font-size: 7px;
  color: #8b8a9a;
}
.mock-stats strong {
  font-size: 30px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: -1px;
}
.mock-stats strong span {
  font-size: 16px;
  color: #a5a1b4;
  margin-left: 2px;
}
.mock-stats em {
  font-size: 6px;
  font-style: normal;
  color: #799c8a;
}
.mock-stats strong.stat-online {
  font-size: 23px;
  line-height: 2.35;
}
.mock-chart {
  border: 1px solid #e9e8f0;
  background: white;
  border-radius: 8px;
  padding: 17px 18px;
  margin-top: 15px;
}
.mock-chart > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  margin-bottom: 14px;
}
.mock-chart > div strong {
  font-weight: 500;
}
.mock-chart > div span {
  color: #9d9aad;
  font-size: 7px;
}
.mock-chart i {
  font-style: normal;
  margin-left: 10px;
}
.mock-chart svg {
  width: 100%;
  height: 100px;
}
.chart-times {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 6px;
  color: #a4a0ae;
}
.project-view {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #171718;
  background: #f6f5f1;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 10px;
  z-index: 4;
  transition:
    background 0.2s,
    transform 0.25s;
}
.project-view > span {
  font-size: 19px;
  line-height: 1;
}
.project-open:hover .project-view {
  background: var(--accent);
  transform: translateY(-3px);
}
.project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
}
.project-index {
  font: 8px var(--mono);
  color: var(--muted);
  letter-spacing: 0.03em;
}
.project-info h3 {
  font-weight: 500;
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  margin-top: 4px;
}
.project-info h3 span {
  color: var(--accent-ink);
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.25s;
}
.project-open:hover h3 span {
  transform: translate(3px, -3px);
}
.project-info > p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.sales-visual {
  background: #b6c4b1;
}
.sales-visual .visual-label {
  color: #344337;
}
.sales-visual .visual-label-right {
  color: #4f6555;
}
.sales-composition {
  position: absolute;
  inset: 0;
}
.sales-orbit {
  width: 330px;
  height: 330px;
  position: absolute;
  border: 1px solid #75927444;
  border-radius: 50%;
  left: 30px;
  top: 30px;
}
.sales-panel {
  position: absolute;
  width: 66%;
  left: 18%;
  top: 18%;
  height: 82%;
  background: #17251f;
  border: 1px solid #59725b;
  color: #eff8ee;
  border-radius: 13px;
  transform: rotate(-7deg);
  padding: 20px;
  box-shadow: 0 18px 40px #1a392342;
  transition: transform 0.65s var(--ease);
}
.project-open:hover .sales-panel {
  transform: rotate(-3deg) translateY(-10px);
}
.sales-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
}
.sales-symbol {
  font-size: 22px;
  color: #c1f99f;
  margin-right: 4px;
}
.sales-heading > span:nth-child(2) {
  flex: 1;
}
.sales-heading small {
  display: block;
  font-size: 6px;
  color: #8b9b91;
  margin-top: 3px;
}
.sales-heading > span:last-child {
  font-size: 12px;
}
.sales-total {
  margin-top: 25px;
}
.sales-total small {
  font-size: 6px;
  letter-spacing: 0.07em;
  color: #8c9f93;
}
.sales-total strong {
  font-size: 24px;
  line-height: 1.1;
  display: block;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-top: 4px;
}
.sales-total strong span {
  float: right;
  font-size: 34px;
  color: #c2ff9e;
  margin-top: -14px;
}
.bars {
  height: 76px;
  display: flex;
  align-items: flex-end;
  gap: 11px;
  margin-top: 17px;
  border-bottom: 1px solid #3e5146;
  padding-bottom: 0;
}
.bars i {
  height: var(--bar);
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#cbff9c, #729a62);
}
.bars i:nth-child(1) { --bar: 33%; }
.bars i:nth-child(2) { --bar: 50%; }
.bars i:nth-child(3) { --bar: 44%; }
.bars i:nth-child(4) { --bar: 64%; }
.bars i:nth-child(5) { --bar: 57%; }
.bars i:nth-child(6) { --bar: 81%; }
.bars i:nth-child(7) { --bar: 72%; }
.bars i:nth-child(8) { --bar: 96%; }
.bars i:nth-child(even) {
  background: #557e57;
}
.sales-panel-footer {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  color: #9aae9c;
  margin-top: 12px;
}
.sales-badge {
  position: absolute;
  bottom: 43px;
  left: 7%;
  width: 151px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #e5f7d5;
  color: #253b25;
  transform: rotate(5deg);
  box-shadow: 0 8px 20px #1a392315;
  font-size: 30px;
}
.sales-badge span {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}
.brand-visual {
  background: #211719;
}
.brand-visual > .visual-label {
  color: #c5a1a3;
}
.brand-visual > .visual-label-right {
  color: #916c70;
}
.brand-poster {
  position: absolute;
  top: 15%;
  left: 23%;
  width: 54%;
  height: 92%;
  background: #fb1023;
  transform: rotate(9deg);
  padding: 23px;
  color: #1b090c;
  box-shadow: -20px 20px 60px #0004;
  transition: transform 0.6s var(--ease);
  overflow: hidden;
}
.project-open:hover .brand-poster {
  transform: rotate(4deg) translateY(-10px);
}
.poster-kicker {
  font: 6px/1.4 var(--mono);
  display: block;
  letter-spacing: 0.03em;
}
.poster-symbol {
  position: absolute;
  right: 20px;
  top: 22px;
  font-size: 30px;
  line-height: 1;
}
.brand-poster strong {
  font-size: 94px;
  line-height: 0.8;
  letter-spacing: -0.1em;
  display: block;
  margin-top: 35px;
  position: relative;
  z-index: 2;
}
.brand-poster strong > span {
  font-size: 14px;
  letter-spacing: 0;
  vertical-align: top;
  position: absolute;
  right: -2px;
  bottom: 45px;
}
.poster-bottom {
  display: block;
  font: 6px var(--mono);
  margin-top: 25px;
}
.poster-lines {
  position: absolute;
  bottom: -70px;
  width: 300px;
  height: 150px;
  border: 1px solid #5e132d;
  border-radius: 50%;
  transform: rotate(-30deg);
  box-shadow:
    0 -8px 0 -1px #fb1023,
    0 -9px 0 #5e132d,
    0 -17px 0 -1px #fb1023,
    0 -18px 0 #5e132d,
    0 -26px 0 -1px #fb1023,
    0 -27px 0 #5e132d;
}
/* Estúdio e retratos tipográficos */
.studio {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.studio-intro {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 9%;
  align-items: start;
  margin-bottom: 65px;
}
.studio-intro h2 {
  font-size: clamp(39px, 4.7vw, 76px);
  line-height: 1.1;
}
.studio-intro h2 > span {
  color: var(--muted);
}
.studio-story {
  position: relative;
  padding-top: 20px;
  max-width: 450px;
}
.studio-asterisk {
  font-size: 54px;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 28px;
}
.studio-story p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 17px;
  line-height: 1.85;
}
.studio-story p:first-of-type {
  color: var(--text);
}
.studio-signature {
  font: 8px var(--mono);
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-top: 15px;
  display: inline-block;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}
.team-card {
  border: 1px solid var(--line);
  min-width: 0;
}
.team-art {
  height: 275px;
  position: relative;
  overflow: hidden;
  background: #252525;
  color: #eae9e3;
  isolation: isolate;
}
.team-number {
  position: absolute;
  left: 20px;
  top: 18px;
  font: 8px var(--mono);
  z-index: 3;
}
.team-monogram {
  position: absolute;
  font-size: 210px;
  letter-spacing: -0.1em;
  line-height: 1;
  font-weight: 500;
  bottom: -1px;
  left: 23px;
  z-index: 2;
  mix-blend-mode: screen;
  transition: transform 0.6s var(--ease);
}
.team-card:hover .team-monogram {
  transform: translateY(-7px);
}
.team-shape {
  position: absolute;
  display: block;
  z-index: 1;
}
.shape-g {
  width: 230px;
  height: 230px;
  border: 55px solid #fb1023;
  border-radius: 50%;
  right: -33px;
  top: 35px;
  box-shadow: 0 0 55px #fb102322;
  transform: rotate(-25deg);
}
.shape-g::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 70px;
  right: -75px;
  top: 55px;
  background: #252525;
  transform: rotate(40deg);
}
.marcio-art {
  background: #dcdad3;
  color: #151515;
}
.marcio-art .team-monogram {
  mix-blend-mode: multiply;
}
.shape-m {
  width: 165px;
  height: 230px;
  right: 14px;
  top: 32px;
  background: repeating-linear-gradient(
    0deg,
    #fb1023 0 7px,
    transparent 7px 16px
  );
  transform: skewY(-25deg);
}
.lucas-art {
  background: #221416;
}
.shape-l {
  right: -38px;
  top: 26px;
  width: 180px;
  height: 235px;
  border: 48px solid #fb1023;
  transform: rotate(30deg);
  box-shadow: 0 0 50px #fb102315;
}
.team-art-caption {
  position: absolute;
  bottom: 15px;
  right: 13px;
  writing-mode: vertical-rl;
  font: 6px var(--mono);
  letter-spacing: 0.14em;
  z-index: 3;
}
.team-info {
  padding: 20px 20px 24px;
}
.team-info h3 {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.team-info > span {
  font-size: 10px;
  color: var(--muted);
  display: inline-block;
  margin-top: 12px;
}
.team-footer {
  border-top: 1px solid var(--line);
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 7px var(--mono);
  color: var(--muted);
}
.team-footer a {
  color: var(--text);
  font-size: 9px;
}
.team-footer a:hover {
  color: var(--accent-ink);
}
.team-small-symbol {
  font-size: 17px;
  color: var(--accent-ink);
}
/* Serviços com acordeão nativo */
.services {
  border-top: 1px solid var(--line);
}
.services .section-heading h2 {
  font-size: clamp(34px, 4.2vw, 67px);
}
.services .section-heading > p {
  font-size: 12px;
  flex: none;
  max-width: 280px;
}
.service-list {
  border-top: 1px solid var(--line);
}
.service-item {
  border-bottom: 1px solid var(--line);
}
.service-item summary {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 32px 0;
  cursor: pointer;
}
.service-item summary::-webkit-details-marker {
  display: none;
}
.service-number {
  font: 10px var(--mono);
  color: var(--accent-ink);
  width: 37px;
  flex: none;
}
.service-item h3 {
  font-size: clamp(22px, 2.7vw, 42px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.service-tags {
  font: 8px var(--mono);
  color: var(--muted);
  margin-left: auto;
}
.service-expand {
  width: 35px;
  height: 35px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 25px;
  font-weight: 400;
  transition:
    transform 0.25s,
    background 0.25s;
}
.service-item[open] .service-expand {
  transform: rotate(45deg);
  background: var(--accent);
  color: #151515;
  border-color: var(--accent);
}
.service-body {
  padding: 0 60px 34px 67px;
  max-width: 790px;
  animation: appear 0.35s var(--ease);
}
.service-body > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.service-chips span {
  font: 8px var(--mono);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.service-body > a {
  font-size: 11px;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 25px;
}
.service-body > a span {
  color: var(--accent-ink);
  font-size: 20px;
}
.service-item summary:hover h3 {
  color: var(--accent-ink);
}
/* Processo */
.process {
  background: var(--text);
  color: var(--bg);
}
.process .mono-label i {
  background: var(--accent);
}
.process-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  margin-top: 15px;
}
.process-heading {
  position: sticky;
  top: 130px;
  align-self: start;
}
.process-heading h2 {
  font-size: clamp(45px, 5.5vw, 85px);
  line-height: 1;
}
.process-heading h2 em {
  font-style: normal;
  color: #db243c;
}
.process-heading > p {
  font-size: 13px;
  line-height: 1.8;
  margin-top: 25px;
  opacity: 0.65;
}
.process-arrow {
  font-size: 110px;
  color: #db243c;
  line-height: 1.4;
  display: block;
}
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.process-steps li {
  border-top: 1px solid currentColor;
  padding: 27px 0 36px;
}
.process-steps li > span {
  font: 8px var(--mono);
  opacity: 0.6;
}
.process-steps h3 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 16px 0 12px;
}
.process-steps p {
  font-size: 12px;
  max-width: 370px;
  line-height: 1.85;
  opacity: 0.68;
}
.process-steps li:last-child {
  padding-bottom: 0;
}
/* Briefing: dados ficam no navegador até o visitante escolher compartilhar. */
.contact {
  border-bottom: 1px solid var(--line);
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 8%;
  margin-top: 16px;
}
.contact-copy h2 {
  font-size: clamp(47px, 6.2vw, 95px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}
.contact-copy h2 > span {
  color: var(--accent-ink);
}
.contact-copy h2 > .contact-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--text);
  font-size: 0.64em;
  letter-spacing: -0.04em;
  line-height: 1.55;
}
.contact-copy > p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 28px;
  line-height: 1.8;
}
.contact-note {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 42px;
}
.contact-note > span {
  color: var(--accent);
  font-size: 40px;
  line-height: 1;
}
.contact-note > p {
  font: 8px/1.7 var(--mono);
  color: var(--muted);
}
.contact-form {
  padding-top: 9px;
  align-self: start;
}
.form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 9px var(--mono);
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 27px;
}
.form-heading > span:last-child {
  font-size: 22px;
  color: var(--accent-ink);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.contact-form label {
  font-size: 10px;
  display: block;
  line-height: 1.8;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  padding: 12px 0;
  margin-top: 4px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
  opacity: 0.65;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--accent-ink);
}
fieldset {
  border: 0;
  padding: 0;
  margin: 30px 0 27px;
  min-width: 0;
}
legend {
  padding: 0;
  font-size: 10px;
  margin-bottom: 13px;
}
.service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.service-options label {
  position: relative;
  cursor: pointer;
}
.service-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.service-options label > span {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 10px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.service-options input:checked + span {
  border-color: var(--accent);
  background: #fb102312;
  color: var(--accent-ink);
}
.service-options input:focus-visible + span {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}
.form-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  margin-top: 27px;
}
.form-bottom > p {
  font: 7px/1.8 var(--mono);
  color: var(--muted);
}
.form-bottom .button {
  font-size: 11px;
  min-height: 45px;
  gap: 25px;
}
.form-status {
  font-size: 10px;
  color: var(--accent-ink);
  margin-top: 10px;
}
.site-footer {
  padding-top: 52px;
  padding-bottom: 28px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}
.footer-wordmark {
  font-size: clamp(50px, 12.8vw, 205px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.08em;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
.footer-wordmark > span {
  font-size: 0.12em;
  letter-spacing: 0;
  margin-top: 0.15em;
}
.footer-wordmark svg {
  width: 0.65em;
  height: 0.65em;
  margin: 0.08em 0 0 0.33em;
  color: var(--accent);
}
.back-top {
  width: 59px;
  height: 59px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex: none;
  transition: background 0.25s;
}
.back-top:hover {
  background: var(--accent);
  color: #151515;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font: 7px var(--mono);
  color: var(--muted);
}
.footer-dot {
  color: var(--accent);
  font-size: 7px;
  margin: 0 7px;
}
.privacy-button {
  font: 8px var(--mono);
  padding: 5px 0;
  color: var(--text);
}
.privacy-button:hover {
  color: var(--accent-ink);
}
/* Diálogos */
dialog {
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0;
  width: calc(100% - 36px);
  max-height: 90svh;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: #000b;
  backdrop-filter: blur(10px);
}
dialog[open] {
  animation: dialog-in 0.3s var(--ease);
}
.dialog-close {
  position: absolute;
  right: 17px;
  top: 17px;
  z-index: 4;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  background: var(--bg);
}
.project-dialog {
  max-width: 940px;
}
.project-dialog[open] {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
}
.dialog-project-art {
  padding: 35px;
  color: #18060c;
  background: var(--accent);
  min-height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.dialog-project-art::after {
  content: "";
  width: 350px;
  height: 350px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 130px;
  left: -100px;
  opacity: 0.3;
  box-shadow:
    0 0 0 25px transparent,
    0 0 0 26px currentColor,
    0 0 0 50px transparent,
    0 0 0 51px currentColor;
}
.dialog-art-index {
  font: 12px var(--mono);
  position: relative;
  z-index: 1;
}
.dialog-art-symbol {
  font-size: 140px;
  line-height: 1;
  align-self: flex-end;
  position: relative;
  z-index: 1;
}
.dialog-art-name {
  font-size: 60px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.07em;
  position: relative;
  z-index: 1;
}
.dialog-content {
  padding: 65px 40px 40px;
}
.dialog-content .mono-label {
  font-size: 8px;
  color: var(--accent-ink);
}
.dialog-content h2 {
  font-size: 38px;
  letter-spacing: -0.06em;
  margin: 15px 0 20px;
}
.dialog-lead {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.dialog-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  border-block: 1px solid var(--line);
  padding: 20px 0;
  margin: 25px 0;
}
.dialog-facts small {
  font: 7px var(--mono);
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.dialog-facts span {
  font-size: 11px;
}
.dialog-content h3 {
  font-size: 15px;
  font-weight: 500;
}
.project-features {
  padding-left: 17px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 10px;
}
.project-features li::marker {
  color: var(--accent-ink);
}
.dialog-note {
  font: 8px/1.8 var(--mono);
  color: var(--muted);
  margin: 20px 0 25px;
}
.dialog-content .button {
  font-size: 10px;
  width: 100%;
  white-space: normal;
  gap: 15px;
}
.briefing-dialog,
.privacy-dialog {
  max-width: 620px;
  padding: 50px;
}
.briefing-dialog > h2,
.privacy-dialog > h2 {
  font-size: 43px;
  margin: 20px 0;
}
.briefing-dialog > h2 > span {
  color: var(--accent-ink);
}
.briefing-dialog > p,
.privacy-dialog > p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 18px;
}
.briefing-dialog textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px;
  width: 100%;
  min-height: 220px;
  margin-top: 23px;
  color: var(--text);
  font: 10px/1.9 var(--mono);
  resize: vertical;
}
.briefing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.briefing-actions .button {
  font-size: 10px;
  gap: 15px;
  flex: 1;
}
.noscript-note {
  padding: 20px;
  background: var(--surface);
  border-top: 1px solid var(--accent);
  font-size: 12px;
  text-align: center;
}
/* Melhoria progressiva: conteúdo visível mesmo sem JavaScript. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease);
}
.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.team-card:nth-child(2) {
  transition-delay: 0.08s;
}
.team-card:nth-child(3) {
  transition-delay: 0.16s;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes artifact-float {
  0%,
  100% {
    transform: rotate(-15deg) rotateY(-13deg) rotateX(10deg) translateY(0);
  }
  50% {
    transform: rotate(-11deg) rotateY(-8deg) rotateX(5deg) translateY(-15px);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Tablets */
@media (min-width: 1550px) {
  .hero-composition {
    min-height: 770px;
    padding-top: 90px;
  }
  .hero-art {
    height: 730px;
  }
  .hero-intro p {
    font-size: 16px;
  }
  .hero .button {
    margin-top: 32px;
  }
  .project-featured .project-visual {
    height: 640px;
  }
  .mock-main {
    padding: 30px 40px;
  }
  .mock-welcome strong {
    font-size: 29px;
  }
  .mock-welcome {
    margin-block: 30px;
  }
  .mock-chart svg {
    height: 150px;
  }
  .team-art {
    height: 340px;
  }
  .team-monogram {
    font-size: 260px;
  }
}
@media (max-width: 1150px) {
  .desktop-nav {
    gap: 23px;
    margin-left: 0;
  }
  .header-actions {
    gap: 16px;
  }
  .hero-composition {
    min-height: 595px;
  }
  .hero-art {
    width: 57%;
    height: 530px;
    right: -5%;
    top: 10px;
  }
  .hero h1 {
    font-size: 9.7vw;
  }
  .hero-bottom-note {
    display: none;
  }
  .section-space {
    padding-block: 85px;
  }
  .project-info > p {
    font-size: 10px;
  }
  .project-info h3 {
    font-size: 20px;
  }
  .project-visual {
    height: 320px;
  }
  .project-featured .project-visual {
    height: 470px;
  }
  .mock-main {
    padding: 17px 23px;
  }
  .mock-welcome {
    margin: 18px 0;
  }
  .mock-stats > div {
    padding: 10px;
  }
  .mock-chart {
    margin-top: 12px;
  }
  .mock-chart svg {
    height: 80px;
  }
  .sales-panel {
    top: 20%;
    width: 73%;
    left: 14%;
    padding: 18px;
  }
  .sales-total {
    margin-top: 19px;
  }
  .sales-panel-footer {
    font-size: 5px;
  }
  .brand-poster strong {
    font-size: 76px;
  }
  .brand-poster {
    padding: 21px;
  }
  .team-art {
    height: 240px;
  }
  .team-monogram {
    font-size: 175px;
  }
  .team-info h3 {
    font-size: 22px;
  }
  .shape-g {
    right: -65px;
  }
  .shape-m {
    right: -12px;
  }
  .services .section-heading {
    align-items: flex-start;
  }
  .services .section-heading > p {
    font-size: 11px;
    max-width: 210px;
  }
  .service-tags {
    font-size: 7px;
  }
  .contact-layout {
    gap: 6%;
  }
  .contact-copy h2 {
    font-size: 6.5vw;
  }
  .form-row {
    gap: 17px;
  }
  .form-bottom {
    gap: 15px;
  }
  .footer-bottom {
    font-size: 6px;
  }
}
/* Celulares e navegação por toque */
@media (max-width: 800px) {
  html {
    scroll-padding-top: 86px;
  }
  .site-header {
    height: 76px;
    gap: 15px;
  }
  .wordmark {
    font-size: 22px;
  }
  .brand-icon {
    width: 22px;
  }
  .desktop-nav,
  .header-cta {
    display: none;
  }
  .header-actions {
    gap: 12px;
  }
  .theme-toggle {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 35px;
  }
  .menu-toggle span {
    width: 20px;
    height: 1px;
    background: var(--text);
    transition: transform 0.25s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  .mobile-menu:not([hidden]) {
    display: flex;
    position: fixed;
    inset: 76px 0 0;
    z-index: 49;
    background: var(--bg);
    padding: 30px var(--gutter);
    flex-direction: column;
  }
  .mobile-menu > a {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    font-size: 30px;
    letter-spacing: -0.04em;
    display: flex;
    gap: 15px;
    align-items: center;
  }
  .mobile-menu > a > small {
    font: 9px var(--mono);
    color: var(--accent-ink);
    margin-right: 10px;
  }
  .mobile-menu > a > span {
    margin-left: auto;
    color: var(--accent-ink);
  }
  .mobile-menu > p {
    margin-top: auto;
    font: 10px var(--mono);
    color: var(--muted);
    padding-block: 30px;
  }
  .hero {
    padding-top: 23px;
  }
  .hero-eyebrow {
    font-size: 7px;
    gap: 6px;
  }
  .hero-location {
    font-size: 7px;
  }
  .hero-composition {
    min-height: 600px;
    padding-top: 60px;
  }
  .hero h1 {
    font-size: clamp(65px, 11.4vw, 92px);
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-art {
    width: 62%;
    height: 410px;
    right: -11%;
    top: 127px;
    opacity: 0.8;
  }
  .hero-intro {
    margin-top: 34px;
    gap: 17px;
  }
  .hero-intro p {
    font-size: 12px;
  }
  .mini-cross {
    font-size: 34px;
  }
  .hero .button {
    margin-left: 5px;
    margin-top: 25px;
  }
  .art-coordinate,
  .artifact-caption {
    display: none;
  }
  .art-spark {
    display: none;
  }
  .hero-bottom {
    min-height: 64px;
    font-size: 7px;
  }
  .hero-bottom p span {
    margin-right: 10px;
  }
  .hero-bottom a {
    font-size: 7px;
    gap: 10px;
  }
  .marquee {
    padding-block: 12px;
  }
  .marquee-track {
    font-size: 12px;
    gap: 30px;
  }
  .marquee b {
    font-size: 21px;
  }
  .section-space {
    padding-block: 65px;
  }
  .section-topline {
    padding-bottom: 28px;
  }
  .section-aside {
    display: none;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .project-heading {
    align-items: flex-start;
  }
  .project-heading-side {
    min-width: 0;
    align-self: flex-end;
    gap: 20px;
  }
  .project-heading-side > p {
    font-size: 11px;
  }
  .project-filters {
    gap: 5px;
  }
  .filter-button {
    font-size: 9px;
    padding: 7px 10px;
  }
  .project-grid {
    gap: 32px 20px;
  }
  .project-featured .project-visual {
    height: 360px;
  }
  .project-visual {
    height: 260px;
  }
  .visual-label {
    font-size: 6px;
    left: 16px;
    top: 16px;
  }
  .visual-label-right {
    font-size: 5px;
    right: 16px;
    left: auto;
  }
  .smart-dashboard {
    width: 85%;
    left: 7.5%;
    height: 95%;
    top: 18%;
    border-width: 4px;
  }
  .mock-sidebar {
    width: 42px;
    padding: 14px 8px;
    gap: 15px;
  }
  .mock-logo {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .mock-nav {
    font-size: 12px;
  }
  .mock-main {
    padding: 13px 18px;
  }
  .mock-top {
    font-size: 7px;
  }
  .mock-top b {
    margin-left: 10px;
  }
  .mock-avatar {
    width: 18px;
    height: 18px;
    font-size: 6px;
  }
  .mock-welcome {
    margin: 16px 0 13px;
  }
  .mock-welcome small {
    font-size: 5px;
  }
  .mock-welcome strong {
    font-size: 18px;
  }
  .mock-welcome > span {
    font-size: 7px;
  }
  .mock-stats {
    gap: 8px;
  }
  .mock-stats small {
    font-size: 5px;
  }
  .mock-stats strong {
    font-size: 22px;
  }
  .mock-stats strong span {
    font-size: 11px;
  }
  .mock-stats strong.stat-online {
    font-size: 17px;
  }
  .mock-stats em {
    font-size: 4px;
  }
  .mock-stats > div {
    padding: 8px 9px;
  }
  .mock-chart {
    padding: 12px;
    margin-top: 10px;
  }
  .mock-chart > div:first-child {
    font-size: 6px;
    margin-bottom: 10px;
  }
  .mock-chart > div span {
    font-size: 5px;
  }
  .mock-chart svg {
    height: 64px;
  }
  .project-info {
    align-items: flex-start;
    gap: 5px;
  }
  .project-index {
    font-size: 6px;
  }
  .project-info h3 {
    font-size: 18px;
  }
  .project-info > p {
    display: none;
  }
  .project-view {
    padding: 7px 10px;
    right: 13px;
    bottom: 13px;
    font-size: 8px;
    gap: 14px;
  }
  .sales-panel {
    width: 76%;
    padding: 14px;
    top: 22%;
    left: 12%;
  }
  .sales-heading {
    font-size: 8px;
    gap: 6px;
  }
  .sales-heading small {
    font-size: 5px;
  }
  .sales-total strong {
    font-size: 20px;
  }
  .sales-total {
    margin-top: 15px;
  }
  .bars {
    height: 60px;
    gap: 7px;
    margin-top: 13px;
  }
  .sales-badge {
    width: 122px;
    height: 50px;
    font-size: 24px;
    bottom: 35px;
    left: 5%;
    gap: 7px;
  }
  .sales-badge span {
    font-size: 8px;
  }
  .brand-poster {
    width: 65%;
    left: 17.5%;
    padding: 20px;
    height: 100%;
    top: 20%;
  }
  .brand-poster strong {
    font-size: 64px;
    margin-top: 25px;
  }
  .poster-kicker {
    font-size: 5px;
  }
  .poster-symbol {
    right: 15px;
    top: 16px;
    font-size: 24px;
  }
  .poster-bottom {
    font-size: 5px;
    margin-top: 20px;
  }
  .brand-poster strong > span {
    font-size: 11px;
    bottom: 31px;
    right: 0;
  }
  .studio-intro {
    gap: 35px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 40px;
  }
  .studio-intro h2 {
    font-size: clamp(33px, 5vw, 42px);
  }
  .studio-story {
    padding-top: 0;
  }
  .studio-story p {
    font-size: 11px;
    line-height: 1.85;
  }
  .studio-asterisk {
    font-size: 38px;
    margin-bottom: 20px;
  }
  .studio-signature {
    font-size: 6px;
  }
  .team-grid {
    gap: 15px;
  }
  .team-art {
    height: 195px;
  }
  .team-monogram {
    font-size: 140px;
    left: 13px;
  }
  .team-number {
    font-size: 6px;
    left: 14px;
    top: 14px;
  }
  .team-art-caption {
    font-size: 5px;
    right: 8px;
  }
  .shape-g {
    width: 170px;
    height: 170px;
    border-width: 40px;
    right: -60px;
    top: 38px;
  }
  .shape-g::after {
    width: 120px;
    height: 60px;
    right: -50px;
    top: 35px;
  }
  .shape-m {
    width: 130px;
    height: 175px;
    right: -20px;
  }
  .shape-l {
    width: 130px;
    height: 185px;
    border-width: 37px;
    right: -35px;
  }
  .team-info {
    padding: 16px 14px 18px;
  }
  .team-info h3 {
    font-size: 18px;
  }
  .team-info > span {
    font-size: 8px;
  }
  .team-footer {
    padding: 10px 14px;
    font-size: 5px;
  }
  .team-footer a {
    font-size: 7px;
  }
  .services .section-heading {
    display: block;
  }
  .services .section-heading > p {
    margin-top: 22px;
    max-width: none;
    font-size: 12px;
  }
  .services .section-heading h2 {
    font-size: clamp(33px, 5vw, 45px);
  }
  .service-item summary {
    gap: 16px;
    padding-block: 25px;
  }
  .service-number {
    width: 24px;
    font-size: 8px;
  }
  .service-item h3 {
    font-size: 25px;
  }
  .service-tags {
    display: none;
  }
  .service-expand {
    margin-left: auto;
    width: 29px;
    height: 29px;
    font-size: 20px;
  }
  .service-body {
    padding: 0 30px 28px 40px;
  }
  .service-body p {
    font-size: 12px;
  }
  .service-chips span {
    font-size: 7px;
  }
  .process-layout {
    gap: 8%;
  }
  .process-heading h2 {
    font-size: 47px;
  }
  .process-heading p {
    font-size: 11px;
  }
  .process-steps h3 {
    font-size: 21px;
  }
  .process-steps p {
    font-size: 11px;
  }
  .process-steps li {
    padding-top: 22px;
    padding-bottom: 28px;
  }
  .process-arrow {
    font-size: 85px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .contact-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: 25px;
  }
  .contact-copy h2 {
    font-size: 62px;
    grid-row: span 2;
  }
  .contact-copy > p {
    font-size: 12px;
    margin: 0;
  }
  .contact-note {
    margin-top: 22px;
  }
  .contact-note > span {
    font-size: 32px;
  }
  .contact-note > p {
    font-size: 7px;
  }
  .contact-form {
    max-width: 100%;
    padding-top: 0;
  }
  .form-row {
    gap: 25px;
  }
  .form-bottom {
    flex-wrap: nowrap;
  }
  .footer-top {
    margin-bottom: 30px;
  }
  .footer-wordmark {
    font-size: 13vw;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 15px;
    font-size: 6px;
  }
  .footer-bottom > span:first-child {
    flex: 1;
    min-width: 240px;
  }
  .back-top {
    width: 45px;
    height: 45px;
    font-size: 23px;
  }
  .site-footer {
    padding-top: 40px;
  }
  .dialog-content {
    padding: 58px 27px 30px;
  }
  .dialog-art-name {
    font-size: 43px;
  }
  .dialog-project-art {
    padding: 25px;
    min-height: 490px;
  }
  .dialog-art-symbol {
    font-size: 110px;
  }
  .dialog-content h2 {
    font-size: 31px;
  }
  .dialog-lead {
    font-size: 12px;
  }
  .dialog-facts {
    gap: 12px;
  }
  .dialog-facts span {
    font-size: 10px;
  }
  .cursor-halo {
    display: none;
  }
}
@media (max-width: 540px) {
  .hero-location {
    display: none;
  }
  .hero-composition {
    padding-top: 48px;
    min-height: 705px;
  }
  .hero h1 {
    font-size: clamp(54px, 12.4vw, 68px);
    line-height: 0.95;
  }
  .hero-art {
    width: 100%;
    height: 300px;
    top: 165px;
    right: 0;
    opacity: 0.9;
    pointer-events: none;
  }
  .hero-intro {
    margin-top: 285px;
    gap: 14px;
  }
  .hero-intro p {
    font-size: 11px;
    line-height: 1.7;
  }
  .desktop-break {
    display: none;
  }
  .hero-intro p {
    max-width: 270px;
  }
  .mini-cross {
    font-size: 31px;
  }
  .hero .button {
    margin: 21px 0 30px 5px;
    font-size: 11px;
    min-height: 44px;
    padding: 11px 16px;
    gap: 28px;
  }
  .hero-bottom {
    gap: 10px;
    min-height: 62px;
    font-size: 6px;
  }
  .hero-bottom p {
    max-width: 155px;
    line-height: 1.8;
  }
  .hero-bottom p span {
    display: block;
  }
  .hero-bottom a {
    font-size: 6px;
    gap: 8px;
  }
  .hero-bottom a > span {
    font-size: 20px;
  }
  .art-grid {
    opacity: 0.22;
  }
  .coordinate-top {
    display: none;
  }
  .section-space {
    padding-block: 54px;
  }
  .mono-label {
    font-size: 8px;
  }
  .section-topline {
    padding-bottom: 26px;
  }
  .project-heading {
    display: block;
  }
  .project-heading h2 {
    font-size: 43px;
  }
  .project-heading-side {
    margin-top: 24px;
    align-items: flex-start;
    gap: 20px;
  }
  .project-heading-side > p {
    font-size: 12px;
  }
  .project-heading-side > p br {
    display: none;
  }
  .project-filters {
    gap: 6px;
  }
  .filter-button {
    font-size: 10px;
    padding: 7px 13px;
  }
  .project-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .project-featured {
    grid-column: auto;
  }
  .project-featured .project-visual {
    height: 282px;
  }
  .project-visual {
    height: 310px;
  }
  .smart-dashboard {
    width: 109%;
    left: 7%;
    height: 105%;
    top: 22%;
    transform: perspective(1100px) rotateX(5deg) rotateY(-7deg) rotateZ(-4deg);
  }
  .mock-sidebar {
    width: 34px;
    padding: 11px 6px;
    gap: 12px;
  }
  .mock-logo {
    font-size: 15px;
  }
  .mock-nav {
    font-size: 10px;
  }
  .mock-main {
    padding: 13px;
  }
  .mock-welcome {
    margin-block: 14px 12px;
  }
  .mock-welcome strong {
    font-size: 15px;
  }
  .mock-welcome > span {
    font-size: 6px;
  }
  .mock-stats {
    gap: 5px;
  }
  .mock-stats > div {
    padding: 7px;
  }
  .mock-stats small {
    font-size: 4px;
  }
  .mock-stats strong {
    font-size: 19px;
  }
  .mock-stats strong.stat-online {
    font-size: 14px;
  }
  .mock-stats em {
    font-size: 3px;
  }
  .mock-chart {
    margin-top: 9px;
    padding: 10px;
  }
  .mock-chart svg {
    height: 50px;
  }
  .visual-label {
    font-size: 6px;
    left: 13px;
    top: 14px;
  }
  .visual-label-right {
    font-size: 5px;
    right: 13px;
    left: auto;
  }
  .project-info {
    margin-top: 13px;
  }
  .project-info h3 {
    font-size: 22px;
    margin-top: 3px;
  }
  .project-index {
    font-size: 7px;
  }
  .project-info > p {
    display: block;
    font-size: 9px;
    max-width: 122px;
    align-self: center;
  }
  .sales-panel {
    width: 69%;
    height: 85%;
    top: 20%;
    left: 17%;
    padding: 19px;
  }
  .sales-heading {
    font-size: 9px;
  }
  .sales-total strong {
    font-size: 26px;
  }
  .sales-total {
    margin-top: 24px;
  }
  .bars {
    height: 70px;
    gap: 9px;
  }
  .sales-badge {
    width: 137px;
    height: 57px;
    font-size: 27px;
    left: 6%;
    bottom: 30px;
  }
  .sales-badge span {
    font-size: 9px;
  }
  .brand-poster {
    width: 57%;
    left: 22%;
    top: 19%;
    padding: 22px;
  }
  .brand-poster strong {
    font-size: 80px;
    margin-top: 30px;
  }
  .brand-poster strong > span {
    bottom: 40px;
  }
  .poster-kicker {
    font-size: 6px;
  }
  .poster-symbol {
    font-size: 28px;
    right: 17px;
    top: 18px;
  }
  .poster-bottom {
    font-size: 5px;
    margin-top: 25px;
  }
  .studio-intro {
    display: block;
    margin-bottom: 30px;
  }
  .studio-intro h2 {
    font-size: 41px;
  }
  .studio-story {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 16px;
  }
  .studio-asterisk {
    grid-row: span 3;
    font-size: 36px;
    align-self: start;
    margin-top: 2px;
  }
  .studio-story p {
    font-size: 12px;
    line-height: 1.8;
  }
  .studio-signature {
    font-size: 6px;
    margin-top: 5px;
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-card {
    display: grid;
    grid-template-columns: 42% 58%;
    position: relative;
    min-height: 220px;
  }
  .team-art {
    grid-row: span 2;
    height: 100%;
    min-height: 220px;
    border-right: 1px solid var(--line);
  }
  .team-monogram {
    font-size: 135px;
    bottom: 10px;
    left: 7px;
  }
  .team-number {
    font-size: 6px;
    left: 12px;
    top: 13px;
  }
  .team-info {
    align-self: center;
    padding: 28px 20px 10px;
  }
  .team-info h3 {
    font-size: 23px;
    line-height: 1.25;
  }
  .team-info > span {
    font-size: 9px;
    margin-top: 13px;
  }
  .team-footer {
    padding: 12px 20px;
    align-self: end;
    font-size: 6px;
    gap: 6px;
    min-height: 38px;
  }
  .team-footer a {
    font-size: 8px;
  }
  .team-art-caption {
    font-size: 4px;
  }
  .shape-g {
    width: 155px;
    height: 155px;
    border-width: 38px;
    right: -82px;
    top: 43px;
  }
  .shape-g::after {
    top: 24px;
    right: -66px;
  }
  .shape-m {
    width: 110px;
    right: -30px;
    height: 170px;
    top: 30px;
  }
  .shape-l {
    width: 110px;
    height: 185px;
    border-width: 31px;
    right: -50px;
    top: 25px;
  }
  .services .section-heading h2 {
    font-size: 35px;
  }
  .services .section-heading > p {
    font-size: 11px;
    margin-top: 18px;
  }
  .service-item summary {
    gap: 12px;
    padding-block: 24px;
  }
  .service-number {
    width: 16px;
    font-size: 7px;
  }
  .service-item h3 {
    font-size: 22px;
    max-width: 245px;
    line-height: 1.2;
  }
  .service-expand {
    width: 27px;
    height: 27px;
    font-size: 18px;
  }
  .service-body {
    padding: 0 0 27px 28px;
  }
  .service-body p {
    font-size: 11px;
  }
  .service-chips {
    gap: 6px;
  }
  .service-chips span {
    font-size: 6px;
    padding: 5px 8px;
  }
  .service-body > a {
    font-size: 10px;
    margin-top: 18px;
  }
  .process-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
    margin-top: 0;
  }
  .process-heading {
    position: relative;
    display: block;
    min-width: 0;
  }
  .process-heading h2 {
    font-size: clamp(43px, 12vw, 52px);
  }
  .process-heading p {
    max-width: 210px;
    margin-top: 20px;
    font-size: 11px;
  }
  .process-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 1;
    font-size: 55px;
  }
  .process-steps li {
    padding-block: 25px;
  }
  .process-steps li > span {
    font-size: 7px;
  }
  .process-steps h3 {
    font-size: 25px;
    margin-block: 14px 10px;
  }
  .process-steps p {
    font-size: 12px;
  }
  .contact-layout {
    margin-top: 5px;
    gap: 35px;
  }
  .contact-copy {
    display: block;
  }
  .contact-copy h2 {
    font-size: 64px;
  }
  .contact-copy > p {
    margin-top: 22px;
  }
  .contact-note {
    display: none;
  }
  .form-heading {
    font-size: 8px;
    margin-bottom: 22px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact-form label {
    font-size: 10px;
  }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    font-size: 12px;
    padding-block: 10px;
  }
  .contact-form textarea {
    min-height: 110px;
  }
  fieldset {
    margin-top: 25px;
  }
  .service-options {
    gap: 7px;
  }
  .service-options label > span {
    font-size: 9px;
    padding: 6px 11px;
  }
  .form-bottom {
    flex-wrap: wrap;
    gap: 19px;
    margin-top: 23px;
  }
  .form-bottom > p {
    font-size: 7px;
    width: 100%;
  }
  .form-bottom .button {
    width: 100%;
    font-size: 12px;
  }
  .site-footer {
    padding-top: 32px;
    padding-bottom: 23px;
  }
  .footer-top {
    gap: 16px;
    margin-bottom: 25px;
  }
  .footer-wordmark {
    font-size: 14vw;
  }
  .footer-wordmark svg {
    margin-left: 0.2em;
    width: 0.55em;
  }
  .back-top {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .footer-bottom {
    font-size: 6px;
    row-gap: 16px;
  }
  .footer-bottom > span:first-child {
    flex-basis: 100%;
    min-width: 0;
  }
  .footer-bottom > span:nth-child(2) {
    flex: 1;
  }
  .privacy-button {
    font-size: 7px;
  }
  .project-dialog[open] {
    display: block;
  }
  .dialog-project-art {
    min-height: 205px;
    padding: 24px;
  }
  .dialog-art-name {
    font-size: 45px;
  }
  .dialog-art-symbol {
    position: absolute;
    right: 30px;
    top: 65px;
    font-size: 100px;
  }
  .dialog-project-art::after {
    top: 20px;
    left: 90px;
    width: 200px;
    height: 200px;
  }
  .dialog-art-index {
    font-size: 10px;
  }
  .dialog-content {
    padding: 30px 25px;
  }
  .dialog-content h2 {
    font-size: 34px;
  }
  .dialog-facts {
    margin-block: 20px;
    padding-block: 17px;
  }
  .dialog-facts span {
    font-size: 10px;
  }
  .dialog-note {
    font-size: 7px;
  }
  .dialog-close {
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    font-size: 23px;
  }
  .briefing-dialog,
  .privacy-dialog {
    padding: 43px 24px 26px;
  }
  .briefing-dialog > h2,
  .privacy-dialog > h2 {
    font-size: 35px;
  }
  .briefing-actions {
    flex-direction: column;
  }
  .briefing-actions .button {
    width: 100%;
  }
  .briefing-dialog textarea {
    font-size: 9px;
    min-height: 220px;
  }
}
@media (hover: none), (pointer: coarse) {
  .cursor-halo {
    display: none;
  }
  .project-view {
    transform: none;
  }
  .project-open:hover .smart-dashboard {
    transform: perspective(1100px) rotateX(8deg) rotateY(-7deg) rotateZ(-3deg);
  }
  .project-open:hover .sales-panel {
    transform: rotate(-7deg);
  }
  .project-open:hover .brand-poster {
    transform: rotate(9deg);
  }
  .project-open .project-view {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track,
  .artifact {
    animation: none !important;
  }
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
  .cursor-halo {
    display: none;
  }
}
@media print {
  .site-header,
  .hero-art,
  .marquee,
  .project-view,
  .project-filters,
  .scroll-progress,
  .cursor-halo,
  .contact-form,
  .theme-toggle,
  .back-top,
  dialog,
  .privacy-button {
    display: none !important;
  }
  body {
    background: #fff;
    color: #111;
  }
  .section-space {
    padding-block: 25px;
  }
  .hero-composition {
    min-height: 0;
    padding-top: 20px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-intro {
    margin-top: 20px;
  }
  .hero .button {
    display: none;
  }
  .hero-bottom {
    margin-top: 20px;
  }
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
  .project-visual {
    print-color-adjust: exact;
  }
  .studio,
  .process {
    background: #fff;
    color: #111;
  }
  .team-art {
    height: 150px;
  }
  .team-card {
    break-inside: avoid;
  }
  .contact-copy h2 {
    font-size: 45px;
  }
}

/* Acesso direto ao projeto real, separado do botão que abre os detalhes. */
.project-live-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  margin: 0 0 1.25rem 1.25rem;
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-weight: 600;
  font-size: .875rem;
  transition: border-color .2s, color .2s;
}
.project-live-link:hover, .project-live-link:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
#project-dialog-live:not([hidden]) { display: inline-flex; margin: 0 .75rem .75rem 0; min-height: 44px; }

/* Marca TB oficial em SVG, com cor adaptada ao tema. */
.wordmark { gap: 8px; }
.brand-icon { width: 30px; height: 30px; flex: none; }
.brand-lettering, .footer-lettering { display: inline-block; flex: none; background: var(--text); -webkit-mask: url("assets/logo-tribyte-wordmark.svg") center / contain no-repeat; mask: url("assets/logo-tribyte-wordmark.svg") center / contain no-repeat; }
.brand-lettering { width: clamp(110px, 10vw, 150px); aspect-ratio: 1030 / 155; }
.footer-mark { width: clamp(34px, 7vw, 90px); height: auto; }
.footer-lettering { width: min(64vw, 550px); aspect-ratio: 1030 / 155; }
.footer-wordmark { display: inline-flex; gap: clamp(6px,2vw,20px); align-items: center; font-size: inherit; }
.tb-hero-stage { position: absolute; width: min(90%, 560px); aspect-ratio: 440 / 395; right: 2%; top: 10%; transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transform-style: preserve-3d; transition: transform .25s; }
.tb-hero-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(14px 22px 17px rgba(0,0,0,.34)); }
.tb-piece { fill: var(--accent); cursor: pointer; transform-box: fill-box; transform-origin: center; outline: none; transition: filter .22s, opacity .22s; }
.tb-piece:hover, .tb-piece:focus-visible, .tb-piece.is-active { filter: drop-shadow(0 0 10px var(--accent)); }
.tb-piece:focus-visible { stroke: var(--text); stroke-width: 3; }
.tb-piece-caption { position: absolute; bottom: 12%; right: 4%; background: var(--surface); color: var(--text); border: 1px solid var(--line); padding: 9px; max-width: 240px; font: 11px var(--mono); }
.project-card, .team-card { --shine-x: 50%; --shine-y: 50%; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .project-card, .team-card { transform: perspective(1200px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)); transition: transform .23s ease; }
  .project-card::after, .team-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(251,16,35,.13),transparent 44%); opacity: var(--shine-opacity,0); transition: opacity .22s; }
}
@media (prefers-reduced-motion:no-preference) {
  .tb-piece { animation: tb-in .8s cubic-bezier(.2,.8,.2,1) both; }
  .tb-piece-2 { animation-delay: .12s; }
  .tb-piece-3 { animation-delay: .24s; }
  @keyframes tb-in { from { opacity:0; transform:translate3d(0,-35px,0) scale(.94); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
}
@media (max-width:800px) {
  .tb-hero-stage { width:min(94%,440px); right:2%; top:14%; }
  .tb-piece-caption { bottom:9%; font-size:10px; }
}
@media (max-width:380px) {
  :root { --gutter:16px; }
  .hero h1 { font-size:clamp(42px,12vw,53px); overflow-wrap:anywhere; }
  .project-heading h2, .studio-intro h2, .contact-copy h2 { font-size:clamp(32px,10vw,44px); }
  .project-filters { flex-wrap:wrap; }
  .team-card { grid-template-columns:38% minmax(0,1fr); }
  .team-info { padding-inline:10px; }
  .team-info h3 { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .tb-piece, .tb-hero-stage, .project-card, .team-card { transform:none !important; animation:none !important; transition:none !important; }
  .tb-intro { display:none !important; }
}

/* Briefing progressivo: empilha no celular e mantém resumo sempre legível. */
.briefing-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,46px); align-items:start; min-width:0; }
.briefing-layout > * { min-width:0; }

/* Ajustes de finalização: ícones temáticos e hit areas em telas pequenas. */
.footer-wordmark > .footer-lettering { margin: 0; font-size: inherit; }
.tb-motion-button:not([hidden]) { position:absolute; right:4%; bottom:4%; z-index:5; display:block; color:var(--text); background:var(--surface); border:1px solid var(--line); padding:10px 14px; min-height:44px; font:11px var(--mono); }
.tb-motion-button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:540px) {
  .tb-hero-art { pointer-events:none; }
  .tb-hero-svg, .tb-motion-button { pointer-events:auto; }
  .tb-motion-button:not([hidden]) { bottom:1%; }
  .brand-icon { width:24px; height:24px; }
  .brand-lettering { width:clamp(94px,31vw,122px); }
  .footer-wordmark { gap:8px; }
  .footer-mark { width:clamp(30px,10vw,47px); }
  .footer-lettering { width:min(58vw,330px); }
}


/* Smart Class: capturas reais substituem o painel ilustrativo. */
.smart-visual {
  background: linear-gradient(135deg, #1b1c36 0%, #0a1325 58%, #171225 100%);
  isolation: isolate;
}
.smart-visual > .visual-label { color: #f3f6ff; z-index: 2; }
.smart-photo-gallery {
  position: absolute;
  inset: 9% 4% 13%;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(10px, 1.5vw, 24px);
  pointer-events: none;
}
.smart-photo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #0c1428;
  border: 1px solid rgba(146, 168, 225, .28);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  transition: transform .35s ease;
}
.smart-photo-primary { transform: translateY(-4%) rotate(-2deg); }
.smart-photo-secondary { transform: translateY(5%) rotate(2deg); }
.smart-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 163;
  object-fit: cover;
}
.smart-photo figcaption {
  padding: 10px 13px;
  color: #d1d9ef;
  background: #0c1428;
  font: 10px var(--mono);
  letter-spacing: .065em;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .smart-photo-primary { transform: translateY(-6%) rotate(-1deg); }
  .project-card:hover .smart-photo-secondary { transform: translateY(3%) rotate(1deg); }
}
.smart-modal-gallery:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.smart-modal-gallery figure {
  margin: 0;
  min-width: 0;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.smart-modal-gallery img { width: 100%; height: auto; display: block; }
.smart-modal-gallery figcaption {
  padding: 10px 12px;
  font: 11px var(--mono);
  color: var(--text);
}
@media (max-width: 540px) {
  .smart-photo-gallery {
    inset: 15% 7% 15%;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .smart-photo-primary { transform: none; }
  .smart-photo-secondary { transform: none; }
  .smart-photo img { max-height: 116px; object-fit: cover; }
  .smart-photo figcaption { font-size: 8px; padding: 5px 9px; }
  .smart-modal-gallery:not([hidden]) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .smart-photo, .smart-photo-primary, .smart-photo-secondary { transform: none !important; transition: none !important; }
}

/* Legenda ancorada abaixo do monograma, nunca por cima das peças. */
.tb-hero-art .tb-hero-stage {
  width: min(84%, 520px);
  top: 3%;
  right: 3%;
}
.tb-hero-stage > .tb-piece-caption {
  position: absolute;
  top: calc(100% + 9px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 3px 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 11px/1.5 var(--mono);
  text-align: center;
  white-space: normal;
  pointer-events: none;
}
@media (max-width: 800px) {
  .tb-hero-art .tb-hero-stage {
    width: min(82%, 340px);
    top: 3%;
    right: 3%;
  }
}
@media (max-width: 540px) {
  .tb-hero-art .tb-hero-stage {
    width: min(72%, 235px);
    top: 0;
    right: 4%;
  }
  .tb-hero-stage > .tb-piece-caption {
    font-size: 9px;
    top: calc(100% + 7px);
    max-width: 210px;
  }
}

/* Imagem de capa na coluna de arte da modal do projeto */
.dialog-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  display: none;
}
.dialog-project-art.has-image {
  background: #070b14 !important;
  color: #ffffff !important;
  padding: 0;
}
.dialog-project-art.has-image .dialog-art-image {
  display: block;
}
.dialog-project-art.has-image::after {
  display: none !important;
}
.dialog-project-art.has-image .dialog-art-index,
.dialog-project-art.has-image .dialog-art-symbol,
.dialog-project-art.has-image .dialog-art-name {
  display: none !important;
}

/* Capturas HQ: proporção original, sem rotação ou crop que embaçam o texto. */
.smart-photo-gallery {
  inset: 10% 4% 13%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.75vw, 26px);
}
.smart-photo,
.smart-photo-primary,
.smart-photo-secondary {
  transform: none;
  border-radius: 10px;
}
.smart-photo img,
.smart-modal-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 699;
  object-fit: contain;
  image-rendering: auto;
  max-height: none;
}
.smart-photo figcaption { font-size: 10px; }
.smart-modal-gallery a {
  display: block;
  cursor: zoom-in;
}
.smart-modal-gallery a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .smart-photo-primary,
  .project-card:hover .smart-photo-secondary {
    transform: none;
  }
}
@media (max-width: 540px) {
  .smart-photo-gallery {
    inset: 12% 6% 16%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Uma prévia maior no cartão; as duas imagens permanecem no diálogo. */
  .smart-photo-primary { width: 100%; }
  .smart-photo-secondary { display: none; }
  .smart-photo img {
    aspect-ratio: 1280 / 699;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .smart-photo figcaption { font-size: 9px; padding: 7px 10px; }
}

/* Retratos reais da equipe na seção de apresentação. */
.team-art .team-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.team-art { background-color: #151515; }
.team-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 28%, transparent 72%, rgba(0, 0, 0, .2));
}
.team-art .team-number {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.team-bio {
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
@media (max-width: 800px) {
  .team-bio {
    margin-top: 14px;
    font-size: 10px;
    line-height: 1.6;
  }
}
.team-info .profile-open {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  font-size: 10px;
}
.profile-dialog .dialog-content {
  min-height: 0;
  overflow-y: auto;
}
.profile-dialog-art {
  padding: 0;
  min-height: 550px;
  background: #151515 !important;
}
.profile-dialog-art::after {
  display: none;
}
.profile-dialog-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile-dialog-art .dialog-art-index {
  z-index: 1;
  margin: 22px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.profile-dialog-bio {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.dialog-art-image {
  object-fit: contain;
  background: #070b14;
}
@media (max-width: 540px) {
  .profile-dialog {
    overflow-y: auto;
  }
  .profile-dialog-art {
    height: min(38svh, 300px);
    min-height: 210px;
  }
  .profile-dialog-bio {
    font-size: 11px;
  }
}

/* Cartões da equipe com resumos e alturas consistentes. */
.team-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-info {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.team-bio {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.team-info .profile-open {
  margin-top: auto;
}
.dialog-project-art.has-image {
  isolation: isolate;
}
.dialog-project-art.has-image::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18px;
  background-image: var(--dialog-art-image);
  background-position: center;
  background-size: cover;
  filter: blur(20px) saturate(1.2);
  opacity: .55;
  transform: scale(1.04);
}
.dialog-project-art.has-image .dialog-art-image {
  z-index: 1;
  object-position: center;
  padding: 18px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55));
}
.project-dialog[open] {
  grid-template-columns: .95fr 1.05fr;
}
.dialog-project-art.has-side-gallery .dialog-art-image {
  display: none !important;
}
.project-side-gallery:not([hidden]) {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 30px 24px;
}
.project-side-gallery figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(5, 11, 24, .72);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}
.project-side-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.project-side-gallery figcaption {
  color: #e5e9f2;
  font: 9px var(--mono);
  letter-spacing: .06em;
}
@media (max-width: 800px) {
  .team-card {
    display: grid;
  }
  .team-info {
    min-height: 290px;
  }
}
@media (max-width: 540px) {
  .dialog-project-art.has-side-gallery {
    height: 380px;
    min-height: 380px;
    padding: 0;
  }
  .project-side-gallery:not([hidden]) {
    gap: 8px;
    padding: 14px;
  }
  .project-side-gallery figure {
    gap: 5px;
    padding: 6px;
  }
  .project-side-gallery figcaption {
    font-size: 7px;
  }
}

/* Ajustes após remover símbolos soltos */
.hero-intro { margin-left: 5px; }
.marquee b { width: 1px; height: 16px; background: currentColor; opacity: .55; font-size: 0; }
.team-footer span:empty { display: none; }
#project-dialog .dialog-art-index, #project-dialog .dialog-art-symbol { display: none; }
.sales-heading > span:first-child { flex: 1; }
.sales-heading > span:nth-child(2) { flex: 0; }

/* ===== Abertura 3D TRIBYTE: preto + vermelho ===== */
.tb-intro { display: none; --tb-red: #fb1023; --tb-perspective: 900px; }
html.tb-intro-on .tb-intro, .tb-intro.is-inline { display: block; }
html.tb-intro-on { overflow: hidden; }
.tb-intro { position: fixed; inset: 0; z-index: 300; overflow: hidden; color: #f4f3ee; background: #060606; font-family: var(--mono); }
.tb-intro.is-inline { position: absolute; z-index: 1; }
.tb-intro-panel { position: absolute; left: 0; right: 0; height: 50.2%; background: #060606; z-index: 0; }
.tb-intro-panel.top { top: 0; } .tb-intro-panel.bottom { bottom: 0; }
.tb-intro-bg { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 55% at 50% 46%, rgba(251,16,35,.34), rgba(251,16,35,.06) 55%, transparent 75%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px); }
.tb-intro-stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: var(--tb-perspective); }
.tb-rig { position: relative; width: min(46vmin, 300px); aspect-ratio: 440/395; transform-style: preserve-3d; will-change: transform; }
.tb-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; }
.tb-layer path { fill: var(--c); }
.tb-layer.is-front path { stroke: #ff6b77; stroke-width: 1.6; stroke-linejoin: round; }
.tb-floor { position: absolute; left: 50%; top: calc(50% + min(46vmin, 300px) * 0.46); width: min(52vmin, 340px); height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(251,16,35,.55), transparent); filter: blur(5px); }
.tb-intro-hud { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(24px, 7vh, 64px); display: grid; justify-items: center; gap: 14px; padding-inline: var(--gutter, 22px); }
.tb-intro-word { font: 700 clamp(18px, 3.4vw, 30px) var(--display); letter-spacing: .5em; text-indent: .5em; }
.tb-intro-word span { display: inline-block; }
.tb-intro-bar { width: min(280px, 64vw); height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.tb-intro-bar i { display: block; height: 100%; background: var(--tb-red); box-shadow: 0 0 12px var(--tb-red); transform: scaleX(0); transform-origin: left; }
.tb-intro-pct { font-size: 11px; letter-spacing: .2em; color: #a5a5a2; }
.tb-intro-skip { position: absolute; z-index: 5; top: clamp(16px, 3vh, 28px); right: var(--gutter, 22px); padding: 10px 14px; border: 1px solid #303030; background: rgba(18,18,18,.7); color: #f4f3ee; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tb-intro-skip:hover, .tb-intro-skip:focus-visible { border-color: var(--tb-red); color: var(--tb-red); outline: none; }
/* Sem GSAP: giro e saída por CSS */
.tb-intro.no-gsap .tb-rig { animation: tb-spin 3.2s linear infinite; }
.tb-intro.no-gsap { transition: opacity .6s; } .tb-intro.no-gsap.is-leaving { opacity: 0; }
@keyframes tb-spin { to { transform: rotateX(-10deg) rotateY(360deg); } }
@media (max-width: 520px) { .tb-intro-word { letter-spacing: .32em; text-indent: .32em; } }
#model.tb-intro.is-inline { inset: 0; }

/* Onboarding: alvos de toque confortáveis e legendas legíveis */
.service-options label > span { min-height: 40px; display: flex; align-items: center; font-size: 12px; padding: 8px 16px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.contact-form legend { padding: 0; margin-bottom: 10px; }
.contact-form legend small, .contact-form label small { color: var(--muted); font-size: .85em; }
.service-options input:checked + span::before { content: "✓"; margin-right: 8px; }
@media (max-width: 800px) { .service-options label > span { font-size: 12px; padding: 8px 14px; } }

/* Escrita livre: o campo é o protagonista */
.contact-form.letter-form { max-width: 760px; }
.contact-form.letter-form .letter-label { display: block; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.contact-form.letter-form textarea { display: block; width: 100%; min-height: 220px; margin-top: 14px; padding: 18px 20px; font: 400 clamp(16px, 1.6vw, 19px)/1.7 var(--display); background: var(--surface); border: 1px solid var(--line); resize: none; overflow-y: auto; }
.contact-form.letter-form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #fb102322; }
.contact-form.letter-form .letter-hint { margin: 12px 0 34px; color: var(--muted); font: 13px/1.7 var(--display); letter-spacing: 0; max-width: 56ch; width: auto; }

/* A mesma leitura da rolagem move a marca, revela os projetos e acompanha o processo. */
.scroll-motion .hero-copy {
  transform: translate3d(0, var(--hero-copy-shift, 0px), 0);
  opacity: var(--hero-copy-opacity, 1);
}

.scroll-motion .tb-hero-stage {
  transform: perspective(1000px)
    translate3d(0, var(--hero-art-shift, 0px), 0)
    rotateX(var(--tilt-x, 0deg))
    rotateY(calc(var(--tilt-y, 0deg) + var(--hero-art-turn, 0deg)))
    rotateZ(var(--hero-art-spin, 0deg))
    scale(var(--hero-art-scale, 1));
  transition: transform 0.18s linear;
}

.scroll-motion [data-scroll-title] {
  opacity: var(--title-opacity, 1);
  transform: translate3d(0, var(--title-shift, 0px), 0);
}

.scroll-motion .project-visual {
  clip-path: inset(0 0 var(--scroll-clip, 0%) 0);
  transform: translate3d(0, var(--scroll-shift, 0px), 0)
    scale(var(--scroll-scale, 1));
}

.scroll-motion .team-art {
  clip-path: inset(0 0 var(--scroll-clip, 0%) 0);
}

.scroll-motion .process-steps h3,
.scroll-motion .process-steps p,
.scroll-motion .process-steps li > span {
  transition: color 0.35s, opacity 0.35s, transform 0.35s;
}

.scroll-motion .process-steps .is-current h3 {
  color: #db243c;
  transform: translateX(8px);
}

.scroll-motion .process-steps .is-current p,
.scroll-motion .process-steps li.is-current > span {
  opacity: 1;
}

@media print {
  .scroll-motion .hero-copy,
  .scroll-motion [data-scroll-title],
  .scroll-motion .project-visual,
  .scroll-motion .team-art {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}


/* ===== tribyte-reinvention.css ===== */
/* TRIBYTE / REINVENTION 2026
 * Direção: editorial futurista / papel quente × tinta preta × vermelho de marca.
 * Interações inspiradas por React Bits: Aurora, Magic Bento, Scroll Stack,
 * Text Pressure, Animated Content e Spotlight Card.
 * Implementação própria para HTML/CSS/JS. Nenhum React instalado.
 */
:root {
 --rx-paper:#ebe8e0;--rx-white:#f8f6f0;--rx-ink:#121315;--rx-muted:#6a6864;
 --rx-line:#c7c3bb;--rx-red:#e21b3c;--rx-red-soft:#ff8294;--rx-dark:#101116;
 --rx-display:"Space Grotesk",Arial,sans-serif;--rx-mono:"Space Mono",monospace;
 --rx-ease:cubic-bezier(.22,1,.36,1);--rx-margin:clamp(22px,5vw,104px);
}
:root[data-theme="light"] {
 --bg:var(--rx-paper);--surface:#dedbd3;--surface-alt:#dad5ca;
 --text:var(--rx-ink);--muted:var(--rx-muted);--line:var(--rx-line);
 --accent:var(--rx-red);--accent-ink:#a40a27;--on-accent:#fff;
 --header:rgba(248,246,240,.9);color-scheme:light;
}
:root[data-theme="dark"] {
 --bg:#151417;--surface:#222024;--surface-alt:#292329;--text:#f5f1e9;
 --muted:#b9b3af;--line:#50494c;--accent:#f11d42;
 --accent-ink:#ff6a80;--on-accent:#fff;
 --header:rgba(29,27,29,.94);color-scheme:dark;
 --rx-paper:#19171b;--rx-white:#272329;--rx-ink:#f6eee7;--rx-muted:#bbb4ad;--rx-line:#5b5256;
}
html {scroll-padding-top:100px;scroll-behavior:smooth}
body {background:var(--rx-paper);color:var(--rx-ink);overflow-x:clip;letter-spacing:-.01em}
body::before {content:"";position:fixed;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.2px);background-size:7px 7px}
.section-shell {max-width:none;padding-inline:var(--rx-margin)}
.section-space {padding-block:clamp(95px,10vw,195px)}
.mono-label {font-size:clamp(10px,.8vw,12px);letter-spacing:.12em}
h2 {letter-spacing:-.075em}
.skip-link {z-index:500}
.scroll-progress {height:4px;z-index:98}

/* FLOATING COMMAND BAR — carta de navegação compacta */
.site-header {
 position:fixed;left:clamp(12px,2.8vw,50px);right:clamp(12px,2.8vw,50px);top:clamp(12px,2.3vw,30px);
 width:auto;max-width:none;margin:0;height:72px;padding:0 clamp(17px,2.3vw,35px);
 border:1px solid var(--rx-line);border-radius:16px;z-index:65;
 background:var(--header);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
 box-shadow:0 11px 44px #00000010;transition:background .3s,border-color .3s,transform .45s var(--rx-ease);
}
.site-header .brand-icon {width:34px;height:34px}
.site-header .brand-lettering {width:clamp(108px,11vw,170px)}
.site-header .desktop-nav {margin-left:0;gap:clamp(17px,2.3vw,38px)}
.site-header .desktop-nav a {text-transform:uppercase;font:10px var(--rx-mono);letter-spacing:.055em}
.site-header .header-actions {gap:13px}
.site-header .theme-toggle {border-color:var(--rx-line);width:40px;height:40px}
.site-header .header-cta {background:var(--rx-ink);color:var(--rx-paper);border-radius:7px;min-height:42px;padding:0 13px 0 18px;font:11px var(--rx-mono);text-transform:uppercase;letter-spacing:.04em}
.site-header .header-cta span {color:var(--rx-red);font-size:24px}
.mobile-menu:not([hidden]) {z-index:64}
:root[data-theme="dark"] .site-header .header-cta {background:#f0ebe2;color:#121315}

/* 01 — FULL-VIEWPORT ART DIRECTED HERO */
.hero {
 position:relative;min-height:max(790px,100svh);padding-top:clamp(135px,13vh,175px);padding-bottom:0;
 overflow:hidden;isolation:isolate;background:var(--rx-paper);color:var(--rx-ink);
}
.hero::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(0,0,0,.032) 1px,transparent 1px) 0 0/12.5% 100%,
 linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px) 0 0/100% 145px;
 mask-image:linear-gradient(180deg,black,transparent 86%)}
.hero-topline,.hero-bottom {display:flex;justify-content:space-between;align-items:center;gap:20px;
 border-top:1px solid var(--rx-line);font:10px var(--rx-mono);letter-spacing:.10em}
.hero-topline {padding-top:16px;position:relative;z-index:5}
.hero-topline .hero-status {display:flex;gap:10px;align-items:center}
.hero-topline .hero-status::before {content:"";height:7px;width:7px;background:var(--rx-red);border-radius:50%;box-shadow:0 0 0 4px #e21b3c18}
.hero-composition {
 display:block;min-height:clamp(620px,76svh,950px);padding-top:clamp(65px,7vw,145px);position:relative;
}
.hero-copy {max-width:none;width:100%;z-index:4;pointer-events:none;position:relative}
.hero-copy .hero-kicker {font:clamp(11px,1.05vw,14px) var(--rx-mono);
 color:var(--rx-muted);letter-spacing:.09em;margin-bottom:clamp(22px,3.5vw,54px);display:flex;gap:12px;align-items:center}
.hero-copy .hero-kicker::before {content:"✳";font:20px var(--rx-display);color:var(--rx-red)}
.hero h1 {
 position:relative;max-width:1120px;font-size:clamp(82px,10.4vw,210px);
 line-height:.82;letter-spacing:-.105em;font-weight:700;z-index:6;
 text-transform:uppercase;filter:none;
}
.hero h1>span {display:block;white-space:nowrap;transform-origin:left center}
.hero h1 .hero-outline {color:transparent;-webkit-text-stroke:1.5px var(--rx-ink)}
.hero h1 .red-type,.hero h1 .red-type .title-period {
 background:none;-webkit-background-clip:initial;background-clip:initial;
 -webkit-text-fill-color:var(--rx-red);color:var(--rx-red);animation:none;
}
.hero h1 .red-type {font-size:.78em;letter-spacing:-.089em;white-space:nowrap}
.hero h1 .red-type .title-period {color:var(--rx-ink);-webkit-text-fill-color:var(--rx-ink)}
.hero-intro {margin:clamp(40px,5.2vw,95px) 0 0;gap:0;display:block;max-width:420px}
.hero-intro p {font:clamp(15px,1.32vw,20px)/1.65 var(--rx-display);color:var(--rx-muted);letter-spacing:-.015em}
.hero-copy .button-primary {
 pointer-events:auto;margin:26px 0 42px;padding:16px 23px;background:var(--rx-ink);color:var(--rx-paper);
 min-height:60px;border-radius:7px;font:12px var(--rx-mono);letter-spacing:.04em;
 box-shadow:8px 8px 0 var(--rx-red);transition:transform .35s var(--rx-ease),box-shadow .35s;
}
.hero-copy .button-primary:hover {background:var(--rx-ink);color:var(--rx-paper);transform:translate(-2px,-3px);box-shadow:11px 11px 0 var(--rx-red)}
.hero-copy .button-primary span {color:var(--rx-red);font-size:27px}

/* React Bits Aurora + Depth Text concept: depth in branded portal. */
.hero-art.tb-hero-art {
 position:absolute;top:clamp(24px,4.7vw,75px);right:0;width:clamp(310px,43vw,800px);height:clamp(500px,69vh,830px);
 border-radius:24px 8px 24px 8px;background:#100d12;z-index:1;
 overflow:hidden;isolation:isolate;box-shadow:0 48px 94px #130f1530;
}
.hero-art::before {width:95%;top:1%;right:0;aspect-ratio:1;background:
 radial-gradient(ellipse at 55% 37%,#e9184c8a,transparent 48%),
 radial-gradient(ellipse at 42% 65%,#9908346b,transparent 53%);
 filter:blur(36px);opacity:.9;animation:rx-aurora-pulse 11s ease-in-out infinite alternate;z-index:-1}
@keyframes rx-aurora-pulse {from{transform:translate(-9%,-5%) scale(.89) rotate(-10deg)}to{transform:translate(9%,6%) scale(1.16) rotate(16deg)}}
.hero-art .art-grid {position:absolute;inset:0;opacity:.42;pointer-events:none;
 background-image:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);
 background-size:46px 46px;mask-image:radial-gradient(ellipse at center,black,transparent 80%)}
.rx-portal-ring {position:absolute;border:1px solid #ef396130;border-radius:50%;
 aspect-ratio:1;pointer-events:none;left:50%;top:48%;transform:translate(-50%,-50%);
 box-shadow:0 0 28px #ec154123,inset 0 0 25px #ed173122}
.rx-portal-ring:nth-of-type(2) {width:88%;height:auto;animation:rx-ring 20s linear infinite}
.rx-portal-ring:nth-of-type(3) {width:66%;height:auto;border-style:dashed;animation:rx-ring 35s linear reverse infinite}
.rx-portal-ring:nth-of-type(4) {width:112%;height:auto;animation:rx-ring 46s linear infinite}
@keyframes rx-ring {from{rotate:0deg}to{rotate:360deg}}
.tb-hero-stage {top:15%;right:6%;width:88%;z-index:2;filter:drop-shadow(0 30px 24px #0009)}
.tb-hero-svg {filter:drop-shadow(0 19px 20px #f002316c)}
.tb-piece {fill:#f42043}
.tb-piece-caption {right:3%;bottom:-4%;color:#ffe8ec;background:#171118ee;border:1px solid #f6536545;
 backdrop-filter:blur(16px);font:11px var(--rx-mono);padding:14px 18px;max-width:290px;border-radius:5px}
.rx-portal-coordinate {position:absolute;bottom:31px;left:32px;color:#e4b9c2;opacity:.78;
 font:10px var(--rx-mono);letter-spacing:.06em;z-index:5}
.rx-portal-label {position:absolute;top:30px;left:32px;color:#f9f1e8;z-index:5;
 font:10px var(--rx-mono);letter-spacing:.08em}
.hero-bottom {position:relative;z-index:5;border-bottom:1px solid var(--rx-line);
 padding:20px 0;margin-top:15px;margin-bottom:28px}
.hero-bottom p,.hero-bottom a,.hero-bottom-note {font:10px var(--rx-mono);color:var(--rx-ink);letter-spacing:.065em}
.hero-bottom a {color:var(--rx-red);display:flex;align-items:center;gap:12px}
.hero-bottom a>span {font-size:22px}
.rx-scroll-number {font:11px var(--rx-mono);color:var(--rx-muted)}
.tb-motion-button {z-index:8}
:root[data-theme="dark"] .hero h1 .hero-outline {-webkit-text-stroke-color:#f6eee7}

/* 02 — BOLD MOTION STRIP */
.marquee {min-height:130px;background:#111115;color:#f8eee6;border:0;display:flex;align-items:center;overflow:hidden}
.marquee-track {font-size:clamp(40px,6vw,98px);letter-spacing:-.085em;font-weight:700;gap:30px;align-items:center;line-height:1.1}
.marquee-track span:nth-of-type(even) {color:#f12b4c;-webkit-text-stroke:0}
.marquee b {width:15px;height:15px;border:0;border-radius:50%;background:#f12b4c;opacity:1;flex:none}

/* 03 — INTERACTIVE SERVICE INDEX / React Bits Magic Bento */
.rx-lab {padding:clamp(105px,10vw,190px) var(--rx-margin);background:var(--rx-white);color:var(--rx-ink);
 border-bottom:1px solid var(--rx-line);position:relative;overflow:hidden}
.rx-lab-head {display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,6vw,90px)}
.rx-lab-head h2 {font-size:clamp(65px,9.6vw,180px);line-height:.84;letter-spacing:-.1em;font-weight:700}
.rx-lab-head h2 span {color:var(--rx-red)}
.rx-lab-head p {font-size:clamp(13px,1.1vw,16px);max-width:250px;line-height:1.65;color:var(--rx-muted)}
.rx-lab-visual {position:relative;display:grid;grid-template-columns:1.2fr .8fr;
 min-height:clamp(470px,54vw,770px);border:1px solid var(--rx-line);border-radius:16px;overflow:hidden;
 background:#101115;isolation:isolate;color:#f6f3eb}
.rx-lab-canvas {position:relative;min-width:0;display:grid;place-items:center;overflow:hidden;
 background:radial-gradient(ellipse at 46% 42%,#681a319d,transparent 53%),#141116;transition:background .7s}
.rx-lab-canvas::before {content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
 background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}
.rx-lab-orbit {position:absolute;left:50%;top:50%;width:min(75%,480px);aspect-ratio:1;
 border:1px solid #e5295275;border-radius:50%;transform:translate(-50%,-50%) rotate(18deg);
 box-shadow:0 0 90px #c7134644,inset 0 0 75px #c7134622}
.rx-lab-orbit::before,.rx-lab-orbit::after {content:"";position:absolute;inset:14%;border:1px dashed #ff708c66;border-radius:50%}
.rx-lab-orbit::after {inset:-16%;border:1px solid #ff708c22}
.rx-lab-image {position:relative;z-index:2;display:block;width:min(78%,440px);height:auto;max-height:82%;object-fit:contain;
 border:1px solid #f6eee7a8;border-radius:6px;box-shadow:0 24px 64px #000b,0 0 0 1px #ffffff12;
 transform:translate3d(var(--rx-art-x,0px),var(--rx-art-y,0px),0) rotate(-2deg);
 transition:transform .7s var(--rx-ease),filter .45s,opacity .35s}
.rx-lab[data-active="sistemas"] .rx-lab-image {transform:translate3d(var(--rx-art-x,0px),var(--rx-art-y,0px),0) rotate(0) scale(.96)}
.rx-lab[data-active="landing"] .rx-lab-image {transform:translate3d(var(--rx-art-x,0px),var(--rx-art-y,0px),0) rotate(2deg) scale(1.01)}
.rx-lab-canvas-label {position:absolute;left:30px;bottom:28px;font:10px var(--rx-mono);color:#e8e6e4;z-index:3;letter-spacing:.08em}
.rx-lab-panel {display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,3.5vw,65px);
 background:#f3ede4;color:#111115}
.rx-lab-panel>.rx-eyebrow {font:10px var(--rx-mono);color:#a1102d;letter-spacing:.12em}
.rx-lab-panel h3 {font-size:clamp(39px,4vw,86px);letter-spacing:-.085em;line-height:1;font-weight:600}
.rx-lab-panel p {max-width:38ch;font-size:clamp(13px,1.15vw,18px);line-height:1.65;color:#5c5351}
.rx-lab-options {display:grid;gap:9px}
.rx-lab-options button {border:1px solid #d1c8bf;color:#171316;min-height:54px;padding:0 20px;
 display:flex;align-items:center;justify-content:space-between;text-align:left;font:12px var(--rx-mono);
 transition:background .25s,color .25s,border-color .25s,transform .3s}
.rx-lab-options button.is-current {background:#141115;border-color:#141115;color:#fff}
.rx-lab-options button:hover {transform:translateX(4px);border-color:#d91738}
.rx-lab-options button span {font-size:20px;color:#d91738}
.rx-lab-cta {display:inline-flex;align-items:center;gap:22px;font:12px var(--rx-mono);color:#a30c28;
 align-self:start;border-bottom:1px solid #bd243e;padding-bottom:11px}

/* 04 — CINEMATIC PROJECTS / React Bits Scroll Stack */
.projects {background:#101115;color:#f4eee8;padding-top:clamp(105px,10vw,180px);
 padding-bottom:clamp(130px,15vw,260px);isolation:isolate}
.projects .section-topline {border-bottom:1px solid #ffffff35;padding-bottom:18px;margin-bottom:clamp(40px,5vw,90px)}
.projects .section-heading {align-items:flex-end;margin-bottom:clamp(70px,6vw,110px)}
.projects .section-heading h2 {font-size:clamp(60px,8.7vw,180px);line-height:.85;font-weight:700;
 letter-spacing:-.095em;color:#f4eee8}
.projects .outline-text {-webkit-text-stroke:1px #ee3556;color:transparent}
.project-heading-side {gap:20px;min-width:0}
.project-heading-side p {font-size:clamp(14px,1.2vw,18px);color:#beb8b7}
.projects .project-filters {gap:7px}
.projects .filter-button {background:#ffffff0b;color:#eae4dc;border:1px solid #ffffff38;
 padding:11px 19px;border-radius:50px;font:10px var(--rx-mono);letter-spacing:.06em}
.projects .filter-button.is-active {background:#f02446;color:#fff;border-color:#f02446}
.project-grid {display:flex;flex-direction:column;gap:clamp(75px,11vh,145px);padding-bottom:clamp(25px,6vw,100px)}
.project-card,.project-featured {
 display:block;grid-column:auto;width:100%;min-width:0;position:sticky;
 top:calc(105px + var(--rx-stack-offset,0px));z-index:var(--rx-stack-z,1);
 height:min(78svh,790px);min-height:510px;border-radius:18px;overflow:hidden;isolation:isolate;
 background:var(--rx-case-bg,#2d1520);color:var(--rx-case-ink,#fff);
 box-shadow:0 22px 70px #0007,0 0 0 1px #ffffff2c;
 transform:none!important;
}
.project-card:nth-child(1) {--rx-case-bg:#211621;--rx-case-ink:#f7eee8;--rx-stack-offset:0px;--rx-stack-z:1}
.project-card:nth-child(2) {--rx-case-bg:#d9b9a8;--rx-case-ink:#201719;--rx-stack-offset:19px;--rx-stack-z:2}
.project-card:nth-child(3) {--rx-case-bg:#3a1722;--rx-case-ink:#f9eee8;--rx-stack-offset:38px;--rx-stack-z:3}
.project-card::before {content:"";pointer-events:none;position:absolute;inset:0;z-index:4;border:1px solid #ffffff25;border-radius:inherit}
.project-open {height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
 width:100%;padding:0;align-items:stretch;transform:scale(var(--rx-deck-scale,1));transform-origin:center center;
 transition:transform .2s linear;position:relative;overflow:hidden;color:inherit}
.project-visual,.project-featured .project-visual {order:2;height:100%;min-height:0;width:100%;border:0;clip-path:none!important;transform:none!important;position:relative}
.project-visual::after {content:"";pointer-events:none;position:absolute;inset:0;z-index:2;
 background:linear-gradient(90deg,#00000022,transparent 25%,transparent 75%,#00000022)}
.project-info {order:1;padding:clamp(36px,4vw,75px);display:flex;flex-direction:column;justify-content:space-between;
 align-items:flex-start;gap:35px;position:relative;z-index:2;background:var(--rx-case-bg)}
.project-info h3 {font:600 clamp(48px,5.2vw,112px)/.96 var(--rx-display);letter-spacing:-.09em;max-width:8ch;color:var(--rx-case-ink)}
.project-info>div {width:100%}
.project-info .project-index {font:11px var(--rx-mono);letter-spacing:.10em;
 display:block;padding-bottom:clamp(20px,3vw,58px);color:var(--rx-case-ink);opacity:.75}
.project-info>p {font:clamp(14px,1.2vw,20px)/1.6 var(--rx-display);color:var(--rx-case-ink);opacity:.72;text-align:left}
.project-card .project-view {position:absolute;bottom:32px;right:32px;z-index:5;opacity:1;
 border-radius:50%;width:95px;height:95px;display:flex;flex-direction:column;justify-content:center;gap:6px;
 padding:13px;font:9px var(--rx-mono);background:#f32246;color:white;
 transform:rotate(-10deg);box-shadow:0 12px 30px #0003}
.project-card .project-view span {font:20px var(--rx-display);line-height:1}
.project-card .project-open:hover .project-view {transform:scale(1.1) rotate(3deg);background:#111}
.project-card .visual-label {z-index:4;color:#fff;background:#1011159e;padding:9px 12px;border-radius:3px;letter-spacing:.09em}
.project-card .project-live-link {position:absolute;bottom:clamp(35px,4vw,75px);
 left:clamp(36px,4vw,75px);z-index:8;font:11px var(--rx-mono);color:var(--rx-case-ink);
 padding-bottom:8px;border-bottom:1px solid currentColor}
.project-card .project-live-link:hover {color:var(--rx-red)}
.project-card .smart-photo-gallery {transform:scale(1.04)}
.project-card .smart-visual {background:#bbb0c9}
.project-card .sales-visual {background:#361c28}
.project-card .brand-visual {background:#a20d2c}
.project-card .brand-poster {transform:rotate(6deg) scale(.9)}
.project-card:nth-child(2) .project-view,.project-card:nth-child(3) .project-view {bottom:30px}
.scroll-motion .project-visual {transform:none!important;clip-path:none!important}
.scroll-motion .project-card .project-info {opacity:1}
.project-card[hidden] {display:none!important}
.project-card.reveal.is-visible {opacity:1}
.project-card:hover::after {opacity:0!important}

/* 05 — ASYMMETRIC PEOPLE / React Bits Magic Bento */
.studio {background:var(--rx-paper);color:var(--rx-ink);padding-block:clamp(110px,10vw,190px)}
.studio .section-topline {border-bottom:1px solid var(--rx-line);margin-bottom:55px;padding-bottom:16px}
.studio-intro {display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:clamp(22px,6vw,110px);
 margin-bottom:clamp(65px,6.5vw,115px)}
.studio-intro h2 {font-size:clamp(55px,7.2vw,142px);font-weight:700;line-height:.91;letter-spacing:-.088em}
.studio-intro h2>span {color:var(--rx-red)}
.studio-story {align-self:end;padding-left:clamp(18px,2vw,35px);border-left:3px solid var(--rx-red)}
.studio-story p {font-size:clamp(13px,1vw,16px);line-height:1.85}
.studio-signature {font:11px var(--rx-mono);color:var(--rx-red)}
.team-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.team-card,.team-card:first-child {display:grid;grid-template-columns:43% minmax(0,1fr);
 grid-template-rows:1fr auto;align-items:stretch;min-height:clamp(420px,38vw,590px);
 background:var(--rx-white);border:1px solid var(--rx-line);border-radius:16px;
 overflow:hidden;isolation:isolate;position:relative;box-shadow:0 16px 55px #0000000c;transform:none!important}
.team-card:first-child {grid-column:span 2;min-height:clamp(490px,42vw,720px);grid-template-columns:45% minmax(0,1fr);
 background:#171317;color:#fff}
.team-card:nth-child(2) {background:#cbd0c9;color:#151515}
.team-card:nth-child(3) {background:#e7c7bf;color:#1a1518}
.team-card .team-art {grid-column:1;grid-row:1 / span 2;min-height:0;height:100%;width:100%;
 overflow:hidden;position:relative;clip-path:none!important;transform:none!important}
.team-card .team-photo {width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.06);
 transition:transform .9s var(--rx-ease),filter .5s}
.team-card:hover .team-photo {transform:scale(1.055);filter:grayscale(0) contrast(1.06)}
.team-card .team-info {grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;
 padding:clamp(24px,3vw,65px);background:transparent;min-width:0}
.team-card .team-info h3 {font:600 clamp(32px,3.8vw,74px)/.99 var(--rx-display);
 letter-spacing:-.075em;margin-bottom:21px;color:inherit;overflow-wrap:normal}
.team-card:first-child .team-info h3 {font-size:clamp(44px,5.4vw,100px)}
.team-card .team-info>span {font:10px var(--rx-mono);text-transform:uppercase;letter-spacing:.08em;opacity:.65}
.team-card .team-info .profile-open {margin-top:auto;border-radius:6px;
 background:#171317;color:#fff;font:11px var(--rx-mono);min-height:50px}
.team-card:first-child .profile-open {background:#f12446;color:#fff}
.team-card:nth-child(2) .team-info .profile-open,.team-card:nth-child(3) .team-info .profile-open {background:#171317;color:#fff}
.team-card .team-footer {grid-column:2;grid-row:2;border-top:1px solid currentColor;opacity:.7;
 padding:15px clamp(24px,3vw,65px);font:9px var(--rx-mono);display:flex;justify-content:space-between}
.team-number {font-size:clamp(42px,8vw,145px);font-weight:700;opacity:.30}
.team-card .team-bio {display:none!important}
.team-card:hover::after {opacity:.8}
.team-card:first-child .team-art::after {content:"01 / 03";position:absolute;bottom:30px;left:30px;color:white;font:13px var(--rx-mono)}
.team-card:nth-child(2) .team-art::after {content:"02 / 03";position:absolute;bottom:24px;left:24px;color:white;font:11px var(--rx-mono)}
.team-card:nth-child(3) .team-art::after {content:"03 / 03";position:absolute;bottom:24px;left:24px;color:white;font:11px var(--rx-mono)}
.team-card.reveal.is-visible {transform:none!important}

/* 06 — ARCHITECTURAL SERVICES ACCORDION */
.services {background:var(--rx-white);color:var(--rx-ink);padding-block:clamp(110px,10vw,180px);
 border-top:0;border-bottom:1px solid var(--rx-line)}
.services .section-topline {padding-bottom:16px;border-bottom:1px solid var(--rx-line);margin-bottom:60px}
.services .section-heading {align-items:end;gap:40px;margin-bottom:clamp(60px,7vw,140px)}
.services .section-heading h2 {font-size:clamp(53px,7.3vw,150px);font-weight:700;line-height:.89}
.services .section-heading .outline-text {-webkit-text-stroke:1px var(--rx-red)}
.services .section-heading>p {font:clamp(14px,1.1vw,17px)/1.8 var(--rx-display);max-width:310px}
.service-list {border-top:2px solid var(--rx-ink)}
.service-item {position:relative;border-bottom:1px solid var(--rx-line);overflow:clip;isolation:isolate}
.service-item::before {content:"";position:absolute;inset:0;z-index:-1;background:var(--rx-ink);
 transform:translateY(-101%);transition:transform .6s var(--rx-ease)}
.service-item:is([open],:hover,:focus-within)::before {transform:translateY(0)}
.service-item summary {padding:clamp(25px,3.6vw,70px) clamp(5px,1.2vw,20px);
 min-height:clamp(110px,11vw,200px);gap:clamp(15px,2vw,45px);position:relative}
.service-item .service-number {font:13px var(--rx-mono);color:var(--rx-red);
 width:48px;flex:none;transition:color .25s}
.service-item h3 {font:600 clamp(30px,4.8vw,88px)/1.05 var(--rx-display);
 letter-spacing:-.074em;flex:1;font-weight:600;transition:color .25s}
.service-expand {width:clamp(44px,5vw,75px);height:clamp(44px,5vw,75px);
 border:1px solid var(--rx-ink);color:var(--rx-ink);font-size:35px;transition:transform .4s,background .3s;color:inherit}
.service-item[open] .service-expand {background:var(--rx-red);border-color:var(--rx-red);color:white}
.service-item:is([open],:hover,:focus-within) h3 {color:#fff}
.service-item:is([open],:hover,:focus-within) .service-number {color:#ff637c}
.service-item:is([open],:hover,:focus-within) .service-expand {border-color:#fff;color:#fff}
.service-item[open] .service-expand {background:var(--rx-red);border-color:var(--rx-red)}
.service-body {max-width:none;padding:0 clamp(25px,6vw,120px) clamp(33px,5vw,90px) clamp(65px,6.5vw,130px);
 position:relative;color:#fff;animation:none}
.service-body>p {font:clamp(15px,1.35vw,21px)/1.7 var(--rx-display);max-width:700px;color:#e9dfdd}
.service-chips {gap:9px;margin-top:30px}
.service-chips span {font:10px var(--rx-mono);padding:9px 14px;border-color:#ffffff68}
.service-body>a {display:inline-flex;align-items:center;font:12px var(--rx-mono);color:#ff7d91;
 margin-top:30px;gap:14px;padding-bottom:9px;border-bottom:1px solid #ff7d91}
.service-body>a span {color:#ff7d91}
.service-item summary:hover h3 {color:#fff}

/* 07 — PROCESS / TIMELINE: FULL INK WITH RED TYPOGRAPHY */
.process {background:#1b171b;color:#f2ede9;padding-block:clamp(110px,10vw,190px)}
.process .section-topline {border-bottom:1px solid #ffffff42;padding-bottom:18px;margin-bottom:clamp(70px,7vw,120px)}
.process-layout {grid-template-columns:1fr 1fr;gap:clamp(50px,12vw,230px);margin-top:0}
.process-heading {top:125px}
.process-heading h2 {font-size:clamp(58px,7.7vw,150px);font-weight:700;line-height:.89;letter-spacing:-.09em}
.process-heading h2 em {color:#fa2b50;font-style:normal}
.process-heading>p {font-size:clamp(14px,1.1vw,18px);max-width:260px;margin-top:42px;color:#c9bec3}
.process-steps li {position:relative;padding:38px 12px 55px;border-top:1px solid #ffffff5a;min-height:255px}
.process-steps li>span {font:12px var(--rx-mono);color:#ff536e;letter-spacing:.09em}
.process-steps h3 {font-size:clamp(29px,2.8vw,52px);letter-spacing:-.063em;font-weight:600;line-height:1.1;margin:24px 0 18px}
.process-steps p {font-size:clamp(14px,1vw,17px);max-width:420px;color:#c7bfc1;opacity:1}
.process-steps li.is-current {background:linear-gradient(90deg,#f21a3b24,transparent 55%)}
.process-steps li.is-current h3 {color:#fa3858;transform:translateX(7px)}
.process-steps li::before {content:"";position:absolute;top:-2px;left:0;width:var(--rx-step-progress,0%);height:3px;background:#fa3153}

/* 08 — CONTACT: WHITE ROOM + RED OUTLINE */
.contact {background:var(--rx-paper);color:var(--rx-ink);padding-block:clamp(110px,11vw,200px)}
.contact .section-topline {border-bottom:1px solid var(--rx-line);padding-bottom:18px;margin-bottom:70px}
.contact-layout {grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,130px);margin-top:0}
.contact-copy h2 {font-size:clamp(68px,8.1vw,156px);font-weight:700;line-height:.86;letter-spacing:-.1em}
.contact-copy h2>span {color:var(--rx-red)}
.contact-copy h2>.contact-outline {color:transparent;-webkit-text-stroke:1px var(--rx-ink);font-size:.55em}
.contact-copy>p {font:clamp(15px,1.2vw,19px)/1.7 var(--rx-display);max-width:400px;margin-top:55px}
.contact-form.letter-form {
 background:#171318;color:#f9f1ea;border:1px solid #ffffff2b;
 border-radius:17px;max-width:none;padding:clamp(32px,4vw,80px);box-shadow:28px 28px 0 #db1e3e;
 align-self:start;position:relative}
.contact-form.letter-form .form-heading {border-color:#ffffff55;color:#f5f1ec;font:11px var(--rx-mono)}
.contact-form.letter-form label,.contact-form.letter-form .letter-label {color:#f6f2ec}
.contact-form.letter-form .letter-label {font-size:clamp(20px,2vw,31px)}
.contact-form.letter-form textarea {background:#262128;border:1px solid #5e5058;border-radius:9px;color:#fff;
 font:clamp(15px,1.1vw,18px)/1.7 var(--rx-display);padding:20px}
.contact-form.letter-form textarea:focus {border-color:#f32b4d;box-shadow:0 0 0 3px #ed1b3a3b}
.contact-form.letter-form .letter-hint {color:#b8aeb2}
.contact-form.letter-form input {color:#fff;border-color:#ffffff65;font-size:14px}
.contact-form.letter-form input::placeholder,.contact-form.letter-form textarea::placeholder {color:#bcb3b5}
.contact-form.letter-form .form-bottom>p {color:#bdb3b7;font-size:10px;max-width:260px}
.contact-form.letter-form .button-primary {background:#f02a4b;color:white;border-radius:6px;min-height:57px}
.contact-form.letter-form .button-primary:hover {background:#fd5571}
.contact-form.letter-form .form-status {color:#ff89a0}

/* 09 — FOOTER AS A FULL BLEED POSTER */
.site-footer {max-width:none;padding:clamp(60px,6vw,120px) var(--rx-margin) 28px;
 background:#e32744;color:#161114;position:relative;overflow:hidden}
.site-footer::before {content:"TRIBYTE";position:absolute;right:-5%;top:5%;font:700 30vw/.7 var(--rx-display);
 letter-spacing:-.14em;opacity:.065;pointer-events:none}
.footer-top {border-top:1px solid #19121670;padding-top:30px;padding-bottom:clamp(90px,8vw,180px);align-items:center}
.footer-wordmark {gap:clamp(12px,2vw,35px)}
.footer-wordmark .footer-mark {width:clamp(45px,8vw,130px)}
.footer-wordmark .footer-lettering {width:min(65vw,900px);background:#151015}
.footer-top .back-top {border-color:#1b1118;color:#170f15;width:clamp(60px,7vw,102px);height:clamp(60px,7vw,102px);
 font-size:clamp(30px,3vw,45px)}
.footer-top .back-top:hover {background:#161116;color:white;transform:rotate(45deg)}
.footer-bottom {border-top:1px solid #1a121765;color:#26151b;font:10px var(--rx-mono);letter-spacing:.02em;padding-top:25px}
.footer-dot {color:#171118}
.privacy-button {color:#1b1218;font:10px var(--rx-mono);text-decoration:underline}
.privacy-button:hover {color:#fff}

/* Keyframes are optional; users selecting reduced motion always retain content */
@media (max-width:1300px){
 .site-header .desktop-nav {gap:18px}
 .hero h1 {font-size:clamp(71px,10.4vw,150px)}
 .hero-art.tb-hero-art {width:44vw}
 .project-card {height:70svh;min-height:530px}
 .team-card .team-info h3 {font-size:clamp(28px,3.6vw,55px)}
}
@media (max-width:1000px){
 .site-header .desktop-nav {gap:15px;margin-left:0}
 .site-header .desktop-nav a {font-size:9px}
 .site-header .header-cta {font-size:10px}
 .hero {min-height:850px}
 .hero h1 {font-size:clamp(63px,10.5vw,110px)}
 .hero-art.tb-hero-art {right:0;top:65px;width:48vw;height:630px}
 .hero-intro {max-width:330px}
 .project-grid {gap:80px}
 .project-card {height:610px;min-height:0}
 .project-open {grid-template-columns:1fr 1fr}
 .project-info h3 {font-size:clamp(43px,5vw,65px)}
 .team-card {grid-template-columns:1fr!important;grid-template-rows:300px auto auto}
 .team-card:first-child {grid-template-columns:40% 60%!important;grid-template-rows:1fr auto}
 .team-card .team-art {grid-column:1;grid-row:1;height:300px}
 .team-card .team-info {grid-column:1;grid-row:2}
 .team-card .team-footer {grid-column:1;grid-row:3}
 .team-card:first-child .team-art {grid-column:1;grid-row:1/span 2;height:100%}
 .team-card:first-child .team-info {grid-column:2;grid-row:1}
 .team-card:first-child .team-footer {grid-column:2;grid-row:2}
}
@media (max-width:800px){
 :root{--rx-margin:clamp(19px,5vw,40px)}
 .site-header {top:12px;left:12px;right:12px;height:66px;border-radius:12px;padding-inline:17px}
 .site-header .desktop-nav,.site-header .header-cta {display:none}
 .site-header .menu-toggle {display:flex}
 .site-header .brand-icon {width:27px;height:27px}
 .site-header .brand-lettering {width:116px}
 .mobile-menu:not([hidden]) {inset:78px 0 0;padding:24px var(--rx-margin);border-top:1px solid var(--rx-line)}
 .hero {padding-top:105px;min-height:0}
 .hero-topline {font-size:8px}
 .hero-topline>span:nth-child(2) {display:none}
 .hero-composition {padding-top:48px;min-height:0;display:flex;flex-direction:column}
 .hero-copy {position:relative;z-index:2}
 .hero h1 {font-size:clamp(54px,11.4vw,95px);letter-spacing:-.10em}
 .hero h1 .red-type {font-size:.82em}
 .hero-intro {margin-top:30px;max-width:95%}
 .hero-intro p {font-size:15px}
 .hero-copy .button-primary {min-height:54px;box-shadow:6px 6px 0 var(--rx-red);font-size:10px;margin-bottom:42px}
 .hero-art.tb-hero-art {position:relative;right:auto;top:auto;width:100%;height:auto;min-height:0;
 aspect-ratio:1.04;max-height:570px;margin:14px auto 24px}
 .hero-art::before {width:100%;right:0;top:0}
 .tb-hero-stage {top:9%;width:88%;right:6%}
 .tb-piece-caption {bottom:0%;font-size:10px}
 .hero-bottom {margin-top:0;padding-bottom:20px}
 .hero-bottom-note {display:none}
 .marquee {min-height:90px}
 .marquee-track {font-size:47px}
 .rx-lab {padding-block:88px}
 .rx-lab-head {display:block}
 .rx-lab-head h2 {font-size:clamp(58px,12vw,100px)}
 .rx-lab-head p {margin-top:25px}
 .rx-lab-visual {grid-template-columns:1fr;min-height:0}
 .rx-lab-canvas {min-height:380px}
 .rx-lab-panel {min-height:440px;gap:30px}
 .rx-lab-panel h3 {font-size:54px}
 .projects {padding-block:100px}
 .projects .section-heading {display:block}
 .projects .section-heading h2 {font-size:clamp(52px,10vw,86px)}
 .project-heading-side {align-items:flex-start;margin-top:35px}
 .project-heading-side p {align-self:flex-start}
 .project-grid {gap:36px;padding:0}
 .project-card {position:relative;top:auto;height:auto;min-height:0;border-radius:13px}
 .project-open {display:flex;flex-direction:column}
 .project-visual,.project-featured .project-visual {order:1;height:clamp(250px,48vw,430px);flex:none}
 .project-info {order:2;min-height:290px;padding:26px 26px 72px}
 .project-info h3 {font-size:clamp(44px,7vw,68px);max-width:none}
 .project-info .project-index {padding-bottom:20px}
 .project-info>p {font-size:14px}
 .project-card .project-live-link {left:26px;bottom:28px;font-size:11px}
 .project-card .project-view {width:68px;height:68px;right:16px;bottom:15px;font-size:8px;padding:7px}
 .studio-intro {display:block}
 .studio-intro h2 {font-size:clamp(47px,9vw,83px)}
 .studio-story {margin-top:48px}
 .team-grid {grid-template-columns:1fr}
 .team-card,.team-card:first-child {grid-column:1;min-height:0;grid-template-columns:40% 60%!important;grid-template-rows:1fr auto}
 .team-card .team-art,.team-card:first-child .team-art {grid-column:1;grid-row:1/span 2;height:100%;min-height:280px}
 .team-card .team-info,.team-card:first-child .team-info {grid-column:2;grid-row:1;padding:27px 22px}
 .team-card .team-footer,.team-card:first-child .team-footer {grid-column:2;grid-row:2;padding:13px 22px}
 .team-card:first-child {min-height:400px}
 .team-card .team-info h3,.team-card:first-child .team-info h3 {font-size:clamp(30px,5.5vw,52px)}
 .services .section-heading {display:block}
 .services .section-heading h2 {font-size:clamp(48px,9vw,90px)}
 .services .section-heading>p {max-width:100%;margin-top:35px}
 .service-item summary {padding:27px 8px;min-height:115px;gap:14px}
 .service-item h3 {font-size:clamp(28px,5.3vw,47px)}
 .service-item .service-number {font-size:10px;width:30px}
 .service-expand {width:46px;height:46px;font-size:26px}
 .service-body {padding:0 20px 40px 48px}
 .service-body>p {font-size:14px}
 .process-layout {grid-template-columns:1fr;gap:60px}
 .process-heading {position:relative;top:auto}
 .process-heading h2 {font-size:clamp(55px,10vw,95px)}
 .process-steps h3 {font-size:clamp(31px,5vw,52px)}
 .contact-layout {grid-template-columns:1fr;gap:65px}
 .contact-copy h2 {font-size:clamp(64px,12vw,110px)}
 .contact-form.letter-form {box-shadow:12px 12px 0 #db1e3e}
 .site-footer {padding:70px var(--rx-margin) 25px}
 .footer-top {padding-bottom:100px}
 .footer-bottom {flex-wrap:wrap;gap:20px}
}
@media (max-width:540px){
 .hero h1 {font-size:clamp(46px,12vw,67px)}
 .hero-topline {font-size:8px}
 .hero-art.tb-hero-art {aspect-ratio:.94}
 .hero-copy .hero-kicker {font-size:9px}
 .hero-copy .button-primary {width:fit-content;padding-inline:14px;gap:16px}
 .hero-bottom a {font-size:9px}
 .rx-lab-head h2 {font-size:clamp(48px,12vw,75px)}
 .rx-lab-canvas {min-height:310px}
 .rx-lab-panel {padding:26px;min-height:460px}
 .rx-lab-panel h3 {font-size:50px}
 .rx-lab-options button {font-size:11px;min-height:54px}
 .project-card .project-visual,.project-featured .project-visual {height:270px}
 .project-info {min-height:265px}
 .project-info h3 {font-size:45px}
 .team-card,.team-card:first-child {display:block!important;min-height:0!important}
 .team-card .team-art,.team-card:first-child .team-art {height:310px;width:100%;min-height:0}
 .team-card .team-info,.team-card:first-child .team-info {padding:25px;min-height:230px}
 .team-card .team-info h3,.team-card:first-child .team-info h3 {font-size:43px}
 .team-card .team-footer,.team-card:first-child .team-footer {padding:18px 25px}
 .service-item h3 {font-size:clamp(25px,5.9vw,35px)}
 .service-item summary {gap:10px}
 .services .section-heading h2 {font-size:clamp(43px,9vw,70px)}
 .process-heading h2 {font-size:clamp(56px,12vw,83px)}
 .contact-copy h2 {font-size:clamp(62px,14vw,84px)}
 .contact-form.letter-form {padding:24px 18px}
 .footer-bottom>span {font-size:9px}
 .footer-wordmark .footer-lettering {width:min(59vw,380px)}
 .footer-wordmark .footer-mark {width:40px}
 .site-footer .back-top {height:48px;width:48px;font-size:24px}
}
@media (max-width:360px){
 .hero h1 {font-size:43px}
 .service-item h3 {font-size:23px}
 .rx-lab-panel h3 {font-size:44px}
 .project-info h3 {font-size:40px}
}
@media (hover:none),(pointer:coarse){
 .project-card,.team-card {transform:none!important}
 .hero .tb-hero-stage {transition:none}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after {scroll-behavior:auto}
 .hero-art::before,.rx-portal-ring,.hero h1 .red-type {animation:none!important}
 .project-open,.rx-lab-image,.team-photo {transform:none!important;transition:none!important}
 .project-card {position:relative;top:auto}
 .rx-lab-orbit {transform:translate(-50%,-50%)}
}
@media print {
 .site-header {position:static}
 .hero,.projects,.studio,.services,.process,.contact {background:#fff!important;color:#111!important}
 .project-card {position:relative;top:auto;height:auto;break-inside:avoid;box-shadow:none}
 .project-open {display:block}
 .rx-lab {display:none!important}
}


/* ==========================================================================
   TRIBYTE / VISUAL POLISH V2 — proportions, clear type hierarchy, rhythm.
   The new editorial identity stays intact. All content remains semantic.
   ========================================================================== */
:root {
  --rx-copy: clamp(15px, 1.14vw, 18px);
  --rx-copy-leading: 1.7;
  --rx-block-gap: clamp(24px, 3.4vw, 60px);
  --rx-section-gap: clamp(88px, 9vw, 170px);
}

/* Consistent rhythm throughout the presentation */
.section-space { padding-block: var(--rx-section-gap); }
.section-topline { padding-bottom: 22px; }
.section-heading { gap: clamp(30px, 5vw, 90px); }
.section-heading h2,
.studio-intro h2,
.rx-lab-head h2,
.contact-copy h2,
.process-heading h2 { text-wrap: balance; }
.section-heading > p, .project-heading-side > p,
.contact-copy > p, .process-heading > p { line-height: 1.75; }
.service-body > p, .rx-lab-panel > p { max-width: 55ch; }
.button { align-items: center; }
.project-card, .team-card, .service-item, .rx-lab-visual {
  -webkit-font-smoothing: antialiased;
}

/* Floating menu: intentional breathing room, no truncated CTA */
.site-header {
  left: clamp(14px,2.5vw,44px);
  right: clamp(14px,2.5vw,44px);
  top: clamp(12px,1.6vw,24px);
  height: 74px;
  padding-inline: clamp(18px,2.3vw,32px);
  gap: 20px;
}
.site-header .desktop-nav { flex: 0 1 auto; gap: clamp(16px,2.1vw,32px); }
.site-header .desktop-nav a {
  font-size: clamp(9px,.78vw,11px);
  white-space: nowrap;
  letter-spacing:.03em;
}
.site-header .header-actions { gap: 15px; flex: none; }
.site-header .header-cta { gap: 16px; flex: none; }
.site-header .brand-lettering { width: clamp(112px,9.5vw,157px); }

/* HERO — use two *separate* columns, never overlap the live mark with text.
   On medium and small screens the portal becomes its own full-width panel. */
.hero { min-height: 0; padding-top: clamp(125px,11.3vw,180px); }
.hero-topline { padding-bottom: 3px; }
.hero-composition {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(25px,3.4vw,72px);
  align-items: center;
  min-height: 0;
  padding-top: clamp(45px,5vw,90px);
  padding-bottom: clamp(45px,6vw,105px);
}
.hero-copy { grid-column:1; min-width:0; width:100%; position:relative; z-index:3; }
.hero-copy .hero-kicker {
  margin-bottom: clamp(28px,3.2vw,55px);
  font-size:clamp(10px,.88vw,13px);
  line-height:1.5;
}
.hero h1 {
  font-size: clamp(64px,7.15vw,128px);
  line-height:.93;
  letter-spacing:-.087em;
  max-width:none;
  text-wrap:nowrap;
}
.hero h1 > span { white-space:nowrap; }
.hero h1 .hero-outline { -webkit-text-stroke-width:1.4px; }
.hero h1 .red-type {
  font-size:.79em;
  letter-spacing:-.077em;
  line-height:1.05;
}
.hero-intro { max-width: 44ch; margin-top:clamp(33px,4vw,66px); }
.hero-intro p {
  font-size:clamp(15px,1.16vw,18px);
  line-height:1.72;
  max-width:45ch;
}
.hero .button-primary { margin: 25px 0 0; }
.hero-art.tb-hero-art {
  grid-column:2;
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio: .91;
  margin:0;
  border-radius:22px;
  align-self:center;
  box-shadow:0 25px 70px #100d1222;
}
.hero .tb-hero-stage { right:6%;top:12%;width:88%; }
.hero .rx-portal-label { top:26px;left:25px;max-width:70%;font-size:9px;line-height:1.5; }
.hero .rx-portal-coordinate { bottom:24px;left:25px;font-size:9px; }
.hero .tb-piece-caption { max-width:270px; font-size:10px; line-height:1.5; }
.hero-bottom { margin:0 0 36px; padding:21px 0; flex-wrap:wrap; }
.hero-bottom p,.hero-bottom a,.hero-bottom-note { font-size:10px; line-height:1.5; }

/* Let the visual sections breathe after the hero */
.marquee { min-height:clamp(96px,10vw,145px); }
.marquee-track { font-size:clamp(44px,5.3vw,82px); line-height:1.12; }

/* LAB — consistently spaced typographic layers */
.rx-lab { padding-block:var(--rx-section-gap); }
.rx-lab-head { align-items:end; margin-bottom:clamp(40px,5.2vw,80px); }
.rx-lab-head h2 { font-size:clamp(65px,8.1vw,145px); line-height:.94; }
.rx-lab-head p {
  font-size:var(--rx-copy);
  line-height:var(--rx-copy-leading);
  max-width:30ch;
  padding-bottom:7px;
}
.rx-lab-visual { min-height:clamp(530px,52vw,760px); border-radius:18px; }
.rx-lab-panel { padding:clamp(32px,3.1vw,55px);gap:clamp(19px,2vw,34px); }
.rx-lab-panel .rx-eyebrow { font-size:10px;line-height:1.6; }
.rx-lab-panel h3 {
  font-size:clamp(37px,3.65vw,68px);
  line-height:1.04;
  letter-spacing:-.074em;
  max-width:12ch;
  overflow-wrap:normal;
}
.rx-lab-panel p { font-size:clamp(14px,1.07vw,17px);line-height:1.7; }
.rx-lab-options { gap:10px; }
.rx-lab-options button {
  min-height:57px;
  font-size:clamp(11px,.87vw,13px);
  letter-spacing:.01em;
  padding:12px 18px;
  line-height:1.35;
}
.rx-lab-cta { font-size:11px;line-height:1.55; }

/* Projects: clear editorial covers; captions never touch main controls */
.projects { padding-block:var(--rx-section-gap) clamp(140px,13vw,240px); }
.projects .section-topline { margin-bottom:clamp(50px,5vw,85px); }
.projects .section-heading { margin-bottom:clamp(60px,7vw,105px); }
.projects .section-heading h2 {
  font-size:clamp(63px,7.4vw,133px);
  line-height:.96;
  letter-spacing:-.081em;
}
.projects .project-heading-side p {
  max-width:34ch;
  font-size:clamp(14px,1vw,17px);
  line-height:1.7;
}
.projects .project-filters { flex-wrap:wrap; }
.project-grid { gap:clamp(66px,9vw,125px); }
.project-card {
  height:clamp(550px,70svh,740px);
  min-height:0;
  border-radius:17px;
}
.project-open { grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); }
.project-info {
  padding:clamp(35px,4vw,67px);
  gap:clamp(30px,4vw,70px);
  overflow:hidden;
}
.project-info .project-index {
  padding-bottom:clamp(24px,3.7vw,58px);
  font-size:10px;line-height:1.5;
}
.project-info h3 {
  max-width:10ch;
  font-size:clamp(47px,4.6vw,82px);
  line-height:1.04;
  letter-spacing:-.072em;
  overflow-wrap:normal;
}
.project-info > p {
  font-size:clamp(14px,1.2vw,18px);
  line-height:1.65;
  max-width:31ch;
  margin:0;
}
.project-card:first-child .project-info { padding-bottom:clamp(112px,10vw,153px); }
.project-card .project-live-link {
  left:clamp(35px,4vw,67px);
  bottom:clamp(39px,4vw,67px);
  font-size:11px;
  line-height:1.6;
}
.project-card .project-view { width:79px;height:79px;right:23px;bottom:21px;font-size:8px; }
.project-card .visual-label { max-width:calc(100% - 30px);line-height:1.55; }
.project-card[hidden] { display:none!important; }

/* Studio: card content gets a designated area; names must never collide */
.studio { padding-block:var(--rx-section-gap); }
.studio .section-topline { margin-bottom:clamp(48px,5vw,84px); }
.studio-intro {
  grid-template-columns:minmax(0,1.18fr) minmax(290px,.62fr);
  gap:clamp(40px,5vw,100px);
  margin-bottom:clamp(52px,6vw,95px);
}
.studio-intro h2 {
  font-size:clamp(54px,6.3vw,115px);
  line-height:1.02;
  letter-spacing:-.075em;
}
.studio-story {padding-left:clamp(17px,2vw,30px);margin-bottom:6px}
.studio-story p {font-size:clamp(14px,1vw,16px);line-height:1.82;}
.studio-story p+p {margin-top:clamp(13px,1.2vw,23px)}
.team-grid {gap:clamp(18px,2.2vw,34px);}
.team-card,.team-card:first-child {min-height:clamp(420px,35vw,570px);}
.team-card:first-child {min-height:clamp(490px,40vw,650px);}
.team-card .team-info {padding:clamp(25px,3vw,50px);min-width:0;justify-content:flex-start;gap:13px}
.team-card .team-info h3 {
  font-size:clamp(30px,3vw,52px);
  line-height:1.07;
  letter-spacing:-.063em;
  overflow-wrap:break-word;
  margin-bottom:6px;
}
.team-card:first-child .team-info h3 {
  font-size:clamp(43px,5vw,82px);
  line-height:1.03;
}
.team-card .team-info > span {font-size:10px;letter-spacing:.08em;line-height:1.5;}
.team-card .profile-open {
  margin-top:auto;
  max-width:100%;
  min-height:52px;
  white-space:normal;
  line-height:1.5;
  gap:15px;
  padding:12px 17px;
}
.team-card .team-footer {
  gap:10px;
  padding:16px clamp(25px,3vw,50px);
  line-height:1.6;
}
.team-card:nth-child(2) .team-footer,.team-card:nth-child(3) .team-footer { opacity:.84; }

/* Services: keep the bold transition but make the type scannable */
.services {padding-block:var(--rx-section-gap)}
.services .section-heading {margin-bottom:clamp(60px,6vw,115px);}
.services .section-heading h2 {
  font-size:clamp(52px,6.3vw,112px);
  line-height:.98;
  letter-spacing:-.075em;
}
.services .section-heading>p {font-size:var(--rx-copy);line-height:1.7;max-width:32ch}
.service-item summary {
  min-height:clamp(112px,10vw,170px);
  padding:clamp(26px,3vw,48px) clamp(12px,1.3vw,22px);
  gap:clamp(18px,2.2vw,40px);
}
.service-item h3 {
  font-size:clamp(31px,3.85vw,70px);
  line-height:1.13;
  letter-spacing:-.064em;
  overflow-wrap:anywhere;
}
.service-item .service-number { font-size:11px;line-height:1.3; }
.service-expand {flex:none;}
.service-body {padding-bottom:clamp(35px,4.5vw,80px)}
.service-body>p {font-size:clamp(15px,1.2vw,19px);line-height:1.75}

/* Process: readable two-column timeline rather than cramped stacked copy */
.process {padding-block:var(--rx-section-gap);}
.process .section-topline {margin-bottom:clamp(70px,7vw,115px)}
.process-layout {gap:clamp(60px,8vw,150px);}
.process-heading h2 {
  font-size:clamp(58px,6.6vw,112px);
  line-height:.99;
  letter-spacing:-.075em;
}
.process-heading>p {max-width:34ch;font-size:clamp(15px,1.1vw,18px);line-height:1.75}
.process-steps li {padding:34px 12px 44px;min-height:225px}
.process-steps h3 {font-size:clamp(29px,2.55vw,44px);line-height:1.2;letter-spacing:-.05em}
.process-steps p {font-size:clamp(14px,1.08vw,17px);line-height:1.75}

/* Contact: proper label hierarchy and padding; dark panel retains red inset */
.contact {padding-block:var(--rx-section-gap);}
.contact .section-topline {margin-bottom:clamp(55px,5.7vw,100px)}
.contact-layout {
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(55px,6vw,115px);
  align-items:start;
}
.contact-copy h2 {font-size:clamp(60px,6.5vw,108px);line-height:1.02;letter-spacing:-.084em;}
.contact-copy>p {font-size:var(--rx-copy);line-height:1.75;max-width:34ch;margin-top:39px}
.contact-form.letter-form {
  padding:clamp(30px,3.6vw,64px);
  box-shadow:clamp(10px,1.65vw,24px) clamp(10px,1.65vw,24px) 0 #db1e3e;
}
.contact-form.letter-form .form-heading {margin-bottom:32px;}
.contact-form.letter-form .letter-label {font-size:clamp(21px,1.85vw,29px);line-height:1.35;}
.contact-form.letter-form textarea {min-height:185px;line-height:1.65;}
.contact-form.letter-form label {line-height:1.6;font-size:12px;}
.contact-form.letter-form input[type="text"] {font-size:15px;line-height:1.5;padding:14px 0;}
.contact-form.letter-form .form-row {gap:clamp(14px,2vw,29px);}

/* Footer: branding is big, legal metadata stays readable */
.site-footer {padding-top:clamp(70px,7vw,120px)}
.footer-top {gap:clamp(18px,3vw,50px);padding-bottom:clamp(75px,8vw,145px)}
.footer-wordmark {min-width:0}
.footer-wordmark .footer-lettering {width:min(61vw,830px);min-width:0;}
.footer-bottom {gap:clamp(17px,2vw,30px);font-size:10px;line-height:1.6;flex-wrap:wrap}
.footer-bottom span,.privacy-button {font-size:10px;line-height:1.65}

/* Tablet & laptop: one CTA/nav mode, with no squeezed desktop menu */
@media (max-width:1100px) {
 .site-header .desktop-nav,.site-header .header-cta {display:none}
 .site-header .menu-toggle {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
 .site-header .menu-toggle span {display:block;width:20px;height:1px;background:var(--text)}
 .mobile-menu:not([hidden]) {
   display:flex;position:fixed;inset:96px 14px 14px;z-index:64;
   flex-direction:column;gap:0;padding:clamp(20px,4vw,44px);
   background:var(--bg);border:1px solid var(--line);border-radius:12px;
   overflow-y:auto;box-shadow:0 30px 70px #0003;
 }
 .mobile-menu>a {display:flex;align-items:center;justify-content:space-between;
   gap:18px;font-size:clamp(23px,3.5vw,38px);letter-spacing:-.04em;
   padding:clamp(13px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
 .mobile-menu>a span {color:var(--accent-ink)}
 .mobile-menu>p {margin-top:auto;padding-top:25px;font-size:12px;color:var(--muted)}
 .hero-composition {grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:60px}
 .hero-copy,.hero-art.tb-hero-art {grid-column:1}
 .hero h1 {font-size:clamp(68px,8.8vw,103px)}
 .hero-art.tb-hero-art {width:min(100%,690px);aspect-ratio:1.23;margin-left:auto}
 .hero-intro {max-width:46ch}
 .studio-intro {grid-template-columns:1fr;gap:34px}
 .studio-intro h2 {max-width:920px}
 .studio-story {max-width:680px}
 .contact-layout {gap:clamp(35px,4vw,70px)}
 .contact-copy h2 {font-size:clamp(56px,6.9vw,85px)}
}
@media (max-width:800px) {
 .hero {padding-top:108px}
 .hero-composition {display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:45px;padding-bottom:20px}
 .hero-copy {width:100%;max-width:none}
 .hero h1 {font-size:clamp(53px,10vw,81px);letter-spacing:-.089em}
 .hero h1 .red-type {font-size:.8em}
 .hero-intro {max-width:48ch;margin-top:28px}
 .hero-art.tb-hero-art {position:relative;width:100%;aspect-ratio:1.14;min-height:0;margin:35px 0 25px}
 .hero .rx-portal-label {left:19px;top:18px;font-size:8px}
 .hero .rx-portal-coordinate {left:19px;bottom:19px;font-size:8px}
 .hero-bottom {margin-bottom:25px}
 .rx-lab-head h2 {font-size:clamp(60px,10vw,92px)}
 .rx-lab-head p {max-width:50ch}
 .rx-lab-visual {min-height:0;display:grid;grid-template-columns:1fr}
 .rx-lab-panel {min-height:0;gap:24px;padding:clamp(23px,4vw,38px)}
 .rx-lab-panel h3 {font-size:clamp(36px,6.4vw,58px);max-width:18ch}
 .rx-lab-canvas {min-height:clamp(290px,58vw,430px)}
 .projects .section-heading h2 {font-size:clamp(54px,9vw,80px)}
 .project-grid {gap:clamp(35px,5vw,55px)}
 .project-card {height:auto;min-height:0;position:relative;top:auto}
 .project-open {display:flex;flex-direction:column;transform:none!important}
 .project-visual,.project-featured .project-visual {height:clamp(255px,48vw,415px)}
 .project-info {padding:clamp(24px,4vw,34px);gap:20px;min-height:265px;overflow:visible}
 .project-info h3 {font-size:clamp(42px,6.3vw,61px);max-width:none}
 .project-card:first-child .project-info {padding-bottom:86px}
 .project-card .project-live-link {left:clamp(24px,4vw,34px);bottom:25px}
 .project-card .project-view {width:69px;height:69px;right:15px;bottom:15px}
 .team-grid {grid-template-columns:1fr;gap:24px}
 .team-card,.team-card:first-child {min-height:0!important}
 .team-card .team-info,.team-card:first-child .team-info {padding:clamp(22px,3.8vw,35px)}
 .team-card .team-footer,.team-card:first-child .team-footer {padding:15px clamp(22px,3.8vw,35px)}
 .team-card .team-info h3,.team-card:first-child .team-info h3 {font-size:clamp(32px,4.8vw,52px)}
 .services .section-heading h2 {font-size:clamp(47px,8vw,76px)}
 .service-item h3 {font-size:clamp(28px,5vw,47px)}
 .process-heading h2 {font-size:clamp(57px,9vw,94px)}
 .contact-layout {grid-template-columns:1fr;gap:48px}
 .contact-copy h2 {font-size:clamp(59px,10vw,93px)}
 .contact-form.letter-form {padding:clamp(25px,4vw,37px);box-shadow:12px 12px 0 #db1e3e}
}
@media (max-width:540px) {
 .section-space {padding-block:82px}
 .hero-topline {font-size:8px}
 .hero-composition {padding-top:35px}
 .hero-copy .hero-kicker {font-size:9px;margin-bottom:25px}
 .hero h1 {font-size:clamp(42px,11.45vw,59px);line-height:1.02;letter-spacing:-.095em}
 .hero h1 .red-type {font-size:.81em;letter-spacing:-.065em}
 .hero-intro p {font-size:15px;line-height:1.7}
 .hero-art.tb-hero-art {aspect-ratio:1.03;margin-top:30px}
 .hero-bottom {gap:12px}
 .hero-bottom p {font-size:9px}
 .rx-lab {padding-block:82px}
 .rx-lab-head h2 {font-size:clamp(50px,11vw,66px)}
 .rx-lab-head p {font-size:15px}
 .rx-lab-panel {gap:23px;padding:22px}
 .rx-lab-panel h3 {font-size:clamp(38px,10vw,51px)}
 .rx-lab-panel p {font-size:15px}
 .rx-lab-options button {font-size:11px;min-height:54px}
 .rx-lab-cta {font-size:10px}
 .projects .section-heading h2 {font-size:clamp(48px,10.2vw,61px)}
 .project-visual,.project-featured .project-visual {height:255px}
 .project-info {min-height:245px;padding:24px}
 .project-info h3 {font-size:clamp(38px,9.2vw,50px);line-height:1.08}
 .project-info>p {font-size:14px}
 .project-card:first-child .project-info {padding-bottom:90px}
 .project-card .project-live-link {left:24px;bottom:27px;font-size:10px}
 .studio-intro h2 {font-size:clamp(44px,9.7vw,62px);line-height:1.06}
 .studio-story p {font-size:14px}
 .team-card .team-art,.team-card:first-child .team-art {height:305px}
 .team-card .team-info,.team-card:first-child .team-info {padding:24px;min-height:210px}
 .team-card .team-info h3,.team-card:first-child .team-info h3 {font-size:clamp(34px,8.7vw,45px)}
 .services .section-heading h2 {font-size:clamp(43px,9vw,60px)}
 .service-item summary {padding:28px 8px;gap:12px;min-height:105px}
 .service-item h3 {font-size:clamp(24px,5.75vw,31px);line-height:1.15}
 .service-expand {width:43px;height:43px}
 .service-body {padding:0 14px 35px 43px}
 .process-heading h2 {font-size:clamp(51px,11vw,68px)}
 .process-steps h3 {font-size:clamp(29px,7vw,39px)}
 .contact-copy h2 {font-size:clamp(56px,12vw,73px);line-height:1.05}
 .contact-form.letter-form {padding:24px 19px;box-shadow:9px 9px 0 #db1e3e}
 .contact-form.letter-form .form-row {grid-template-columns:1fr;gap:20px}
 .contact-form.letter-form textarea {min-height:190px;padding:17px}
 .footer-bottom {align-items:flex-start;gap:12px}
 .footer-wordmark .footer-lettering {width:min(59vw,330px)}
}
@media (max-width:370px){
 .hero h1 {font-size:clamp(39px,11.4vw,43px)}
 .rx-lab-head h2 {font-size:48px}
 .project-info h3 {font-size:38px}
 .service-item h3 {font-size:23px}
}
@media (prefers-reduced-motion: reduce) {
 .hero-copy, .tb-hero-stage {transition:none!important}
 .rb-split-ready .rb-word {opacity:1!important;transform:none!important;filter:none!important}
}


/* ======================================================================
   TRIBYTE / SCREENSHOT FIX V3 — header, interactive team gallery, services.
   Corrects the specific visual defects reported from 11 Nov screenshots.
   ====================================================================== */

/* Header logo & controls: a single optical centre line on every viewport. */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header .wordmark {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  height:100%;
  min-height:0;
  line-height:1;
  gap:10px;
  padding:0;
  margin:0;
  transform:none;
}
.site-header .wordmark .brand-icon {
  width:32px;
  height:32px;
  flex:none;
  align-self:center;
  object-fit:contain;
  margin:0;
}
.site-header .wordmark .brand-lettering {
  display:block;
  width:clamp(113px,10vw,153px);
  height:auto;
  aspect-ratio:1030 / 155;
  flex:none;
  align-self:center;
  margin:0;
  background-color:var(--text);
}
.site-header .header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
  flex:none;
  gap:12px;
}
.site-header .theme-toggle,
.site-header .menu-toggle {
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:9px;
  align-items:center;
  justify-content:center;
  margin:0;
}
.site-header .menu-toggle {
  flex-direction:column;
  gap:6px;
}
.site-header .menu-toggle span {flex:none}
.site-header .theme-toggle svg {width:21px;height:21px;flex:none}
.site-header .desktop-nav {margin-inline:auto}

/* On laptop widths, keep the 3D monogram beside the statement
   instead of leaving it far below the CTA. */
@media (min-width:801px) and (max-width:1200px) {
  .hero { min-height:0;padding-top:125px; }
  .hero-composition {
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:center;
    gap:clamp(20px,3vw,44px);
    min-height:0;
    padding-top:clamp(42px,5vw,65px);
    padding-bottom:clamp(35px,4.5vw,65px);
  }
  .hero-copy {grid-column:1;max-width:none}
  .hero h1 {
    font-size:clamp(45px,5.15vw,67px);
    line-height:.98;
    letter-spacing:-.087em;
  }
  .hero h1 .red-type {font-size:.79em}
  .hero-intro {margin-top:clamp(27px,3vw,40px);max-width:42ch}
  .hero-intro p {font-size:clamp(14px,1.35vw,17px);line-height:1.65}
  .hero-copy .button-primary {
    margin:21px 0 0;
    min-height:52px;
    padding:12px 16px;
    font-size:10px;
    gap:15px;
  }
  .hero-art.tb-hero-art {
    grid-column:2;
    position:relative;
    inset:auto;
    top:auto;
    right:auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:.83;
    margin:0;
    align-self:center;
  }
  .hero .tb-hero-stage {width:93%;right:3.5%;top:12%}
  .hero .tb-piece-caption {font-size:9px;max-width:200px;right:1%;bottom:-4%}
  .hero .rx-portal-label {font-size:8px;max-width:85%}
  .hero .rx-portal-coordinate {font-size:8px}
}
@media (max-width:800px) {
  .site-header .wordmark .brand-icon {width:29px;height:29px}
  .site-header .wordmark .brand-lettering {width:116px}
  .hero-copy .button-primary {margin-bottom:0}
  .hero-art.tb-hero-art {margin-top:clamp(18px,4vw,35px)}
}

/* TEAM — equal-width, same-height photos; no oversized first card.
   A card is a selectable preview. Its original profile button still works. */
.studio .team-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;
  align-items:stretch;
  gap:clamp(14px,1.8vw,28px);
}
.studio .team-grid > .team-card,
.studio .team-grid > .team-card:first-child {
  display:flex!important;
  flex-direction:column;
  grid-column:auto!important;
  grid-row:auto!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  min-width:0;
  min-height:0!important;
  height:auto;
  align-self:stretch;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transform:none!important;
  transition:
    box-shadow .35s var(--rx-ease),
    border-color .35s var(--rx-ease),
    background .35s var(--rx-ease);
}
.studio .team-grid > .team-card .team-art,
.studio .team-grid > .team-card:first-child .team-art {
  display:block;
  flex:0 0 auto;
  width:100%;
  height:clamp(230px,26vw,360px);
  min-height:0;
  grid-row:auto!important;
  grid-column:auto!important;
  overflow:hidden;
  isolation:isolate;
}
.studio .team-card .team-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 31%;
  transition:transform .65s var(--rx-ease),filter .45s var(--rx-ease);
}
.studio .team-card .gustavo-art .team-photo {object-position:center 25%}
.studio .team-card .marcio-art .team-photo {object-position:center 37%}
.studio .team-card .lucas-art .team-photo {object-position:center 28%}
.studio .team-grid > .team-card .team-info,
.studio .team-grid > .team-card:first-child .team-info {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%;
  min-height:215px;
  padding:clamp(21px,2.15vw,35px);
  gap:9px;
  background:transparent;
}
.studio .team-grid > .team-card .team-info h3,
.studio .team-grid > .team-card:first-child .team-info h3 {
  font:600 clamp(26px,2.3vw,39px)/1.09 var(--rx-display);
  letter-spacing:-.056em;
  min-width:0;
  margin:0 0 6px;
  overflow-wrap:normal;
  color:inherit;
}
.studio .team-card .team-info>span {
  display:block;
  color:inherit;
  opacity:.72;
  font:10px/1.65 var(--rx-mono);
  margin:0;
  letter-spacing:.045em;
}
.studio .team-grid > .team-card .profile-open {
  width:100%;
  min-height:51px;
  margin-top:auto;
  padding:12px 17px;
  text-align:left;
  font:11px/1.5 var(--rx-mono);
  white-space:normal;
  gap:10px;
  transition:background .3s,transform .3s;
}
.studio .team-grid > .team-card .team-footer,
.studio .team-grid > .team-card:first-child .team-footer {
  display:flex;
  flex:0 0 auto;
  justify-content:space-between;
  align-items:center;
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%;
  min-height:51px;
  gap:12px;
  padding:12px clamp(21px,2.15vw,35px);
  font:9px/1.5 var(--rx-mono);
  opacity:.84;
}
.studio .team-card .team-footer a {
  color:inherit;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:3px;
}
.studio .team-card .team-number {font:10px/1.3 var(--rx-mono);opacity:.82}
.studio .team-grid > .team-card .team-art::after {
  bottom:18px;
  left:18px;
  font-size:10px;
  opacity:.9;
}
.studio .team-grid > .team-card:hover,
.studio .team-grid > .team-card.is-selected {
  border-color:#f12b4a;
  box-shadow:0 25px 55px #0000002e,0 0 0 1px #f12b4a68;
}
.studio .team-grid > .team-card:is(:hover,.is-selected) .team-photo {
  transform:scale(1.065);
  filter:grayscale(0) contrast(1.04);
}
.studio .team-grid > .team-card:focus-visible {
  outline:3px solid var(--rx-red);
  outline-offset:5px;
}
.studio .team-grid > .team-card.is-selected .profile-open {
  background:#ed2447;
  color:white;
}
.studio .team-grid > .team-card .profile-open:hover {transform:translateY(-2px)}
/* Make all three titles and CTAs legible against their card backgrounds. */
.studio .team-card:first-child .team-info,
.studio .team-card:first-child .team-footer {color:#fff}
.studio .team-card:nth-child(2) .team-info,
.studio .team-card:nth-child(2) .team-footer {color:#171719}
.studio .team-card:nth-child(3) .team-info,
.studio .team-card:nth-child(3) .team-footer {color:#171719}

@media (max-width:900px) {
  .studio .team-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio .team-grid > .team-card .team-art,
  .studio .team-grid > .team-card:first-child .team-art {height:clamp(245px,34vw,320px)}
}
@media (max-width:620px) {
  .studio .team-grid {grid-template-columns:1fr;gap:20px}
  .studio .team-grid > .team-card .team-art,
  .studio .team-grid > .team-card:first-child .team-art {height:clamp(270px,80vw,420px)}
  .studio .team-grid > .team-card .team-info,
  .studio .team-grid > .team-card:first-child .team-info {
    padding:24px;
    min-height:185px;
  }
  .studio .team-grid > .team-card .team-info h3,
  .studio .team-grid > .team-card:first-child .team-info h3 {
    font-size:clamp(29px,8vw,38px);
  }
  .studio .team-grid > .team-card .team-footer,
  .studio .team-grid > .team-card:first-child .team-footer {padding:13px 24px}
}

/* SERVICES — remove the light-on-light bug. Solid ink surface for open
   and hovered details, with legible labels regardless of saved theme. */
.services .service-item {
  position:relative;
  isolation:isolate;
  background:transparent;
  color:var(--rx-ink);
  border-bottom:1px solid var(--rx-line);
  overflow:hidden;
  transition:background-color .35s var(--rx-ease),color .35s var(--rx-ease);
}
.services .service-item::before {display:none}
.services .service-item:is([open],:hover,:focus-within) {
  background:#19171c;
  color:#fff;
}
.services .service-item summary {
  display:grid;
  grid-template-columns:clamp(30px,4vw,48px) minmax(0,1fr) clamp(43px,5vw,60px);
  gap:clamp(13px,2.5vw,28px);
  align-items:center;
  padding:clamp(22px,2.7vw,40px) clamp(14px,2vw,30px);
  margin:0;
  min-height:clamp(103px,8.3vw,142px);
  list-style:none;
}
.services .service-item summary::-webkit-details-marker {display:none}
.services .service-item .service-number {
  width:auto;
  font:11px var(--rx-mono);
  line-height:1.5;
  color:var(--rx-red);
  align-self:center;
}
.services .service-item h3 {
  color:inherit;
  font:600 clamp(25px,3.5vw,56px)/1.12 var(--rx-display);
  letter-spacing:-.065em;
  margin:0;
  min-width:0;
}
.services .service-item:is([open],:hover,:focus-within) h3 {color:#fff}
.services .service-item:is([open],:hover,:focus-within) .service-number {color:#ff718a}
.services .service-item .service-expand {
  display:grid;
  place-items:center;
  width:clamp(43px,5vw,60px);
  height:clamp(43px,5vw,60px);
  border:1px solid currentColor;
  border-radius:50%;
  font-size:28px;
  font-weight:400;
  color:inherit;
  transition:transform .3s var(--rx-ease),background .3s,border-color .3s;
}
.services .service-item[open] .service-expand {
  background:#f12a4d;
  border-color:#f12a4d;
  color:#fff;
  transform:rotate(45deg);
}
.services .service-item .service-body {
  color:#f5f0ee;
  max-width:none;
  padding:0 clamp(25px,5.5vw,100px) clamp(30px,4vw,68px) clamp(64px,7.6vw,120px);
  animation:rx-service-reveal .36s var(--rx-ease) both;
}
.services .service-item .service-body>p {
  color:#e3dce0;
  font:clamp(14px,1.15vw,18px)/1.72 var(--rx-display);
  max-width:56ch;
}
.services .service-item .service-chips span {
  border:1px solid #ffffff6e;
  color:#f3e9ea;
  padding:9px 13px;
  font:10px/1.4 var(--rx-mono);
}
.services .service-item .service-body>a {color:#ff9baa;border-bottom-color:#ff9baa}
.services .service-item .service-body>a span {color:#ff9baa}
@keyframes rx-service-reveal {
  from {opacity:.2;transform:translateY(-9px)}
  to {opacity:1;transform:translateY(0)}
}
@media (max-width:620px) {
  .services .service-item summary {grid-template-columns:26px minmax(0,1fr) 43px;padding:22px 10px;gap:11px}
  .services .service-item h3 {font-size:clamp(22px,6vw,34px)}
  .services .service-item .service-body {padding:0 17px 28px 46px}
}
@media (prefers-reduced-motion:reduce) {
  .studio .team-grid > .team-card,
  .studio .team-grid > .team-card .team-photo,
  .services .service-item,.services .service-item .service-body {
    animation:none!important;transition:none!important;
  }
}


/* ===== reactbits-effects.css ===== */
/* TRIBYTE: animações de texto e foco sutil, sem dependências de React. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .red-type {
    background-image: linear-gradient(110deg,#da0921 0%,#fb1023 30%,#ff7581 48%,#fb1023 70%,#ef0c2b 100%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rb-red-shine 9s linear infinite;
  }
  .hero h1 .red-type .title-period {
    background: none;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
  }
}
@keyframes rb-red-shine {
  0% { background-position: 100% 50%; }
  100% { background-position: -120% 50%; }
}
.hero-art::before {
  position: absolute;
  top: 4%;
  right: -8%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 50%,rgba(255,47,79,.14),rgba(209,2,32,.06) 34%,transparent 72%);
  content: "";
  filter: blur(26px);
  pointer-events: none;
  animation: rb-ambient-pulse 12s ease-in-out infinite alternate;
}
@keyframes rb-ambient-pulse {
  from { opacity: .5; transform: scale(.94); }
  to { opacity: .9; transform: scale(1.04); }
}
.rb-split-ready .rb-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0,.45em,0);
  transform-origin: center bottom;
  transition: opacity .6s ease,filter .75s ease,transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--rb-i, 0) * 42ms);
  will-change: opacity,transform,filter;
}
.rb-split-ready.rb-revealed .rb-word {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0);
}
.rb-split-ready.rb-revealed .rb-word:last-child { will-change: auto; }
.rb-spotlight-host { position: relative; isolation: isolate; }
.rb-spotlight-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: radial-gradient(370px circle at var(--rb-mouse-x,50%) var(--rb-mouse-y,50%),rgba(255,64,89,.16),rgba(251,16,35,.04) 42%,transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.rb-spotlight-host:is(:hover,:focus-within) > .rb-spotlight-layer { opacity: 1; }
.project-visual > .rb-spotlight-layer { border-radius: 0; }
.team-card > .rb-spotlight-layer {
  background: radial-gradient(430px circle at var(--rb-mouse-x,50%) var(--rb-mouse-y,50%),rgba(251,16,35,.1),transparent 66%);
}
:root[data-theme="light"] .rb-spotlight-layer {
  background: radial-gradient(440px circle at var(--rb-mouse-x,50%) var(--rb-mouse-y,50%),rgba(210,8,32,.1),rgba(240,35,60,.04) 45%,transparent 70%);
}
@media (max-width: 800px) {
  .rb-spotlight-layer { display: none; }
  .hero-art::before { width: 75vw; right: -20%; filter: blur(20px); }
  .rb-split-ready .rb-word { transition-delay: calc(var(--rb-i, 0) * 28ms); }
}
@media (hover: none), (pointer: coarse) {
  .rb-spotlight-layer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .red-type,.hero-art::before { animation: none; }
  .rb-split-ready .rb-word {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .rb-spotlight-layer { display: none; }
}
@media print {
  .rb-split-ready .rb-word { opacity: 1; filter: none; transform: none; }
  .rb-spotlight-layer { display: none; }
  .hero h1 .red-type { -webkit-text-fill-color: var(--accent); animation: none; }
}


/* ===== tribyte-referencias.css ===== */
/* Referências externas: visuais demonstrativos, não capturas dos produtos. */
.system-references {
  background: #f1ede6;
  color: #19171b;
  border-block: 1px solid #d7cfc8;
  padding: clamp(72px, 8vw, 124px) var(--rx-margin, 5vw);
}
.system-references .refs-header {
  display: block;
  margin-bottom: clamp(32px, 4vw, 58px);
}
.system-references h2 {
  max-width: 17ch;
  color: #151316;
  font: 700 clamp(38px, 5vw, 72px)/1.02 var(--display, Arial, sans-serif);
  letter-spacing: -.065em;
}
.system-references .refs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.system-references .ref-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d6ccc3;
  border-radius: 14px;
  background: #fdfaf6;
}
.system-references .ref-visual {
  position: relative;
  height: clamp(250px, 28vw, 370px);
  padding: clamp(12px, 1.8vw, 22px);
  overflow: hidden;
  background: #15191f;
}
.system-references .ref-dashboard-demo {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ffffff2a;
  border-radius: 8px;
  background: #f6f8fa;
  color: #273040;
  font: 11px/1.35 var(--rx-display, Arial, sans-serif);
}
.system-references .ref-card:nth-child(2) .ref-dashboard-demo {
  border-color: #414a57;
  background: #15191f;
  color: #ecf0f6;
}
.system-references .ref-demo-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid #d6dce7;
  background: #e5e8ee;
  font: 10px/1.4 var(--rx-mono, monospace);
}
.system-references .ref-card:nth-child(2) .ref-demo-toolbar {
  border-color: #353c46;
  background: #222933;
}
.system-references .ref-demo-toolbar b,
.system-references .ref-demo-toolbar i {
  white-space: nowrap;
  font-size: 10px;
  font-style: normal;
}
.system-references .ref-demo-toolbar b { color: #3477c1; }
.system-references .ref-card:nth-child(2) .ref-demo-toolbar b { color: #fa773c; }
.system-references .ref-demo-toolbar i { color: #4e8ac0; }
.system-references .ref-card:nth-child(2) .ref-demo-toolbar i { color: #65d291; }
.system-references .ref-demo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: clamp(8px, 1.3vw, 14px);
}
.system-references .ref-demo-kpis > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: clamp(7px, .9vw, 12px);
  border: 1px solid #dde4ec;
  border-radius: 5px;
  background: #fff;
}
.system-references .ref-card:nth-child(2) .ref-demo-kpis > div {
  border-color: #3b434b;
  background: #222a33;
}
.system-references .ref-demo-kpis small,
.system-references .ref-demo-charts small {
  font: 10px/1.35 var(--rx-mono, monospace);
  opacity: .82;
}
.system-references .ref-demo-kpis strong {
  overflow-wrap: anywhere;
  font-size: clamp(13px, 1.8vw, 22px);
  letter-spacing: -.04em;
}
.system-references .ref-demo-kpis em {
  color: #188b58;
  font: 10px/1.3 var(--rx-mono, monospace);
  font-style: normal;
}
.system-references .ref-card:nth-child(2) .ref-demo-kpis em { color: #82d898; }
.system-references .ref-demo-charts {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 1.45fr .85fr;
  gap: 8px;
  padding: 0 clamp(8px, 1.3vw, 14px) clamp(8px, 1.3vw, 14px);
}
.system-references .ref-demo-charts > div {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 9px;
  padding: clamp(8px, 1vw, 13px);
  border: 1px solid #e0e3e8;
  border-radius: 5px;
  background: #fff;
}
.system-references .ref-card:nth-child(2) .ref-demo-charts > div {
  border-color: #3b434b;
  background: #222a33;
}
.system-references .ref-demo-bars {
  display: flex;
  min-height: 85px;
  flex: 1;
  align-items: end;
  gap: 5px;
  padding: 8px 4px 0;
  border-bottom: 1px solid #cfd5dc;
}
.system-references .ref-demo-bars i {
  display: block;
  height: var(--bar-height);
  flex: 1;
  min-width: 5px;
  border-radius: 3px 3px 0 0;
  background: #6c9fe2;
}
.system-references .ref-demo-bars .bar-40 { --bar-height: 40%; }
.system-references .ref-demo-bars .bar-49 { --bar-height: 49%; }
.system-references .ref-demo-bars .bar-57 { --bar-height: 57%; }
.system-references .ref-demo-bars .bar-67 { --bar-height: 67%; }
.system-references .ref-demo-bars .bar-78 { --bar-height: 78%; }
.system-references .ref-demo-bars .bar-82 { --bar-height: 82%; }
.system-references .ref-demo-bars .bar-92 { --bar-height: 92%; }
.system-references .ref-demo-donut {
  width: min(95px, 72%);
  aspect-ratio: 1;
  align-self: center;
  border-radius: 50%;
  background: conic-gradient(#5099d6 0 42%, #e9a64f 42% 69%, #73bf80 69% 88%, #bfcae0 88%);
  position: relative;
}
.system-references .ref-demo-donut::after {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: #fff;
  content: "";
}
.system-references .ref-card:nth-child(2) .ref-demo-donut::after { background: #222a33; }
.system-references .ref-demo-lines { min-height: 80px; flex: 1; }
.system-references .ref-demo-lines svg { display: block; width: 100%; height: 100%; }
.system-references .ref-demo-alert {
  padding: 7px;
  border: 1px solid #3f664e;
  border-radius: 4px;
  color: #a5e5b6;
  font-size: 10px;
}
.system-references .ref-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  padding: 7px 9px;
  border-radius: 3px;
  background: #181219ed;
  color: #fff;
  font: 10px/1.4 var(--mono, monospace);
}
.system-references .ref-body { padding: clamp(20px, 2.4vw, 32px); }
.system-references .ref-body h3 {
  margin: 0 0 10px;
  color: #211b20;
  font: 600 clamp(22px, 2vw, 30px)/1.2 var(--display, Arial, sans-serif);
  letter-spacing: -.04em;
}
.system-references .ref-body p {
  margin: 0 0 20px;
  color: #615b60;
  font: 15px/1.65 var(--display, Arial, sans-serif);
}
.system-references .ref-body a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: #a21231;
  font: 12px/1.5 var(--mono, monospace);
}
.system-references .refs-note {
  margin-top: 18px;
  color: #696168;
  font: 12px/1.6 var(--mono, monospace);
}
:root[data-theme="dark"] .system-references {
  border-color: #423640;
  background: #1c1920;
  color: #fff;
}
:root[data-theme="dark"] .system-references h2,
:root[data-theme="dark"] .system-references .ref-body h3 { color: #fff; }
:root[data-theme="dark"] .system-references .refs-note { color: #c3b8bd; }
:root[data-theme="dark"] .system-references .ref-card {
  border-color: #514550;
  background: #29252c;
}
:root[data-theme="dark"] .system-references .ref-body p { color: #cec0c7; }
@media (max-width: 900px) {
  .system-references .refs-header { display: block; }
  .system-references .refs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .system-references { padding-block: 68px; }
  .system-references h2 { font-size: clamp(34px, 9vw, 50px); }
  .system-references .ref-visual { height: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-references .ref-card { transition: none; transform: none; }
}


/* Project statuses and additional card now shown in the portfolio. */
.project-card:nth-child(3) {
  --rx-case-bg: #dce5d8;
  --rx-case-ink: #202c22;
  --rx-stack-offset: 38px;
  --rx-stack-z: 3;
}
.project-card:nth-child(4) {
  --rx-case-bg: #3a1722;
  --rx-case-ink: #f9eee8;
  --rx-stack-offset: 57px;
  --rx-stack-z: 4;
}
.vio-visual {
  display: grid;
  place-items: center;
  background: #dce5d8;
  color: #202c22;
}
.vio-concept {
  display: grid;
  width: min(78%, 390px);
  gap: 10px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #52685555;
  background: #eef2e9;
  box-shadow: 12px 12px 0 #243c2830;
  transform: rotate(-3deg);
}
.vio-concept span, .vio-concept small {
  font: 11px/1.5 var(--mono);
  letter-spacing: .06em;
}
.vio-concept strong {
  font: 600 clamp(28px, 4vw, 54px)/1 var(--display);
  letter-spacing: -.06em;
}
.project-card:nth-child(3) .project-view { background: #3b5b40; }
.project-card:nth-child(4) .project-view { bottom: 30px; }
.project-open:focus-visible,
.contact-direct-link:focus-visible,
.hero-project-link:focus-visible,
.project-live-link:focus-visible {
  outline: 3px solid var(--rx-red);
  outline-offset: 5px;
}
.contact-direct-link, .footer-contact-link, .hero-project-link {
  min-height: 44px;
  align-items: center;
}
.contact-direct-link, .footer-contact-link { display: inline-flex; gap: 10px; }
.form-bottom > p, .footer-bottom, .privacy-button { font-size: 11px; }
.project-card .project-view { font-size: 10px; }
.project-info .project-index { font-size: 11px; }
.service-chips span { font-size: 11px; }
@media (max-width: 800px) {
  .project-card:nth-child(4) { --rx-stack-offset: 0px; }
  .project-card:nth-child(3) { --rx-stack-offset: 0px; }
  .vio-concept { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vio-concept { transform: none; }
}


/* Ajustes pedidos a partir das capturas em celular e tablet. */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.hero-project-link {
  display: inline-flex;
  gap: 8px;
}
@media (max-width: 800px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
  }
  .hero-actions .button-primary {
    width: fit-content;
    max-width: 100%;
    margin: 0;
  }
  .hero-project-link { min-height: 44px; }

  .site-footer::before { display: none; }
  .site-footer .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-areas:
      "wordmark top"
      "contact contact";
    align-items: center;
    gap: 22px 16px;
    padding-bottom: 32px;
    margin-bottom: 22px;
  }
  .site-footer .footer-wordmark {
    grid-area: wordmark;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }
  .site-footer .footer-mark {
    width: clamp(34px, 6vw, 48px);
    height: auto;
    flex: none;
  }
  .site-footer .footer-wordmark .footer-lettering {
    width: 0;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
    height: auto;
    aspect-ratio: 1030 / 155;
  }
  .site-footer .footer-top .footer-contact-link {
    grid-area: contact;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    font-size: 12px;
  }
  .site-footer .footer-top .back-top {
    grid-area: top;
    justify-self: end;
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .site-footer .footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 18px;
  }
  .site-footer .footer-bottom > span:first-child {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 10px;
  }
  .site-footer .footer-bottom > span:nth-child(2) {
    grid-column: 1;
    font-size: 10px;
  }
  .site-footer .footer-bottom .privacy-button {
    grid-column: 2;
    justify-self: end;
    font-size: 11px;
  }
}
@media (max-width: 420px) {
  .site-footer .footer-top { gap: 18px 12px; }
  .site-footer .footer-mark { width: 32px; }
  .site-footer .footer-bottom { gap: 12px; }
}

/* Ajustes finais pedidos: cartões coerentes com a paleta, biografias no perfil
   e contato do rodapé separado do lettering. */
.studio .team-grid > .team-card,
.studio .team-grid > .team-card:first-child {
  background: var(--rx-white) !important;
  color: var(--rx-ink) !important;
  border-color: var(--rx-line);
  box-shadow: 0 16px 45px #00000012;
}
.studio .team-grid > .team-card .team-info,
.studio .team-grid > .team-card:first-child .team-info,
.studio .team-grid > .team-card .team-footer,
.studio .team-grid > .team-card:first-child .team-footer {
  color: var(--rx-ink) !important;
}
.studio .team-grid > .team-card .profile-open {
  background: var(--rx-red) !important;
  color: #fff !important;
}

/* No rodapé largo, lettering e contatos usam colunas próprias; o CTA não
   fica desenhado por cima da palavra TRIBYTE. */
.site-footer .footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  grid-template-areas: "wordmark contact top";
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.site-footer .footer-wordmark {
  grid-area: wordmark;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: clamp(8px, 1.2vw, 18px);
}
.site-footer .footer-mark {
  width: clamp(48px, 6vw, 96px);
  height: auto;
  flex: 0 0 auto;
}
.site-footer .footer-wordmark .footer-lettering {
  width: 0;
  min-width: 0;
  max-width: none;
  flex: 1 1 0;
  height: auto;
  aspect-ratio: 1030 / 155;
}
.site-footer .footer-top .footer-contact-link {
  grid-area: contact;
  justify-self: end;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.site-footer .footer-top .back-top {
  grid-area: top;
  justify-self: end;
  flex: none;
}

@media (max-width: 800px) {
  .site-footer .footer-top {
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-areas: "wordmark top" "contact contact";
    gap: 22px 16px;
  }
  .site-footer .footer-mark { width: clamp(34px, 6vw, 48px); }
  .site-footer .footer-top .footer-contact-link {
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    font-size: 12px;
  }
  .site-footer .footer-top .back-top {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}
@media (max-width: 420px) {
  .site-footer .footer-top { gap: 18px 12px; }
  .site-footer .footer-mark { width: 32px; }
}