/* ─── Fonts ─────────────────────────────────── */

@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Landour';
  src: url('fonts/Landour-RegularDisplay.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Landour';
  src: url('fonts/Landour-BoldDisplay.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ─── Type scale (fluid vw, ref: 1440px → max @ 2160px) ───── */
:root {
  --text-xs:      clamp(0.65rem, 0.83vw,  1rem);     /* 12px → 18px @ 2160 */
  --text-nav:     clamp(0.75rem, 0.97vw,  1.125rem); /* 14px → 18px @ 2160 */
  --text-sm:      clamp(1rem,    1.39vw,  1.875rem); /* 20px → 30px @ 2160 */
  --text-base:    clamp(1.25rem, 2.22vw,  3rem);     /* 32px → 48px @ 2160 */
  --text-md:      clamp(2rem,    3.89vw,  5.25rem);  /* 56px → 84px @ 2160 */
  --text-display: clamp(2rem,    5.56vw,  7.5rem);   /* 80px → 120px @ 2160 */

  --color-green:  #49a862;
  --color-cream:  #f5f4f0;
  --color-dark:   #1e1e20;
  --color-white:  #ffffff;

  /* Grid: 120px em 1440px → escala com vw */
  --page-margin: 8.333vw;

  /* ─── Noise ──────────────────────────────────
     Ajuste os valores abaixo para controlar a textura:
     --noise-opacity   → intensidade geral  (0 = off, 0.08 = forte)
     --noise-frequency → granulação (0.5 = grossa, 1.0 = fina)
     --noise-size      → tamanho do tile repetido
  ──────────────────────────────────────────── */
  --noise-opacity:   0.36;
  --noise-frequency: 0.8;
  --noise-size:      180px;
}

/* ─── Noise overlay ────────────────────────────────────────────
   Camada de film grain fixa abaixo do cursor e do overlay,
   mas acima dos backgrounds. Pointer-events: none = não bloqueia cliques.
   Para desativar: setar --noise-opacity: 0;
──────────────────────────────────────────────────────────────── */
body[data-bg="hero"]::after {
  opacity: 0; /* dots já preenchem o hero — noise ficava duplo */
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: var(--noise-opacity);
  transition: opacity 0.5s ease;
  mix-blend-mode: overlay; /* distribui o grain igualmente em fundos claros e escuros */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--noise-size);
}

/* ─── Reset ────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ─────────────────────────────────── */
html {
  overflow-x: hidden;
}

/* Lenis smooth scroll utilities */
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  min-height: 100%;
  font-family: 'Delight', sans-serif;
  font-weight: 400;
  background-color: var(--color-cream);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.6s ease, color 0.6s ease;
}

#snap {
  /* scroll agora é de window — gerenciado pelo Lenis */
}

/* ─── Background states ────────────────────── */
body[data-bg="hero"] {
  background-color: var(--color-cream);
  color: var(--color-dark);
}
body[data-bg="hero"]  .nav-logo { color: var(--color-dark); }

body[data-bg="green"] {
  background-color: var(--color-green);
  color: var(--color-cream);
}
body[data-bg="green"] .nav-logo { color: var(--color-dark); }

body[data-bg="dark"] {
  background-color: var(--color-dark);
  color: var(--color-white);
}
body[data-bg="dark"]  .nav-logo { color: var(--color-green); }

/* ─── Nav ──────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.889vw var(--page-margin);  /* 56px top em 1440px */
  opacity: 0;                 /* GSAP anima para 1 na entrada */
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-hidden {
  transform: translateY(-100%);
}

.hero-avatar,
.hero-bio {
  opacity: 0; /* GSAP anima para 1 na entrada */
}

.nav-menu {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.nav-menu:hover { opacity: 1; }
.nav-menu[disabled] { cursor: default; opacity: 0.5; }


/* ─── Sections ─────────────────────────────── */
.section {
  height: 100svh;
  /* scroll-snap-align: removido — Lenis gerencia o scroll */
  padding: 6vw var(--page-margin);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

#work.section,
#contact.section {
  height: auto;
  padding-top: max(5rem, 10vw);
  min-height: 100svh;
}

/* Respiro extra no fim dos cases — evita acionar o scroll para o próximo
   section ao tentar ler a última linha */
#work.section {
  padding-bottom: max(6rem, 14vw);
}

.section-inner {
  width: 100%;
}

.section-title {
  font-family: 'Landour', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 6.75rem);  /* 72px @ 1440 → 108px @ 2160 */
  line-height: 1.111;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  max-width: 49%;
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

.work-subtitle {
  font-family: 'Delight', sans-serif;
  font-size: clamp(1.25rem, 1.667vw, 2.25rem);  /* 24px @ 1440 → 36px @ 2160 */
  line-height: 1.5;
  font-weight: 400;
  color: #a3a3a3;
  margin-bottom: clamp(3rem, 7vw, 8rem);
}

/* ─── Work: table layout ────────────────────── */
.work-table {
  width: 100%;
}

.work-row {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid #2c2c2c;
  padding-top: 24px;
  padding-bottom: 72px;
  gap: 4vw;
}

