@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,700;1,7..72,300;1,7..72,400;1,7..72,700&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ===== DESIGN TOKENS ===== */
:root {
  --dark:          oklch(0.12 0.008 50);
  --dark-surface:  oklch(0.15 0.01 50);
  --dark-card:     oklch(0.17 0.012 240);
  --warm:          oklch(0.95 0.012 80);
  --warm-alt:      oklch(0.92 0.015 75);
  --cream:         oklch(0.98 0.006 80);
  --text-on-dark:  oklch(0.93 0.005 80);
  --text-on-warm:  oklch(0.18 0.008 50);
  --text-muted: oklch(0.782 0.013 91.548);
  --text-muted-warm: oklch(0.42 0.01 50);
  --orange:        oklch(0.62 0.18 55);
  --orange-hover:  oklch(0.55 0.2 48);
  --orange-glow:   oklch(0.62 0.18 55 / 0.2);
  --orange-subtle: oklch(0.62 0.18 55 / 0.08);
  --green-check:   oklch(0.55 0.16 150);
  --red-error:     oklch(0.55 0.2 25);
  --border-dark:   oklch(0.25 0.005 50);
  --border-warm:   oklch(0.85 0.01 80);

  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw,  1rem);
  --text-base: clamp(1rem,     0.93rem + 0.35vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.5rem,   1.15rem + 1.75vw, 2.5rem);
  --text-2xl:  clamp(2rem,     1.4rem  + 3vw,    3.75rem);
  --text-3xl:  clamp(2.5rem,   1.6rem  + 4.5vw,  5.5rem);
  --text-hero: clamp(2.5rem,   1.5rem  + 4.5vw,  5rem);

  --space-xs:  clamp(0.5rem,   1vw,  0.75rem);
  --space-sm:  clamp(0.75rem,  2vw,  1.25rem);
  --space-md:  clamp(1.5rem,   3vw,  2.5rem);
  --space-lg:  clamp(3rem,     6vw,  5rem);
  --space-xl:  clamp(5rem,     10vw, 9rem);
  --space-2xl: clamp(7rem,     14vw, 13rem);

  --max-w:        1280px;
  --max-w-narrow: 860px;
  --header-h:     72px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 100px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --z-base: 1; --z-sticky: 10; --z-overlay: 50; --z-modal: 100;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.6; color: var(--text-on-dark);
  background: var(--dark); overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
select { appearance: none; }

/* ===== UTILITIES ===== */
.container    { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-md); }
.container-sm { max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--space-md); }
.split-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.split-grid--center { align-items: center; }

/* ===== SKIP LINK ===== */
.skip-link {
  position: fixed; top: 0; left: var(--space-md); z-index: var(--z-modal);
  transform: translateY(-120%);
  background: var(--orange); color: var(--dark);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--dark); outline-offset: -4px; }

/* ===== HEADER ===== */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-modal);
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--space-md);
  transition: background 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}
.header .hamburger { justify-self: end; }
.header::after {
  content: ''; position: absolute; bottom: 0; left: var(--space-md); right: var(--space-md);
  height: 1px; background: var(--border-dark); opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.header.scrolled {
  background: oklch(0.12 0.008 50 / 0.8);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.header.scrolled::after { opacity: 1; }

.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo__img {
  height: 32px; width: auto; display: block;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-smooth);
}
.logo:hover .logo__img { transform: scale(1.04); opacity: 0.85; }

.nav { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.nav a {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); position: relative; padding-block: 4px;
  transition: color 0.3s var(--ease-smooth);
}
.nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--orange);
  transition: width 0.4s var(--ease-out);
}
.nav a:hover, .nav a.active { color: var(--text-on-dark); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }

/* Language switcher */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  background: oklch(0.18 0.005 50); border-radius: var(--r-pill);
  padding: 3px; border: 1px solid var(--border-dark);
  width: fit-content; flex-shrink: 0;
}
/* Only meaningful in .header's grid — reused inside .mobile-nav (a flex
   column), where justify-self still applies and was shoving it into the
   corner instead of letting it centre with the rest of the menu. */
.header .lang-switch { justify-self: end; }
.lang-switch__btn {
  font-family: var(--font-body); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: var(--r-pill);
  color: var(--text-muted); cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  border: none; background: none;
}
.lang-switch__btn:hover { color: var(--text-on-dark); }
.lang-switch__btn.active {
  background: var(--orange); color: var(--dark); font-weight: 700;
}
.lang-switch__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 28px; padding: 4px 0; cursor: pointer;
}
.hamburger:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r-sm); }
.hamburger span {
  display: block; height: 2px; background: var(--text-on-dark);
  border-radius: 2px; transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: oklch(0.08 0.01 50 / 0.97); backdrop-filter: blur(40px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-out);
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav a {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: 0.02em; transition: color 0.3s var(--ease-smooth);
}
.mobile-nav a:hover { color: var(--orange); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.9rem 2.2rem; border-radius: var(--r-pill);
  transition: all 0.35s var(--ease-out); cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn:active { transform: scale(0.96); }
.btn--orange { background: var(--orange); color: var(--dark); }
.btn--orange:hover { background: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 10px 40px var(--orange-glow); }
.btn--outline { border: 1.5px solid var(--text-on-dark); color: var(--text-on-dark); }
.btn--outline:hover { background: var(--text-on-dark); color: var(--dark); transform: translateY(-2px); }
.btn--outline-dark { border: 1.5px solid var(--text-on-warm); color: var(--text-on-warm); }
.btn--outline-dark:hover { background: var(--text-on-warm); color: var(--warm); transform: translateY(-2px); }

/* ===== SECTIONS ===== */
.section { padding-block: var(--space-xl); }
.section--dark { background: var(--dark); color: var(--text-on-dark); }
.section--surface { background: var(--dark-surface); color: var(--text-on-dark); }
.section--warm { background: var(--warm); color: var(--text-on-warm); }
.section--orange { background: var(--orange); color: var(--dark); }
/* Fills the viewport and centers its content vertically instead of relying
   on padding-block to space it out — lets a section occupy exactly one
   screen without needing to scroll inside it to see the rest. */
.section--fullscreen {
  min-height: 100vh; min-height: 100dvh;
  padding-block: var(--space-lg);
  display: flex; align-items: center;
}

.section-label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--orange); margin-bottom: var(--space-sm);
  display: flex; align-items: center; gap: 0.75rem;
}
.section-label::before { content: ''; width: 24px; height: 1.5px; background: var(--orange); flex-shrink: 0; }
.section-title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; line-height: 1.12; margin-bottom: var(--space-sm);
  text-wrap: balance;
}
/* For a title that's a full sentence rather than a short punchy phrase —
   at the default size a long sentence wraps to 5-6 lines and dominates
   the section. */
