/* =====================================================================
   TROPUS — styles.css
   Design viewport: 1920 × 1080. Fluid down to ~360px via clamp() tokens +
   one "flat" media block (band 19) that un-pins every scene and stacks the
   landscape compositions vertically for phones / portrait tablets.
     · FULL experience (pinned reel + scrubbed motion):
         (min-width: 1000px) and (min-aspect-ratio: 12/10)
     · FLAT (this block, and the matchMedia branch in script.js):
         (max-width: 999px), (max-aspect-ratio: 12/10)
   Bands: 01 RESET · 02 TOKENS · 03 BASE · 04 TYPOGRAPHY · 05 LAYOUT ·
   06 GLOBAL CHROME · 07 HEADER · 08 BOTTOM BLUR · 09 BOTTOM NAV ·
   10 HERO · 11 TIMELINE · 12 FIRST STEP · 13 EYE / CHALLENGE ·
   14 BUILDING · 15 APPROACH · 16 METHODOLOGY · 17 COMPANIES ·
   18 MOTION HELPERS · 19 ACCESSIBILITY · 20 RESPONSIVE (FLAT)
   ===================================================================== */

/* ============================ 01 · RESET ============================ */
.vibe-tropus-page, .vibe-tropus-page *, .vibe-tropus-page *::before, .vibe-tropus-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.vibe-tropus-page img, .vibe-tropus-page video { display: block; max-width: 100%; }
.vibe-tropus-page img { border: 0; }
.vibe-tropus-page button, .vibe-tropus-page input, .vibe-tropus-page select, .vibe-tropus-page textarea { font: inherit; color: inherit; }
.vibe-tropus-page a { color: inherit; text-decoration: none; }
.vibe-tropus-page ul, .vibe-tropus-page ol { list-style: none; }
.vibe-tropus-page ::selection { background: var(--trp-orange); color: var(--trp-black); }

/* ============================ 02 · TOKENS ============================ */
.vibe-tropus-page {
  /* colour */
  --trp-black: #000000;
  --trp-white: #ffffff;
  --trp-orange: #ff6700;
  --trp-gray-dark: #35353a;
  --trp-gray-light: #e2e2e2;
  --trp-ghost: rgba(255, 255, 255, 0.16);
  --trp-muted: #6f6f75;
  --trp-line: rgba(226, 226, 226, 0.22);
  --trp-line-solid: #3b3b42;   /* opaque equivalent — no alpha stacking where lines cross */
  --trp-card: #111114;

  /* type scale — fluid: each clamp hits the 1920 design value at the top and
     scales toward a mobile floor. MAX = the original px. */
  --trp-type-display-xxl: clamp(3.75rem, 0.7rem + 12.7vw, 14rem);   /* 224 @1920 · ~60 mobile */
  --trp-type-display-xl:  clamp(2.15rem, 1.16rem + 3.3vw, 5rem);    /* 80  @1920 · ~34 mobile */
  --trp-type-h1:          clamp(2rem, 1.03rem + 3.24vw, 4.6875rem); /* 75  @1920 · ~32 mobile */
  --trp-type-h2:          clamp(1.6rem, 1.06rem + 1.8vw, 3.1875rem);/* 51  @1920 · ~26 mobile */
  --trp-type-title-lg:    clamp(1.55rem, 1.24rem + 1.05vw, 2.5rem); /* 40  @1920 · ~25 mobile */
  --trp-type-title:       clamp(1.35rem, 1.11rem + 0.8vw, 2rem);    /* 32  @1920 · ~22 mobile */
  --trp-type-body:        clamp(1rem, 0.91rem + 0.3vw, 1.25rem);    /* 20  @1920 · 16 mobile */
  --trp-type-small-lg:    clamp(0.94rem, 0.88rem + 0.2vw, 1.125rem);/* 18  @1920 · 15 mobile */
  --trp-type-small:       clamp(0.875rem, 0.83rem + 0.15vw, 1rem);  /* 16  @1920 · 14 mobile */
  --trp-type-caption:     clamp(0.78rem, 0.75rem + 0.1vw, 0.875rem);/* 14  @1920 · 12.5 mobile */

  --trp-font: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* the site's font is Sora Light */
  --trp-weight-base: 300;
  --trp-weight-title: 100;  /* all titles are Sora Thin */
  --trp-lh-tight: 1.08;
  --trp-lh-body: 1.5;
  --trp-track-tight: -0.012em;

  /* layout — centred reading column is 60%, the rest of the site is 90% */
  --trp-w-wide: 90vw;
  --trp-w-wide-max: 1728px;
  --trp-w-narrow: 60vw;
  --trp-w-narrow-max: 1200px;
  --trp-gutter: clamp(20px, 5vw, 96px);
  --trp-bottom-safe-area: clamp(72px, 10vh, 112px);

  /* z-index system */
  --trp-z-base: 0;
  --trp-z-media: 10;
  --trp-z-content: 20;
  --trp-z-sticky: 30;
  --trp-z-header: 80;
  --trp-z-blur: 90;
  --trp-z-nav: 100;

  /* eye transition — pupil centre in eye.webp (imagem olho.webp), after object-fit: cover */
  --trp-eye-origin-x: 39%;
  --trp-eye-origin-y: 50%;

  /* scene transition (disappear-with-blur, not scroll) */
  --trp-scene-blur: 22px;

  color-scheme: dark;
}

/* ============================ 03 · BASE ============================ */
.vibe-tropus-page {
  position: relative; min-height: 100%;
  background: var(--trp-black);
  color: var(--trp-white);
  font-family: var(--trp-font);
  font-weight: var(--trp-weight-base);
  font-size: var(--trp-type-body);
  line-height: var(--trp-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}


/* ============================ 04 · TYPOGRAPHY ============================ */
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-100.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-200.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sora"; src: url("./assets/fonts/sora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* titles = Sora Thin (100) · running text = Sora Light (300) */
.vibe-tropus-page h1, .vibe-tropus-page h2 { font-weight: var(--trp-weight-title); }
.vibe-tropus-page h3, .vibe-tropus-page p { font-weight: inherit; }
/* orange highlight — always +100 weight over its context for emphasis */
.vibe-tropus-page em { font-style: normal; color: var(--trp-orange); font-weight: 400; }
.trp-first-step__line em { font-weight: 200; }   /* line is Thin (100) */
.trp-eye__aside em { font-weight: 400; }          /* aside is Light (300) */

/* ============================ 05 · LAYOUT ============================ */
.trp-site { position: relative; z-index: var(--trp-z-base); }

/* the two content widths */
.trp-wide   { width: var(--trp-w-wide);   max-width: var(--trp-w-wide-max);   margin-inline: auto; }
.trp-narrow { width: var(--trp-w-narrow); max-width: var(--trp-w-narrow-max); margin-inline: auto; }

.vibe-tropus-page section { position: relative; min-height: 100vh; }

/* ---- REEL: scenes 01–05 stacked in one pinned stage ----
   ScrollTrigger pins .trp-reel__stage for the reel's whole scroll range (see
   initReel / makeReelScene). Scenes are stacked absolutely and only their
   opacity / blur is animated, so one fades out exactly as the next fades in —
   never a scroll‑away into black, never a scene sliding in from below. */
.trp-reel { position: relative; z-index: var(--trp-z-content); background: var(--trp-black); }
.trp-reel__stage {
  position: relative;
  height: 100vh; width: 100%;
  overflow: hidden;
}
.trp-reel .trp-scene {
  position: absolute; inset: 0;
  min-height: 0; height: 100vh;
}
/* only `opacity` — `will-change: filter` would raster‑layer the scene and
   pixelate the eye scene's scale(14) pupil zoom */
.vibe-tropus-page.js .trp-reel .trp-scene { will-change: opacity; }


.trp-skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; background: var(--trp-orange); color: var(--trp-black);
  font-size: var(--trp-type-small); font-weight: 500;
  transform: translateY(-160%); transition: transform 0.2s ease;
}
.trp-skip:focus-visible { transform: translateY(0); }