@media (hover: hover) and (pointer: fine) {
  .work-row {
    transition: gap          0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .work-row:hover {
    gap: 3vw;
    border-top-color: var(--color-cream);
  }
  .work-row:not([data-case]) { cursor: none; }
}

/* Ícone de seta — fora do fluxo flex para não empurrar os outros itens.
   Posicionado absolutamente no canto direito da row, dentro do grid. */
.work-row {
  position: relative;
}

.work-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--color-cream);
  opacity: 0;
  transform: translate(-4px, calc(-50% + 6px));
  transition: opacity   0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) and (pointer: fine) {
  .work-row:hover .work-arrow {
    opacity: 0;
    transform: translate(-4px, calc(-50% + 6px));
  }
}

/* Imagem do case — oculta por padrão, aparece no hover desktop */
.work-img {
  flex-shrink: 0;
  margin-left: auto;  /* empurra para a borda direita do conteúdo */
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width   0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.work-img img {
  display: block;
  width: 100%;       /* preenche o container; object-fit faz o crop */
  height: 276px;
  object-fit: cover;
  border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
  .work-row:hover .work-img {
    /* Espaço disponível = 100% - meta(10%) - products(10%) - desc(50%) - 3 gaps(12vw)
       Nunca maior que 276px (tamanho ideal da imagem). */
    width: min(276px, calc(30% - 12vw));
    opacity: 1;
  }
}

/* Coluna combinada: data + empresa empilhados */
.work-meta {
  flex-shrink: 0;
  width: 10%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-date,
.work-company {
  font-family: 'Delight', sans-serif;
  line-height: 1.5;
}

.work-date    { font-size: clamp(0.875rem, 1.111vw, 1.5rem);   color: #a3a3a3; }          /* 16px @ 1440 */
.work-company { font-size: clamp(1.25rem, 1.667vw, 2.25rem);   color: var(--color-cream); } /* 24px @ 1440 */

.work-products {
  width: 10%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Delight', sans-serif;
  font-size: clamp(0.875rem, 1.111vw, 1.5rem);  /* 16px @ 1440 */
  line-height: 1.5;
}

.work-label        { color: #a3a3a3; }
.work-product-list { color: var(--color-cream); }

.work-desc {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-body {
  font-family: 'Delight', sans-serif;
  font-size: clamp(1.25rem, 1.667vw, 2.25rem); /* 24px @ 1440px → 36px @ 2160px */
  line-height: 1.5;
  color: var(--color-cream);
}

/* ─── Hero ─────────────────────────────────── */
.section[data-bg="hero"] {
  justify-content: center;
  align-items: flex-start;
}

.hero-content {
  position: absolute;
  top: 33.33%;           /* 280/840 */
  left: var(--page-margin);
  right: var(--page-margin);
  display: flex;
  gap: 2%;
}

.hero-left {
  width: 36.25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.hero-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.hero-bio {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: 'Delight', sans-serif;
  font-weight: 400;
  font-size: clamp(0.75rem, 0.972vw, 1.25rem);    /* 14px @ 1440 → 21px @ 2160 */
  line-height: 1.43;
  color: var(--color-dark);
  max-width: clamp(200px, 16.667vw, 320px);        /* 240px @ 1440 */
}

.hero-right {
  width: 61.75%;
}

.hero-text {
  font-family: 'Landour', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 6.75rem);  /* 72px @ 1440 → 108px @ 2160 */
  line-height: 1.111;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-dark);
  opacity: 0;
}


/* ── Dots layer — absoluto no fluxo da página, rola naturalmente ─
   Começa no fim do hero (≈720/840 da altura) e desce pelo about.
   Sem fixed, sem clip-path: aparece mais conforme o scroll avança. */
#snap {
  position: relative;
}

.dots-layer {
  position: absolute;
  top: calc(85.7svh - 8px);              /* recua meio tile — elimina faixa transparente na borda superior */
  left: var(--page-margin);
  right: var(--page-margin);
  height: calc(114.3svh + 8px);          /* cobre até 200svh: (200 - 85.7)svh + 8px de recuo */
  background-image: radial-gradient(circle, var(--color-dark) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

.accent {
  color: var(--color-green);
  transition: color 0.6s ease;
}

/* ── Wave hover — verde + cursor customizado ─ */
.wave-hover {
  color: inherit;
  text-decoration: none;
  cursor: none;
  transition: color 0.2s ease;
}

.wave-hover:hover {
  color: var(--color-green);
}

/* ─── About ────────────────────────────────── */

/* Centragem absoluta — não depende da altura da seção */
#about .section-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(62.083vw, calc(100% - 2 * var(--page-margin)));  /* 894px @ 1440 → escala com o font */
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about-text {
  font-family: 'Landour', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.444vw, 6rem);  /* 64px @ 1440 → 96px @ 2160 */
  line-height: 1.094;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 85%;
}

/* ─── About: word-split reveal ──────────────── */
.word-wrap {
  display: inline-block;
  vertical-align: bottom;
}
.word {
  display: inline-block;
}

.about-bold {
  font-weight: 700;
}


/* ─── About: custom cursor ─────────────────── */
#about {
  cursor: none;
}

/* ── Cursor customizado ────────────────────────────────────────────────────
 * --cursor-bg  → cor de fundo (definida via JS por row/seção)
 * --cursor-fg  → cor do texto (definida via JS)
 * Aparece com fade + leve escala. Transição de cor é suave entre rows.
 * ----------------------------------------------------------------------- */
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 48px;
  font-family: 'Delight', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;

  background: var(--cursor-bg, var(--color-dark));
  color:      var(--cursor-fg, var(--color-cream));

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition:
    opacity          0.1s  ease,
    transform        0.1s  ease,
    background-color 0.15s  ease;
}

.cursor-label.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Ícones ── */
.cursor-label .icon-copy         { display: none; }
.cursor-label .icon-arrow-up-right { display: none; }

/* Estado "contact-email" — copia email */
.cursor-label.contact-email .icon-arrow { display: none; }
.cursor-label.contact-email .icon-copy  { display: block; }

/* Estado "contact-link" — abre link externo */
.cursor-label.contact-link .icon-arrow            { display: none; }
.cursor-label.contact-link .icon-arrow-up-right   { display: block; }

/* Estado "contact-copied" — feedback após copiar email (sem ícone) */
.cursor-label.contact-copied .icon-arrow          { display: none; }

/* Estado "work-soon" — case study em breve (sem ícone) */
.cursor-label.work-soon .icon-arrow               { display: none; }


/* ─── More overlay ──────────────────────────────────────────────────────────
 *
 * Grid de 8 colunas ref: 1440px, margem: 120px (8.33vw), gutter: 24px
 * Textos sempre 4 colunas largas (588px = 40.83vw).
 * Espaçamento vertical entre blocos: 320px ref = 22.22vw com clamp.
 *
 * ────────────────────────────────────────────────────────────────────────── */

/* Variáveis locais do overlay */
.more-overlay {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --mo-margin:   8.33vw;         /* 120/1440 — margem lateral */
  --mo-gap:      clamp(5rem, 22.22vw, 20rem); /* 320px ref */
  --mo-col4:     40.83vw;        /* 588/1440 — largura de 4 colunas */
  --mo-col1:     var(--mo-margin);             /* onde começa col 1 */
  --mo-col3:     29.58vw;        /* 426/1440 — onde começa col 3 */

  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: 200;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.more-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Close button — pill com fundo e stroke ── */
.more-close {
  position: fixed;
  top: 5.56vw;
  right: 5.56vw;
  background: #1e1e20;
  border: 1px solid #2c2c2c;
  border-radius: 32px;
  padding: 16px;
  cursor: pointer;
  color: var(--color-cream);
  opacity: 0.85;
  transition: opacity 0.25s ease;
  align-items: center;
  justify-content: center;
  z-index: 201;
  display: none;
}

.more-overlay.visible .more-close {
  display: flex;
}

.more-close:hover {
  opacity: 1;
}

/* ── Intro: tela cheia dark — "hero" do overlay ────────────────── */
.more-intro {
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--mo-margin) clamp(4rem, 12vw, 10rem);
  overflow: hidden;
  /* scroll-snap-align: removido — Lenis gerencia o scroll */
}

/* Dots brancos sobre fundo dark — muito sutis (opacity 4%) */
.more-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-cream) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: top left;
  opacity: 0.04;
  pointer-events: none;
}

