/* IA LIVE LAB® — TRESSDE
   Warm studio page: ivory canvas, no boxed cards — media sits directly on the page
   with 8px corners, Manrope sans throughout. Plain CSS, no dependencies.
   Media rule: every image/video keeps its intrinsic ratio (width: 100%; height: auto). */

:root {
  --ivory: #f3f0e8;
  --cream: #ebe6da;
  --paper: #faf8f3;
  --blue: #a8c4e6;
  --ink: #232521;
  --ink-soft: #4d4f49;
  --muted: #74756e;
  --line: rgba(35, 37, 33, 0.14);

  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Typography: shared semantic scale, without letter spacing. */
  --text-caption: 12px;
  --text-label: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-subtitle: 20px;
  --text-heading: clamp(30px, 3vw, 40px);
  --text-display: clamp(40px, 3.4vw, 56px);
  --text-statement: clamp(28px, 3.3vw, 48px);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --leading-label: 1.3;

  --max: 1240px;
  --gutter: 28px;
  --r: 8px;
  --r-button: 999px;                  /* single radius for every non-circular surface */

  /* Spacing scale — reused for every structural gap; one-off optical offsets stay literal */
  --space-xs: 8px;                    /* caption under media */
  --space-sm: 12px;
  --space-md: 16px;                   /* toolbar above/below media */
  --space-lg: 24px;
  --space-xl: 32px;
  --space-section: 80px;              /* top padding of every section */
  --space-head: 32px;                 /* section heading → its media */
  --gap-gallery: 16px;                /* between images in a strip / grid */
  --gap-layout: 32px;                 /* between layout columns */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Intrinsic media everywhere — no forced ratios, crops or transforms */
img, video { display: block; width: 100%; height: auto; max-width: 100%; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.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;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--ivory); padding: 10px 16px; border-radius: var(--r);
  font-size: var(--text-label); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Visual sections: media runs fluid across the viewport (gutters only);
   their headings and controls keep the reading width. */
.wrap--wide { max-width: none; }
.wrap--wide > .section__head,
.wrap--wide > .tabs { max-width: var(--max); margin-inline: auto; }
/* Captação: generous width with a modest outer margin on large screens. */
#captacao.wrap { max-width: calc(1720px + 2 * var(--gutter)); }

.eyebrow { font-size: var(--text-caption); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--ink-soft); }

/* ── Buttons ── */
.dark-pill, .nav__cta {
  font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--ivory); border: 0; border-radius: var(--r-button); cursor: pointer;
  padding: 14px 26px; font-size: var(--text-body); text-decoration: none;
  transition: background-color .2s ease;
}
.dark-pill:hover, .nav__cta:hover { background: #000; }

.play-pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--blue); color: var(--ink); border: 0; border-radius: var(--r-button); cursor: pointer;
  padding: 8px 24px 8px 8px; font-size: var(--text-body);
  transition: background-color .2s ease;
}
.play-pill:hover { background: #98b8de; }
.play-pill__icon {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink); position: relative; flex: none;
}
.play-pill__icon::before {
  content: ""; position: absolute; left: 16px; top: 14px;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ivory);
}

/* ── Navigation dock: lives in the hero's grid cell and is sticky only within the hero ── */
.dock {
  grid-area: 1 / 1; align-self: end;
  position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 16px;
}
/* Light floating toolbar: near-white glass, hairline border, soft shadow */
.dock__inner {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 18px;
  background: rgba(250, 248, 243, 0.88);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(35, 37, 33, 0.08); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(35, 37, 33, 0.08), 0 1px 2px rgba(35, 37, 33, 0.06);
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--text-label); font-weight: var(--weight-bold); text-decoration: none;
}
.brand--sm { font-size: var(--text-caption); min-height: 0; }
.dock .brand { font-size: var(--text-caption); color: var(--ink); }
/* short, quiet separator instead of a full-height rule */
.dock .brand::after {
  content: ""; width: 1px; height: 16px; margin-left: 18px; background: rgba(35, 37, 33, 0.14);
}