/* ============================ 06 · GLOBAL CHROME ============================ */
.trp-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--trp-type-small); font-weight: 400; letter-spacing: 0.01em;
  padding: 14px 20px; white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.trp-btn__arrow { display: inline-block; transition: transform 0.25s ease; }
.trp-btn:hover .trp-btn__arrow,
.trp-btn:focus-visible .trp-btn__arrow { transform: translate(2px, -2px); }

.trp-btn--solid { background: var(--trp-orange); color: var(--trp-white); }
.trp-btn--solid:hover, .trp-btn--solid:focus-visible { background: #ff7d26; }
.trp-btn--solid:active { transform: translateY(1px); }

.trp-btn--ghost { border: 1px solid var(--trp-orange); color: var(--trp-orange); }
.trp-btn--ghost:hover, .trp-btn--ghost:focus-visible { background: var(--trp-orange); color: var(--trp-black); }

.trp-link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--trp-orange); font-size: var(--trp-type-small-lg);
  border-bottom: 1px solid transparent; transition: border-color 0.25s ease;
}
.trp-link-arrow:hover, .trp-link-arrow:focus-visible { border-color: var(--trp-orange); }

/* ============================ 07 · HEADER ============================ */
/* The logo and project CTA stay in their original corners throughout the page. */
.trp-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--trp-z-header);
  height: 0;
  pointer-events: none;
}
.trp-header a { pointer-events: auto; }

.trp-header__logo {
  position: absolute; top: 34px; left: var(--trp-gutter);
  display: block;
}
.trp-logo { width: 128px; height: auto; }

.trp-header__cta {
  position: absolute; top: 34px; right: var(--trp-gutter);
}
.vibe-tropus-page.is-light-chrome .trp-logo { filter: brightness(0); }

/* ============================ 08 · BOTTOM BLUR ============================ */
/* Vanilla port of React Bits <GradualBlur> — divCount 6, strength 3,
   curve "bezier" (smoothstep), exponential, position bottom.
   Each layer: a masked band + its own backdrop-filter; blur ramps toward
   the bottom. Values are the exact output of the component's algorithm. */
.trp-blur {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--trp-bottom-safe-area);
  z-index: var(--trp-z-blur);
  pointer-events: none;
  isolation: isolate;
}
.trp-blur__layer { position: absolute; inset: 0; opacity: 1; }