/* Foto — direita da tela, fade para o escuro à esquerda */
.more-intro-image {
  position: absolute;
  left: 45.83vw;   /* 660/1440 — começa no início da col 6 */
  top: 50%;
  transform: translateY(-50%);
  width: 45.83vw;
  height: clamp(220px, 30.49vw, 460px);
  border-radius: 8px;
  overflow: hidden;
}

.more-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  display: block;
}

/* Gradiente: escuro à esquerda, transparente à direita */
.more-intro-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-dark) 23%,
    transparent 85%
  );
  border-radius: 8px;
}

/* Texto do intro: 7 colunas (1047px ref @ 1440px = 72.71vw) */
.more-intro-text {
  position: relative;
  z-index: 1;
  width: 72.71vw; /* 1047/1440 — col 1 até fim da col 7 */
}

/* ── Blocos de conteúdo ── */
.more-block {
  margin-top: var(--mo-gap);
}

/* Primeiro bloco após o intro: padding-top ao invés de margin-top */
.more-intro + .more-block {
  margin-top: 0;
  padding-top: var(--mo-gap);
}

/* Último bloco: padding-bottom generoso */
.more-block:last-of-type {
  padding-bottom: var(--mo-gap);
}

/* .more-block--title foi substituído por .more-intro */

/* Final text: override para centralizado, 50vw */
.more-block--final {
  margin-left: 25vw;
  width: 50vw;
}

.more-title {
  font-family: 'Landour', sans-serif;
  font-size: clamp(2rem, 4.444vw, 6rem); /* 64px ref @ 1440px → 96px @ 2160px */
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  letter-spacing: -0.02em;
  text-align: left;
}

/* Só o texto final fica centralizado */
.more-block--final .more-title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem); /* 36px ref — não mudou */
  line-height: 1.333;
  letter-spacing: -0.18px;
  text-align: center;
  text-indent: 0;
}

.more-title-serif {
  font-family: 'Landour', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}