.nav { display: flex; align-items: center; gap: 10px; }
.nav__list { display: flex; gap: 2px; }
.nav__list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
  border-radius: var(--r-button);
  font-size: var(--text-label); font-weight: var(--weight-medium); text-decoration: none; color: var(--ink-soft); white-space: nowrap;
}
.nav__list a:hover { color: var(--ink); background: rgba(168, 196, 230, 0.32); }
.nav .nav__cta {
  min-height: 40px; padding: 0 18px; font-size: var(--text-label); font-weight: var(--weight-semibold); white-space: nowrap;
  background: var(--blue); color: var(--ink);
}
.nav .nav__cta:hover { background: #98b8de; }

.menu-toggle { display: none; }

@media (max-width: 920px) {
  .dock { width: auto; max-width: none; margin: 0 16px 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .dock__inner { justify-content: space-between; padding: 6px 6px 6px 16px; }
  .dock .brand::after { display: none; }
  .js .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
    background: var(--blue); color: var(--ink); border: 0; border-radius: var(--r-button);
    font-size: var(--text-label); font-weight: var(--weight-semibold); cursor: pointer;
  }
  .js .menu-toggle:hover { background: #98b8de; }
  /* Mobile menu opens above the dock within the full-height cover. */
  .js .nav {
    position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 8px;
    max-height: min(70svh, calc(100svh - 120px)); overflow-y: auto;
    background: rgba(250, 248, 243, 0.97); border: 1px solid rgba(35, 37, 33, 0.08); border-radius: var(--r);
    padding: 8px 12px 12px; box-shadow: 0 6px 20px rgba(35, 37, 33, 0.1);
  }
  .js .nav:not(.is-open) { display: none; }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__list a {
    display: flex; min-height: 48px; padding: 0 8px; font-size: var(--text-body); border-radius: 0;
    border-bottom: 1px solid rgba(35, 37, 33, 0.08);
  }
  .js .nav__list li:last-child a { border-bottom: 0; }
  .js .nav__list a:hover { background: none; color: var(--ink); }
  .js .nav .nav__cta { margin-top: 4px; min-height: 44px; font-size: var(--text-label); }

  /* Without JS the dock sits in flow just below the hero video */
  html:not(.js) .dock { position: static; grid-area: auto; margin: 16px; }
  html:not(.js) .dock__inner, html:not(.js) .nav, html:not(.js) .nav__list { flex-wrap: wrap; }
}

/* ── Hero: full viewport, video covers the canvas ── */
.hero { position: relative; display: grid; height: 100vh; height: 100dvh; background: var(--ink); }   /* no overflow clip: the dock must stay sticky */
.hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { /* flat scrim for title legibility */
  content: ""; position: absolute; inset: 0; background: rgba(24, 22, 18, 0.3); pointer-events: none;
}
.hero__title {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
  padding: 0 10%; text-align: center; pointer-events: none;
  font: 700 clamp(20px, 4.5vw, 80px)/1 var(--sans);
  color: var(--blue); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.2);
}
.hero__title > span { white-space: nowrap; }
.hero__title sup { display: inline-block; font-size: 0.72em; vertical-align: 0.18em; margin-left: 0.025em; }

/* ── Intro ── */
/* Extra breathing room between hero and Ambientes; the section owns the spacing */
.intro-section { padding-block: clamp(144px, 12vw, 208px); }
.intro { display: grid; justify-items: center; gap: 48px; padding-top: 0; text-align: center; }
.intro__text { max-width: 1100px; font-size: var(--text-statement); font-weight: var(--weight-regular); line-height: var(--leading-label); }
/* motion.js word reveal: inline-block so each word can rise; literal spaces stay as text between them */
.intro__word { display: inline-block; }

/* ── Method: three-step process, editorial columns with a thin top rule ── */
.method {
  width: 100%; max-width: 1100px; margin: 80px auto 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start;
}
.method li { display: grid; justify-items: start; text-align: left; }
.method__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); margin-bottom: var(--space-lg); }
.method__num { margin-bottom: 12px; font-size: var(--text-lead); font-weight: var(--weight-bold); line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.method__title { margin-bottom: 8px; font-size: var(--text-subtitle); font-weight: var(--weight-semibold); line-height: var(--leading-label); }
.method__text { font-size: var(--text-body); line-height: var(--leading-body); color: var(--muted); }

/* ── Sections ── */
.section { padding-top: var(--space-section); }
/* Shared section header: label | title | description. One layout for all sections. */
.section__head {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; justify-items: start;
  gap: var(--gap-layout); width: 100%; max-width: var(--max);
  margin: 0 auto var(--space-head); text-align: left;
}
.section__num { font-size: var(--text-label); font-weight: var(--weight-medium); line-height: var(--leading-label); color: var(--muted); }
.section__head h2 { width: 100%; container-type: inline-size; font-size: var(--text-heading); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
/* Explicit phrase breaks and column-aware sizing keep every heading to two complete lines. */
.section__head h2 > span { display: block; white-space: nowrap; font-size: min(var(--text-heading), 8.8cqw); }
.section__text { color: var(--ink-soft); max-width: 68ch; font-size: var(--text-lead); line-height: var(--leading-body); text-wrap: pretty; }

/* Original sheets placed directly on the page (their blue is part of the image) */
.sheet-panel img { border-radius: var(--r); }
.sheet-panel figcaption { margin-top: var(--space-xs); font-size: var(--text-label); color: var(--muted); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-gallery); }

/* Personagens: five exact Figma PNGs, one per horizontal slide, at their natural ratio (contain, no crop).
   Base (no JS / no GSAP): native horizontal scroll-snap strip, every sheet reachable.
   .is-enhanced — characters.js revealed the toolbar (labels move from captions to the toolbar) and sizes
                  each slide to its sheet, so slides are as wide as their image, not the viewport.
   .is-pinned   — GSAP ScrollTrigger pins .chars (not the section) and scrubs the track;
                  the stage is one viewport tall and the sheets fit between the heading and the toolbar.
   The toolbar follows the viewport in the DOM, so it sits under the sheets in every mode. */
#personagens .chars { --chars-media-max: calc(100vh - 200px); }
@supports (height: 100svh) { #personagens .chars { --chars-media-max: calc(100svh - 200px); } }
#personagens .chars__toolbar {
  max-width: var(--max); margin: var(--space-md) auto 0;
  display: flex; align-items: center; gap: var(--space-md);
}
#personagens .chars__label { font-size: var(--text-caption); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--muted); }
#personagens .chars__count { margin-left: auto; font-size: var(--text-label); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
#personagens .chars__arrows { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-button); background: rgba(35, 37, 33, 0.06); }
#personagens .chars__btn {
  width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
#personagens .chars__btn:hover { background: rgba(168, 196, 230, 0.38); }
#personagens .chars__btn[aria-disabled="true"] { opacity: 0.32; cursor: default; background: transparent; }
#personagens .chars__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#personagens .chars__viewport {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  border-radius: var(--r);
}
#personagens .chars__track { display: flex; gap: var(--gap-gallery); margin: 0; padding: 0; list-style: none; }
#personagens .chars__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
#personagens .chars__slide figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); height: 100%; }
/* contain: both limits on an intrinsic-ratio image, never a forced box */
#personagens .chars__slide img {
  flex: none; width: auto; height: auto; max-width: 100%; max-height: var(--chars-media-max);
  border-radius: var(--r);
}
#personagens .chars__slide figcaption { font-size: var(--text-caption); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--muted); }

