/* ═══════════════════════════════════════════
   FONTS — Atyp Display + Atyp Text
═══════════════════════════════════════════ */
@font-face {
  font-family: 'Atyp Display';
  src: url('../fonts/AtypDisplay-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atyp Display';
  src: url('../fonts/AtypDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atyp Display';
  src: url('../fonts/AtypDisplay-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atyp Display';
  src: url('../fonts/AtypDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atyp Display';
  src: url('../fonts/AtypDisplay-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atyp Text';
  src: url('../fonts/AtypText-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atyp Text';
  src: url('../fonts/AtypText-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atyp Text';
  src: url('../fonts/AtypText-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --black:       #0A0A0A;
  --surface:     #111111;
  --surface-2:   #1A1A1A;
  --white:       #FFFFFF;
  --gray:        #888888;
  --gray-dim:    #444444;
  --border:      rgba(255,255,255,0.10);
  --border-mid:  rgba(255,255,255,0.18);

  --font-display: 'Atyp Display', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body:    'Atyp Text', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);

  --header-h: 68px;
  --max-w:    1320px;
  --pad:      clamp(24px, 5vw, 80px);

  /* mouse parallax — updated by JS */
  --mx: 0px;
  --my: 0px;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  overflow-x: hidden;
}
a   { text-decoration: none; color: inherit; cursor: none; }
img { max-width: 100%; display: block; }
button { background: none; border: none; cursor: none; color: inherit; }

/* ═══════════════════════════════════════════
   INTRO SEQUENCE — pinned hero + sticky overlay
   The hero sits behind the intro and is pinned in place
   while the intro animates away. After the animation,
   both unstick and the page scrolls normally.
═══════════════════════════════════════════ */
.entry-section {
  position: relative;
  height: 200vh; /* gives 100vh of pin/scroll distance */
  z-index: 1;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}
.intro-overlay.is-done {
  visibility: hidden;
}

body.intro-animating {
  /* Site parado durante animação - sem permitir interação */
  pointer-events: none;
}
body.intro-animating .intro-overlay {
  pointer-events: auto;
}

body.intro-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

.intro-overlay__bg {
  position: absolute;
  inset: 0;
  background: var(--black);
  will-change: opacity;
}
.intro-overlay__text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--white);
  white-space: nowrap;
}
.intro-overlay__word {
  display: inline-block;
  will-change: opacity, transform;
}
.intro-overlay__slashes {
  display: inline-flex;
  margin: 0 0.18em;
}
.intro-overlay__slash {
  display: inline-block;
  will-change: transform, opacity;
}

/* hide header until intro finishes */
.header { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.header.is-revealed { opacity: 1; pointer-events: auto; }


/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-trail {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: left 0.12s var(--ease-out), top 0.12s var(--ease-out),
              width 0.35s var(--ease), height 0.35s var(--ease), opacity 0.3s;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor { width: 4px; height: 4px; }
body:has(a:hover) .cursor-trail,
body:has(button:hover) .cursor-trail { width: 56px; height: 56px; }

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
.header.scrolled {
  background: rgba(10,10,10,0.30);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}
.header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.logo em {
  font-style: normal;
  color: var(--gray);
  margin: 0 2px;
}

/* Nav */
.nav { display: flex; align-items: center; gap: 40px; }
.nav__link {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--white);
  transition: width 0.3s var(--ease);
}
.nav__link:hover, .nav__link.active { color: var(--white); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__link--cta {
  color: var(--white);
  border: 1px solid var(--border-mid);
  padding: 8px 20px;
  transition: border-color 0.2s, color 0.2s;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { border-color: var(--white); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  cursor: none;
}
.hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.25s;
  transform-origin: center;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 10px;
  transition: gap 0.3s var(--ease), border-color 0.2s;
}
.btn-arrow:hover { gap: 28px; border-color: var(--white); }
.btn-arrow .arrow-svg {
  width: 48px; height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.btn-arrow:hover .arrow-svg { transform: translateX(6px); }

.btn-arrow--dark {
  color: var(--black);
  border-bottom-color: rgba(0,0,0,0.2);
}
.btn-arrow--dark:hover { border-bottom-color: var(--black); }

.btn-arrow--submit {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════
   SECTION HELPERS
═══════════════════════════════════════════ */
.section-label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 16px;
}
.section-label--dark { color: var(--gray-dim); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.0;
  color: var(--white);
}

.section-header {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
  max-width: var(--max-w);
  margin: 0 auto 72px;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.js-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }
.js-reveal[data-delay="4"] { transition-delay: 0.4s; }

/* Clip-reveal for hero text */
.reveal-clip {
  display: block;
  overflow: hidden;
}
.reveal-clip > * ,
.reveal-clip {
  /* animated by JS via inline class added when in view */
}
.reveal-clip span.inner,
.reveal-clip.inner-wrap span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.hero-ready .reveal-clip span.inner,
.hero-ready .reveal-clip.inner-wrap span {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   HERO — sticky inside entry-section
═══════════════════════════════════════════ */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: var(--header-h) var(--pad) 80px;
}

/* Background parallax layer + slideshow */
.hero__bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
}
.hero__parallax {
  position: relative;
  width: 100%; height: 100%;
  transform: translate(var(--mx), var(--my)) scale(1.08);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 35%, rgba(10,10,10,0.75) 75%, var(--black) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.30) 0%, transparent 50%);
}

/* Hero content */
.hero__body {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.hero__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 32px;
  overflow: hidden;
}
.hero__eyebrow span { display: block; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 56px;
}
.hero__word {
  display: block;
  overflow: hidden;
}
.hero__word--em { color: rgba(255,255,255,0.85); }

.hero__actions { display: flex; align-items: center; gap: 48px; overflow: hidden; }

/* Hero meta */
.hero__meta {
  position: absolute;
  bottom: 40px;
  left: var(--pad);
  right: var(--pad);
  max-width: var(--max-w);
  margin: 0 auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.hero__scroll-label {
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ═══════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════ */
.marquee-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 0;
}
.marquee-wrap { overflow: hidden; }
.marquee__track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}
.marquee-section:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px 0;
}
.marquee__logo {
  height: 140px;
  width: auto;
  max-width: 360px;
  object-fit: contain;
  margin: 0 36px;
  /* makes every logo pure white */
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.25s var(--ease), transform 0.4s var(--ease);
  flex-shrink: 0;
}
.marquee__logo:hover {
  opacity: 1;
  transform: scale(1.08);
}
.marquee__sep {
  color: var(--gray-dim);
  font-size: 0.875rem;
  letter-spacing: 0;
  flex-shrink: 0;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 400;
}

/* ═══════════════════════════════════════════
   CASES
═══════════════════════════════════════════ */
.cases {
  padding: 120px 0 0;   /* sem margem inferior → encosta na margem da // 02 (Studio) */
}

.cases__list {
  list-style: none;
  border-top: 1px solid var(--border);
}

.case-row {
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s;
}
.case-row.is-visible { opacity: 1; transform: none; }

.case-row__inner {
  display: grid;
  grid-template-columns: 72px 1fr auto 72px;
  align-items: center;
  gap: 32px;
  padding: 28px var(--pad);
  max-width: var(--max-w);
  margin: 0 auto;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.case-row__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
  z-index: 0;
}
.case-row:hover .case-row__inner::before { transform: translateY(0); }

.case-row__num {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
  position: relative;
  z-index: 1;
}
.case-row__info {
  position: relative;
  z-index: 1;
}
.case-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 400;
  margin-bottom: 6px;
  transition: transform 0.3s var(--ease);
}
.case-row:hover .case-row__name { transform: translateX(8px); }
.case-row__tags {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--gray);
}

/* thumbnail hover reveal */
.case-row__preview {
  width: 120px;
  height: 80px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  position: relative;
  z-index: 1;
}
.case-row:hover .case-row__preview { opacity: 1; transform: scale(1); }
.case-row__thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* arrow — diagonal ↗ */
.case-row__arrow {
  width: 22px; height: 22px;
  color: var(--gray);
  position: relative;
  z-index: 1;
  transition: color 0.2s, transform 0.4s var(--ease);
  flex-shrink: 0;
}
.case-row__arrow svg { width: 100%; height: 100%; }
.case-row:hover .case-row__arrow { color: var(--white); }
.case-row.is-open .case-row__arrow { color: var(--white); transform: rotate(90deg); }
.case-row.is-open .case-row__name { color: var(--white); }

/* ── Inline expand (left text + right hover-gallery square) ── */
.case-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease);
}
.case-row.is-open .case-expand { grid-template-rows: 1fr; }
.case-expand__inner { overflow: hidden; min-height: 0; }