/* ── Bio text (col 1 ou col 3, sempre 4 colunas largas) ── */
.more-block--col1 {
  margin-left: var(--mo-col1);
  width: var(--mo-col4);
}

.more-block--col3 {
  margin-left: var(--mo-col3);
  width: var(--mo-col4);
}

.more-bio {
  font-family: 'Delight', sans-serif;
  font-size: clamp(0.9375rem, 1.389vw, 1.875rem); /* 20px ref @ 1440px → 30px @ 2160px */
  font-weight: 400;
  line-height: 1.8; /* 36/20 */
  color: var(--color-cream);
  font-feature-settings: 'liga' 0;
}

/* Profile text usa Landour Regular — fonte display, mais próxima do tom visual do Figma */
.more-profile-text .more-bio {
  font-family: 'Landour', sans-serif;
  font-size: clamp(1rem, 1.528vw, 2.0625rem); /* 22px ref @ 1440px → 33px @ 2160px */
  line-height: 1.636; /* 36/22 */
  letter-spacing: -0.02em;
}

/* Gap entre parágrafos consecutivos dentro do mesmo bloco */
.more-bio + .more-bio {
  margin-top: 1.5rem;
}

/* ── Photo rails (full-width com margens) ── */
.more-block--rail {
  margin-left: var(--mo-margin);
  margin-right: var(--mo-margin);
  width: calc(100% - 2 * var(--mo-margin));
}

.more-rail {
  display: flex;
  align-items: flex-start;
}

/* ── Each photo + caption ── */
.more-photo-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.more-photo-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.more-caption {
  font-family: 'Delight', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-cream);
  text-align: right;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.more-photo-item:hover .more-caption {
  opacity: 1;
}

/* ── Rail 1: layout solto com offsets verticais individuais ── */
.rail-1 { gap: 0; }
.rail-1 .more-photo-item:nth-child(1) { width: 19.72vw; margin-top: 7.22vw; }
.rail-1 .more-photo-item:nth-child(2) { width: 12.5vw;  margin-top: 0;      margin-left: 6.67vw; }
.rail-1 .more-photo-item:nth-child(3) { width: 26.39vw; margin-top: 4.1vw;  margin-left: 2.36vw; }
.rail-1 .more-photo-item:nth-child(4) { width: 9.79vw;  margin-top: 2.01vw; margin-left: 6.67vw; }

/* ── Rail 2: layout solto com offsets verticais individuais ── */
.rail-2 { gap: 0; }
.rail-2 .more-photo-item:nth-child(1) { width: 16.67vw; margin-top: 0; }
.rail-2 .more-photo-item:nth-child(2) { width: 9.17vw;  margin-left: 9.51vw; margin-top: 10.49vw; }
.rail-2 .more-photo-item:nth-child(3) { width: 12.92vw; margin-left: 2.78vw; margin-top: 2.85vw;  }
.rail-2 .more-photo-item:nth-child(4) { width: 10.49vw; margin-left: 2.78vw; margin-top: 1.94vw;  }
.rail-2 .more-photo-item:nth-child(5) { width: 12.5vw;  margin-left: 6.53vw; margin-top: 4.31vw;  }

/* ── Profile section: foto grande esquerda + texto direita ── */
.more-block--profile {
  display: flex;
  align-items: flex-start;
}

.more-profile-img {
  flex-shrink: 0;
  width: 30.35vw;   /* 437/1440 */
  margin-left: 18.82vw;  /* 271/1440 */
  overflow: hidden;
}

.more-profile-img img {
  display: block;
  width: 100%;
  aspect-ratio: 437 / 611;
  object-fit: cover;
}

.more-profile-text {
  flex-shrink: 0;
  width: 30.21vw;   /* 435/1440 — mesma largura da foto (437px ≈ 30.35vw) */
  margin-left: 1.67vw; /* 24px gap entre foto e texto */
}

.more-profile-text .more-bio + .more-bio {
  margin-top: 1.5rem;
}

/* ── Career section ── */
/* ── Career: desktop 2-col grid ──
 *   Figma: left=588/1200=49%, gap=132/1200=11%, right=480/1200=40%
 *   col1=60% (content 49% + visual gap 11%), col2=40%
 *   column-gap: 0 + padding-right: 11% on col1 → border spans full width
 * ─────────────────────────────────────────────────────────────────────── */
.more-career {
  display: grid;
  grid-template-columns: 60% 40%;
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  width: 100%;
}

.more-career-header {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding-right: 11%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.more-career-label {
  font-family: 'Delight', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-cream);
  font-feature-settings: 'liga' 0;
}

/* Cabeçalho das colunas Where / Main role — com linha inferior */
.more-career-cols-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0;
}

.more-career-col-head {
  font-family: 'Delight', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-cream);
  font-feature-settings: 'liga' 0;
  width: 50%;
}

.more-career-bio {
  grid-column: 1;
  grid-row: 2;
  font-family: 'Landour', sans-serif;
  font-size: clamp(1.25rem, 1.667vw, 2.25rem); /* 24px ref @ 1440px → 36px @ 2160px */
  font-weight: 400;
  line-height: 1.5; /* 36/24 */
  letter-spacing: -0.02em;
  color: var(--color-cream);
  font-feature-settings: 'liga' 0;
  padding-right: 11%;
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}