/* JS: toolbar names the active sheet; captions stay for screen readers; arrows/swipe replace the scrollbar */
#personagens .chars.is-enhanced figcaption {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#personagens .chars.is-enhanced .chars__viewport { scrollbar-width: none; }
#personagens .chars.is-enhanced .chars__viewport::-webkit-scrollbar { display: none; }
/* JS: each slide is exactly its sheet — characters.js sizes every img in px from the available height
   and the image's own ratio (capped at the viewport width), so the track packs sheets with only the gap
   between them. Snap mirrors the JS positions: first start, middle centred, last end. */
#personagens .chars.is-enhanced .chars__track { position: relative; width: max-content; align-items: flex-start; }
#personagens .chars.is-enhanced:not(.is-pinned) .chars__track { max-height: var(--chars-media-max); } /* read by JS as the manual height */
#personagens .chars.is-enhanced .chars__slide { flex: 0 0 auto; position: relative; scroll-snap-align: center; }
#personagens .chars.is-enhanced .chars__slide:first-child { scroll-snap-align: start; }
#personagens .chars.is-enhanced .chars__slide:last-child { scroll-snap-align: end; }
#personagens .chars.is-enhanced .chars__slide figure { display: block; height: auto; margin: 0; }
#personagens .chars.is-enhanced .chars__slide img { max-width: none; max-height: none; }

/* Pinned (GSAP): one-viewport stage — heading, the sheet in the remaining height, toolbar under it.
   The viewport fills the 1fr row exactly (margins live in the auto rows), so characters.js reads its
   clientHeight as the sheet height. */
#personagens .chars.is-pinned {
  height: 100vh; height: 100svh; padding-block: var(--space-lg);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