.section-title--md { font-size: var(--text-xl); }
.section-desc { font-size: var(--text-lg); max-width: 60ch; line-height: 1.65; }
.section-desc--lead { margin-bottom: var(--space-lg); }
.section--dark .section-desc { color: var(--text-muted); }
.section--warm .section-desc { color: var(--text-muted-warm); }

/* ===== HERO ===== */
.hero {
  /* min-height, not height: a fixed height clips the content instead of
     letting the section grow when the headline wraps on a short window. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: var(--header-h) var(--space-md) var(--space-md);
  position: relative; overflow: hidden;
}
/* Background circles — inspired by kokonutui */
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  mask-image: radial-gradient(ellipse at center, transparent 30%, black);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, black);
  animation: grid-drift 40s linear infinite;
  background-size: 200% 200%;
}
.hero__grid::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(100deg,
    oklch(0.55 0.01 240) 0%, oklch(0.55 0.01 240) 1px,
    transparent 1px, transparent 4%);
  opacity: 0.15;
}
@keyframes grid-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.hero__circles {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
}
.hero__circle {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(to bottom right, oklch(0.62 0.18 55 / 0.3), transparent) border-box;
}
.hero__circle--1 {
  width: 480px; height: 480px;
  border-color: oklch(0.62 0.18 55 / 0.6);
  animation: circle-spin 5s ease-in-out infinite;
  box-shadow: inset 0 0 80px oklch(0.62 0.18 55 / 0.1);
}
.hero__circle--2 {
  width: 480px; height: 480px;
  border-color: oklch(0.7 0.14 70 / 0.5);
  animation: circle-spin 5s ease-in-out infinite;
  animation-delay: -0.3s;
}
.hero__circle--3 {
  width: 480px; height: 480px;
  border-color: oklch(0.3 0.005 50 / 0.3);
  animation: circle-spin 5s ease-in-out infinite;
  animation-delay: -0.6s;
}
@keyframes circle-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.8; }
  50%  { transform: rotate(180deg) scale(1.15); opacity: 1;   }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.8; }
}
.hero__circle--2 {
  animation-name: circle-spin-2;
}
@keyframes circle-spin-2 {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.8; }
  50%  { transform: rotate(180deg) scale(1.10); opacity: 1;   }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.8; }
}
.hero__circle--3 {
  animation-name: circle-spin-3;
}
@keyframes circle-spin-3 {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.8; }
  50%  { transform: rotate(180deg) scale(1.20); opacity: 1;   }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.8; }
}

/* Radial glow behind circles */
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  mask-image: radial-gradient(90% 60% at 50% 50%, black 40%, transparent);
  -webkit-mask-image: radial-gradient(90% 60% at 50% 50%, black 40%, transparent);
}
.hero__glow::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, oklch(0.5 0.15 55 / 0.3) 0%, transparent 70%);
  filter: blur(120px);
}
.hero__glow::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, oklch(0.62 0.18 55 / 0.15) 0%, transparent 60%);
  filter: blur(80px);
}
.hero__noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content { max-width: 880px; margin-inline: auto; position: relative; z-index: var(--z-base); text-align: center; }
.hero__headline {
  font-family: var(--font-display); font-size: var(--text-hero);
  font-weight: 400; line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}
.hero__headline em { font-style: italic; color: var(--orange); font-weight: 300; }
.hero__sub { font-size: var(--text-base); color: var(--text-muted); max-width: 52ch; line-height: 1.65; margin-bottom: var(--space-sm); margin-inline: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

/* Hero scroll indicator */
.hero__scroll {
  position: absolute; bottom: var(--space-md); left: 50%;
  transform: translateX(-50%); z-index: var(--z-base);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero__scroll-text {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-muted);
}
.hero__scroll-line {
  width: 1px; height: 40px; background: var(--border-dark);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--orange);
  animation: scroll-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scroll-pulse {
  0%   { top: -100%; }
  50%  { top: 100%; }
  100% { top: 100%; }
}

/* ===== HERO — SECONDARY PAGE VARIANT ===== */
/* Lighter hero for inner pages (Quem Somos, Serviços): shorter, single
   radial glow instead of the home's full circle rig, content-proportional
   spacing instead of the home's scroll-indicator-anchored padding. */
.hero--page {
  height: auto;
  min-height: 72vh;
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-lg);
}
.hero--page .hero__content { max-width: 1000px; }
.hero__headline--sm { font-size: var(--text-3xl); }