.more-career-list {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.more-career-row {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 0;
}

.more-career-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.more-career-company,
.more-career-role {
  width: 50%;
  font-family: 'Delight', sans-serif;
  font-size: 14px;  /* 12px → 14px (atualizado no Figma) */
  font-weight: 400;
  line-height: 24px;
  color: var(--color-cream);
  font-feature-settings: 'liga' 0;
}

.more-career-row:first-child {
  border-top: none;
}

/* ── Final text (mesma posição do título: centrado, 50vw) ── */
.more-block--final {
  /* herda .more-block--title */
}


/* ─── Copy toast ───────────────────────────────
   Mesmo visual do cursor-label do desktop.
   Aparece centrado na base da tela em todos os
   dispositivos ao copiar o email.               */
.copy-toast {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: 'Delight', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── About: CTA button ─────────────────────────
   Sempre visível. No desktop, faz fade-out no hover
   do section enquanto o cursor-label assume.       */
.about-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 48px;
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: 'Delight', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.about-cta:active {
  opacity: 0.7;
}

/* Desktop: cursor já dá o feedback de cópia — toast desnecessário */
@media (hover: hover) {
  .copy-toast { display: none; }
}

/* Desktop: botão some quando o cursor-label assume */
@media (hover: hover) {
  #about:hover .about-cta {
    opacity: 0;
    pointer-events: none;
  }
}

/* ─── Contact: table layout ─────────────────── */

.contact-table {
  width: 100%;
}

.contact-row {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 24px;
  padding-bottom: 24px;
  cursor: none;
}

/* Sem border-bottom — como nos cases, apenas stroke superior em cada linha */

/* Ícone inline — oculto no desktop, visível no mobile */
.contact-row-icon {
  display: none;
  flex-shrink: 0;
  color: var(--color-cream);
  opacity: 0.55;
}

.contact-row-text {
  font-family: 'Landour', sans-serif;
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-row-text strong {
  font-weight: 700;
}

.contact-row:hover .contact-row-text {
  transform: translateX(1.5vw);
}

/* ─── Responsive ───────────────────────────── */

/* ─── Elevator button ───────────────────────
   Aparece apenas na seção contact (JS adiciona .visible).
   Posição relativa às bordas direita e inferior. */
.elevator-btn {
  position: fixed;
  bottom: 5.56vw;   /* 80px @ 1440px — mesmo que o × do overlay */
  right: 5.56vw;
  background: var(--color-green);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  padding: 16px;
  cursor: pointer;
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.elevator-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.elevator-btn:hover { opacity: 0.8; }


/* ─── Case overlay ──────────────────────────────────────────────────────────
   Fundo claro (#f5f4f0), reutiliza o padrão de overlay do "more about me".
   Cada case tem seu próprio id (case-wave-overlay, case-mosaico-overlay…),
   todos compartilham as classes .case-overlay e as classes de conteúdo.    */

.case-overlay {
  --case-margin:  8.33vw;   /* 120/1440 — margem lateral */
  --case-full:   83.33vw;   /* 1200/1440 — largura de imagem full */
  --case-text:   52.78vw;   /* 760/1440 — largura do bloco de texto */
  --case-half:   40.83vw;   /* 588/1440 — meia largura */

  position: fixed;
  inset: 0;
  background: var(--color-cream);
  color: var(--color-dark);
  z-index: 200;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.case-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Close button — fundo claro, borda sutil */
.case-close {
  position: fixed;
  top: 5vw;              /* ~72px @ 1440 */
  right: var(--case-margin);
  background: var(--color-cream);
  border: 1px solid #e7e7e7;
  border-radius: 32px;
  padding: 16px;
  cursor: pointer;
  color: var(--color-dark);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 201;
  transition: opacity 0.25s ease;
}

.case-overlay.visible .case-close {
  display: flex;
}

.case-close:hover { opacity: 0.6; }

/* ── Hero ── */
.case-hero {
  padding: var(--case-margin) var(--case-margin) 0;
}

.case-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 24px;
}

/* ── Main: título + texto + métricas ── */
.case-main {
  padding: var(--case-margin) var(--case-margin) var(--case-margin);
}

.case-text-block {
  width: var(--case-half); /* 588px @ 1440 — metade da área útil */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-title {
  font-family: 'Landour', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.44vw, 4.5rem); /* 64px @ 1440 */
  line-height: 1.125;                      /* 72/64 */
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin: 0;
}

.case-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-body p {
  font-family: 'Delight', sans-serif;
  font-size: 1rem;      /* 16px */
  line-height: 1.5;     /* 24/16 */
  color: var(--color-dark);
  margin: 0;
  font-feature-settings: 'liga' 0;
}

/* Métricas — 760px (3×200 + 2×80), borda apenas acima do conteúdo */
.case-metrics {
  width: var(--case-text); /* 760px @ 1440 — exato para os 3 cards */
  border-top: 1px solid var(--color-dark);
  padding: 16px 0 0;
  display: flex;
  gap: 80px;
  margin-top: var(--case-margin); /* 120px @ 1440 */
}

.case-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
}

.case-metric-number {
  font-family: 'Landour', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.44vw, 4.5rem); /* 64px @ 1440 */
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--color-dark);
}