.case-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px var(--pad) 60px;
}
.case-detail__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.case-detail__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}
.case-detail__tags {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gray);
  text-transform: uppercase;
}
.case-detail__desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 44ch;
}
.case-detail__cta { margin-top: 10px; }
.case-detail__cta .cta-arrow {
  width: 15px; height: 15px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.case-detail__cta:hover .cta-arrow { transform: translate(3px, -3px); }

/* Right square — hover cycles the project's photos */
.case-detail__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.case-detail__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.case-detail__img.is-active { opacity: 1; }
.case-detail__dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.case-detail__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 0.25s, transform 0.25s;
}
.case-detail__dot.is-active { background: var(--white); transform: scale(1.4); }

@media (max-width: 860px) {
  .case-detail { grid-template-columns: 1fr; gap: 28px; padding-bottom: 44px; }
  .case-detail__media { max-width: 420px; }
}

/* ═══════════════════════════════════════════
   STUDIO / SOBRE
═══════════════════════════════════════════ */
.studio {
  padding: 120px 0;
  border-top: 1px solid var(--border);
}
.studio__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.studio__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.studio__headline .accent {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}
.studio__lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gray);
  margin-bottom: 56px;
}

/* Accordion */
.accordion {
  border-top: 1px solid var(--border);
}
.accordion__item {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 24px;
  transition: opacity 0.2s;
}
.accordion__btn:hover { opacity: 0.75; }
.accordion__label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.accordion__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gray);
  transition: transform 0.35s var(--ease);
}
.accordion__icon svg { width: 100%; height: 100%; }
.accordion__item.open .accordion__icon { transform: rotate(45deg); }