/* ===== HERO WITH PHOTO ===== */
/* The two figures are dead centre horizontally, and a wide box crops the 3:2
   photo vertically only — so they can't be nudged sideways. The type is
   anchored to the base instead: separating them vertically is the one axis
   we actually control, and it holds at every screen width. */
.hero--photo {
  /* Full viewport: nothing from the next section should peek below the fold. */
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: flex-end;
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-lg);
}
.hero__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* ── ENQUADRAMENTO DA FOTO ──
     O 2º valor controla a altura visível: 0% mostra o topo da imagem
     (empurra as pessoas para baixo), 100% mostra a base (puxa para cima).
     O 1º valor faz o mesmo na horizontal. */
  object-fit: cover;
  object-position: 50% 62%;
}
/* Weighted to follow the type: a light wash at the very top just for the
   fixed header, clearing through the middle so the faces and the neon read,
   then ramping up through the lower third where the headline sits.
   The photo is a night scene, so anything past ~0.85 turns it black. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(0.12 0.008 50 / 0.42) 0%,
    oklch(0.12 0.008 50 / 0.18) 20%,
    oklch(0.12 0.008 50 / 0.15) 42%,
    oklch(0.12 0.008 50 / 0.40) 68%,
    oklch(0.12 0.008 50 / 0.62) 88%,
    oklch(0.12 0.008 50 / 0.72) 100%);
}
/* Centred variant: for frames where the subject sits low and small in the
   composition, the type can hold the middle without covering anyone —
   in theory. In practice "centred" (50vh) put the CTA's bottom edge only
   ~20px above the couple's heads at common laptop ratios, and getting
   worse was one shorter/wider window away. Padding-based reserves don't
   fix that safely: they add to the flex layout's total height, so a big
   enough reserve just reintroduces the scroll this variant exists to
   avoid. Anchoring the block by its own centre at a fixed 41vh — via
   absolute position, outside document flow entirely — decouples "stays
   in one screen" from "stays off the subjects": the block can never grow
   into overflow (it's sized by content, not flow). 41 rather than 50
   buys real headroom above the couple without crowding the header the
   way a more aggressive shift (tried first at 34) did on wider frames. */
.hero--photo-centered .hero__content {
  position: absolute; top: 41vh; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 2 * var(--space-md));
}
/* Type answers to viewport HEIGHT as well as width. Width alone lets a long
   headline overflow a short window; the vh cap keeps the whole block —
   headline, subtitle and button — inside one screen, with no scroll. */
.hero--photo-centered .hero__headline { font-size: min(var(--text-3xl), 8vh); }
.hero--photo-centered .hero__sub { font-size: min(var(--text-base), 2vh); }
/* A daylight frame is far brighter than the night one, so the wash has to be
   stronger and more even — weighted through the middle, where the type sits. */
.hero__scrim.hero__scrim--centered {
  background: linear-gradient(to bottom,
    oklch(0.12 0.008 50 / 0.26) 0%,
    oklch(0.12 0.008 50 / 0.34) 28%,
    oklch(0.12 0.008 50 / 0.42) 50%,
    oklch(0.12 0.008 50 / 0.36) 74%,
    oklch(0.12 0.008 50 / 0.26) 100%);
}
.hero--photo .hero__noise { z-index: 2; }
.hero--photo .hero__content { z-index: 3; }

/* Left-anchored variant: for a frame where the subject sits dead centre
   and a centred block would run type straight across their face — pin the
   content to the open side instead of fighting the composition. */
.hero--photo-left {
  justify-content: center;
  padding-block: calc(var(--header-h) + var(--space-md)) var(--space-md);
}
.hero--photo-left .hero__content { margin-inline: 0; text-align: left; max-width: 460px; }
.hero--photo-left .hero__cta { justify-content: flex-start; }
/* This frame's subject and the sign's lettering both sit in the top half —
   the shared 62% default crops toward the bottom, which would cut into
   both of them, so pull the crop back up toward the top instead. */
.hero--photo-left .hero__photo { object-position: 50% 65%; }
/* Type answers to viewport HEIGHT as well as width, same reasoning as
   .hero--photo-centered — a long headline in a narrow (480px) column
   wraps to several lines, and at the default hero size that alone can run
   past one screen. */
.hero--photo-left .hero__headline { font-size: min(var(--text-2xl), 8.5vh); }
.hero--photo-left .hero__sub { font-size: min(var(--text-sm), 3.1vh); }
/* Solid near the text, gone by the point the subject starts — darkens the
   open (left) side of the frame without touching the subject at all. */
.hero__scrim.hero__scrim--left {
  background: linear-gradient(to right,
    oklch(0.12 0.008 50 / 0.7) 0%,
    oklch(0.12 0.008 50 / 0.55) 32%,
    transparent 48%);
}

/* ===== SECTION DIVIDER ===== */
.section-divider {
  line-height: 0; margin-top: -1px;
  background: var(--warm);
}
.section-divider svg { width: 100%; height: 40px; display: block; }

