/* Lokomotiva — transplante estrutural de accordion.net.au
   Base de medida: na captura (1920px) 1rem = 17,7778px = 100vw / 108.
   Todo valor em rem abaixo é o px medido dividido por 17,7778. */

@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face {
  font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens medidos (design-system.json). O site é só neutro: nenhum acento. */
:root {
  --carbon: #000000;   /* fundo           */
  --carbon-2: #020202; /* superfície escura */
  --paper: #ffffff;    /* tinta / superfície clara */
  --ash: #828282;      /* tinta secundária, só sobre preto (5,46:1) */
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --pad: 8px;
  --slide-closed: 3.6rem;                 /* 64px */
  --slide-gap: 8px;
  --slide-open: calc(100vw - 2 * var(--pad) - 9 * (var(--slide-closed) + var(--slide-gap)));
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100vw / 108); background: var(--carbon); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--carbon); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.125;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.i18n-pending body { visibility: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 200; background: var(--paper); color: var(--carbon); padding: 12px 16px; font-size: 13px; text-transform: uppercase; }
.skip:focus { top: 16px; }

.p-pad { padding: 0 var(--pad); }
.v-space-450 { height: 28rem; }
.v-space-400 { height: 25rem; }
.v-space-300 { height: 18.75rem; }
.v-space-100 { height: 6.2rem; }
.c-ash { color: var(--ash); }
.t-center { text-align: center; }
.o-70 { opacity: 0.7; }

/* split: palavra > letra > miolo animável */
.word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; }
.char-in { display: inline-block; will-change: transform; }

/* ---------- tipografia medida ---------- */
.eyebrow-l { font-size: 13px; line-height: 1.1; text-transform: uppercase; }
.eyebrow { font-size: 11px; line-height: 1.1; text-transform: uppercase; }
/* a máscara do original era overflow-y: clip; aqui é clip-path com folga acima,
   para os acentos (É, Ã) que a palavra inglesa não tinha, sem mudar a altura */