#personagens .chars.is-pinned .chars__viewport { overflow: hidden; scroll-snap-type: none; }
#personagens .chars.is-pinned .chars__track { height: 100%; align-items: center; will-change: transform; }

/* ── Ambientes: three editorial boards built from the individual Figma assets ──
   12-column grid, explicit placement per board so no two boards share a layout.
   Images keep their intrinsic ratio; offsets come from margins, overlaps are kept
   to small layers (camera plan / materials) sitting over the hero edge. */
.envs { max-width: none; margin-inline: auto; display: grid; gap: clamp(96px, 10vw, 160px); }
.env {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-lg); row-gap: 0; align-items: start;
}
.env__head { display: flex; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-md); }
.env__num { font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--muted); }
.env__head h3 { font-size: var(--text-subtitle); font-weight: var(--weight-semibold); }
.env__item { position: relative; min-width: 0; }
.env__item img { border-radius: var(--r); }
.env__item figcaption { margin-top: var(--space-xs); font-size: var(--text-caption); color: var(--muted); }

@media (min-width: 901px) {
  /* Layered images get a thin ivory ring instead of a shadow to separate them from the hero */
  /* 01 Escritório — hero right, props anchored to its left edge, diagram over its lower corner */
  .env--office .env__head            { grid-column: 1 / 5;  grid-row: 1; }
  .env--office .env__item--props     { grid-column: 1 / 5;  grid-row: 2; align-self: end; }
  .env--office .env__item--hero      { grid-column: 5 / 13; grid-row: 2; }
  .env--office .env__item--materials { grid-column: 2 / 5;  grid-row: 3; margin-top: 40px; }
  .env--office .env__item--second    { grid-column: 5 / 10; grid-row: 3; margin-top: 56px; }
  .env--office .env__item--diagram   { grid-column: 10 / 13; grid-row: 3; margin-top: -64px; z-index: 1; }
  .env--office .env__item--diagram img { outline: 6px solid var(--ivory); }
  .env--office .env__item--detail    { grid-column: 1 / 4;  grid-row: 4; margin-top: 48px; }
  .env--office .env__item--reverse   { grid-column: 4 / 9;  grid-row: 4; margin-top: 104px; }
  .env--office .env__item--overhead  { grid-column: 9 / 13; grid-row: 4; margin-top: 32px; }

  /* 02 Beach Tennis — label right, hero centred with open space at the right edge */
  .env--beach .env__head            { grid-column: 10 / 13; grid-row: 1; }
  .env--beach .env__item--props     { grid-column: 1 / 4;  grid-row: 2; margin-top: 96px; }
  .env--beach .env__item--hero      { grid-column: 4 / 12; grid-row: 2; }
  .env--beach .env__item--second    { grid-column: 1 / 6;  grid-row: 3; margin-top: 40px; }
  .env--beach .env__item--diagram   { grid-column: 6 / 9;  grid-row: 3; margin-top: 128px; }
  .env--beach .env__item--materials { grid-column: 9 / 13; grid-row: 3; margin-top: -72px; z-index: 1; }
  .env--beach .env__item--materials img { outline: 6px solid var(--ivory); }
  .env--beach .env__item--overhead  { grid-column: 1 / 5;  grid-row: 4; margin-top: 96px; }
  .env--beach .env__item--reverse   { grid-column: 5 / 10; grid-row: 4; margin-top: 32px; }
  .env--beach .env__item--detail    { grid-column: 10 / 13; grid-row: 4; margin-top: 56px; }

  /* 03 Praia — materials beside the label, hero left-of-centre, props and plan stacked on its right */
  .env--praia .env__head            { grid-column: 2 / 6;  grid-row: 1; align-self: end; }
  .env--praia .env__item--materials { grid-column: 10 / 13; grid-row: 1; align-self: end; margin-bottom: 32px; }
  .env--praia .env__item--hero      { grid-column: 2 / 10; grid-row: 2; }
  .env--praia .env__item--props     { grid-column: 10 / 13; grid-row: 2; }
  .env--praia .env__item--diagram   { grid-column: 9 / 13; grid-row: 2; align-self: end; margin-bottom: -40px; z-index: 1; }
  .env--praia .env__item--diagram img { outline: 6px solid var(--ivory); }
  .env--praia .env__item--detail    { grid-column: 1 / 4;  grid-row: 3; margin-top: 64px; }
  .env--praia .env__item--second    { grid-column: 4 / 9;  grid-row: 3; margin-top: 112px; }
  .env--praia .env__item--reverse   { grid-column: 6 / 12; grid-row: 4; margin-top: 56px; }
  .env--praia .env__item--overhead  { grid-column: 1 / 5;  grid-row: 4; margin-top: 120px; }
}