/* ===== SERVICE ICONS ===== */
.service-item__icon {
  width: 20px; height: 20px; display: block;
  margin-bottom: 0.35rem; opacity: 0.4;
  transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:hover .service-item__icon { opacity: 0.8; }

/* ===== MARQUEE ===== */
.marquee-section {
  padding-block: var(--space-lg); overflow: hidden;
  contain: layout;
}
.marquee {
  display: flex; overflow: hidden;
  margin-bottom: var(--space-sm);
}
.marquee__track {
  display: flex; align-items: center;
  white-space: nowrap; gap: 0;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track {
  animation-direction: reverse;
  animation-duration: 25s;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-on-dark);
  padding-inline: 0.5em;
  flex-shrink: 0;
}
.marquee__item--italic { font-style: italic; color: var(--orange); font-weight: 300; }
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-muted);
  font-weight: 700;
}
.marquee__sep {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); opacity: 0.4;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== PRÉ-FOOTER ===== */
.prefooter {
  position: relative;
  padding: 0; overflow: hidden;
  line-height: 0.85;
}
/* Brand pattern ("estampa"), recoloured to a flat orange with the white
   knocked out to alpha, at low opacity — texture behind the wordmark
   rather than a loud print. */
.prefooter::before {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/estampa-pattern.webp') repeat;
  background-size: 200px 200px;
  opacity: 0.14;
  pointer-events: none;
}
.prefooter__text {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 4rem + 14vw, 18vw);
  text-align: center; text-transform: uppercase;
  letter-spacing: -0.03em;
  color: oklch(0.25 0.008 50);
  transform: translateY(18%);
}

/* ===== SERVICES LIST ===== */
.section--services { padding-block: var(--space-2xl); }
.services-header { margin-bottom: var(--space-sm); }
.services-list { display: flex; flex-direction: column; margin-top: var(--space-xl); }
.service-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-md);
  padding: clamp(1.25rem, 3vw, 2rem) var(--space-sm);
  border-bottom: 1px solid var(--border-dark);
  cursor: pointer; text-decoration: none;
  border-radius: var(--r-md);
  margin-inline: calc(-1 * var(--space-sm));
  transition: background 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              padding-inline 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:first-child { border-top: 1px solid var(--border-dark); }
.service-item:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.service-item:hover {
  background: oklch(0.18 0.01 50);
  padding-inline: var(--space-md);
}

.service-item__num {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; color: var(--orange); opacity: 0.15;
  line-height: 1; min-width: 3ch; text-align: right;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:hover .service-item__num { opacity: 0.4; }

.service-item__body { flex: 1; }
.service-item__name {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  transition: color 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:hover .service-item__name { color: var(--orange); }
.service-item__desc {
  font-size: var(--text-sm); color: var(--text-muted);
  max-width: 50ch; line-height: 1.55;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              margin 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  margin-top: 0;
}
.service-item:hover .service-item__desc {
  max-height: 80px; opacity: 1; margin-top: 0.5rem;
}

.service-item__cta {
  display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.service-item__cta-text {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--orange); opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:hover .service-item__cta-text {
  opacity: 1; transform: translateX(0);
}

.service-item__arrow {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--orange); display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.service-item:hover .service-item__arrow {
  transform: rotate(-45deg) scale(1.08);
  box-shadow: 0 6px 24px var(--orange-glow);
}
.service-item__arrow svg {
  width: 18px; height: 18px; stroke: var(--dark); stroke-width: 2;
}
.service-item:active .service-item__arrow {
  transform: rotate(-45deg) scale(0.96);
}

/* ===== TESTIMONIALS GRID ===== */
/* Bento-style grid, not a carousel: no fixed stage height to overflow, no
   forced uniform card size — each card is exactly as tall as its own quote,
   and one featured card (the longest quote) spans the full row so it gets
   the most breathing room instead of being squeezed into an equal column. */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); align-items: start;
  max-width: var(--max-w); margin-inline: auto; margin-top: var(--space-lg);
  padding-inline: var(--space-md);
}
.testimonial-card {
  display: flex; flex-direction: column;
  background: var(--dark-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-lg); padding: var(--space-md);
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
}
.testimonial-card:hover { transform: translateY(-4px); border-color: oklch(0.62 0.18 55 / 0.4); }
.testimonial-card--featured { grid-column: 1 / -1; }
.testimonial-card--featured .testimonial__quote { font-size: var(--text-lg); max-width: 65ch; }

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card--featured { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ===== TESTIMONIAL CARD CONTENT ===== */
.testimonial__quote {
  font-family: var(--font-display); font-size: var(--text-base);
  font-style: italic; line-height: 1.55;
  color: var(--text-on-dark); margin: 0;
  position: relative; padding-left: 1.5rem;
}
.testimonial__quote::before {
  content: '\201C'; position: absolute; left: 0; top: -0.15em;
  font-family: var(--font-display); font-size: 1.8em;
  color: var(--orange); line-height: 1; font-style: normal;
}
/* Pinned to the card's bottom edge via margin-top: auto (the card is a
   flex column) — keeps the avatar/name/service row at the same
   standardized distance from the bottom on every card, whatever the
   quote's length. */
.testimonial__meta {
  margin-top: auto; padding-top: var(--space-md);
  display: flex; align-items: center; gap: 0.75rem;
}
.testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--orange); flex-shrink: 0;
}
.testimonial__client { font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.15rem; }
.testimonial__role { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== TEAM ===== */
/* Shared by the founder profiles and the roster rows. The card grid and the
   seal placeholder that used to live here went out with the photo swap. */
.team-member__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.2rem; }
.team-member__role { font-size: var(--text-xs); color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: var(--space-xs); }
/* Context-aware: this bio now appears on both dark (founders) and warm
   (roster) sections, so the muted tone can't be hard-coded to one mode. */
.team-member__bio { font-size: var(--text-sm); line-height: 1.6; }
.section--dark .team-member__bio, .section--surface .team-member__bio { color: var(--text-muted); }
.section--warm .team-member__bio { color: var(--text-muted-warm); }
.team-member__bio:not(:last-child) { margin-bottom: 0.75em; }