.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s var(--ease);
}
.accordion__item.open .accordion__body { grid-template-rows: 1fr; }
.accordion__body > p {
  min-height: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray);
  padding-bottom: 0;
  padding-right: 48px;
  transition: padding-bottom 0.45s var(--ease);
}
.accordion__item.open .accordion__body > p {
  padding-bottom: 20px;
}

/* ═══════════════════════════════════════════
   FEEDBACK
═══════════════════════════════════════════ */
.feedback {
  padding: 120px 0;
  border-top: 1px solid var(--border);
}

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  align-items: start;
  border-left: 1px solid var(--border);
  margin-bottom: 96px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.testimonial {
  border-right: 1px solid var(--border);
  padding: 40px 32px 40px 0;
  display: flex;
  flex-direction: column;
}
.testimonial + .testimonial { padding-left: 32px; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin-bottom: 32px;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
}
.testimonial__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.testimonial__photo--empty {
  background: var(--surface-2);
}
.testimonial__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}
.testimonial__name { color: var(--white); text-transform: uppercase; }
.testimonial__sep  { color: var(--gray-dim); }
.testimonial__co   { color: var(--gray); text-transform: uppercase; }

/* ── Video testimonial — TikTok/Reels style ── */
.testimonial--video {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ── YouTube Shorts embed — replaces local reel ── */
.yt-reel {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.yt-reel__iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  border-radius: 18px;
  border: none;
  display: block;
}
.yt-reel__author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.yt-reel__author img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.reel {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.reel:focus-visible { outline: 1px solid rgba(255,255,255,0.6); outline-offset: 2px; }
.reel__track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--i, 0) * -100%));
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1);
}
.reel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.reel__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 36%);
}