.trp-blur__layer:nth-child(1) {
  backdrop-filter: blur(0.230rem); -webkit-backdrop-filter: blur(0.230rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16.7%, #000 33.3%, transparent 50%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16.7%, #000 33.3%, transparent 50%);
}
.trp-blur__layer:nth-child(2) {
  backdrop-filter: blur(0.385rem); -webkit-backdrop-filter: blur(0.385rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 16.7%, #000 33.3%, #000 50%, transparent 66.7%);
          mask-image: linear-gradient(to bottom, transparent 16.7%, #000 33.3%, #000 50%, transparent 66.7%);
}
.trp-blur__layer:nth-child(3) {
  backdrop-filter: blur(0.750rem); -webkit-backdrop-filter: blur(0.750rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 33.3%, #000 50%, #000 66.7%, transparent 83.3%);
          mask-image: linear-gradient(to bottom, transparent 33.3%, #000 50%, #000 66.7%, transparent 83.3%);
}
.trp-blur__layer:nth-child(4) {
  backdrop-filter: blur(1.462rem); -webkit-backdrop-filter: blur(1.462rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 66.7%, #000 83.3%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 50%, #000 66.7%, #000 83.3%, transparent 100%);
}
.trp-blur__layer:nth-child(5) {
  backdrop-filter: blur(2.443rem); -webkit-backdrop-filter: blur(2.443rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 66.7%, #000 83.3%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 66.7%, #000 83.3%, #000 100%);
}
.trp-blur__layer:nth-child(6) {
  backdrop-filter: blur(3.000rem); -webkit-backdrop-filter: blur(3.000rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 83.3%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 83.3%, #000 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trp-blur { background: linear-gradient(to top, var(--trp-black) 12%, transparent); }
}

/* ============================ 09 · BOTTOM NAV (PROVISIONAL) ============================ */
/* section links inside a framed pill, centred in the bottom safe area */
.trp-nav {
  position: fixed; left: 50%; bottom: calc(var(--trp-bottom-safe-area) * 0.24);
  transform: translateX(-50%);
  z-index: var(--trp-z-nav);
  padding: 13px 26px;
  background: rgba(14, 14, 16, 0.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 226, 226, 0.12);
}
.trp-nav__list { display: flex; align-items: center; gap: 32px; }
.trp-nav__list a {
  font-size: var(--trp-type-caption); font-weight: var(--trp-weight-base);
  letter-spacing: 0.02em; color: var(--trp-gray-light);
  transition: color 0.2s ease;
}
.trp-nav__list a:hover, .trp-nav__list a:focus-visible { color: var(--trp-white); }
/* active = orange + light, no underline */
.trp-nav__list a.is-active { color: var(--trp-orange); }

.vibe-tropus-page.is-light-chrome .trp-nav {
  background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.08);
}
.vibe-tropus-page.is-light-chrome .trp-nav__list a { color: var(--trp-gray-dark); }
.vibe-tropus-page.is-light-chrome .trp-nav__list a:hover { color: var(--trp-black); }
.vibe-tropus-page.is-light-chrome .trp-nav__list a.is-active { color: var(--trp-orange); }

/* ============================ 10 · HERO ============================ */
/* Positioned to match the Illustrator layout (docs/reference/art-direction/01-hero.png).
   The PDF artboard is 1920 x 972 = the viewport minus the 10vh bottom safe area,
   so PDF-y maps 1:1 to viewport-y. The title / eye / wave sit in a centred
   ~70% column (14.7% .. 85.3%); the two leads hug the ~5.5% gutter. */
.trp-hero { z-index: var(--trp-z-content); background: var(--trp-black); }
.trp-hero__inner {
  position: relative;
  width: 100%;
  height: 100vh;
}
.trp-hero__title {
  position: absolute; top: 29.5vh; left: 14.7%; width: 80vw;
  font-size: clamp(2.5rem, 0.33rem + 3.48vw, 4.5rem); /* 72 @1920 */
  font-weight: var(--trp-weight-title); line-height: 1.67;
  letter-spacing: var(--trp-track-tight);
}
.trp-hero__title > span { display: block; white-space: nowrap; }
/* "do impacto, ao resultado" is indented so it begins at ~39% of the viewport */
.trp-hero__title > span:nth-child(2) { margin-left: 24.3vw; }

.trp-hero__media { position: absolute; overflow: hidden; }
.trp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.trp-hero__media--eye  { top: 40.8vh; left: 14.7%; width: 18%;    height: 10.5vh; }
/* the waveform sits ABOVE "do impacto, ao resultado" — clears it by ~35px */
.trp-hero__media--wave { top: 29.8vh; left: 58.3%; width: 26.9%; height: 10.4vh; }

.trp-hero__lead { position: absolute; line-height: 1.3; }
.trp-hero__lead--left {
  left: 5.2%; bottom: calc(var(--trp-bottom-safe-area) + 20px);
  width: 46%; font-size: var(--trp-type-h2); font-weight: var(--trp-weight-title);
  color: var(--trp-white); letter-spacing: var(--trp-track-tight);
}
.trp-hero__lead--right {
  right: 7.9%; bottom: calc(var(--trp-bottom-safe-area) + 20px);
  width: 30%; font-size: var(--trp-type-body); font-weight: var(--trp-weight-base);
  line-height: 1.45; color: var(--trp-gray-light);
}

/* ============================ 11 · TIMELINE ============================ */
.trp-timeline { z-index: var(--trp-z-content); background: var(--trp-black); }
.trp-timeline__pin {
  position: relative; height: 100vh;
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max);
  margin-inline: auto;
}
.trp-timeline__title {
  position: absolute; top: 15vh; left: 50%; transform: translateX(-50%);
  text-align: center; font-size: var(--trp-type-h1); font-weight: var(--trp-weight-title);
  line-height: 1.2; letter-spacing: var(--trp-track-tight);
}
/* each line stays on one line — breaks only where the markup breaks it */
.trp-timeline__title span { display: block; white-space: nowrap; }

.trp-timeline__track {
  position: absolute; left: 0; right: 0; bottom: calc(var(--trp-bottom-safe-area) + 220px);
  height: 14px;
}
.trp-timeline__rail, .trp-timeline__progress {
  position: absolute; left: 0; top: 50%; height: 1px; width: 100%;
  transform: translateY(-50%); transform-origin: left center;
}
.trp-timeline__rail { background: var(--trp-line); }
.trp-timeline__progress { background: var(--trp-orange); transform: translateY(-50%) scaleX(0); }
/* squares at the START, MIDDLE and END of the line */
.trp-timeline__node {
  position: absolute; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: var(--trp-gray-dark); outline: 1px solid var(--trp-line);
}
.trp-timeline__node[data-node="1"] { left: 0;    margin-left: 0; }
.trp-timeline__node[data-node="2"] { left: 50%;  margin-left: -7px; }
.trp-timeline__node[data-node="3"] { left: 100%; margin-left: -14px; }
.trp-timeline__node.is-active { background: var(--trp-orange); outline-color: var(--trp-orange); }

.trp-timeline__steps {
  position: absolute; left: 0; right: 0; bottom: calc(var(--trp-bottom-safe-area) + 48px);
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start;
}
.trp-timeline__step { max-width: 380px; }
.trp-timeline__step[data-step="1"] { justify-self: start;  text-align: left; }
.trp-timeline__step[data-step="2"] { justify-self: center; text-align: center; }
.trp-timeline__step[data-step="3"] { justify-self: end;    text-align: right; }
.trp-timeline__num {
  display: block; font-size: var(--trp-type-title); font-weight: var(--trp-weight-title);
  color: var(--trp-muted); margin-bottom: 12px; transition: color 0.35s ease;
}
.trp-timeline__step.is-active .trp-timeline__num { color: var(--trp-orange); }
.trp-timeline__step p {
  font-size: var(--trp-type-small-lg); line-height: 1.45; color: var(--trp-muted);
  transition: color 0.35s ease;
}
.trp-timeline__step.is-active p { color: var(--trp-gray-light); }

/* ============================ 12 · FIRST STEP ============================ */
.trp-first-step { z-index: var(--trp-z-content); background: var(--trp-black); }
.trp-first-step__pin {
  position: relative; height: 100vh;
  display: grid; place-items: center;
  padding-bottom: var(--trp-bottom-safe-area);
}
.trp-first-step__line {
  width: var(--trp-w-narrow); max-width: var(--trp-w-narrow-max);
  text-align: center;
  font-size: var(--trp-type-h2); font-weight: var(--trp-weight-title); line-height: 1.3;
  letter-spacing: var(--trp-track-tight); color: var(--trp-white);
}

/* ============================ 13 · EYE / CHALLENGE ============================ */
.trp-eye { z-index: var(--trp-z-content); background: var(--trp-black); }
.trp-eye__pin { position: relative; height: 100vh; overflow: hidden; }
.trp-eye__media { position: absolute; inset: 0; overflow: hidden; }
.trp-eye__media picture { display: contents; }
.trp-eye__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: var(--trp-eye-origin-x) var(--trp-eye-origin-y);
  transform: scale(14);
  filter: contrast(1.05) brightness(0.96);
}
/* guarantees the first frame reads as pure black regardless of pupil precision */
.trp-eye__veil { position: absolute; inset: 0; z-index: var(--trp-z-media); background: #000; pointer-events: none; }
.trp-eye__content {
  position: absolute; inset: 0; z-index: var(--trp-z-sticky);
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max);
  margin-inline: auto;
}
.trp-eye__title {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--trp-type-h1); font-weight: var(--trp-weight-title); letter-spacing: var(--trp-track-tight);
}
.trp-eye__aside {
  /* fixed width so both blocks share the same left edge (they're both right:0) */
  position: absolute; right: 0; width: min(30vw, 440px);
  font-size: var(--trp-type-title); font-weight: var(--trp-weight-base); line-height: 1.3;
}
.trp-eye__aside--top { top: 18vh; }
.trp-eye__aside--bottom { bottom: calc(var(--trp-bottom-safe-area) + 14vh); }

/* ============================ 14 · BUILDING ============================ */
.trp-building { z-index: var(--trp-z-content); background: var(--trp-black); overflow: hidden; }
.trp-building__pin {
  position: relative; height: 100vh;
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max);
  margin-inline: auto;
}
.trp-building__glow {
  /* gradiente.webp — the whole circle stays inside the section, bottom-right */
  position: absolute; right: 2%; bottom: 12vh;
  width: 40%; max-width: 680px; height: auto;
  opacity: 1; pointer-events: none;
  mix-blend-mode: screen;
}
.trp-building__cards {
  position: absolute; top: 13vh; left: 0; right: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px;
}
.trp-building__card {
  position: relative; z-index: 0;
  height: 54vh; min-height: 440px;
  padding: 34px 24px 30px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #17171a 0%, #0d0d0f 100%);
}
/* the drop line runs from above the card down INTO it, on top of the card */
.trp-building__drop {
  position: absolute; top: -13vh; left: 24px; width: 1px; height: 26vh;
  background: var(--trp-orange); transform: scaleY(0); transform-origin: top center;
  z-index: 4;
}
.trp-building__num {
  display: block; margin-top: auto; margin-bottom: 14px;
  font-size: clamp(2rem, 0.8rem + 1.9vw, 3.5rem); /* 56 @1920 */
  font-weight: var(--trp-weight-title); line-height: 1; color: var(--trp-white);
  position: relative; z-index: 1;
}
.trp-building__text {
  font-size: var(--trp-type-small-lg); line-height: 1.4; color: var(--trp-gray-light);
  position: relative; z-index: 1;
}
.trp-building__word {
  position: absolute; left: -0.06em; bottom: var(--trp-bottom-safe-area);
  font-size: var(--trp-type-display-xxl); font-weight: var(--trp-weight-title); line-height: 0.8;
  letter-spacing: -0.03em; white-space: nowrap; z-index: 2;
}

/* ============================ 15 · APPROACH (07 · como atuamos) ============================ */
/* the 5‑step path. Echoes the section‑02 timeline's square‑node language, but as
   the positive counterpart: perspective rays fan from the first step toward the
   result (the glow). Sits between construímos and metodologia — plain scroll. */
.trp-approach { z-index: var(--trp-z-content); background: var(--trp-black); overflow: hidden; }
.trp-approach__pin {
  position: relative; height: 100vh;
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max);
  margin-inline: auto;
}
.trp-approach__glow {
  /* the outcome — gradiente.webp, large on the right where the rays converge,
     bleeding off the edge; `screen` drops its dark side so only the light shows */
  position: absolute; right: -12%; top: 50%; transform: translateY(-50%);
  width: 54%; max-width: 1000px; height: auto;
  opacity: 1; pointer-events: none; mix-blend-mode: screen;
  z-index: 0;
}
.trp-approach__title {
  position: absolute; top: 12vh; left: 0; z-index: 3;
  font-size: var(--trp-type-display-xl); line-height: 1.02;
  letter-spacing: var(--trp-track-tight);
}
.trp-approach__title > span { display: block; }
.trp-approach__k { font-weight: var(--trp-weight-title); }   /* Sora Thin */
.trp-approach__v { font-weight: 400; }                       /* +300 over the context, like the draft */

.trp-approach__lines {
  width: 100%; height: 100%; object-fit: fill;
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
.trp-approach__guide { fill: none; stroke: var(--trp-line); stroke-width: 1; }
.trp-approach__ray   { fill: none; stroke: var(--trp-orange); stroke-width: 1.5; }

.trp-approach__steps { position: absolute; inset: 0; z-index: 2; }
.trp-approach__step { position: absolute; top: 0; width: 19%; }
.trp-approach__step[data-step="1"] { left: 3%; }
.trp-approach__step[data-step="2"] { left: 21%; }
.trp-approach__step[data-step="3"] { left: 39%; }
.trp-approach__step[data-step="4"] { left: 57%; }
.trp-approach__step[data-step="5"] { left: 74.5%; }

.trp-approach__node {
  position: absolute; top: 46.8vh; left: 0;
  width: 14px; height: 14px;
  background: var(--trp-gray-dark); outline: 1px solid var(--trp-line);
  transition: background-color 0.4s ease, outline-color 0.4s ease;
}
.trp-approach__step.is-active .trp-approach__node { background: var(--trp-orange); outline-color: var(--trp-orange); }

.trp-approach__stem {
  position: absolute; top: calc(46.8vh + 14px); left: 6px;
  width: 1px; height: 25vh;
  background: var(--trp-orange);
  transform: scaleY(0); transform-origin: top center;
}

.trp-approach__label { position: absolute; top: calc(46.8vh + 14px + 25vh + 26px); left: 0; max-width: 220px; }
.trp-approach__num {
  display: block; font-size: var(--trp-type-title); font-weight: var(--trp-weight-title);
  line-height: 1; color: var(--trp-muted); margin-bottom: 12px;
  transition: color 0.4s ease;
}
.trp-approach__step.is-active .trp-approach__num { color: var(--trp-orange); }
.trp-approach__label p {
  font-size: var(--trp-type-small-lg); line-height: 1.35; color: var(--trp-muted);
  transition: color 0.4s ease;
}
.trp-approach__step.is-active .trp-approach__label p { color: var(--trp-gray-light); }

/* ============================ 16 · METHODOLOGY ============================ */
.trp-methodology { z-index: var(--trp-z-content); background: var(--trp-black); overflow: hidden; }
.trp-methodology__pin {
  position: relative; height: 100vh;
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max);
  margin-inline: auto;
  padding-top: 9vh;
}
.trp-methodology__glow {
  /* glow-sphere.webp — a wash pushed high into the top‑left corner so the bright
     core sits above the title and only the falloff bleeds over the content */
  position: absolute; left: -16%; top: -48%;
  width: 46%; max-width: 720px; height: auto;
  opacity: 1; pointer-events: none;
  mix-blend-mode: screen;
}
.trp-methodology__title { font-size: var(--trp-type-display-xl); font-weight: var(--trp-weight-title); letter-spacing: var(--trp-track-tight); }

/* the three phases bracket their node ranges in the diagram below:
   fase 1 = items 01–03 · fase 2 = 04–09 · fase 3 = 10–11.
   Each block is positioned + widthed (% of the map, which shares this width) to
   its span; a ⊓ bracket at the foot points down at the nodes. */
.trp-methodology__phases {
  position: relative; min-height: 148px;
  /* phases sit just under the title; the diagram is pushed down by .trp-map's
     own margin so the two aren't glued together */
  margin: clamp(28px, 5vh, 56px) 0 0;
}
.trp-methodology__phase { position: absolute; bottom: 0; padding-bottom: 16px; }
.trp-methodology__phase[data-phase="1"] { left: 1%;  width: 15%; }
.trp-methodology__phase[data-phase="2"] { left: 21%; width: 52%; }
.trp-methodology__phase[data-phase="3"] { left: 75%; width: 24.5%; }
/* ⊓ bracket at the foot — spans the phase's node range, legs point down */
.trp-methodology__phase::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  border: 1px solid var(--trp-line-solid); border-bottom: 0;
}

.trp-phase__k { display: block; font-size: var(--trp-type-small); font-weight: 500; letter-spacing: 0.06em; margin-bottom: 8px; color: var(--trp-gray-light); }
/* wraps inside its (sometimes narrow) bracket rather than bleeding into the next
   phase — fase 1's box is only ~15% wide, so on smaller screens its copy stacks
   to 2–3 lines instead of colliding with fase 2 */
.trp-methodology__phase p { font-size: var(--trp-type-small-lg); line-height: 1.3; color: var(--trp-gray-light); text-wrap: pretty; }
.trp-phase__tag { display: block; margin-top: 8px; font-size: var(--trp-type-caption); letter-spacing: 0.28em; color: var(--trp-muted); text-transform: uppercase; }

/* the diagram fills the 90% content width; heavier lines + larger labels.
   Numbers are right‑anchored (x=44) and labels left‑anchored (x=60) → the gap
   between number and text is constant regardless of the number's width.
   `dominant-baseline: central` centres every line on its y, so a 1‑, 2‑ or
   3‑line label always sits centred on its number. Connector lines are solid. */
.trp-map__wrap { width: 100%; }
.trp-map { width: 100%; max-width: var(--trp-w-wide-max); height: auto; margin: clamp(36px, 10vh, 112px) auto 0; color: var(--trp-line-solid); overflow: visible; }
.trp-map__links path { stroke: var(--trp-line-solid); stroke-width: 2.5; }
.trp-node__n { font-size: 40px; font-weight: var(--trp-weight-title); fill: var(--trp-orange); text-anchor: end; dominant-baseline: central; }
.trp-node__l { font-size: 23px; font-weight: var(--trp-weight-base); fill: var(--trp-gray-light); text-anchor: start; dominant-baseline: central; }
.trp-node__s { font-size: 16px; font-weight: var(--trp-weight-base); fill: var(--trp-muted); text-anchor: start; dominant-baseline: central; }

/* the portrait, phase‑segmented diagram — FLAT only (shown in band 20) */
.trp-methodology__stack { display: none; }

/* ============================ 16 · COMPANIES ============================ */
/* plain white — no gradient ramp between sections. Layout matches the reference:
   row 1 has 6 logos, rows 2 & 3 have 7, every row centred. */
.trp-companies { position: relative; z-index: var(--trp-z-content); background: var(--trp-white); color: var(--trp-black); }
.trp-companies__inner {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  width: var(--trp-w-wide); max-width: var(--trp-w-wide-max); margin-inline: auto;
  padding: 16vh 0 calc(var(--trp-bottom-safe-area) + 70px);
}
.trp-companies__title {
  font-size: var(--trp-type-h1); font-weight: var(--trp-weight-title); color: var(--trp-black);
  letter-spacing: var(--trp-track-tight); text-align: center; margin-bottom: 12vh;
}
.trp-companies__grid {
  display: flex; flex-direction: column; align-items: center;
  gap: 9vh; width: 100%; max-width: 1400px;
}
.trp-companies__row {
  display: flex; align-items: center; justify-content: center;
  gap: 56px; width: 100%;
}
.trp-companies__logo {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.trp-companies__logo img {
  width: auto; max-width: 100%; height: 64px; object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(var(--trp-logo-scale, 1)); transform-origin: center;
}
.trp-companies__logo--edgefy img { height: 42px; mix-blend-mode: normal; }

/* Optical correction for the uneven white canvas baked into the supplied JPGs.
   These values normalize the visible artwork, not the source image rectangle. */
.trp-companies__logo img[alt="Tirolez"]          { --trp-logo-scale: 1.05; }
.trp-companies__logo img[alt="Plasmódia"]        { --trp-logo-scale: 0.78; }
.trp-companies__logo img[alt="Oscar Flues"]      { --trp-logo-scale: 0.82; }
.trp-companies__logo img[alt="Passos Mágicos"]   { --trp-logo-scale: 0.82; }
.trp-companies__logo img[alt="green4T"]           { --trp-logo-scale: 0.70; }
.trp-companies__logo img[alt="Cavalera"]          { --trp-logo-scale: 1.10; }
.trp-companies__logo img[alt="touché bebê"]       { --trp-logo-scale: 1.85; }
.trp-companies__logo img[alt="Rivera"]            { --trp-logo-scale: 2.70; }
.trp-companies__logo img[alt="Flexform"]          { --trp-logo-scale: 2.50; }
.trp-companies__logo img[alt="Edgefy"]            { --trp-logo-scale: 0.85; }
.trp-companies__logo img[alt="P&G"]               { --trp-logo-scale: 1.20; }
.trp-companies__logo img[alt="Always"]            { --trp-logo-scale: 0.85; }
.trp-companies__logo img[alt="Gillette"]          { --trp-logo-scale: 1.90; }
.trp-companies__logo img[alt="Pantene"]           { --trp-logo-scale: 2.10; }
.trp-companies__logo img[alt="Head & Shoulders"]  { --trp-logo-scale: 1.40; }
.trp-companies__logo img[alt="Ariel"]             { --trp-logo-scale: 0.95; }
.trp-companies__logo img[alt="Downy"]             { --trp-logo-scale: 1.25; }
.trp-companies__logo img[alt="Pampers"]           { --trp-logo-scale: 0.78; }

/* ============================ 17 · CLOSING (10 · encerramento) ============================ */
/* the page's last word — a full‑bleed orange field, a monumental "t" bleeding
   off the left, and the closing statement. */
.trp-closing {
  position: relative; z-index: var(--trp-z-content);
  overflow: hidden;
  background: #050302;
}
.trp-closing__pin {
  position: relative; height: 100vh; width: 100%;
  background:
    radial-gradient(155% 140% at -6% 106%,
      #ffa24c 0%, #f2701f 21%, #cf4d10 39%, #92370c 55%, #52240a 71%, #1b0c05 87%, #050302 100%);
}
.trp-closing__mark {
  position: absolute; left: 4%; top: 3vh;
  height: calc(100vh - var(--trp-bottom-safe-area) - 6vh); width: auto;
  color: #000; opacity: 1; pointer-events: none;
  z-index: 1;
}

.trp-closing__content {
  position: absolute; z-index: 3;
  left: 45%; right: var(--trp-gutter);
  bottom: calc(var(--trp-bottom-safe-area) + 4vh);
  color: var(--trp-white);
}
.trp-closing__kicker {
  font-size: clamp(1.2rem, 0.7rem + 1vw, 1.75rem);
  font-weight: 500; line-height: 1.35; letter-spacing: var(--trp-track-tight);
  margin-bottom: clamp(20px, 3.5vh, 40px);
}
.trp-closing__kicker > span { display: block; }
.trp-closing__title {
  font-size: clamp(2.4rem, 1rem + 3.5vw, 4.6rem);
  font-weight: var(--trp-weight-title); line-height: 1.14;
  letter-spacing: var(--trp-track-tight);
}
.trp-closing__title > span { display: block; }

/* ============================ 18 · CONTACT FORM ============================ */
/* The gradient mirrors the lower edge of the closing scene, so both sections
   read as one continuous orange field. Fluent Forms is restyled here instead
   of inheriting its generic grey theme. */
.trp-contact {
  position: relative; z-index: var(--trp-z-content); isolation: isolate;
  margin-top: -1px;
  padding: clamp(72px, 12vh, 160px) 0 calc(var(--trp-bottom-safe-area) + clamp(64px, 10vh, 120px));
  background: radial-gradient(155% 140% at -6% -6%,
    #ffa24c 0%, #f2701f 21%, #cf4d10 39%, #92370c 55%, #52240a 71%, #1b0c05 87%, #050302 100%);
  color: var(--trp-white);
}
.trp-contact__inner {
  width: var(--trp-w-narrow); max-width: var(--trp-w-narrow-max); margin-inline: auto;
  padding: clamp(40px, 5vw, 68px);
  border: 1px solid rgba(255, 103, 0, 0.9);
  border-radius: 18px;
  background: rgba(25, 10, 4, 0.62);
  box-shadow: 0 26px 80px rgba(13, 4, 1, 0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.trp-contact__header { margin-bottom: clamp(28px, 4vh, 44px); }
.trp-contact__header h2 {
  color: var(--trp-white); font-size: clamp(2rem, 1.2rem + 2.3vw, 3.5rem);
  font-weight: var(--trp-weight-title); line-height: 1.1; letter-spacing: var(--trp-track-tight);
}
.trp-contact__header p {
  margin-top: 10px; color: rgba(255, 235, 225, 0.68);
  font-size: var(--trp-type-body); line-height: 1.45;
}

/* Fluent Forms — Tropus skin. Extra specificity intentionally wins over the
   plugin stylesheet, which is printed after this file by the isolated template. */
.trp-contact .fluentform,
.trp-contact .frm-fluent-form {
  color: var(--trp-white); font-family: var(--trp-font); font-weight: var(--trp-weight-base);
}
.trp-contact .fluentform .ff-t-container { gap: 20px; }
.trp-contact .fluentform .ff-t-cell { padding-inline: 0 !important; }
.trp-contact .fluentform .ff-el-group { margin-bottom: 20px; }
.trp-contact .fluentform .ff-el-input--label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.trp-contact .fluentform .ff-el-input--label label {
  color: var(--trp-white); font-size: var(--trp-type-body); font-weight: 400;
  line-height: 1.25; letter-spacing: var(--trp-track-tight);
}
.trp-contact .fluentform .ff-el-input--label .ff-el-required,
.trp-contact .fluentform .ff-el-input--label label::after { color: #160904; }
.trp-contact .fluentform .ff-el-form-control {
  width: 100%; min-height: 72px; padding: 18px 26px;
  border: 1px solid rgba(255, 103, 0, 0.72) !important;
  border-radius: 16px !important;
  background: rgba(32, 18, 12, 0.52) !important;
  color: var(--trp-white) !important;
  box-shadow: none !important;
  font-size: var(--trp-type-small-lg); font-weight: var(--trp-weight-base);
  line-height: 1.35; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.trp-contact .fluentform textarea.ff-el-form-control {
  min-height: clamp(140px, 18vh, 190px); resize: vertical;
}
.trp-contact .fluentform .ff-el-form-control::placeholder {
  color: rgba(255, 235, 225, 0.68) !important; opacity: 1;
}
.trp-contact .fluentform .ff-el-form-control:hover {
  border-color: var(--trp-orange) !important; background: rgba(45, 22, 13, 0.68) !important;
}
.trp-contact .fluentform .ff-el-form-control:focus {
  outline: none !important; border-color: var(--trp-orange) !important;
  background: rgba(45, 22, 13, 0.74) !important;
  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.16) !important;
}
.trp-contact .fluentform select.ff-el-form-control option { background: #160904; color: var(--trp-white); }
.trp-contact .fluentform input[type="checkbox"],
.trp-contact .fluentform input[type="radio"] { accent-color: var(--trp-black); }
.trp-contact .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: #160904 !important; box-shadow: 0 0 0 2px rgba(22, 9, 4, 0.38) !important;
}
.trp-contact .fluentform .text-danger,
.trp-contact .fluentform .error,
.trp-contact .fluentform .ff-el-is-error .text-danger { color: #160904 !important; font-weight: 500; }
.trp-contact .fluentform .ff-message-success {
  margin: 0; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 0; background: rgba(5, 3, 2, 0.82); color: var(--trp-white);
  box-shadow: none;
}
.trp-contact .fluentform .ff-btn-submit,
.trp-contact .fluentform button[type="submit"],
.trp-contact .fluentform input[type="submit"] {
  display: block; width: 100%; min-width: 0; min-height: 72px; padding: 15px 28px;
  border: 1px solid var(--trp-orange) !important; border-radius: 16px !important;
  background: linear-gradient(100deg, #ff7a18 0%, #e9500b 100%) !important; color: var(--trp-white) !important;
  box-shadow: none !important; opacity: 1 !important;
  font: 500 var(--trp-type-small-lg)/1 var(--trp-font); letter-spacing: 0.01em;
  cursor: pointer; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.trp-contact .fluentform .ff-btn-submit:hover,
.trp-contact .fluentform button[type="submit"]:hover,
.trp-contact .fluentform input[type="submit"]:hover {
  transform: translateY(-2px); background: linear-gradient(100deg, #ff8b35 0%, #f1641c 100%) !important; color: var(--trp-white) !important;
}
.trp-contact .fluentform .ff-btn-submit:focus-visible,
.trp-contact .fluentform button[type="submit"]:focus-visible,
.trp-contact .fluentform input[type="submit"]:focus-visible {
  outline: 2px solid var(--trp-white); outline-offset: 4px;
}

/* ============================ 19 · MOTION HELPERS ============================ */
/* (bands renumbered: closing 17; contact form 18; accessibility 20; responsive 21) */
/* progressive enhancement: hidden-initial states only when JS is available.
   [data-write] = an element whose text writes in with blur (see script.vibe-tropus-page.js writeIn) */
.vibe-tropus-page.js [data-write] { opacity: 0; }
/* scene = a section that appears/disappears with blur instead of scrolling */
.vibe-tropus-page.js [data-scene] { opacity: 0; }

/* failsafe: JS present but GSAP failed -> show everything, reel flows normally */
.vibe-tropus-page.js.no-gsap [data-write],
.vibe-tropus-page.js.no-gsap [data-scene] { opacity: 1 !important; filter: none !important; }
.vibe-tropus-page.js.no-gsap .trp-w-char,
.vibe-tropus-page.js.no-gsap .trp-w-word { opacity: 1 !important; filter: none !important; }
.vibe-tropus-page.js.no-gsap .trp-reel__stage { position: static; height: auto; overflow: visible; }
.vibe-tropus-page.js.no-gsap .trp-reel .trp-scene { position: relative; opacity: 1 !important; filter: none !important; }

/* SplitText write-in units */
.trp-w-char, .trp-w-word { display: inline-block; }
/* elements that carry explicit <span> lines stack them */
[data-write] > span { display: block; }

/* ============================ 20 · ACCESSIBILITY ============================ */
.vibe-tropus-page :focus-visible { outline: 2px solid var(--trp-orange); outline-offset: 3px; }

.trp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vibe-tropus-page.js [data-write],
  .vibe-tropus-page.js [data-scene] { opacity: 1 !important; filter: none !important; }
  .vibe-tropus-page.js .trp-w-char,
  .vibe-tropus-page.js .trp-w-word { opacity: 1 !important; filter: none !important; }
  /* reel collapses to normal vertical flow */
  .vibe-tropus-page.js .trp-reel { height: auto !important; }
  .vibe-tropus-page.js .trp-reel__stage { position: static; height: auto; overflow: visible; }
  .vibe-tropus-page.js .trp-reel .trp-scene { position: relative; height: auto; min-height: 100vh; opacity: 1 !important; filter: none !important; }
  .trp-eye__media img { transform: scale(1) !important; }
  .trp-eye__veil { opacity: 0 !important; }
  .trp-timeline__progress { transform: translateY(-50%) scaleX(1) !important; }
  .trp-timeline__step .trp-timeline__num,
  .trp-timeline__step p { color: var(--trp-gray-light) !important; }
  .trp-timeline__num { color: var(--trp-orange) !important; }
  .trp-building__drop { transform: scaleY(1) !important; }
  .trp-approach__stem { transform: scaleY(1) !important; }
  .trp-approach__step .trp-approach__node { background: var(--trp-orange) !important; outline-color: var(--trp-orange) !important; }
  .trp-approach__step .trp-approach__num { color: var(--trp-orange) !important; }
  .trp-approach__step .trp-approach__label p { color: var(--trp-gray-light) !important; }
  .trp-map__links path { stroke-dashoffset: 0 !important; }
}

/* ============================ 21 · RESPONSIVE — FLAT ============================ */
/* Phones + portrait tablets + any narrow/tall window. Un‑pin every scene, stack
   the landscape compositions vertically, drop the horizontal‑only devices
   (timeline rail, perspective rays, drop lines). Pairs with the matchMedia
   FLAT branch in script.vibe-tropus-page.js — the two queries are complements. */
@media (max-width: 999px), (max-aspect-ratio: 12/10) {

  /* ---- globals ---- */
  .vibe-tropus-page { --trp-bottom-safe-area: clamp(56px, 7vh, 84px); }
  section { min-height: 0; }
  body { overflow-x: hidden; }

  /* reel + every pinned inner → a padded flow block */
  .trp-reel { background: transparent; }
  .trp-reel__stage { position: static; height: auto; overflow: visible; }
  .trp-reel .trp-scene { position: relative; inset: auto; height: auto; min-height: 0; }
  .vibe-tropus-page.js .trp-reel .trp-scene { will-change: auto; }
  .vibe-tropus-page.js [data-scene] { opacity: 1; }

  .trp-hero__inner,
  .trp-timeline__pin, .trp-first-step__pin, .trp-eye__pin,
  .trp-building__pin, .trp-approach__pin, .trp-methodology__pin {
    position: relative; height: auto; width: auto; max-width: none;
    display: block; margin: 0;
    padding: clamp(48px, 8vh, 76px) var(--trp-gutter) clamp(36px, 6vh, 60px);
  }

  /* ---- 10 · HERO → editorial collage, scaled to portrait ----
     line 1 with the eye photo to its right · a gap holding the orange
     waveform on the left · line 2 beside it. Figures are positioned
     against .trp-hero__inner (already position:relative above). */
  .trp-hero__inner {
    overflow: hidden;
    --hero-pad-top: clamp(104px, 17vh, 150px);   /* the H1 needs air under the logo */
    padding-top: var(--hero-pad-top);
  }
  .trp-hero__title {
    position: static; inset: auto; z-index: 2;
    width: auto; margin-left: 0;
    font-size: clamp(1.85rem, 1rem + 3.5vw, 3rem); font-weight: 200; line-height: 1.14;
  }
  /* nbsp in the markup forces "da estratégia" / "à ação" — keep the box wide */
  .trp-hero__title > span { display: block; white-space: normal; max-width: 60%; }
  .trp-hero__title > span:nth-child(2) {
    margin-left: 40%; max-width: 58%; margin-top: clamp(38px, 7vh, 62px);
  }

  .trp-hero__media { display: block; position: absolute; inset: auto; z-index: 1; overflow: hidden; }
  .trp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
  /* eye tucks in right after line 1 · wave right before line 2 — tight columns */
  .trp-hero__media--eye {
    top: var(--hero-pad-top); left: 58%; right: auto;
    width: 42%; height: clamp(66px, 13vw, 96px);
  }
  .trp-hero__media--wave {
    left: 0; right: auto;
    top: calc(var(--hero-pad-top) + clamp(100px, 18vh, 130px));
    width: 38%; height: clamp(56px, 11vw, 82px);
  }

  .trp-hero__lead { position: static; inset: auto; width: auto; margin-top: clamp(24px, 4.5vh, 40px); }
  .trp-hero__lead--left  { font-size: var(--trp-type-h2); }
  .trp-hero__lead--right { font-size: var(--trp-type-body); }

  /* section titles all ride at the "construímos" scale on mobile
     (timeline is the exception — its headline is a full sentence) */
  .trp-eye__title,
  .trp-approach__title,
  .trp-methodology__title,
  .trp-companies__title,
  .trp-building__word {
    font-size: clamp(3rem, 15vw, 4.5rem);
    line-height: 1.05; letter-spacing: var(--trp-track-tight);
  }
  .trp-timeline__title {
    font-size: clamp(2.1rem, 1rem + 3vw, 2.7rem);
    line-height: 1.16; letter-spacing: var(--trp-track-tight);
  }

  /* ---- 11 · TIMELINE → vertical list ---- */
  /* a hairline marks the seam between the hero and the timeline */
  .trp-timeline__pin::before {
    content: ""; position: absolute; top: 0; left: var(--trp-gutter); right: var(--trp-gutter);
    height: 1px; background: #323232;
  }
  .trp-timeline__pin { padding-bottom: clamp(14px, 2.5vh, 24px); }   /* first‑step hugs this */
  .trp-timeline__title { position: static; transform: none; text-align: left; }
  .trp-timeline__title span { display: inline; white-space: normal; }
  .trp-timeline__track { display: none; }
  .trp-timeline__steps {
    position: relative; inset: auto; display: flex; flex-direction: column;
    gap: clamp(24px, 4vh, 40px); margin-top: clamp(28px, 5vh, 48px);
  }
  .trp-timeline__step,
  .trp-approach__step {
    position: relative; max-width: none;
    justify-self: stretch !important; text-align: left !important;
    padding-left: 26px;
  }
  /* one unbroken rail behind the whole list, ending at the last marker */
  .trp-timeline__steps::before,
  .trp-approach__steps::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 0;
    width: 1px; background: var(--trp-line);
  }
  .trp-timeline__step:last-child::after,
  .trp-approach__step:last-child::after {
    content: ""; position: absolute; left: -3px; top: 24px; bottom: -32px;
    width: 5px; background: var(--trp-black);
  }
  /* timeline: marker is a pseudo (its real squares live in the hidden rail) */
  .trp-timeline__step::before {
    content: ""; position: absolute; left: -6px; top: 7px;
    width: 13px; height: 13px; background: var(--trp-orange); outline: 1px solid var(--trp-orange);
  }
  .trp-timeline__step .trp-timeline__num,
  .trp-approach__step .trp-approach__num {
    color: var(--trp-orange); font-weight: 400; font-size: var(--trp-type-title-lg);
  }
  .trp-timeline__step p,
  .trp-approach__step .trp-approach__label p { color: var(--trp-gray-light); }

  /* ---- 12 · FIRST STEP → hugs the timeline above, breathes below ---- */
  .trp-first-step__pin {
    display: block; place-items: initial;
    padding-top: clamp(10px, 2vh, 20px);
    padding-bottom: clamp(84px, 15vh, 140px);
  }
  .trp-first-step__line { width: auto; max-width: none; text-align: left; font-size: var(--trp-type-h2); line-height: 1.3; }

  /* ---- 13 · EYE / o desafio ---- */
  .trp-eye__pin { overflow: visible; padding: 0; }
  .trp-eye__media { position: relative; inset: auto; width: 100%; height: clamp(240px, 42vh, 420px); }
  .trp-eye__media img { position: absolute; transform: none !important; filter: contrast(1.04) brightness(0.9); }
  .trp-eye__veil { display: none; }
  .trp-eye__content {
    position: static; width: auto; max-width: none; margin: 0;
    padding: clamp(64px, 10vh, 96px) var(--trp-gutter) clamp(56px, 11vh, 104px);
  }
  .trp-eye__title { position: static; transform: none; }
  .trp-eye__aside {
    position: static; inset: auto; right: auto; width: auto; max-width: none;
    margin-top: clamp(18px, 3.4vh, 30px); font-size: var(--trp-type-title-lg);
  }

  /* ---- 14 · BUILDING → "construímos" heads the section, then the cards ---- */
  .trp-building__pin { display: flex; flex-direction: column; }
  .trp-building__glow { top: 2%; right: -14%; bottom: auto; width: clamp(280px, 70vw, 480px); }
  .trp-building__cards { position: static; inset: auto; display: flex; flex-direction: column; gap: 12px; order: 2; }
  .trp-building__card { height: auto; min-height: 0; padding: clamp(22px, 5vw, 34px); }
  .trp-building__drop { display: none; }
  .trp-building__num { margin-top: 0; margin-bottom: 8px; }
  .trp-building__text { font-size: var(--trp-type-body); }
  .trp-building__word {
    position: static; left: auto; bottom: auto; white-space: normal;
    display: block; order: 1; margin: 0 0 clamp(24px, 5vh, 44px); line-height: 0.92;
  }

  /* ---- 15 · APPROACH → vertical list ---- */
  .trp-approach { overflow: hidden; }
  .trp-approach__glow { top: 2%; right: -20%; transform: none; width: clamp(260px, 66vw, 440px); opacity: 0.8; }
  .trp-approach__title { position: static; }
  .trp-approach__lines { display: none; }
  .trp-approach__steps {
    position: relative; inset: auto; display: flex; flex-direction: column;
    gap: clamp(24px, 4vh, 40px); margin-top: clamp(28px, 5vh, 48px);
  }
  .trp-approach__step { left: auto !important; width: auto; }
  .trp-approach__node {
    position: absolute; top: 7px; left: -6px;
    width: 13px; height: 13px;
    background: var(--trp-orange); outline-color: var(--trp-orange);
  }
  .trp-approach__stem { display: none; }
  .trp-approach__label { position: static; inset: auto; max-width: none; margin-top: 4px; }

  /* ---- 16 · METHODOLOGY → phase‑segmented portrait stacks ---- */
  /* glow fully inside the section (the pin clips overflow) — no hard edge */
  .trp-methodology__glow { top: 0; left: 1%; width: clamp(190px, 44vw, 300px); }
  /* the desktop row of phase labels + the one wide diagram are both replaced */
  .trp-methodology__phases,
  .trp-map__wrap { display: none; }

  .trp-methodology__stack { display: block; margin-top: clamp(24px, 5vh, 40px); }
  .trp-mstage + .trp-mstage { margin-top: clamp(44px, 8vh, 76px); }
  .trp-mstage > p {
    font-size: var(--trp-type-small-lg); line-height: 1.2; color: var(--trp-gray-light);
    margin: 4px 0 0; max-width: 32ch;
  }
  .trp-mstage > .trp-phase__tag { margin-top: 8px; }
  .trp-mstage__bracket {
    display: block; height: 8px; margin-top: 16px;
    border: 1px solid var(--trp-line-solid); border-bottom: 0;
  }
  .trp-mmap {
    display: block; width: 100%; height: auto; overflow: visible;
    margin: clamp(24px, 5vh, 40px) auto 0; color: var(--trp-line-solid);
  }
  .trp-mstage[data-phase="1"] .trp-mmap,
  .trp-mstage[data-phase="3"] .trp-mmap { max-width: 300px; }
  .trp-mstage[data-phase="2"] .trp-mmap { max-width: 360px; }
  .trp-mmap__lnk path { fill: none; stroke: var(--trp-line-solid); stroke-width: 2; }
  .trp-mmap__n { font-size: 28px; font-weight: 500; fill: var(--trp-orange); dominant-baseline: central; }
  .trp-mmap__l { font-size: 16px; font-weight: 400; fill: var(--trp-gray-light); dominant-baseline: central; }
  .trp-mmap__s { font-size: 13px; font-weight: 400; fill: var(--trp-muted); dominant-baseline: central; }
  /* every fragment stacks number-over-label, centred on its column */
  .trp-mmap--ctr text { text-anchor: middle; }

  /* ---- 17 · COMPANIES ---- */
  .trp-companies__inner {
    min-height: 0; width: auto; max-width: none;
    padding: clamp(56px, 10vh, 88px) var(--trp-gutter) clamp(44px, 8vh, 72px);
  }
  .trp-companies__title { margin-bottom: clamp(32px, 6vh, 56px); }
  .trp-companies__grid { gap: clamp(22px, 4vh, 40px); max-width: none; }
  .trp-companies__row { flex-wrap: wrap; gap: clamp(20px, 5vw, 36px) clamp(14px, 3vw, 24px); }
  /* every logo gets the same box + object-fit: contain — square marks and wide
     wordmarks then read at a comparable weight instead of wildly different sizes */
  .trp-companies__logo { flex: 0 0 calc(33.333% - 16px); aspect-ratio: 9 / 4; }
  .trp-companies__logo img {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    object-fit: contain;
  }
  .trp-companies__logo--edgefy img { padding: 12% 0; }

  /* ---- 17 · CLOSING → copy up top in clean space, the "t" closes the page ---- */
  .trp-closing__pin {
    height: auto; min-height: 100vh; display: flex; flex-direction: column;
    padding: clamp(56px, 11vh, 96px) var(--trp-gutter) calc(var(--trp-bottom-safe-area) + 16px);
    /* re‑aimed so the top (now holding the copy) is dark and legible,
       the glow blooms up from the bottom behind the "t" */
    background: radial-gradient(125% 88% at 50% 116%,
      #ffa24c 0%, #f2701f 19%, #cf4d10 36%, #92370c 53%, #52240a 71%, #1b0c05 88%, #120601 100%);
  }
  .trp-closing__content {
    position: static; inset: auto; left: auto; right: auto; width: auto;
    order: 1; z-index: 2;
  }
  .trp-closing__kicker { margin-bottom: clamp(16px, 2.6vh, 28px); }
  .trp-closing__mark {
    position: relative; inset: auto; order: 2;
    margin: clamp(48px, 8vh, 88px) 0 0 -6%;
    width: 86%; height: auto; opacity: 0.92;
    align-self: flex-start;
  }

  /* ---- 18 · CONTACT → continue the closing glow into the form ---- */
  .trp-contact {
    padding: clamp(56px, 9vh, 88px) 0 calc(var(--trp-bottom-safe-area) + clamp(48px, 8vh, 80px));
    background: radial-gradient(125% 88% at 50% -16%,
      #ffa24c 0%, #f2701f 19%, #cf4d10 36%, #92370c 53%, #52240a 71%, #1b0c05 88%, #120601 100%);
  }
  .trp-contact__inner {
    width: auto; max-width: none; margin-inline: var(--trp-gutter);
    padding: clamp(28px, 7vw, 44px) clamp(20px, 6vw, 34px);
    border-radius: 16px;
  }
  .trp-contact__header h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .trp-contact__header p { font-size: var(--trp-type-small-lg); }
  .trp-contact .fluentform .ff-t-container { display: block; }
  .trp-contact .fluentform .ff-t-cell { width: 100%; padding: 0 !important; }
  .trp-contact .fluentform .ff-el-form-control { min-height: 56px; }
  .trp-contact .fluentform .ff-btn-submit,
  .trp-contact .fluentform button[type="submit"],
  .trp-contact .fluentform input[type="submit"] { width: 100%; min-width: 0; }

  /* ---- 07 · HEADER ---- */
  .trp-header { height: 72px; background: var(--trp-black); }
  .trp-header__logo { top: 16px; }
  .trp-logo { width: clamp(96px, 24vw, 122px); }
  .trp-header__logo .trp-logo { filter: none !important; }
  .vibe-tropus-page.is-light-chrome .trp-header__logo .trp-logo,
  .vibe-tropus-page.is-light-chrome .trp-header__logo .trp-logo path,
  .vibe-tropus-page.is-light-chrome .trp-header__logo .trp-logo polygon { fill: var(--trp-white); }
  .trp-header__cta { top: 16px; }
  .trp-header__cta .trp-btn {
    gap: 0.35em; padding: 12px 10px;
    font-size: clamp(0.7rem, 2.7vw, 0.875rem);
  }

  /* ---- 09 · BOTTOM NAV → not shown on mobile (just scroll) ---- */
  .trp-nav { display: none; }

  /* ---- 08 · BOTTOM BLUR ---- */
  .trp-blur { height: clamp(56px, 7vh, 84px); }
}

/* ---- phones: tighten further ---- */
@media (max-width: 599px) {
  .trp-companies__logo { flex-basis: calc(50% - 12px); }
  .trp-eye__aside { font-size: var(--trp-type-title); }
}