/* ===== ROSTER (secondary team) — horizontal spotlight cards ===== */
/* Cards stay dark even on the warm section (same call as .service-detail__card)
   so the portraits and the glow effect below read consistently either way. */
.roster { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.roster-card {
  position: relative; display: flex; align-items: stretch; min-height: 260px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--dark-card); border: 1px solid var(--border-dark);
  transition: transform 0.4s var(--ease-smooth);
}
.roster-card:hover { transform: translateY(-4px); }
/* Spotlight glow: a JS pointermove listener (main.js) tracks the cursor
   position relative to each card and writes it to --spot-x/--spot-y; these
   two pseudo-elements just read those vars. This is the same idea as the
   React "glow card" reference — a masked gradient ring (::before) plus a
   soft ambient wash (::after) — rebuilt in plain CSS since the reference
   is a React/Tailwind/shadcn component and this site has none of the
   three (no bundler, no npm dependency graph at all). Brand orange only,
   no rainbow hue-shift, and gated to hover rather than always-on. */
.roster-card::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background:
    radial-gradient(60px 60px at var(--spot-x, 50%) var(--spot-y, 50%), oklch(0.97 0.02 55), transparent 70%),
    radial-gradient(200px 200px at var(--spot-x, 50%) var(--spot-y, 50%), oklch(0.68 0.19 55), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s var(--ease-smooth);
}
.roster-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(280px 280px at var(--spot-x, 50%) var(--spot-y, 50%), oklch(0.62 0.18 55 / 0.22), transparent 70%);
  opacity: 0; transition: opacity 0.5s var(--ease-smooth);
}
.roster-card:hover::before, .roster-card:hover::after { opacity: 1; }

/* Kept in colour like the founders' photos, no grayscale filter — the
   neon/location carries the Brazil-Japan-abroad story. Width (not
   aspect-ratio) is fixed here: height comes from the body's text via the
   flex row's stretch, so a short bio doesn't crush the photo flat. */
.roster-card__photo {
  width: clamp(200px, 26vw, 320px); flex-shrink: 0;
  overflow: hidden; position: relative; z-index: 1;
}
.roster-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.roster-card:hover .roster-card__photo img { transform: scale(1.04); }
/* The card's own background is always dark, regardless of which section
   (dark or warm) wraps it — text needs to match that, not the section. */
.roster-card__body {
  padding: var(--space-lg); position: relative; z-index: 2; color: var(--text-on-dark);
  display: flex; flex-direction: column; justify-content: center;
}
.roster-card .team-member__bio { color: var(--text-muted); }

/* ===== FOUNDER CARD (editorial) ===== */
/* Alternating photo/name-plate treatment for Julia and Luiz. The name
   overlaps the portrait's lower edge (scrim underneath for contrast) instead
   of sitting in a caption below it — the two-weight display name is the
   focal point, per DESIGN.md's weight-gap rule (light first name / bold
   surname), and the circular CTA reuses .service-item__arrow's interaction. */
.founder-card {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: var(--space-xl);
  align-items: start; padding-block: var(--space-xl);
  border-bottom: 1px solid var(--border-dark);
}
.founder-card:last-child { border-bottom: none; }
.founder-card--reverse { direction: rtl; }
.founder-card--reverse > * { direction: ltr; }

.founder-card__portrait {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--dark-card);
}
.founder-card__portrait picture { display: block; width: 100%; height: 100%; }
.founder-card__portrait img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.founder-card:hover .founder-card__portrait img { transform: scale(1.03); }

.founder-card__scrim {
  position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(to top, oklch(0.08 0.01 50 / 0.9) 0%, transparent 100%);
  pointer-events: none;
}
.founder-card__plate {
  position: absolute; left: var(--space-sm); right: calc(var(--space-sm) + 64px); bottom: var(--space-sm);
  display: flex; flex-direction: column; line-height: 0.95;
}
.founder-card__first {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--text-lg); color: var(--text-on-dark);
}
.founder-card__last {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); color: var(--text-on-dark);
}

.founder-card__cta {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm);
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange); display: grid; place-items: center;
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-smooth);
}
.founder-card__cta svg { width: 20px; height: 20px; stroke: var(--dark); stroke-width: 2; }
.founder-card:hover .founder-card__cta { transform: rotate(-45deg) scale(1.08); box-shadow: 0 6px 24px var(--orange-glow); }
.founder-card__cta:active { transform: rotate(-45deg) scale(0.96); }
.founder-card__cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.founder-card__content { padding-top: var(--space-xs); }
.founder-card__role {
  font-size: var(--text-xs); color: var(--orange); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: var(--space-sm);
}

/* ===== MANTRA LINE ===== */
.mantra-line {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  color: var(--orange); font-size: var(--text-xl); line-height: 1.3;
}

/* ===== SERVICE DETAIL ===== */
/* One-screen-per-service on the services page: .section--service zeroes the
   outer .section padding (it was stacking with .service-detail's own and
   eating ~575px of a 900px-tall viewport on nothing but whitespace), and
   min-height plus vh-based padding here replace it. Content is compressed
   (smaller title, multi-column checklists below) to actually fit that
   space instead of just constraining the box and letting it overflow. */