.title-wrap { padding-top: 1rem; clip-path: inset(-40% -50vw 0 -50vw); }
.h-large { font-size: 18.25rem; line-height: 0.77; letter-spacing: -0.05em; text-transform: uppercase; }
.h-display { font-size: 27.8125rem; line-height: 0.77; letter-spacing: -0.05em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.h-display.is--2 { font-size: 27.405rem; }
.h-med { font-size: 9.75rem; line-height: 0.77; letter-spacing: -0.05em; text-transform: uppercase; }
.h-reg { font-size: 6.5rem; line-height: 1; letter-spacing: -0.05em; }
.h-small { font-family: var(--serif); font-weight: 400; font-size: max(3.5rem, 24px); line-height: 1.15; letter-spacing: -0.01em; }
.h-small.is--small { font-size: max(2.5rem, 22px); letter-spacing: -0.01em; }
.h-offset { margin-left: -0.7rem; width: calc(100% + 1.15rem); }

/* ---------- 01 · menu ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; mix-blend-mode: difference; color: var(--paper); pointer-events: none; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: max(1.5rem, 16px); }
.nav a, .nav .lang { pointer-events: auto; }
.text-link { display: block; position: relative; padding: 16px; margin: -16px; font-size: 13px; line-height: 0.8; text-transform: uppercase; transition: opacity 0.2s; }
.nav__inner:hover .text-link:not(:hover), .footer-links:hover .text-link:not(:hover) { opacity: 0.5; }
.nav__logo { display: block; width: 50px; height: 28px; }
.nav__logo svg { width: 100%; height: 100%; display: block; }
.nav__end { display: flex; align-items: center; gap: 28px; }
.lang { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 0.8; text-transform: uppercase; }
.lang__opt { padding: 10px 3px; margin: -10px -3px; opacity: 0.45; transition: opacity 0.2s; }
.lang__opt:hover, .lang__opt[aria-current="true"] { opacity: 1; }

/* ---------- 03 · hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--carbon); z-index: 1; }
.hero__bg { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--carbon); opacity: 0.35; }
.hero__title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.hero__h { font-family: var(--serif); font-weight: 400; font-size: max(6.5rem, 56px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.hero__h .char { overflow: clip; vertical-align: top; padding: 0.25em 0.02em 0; margin-top: -0.25em; }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 32px; text-align: center; }
.hero__icon { width: 57px; height: 32px; display: block; }
.hero__intro { font-size: 13px; font-weight: 400; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; }
.hero__load { display: none; }
html.motion .hero__load, .hero__load.is-on { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: center; overflow: hidden; pointer-events: none; }
.load__side { position: relative; display: flex; flex: none; height: 100%; background: var(--carbon); }
/* cada metade carrega o preto até a borda da tela: ao abrir, o talhão aparece só pelo vão do meio */
.load__side::before { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; background: var(--carbon); }
.load__side--l::before { right: 100%; }
.load__side--r::before { left: 100%; }
.load__item { flex: none; width: 6.48rem; height: 100%; margin: 0 8px; background: var(--paper); overflow: hidden; }
.load__item img { width: 100%; height: 100%; object-fit: cover; }
html.motion .hero__title, html.motion .hero__foot, html.motion .nav { opacity: 0; }

/* ---------- 04 · filme + aéreo ---------- */
.is-black { background: var(--carbon-2); color: var(--paper); }
.s-intro { position: relative; z-index: 3; }
.intro-h.is--left { display: inline-block; }
.intro-cap { display: grid; gap: 8px; padding-top: 0.25rem; }
.intro-cap.is--top { grid-template-columns: 17.14rem 11.43rem auto; max-width: 42.2rem; padding-left: 1.3rem; }
.intro-cap.is--bottom { grid-template-columns: 19.75rem 15.8rem auto; max-width: 52.25rem; margin-left: 1.39rem; }
.intro-row { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.intro-h.is--right { margin-top: -1rem; padding-right: 1rem; }
.plus-w { position: absolute; left: 38.66%; top: 2.385rem; width: 8.75rem; height: 8.75rem; z-index: 2; }
.plus-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.plus-bar { position: absolute; width: 1.75rem; height: 1.75rem; background: var(--paper); }
.plus-bar.is--h { transform: scaleX(5); }
.plus-bar.is--v { transform: scaleY(5); }
.home-intro__inner { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: max(3.4rem, 64px) 0 8px; background: var(--carbon-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-intro .h-small { max-width: 49rem; }
.marquee-wrap { margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); overflow: hidden; }
.marquee { display: flex; gap: 8px; height: 12rem; will-change: transform; }
.marquee__item { flex: 0 0 18rem; height: 100%; overflow: hidden; }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 05 · filmes ---------- */
.s-work { position: relative; z-index: 4; background: var(--paper); color: var(--carbon-2); overflow: clip; }
.eyebrow-mask { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 13px; line-height: 1; text-transform: uppercase; }
.eyebrow-mask__text { display: inline-block; white-space: nowrap; }
.slider { display: flex; flex-direction: column; }
.s-pagination { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.s-numbers { display: flex; height: 1em; overflow: hidden; }
.s-roll { display: flex; flex-direction: column; transition: transform 0.8s var(--ease); }
.s-roll span { display: block; height: 1em; }
.s-divider { justify-self: center; width: 2.3125rem; height: 5.625rem; margin-bottom: -0.1rem; }
.s-total { justify-self: end; }
.slides { display: flex; gap: var(--slide-gap); height: 54.675rem; margin: 0; padding: 0; list-style: none; }
.slide { position: relative; flex: 0 0 var(--slide-closed); overflow: hidden; color: var(--paper); background: var(--carbon); transition: flex-grow 0.8s var(--ease); }
.slide.is-active { flex-grow: 1; }
.slide__trigger { position: absolute; inset: 0; z-index: 4; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.slide.is-active .slide__trigger { cursor: default; }
.slide__trigger:focus-visible { outline-offset: -4px; }
.slide__bg { position: absolute; inset: 0; filter: saturate(0); transition: filter 0.8s var(--ease); }
.slide__bg img { position: absolute; top: 0; left: 50%; width: var(--slide-open); max-width: none; height: 100%; object-fit: cover; transform: translateX(-50%); }
/* o original usa 30%; com os stills gerados o título ficava em 2,57:1 no pior trecho. 45% leva a >= 3:1 */
.slide__shade { position: absolute; inset: 0; background: var(--carbon); opacity: 0.45; }
.slide.is-active .slide__bg, .slide:not(.is-active):hover .slide__bg { filter: saturate(1); }
.slide__inner { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--slide-open); z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 16px; text-align: center; opacity: 0; transform: translateX(-50%) scale(1.1); transition: opacity 0.4s, transform 0.8s var(--ease); pointer-events: none; }
.slide.is-active .slide__inner { opacity: 1; transform: translateX(-50%); transition-delay: 0.3s; }
.work-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: min(27rem, 90%); min-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.work-h { font-family: var(--serif); font-weight: 400; font-size: max(3.5rem, 32px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.work-h .word { overflow: clip; vertical-align: top; padding-bottom: 0.15em; margin-bottom: -0.15em; }
.work-c { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 800px; }
.credits { display: flex; flex-wrap: wrap; justify-content: center; max-width: 845px; margin: 0; padding: 0; list-style: none; }
.credits li { display: flex; align-items: flex-end; gap: 5px; padding: 3.2px; }
.role { font-size: 10px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; opacity: 0.7; }
.name { font-family: var(--serif); font-weight: 400; font-size: 14px; line-height: 1; text-transform: uppercase; }
.work-stats { max-width: 400px; font-size: 10px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; opacity: 0.7; }
.slide__info { position: absolute; top: 16px; bottom: 16px; left: 50%; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 12px; transform: translateX(-50%); transition: opacity 0.4s; }
.slide.is-active .slide__info { opacity: 0; }
.slide__vwrap { transform: translateX(28px) rotate(8deg); transition: transform 0.6s var(--ease); }
.slide:not(.is-active):hover .slide__vwrap, .slide__trigger:focus-visible ~ .slide__info .slide__vwrap { transform: none; }
.slide__vtitle { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 14px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.slide__idx { display: flex; font-size: 11px; line-height: 1.1; }

/* ---------- 06 / 09 / 11 · cta com cruzes de canto ---------- */
.s-cta { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; height: max(47.5rem, 60vh); background: var(--paper); color: var(--carbon-2); }
.corner { position: absolute; width: 24px; height: 24px; z-index: 1; }
.corner svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.corner.tl { top: 8px; left: 8px; } .corner.tr { top: 8px; right: 8px; }
.corner.bl { bottom: 8px; left: 8px; } .corner.br { bottom: 8px; right: 8px; }
.cta { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; overflow: hidden; padding: 0 8px; font-size: max(3.75rem, 32px); line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; }
.cta__line { display: block; height: max(0.375rem, 4px); background: currentColor; }
.cta__text { display: block; padding: 0.25em 0; white-space: nowrap; }
.cta__text.is--dup { position: absolute; left: 8px; right: 8px; top: max(0.375rem, 4px); }
html:not(.js) .cta__text.is--dup, html.reduce .cta__text.is--dup { display: none; }

/* ---------- 07 · frase sobre still ---------- */
.s-full { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; height: 66.825rem; min-height: 100vh; overflow: hidden; background: var(--carbon); color: var(--paper); }
.full__bg { position: absolute; inset: 0; filter: saturate(0); }
.full__bg img { width: 100%; height: 110%; object-fit: cover; }
/* véu declarado: o still gerado é mais claro que o original; sem ele a frase cai abaixo de 4,5:1 */
.full__bg::after { content: ""; position: absolute; inset: 0; background: var(--carbon); opacity: 0.45; }
.full__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: max(1.8rem, 24px); max-width: max(38rem, 300px); padding: 0 16px; text-align: center; }
.full__inner .h-small { font-size: max(3.5rem, 30px); }
.underline-link { position: relative; display: block; padding: 16px; margin: -16px; font-size: 13px; line-height: 0.8; text-transform: uppercase; }
.underline-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 11px; height: 2px; background: currentColor; transform-origin: right; }
.underline-link:hover::after { animation: line 0.8s var(--ease); }
@keyframes line { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 50.1% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---------- 08 · vistas aéreas ---------- */
.s-photo { position: relative; z-index: 4; overflow-x: clip; background: var(--paper); color: var(--carbon-2); }
.eyebrow-c { font-size: 13px; line-height: 1; text-align: center; text-transform: uppercase; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.project-item { position: relative; aspect-ratio: 948 / 578; overflow: hidden; }
.project-item img { width: 100%; height: 100%; object-fit: cover; }
.project-item__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4px 8px 0; }
.info-clip { overflow: hidden; padding-right: 4px; }
.p-med { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.1; transform: translateY(50px); transition: transform 0.6s var(--ease); }
.info-clip .eyebrow { transform: translateY(15px); transition: transform 0.6s var(--ease); }
.info-bg { position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease); }
.project-item:hover .info-bg { transform: scaleY(1); }
.project-item:hover .p-med { transform: none; transition-delay: 0.1s; }
.project-item:hover .info-clip .eyebrow { transform: none; transition-delay: 0.2s; }
@media (hover: none) {
  .info-bg, .p-med, .info-clip .eyebrow { transform: none; }
}

/* ---------- 10 · equipe ---------- */
.s-artists { position: relative; z-index: 4; overflow-x: clip; }
.container-xs { max-width: 55rem; margin: 0 auto; }
.eyes { position: relative; aspect-ratio: 1904 / 828; margin-bottom: 16px; overflow: hidden; }
.eyes__img { position: absolute; left: 0; top: -2.5%; width: 100%; height: 105%; max-width: none; object-fit: cover; opacity: 0; }
.eyes__img.is-on { opacity: 1; }
.artist-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; text-transform: uppercase; }
.artist-list { display: flex; flex-wrap: wrap; justify-content: center; max-width: 845px; margin: 0; padding: 0 32px; list-style: none; }
.artist-item { display: flex; align-items: flex-end; gap: 5px; padding: 3.2px; transition: opacity 0.2s; }
.artist-list:hover .artist-item:not(:hover) { opacity: 0.5; }
.p-reg { font-size: 13px; line-height: 1.1; letter-spacing: 0.01em; }
.p-large { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; }

/* ---------- 11 · rodapé ---------- */
.footer { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; min-height: 600px; background: var(--carbon-2); color: var(--paper); }
.footer-bottom { position: absolute; left: 64px; right: 64px; bottom: 17.6px; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; }
.footer-copy { font-size: 13px; line-height: 0.8; text-transform: uppercase; }
.footer-links { display: flex; justify-content: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.footer-end { display: flex; justify-content: flex-end; align-items: center; gap: 32px; }

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .nav__item:nth-child(2), .nav__item:nth-child(4) { display: none; }
  .nav__end { gap: 20px; }

  .h-large { font-size: 26rem; }
  .intro-cap.is--top, .intro-cap.is--bottom { grid-template-columns: repeat(3, auto); max-width: none; padding-left: 0; margin-left: 0; justify-content: start; column-gap: 16px; }
  .intro-cap .eyebrow-l { font-size: 10px; }
  .intro-h.is--right { padding-right: 0; }
  .plus-w { left: 6%; top: 4rem; }
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .h-small.is--small { font-size: 24px; }
  .marquee { height: 140px; }
  .marquee__item { flex-basis: 210px; }

  .h-reg { font-size: 48px; }
  .s-divider { width: 18px; height: 44px; }
  .slides { flex-direction: column; height: calc(9 * (56px + 8px) + 70vh); }
  .slide { flex: 0 0 56px; }
  .slide__bg img { left: 0; top: 50%; width: 100%; height: 70vh; transform: translateY(-50%); }
  .slide__inner { left: 0; top: 50%; bottom: auto; width: 100%; height: 70vh; transform: translateY(-50%) scale(1.1); }
  .slide.is-active .slide__inner { transform: translateY(-50%); }
  .slide__info { inset: 0 16px; flex-direction: row; justify-content: space-between; align-items: center; transform: none; }
  .slide__vwrap { transform: none; }
  .slide__vtitle { writing-mode: horizontal-tb; transform: none; }
  .work-title { top: 40%; }

  .s-cta { height: 60vh; }
  .photo-grid { grid-template-columns: 1fr; }
  .h-med { font-size: 12rem; }
  .artist-list { padding: 0; }
  .p-large { font-size: 18px; }
  .footer-bottom { left: 16px; right: 16px; bottom: 24px; grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .footer-links { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}