/* Scroll-built boards (environments.js, desktop + motion only): .envs becomes one stage (16:9 at most,
   taller when the column is narrower) that fits the viewport and is pinned once; the three boards are
   layered inside it and swap in place. Each board is a constellation: eight small frames at their
   natural ratio around the perimeter and the label alone in the centre. Upper and side frames hang from
   --y, lower frames sit on --b, so the reserved centre (x 33–67%, y 40–62%) and the ~2.5% edge inset hold
   from 16:9 (where frames are tallest) to taller aspects. Without the classes (no JS, reduced motion,
   mobile, short viewports) the grid layout above applies unchanged. */
.envs.is-stage {
  display: block; position: relative;
  width: 100%;
  height: calc(100svh - 48px); margin-inline: auto;
}
/* Stacked boards are transparent full-stage boxes: only their visible frames take the pointer */
.envs.is-stage .env.is-pinned-board { display: block; position: absolute; inset: 0; pointer-events: none; }
.env.is-pinned-board .env__head,
.env.is-pinned-board .env__item { pointer-events: auto; }
/* Centred by layout, not transform: the timeline animates the label's y */
.env.is-pinned-board .env__head {
  position: absolute; left: 30%; top: 40%; width: 40%; padding-bottom: 0;
  flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center;
}
.env.is-pinned-board .env__head .env__num { font-weight: var(--weight-bold); }
.env.is-pinned-board .env__head h3 { font-size: var(--text-display); line-height: 1.1; font-weight: var(--weight-bold); color: var(--ink); }
.env.is-pinned-board .env__item {
  position: absolute; margin: 0;
  left: var(--x); top: var(--y, auto); bottom: var(--b, auto); width: var(--w);
}
.env.is-pinned-board .env__item img { outline: 0; }
/* Captions stay for assistive tech only; the static grid keeps them visible */
.env.is-pinned-board .env__item figcaption {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 01 Escritório — hero top centre between props and second, materials / plan down the sides,
   bottom frames at three heights */
.env--office.is-pinned-board .env__item--props     { --x: 10%; --y: 14%; --w: 17%; }
.env--office.is-pinned-board .env__item--hero      { --x: 34%; --y: 3%; --w: 30%; }
.env--office.is-pinned-board .env__item--second    { --x: 74%; --y: 19%; --w: 21%; }
.env--office.is-pinned-board .env__item--materials { --x: 3%; --y: 44%; --w: 16%; }
.env--office.is-pinned-board .env__item--diagram   { --x: 80%; --y: 53%; --w: 17%; }
.env--office.is-pinned-board .env__item--detail    { --x: 11%; --b: 4%; --w: 23%; }
.env--office.is-pinned-board .env__item--reverse   { --x: 40%; --b: 16%; --w: 24%; }
.env--office.is-pinned-board .env__item--overhead  { --x: 68%; --b: 5%; --w: 19%; }

/* 02 Beach Tennis — hero top right, small plan top left, bottom centre raised */
.env--beach.is-pinned-board .env__item--diagram    { --x: 9%; --y: 7%; --w: 17%; }
.env--beach.is-pinned-board .env__item--props      { --x: 35%; --y: 14%; --w: 21%; }
.env--beach.is-pinned-board .env__item--hero       { --x: 66%; --y: 3%; --w: 30%; }
.env--beach.is-pinned-board .env__item--materials  { --x: 2%; --y: 37%; --w: 23%; }
.env--beach.is-pinned-board .env__item--second     { --x: 78%; --y: 48%; --w: 19%; }
.env--beach.is-pinned-board .env__item--overhead   { --x: 12%; --b: 4%; --w: 24%; }
.env--beach.is-pinned-board .env__item--reverse    { --x: 43%; --b: 13%; --w: 26%; }
.env--beach.is-pinned-board .env__item--detail     { --x: 74%; --b: 2%; --w: 17%; }

/* 03 Praia — hero top left, materials small at top centre, plan / overhead on the sides */
.env--praia.is-pinned-board .env__item--hero       { --x: 5%; --y: 5%; --w: 31%; }
.env--praia.is-pinned-board .env__item--materials  { --x: 46%; --y: 3%; --w: 18%; }
.env--praia.is-pinned-board .env__item--props      { --x: 74%; --y: 19%; --w: 22%; }
.env--praia.is-pinned-board .env__item--diagram    { --x: 7%; --y: 45%; --w: 16%; }
.env--praia.is-pinned-board .env__item--overhead   { --x: 78%; --y: 51%; --w: 19%; }
.env--praia.is-pinned-board .env__item--second     { --x: 17%; --b: 4%; --w: 24%; }
.env--praia.is-pinned-board .env__item--detail     { --x: 46%; --b: 18%; --w: 19%; }
.env--praia.is-pinned-board .env__item--reverse    { --x: 71%; --b: 2%; --w: 21%; }

/* Tablet / mobile: hero full width, the other seven in pairs, no offsets or overlaps */
@media (max-width: 900px) {
  .env { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-gallery); }
  .env__head { grid-column: 1 / -1; order: -2; padding-bottom: 0; }
  .env__item--hero { grid-column: 1 / -1; order: -1; }
  .env__item--overhead { grid-column: 1 / -1; }
  .env__item img { outline: 0 !important; }
}