.section--service { padding-block: 0; }
.service-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-block: clamp(1.25rem, 4vh, 2.5rem);
  border-bottom: 1px solid var(--border-dark);
}
.section--warm .service-detail { border-color: var(--border-warm); }
.service-detail:last-child { border-bottom: none; }
.service-detail--flip { direction: rtl; }
.service-detail--flip > * { direction: ltr; }
.service-detail__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; margin-bottom: 0.5rem; text-wrap: balance; }
.service-detail__text { font-size: var(--text-sm); line-height: 1.55; margin-bottom: 0.5rem; }
.section--dark .service-detail__text { color: var(--text-muted); }
.section--warm .service-detail__text { color: var(--text-muted-warm); }
.service-detail__tagline {
  font-family: var(--font-display); font-size: var(--text-base); font-style: italic;
  font-weight: 300; color: var(--orange); line-height: 1.3; margin-bottom: 0.5rem;
}
.service-detail__card { background: var(--dark-card); border-radius: var(--r-lg); padding: var(--space-sm); border: 1px solid var(--border-dark); }
.service-detail__card--inverted { background: var(--dark); border-color: var(--border-dark); color: var(--text-on-dark); }
.service-detail__card-title { font-family: var(--font-display); font-size: var(--text-base); margin-bottom: 0.5rem; }

/* Inline photo in the text column — Branding Completo only. Ratio is 4/5,
   not the usual wide crop, because the source is a moodboard/brand-board
   grid with readable swatches and type; a wider crop would cut into the
   grid instead of just trimming empty background like a candid photo
   would. Capped width so it reads as a considered inline image rather
   than stretching across the whole text column. */
.service-detail__media {
  max-width: 460px; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
  margin-block: var(--space-sm); border: 1px solid var(--border-dark);
}
.section--warm .service-detail__media { border-color: var(--border-warm); }
.service-detail__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.service-detail__media:hover img { transform: scale(1.03); }

/* Media rail — real Instagram reels/stories as proof of work, placed in the
   text column (not the checklist card) so they read as a citation rather
   than competing with the card. Two side by side, story aspect ratio. */
.media-rail { display: flex; gap: 0.9rem; max-width: 440px; margin-block: var(--space-sm); }
.media-rail__item {
  position: relative; flex: 1; aspect-ratio: 9 / 16; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--border-dark); display: block;
}
.section--warm .media-rail__item { border-color: var(--border-warm); }
.media-rail__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.media-rail__item:hover img { transform: scale(1.05); }
.media-rail__badge {
  position: absolute; inset: auto 6px 6px 6px; background: oklch(0.12 0.008 50 / 0.78);
  border-radius: var(--r-sm); padding: 0.3rem 0.4rem; display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.58rem; color: var(--text-on-dark); line-height: 1.2;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}
.media-rail__item:hover .media-rail__badge { opacity: 1; transform: none; }
.media-rail__badge svg { width: 9px; height: 9px; stroke: var(--orange); fill: none; stroke-width: 2.2; flex-shrink: 0; }

/* Nested, titled sub-lists inside a card (options, phases, groups) */
.spec-group + .spec-group { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border-dark); }
.spec-group__title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--orange); margin-bottom: 0.35rem;
}
.spec-group__note { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.35rem; }

/* "Para quem é" — closing qualifier on each service */
.audience-note { margin-block: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border-dark); }
.section--warm .audience-note { border-color: var(--border-warm); }
.audience-note__label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--orange); margin-bottom: 0.3rem;
}
.audience-note__text { font-size: var(--text-xs); line-height: 1.5; max-width: 50ch; }
.section--dark .audience-note__text { color: var(--text-muted); }
.section--warm .audience-note__text { color: var(--text-muted-warm); }

/* Pill list — categories/examples, where a checkmark would overstate it */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-list__item {
  font-size: 0.7rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  color: var(--text-muted);
}
.section--warm .tag-list__item { border-color: var(--border-warm); color: var(--text-muted-warm); }
/* Cards stay dark even on warm sections, so re-assert the dark treatment inside them. */
.section--warm .service-detail__card .tag-list__item { border-color: var(--border-dark); color: var(--text-muted); }

/* Single running column, dash marker instead of a checkmark-in-a-circle —
   quieter and more editorial than a multi-column grid, and it sidesteps
   the grid's uneven-row problem entirely (every item just stacks). Costs
   more vertical height on the longest lists; accepted trade for services
   that also carry a photo now, where a denser grid would fight the image. */
.checklist { display: flex; flex-direction: column; gap: 0.65rem; }
.spec-group .checklist { gap: 0.5rem; }
.checklist__item {
  display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; line-height: 1.6;
  opacity: 0; transform: translateX(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal.visible .checklist__item, .reveal-left.visible .checklist__item, .reveal-right.visible .checklist__item {
  opacity: 1; transform: none;
}
.checklist__item::before { content: '\2013'; color: var(--orange); flex-shrink: 0; font-weight: 600; }

/* ===== CTA SECTION ===== */
.cta-section { text-align: center; padding-block: var(--space-xl); }
.cta-section__title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400;
  margin-bottom: var(--space-md); max-width: 20ch; margin-inline: auto; line-height: 1.2;
}

/* ===== FORM ===== */
.form { display: flex; flex-direction: column; gap: var(--space-sm); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.form__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted-warm); }
.form__input, .form__textarea, .form__select {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 0.875rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-warm); background: var(--cream); color: var(--text-on-warm);
  outline: none; transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.form__input:focus, .form__textarea:focus, .form__select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.form__input::placeholder, .form__textarea::placeholder { color: oklch(0.6 0.005 50); }
.form__textarea { resize: vertical; min-height: 140px; }
.form__select { cursor: pointer; }
.form__input.error, .form__textarea.error { border-color: var(--red-error); }
.form__error { font-size: var(--text-xs); color: var(--red-error); display: none; }
.form__field.has-error .form__error { display: block; }
/* Honeypot — invisible to real visitors, present for bots that auto-fill
   every field; Web3Forms rejects the submission server-side if it's set. */