/* Author overlay */
.reel__author {
  position: absolute;
  left: 16px;
  right: 56px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.reel__author img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.reel__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.reel__name { color: var(--white); text-transform: uppercase; }
.reel__sep  { color: rgba(255,255,255,0.45); }
.reel__co   { color: rgba(255,255,255,0.72); text-transform: uppercase; }

/* Mute toggle */
.reel__mute {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  border-radius: 50%;
  cursor: none;
  z-index: 3;
  transition: border-color 0.2s, transform 0.2s;
}
.reel__mute:hover { border-color: rgba(255,255,255,0.7); transform: scale(1.07); }
.reel__mute svg { width: 17px; height: 17px; }
.reel__icon--sound { display: none; }
.reel__icon--muted { display: block; }
.reel:not(.is-muted) .reel__icon--sound { display: block; }
.reel:not(.is-muted) .reel__icon--muted { display: none; }

/* Position dots (right rail) */
.reel__dots {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 3;
}
.reel__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.25s, transform 0.25s;
  cursor: none;
}
.reel__dot.is-active {
  background: var(--white);
  transform: scale(1.6);
}

/* Swipe hint */
.reel__hint {
  position: absolute;
  bottom: 70px; right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255,255,255,0.7);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
  animation: reelHint 1.9s var(--ease) infinite;
  transition: opacity 0.4s var(--ease);
}
.reel__hint svg { width: 16px; height: 16px; }
.reel__hint.is-hidden { opacity: 0; }
@keyframes reelHint {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Form */
.feedback-form-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.feedback-form__label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 40px;
}
.feedback-form { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.feedback-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Float-label field */
.field { position: relative; }
.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-mid);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 24px 0 10px;
  outline: none;
  transition: border-color 0.25s;
  resize: none;
}
.field__input:focus { border-bottom-color: var(--white); }
.field__label {
  position: absolute;
  top: 24px; left: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  pointer-events: none;
  transition: top 0.25s var(--ease), font-size 0.25s, color 0.25s;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
  top: 4px;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.field__textarea { min-height: 120px; line-height: 1.7; }

.feedback-form__success {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════
   FOOTER / CTA
═══════════════════════════════════════════ */
.footer {
  background: var(--white);
  color: var(--black);
}
.footer__cta {
  padding: 112px var(--pad) 80px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.footer__headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 400;
  line-height: 0.95;
  margin: 24px 0 56px;
  letter-spacing: -0.02em;
}
.footer__headline .accent { color: rgba(0,0,0,0.45); font-weight: 400; }

.footer__bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__brand {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
}
.footer__links { display: flex; gap: 32px; }
.footer__links a {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  transition: color 0.2s;
  cursor: none;
}
.footer__links a:hover { color: var(--black); }
.footer__copy { font-size: 0.6875rem; color: rgba(0,0,0,0.3); }

/* ═══════════════════════════════════════════
   SHOWCASE — standalone full-bleed carousel
   Free-drag + inertia + loop, gentle curved
   (fisheye) strip, hover pauses & cycles images.
═══════════════════════════════════════════ */
.showcase {
  padding: 0 0 80px;
  margin-top: -48px;             /* sit closer to the section above */
  overflow: hidden;
  background: var(--bg, #0a0a0a);
}
/* Centered CTA below the carousel */
.showcase__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  max-width: var(--max-w);
  margin: 56px auto 0;
  padding: 0 var(--pad);
}
.showcase__cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}
.showcase__cta-title .accent { color: var(--gray); }
.showcase__cta .cta-arrow {
  width: 15px; height: 15px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.showcase__cta .btn-arrow:hover .cta-arrow { transform: translate(3px, -3px); }
.showcase__viewport {
  position: relative;
  width: 100vw;
  height: clamp(360px, 38vw, 520px); /* band height; Three.js canvas fills this */
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  cursor: none;
  touch-action: pan-y;
}
/* Three.js canvas overlays the entire viewport */
.showcase__canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  display: block;
}
/* HTML track is unused — Three.js renders everything */
.showcase__track { display: none; }
.showcase__slide { display: none;
}
.showcase__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* "Arraste" cursor tooltip following the mouse */
.showcase__cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  pointer-events: none;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10,10,10,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate(-50%, -160%) scale(0.6);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.showcase__cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -160%) scale(1);
}