/* ── Goals ── */
/* Visual benefits use the shared typography scale and natural image proportions. */
#objetivos { padding-top: clamp(120px, 10vw, 176px); padding-bottom: clamp(64px, 6vw, 96px); }
#objetivos .section__head { margin-bottom: clamp(64px, 6vw, 96px); }
.goals { min-height: 0; }
@media (max-width: 760px) {
  #objetivos { padding-block: 88px; }
  #objetivos .section__head { margin-bottom: 48px; }
  .goals { min-height: 0; }
}

.goals__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-layout); margin-top: 0; }
.goals__list li { display: grid; align-content: start; }
.goals__image { border-radius: var(--r); margin-bottom: var(--space-lg); }
.goals__list h3 { font-size: var(--text-subtitle); font-weight: var(--weight-semibold); line-height: var(--leading-label); }
.goals__list p { margin-top: var(--space-sm); font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-soft); max-width: 36ch; }

/* ── Comparison ── */
/* Desktop: scene thumbnails in a fluid 150–200px sidebar, comparator takes the rest */
.scene-layout { display: grid; grid-template-columns: clamp(150px, 12vw, 200px) minmax(0, 1fr); gap: 24px; align-items: start; }
.compare-panel { min-width: 0; }
.tabs { display: flex; flex-direction: column; gap: 8px; }
/* Equal padding keeps scene tabs stable when the active background changes. */
.scene-tab {
  display: grid; gap: 12px; width: 100%; padding: 16px; text-align: left;
  background: transparent; border: 0; border-radius: calc(var(--r) + 6px); cursor: pointer;
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--ink-soft);
  transition: color .2s ease, background-color .2s ease;
}
.scene-tab:focus-visible { outline-offset: 0; }
.scene-tab__thumb { border-radius: var(--r); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s ease; }   /* natural 16:9 via the global media rule */
.scene-tab__label { padding-inline: 2px; font-size: var(--text-body); font-weight: var(--weight-medium); line-height: var(--leading-label); }
.scene-tab:hover { color: var(--ink); }
.scene-tab[aria-selected="true"] { color: var(--ink); font-weight: var(--weight-semibold); background: rgba(168, 196, 230, .35); }
.scene-tab[aria-selected="true"] .scene-tab__thumb { outline-color: transparent; }

/* Geometry comes from the after video in normal flow; the before layer copies it. */
.compare {
  --pos: 50%; position: relative; overflow: hidden; border-radius: var(--r);
  user-select: none; -webkit-user-select: none;
}
/* The before layer fills exactly the after box; contain keeps its ratio if a clip ever differs */
.compare__before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__before video { height: 100%; object-fit: contain; }
/* Slim split line with a clear, unobtrusive drag affordance. */
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px;
  transform: translateX(-50%); background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 4px rgba(0, 0, 0, .3); pointer-events: none;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px;
  display: grid; place-items: center; transform: translate(-50%, -50%);
  border: 1px solid var(--blue); border-radius: 50%;
  background: var(--blue); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.compare__grip svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.compare:has(.compare__range:hover) .compare__grip,