.form__honeypot { position: absolute; opacity: 0; height: 0; width: 0; pointer-events: none; }
.form__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.form__success {
  display: none; padding: var(--space-md); border-radius: var(--r-md);
  background: oklch(0.92 0.03 150); border: 1px solid oklch(0.7 0.1 150);
  text-align: center; color: var(--text-on-warm);
}
.form__success.visible { display: block; }
.form__success h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: 0.5rem; }
.form__success .form__success-reset { margin-top: var(--space-sm); }
.form__error-banner {
  display: none; padding: var(--space-md); border-radius: var(--r-md); margin-top: var(--space-sm);
  background: oklch(0.94 0.03 25); border: 1px solid oklch(0.75 0.12 25);
  text-align: center; color: var(--text-on-warm);
}
.form__error-banner.visible { display: block; }
.form__error-banner h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--red-error); margin-bottom: 0.35rem; }
.form__error-banner p { font-size: var(--text-sm); }

/* ===== METHOD (4Es) ===== */
/* One row, not a 2x2 block: four SEQUENTIAL stages need an unambiguous
   left-to-right reading order, which a grid of quadrants doesn't give.
   No number, no separate mark — the capitalized first word of each title
   already carries the "all four start with E" detail (in Portuguese; the
   translated titles don't share a letter, so nothing here depends on it). */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); margin-top: var(--space-xl); }
.method-step { padding-top: var(--space-sm); border-top: 1px solid var(--border-warm); }
.section--dark .method-step { border-color: var(--border-dark); }
.method-step__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.5rem; }
.method-step__text { font-size: var(--text-sm); line-height: 1.6; }
.section--warm .method-step__text { color: var(--text-muted-warm); }
.section--dark .method-step__text { color: var(--text-muted); }

/* ===== PROJECT STACK (sticky scroll cards) ===== */
/* Pure CSS — no JS. Every card sticks at the same offset, so as you scroll
   each new one slides up and settles on top of the last, covering it. */
.project-stack {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-md);
  margin-top: var(--space-lg);
}
.project-card {
  position: sticky; top: calc(var(--header-h) + var(--space-sm));
  overflow: hidden;
  min-height: 440px;
  background: var(--dark-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-md);
  box-shadow: 0 24px 60px -24px oklch(0.08 0.01 50 / 0.6);
}
.project-card:last-child { margin-bottom: 0; }
.project-card__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-sm); }
.project-card__text { font-size: var(--text-base); line-height: 1.7; color: var(--text-muted); }

/* Photo sits behind everything, filling the right half of the card at full
   height (object-fit: cover keeps every source photo cropping cleanly to
   that box, whatever its native aspect ratio — no shrinking to a narrow
   strip like a natural-aspect crop would for a portrait photo). A short,
   soft gradient blends just its inner edge into the card's own background
   colour rather than washing the whole photo out. */
.project-card__media { position: absolute; inset: 0; z-index: 0; }
.project-card__media img { position: absolute; top: 0; right: 0; width: 50%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__media::after {
  content: ''; position: absolute; inset: 0;
  /* The photo itself only starts at the 50% mark — the fade needs to sit
     right on top of it (not finish before it), or the photo's edge stays
     a hard cut and the gradient just fades over empty background. */
  background: linear-gradient(to right, var(--dark-card) 0%, var(--dark-card) 50%, transparent 68%);
}

.project-card__body { position: relative; z-index: 1; max-width: 46%; padding: var(--space-lg); }

.project-card__social {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--orange); display: grid; place-items: center;
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-smooth);
}
.project-card__social svg { width: 20px; height: 20px; stroke: var(--dark); stroke-width: 2; }
.project-card__social:hover { transform: scale(1.08); box-shadow: 0 6px 24px var(--orange-glow); }
.project-card__social:active { transform: scale(0.96); }
.project-card__social:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ===== DIFFERENTIATORS LIST ===== */
.diff-list { display: flex; flex-direction: column; margin-top: var(--space-lg); }
.diff-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--border-dark); }
.section--warm .diff-item { border-color: var(--border-warm); }
.diff-item:last-child { border-bottom: none; }
.diff-item__num { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--orange); opacity: 0.4; min-width: 2.5ch; }
.diff-item__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.35rem; }
.diff-item__text { font-size: var(--text-sm); line-height: 1.6; max-width: 55ch; }
.section--warm .diff-item__text { color: var(--text-muted-warm); }
.section--dark .diff-item__text { color: var(--text-muted); }

/* ===== TIMELINE ===== */
.timeline { position: relative; padding-left: var(--space-md); }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-dark); }
.section--warm .timeline::before { background: var(--border-warm); }
.timeline__item { position: relative; padding-bottom: var(--space-lg); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-md) - 5px); top: 6px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--orange);
}
.timeline__year { font-size: var(--text-xs); color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.timeline__text { font-size: var(--text-base); line-height: 1.7; max-width: 50ch; }
.section--warm .timeline__text { color: var(--text-muted-warm); }

/* ===== INFO CARDS ===== */
.info-card { background: var(--dark); border-radius: var(--r-lg); padding: var(--space-md); color: var(--text-on-dark); }
.info-card + .info-card { margin-top: var(--space-sm); }
.info-card__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.info-card__text { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); line-height: 1.6; }