/* ═══════════════════════════════════════════
   LANGUAGE SWITCHER (case page)
═══════════════════════════════════════════ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-btn {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
  cursor: none;
}
.lang-btn.is-active,
.lang-btn:hover { color: var(--white); }
.lang-sep { color: var(--gray-dim); font-size: 0.6rem; }

/* ═══════════════════════════════════════════
   CASE DETAIL PAGE
═══════════════════════════════════════════ */
.case-hero {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 80px) var(--pad) 80px;
  border-bottom: 1px solid var(--border);
}
.case-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.case-hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}
.case-hero__year {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
}
.case-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.case-hero__tags-line {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Body sections */
.case-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--pad);
}
.case-section--text  { border-bottom: 1px solid var(--border); }
.case-section--split {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
  border-bottom: 1px solid var(--border);
}
.case-split__label { padding-top: 2px; }
.case-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 20px;
}
.case-section--split p {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--gray);
}
.case-lead {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: 760px;
  color: rgba(255,255,255,0.85);
}

/* Full-bleed images */
.case-section--full {
  max-width: 100%;
  padding: 0;
}
.case-section--full img {
  width: 100%;
  height: 72vh;
  object-fit: cover;
  display: block;
}

/* 2-up grid */
.case-section--grid {
  max-width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.case-section--grid img {
  width: 100%;
  height: 52vh;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__headline { position: static; }
  .testimonials { grid-template-columns: 1fr; border-left: none; }
  .testimonial { border-right: none; border-top: 1px solid var(--border); padding: 32px 0; }
  .testimonial + .testimonial { padding-left: 0; }
  .case-row__inner { grid-template-columns: 48px 1fr 48px; }
  .case-row__preview { display: none; }
}

@media (max-width: 768px) {
  /* Mobile nav */
  .nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(10,10,10,0.98);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0 32px;
    gap: 0;
    border-bottom: 1px solid var(--border);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.3s;
    pointer-events: none;
  }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav__link { padding: 14px var(--pad); font-size: 0.875rem; width: 100%; }
  .nav__link--cta { margin: 8px var(--pad) 0; width: auto; }
  .hamburger { display: flex; }

  .hero__title { font-size: clamp(3.5rem, 14vw, 7rem); }

  .case-row__inner { grid-template-columns: 40px 1fr 32px; gap: 16px; }

  .feedback-form__row { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; gap: 16px; text-align: center; }

  .cursor, .cursor-trail { display: none; }
  body { cursor: auto; }

  /* Reel a bit smaller / phone-like */
  .reel { max-width: 300px; }

  /* Modal carousel — shorter on small screens */
  .case-modal__viewport { height: clamp(180px, 50vw, 280px); perspective: 1000px; }
  a, button { cursor: pointer; }
}

/* ═══════════════════════════════════════════
   MANIFESTO
═══════════════════════════════════════════ */
.manifesto {
  padding: 120px 0;
  border-bottom: 1px solid var(--border);
}
.manifesto__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.manifesto__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 28px 0 52px;
}
.manifesto__text {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.manifesto__text p {
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
}
.manifesto__text p:first-child {
  color: var(--white);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

/* ═══════════════════════════════════════════
   PROCESSO — Como trabalhamos
═══════════════════════════════════════════ */
.process {
  padding: 120px 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  border-bottom: 1px solid var(--border);
}
.process__head { margin-bottom: 64px; }
.process__sub {
  margin-top: 20px;
  max-width: 48ch;
  color: var(--gray);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}
.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.process__step {
  border-top: 1px solid var(--border-mid, rgba(255,255,255,0.18));
  padding-top: 22px;
}
.process__num {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-dim, rgba(255,255,255,0.4));
}
.process__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 400;
  margin: 14px 0 14px;
  color: var(--white);
}
.process__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--gray);
}