.compare:has(.compare__range:active) .compare__grip {
  background: #c0d5ee; border-color: #c0d5ee;
}
/* Plain text labels above the comparator: one 16px line, ends flush with the media edges */
.cap-labels {
  display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs);
  font-size: var(--text-caption); line-height: 16px; color: var(--muted);
}
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; }
.compare__range::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
.compare:has(.compare__range:focus-visible) .compare__grip {
  outline: 3px solid var(--blue); outline-offset: 4px;
}
/* Play/pause floats bottom-right above the transparent range so it stays clickable */
.compare__toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 20, 18, 0.62); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .2s ease;
}
.compare__toggle:hover { background: rgba(20, 20, 18, 0.8); }
.compare__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.compare__toggle-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compare__toggle-icon--play { fill: currentColor; stroke-width: 1.4; }
/* icon state: pause while playing, play while paused */
.compare__toggle-icon--play, .compare__toggle.is-paused .compare__toggle-icon--pause { display: none; }
.compare__toggle.is-paused .compare__toggle-icon--play { display: block; }

/* Clips sit in the tabpanel, under the comparator, in its column */
.clips { margin-top: var(--space-md); }
.clip video { border-radius: var(--r); }

.clip figcaption, .making-film figcaption { margin-top: var(--space-xs); font-size: var(--text-label); color: var(--muted); }

/* ── Making of ── */
.making-film video { border-radius: var(--r); }
/* Reserve the actual film ratio before HLS metadata arrives to keep scroll geometry stable. */
.making-film .player { aspect-ratio: 77 / 54; margin-inline: auto; }
/* Playback fits the available viewport height, including room around the control bar. */
.making-film .player.is-started {
  width: min(100%, calc((100svh - 64px) * 77 / 54));
  width: min(100%, calc((100dvh - 64px) * 77 / 54));
  clip-path: none !important;
}
.making-film .player.is-started .player__video { transform: none !important; }
.making-film .player__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.making-film__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px);
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--blue); color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .15); transition: background .2s ease;
}
.making-film__play:hover { background: #c0d5ee; }
.making-film__play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.making-film__play:focus-visible { outline: 3px solid var(--ivory); outline-offset: 4px; }


/* Custom player — making-of only. Video keeps its natural ratio; the bar floats over its bottom edge. */
.player { position: relative; border-radius: var(--r); overflow: hidden; }
.player__video { cursor: pointer; }
.player__bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: var(--r-button);
  background: rgba(20, 20, 18, 0.62); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.player__btn {
  flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer;
}
.player__btn:hover { background: rgba(255, 255, 255, 0.12); }
.player__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.player__btn--play { background: var(--blue); color: var(--ink); }
.player__btn--play:hover { background: #98b8de; }
.player__icon {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.player__icon--play { fill: currentColor; stroke-width: 1.4; }
/* icon state */
.player__icon--pause, .player.is-playing .player__icon--play,
.player__icon--sound, .player.is-unmuted .player__icon--muted,
.player__icon--exit, .player.is-fullscreen .player__icon--enter { display: none; }
.player.is-playing .player__icon--pause,
.player.is-unmuted .player__icon--sound,
.player.is-fullscreen .player__icon--exit { display: block; }

.player__time { flex: none; min-width: 34px; font-size: var(--text-caption); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: center; }
.player__seek {
  --progress: 0%;
  flex: 1; min-width: 60px; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-button);
  background: linear-gradient(to right, var(--blue) var(--progress), rgba(255, 255, 255, 0.28) var(--progress));
}
.player__seek::-moz-range-track { height: 4px; border-radius: var(--r-button); background: rgba(255, 255, 255, 0.28); }
.player__seek::-moz-range-progress { height: 4px; border-radius: var(--r-button); background: var(--blue); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--blue); border: 0;
}
.player__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 0; }
.player__seek:focus-visible { outline: 2px solid var(--blue); outline-offset: -8px; border-radius: var(--r-button); }

.player:fullscreen { display: grid; place-items: center; background: #000; border-radius: 0; }
.player:fullscreen .player__video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.player:-webkit-full-screen { display: grid; place-items: center; background: #000; border-radius: 0; }
.player:-webkit-full-screen .player__video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-gallery); margin-top: var(--space-lg); }
.stills img { border-radius: var(--r); }