/* ===== FOOTER ===== */
.footer { background: var(--orange); color: var(--dark); padding: var(--space-xl) var(--space-md) var(--space-md); }
.footer__grid { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer__tagline { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1.35; margin-bottom: var(--space-md); max-width: 42ch; }
.footer__contact-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: var(--text-sm); font-weight: 500; }
.footer__contact-row svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer__actions { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.footer__actions .btn--outline { border-color: var(--dark); color: var(--dark); }
.footer__actions .btn--outline:hover { background: var(--dark); color: var(--orange); }
.footer__social { display: flex; gap: 0.75rem; margin-top: var(--space-sm); }
.footer__social a {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--dark);
  display: grid; place-items: center; transition: all 0.3s var(--ease-smooth);
}
.footer__social a:hover { background: var(--dark); color: var(--orange); }
.footer__social a:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
  max-width: var(--max-w); margin-inline: auto; padding-top: var(--space-md);
  border-top: 1px solid oklch(0.45 0.1 50);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-xs); opacity: 0.7;
}

/* ===== SCROLL REVEAL ===== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.4s; }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
/* Extra touch on top of the base .reveal fade/rise, scoped to the
   testimonial cards rather than added to .reveal itself (a sitewide blur
   would touch every other reveal-tagged element on every page). */
.testimonial-card.reveal { filter: blur(6px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out); }
.testimonial-card.reveal.visible { filter: blur(0); }
.hero__headline .word { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.hero__headline .word.visible { opacity: 1; transform: translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .service-detail { grid-template-columns: 1fr; gap: var(--space-md); }
  .service-detail--flip { direction: ltr; }
}
@media (max-width: 768px) {
  .nav { display: none; }
  .split-grid { grid-template-columns: 1fr; }
  /* Stacked, the two columns' combined height easily exceeds one screen —
     forcing min-height:100vh here would centre-crop instead of just
     flowing, so let it size to content like every other section. */
  .section--fullscreen { min-height: auto; padding-block: var(--space-xl); }
  .method-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .diff-item { grid-template-columns: 1fr; gap: 0.35rem; }
  .roster-card { flex-direction: column; min-height: 0; }
  .roster-card__photo { width: 100%; aspect-ratio: 4 / 3; }
  /* The fluid photo-into-text dissolve needs width to breathe — on a narrow
     screen it would either crush the text column or bury it under the
     image, so fall back to a plain stacked layout instead. */
  .project-card { top: var(--header-h); min-height: 0; }
  .project-card__media { position: static; aspect-ratio: 4 / 3; }
  .project-card__media img { position: static; width: 100%; height: 100%; }
  .project-card__media::after { display: none; }
  .project-card__body { position: static; max-width: 100%; padding: var(--space-md); }
  .founder-card, .founder-card--reverse { grid-template-columns: 1fr; direction: ltr; gap: var(--space-sm); }
  /* Stays prominent (the whole point of this redesign) but capped so it
     doesn't run edge-to-edge once stacked. */
  .founder-card__portrait { max-width: 340px; margin-inline: auto; width: 100%; }
  .hamburger { display: flex; }
  .header { display: flex; justify-content: space-between; gap: var(--space-sm); }
  .logo { flex-shrink: 0; }
  .lang-switch { order: 2; margin-left: auto; }
  .hamburger { order: 3; }
  .hero { height: auto; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; }
  .hero__content { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 30vh; }
  .hero__headline { margin-bottom: 10vh; }
  .hero__cta { padding-top: var(--space-md); }
  /* Secondary-page hero has no subtitle/scroll-indicator to balance the
     home hero's 30vh top offset, so it collapses into dead empty space. */
  .hero--page { min-height: auto; padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-xl); }
  /* Full-screen on mobile too. In a tall narrow box the crop is horizontal,
     so the vertical framing above stops mattering; centring keeps the
     subjects in view. */
  .hero--photo { min-height: 100vh; min-height: 100dvh; }
  /* The left/right split only works with room to breathe — on a narrow
     screen the crop tightens onto the subject and there's no clear side
     left for type, so fall back to centred text over a flat, even wash. */
  .hero--photo-left .hero__content { text-align: center; max-width: 100%; }
  .hero--photo-left .hero__cta { justify-content: center; }
  .hero__scrim.hero__scrim--left { background: oklch(0.12 0.008 50 / 0.68); }
  /* The fixed-34vh anchor is a desktop fix for a wide/short crop problem —
     on mobile the crop is vertical (full width, cropped top/bottom) and
     the generic centred flow above already keeps content clear. */
  .hero--photo-centered .hero__content { position: static; top: auto; left: auto; transform: none; width: auto; }
  .hero--page .hero__content { padding-top: 0; }
  .hero--page .hero__headline { margin-bottom: var(--space-sm); }
  .hero__circle--1, .hero__circle--2, .hero__circle--3 { width: 300px; height: 300px; }
  .hero__headline { font-size: var(--text-3xl); }
  .hero__scroll { display: none; }
  .service-item { grid-template-columns: auto 1fr auto; gap: var(--space-sm); }
  .service-item__num { font-size: var(--text-lg); min-width: 2ch; }
  .service-item__icon { width: 16px; height: 16px; }
  .service-item__cta-text { display: none; }
  .service-item__arrow { width: 40px; height: 40px; }
  .service-item__desc { max-height: none; opacity: 1; margin-top: 0.25rem; }
  .section-divider svg { height: 24px; }
  .marquee__item { font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .marquee__sep { width: 8px; height: 8px; }
  .prefooter__text { font-size: 20vw; }
  .footer__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}
@media (max-width: 480px) {
  .lang-switch__btn { font-size: 0.6rem; padding: 0.25rem 0.45rem; }
  .hero__headline { font-size: var(--text-2xl); }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .service-item__num .service-item__icon { display: none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .checklist__item { opacity: 1; transform: none; }
  .hero__headline .word { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}