.case-metric-label {
  font-family: 'Delight', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
}

/* ── Video placeholder ── */
.case-video-section {
  padding: var(--case-margin) var(--case-margin) 0;
}

.case-video-wrapper {
  position: relative;
  width: 50%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
}

/* Placeholder visual enquanto o vídeo não é adicionado */
.case-video-wrapper--placeholder {
  background: #e2e2e2;
}

.case-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Gallery ── */
.case-gallery-section {
  padding: var(--case-margin) var(--case-margin) 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-img-full,
.case-img-half {
  overflow: hidden;
  border-radius: 24px;
}

.case-img-full img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.case-img-row {
  display: flex;
  gap: 24px;
}

.case-img-half {
  flex: 1;
}

.case-img-half img {
  display: block;
  width: 100%;
  aspect-ratio: 588 / 600;
  object-fit: cover;
}

/* Phones composition — contain para não cortar as telas */
.case-img-half--phones {
  background: #e2e2e2;
}

.case-img-half--phones img {
  object-fit: contain;
}

/* ── Team ── */
.case-team-section {
  padding: var(--case-margin) var(--case-margin);
}

.case-team-inner {
  width: var(--case-half); /* 588px @ 1440 */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.case-team-title {
  font-family: 'Landour', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.44vw, 4.5rem);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin: 0;
}

.case-team-groups {
  display: flex;
  flex-direction: column;
  gap: 33px;
}

.case-team-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-team-label {
  font-family: 'Delight', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #a3a3a3;
}

.case-team-names {
  font-family: 'Delight', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
}

/* Work rows clicáveis — cursor pointer */
.work-row[data-case] { cursor: pointer; }


/* ── Touch / no-hover: remove all mouse-only interactions ──────────────────
   @media (hover: none) apanha touch screens e stylus sem hover.
   Tudo que depende de mouse (cursores custom, hover states visuais)
   é neutralizado aqui. JS ainda roda mas .cursor-label fica invisible. */
@media (hover: none) {

  /* Restaura cursor padrão (#about tinha cursor: none) */
  #about { cursor: auto; }

  /* Esconde o cursor customizado completamente */
  .cursor-label { display: none !important; }

  /* Seta sempre visível (sem hover) — centrada no meio da row (tablet).
     Mobile sobrescreve para top: 24px por causa do layout empilhado. */
  .work-arrow {
    display: block !important;
    opacity: 1;
    transform: translate(0, -50%);
  }

  /* Contact: restaura cursor, ícones inline sempre visíveis,
     texto e ícone em extremos opostos da row */
  .contact-row {
    cursor: auto;
    justify-content: space-between;
  }
  .contact-row:hover .contact-row-text { transform: none; }
  .contact-row-icon { display: block; }

  /* About: botão menor no mobile */
  .about-cta {
    align-self: flex-start;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
  }

  /* Overlay captions: sempre visíveis (sem hover para revelar) */
  .more-caption { opacity: 1; }
}

/* ── Mobile (< 640px) ──────────────────────────────────────────────────────
   Layout de coluna única. Nav weather oculta. Work rows empilhados.
   Overlay intro com imagem no topo, texto em largura total. */
@media (max-width: 640px) {

  /* Seções base */
  .section {
    padding: 6vw;
    min-height: 100svh;
  }

  #work.section,
  #contact.section {
    padding-top: max(5rem, 14vw);
  }

  /* Hero: coluna única */
  .hero-content {
    flex-direction: column;
    gap: 72px;
    top: 134px;
    left: 6.4vw;
    right: 6.4vw;
  }

  .hero-left {
    width: 100%;
    gap: 32px;
    justify-content: flex-start;
    min-height: 0;
  }

  .hero-avatar {
    width: 40px;
    height: 40px;
  }

  .hero-bio {
    font-size: 0.875rem; /* 14px */
    gap: 16px;
    line-height: 1.429; /* 20/14 */
    max-width: 240px;
  }

  .hero-right { width: 100%; }

  .hero-text {
    font-size: 2.375rem; /* 38px */
    line-height: 1.211;  /* 46/38 */
    text-wrap: auto;     /* remove balance — evita quebras estranhas em largura estreita */
  }

  /* Dots: empurra para baixo do conteúdo hero no mobile */
  .dots-layer {
    top: max(calc(90svh - 8px), 680px);
  }

  /* About: tipografia mobile */
  #about .section-inner {
    gap: 32px;
    width: calc(100% - 12.8vw); /* respeita margens de 6.4vw em cada lado */
  }

  .about-text {
    font-size: 2rem;     /* 32px */
    line-height: 1.3125; /* 42/32 */
    max-width: 100%;
  }

  /* Section title */
  .section-title {
    max-width: 100%;
    hyphens: auto;
    margin-top: clamp(2rem, 10vw, 4rem);
    margin-bottom: 8px;
  }

  /* ── Work section ── */
  #work.section { padding-top: 120px; }

  .work-subtitle {
    font-size: 1rem;      /* 16px */
    line-height: 1.625;
    margin-bottom: 80px;
  }

  .work-table {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  /* ── Work rows: de tabela para cards empilhados ── */
  .work-row {
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .work-date {
    font-size: 1rem;    /* 16px */
    line-height: 1.5;
  }

  .work-meta {
    width: 100%;
    flex-shrink: unset;
    gap: 8px;
  }

  .work-date,
  .work-company,
  .work-products,
  .work-desc {
    width: 100%;
    flex-shrink: unset;
  }

  .work-company {
    font-size: 1.5rem;  /* 24px */
    line-height: 1;     /* 24px — sem espaço extra */
    margin-top: 0;
  }

  .work-desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .work-label,
  .work-body {
    font-size: 1rem;    /* 16px */
    line-height: 1.5;
  }

  /* Imagem do case — exibida no mobile após o texto (reset do comportamento desktop) */
  .work-img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
    opacity: 1 !important;
    transition: none;
  }
  .work-img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
  }
  /* Esconde a imagem se o src estiver vazio */
  .work-img img:not([src]), .work-img img[src=""] {
    display: none;
  }
  /* Esconde o container se não houver imagem */
  .work-img:has(img:not([src])),
  .work-img:has(img[src=""]) {
    display: none;
  }

  /* Seta: completamente oculta no mobile */
  .work-arrow { display: none !important; }

  #work.section { padding-bottom: max(3rem, 8vw); }

  /* ── Nav: mais espaço do topo e logo maior ── */
  .nav { padding: 20px 6vw; justify-content: flex-end; }
  .nav-logo { width: 2.75rem; } /* 44px */

  /* ── Hero: permite crescer além de 100svh se necessário ── */
  .section[data-bg="hero"] {
    height: auto;
    min-height: 100svh;
    /* 80px da borda inferior + safe-area do iPhone (home bar) */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Work: empilha produtos ocultos ── */
  .work-products { display: none; }

  /* ── Contact: texto menor no mobile ── */
  .contact-row-text { font-size: 1.5rem; } /* 24px — apenas no mobile */

  /* ── Nav mobile: logo + nome + meta menores ── */
  .nav-identity { gap: 3px; }
  .nav-meta { font-size: 0.625rem; } /* ~10px */

  /* ── Overlay: close button mais próximo do canto ── */
  .more-close {
    top: 20px;
    right: 20px;
    padding: 12px;
  }

  /* ── Overlay intro: 100svh, texto ancorado na base ── */
  .more-intro {
    min-height: 100svh;
    height: auto;
    padding: 0 6.4vw clamp(3rem, 8vw, 5rem);
    justify-content: flex-end;
    overflow: visible; /* evita corte em telas menores */
  }

  .more-intro-image { display: none; }

  .more-intro-text { width: 100%; }

  /* Título do intro menor no mobile: 32px / 36px conforme Figma */
  .more-title {
    font-size: 2rem; /* 32px fixo — não escala com vw no mobile */
    line-height: 1.125;
  }

  /* ── Overlay blocks: margens laterais simples ── */
  .more-block--col1,
  .more-block--col3 {
    margin-left: 6.4vw;
    width: calc(100% - 12.8vw);
  }

  /* Bio corrido (seção 2): 16px / 28px conforme Figma mobile */
  .more-block--col1 .more-bio {
    font-size: 1rem;       /* 16px */
    line-height: 1.75;     /* 28/16 */
  }

  /* ── Overlay: gap maior entre blocos ── */
  .more-overlay { --mo-gap: 6rem; }

  /* ── Overlay: captions ocultas no mobile ── */
  .more-caption { display: none !important; }

  .more-block--rail {
    margin-left: 6.4vw;
    margin-right: 6.4vw;
    width: calc(100% - 12.8vw);
  }

  /* Photo rails: faixa horizontal solta, proporcional ao Figma mobile
     !important necessário para sobrescrever nth-child de maior especificidade */
  .more-rail {
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 3px;
    align-items: flex-end; /* base comum, margin-bottom cria o escalonamento */
  }

  /* Fotos em proporção natural no mobile — sem altura fixa */
  .more-photo-item img {
    height: auto;
  }

  /* Reset de offsets desktop */
  .rail-1 .more-photo-item,
  .rail-2 .more-photo-item {
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-top:  0 !important;
  }

  /* Rail 1: larguras e escalonamento vertical conforme Figma 375px */
  .rail-1 .more-photo-item:nth-child(1) { width: 24.5vw !important; margin-bottom: 6px; }
  .rail-1 .more-photo-item:nth-child(2) { width: 15.5vw !important; margin-bottom: 19px; }
  .rail-1 .more-photo-item:nth-child(3) { width: 32.5vw !important; margin-bottom: 0; }
  .rail-1 .more-photo-item:nth-child(4) { width: 12vw  !important; margin-bottom: 27px; }

  /* Rail 2: mostra todas as 5 fotos (inclusive "still learning"), faixa solta */
  .rail-2 .more-photo-item:nth-child(1) { display: flex !important; width: 22.7vw !important; margin-bottom: 22px; }
  .rail-2 .more-photo-item:nth-child(2) { width: 12.5vw !important; margin-bottom: 9px; }
  .rail-2 .more-photo-item:nth-child(3) { width: 17.6vw !important; margin-bottom: 27px; }
  .rail-2 .more-photo-item:nth-child(4) { width: 14.1vw !important; margin-bottom: 26px; }
  .rail-2 .more-photo-item:nth-child(5) { width: 17.1vw !important; margin-bottom: 0; }

  /* ── Seção de perfil no mobile: foto pequena + texto abaixo ── */
  .more-block--profile {
    display: block;
    margin-left: 6.4vw;
    width: calc(100% - 12.8vw);
  }

  /* profile-big: ~45.6% da tela (171/375), alinhada à esquerda */
  .more-profile-img {
    display: block;
    width: 45.6vw;
    margin-left: 0;
  }

  .more-profile-text {
    width: 100%;
    margin-left: 0;
    margin-top: 2rem;
  }

  /* Profile text: 16px / 26px conforme Figma mobile */
  .more-profile-text .more-bio {
    font-size: 1rem;    /* 16px */
    line-height: 1.625; /* 26/16 */
  }

  /* Espaço entre parágrafos: 16px no mobile (era 24px) */
  .more-profile-text .more-bio + .more-bio {
    margin-top: 1rem; /* 16px */
  }

  /* ── Case overlay: mobile ── */
  .case-overlay {
    --case-margin-v-hero:  84px;
    --case-margin-v-main:  80px;
    --case-margin-v-short: 40px;
  }

  .case-close {
    top: 24px;
    right: 24px;
    padding: 12px;
  }

  .case-hero {
    padding: var(--case-margin-v-hero) 6.4vw 0;
  }

  .case-main {
    padding: var(--case-margin-v-main) 6.4vw 32px;
  }

  .case-text-block {
    width: 100%;
    gap: 32px;
  }

  .case-metrics {
    width: 100%;
    gap: 32px;
    margin-top: 32px;
  }

  .case-title,
  .case-team-title {
    font-size: 2rem;    /* 32px */
    line-height: 1.125; /* 36/32 */
  }

  .case-body p {
    font-size: 0.875rem; /* 14px */
    line-height: 1.571;  /* 22/14 */
  }

  /* Métricas: empilhadas no mobile */
  .case-metrics {
    flex-direction: column;
    gap: 32px;
  }

  .case-metric { width: 100%; }

  .case-metric-number {
    font-size: 4rem; /* 64px — mantém impacto no mobile */
    line-height: 1.125;
  }

  .case-video-section {
    padding: var(--case-margin-v-short) 6.4vw 0;
  }

  .case-video-wrapper {
    width: 100%; /* full-width no mobile */
  }

  .case-gallery-section {
    padding: var(--case-margin-v-short) 6.4vw 0;
    gap: 24px;
  }

  /* Imagens: border-radius menor e row vira coluna */
  .case-img-full,
  .case-img-half { border-radius: 8px; }

  .case-img-row { flex-direction: column; }

  .case-img-full img { aspect-ratio: 327 / 164; }

  .case-img-half { flex: none; width: 100%; }

  .case-img-half img { aspect-ratio: 327 / 334; }

  .case-team-section {
    padding: var(--case-margin-v-main) 6.4vw;
  }

  .case-team-inner { width: 100%; }

  .case-team-label,
  .case-team-names {
    font-size: 0.875rem; /* 14px */
    line-height: 1.571;  /* 22/14 */
  }

  /* Career: volta para layout em bloco no mobile */
  .more-career {
    display: block;
  }
  .more-career-header {
    padding-right: 0;
  }
  .more-career-cols-header {
    margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .more-career-bio {
    padding-right: 0;
  }
  .more-career-list {
    padding-top: 0;
  }
}

/* ── Tablet (641px – 1024px) ────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {

  /* Close button mais próximo — 112px é muito para tablet */
  .more-close {
    top: 40px;
    right: 40px;
  }

  /* Intro image: ajusta largura para não cortar o texto */
  .more-intro-image {
    left: 50vw;
    width: 44vw;
  }

  .more-intro-text { width: 85vw; }

  /* Overlay cols: menos deslocamento, ocupa mais largura —
     col1 e col3 ficam com a mesma largura para não parecerem
     maiores que o career-bio que ocupa a rail inteira */
  .more-block--col1,
  .more-block--col3 {
    margin-left: var(--mo-margin);
    width: 65vw;
  }
}

/* ── Large screens (> 1600px) ───────────────────────────────────────────── */
@media (min-width: 1600px) {

  /* Evita que a imagem do intro esticale demais em 4K */
  .more-intro-image {
    max-width: 740px;
  }

  /* Close button: nunca mais que ~8vw do canto */
  .more-close {
    right: max(112px, 7vw);
    top: max(80px, 5.5vw);
  }

  /* ── Com fontes vw, as proporções já se mantêm automaticamente.
     Só reduz max-width dos elementos que têm container fixo. ── */
  .section-title { max-width: 42%; }   /* era 49% */

  /* Overlay: col1 com cap em px para não ficar infinito */
  .more-block--col1 {
    width: min(40.83vw, 56rem); /* 896px cap */
  }
}