/* ── CTA: centered blue closing container ── */
#briefing.wrap { max-width: calc(1720px + 2 * var(--gutter)); }
.cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xl); text-align: center;
  background: var(--blue); border-radius: 20px; min-height: 420px;
  padding: clamp(112px, 10vw, 160px) clamp(32px, 6vw, 88px);
}
.cta h2 { font-size: var(--text-heading); font-weight: var(--weight-medium); line-height: 1.2; text-wrap: balance; }
.cta h2 span { display: block; } /* deliberate two-line break */
.cta__text { max-width: 40ch; font-size: var(--text-lead); line-height: 1.55; color: var(--ink-soft); }
.cta__text + .dark-pill { margin-top: 4px; }
.cta .dark-pill { background: var(--ink); color: var(--ivory); min-height: 48px; padding: 0 26px; }
.cta .dark-pill:hover { background: #000; }
.cta__arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Footer: generous space for the lab signature ── */
.footer {
  display: grid; place-items: center; text-align: center;
  min-height: 320px; padding-block: clamp(96px, 10vw, 160px); color: var(--ink);
}
.footer__name { font-size: var(--text-display); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.footer__name sup { font-size: .45em; vertical-align: super; }

/* ── Dialogs ── */
.modal {
  border: 0; padding: 0; border-radius: var(--r); background: var(--paper); color: var(--ink);
  width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  overflow: auto;
}
.modal::backdrop { background: rgba(35, 37, 33, 0.62); }
.modal--film { background: var(--ink); color: var(--ivory); }
.modal--brief { width: min(540px, calc(100vw - 32px)); }
.modal__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px 14px 24px; }
.modal__bar h2 { font-size: var(--text-lead); font-weight: var(--weight-semibold); }
.modal__close {
  background: rgba(127, 127, 127, 0.16); border: 0; border-radius: var(--r-button); padding: 8px 16px;
  cursor: pointer; font-size: var(--text-label);
}
/* Film: no header — width follows the 77:54 video so it fits the viewport height without letterboxing */
.modal--film {
  --film-max-h: calc(100vh - 32px);
  width: min(1120px, calc(100vw - 32px), calc(var(--film-max-h) * 77 / 54));
  background: #000; overflow: hidden;
}
@supports (height: 100dvh) { .modal--film { --film-max-h: calc(100dvh - 32px); } }
.modal__player { border-radius: var(--r); }
.modal__video { display: block; width: 100%; height: auto; max-height: var(--film-max-h); object-fit: contain; background: #000; }
.modal__player:fullscreen .modal__video { max-height: none; }
.modal__player:-webkit-full-screen .modal__video { max-height: none; }
.modal__close--float {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: rgba(20, 20, 18, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal__close--float:hover { background: rgba(20, 20, 18, 0.82); }
.modal__close--float:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.modal__close--float svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.brief { padding: 4px 24px 28px; display: grid; gap: 18px; }
.brief__desc { color: var(--muted); font-size: var(--text-label); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-label); color: var(--ink-soft); }
.field input, .field textarea {
  font: inherit; font-size: var(--text-body); color: var(--ink); background: #fff;
  border: 1px solid rgba(35, 37, 33, 0.18); border-radius: var(--r); padding: 12px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.brief__error { color: #b3261e; font-size: var(--text-label); }
.brief .dark-pill { justify-self: start; }
.brief__status { font-size: var(--text-label); color: var(--muted); }
.brief__status:empty { display: none; }

/* ── Responsive ── */
@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --space-section: 48px; --space-head: 24px; --gap-gallery: 12px; --gap-layout: 24px;
  }
  .intro-section { padding-block: 96px; }
  .intro { gap: 32px; }
  .method { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .section__head { grid-template-columns: 1fr; gap: var(--space-md); }
  .pair { grid-template-columns: 1fr; }
  #personagens .chars.is-pinned { padding-block: var(--space-md); }
  :root { --text-heading: clamp(28px, 7.5vw, 32px); --text-lead: 16px; }
  #personagens .chars__toolbar { gap: var(--space-sm); }
  .goals__list { grid-template-columns: 1fr; }
  .compare__toggle { right: 10px; bottom: 10px; }
  .stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: the three scenes sit in a row above the comparator */
@media (max-width: 700px) {
  .scene-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .scene-tab { min-width: 0; gap: 8px; padding: 12px; border-radius: calc(var(--r) + 4px); font-size: var(--text-label); }
  .scene-tab__label { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .cta { min-height: 340px; padding: 88px 28px; border-radius: 16px; }
  .cta__text { font-size: var(--text-body); }
}

@media (max-width: 480px) {
  .player__bar { left: 8px; right: 8px; bottom: 8px; gap: 4px; padding-right: 6px; }
  .player__time { min-width: 30px; font-size: var(--text-caption); }
  .stills { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}