/* ═══════════════════════════════════════════
   FOOTER — grid de contato
═══════════════════════════════════════════ */
.footer__cta .footer__headline { margin-bottom: 24px; }
.footer__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: rgba(0,0,0,0.55);
  max-width: 46ch;
  margin-bottom: 44px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--pad) 8px;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col-label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 4px;
}
.footer__col a {
  color: rgba(0,0,0,0.7);
  font-size: 0.95rem;
  transition: color 0.2s;
  cursor: none;
}
.footer__col a:hover { color: var(--black); }
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--black);
}
.footer__tagline { color: rgba(0,0,0,0.5); font-size: 0.875rem; line-height: 1.5; }

/* ═══════════════════════════════════════════
   CASE PAGE — hero, metadados, próximo case
═══════════════════════════════════════════ */
.case-hero2 {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 460px;
  overflow: hidden;
}
.case-hero2__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.case-hero2__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.15) 45%, rgba(8,8,8,0.25) 100%);
}
.case-hero2__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad) 56px;
}
.case-hero2__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.case-hero2__subtitle {
  margin-top: 18px;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: rgba(255,255,255,0.82);
  max-width: 30ch;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px var(--pad);
  border-bottom: 1px solid var(--border);
}
.case-meta__item { display: flex; flex-direction: column; gap: 8px; }
.case-meta__label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dim, rgba(255,255,255,0.4));
}
.case-meta__value {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
}
.case-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 110px var(--pad);
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.case-next__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.case-next__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 400;
  color: var(--white);
  transition: opacity 0.2s var(--ease);
}
.case-next:hover .case-next__name { opacity: 0.55; }
.case-next__arrow { width: 48px; height: 16px; color: var(--white); margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .process__list { grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .process__step { padding: 28px 0; }
  .process__step:nth-child(-n+2) { border-top: 1px solid var(--border-mid, rgba(255,255,255,0.18)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .manifesto, .process { padding: 80px 0; }
  .process__list { grid-template-columns: 1fr; gap: 0; }
  .process__step { padding: 26px 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__col:first-child { grid-column: auto; }
  .case-hero2 { height: 70vh; min-height: 420px; }
  .case-meta { gap: 20px 40px; }
}

/* ═══════════════════════════════════════════
   BRAND LOGOS (header dark / footer light)
═══════════════════════════════════════════ */
.logo--img { display: inline-flex; align-items: center; }
.logo--img img {
  height: 22px;
  width: auto;
  display: block;
  /* black artwork → white on the dark header */
  filter: brightness(0) invert(1);
}
.footer__logo {
  height: 26px;
  width: auto;
  display: block;
  /* black artwork stays black on the light footer */
}

/* ═══════════════════════════════════════════
   PROCESS ICONS
═══════════════════════════════════════════ */
.process__icon {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 18px;
  /* black artwork → off-white on the dark section */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ═══════════════════════════════════════════
   TESTIMONIAL — placeholder
═══════════════════════════════════════════ */
.testimonial__quote--muted { color: var(--gray); }

@media (max-width: 1024px) {
  .process__icon { width: 30px; height: 30px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════
   AJUSTES — 2026-06-03
═══════════════════════════════════════════ */

/* 1. Header logo maior */
.logo--img img { height: 44px; }

/* 2. Hero sub-headline */
.hero__sub {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: rgba(255,255,255,0.72);
  margin-top: 12px;
  margin-bottom: 52px;
  line-height: 1.4;
}

/* 3. Hero title — menor top margin pois sub veio antes das actions */
.hero__title { margin-bottom: 16px; }

/* 4. Section-title accent pattern (white + gray) replicado nos outros */
.section-title .accent { color: var(--gray); font-weight: 400; }

/* 5. Studio // 02 — manifesto texto */
.studio__manifesto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}
.studio__manifesto p {
  font-size: clamp(0.95rem, 1.45vw, 1.1rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
}
.studio__manifesto p:first-child { color: var(--white); }

/* 6. Process — fundo branco, ícones acima da linha e maiores */
.process {
  background: var(--white);
  border-bottom: none;
  /* reset from dark-section color vars */
}
/* Process on white: invert text colors */
.process .section-label,
.process .section-title,
.process .process__head { color: var(--black); }
.process .section-title { color: var(--black); }
.process .section-title .accent { color: rgba(0,0,0,0.4); }
.process .process__num { color: rgba(0,0,0,0.35); }
.process .process__title { color: var(--black); }
.process .process__text { color: rgba(0,0,0,0.6); }
.process__step {
  /* icon sits above the border-top line */
  border-top: none;
  padding-top: 0;
}
.process__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;          /* icon above the hr line */
  /* black artwork stays black on white */
  filter: none;
  opacity: 1;
}
.process__step-inner {
  border-top: 1px solid rgba(0,0,0,0.14);
  padding-top: 22px;
  margin-top: 14px;
}
/* Process mobile padding matching other sections */
@media (max-width: 768px) {
  .process { padding: 80px 0; }
}

/* 7. Footer — fundo cinza */
.footer.footer--gray {
  background: #f4f4f4;
  color: var(--black);
}
.footer.footer--gray .footer__cta { border-bottom-color: rgba(0,0,0,0.08); }
.footer.footer--gray .footer__bar { border-top: 1px solid rgba(0,0,0,0.08); }
/* Labels e links no cinza */
.footer.footer--gray .footer__col-label { color: rgba(0,0,0,0.35); }
.footer.footer--gray .footer__col a { color: rgba(0,0,0,0.65); }
.footer.footer--gray .footer__col a:hover { color: var(--black); }
.footer.footer--gray .footer__copy { color: rgba(0,0,0,0.35); }
.footer.footer--gray .footer__tagline { color: rgba(0,0,0,0.5); }

/* 8. Footer logo alinha esquerda */
.footer__logo { align-self: flex-start; }

/* 9. Mobile hero — reduz altura pela metade */
@media (max-width: 768px) {
  .hero { min-height: 50vh !important; height: 50vh !important; }
  .entry-section { height: calc(100vh + 50vh); }
}

/* 10. Mobile reel — reduz margem até // 05 */
@media (max-width: 768px) {
  .testimonial--video { padding-bottom: 24px; }
  .feedback { padding-bottom: 48px; }
}

/* ── Mobile entry-section: reduced scroll distance for smaller hero */
@media (max-width: 768px) {
  .entry-section { height: 100vh !important; }
}

/* ── Mobile: reduce space between reel and //05 contact */
@media (max-width: 768px) {
  .testimonials { margin-bottom: 32px; }
  .feedback { padding-bottom: 16px !important; }
}

/* ═══════════════════════════════════════════
   FIXES — hero 4:3 + processo padding + showcase branco
═══════════════════════════════════════════ */

/* Showcase — fundo branco, continuação do processo */
.showcase {
  background: var(--white) !important;
  margin-top: 0;
}
/* CTA da showcase no contexto branco */
.showcase__cta-title { color: var(--black); }
.showcase__cta-title .accent { color: rgba(0,0,0,0.4); }
.showcase .btn-arrow {
  color: var(--black);
  border-bottom-color: rgba(0,0,0,0.25);
}
.showcase .btn-arrow:hover { border-bottom-color: var(--black); }
.showcase .cta-arrow { stroke: currentColor; }

/* Process — garantir padding horizontal em todos os tamanhos */
.process {
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  max-width: 100% !important;  /* full width with padding */
  margin-left: 0;
  margin-right: 0;
}
/* Process inner list max-width */
.process__head,
.process__list { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

@media (max-width: 768px) {
  /* Hero: 4:3 aspect ratio on mobile (~75% of viewport width = viewport width * 3/4) */
  .hero {
    height: 75vw !important;
    min-height: 75vw !important;
    max-height: 520px !important;
  }
  .entry-section {
    height: calc(75vw + 50vw) !important;  /* hero + scroll distance for intro */
  }

  /* Hero text smaller on mobile */
  .hero__title {
    font-size: clamp(2rem, 10.5vw, 3.5rem) !important;
    line-height: 1.0 !important;
  }
  .hero__sub {
    font-size: 0.9rem !important;
    margin-top: -10px !important;
    margin-bottom: 36px !important;
  }
  .hero__eyebrow span { font-size: 0.55rem !important; }

  /* Process: add proper horizontal padding on mobile */
  .process {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* ── Hero mobile: restore 100vh (fills viewport, no black gap, animation works) */
@media (max-width: 768px) {
  .hero { height: 100vh !important; min-height: 100vh !important; max-height: none !important; }
  .entry-section { height: 200vh !important; }
}

/* ═══════════════════════════════════════════
   MOBILE TUNING — home hero + case pages
═══════════════════════════════════════════ */
.case-zoom-img { cursor: zoom-in; }

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.case-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.case-lightbox__img {
  max-width: min(100%, 1280px);
  max-height: 86vh;
  object-fit: contain;
  display: block;
}
.case-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--white);
  background: rgba(0,0,0,0.35);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.case-lightbox-open { overflow: hidden; }
.case-back__short { display: none; }

@media (max-width: 768px) {
  .hero {
    height: clamp(460px, calc(100svh - 102px), 680px) !important;
    min-height: 0 !important;
    max-height: 680px !important;
    padding-top: calc(var(--header-h) + 28px) !important;
    padding-bottom: 42px !important;
  }
  .entry-section {
    height: clamp(460px, calc(100svh - 102px), 680px) !important;
  }
  .hero__bg { inset: 0; }
  .hero__parallax {
    transform: none !important;
  }
  .hero__slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.22) 42%, rgba(10,10,10,0.78) 100%);
  }
  .hero__body { align-self: flex-end; }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__title {
    max-width: 9ch;
    margin-bottom: 18px !important;
  }
  .hero__meta {
    bottom: 14px;
    font-size: 0.6rem;
  }
  .marquee__row {
    padding: 4px 0;
  }
  .marquee__logo {
    height: 92px;
    margin: 0 20px;
  }

  .case-page {
    --header-h: 58px;
  }
  .case-page .header__inner {
    padding-inline: 16px;
    gap: 12px;
  }
  .case-page .logo--img img {
    height: 24px;
  }
  .case-page .nav__link--cta {
    padding: 6px 10px;
    font-size: 0.55rem;
    line-height: 1;
    white-space: nowrap;
  }
  .case-back__full { display: none; }
  .case-back__short { display: inline; }

  .case-hero2 {
    height: auto;
    min-height: 0;
    padding-top: var(--header-h);
    overflow: visible;
  }
  .case-hero2__img {
    height: auto;
    max-height: 62svh;
    object-fit: contain;
    background: var(--black);
  }
  .case-hero2__overlay {
    display: none;
  }
  .case-hero2__content {
    position: static;
    padding: 22px var(--pad) 20px;
  }
  .case-hero2__title {
    max-width: 10ch;
    font-size: clamp(2rem, 11vw, 3.1rem);
    line-height: 0.98;
  }
  .case-hero2__subtitle {
    max-width: 26ch;
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.35;
  }
  .case-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 var(--pad) 34px;
    border-bottom: 1px solid var(--border);
  }
  .case-meta__item {
    gap: 4px;
  }
  .case-meta__value {
    max-width: 30ch;
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .case-section {
    padding: 48px var(--pad);
  }
  .case-section--split {
    display: block;
  }
  .case-split__label {
    margin-bottom: 14px;
  }
  .case-section--split p {
    max-width: 32ch;
    font-size: 0.95rem;
    line-height: 1.65;
  }
  .case-section--full,
  .case-section--grid {
    padding: 0;
  }
  .case-section--grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .case-section--full img,
  .case-section--grid img {
    height: auto;
    max-height: 72svh;
    object-fit: contain;
    background: var(--black);
  }
  .case-next {
    padding: 64px var(--pad);
  }
  .case-lightbox {
    padding: 16px;
  }
  .case-lightbox__img {
    max-height: 82svh;
  }
}