/* Fonts — Geist (SIL OFL) for body copy, PP Editorial New ("editorial") for headings.
   NOTE: PP Editorial New is a commercial typeface by Pangram Pangram. The files
   in /public/fonts come from the original site download — buy a licence (or swap
   in another serif) before publishing this portfolio. */

@font-face {
  font-family: GeistSans;
  src: url("/fonts/geist-variable.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

@font-face {
  font-family: "GeistSans Fallback";
  src: local(Arial);
  ascent-override: 94.56%;
  descent-override: 27.76%;
  line-gap-override: 0%;
  size-adjust: 106.28%;
}

@font-face {
  font-family: editorial;
  src: url("/fonts/editorial-light.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: editorial;
  src: url("/fonts/editorial-ultralight.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: editorial;
  src: url("/fonts/editorial-ultralight-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "editorial Fallback";
  src: local(Arial);
  ascent-override: 101.14%;
  descent-override: 34.48%;
  line-gap-override: 11.49%;
  size-adjust: 87.01%;
}

:root {
  --font-geist-sans: "GeistSans", "GeistSans Fallback";
  --editorial: "editorial", "editorial Fallback";
}
/* Design tokens — identical to the original theme (styled-components GlobalStyle). */

:root {
  --brand-bc1: #0C0C0C;
  --brand-bc2: #161616;
  --brand-bc3: #410306;
  --brand-bc4: #C5A064;
  --brand-bc5: #F2F1ED;
  --global-white: #ffffff;
  --global-black: #000000;
  --feedback-positive: #3adb76;
  --feedback-negative: #cc4b37;
  --feedback-warning: #face10;

  --space-s: 4.8rem;
  --space-m: 6rem;
  --space-l: 10rem;
  --space-xl: 12rem;
  --space-col: calc(8.333vw + 1.8rem);

  --gap-xxs: 0.2rem;
  --gap-xs: 0.4rem;
  --gap-s: 0.8rem;
  --gap-sm: 1.6rem;
  --gap-m: 2.4rem;
  --gap-l: 3.2rem;
  --gap-xl: 4rem;
  --gap-xxl: 6.4rem;
  --gap-huge: 8rem;
  --gap-uber: 9.6rem;
  --gap-massive: 12.8rem;
  --gap-col: calc(8.333vw + 1.6rem);

  --br-xs: 0.3rem;
  --br-s: 0.6rem;
  --br-m: 1.2rem;
  --br-l: 1.8rem;
  --br-round: 999rem;

  --easing-bezzy: cubic-bezier(0.8, 0, 0, 1);
  --easing-bezzy2: cubic-bezier(0.430, 0.195, 0.020, 1);
  --easing-bezzy3: cubic-bezier(0.5, 0, 0, 1);
  --easing-ease: ease-in-out;

  --time-s: 0.15s;
  --time-m: 0.3s;
  --time-l: 0.6s;

  --font-heading: var(--editorial), Georgia, Times, "Times New Roman", serif;
  --font-body: var(--font-geist-sans), Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-mono: var(--font-geist-mono), "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --font-script: var(--inter), "Comic Sans MS", "Comic Sans", cursive, Arial, sans-serif;

  --header-size: 3.2rem;
  --header-size-mobile: 8.8rem;
  --header-size-desktop: 9.6rem;

  /* Page transition beat (router + view transitions) */
  --page-beat-dur: 1.2s;
  --page-leave-dur: var(--page-beat-dur);
  --page-enter-dur: var(--page-beat-dur);
  --page-enter-ease: cubic-bezier(.2, .7, .2, 1);

  --black: var(--global-black);
  --white: var(--global-white);
  --bezzy: var(--easing-bezzy);
  --bezzy2: var(--easing-bezzy2);
  --bezzy3: var(--easing-bezzy3);
}

@media (hover: none) {
  :root {
    --page-beat-dur: .6s;
  }
}
/* Global reset + app shell rules (ported 1:1 from the original global CSS). */

* {
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricprecision;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  interpolate-size: allow-keywords;
  font-size: 62.5%;
}

@media (min-width: 1600px) {
  html { font-size: 68.75%; }
}

@media (min-width: 1920px) {
  html { font-size: 75%; }
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  line-height: 1;
  background: var(--black);
  color: var(--global-white);
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

input, select, textarea, button {
  background: 0 0;
  border: none;
  border-radius: 0;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
  color: var(--white);
}

::-webkit-scrollbar {
  display: none;
}

::selection {
  background: var(--brand-bc3);
  color: var(--white);
}

.fast-scroll * { will-change: transform; }

.smooth-scroll {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

.site-nav,
.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* ---------------------------------------------------------------- page shell */

#page {
  view-transition-name: page;
  height: 100%;
  overflow: hidden;
}

#page::after {
  content: "";
  z-index: 996;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

html[data-page-leaving] #page::after {
  opacity: 1;
  transition: opacity var(--page-leave-dur) var(--bezzy2);
}

html[data-menu-loading],
html[data-menu-loading] * {
  cursor: progress !important;
}

/* ---------------------------------------------------------------- lenis */

.lenis {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow: auto;
}

.lenis > div:not([class*="gsap-marker"]) {
  min-height: 100%;
}

html.lenis, html.lenis body { height: auto; }

.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

html .lenis.lenis-stopped:not(.lenis-autoToggle) { overflow: hidden; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe { pointer-events: none; }

.lenis.lenis-autoToggle {
  transition-behavior: allow-discrete;
  transition-property: overflow;
  transition-duration: 1ms;
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html, body {
    height: auto;
    overflow: auto;
  }

  #page {
    height: auto;
    overflow: visible;
  }

  #page::after { display: none; }
}

/* ---------------------------------------------------------------- no-JS fallback */

.no-js {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10000;
  padding: 1.6rem;
  font: 400 1.4rem/1.4 var(--font-body);
  text-align: center;
  background: var(--brand-bc2);
}
/* Type presets — the original styled-components mixins as utility classes.
   Component stylesheets usually inline the same declarations (as the original
   compiled CSS does); these classes exist for new/portfolio content.

   Mixin reference (breakpoints: m 700px · l 1024px · xl 1200px):
   heading base : font-family var(--font-heading); text-transform: none; font-synthesis: none
   displayL     : 200 · 8rem/1.1 · -0.2rem            · xl 14rem
   headlineL    : 200 · 5.8rem/1.2 · -0.2rem          · xl 9.6rem
   headlineS    : 200 · 3.6rem/1.2 · -0.1rem          · l 6.4rem · xl 8rem
   titleL       : 300 · 2rem/1.2 · -0.05rem           · xl 2.4rem
   titleS       : 300 · 1.6rem/1.2 · -0.05rem         · xl 1.8rem
   bodyL        : body · 300 · 1.6rem/1.4 · -0.05rem  · m 1.8rem   (display:block)
   bodyS        : body · 400 · 1.2rem/1.2 · -0.05rem  · m 1.4rem   (display:block)
   captionL     : body · 600 · 0.9rem/2 · 0.3rem · uppercase · m 1rem (display:block)
   captionS     : body · 600 · 0.7rem/1.2 · uppercase · m 0.8rem   (display:block)
   `$alt` variant of the heading mixins adds font-style: italic.            */

.t-heading,
.t-display-l,
.t-headline-l,
.t-headline-s,
.t-title-l,
.t-title-s {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
}

.t-alt { font-style: italic; }

.t-display-l {
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
}

.t-headline-l {
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
}

.t-headline-s {
  font-weight: 200;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
}

.t-title-l {
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
}

.t-title-s {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
}

.t-body-l {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
}

.t-body-s {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
}

.t-caption-l {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.t-caption-s {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .t-body-l { font-size: 1.8rem; }
  .t-body-s { font-size: 1.4rem; }
  .t-caption-l { font-size: 1rem; }
  .t-caption-s { font-size: 0.8rem; }
}

@media (min-width: 1024px) {
  .t-headline-s { font-size: 6.4rem; }
}

@media (min-width: 1200px) {
  .t-display-l { font-size: 14rem; }
  .t-headline-l { font-size: 9.6rem; }
  .t-headline-s { font-size: 8rem; }
  .t-title-l { font-size: 2.4rem; }
  .t-title-s { font-size: 1.8rem; }
}

/* "missingMedia" — the original's empty-media pattern (crossed box). */
.missing-media {
  background-color: var(--brand-bc2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-bc5) 14%, transparent);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--brand-bc5) 14%, transparent) calc(50% - 1px), color-mix(in srgb, var(--brand-bc5) 14%, transparent) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--brand-bc5) 14%, transparent) calc(50% - 1px), color-mix(in srgb, var(--brand-bc5) 14%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}
/* <waffl-grid> — the original 4 / 6 / 12 column layout grid.
   Children span the full row unless they set their own grid-column.
   Modifiers (classes on the element):
     .grid--no-gutter   column-gap: 0
     .grid--no-margin   padding-inline: 0
     .grid--fixed       max-width: 1440px
     .grid--fullscreen  height: 100%
     .grid--center      place-items: center                                  */

waffl-grid {
  --grid-columns: repeat(4, 1fr);
  --grid-gutter: 2.4rem;
  --grid-margin: 2.4rem;
  display: grid;
  contain: layout;
  grid-template-columns: var(--grid-columns);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 420px) {
  waffl-grid {
    --grid-gutter: 3.2rem;
    --grid-margin: 3.2rem;
  }
}

@media (min-width: 700px) {
  waffl-grid {
    --grid-columns: repeat(6, 1fr);
    --grid-gutter: 3.2rem;
    --grid-margin: calc(var(--grid-gutter) / 2);
  }
}

@media (min-width: 1024px) {
  waffl-grid {
    --grid-columns: repeat(12, 1fr);
    --grid-gutter: 3.2rem;
    --grid-margin: calc(var(--grid-gutter) / 2);
  }
}

waffl-grid > :where(*) {
  grid-column: 1/-1;
}

waffl-grid.grid--no-gutter { column-gap: 0; }
waffl-grid.grid--no-margin { padding-inline: 0; }
waffl-grid.grid--fixed { max-width: 1440px; }
waffl-grid.grid--fullscreen { height: 100%; }
waffl-grid.grid--center { place-items: center; }
/* View-transition choreography between routes (1:1 with the original). */

::view-transition-old(root) { animation: none !important; }
::view-transition-new(root) { animation: none !important; }
::view-transition-group(root) { z-index: auto !important; }

::view-transition-image-pair(root) {
  isolation: isolate;
  z-index: 1;
}

::view-transition-new(root) { z-index: 2; }
::view-transition-old(root) { z-index: 1; }

::view-transition-group(page) { z-index: auto !important; }
::view-transition-group(site-header) { z-index: 3; }

::view-transition-group(scroll-progress) {
  z-index: 3;
  animation-duration: var(--page-enter-dur);
  animation-timing-function: var(--bezzy2);
}

::view-transition-group(scroll-progress-fill) {
  z-index: 3;
  animation-duration: var(--page-enter-dur);
  animation-timing-function: var(--bezzy2);
}

::view-transition-old(scroll-progress-fill) { animation: none; }
::view-transition-new(scroll-progress-fill) { animation: none; }
::view-transition-new(scroll-progress-fill) { opacity: 0; }

::view-transition-image-pair(page) {
  background: var(--black);
  isolation: isolate;
  will-change: opacity;
  z-index: 1;
}

::view-transition-old(page) {
  visibility: hidden;
  z-index: 1;
  mix-blend-mode: normal;
  animation: none;
}

::view-transition-new(page) {
  animation: page-fade-in var(--page-enter-dur) var(--page-enter-ease) both;
  z-index: 2;
  mix-blend-mode: normal;
}

@keyframes page-fade-in {
  0% { opacity: 0; }
  to { opacity: 1; }
}

/* "next-build" — the page rises over the dimmed previous build. */

html:active-view-transition-type(next-build) {
  --next-build-dur: 1.2s;
  --next-build-ease: cubic-bezier(.7, .05, .13, 1);
}

html:active-view-transition-type(next-build)::view-transition-image-pair(page) {
  background: var(--brand-bc2);
}

html:active-view-transition-type(next-build)::view-transition-old(page) {
  animation: next-build-dim var(--next-build-dur) var(--next-build-ease) both;
  visibility: visible;
}

html:active-view-transition-type(next-build)::view-transition-new(page) {
  animation: next-build-rise var(--next-build-dur) var(--next-build-ease) both;
}

html:active-view-transition-type(next-build)::view-transition-group(scroll-progress) {
  animation-duration: var(--next-build-dur);
  animation-timing-function: var(--next-build-ease);
}

html:active-view-transition-type(next-build)::view-transition-group(scroll-progress-fill) {
  animation-duration: var(--next-build-dur);
  animation-timing-function: var(--next-build-ease);
}

@keyframes next-build-dim {
  0% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateY(0);
  }
  to {
    opacity: .2;
    filter: brightness(1.6) saturate(.6);
    transform: translateY(-50%);
  }
}

@keyframes next-build-rise {
  0% { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (hover: none) {
  html:active-view-transition-type(next-build) {
    --next-build-dur: .6s;
  }

  html:active-view-transition-type(next-build)::view-transition-old(page) {
    animation-name: next-build-dim-lite;
  }
}

@keyframes next-build-dim-lite {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: .2;
    transform: translateY(-50%);
  }
}
/* AnimatedHeading wrapper (sc-12e1aa87). Hidden until the entrance is primed. */

.animated-heading > :first-child {
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: optimizeSpeed;
}

/* A split line is one line by definition — never let it re-wrap mid-animation. */
.animated-heading .line {
  white-space: nowrap;
}

@media (scripting: enabled) {
  .animated-heading {
    visibility: hidden;
  }
}
/* Button — 1:1 with the original shared button styles. */

@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --gradient-percent {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 5%;
}

@property --gradient-shine {
  syntax: "<color>";
  inherits: false;
  initial-value: white;
}

@keyframes gradient-angle {
  100% { --gradient-angle: 360deg; }
}

@keyframes shimmer {
  100% { rotate: 360deg; }
}

.button {
  --ease: ease-in-out;
  --dur: 0.5s;
  --play-state: paused;
  position: relative;
  display: grid;
  place-items: center;
  white-space: nowrap;
  width: max-content;
  padding: var(--gap-sm) var(--gap-l);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  background: color-mix(in srgb, var(--global-black) 10%, transparent);
  text-decoration: none;
  transition: border-color var(--ease) var(--dur);
}

.button--full { width: 100%; }

@media (min-width: 1024px) {
  .button { backdrop-filter: blur(4px); }
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.button[disabled] aside,
.button[aria-disabled="true"] aside {
  animation-play-state: paused;
  opacity: 0;
}

.button:focus-visible {
  outline: 1px dashed color-mix(in srgb, var(--brand-bc5) 60%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--brand-bc3) 40%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    cursor: pointer;
    border-color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  }

  .button:hover > span { opacity: 0.6; }
  .button:hover > span span { transform: translateY(4em); }
}

.button > span {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  display: block;
  position: relative;
  z-index: 1;
  overflow: clip;
  transition: opacity var(--ease) var(--dur), letter-spacing var(--ease) var(--dur);
}

@media (min-width: 700px) {
  .button > span { font-size: 1rem; }
}

.button > span span {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -4em 0px;
  transition: transform 0.5s var(--easing-bezzy2);
}

.button > span span:nth-child(1) { transition-delay: 0s; }
.button > span span:nth-child(2) { transition-delay: 0.02s; }
.button > span span:nth-child(3) { transition-delay: 0.04s; }
.button > span span:nth-child(4) { transition-delay: 0.06s; }
.button > span span:nth-child(5) { transition-delay: 0.08s; }
.button > span span:nth-child(6) { transition-delay: 0.1s; }
.button > span span:nth-child(7) { transition-delay: 0.12s; }
.button > span span:nth-child(8) { transition-delay: 0.14s; }
.button > span span:nth-child(9) { transition-delay: 0.16s; }
.button > span span:nth-child(10) { transition-delay: 0.18s; }
.button > span span:nth-child(11) { transition-delay: 0.2s; }
.button > span span:nth-child(12) { transition-delay: 0.22s; }
.button > span span:nth-child(13) { transition-delay: 0.24s; }
.button > span span:nth-child(14) { transition-delay: 0.26s; }
.button > span span:nth-child(15) { transition-delay: 0.28s; }
.button > span span:nth-child(16) { transition-delay: 0.3s; }
.button > span span:nth-child(17) { transition-delay: 0.32s; }
.button > span span:nth-child(18) { transition-delay: 0.34s; }
.button > span span:nth-child(19) { transition-delay: 0.36s; }
.button > span span:nth-child(20) { transition-delay: 0.38s; }
.button > span span:nth-child(21) { transition-delay: 0.4s; }
.button > span span:nth-child(22) { transition-delay: 0.42s; }
.button > span span:nth-child(23) { transition-delay: 0.44s; }
.button > span span:nth-child(24) { transition-delay: 0.46s; }
.button > span span:nth-child(25) { transition-delay: 0.48s; }

.button aside {
  --duration: 5s;
  --stroke: 1px;
  --offset-start: 25%;
  --offset-end: 75%;
  position: absolute;
  inset: calc(var(--stroke) * -1);
  z-index: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  padding: var(--stroke);
  background: conic-gradient(
    from calc(var(--gradient-angle) - var(--gradient-angle-offset)) at center,
    transparent calc(var(--offset-start) - var(--gradient-percent) * 2),
    color-mix(in srgb, var(--brand-bc5) 0%, transparent) calc(var(--offset-start) - var(--gradient-percent)),
    white var(--offset-start),
    color-mix(in srgb, var(--brand-bc5) 0%, transparent) calc(var(--offset-start) + var(--gradient-percent)),
    transparent calc(var(--offset-start) + var(--gradient-percent) * 2),
    transparent calc(var(--offset-end) - var(--gradient-percent) * 2),
    color-mix(in srgb, var(--brand-bc5) 0%, transparent) calc(var(--offset-end) - var(--gradient-percent)),
    white var(--offset-end),
    color-mix(in srgb, var(--brand-bc5) 0%, transparent) calc(var(--offset-end) + var(--gradient-percent)),
    transparent calc(var(--offset-end) + var(--gradient-percent) * 2)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  transition:
    opacity 0.5s var(--ease),
    --gradient-angle-offset var(--duration) var(--ease),
    --gradient-percent var(--duration) var(--ease),
    --gradient-shine var(--duration) var(--ease);
  animation: gradient-angle 4.5s linear infinite var(--play-state);
}
/* CtaBand — 1:1 with sc-8d5ca2ab-0…4 (+ Box column emfXIX on the copy). */

/* ---------------------------------------------------------------- section (sc-8d5ca2ab-0, ktTCgb / hUxulM) */

.cta-band {
  position: relative;
  z-index: 1;
  overflow: clip;
  height: 100dvh;
  padding-top: 50dvh;
  background: var(--brand-bc1);
}

.cta-band::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, var(--global-black) 0%, transparent 62%);
  content: '';
  opacity: 0.7;
}

/* $hasFade */
.cta-band--fade::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- background (sc-8d5ca2ab-1) */

.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.cta-band__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-band__media picture img {
  display: block;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .cta-band__media picture img {
    object-position: center;
  }
}

/* ---------------------------------------------------------------- content (sc-8d5ca2ab-2) */

.cta-band__content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50dvh;
}

/* Soft dark "fade" only behind the copy, so it reads over any photo. */
.cta-band__content::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 12 12 / 0.62) 0%, rgb(12 12 12 / 0.38) 55%, rgb(12 12 12 / 0) 100%);
}

/* ---------------------------------------------------------------- heading (sc-8d5ca2ab-3) */

.cta-band__heading {
  margin-bottom: var(--gap-s);
}

.cta-band__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  color: var(--brand-bc5);
  text-align: center;
}

@media (min-width: 1200px) {
  .cta-band__heading h2 {
    font-size: 9.6rem;
  }
}

/* ---------------------------------------------------------------- copy (sc-8d5ca2ab-4 + $l/$huge "5/9") */

.cta-band__text {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--gap-l);
}

@media (min-width: 700px) {
  .cta-band__text {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .cta-band__text {
    grid-column: 5/9;
  }
}

@media (min-width: 1600px) {
  .cta-band__text {
    grid-column: 5/9;
  }
}
/* Cursor (sc-31889f63-0/1/2). */

.cursor {
  /* 3em in the source, restated in rem so it grows with the root font size
     past 1600px. A labelled cursor opens wide enough for two caption lines. */
  --size: 4.8rem;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  /* Purely decorative — never swallows a hover from the page beneath. */
  pointer-events: none;
}

.cursor--label {
  --size: 12rem;
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

.cursor__disc {
  --time: 0.5s;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--br-round);
  background: color-mix(in srgb, var(--brand-bc2) 60%, transparent);
  backdrop-filter: blur(16px);
  transform: scale(0.15);
  opacity: 0;
  transition:
    transform var(--time) var(--easing-bezzy2),
    opacity var(--time) var(--easing-bezzy2);
}

.cursor__disc--light {
  background: color-mix(in srgb, var(--brand-bc5) 5%, transparent);
}

.cursor__disc--active {
  transform: scale(1);
  opacity: 1;
}

.cursor__label {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  text-align: center;
  text-wrap: balance;
  color: var(--brand-bc5);
  opacity: 0;
  transition: opacity var(--time) var(--easing-bezzy2) 0s;
}

@media (min-width: 700px) {
  .cursor__label {
    font-size: 1.4rem;
  }
}

.cursor__label--active {
  opacity: 1;
  transition: opacity var(--time) var(--easing-bezzy2) 0.2s;
}
/* FormInput (sc-9bb93277-0..4) — 1:1 with the original compiled CSS.
   Selector specificities mirror the original so the same rules win:
   `.form-field label` (captionL) also styles the radio option labels, and
   `.form-field--error input` sits between the base and :focus rules exactly
   like the original's `$hasError` border declaration. */

.form-field {
  --speed: 0.3s;
  --ease: var(--easing-ease);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  border: none;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--speed) var(--ease);
}

/* $isDisabled (after a successful submission) */
.form-field--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Conditional fields rendered hidden at build time (managed by JS afterwards). */
.form-field[hidden] {
  display: none;
}

.form-field label {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--brand-bc5);
  width: 100%;
  transition: opacity var(--speed) var(--ease);
}

@media (min-width: 700px) {
  .form-field label {
    font-size: 1rem;
  }
}

.form-field label em {
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: var(--gap-xs);
  pointer-events: none;
  user-select: none;
}

.form-field label em > span {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  animation: form-field-fade-in 0.3s var(--ease) forwards;
}

/* the original's global `fade-in` keyframes, renamed to avoid collisions */
@keyframes form-field-fade-in {
  from {
    opacity: 0;
  }
}

.form-field label em > span[role='alert'] {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--feedback-negative);
}

.form-field label em > span[role='alert'] svg {
  --size: 1rem;
  stroke: var(--feedback-negative);
  stroke-width: 2px;
  transform: translateY(-0.1rem);
}

.form-field:has(input[type='radio']:checked) > label,
.form-field:has(input:valid:not(:placeholder-shown):not([aria-invalid='true']):not([type='radio'])) > label,
.form-field:has(textarea:valid:not(:placeholder-shown):not([aria-invalid='true'])) > label,
.form-field:has(select:valid) > label {
  opacity: 0.4;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  display: block;
  width: 100%;
  padding: var(--gap-sm);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  background: transparent;
  color: var(--brand-bc5);
  transition: border-color var(--speed) var(--ease);
}

/* $hasError */
.form-field--error input,
.form-field--error textarea,
.form-field--error select {
  border-color: var(--feedback-negative);
}

@media (min-width: 700px) {
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 1.8rem;
  }
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.form-field select::placeholder {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.form-field input::selection {
  background: var(--brand-bc5);
  color: var(--brand-bc3);
}

.form-field textarea {
  min-height: 16rem;
  resize: none;
}

/* ---------------------------------------------------------------- SelectWrap (sc-9bb93277-1) */

.form-field__select {
  position: relative;
  width: 100%;
}

.form-field__select:after {
  --size: 0.8rem;
  content: '';
  position: absolute;
  top: 50%;
  right: var(--gap-m);
  width: var(--size);
  height: var(--size);
  border-right: 1px solid var(--brand-bc5);
  border-bottom: 1px solid var(--brand-bc5);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.form-field__select select {
  appearance: none;
  padding-right: calc(var(--gap-m) * 2 + 0.8rem);
  cursor: pointer;
}

.form-field__select select:invalid,
.form-field__select select option[value=''] {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.form-field__select select:valid {
  color: var(--brand-bc5);
  border-color: var(--brand-bc5);
}

.form-field__select select:focus:valid {
  border-color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

/* ---------------------------------------------------------------- custom select (./select.js)
   The native <select> stays underneath (value + validation); the button and
   the listbox are what people see and use. */

.form-field__select[data-select]::after {
  display: none;
}

.form-field__select[data-select] .form-field__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.form-select__button {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  width: 100%;
  padding: var(--gap-sm);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

@media (min-width: 700px) {
  .form-select__button {
    font-size: 1.8rem;
  }
}

.form-select--filled .form-select__button {
  color: var(--brand-bc5);
  border-color: var(--brand-bc5);
}

.form-select__button:focus-visible,
.form-select--open .form-select__button {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.form-field--error .form-select__button {
  border-color: var(--feedback-negative);
}

.form-select__button:disabled {
  cursor: default;
}

.form-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.form-select__chevron {
  --size: 0.8rem;
  flex: none;
  width: var(--size);
  height: var(--size);
  margin-right: var(--gap-xs);
  border-right: 1px solid var(--brand-bc5);
  border-bottom: 1px solid var(--brand-bc5);
  transform: translateY(-30%) rotate(45deg);
  transition: transform 0.35s var(--easing-bezzy2, var(--ease));
}

.form-select--open .form-select__chevron {
  transform: translateY(20%) rotate(225deg);
}

.form-select__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  max-height: 28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  background: color-mix(in srgb, var(--global-black, #0c0c0c) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 16%, transparent);
  box-shadow: 0 2.4rem 4.8rem -1.2rem rgb(0 0 0 / 0.6);
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}

.form-select--up .form-select__list {
  top: auto;
  bottom: calc(100% + 0.6rem);
  transform: translateY(0.6rem);
}

.form-select--open .form-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s;
}

.form-select__option {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 1.2rem 1.4rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

@media (min-width: 700px) {
  .form-select__option {
    font-size: 1.6rem;
  }
}

.form-select__option:hover,
.form-select__option:focus-visible,
.form-select__option:focus {
  background: color-mix(in srgb, var(--brand-bc5) 8%, transparent);
  color: var(--brand-bc5);
}

.form-select__option .icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--brand-primary, #cc4b37);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}

.form-select__option[aria-selected='true'] {
  color: var(--brand-bc5);
}

.form-select__option[aria-selected='true'] .icon {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- RadioGroup (sc-9bb93277-2) */

.form-field__radios {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ---------------------------------------------------------------- RadioControl (sc-9bb93277-3) */

.form-field__radio-control {
  --size: 1.6rem;
  position: relative;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  background: color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  border-radius: 50%;
  transition: border-color var(--speed, 0.3s) var(--ease, var(--easing-ease)), box-shadow var(--speed, 0.3s) var(--ease, var(--easing-ease));
}

.form-field__radio-control::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--brand-bc5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--speed, 0.3s) var(--ease, var(--easing-ease)), transform var(--speed, 0.3s) var(--ease, var(--easing-ease));
}

/* ---------------------------------------------------------------- RadioOption (sc-9bb93277-4) */

.form-field__radio {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  display: block;
  width: 100%;
  padding: var(--gap-sm);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  background: transparent;
  color: var(--brand-bc5);
  transition: border-color var(--speed) var(--ease);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  cursor: pointer;
  width: auto;
}

@media (min-width: 700px) {
  .form-field__radio {
    font-size: 1.8rem;
  }
}

.form-field__radio::placeholder {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.form-field__radio:focus,
.form-field__radio:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.form-field__radio:last-child {
  border-left: none;
}

.form-field__radio > p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  text-transform: none;
  margin-left: 0;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  animation: none;
  transition: color var(--speed) var(--ease);
}

@media (min-width: 700px) {
  .form-field__radio > p {
    font-size: 1.8rem;
  }
}

.form-field__radio input[type='radio'] {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.form-field__radio:has(input:checked) .form-field__radio-control {
  border-color: var(--brand-bc5);
}

.form-field__radio:has(input:checked) .form-field__radio-control::after {
  opacity: 1;
  transform: scale(1);
}

.form-field__radio:has(input:checked) > p {
  color: var(--brand-bc5);
}

.form-field__radio:has(input:focus-visible) .form-field__radio-control {
  outline: 1px solid var(--global-white);
  outline-offset: 2px;
  border-color: var(--brand-bc5);
  box-shadow: none;
}
/* EnquiryForm layout (sc-d79889f-1..6) — 1:1 with the original compiled CSS.
   The section wrapper (sc-d79889f-0) belongs to the page using the form. */

/* Intro (sc-d79889f-1) — $l "2/7" (contact) or "2/5" (purchase) */
.enquiry-form__intro {
  position: relative;
  height: 100%;
}

@media (min-width: 1024px) {
  .enquiry-form__intro {
    grid-column: 2/7;
  }

  .enquiry-form--purchase .enquiry-form__intro {
    grid-column: 2/5;
  }
}

/* IntroSticky (sc-d79889f-2) */
.enquiry-form__sticky {
  position: sticky;
  top: var(--gap-col);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-xl);
}

@media (min-width: 1024px) {
  .enquiry-form__sticky {
    margin-bottom: 0;
  }
}

.enquiry-form__sticky h2,
.enquiry-form__sticky p {
  text-wrap: balance;
}

.enquiry-form__sticky h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
  color: var(--brand-bc5);
}

@media (min-width: 1024px) {
  .enquiry-form__sticky h2 {
    font-size: 6.4rem;
  }
}

@media (min-width: 1200px) {
  .enquiry-form__sticky h2 {
    font-size: 8rem;
  }
}

.enquiry-form__sticky p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

@media (min-width: 700px) {
  .enquiry-form__sticky p {
    font-size: 1.4rem;
  }
}

@media (min-width: 1024px) {
  .enquiry-form__sticky p {
    max-width: calc(100vw / 12 * 3 - 3.2rem);
  }
}

/* status / alert messages — shown here on desktop only */
.enquiry-form__sticky p[role='status'],
.enquiry-form__sticky p[role='alert'] {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  display: none;
  padding: var(--gap-s) var(--gap-sm);
  text-align: center;
  margin-top: var(--gap-s);
  max-width: 100%;
}

@media (min-width: 700px) {
  .enquiry-form__sticky p[role='status'],
  .enquiry-form__sticky p[role='alert'] {
    font-size: 1.4rem;
  }
}

@media (min-width: 1024px) {
  .enquiry-form__sticky p[role='status'],
  .enquiry-form__sticky p[role='alert'] {
    display: block;
    max-width: calc(100vw / 12 * 3 - 3.2rem);
  }
}

.enquiry-form__sticky p[role='status'] {
  color: var(--brand-bc4);
  background: color-mix(in srgb, var(--brand-bc4) 10%, transparent);
}

.enquiry-form__sticky p[role='alert'] {
  color: var(--feedback-negative);
  background: color-mix(in srgb, var(--feedback-negative) 10%, transparent);
}

/* FieldsWrap (sc-d79889f-3) — $l "7/12" */
.enquiry-form__fields {
  width: 100%;
}

@media (min-width: 1024px) {
  .enquiry-form__fields {
    grid-column: 7/12;
  }
}

/* Fields (sc-d79889f-4) */
.enquiry-form__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

@media (min-width: 700px) {
  .enquiry-form__form {
    gap: var(--gap-l);
  }
}

/* Honeypot (sc-d79889f-5) */
.enquiry-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ButtonContainer (sc-d79889f-6) */
.enquiry-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* status / alert messages — shown here below desktop only */
.enquiry-form__actions p[role='status'],
.enquiry-form__actions p[role='alert'] {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  display: block;
  padding: var(--gap-s) var(--gap-sm);
  text-align: center;
  margin-top: 0;
  max-width: 100%;
}

@media (min-width: 700px) {
  .enquiry-form__actions p[role='status'],
  .enquiry-form__actions p[role='alert'] {
    font-size: 1.4rem;
  }
}

@media (min-width: 1024px) {
  .enquiry-form__actions p[role='status'],
  .enquiry-form__actions p[role='alert'] {
    display: none;
    max-width: calc(100vw / 12 * 3 - 3.2rem);
  }
}

.enquiry-form__actions p[role='status'] {
  color: var(--brand-bc4);
  background: color-mix(in srgb, var(--brand-bc4) 10%, transparent);
}

.enquiry-form__actions p[role='alert'] {
  color: var(--feedback-negative);
  background: color-mix(in srgb, var(--feedback-negative) 10%, transparent);
}
/* FormImageUpload (sc-20f5841f-0..6). -0/-1 from the compiled CSS; the
   runtime-only parts (dragging/disabled states, previews grid, remove button,
   error) translated from the original styled-components templates. */

/* Jacket (sc-20f5841f-0) */
.form-upload {
  --speed: 0.3s;
  --ease: var(--easing-ease);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  border: none;
}

.form-upload > label:first-child {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  display: block;
  color: var(--brand-bc5);
}

@media (min-width: 700px) {
  .form-upload > label:first-child {
    font-size: 1rem;
  }
}

/* Dropzone (sc-20f5841f-1) */
.form-upload__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  width: 100%;
  min-height: 18rem;
  padding: var(--gap-l);
  border: 1px dashed color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

/* $isDragging */
.form-upload__dropzone--dragging {
  border-color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
  background: color-mix(in srgb, var(--brand-bc5) 5%, transparent);
}

/* $isDisabled (disabled, full or preparing) */
.form-upload__dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-upload__dropzone:has(input:focus-visible) {
  outline: 1px solid var(--global-white);
  outline-offset: 2px;
}

.form-upload__dropzone > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.form-upload__dropzone > svg {
  --size: 2.4rem;
  stroke: var(--brand-bc5);
  fill: none;
}

.form-upload__dropzone > em {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  font-weight: inherit;
  color: var(--brand-bc5);
  text-align: center;
  text-wrap: balance;
  text-transform: none;
  font-weight: 300;
}

@media (min-width: 700px) {
  .form-upload__dropzone > em {
    font-size: 1.8rem;
  }
}

.form-upload__dropzone > span {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  text-align: center;
  text-transform: none;
}

@media (min-width: 700px) {
  .form-upload__dropzone > span {
    font-size: 1.4rem;
  }
}

/* Previews (sc-20f5841f-2) */
.form-upload__previews {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-s);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Preview (sc-20f5841f-3) */
.form-upload__preview {
  position: relative;
  aspect-ratio: 1;
  overflow: clip;
  background: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
}

/* PreviewImage (sc-20f5841f-4) */
.form-upload__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RemoveButton (sc-20f5841f-5) */
.form-upload__remove {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gap-xs);
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity var(--speed) var(--ease);
}

/* $isHovered (hover or keyboard focus) */
.form-upload__remove--hovered {
  background: color-mix(in srgb, var(--brand-bc1) 60%, transparent);
}

.form-upload__remove:hover {
  opacity: 1;
}

.form-upload__remove svg {
  --size: 1.6rem;
  stroke: var(--brand-bc5);
  stroke-width: 2px;
}

/* Error (sc-20f5841f-6) */
.form-upload__error {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--feedback-negative);
}

@media (min-width: 700px) {
  .form-upload__error {
    font-size: 1rem;
  }
}
/* DepthParallax — 1:1 with sc-cda082ca-0 (layer) and sc-cda082ca-1…3 (debug panel). */

/* Held transparent until the textures land, so the static image underneath
   covers the gap instead of a black rectangle. */
.depth-parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity var(--time-m) var(--easing-ease);
}

.depth-parallax[data-ready='true'] {
  opacity: 1;
}

.depth-parallax canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- ?depth-debug panel */

.depth-controls {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  max-height: 62dvh;
  overflow-y: auto;
  padding: 0.75rem;
  font: 500 11px/1.4 ui-monospace, monospace;
  color: #fff;
  background: rgb(0 0 0 / 0.82);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

@media (min-width: 1024px) {
  .depth-controls {
    inset: 1rem 1rem auto auto;
    width: 17rem;
    max-height: calc(100dvh - 2rem);
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 6px;
  }
}

.depth-controls__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.depth-controls__bar button {
  padding: 0.3rem 0.55rem;
  font: inherit;
  color: #fff;
  cursor: pointer;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 4px;
}

.depth-controls__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.65rem 0;
}

.depth-controls__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.depth-controls__fields span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  opacity: 0.85;
}

.depth-controls__fields em {
  font-style: normal;
  opacity: 0.7;
}

.depth-controls__fields input {
  width: 100%;
  accent-color: #fff;
}

.depth-controls__body[hidden] {
  display: none;
}
/* GlobalCta footer — 1:1 with sc-a2c8839e-0…7 (+ Box columns eUMWJt on the content). */

/* ---------------------------------------------------------------- footer (sc-a2c8839e-0) */

.global-cta {
  --offset: calc(var(--gap-huge) + var(--gap-l));
  position: relative;
  z-index: 0;
  overflow: clip;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 100dvh;
  padding-top: var(--offset);
  background: var(--global-black);
}

@media (min-width: 1024px) {
  .global-cta {
    --offset: calc(var(--gap-col) + var(--gap-l));
  }
}

.global-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, var(--global-black) 0%, transparent 50%);
}

.global-cta waffl-grid {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- background (sc-a2c8839e-1)
   The picture is the base layer and the depth-parallax canvas sits on top of
   it, so it doubles as the fallback whenever the scene is off (reduced
   motion, no depth map, no WebGL) or still loading. */

.global-cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.global-cta__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.global-cta__media picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (min-width: 1024px) {
  .global-cta__media picture img {
    object-position: center center;
  }
}

/* ---------------------------------------------------------------- content (sc-a2c8839e-2 + $l "2/12" $xl "3/11") */

.global-cta__content {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-m);
  width: 100%;
}

@media (min-width: 1024px) {
  .global-cta__content {
    gap: var(--gap-l);
    grid-column: 2/12;
  }
}

@media (min-width: 1200px) {
  .global-cta__content {
    grid-column: 3/11;
  }
}

.global-cta__content a {
  margin-top: var(--gap-xs);
}

/* Soft dark "fade" behind the heading and the button. */
.global-cta__content::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 12 12 / 0.55) 0%, rgb(12 12 12 / 0.3) 55%, rgb(12 12 12 / 0) 100%);
}

/* ---------------------------------------------------------------- heading (sc-a2c8839e-3)
   One word per line: SplitText wraps each word in a div; laid out as a
   centred column they stack regardless of how wide the line would be. */

.global-cta__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .global-cta__heading h2 {
    font-size: 9.6rem;
  }
}

/* ---------------------------------------------------------------- CTA wrapper (sc-a2c8839e-4) */

.global-cta__action {
  display: flex;
}

/* ---------------------------------------------------------------- eyebrow (sc-a2c8839e-5) */

.global-cta__eyebrow {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
  text-align: center;
}

@media (min-width: 700px) {
  .global-cta__eyebrow {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------- back-to-top holder (sc-a2c8839e-6) */

.global-cta__back {
  --offset: var(--gap-xxl);
  position: absolute;
  inset: auto 0 var(--offset) 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 100%;
}

/* ---------------------------------------------------------------- <BackToTop> (sc-a2c8839e-7) */

.global-cta__back-to-top {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-s);
  cursor: pointer;
}

@media (min-width: 700px) {
  .global-cta__back-to-top {
    font-size: 1rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .global-cta__back-to-top:hover span > span {
    opacity: 0.6;
    transform: translateY(4em);
  }

  .global-cta__back-to-top:hover i svg:last-child {
    transform: translateY(0%);
  }

  .global-cta__back-to-top:hover i svg:first-child {
    transform: translateY(-200%);
  }
}

.global-cta__back-to-top > span {
  overflow: clip;
}

.global-cta__back-to-top > span > span {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -4em 0px;
  transition: transform 0.5s var(--easing-bezzy2);
}

.global-cta__back-to-top > span > span:nth-child(1) { transition-delay: 0s; }
.global-cta__back-to-top > span > span:nth-child(2) { transition-delay: 0.02s; }
.global-cta__back-to-top > span > span:nth-child(3) { transition-delay: 0.04s; }
.global-cta__back-to-top > span > span:nth-child(4) { transition-delay: 0.06s; }
.global-cta__back-to-top > span > span:nth-child(5) { transition-delay: 0.08s; }
.global-cta__back-to-top > span > span:nth-child(6) { transition-delay: 0.1s; }
.global-cta__back-to-top > span > span:nth-child(7) { transition-delay: 0.12s; }
.global-cta__back-to-top > span > span:nth-child(8) { transition-delay: 0.14s; }
.global-cta__back-to-top > span > span:nth-child(9) { transition-delay: 0.16s; }
.global-cta__back-to-top > span > span:nth-child(10) { transition-delay: 0.18s; }
.global-cta__back-to-top > span > span:nth-child(11) { transition-delay: 0.2s; }
.global-cta__back-to-top > span > span:nth-child(12) { transition-delay: 0.22s; }
/* Header — 1:1 with the original sc-cf9722b1-0..4 and MobileContact sc-e5b603d-0.
   The menu-open variants ($menuOpen) key off the trigger's aria-expanded. */

/* ── header (sc-cf9722b1-0) ──────────────────────────────────────── */

.header {
  /* Altura da linha do cabeçalho. Bandeira, briefing, gatilho e logo assentam
     todos nela, então o alinhamento sai de um valor só em vez de paddings que
     precisam casar de cabeça. --logo-eixo é o quanto o centro da marca "</>"
     fica abaixo do topo do svg (o lockup tem GABER pendurado embaixo). */
  --linha: calc(var(--gap-m) * 2 + 3.2rem);
  --logo-eixo: 0.91rem;

  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;

  /* Lifts the header out of the page-transition fade: named elements get
     their own view-transition group painted above the page group. */
  view-transition-name: site-header;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.header .logo {
  position: absolute;
  top: var(--gap-l);
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .header .logo {
    top: var(--gap-xl);
  }
}

/* ── logo link (sc-cf9722b1-1) ───────────────────────────────────── */

/* O logo é um lockup de duas linhas: a marca "</>" em cima e GABER embaixo.
   Centrar a caixa inteira deixaria a marca ~0,69rem acima da bandeira, do
   briefing e do menu — que é o que lê como desalinhado. Como svg.logo tem
   altura fixa (3.2rem), esse desvio é constante e entra direto no `top`. */
.header__home {
  position: absolute;
  top: calc(var(--linha) / 2 - var(--logo-eixo));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-decoration: none;
}

.header__home .logo {
  position: static;
  transform: none;
  display: block;
}

/* ── social nav (sc-cf9722b1-2) ──────────────────────────────────── */

/* Atalho do briefing — ao lado da bandeira, no canto onde ficavam as redes.
   Repete o padding vertical de .header__contact para as duas assentarem na
   mesma linha; o margin-right:auto (antes no contact) empurra o trigger. */
.header__briefing {
  overflow: clip;
  margin-right: auto;
  padding-right: var(--gap-m);
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 420px) {
  .header__briefing { padding-right: var(--gap-l); }
}

@media (min-width: 1024px) {
  .header__briefing { padding-right: 0; padding-left: var(--gap-sm); }
}

.header__briefing a {
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m);

  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brand-bc5);

  border: 1px solid color-mix(in srgb, var(--brand-bc5) 28%, transparent);
  border-radius: var(--br-round);
  transition:
    border-color var(--time-m) var(--easing-ease),
    background-color var(--time-m) var(--easing-ease);
}

@media (min-width: 1024px) {
  .header__briefing a { font-size: 1.15rem; }
}

.header__briefing a svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand-bc4);
}

@media (hover: hover) and (pointer: fine) {
  .header__briefing a:hover {
    border-color: color-mix(in srgb, var(--brand-bc4) 60%, transparent);
    background-color: color-mix(in srgb, var(--brand-bc3) 45%, transparent);
  }
}

.header__briefing a:focus-visible {
  outline: 2px solid var(--brand-bc4);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .header__briefing a { transition: none; }
}

/* ── menu trigger (sc-cf9722b1-3) ────────────────────────────────── */

.header__trigger {
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-sm);

  overflow: clip;
  visibility: hidden;
  opacity: 0;

  /* A altura vem da linha; o padding fica só nas laterais (a calha da direita),
     senão o gatilho cresce mais que os irmãos e desloca o eixo. */
  min-height: var(--linha);
  padding: 0 var(--gap-m);
}

@media (min-width: 420px) {
  .header__trigger {
    padding: 0 var(--gap-l);
  }
}

@media (min-width: 1024px) {
  .header__trigger {
    padding: 0 var(--gap-xl);
  }
}

@media (hover: hover) and (pointer: fine) {
  .header__trigger:hover em {
    opacity: 0.4;
  }

  .header__trigger:hover .header__burger span:nth-child(2) {
    scale: 0.5 1;
  }

  .header__trigger[aria-expanded="true"]:hover .header__burger span:nth-child(2) {
    scale: 0 1;
  }
}

.header__trigger em {
  display: none;
}

@media (min-width: 1024px) {
  /* captionL */
  .header__trigger em {
    font-family: var(--font-body);
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    position: relative;
    display: block;
    overflow: clip;
    transition: opacity 0.3s var(--easing-ease);
  }

  @media (min-width: 700px) {
    .header__trigger em {
      font-size: 1rem;
    }
  }
}

.header__trigger em span {
  display: block;
  text-align: right;
  transition: transform 1s var(--easing-bezzy3);
}

.header__trigger em span[data-menu="closed"] {
  position: relative;
  transform: translateY(0%) skewY(0deg);
}

.header__trigger em span[data-menu="open"] {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%) skewY(3deg);
}

.header__trigger[aria-expanded="true"] em span[data-menu="closed"] {
  transform: translateY(100%) skewY(3deg);
}

.header__trigger[aria-expanded="true"] em span[data-menu="open"] {
  transform: translateY(0%) skewY(0deg);
}

/* ── burger (sc-cf9722b1-4) ──────────────────────────────────────── */

.header__burger {
  --ease: var(--easing-ease);
  --speed: 0.3s;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.3rem;

  rotate: 0deg;
  transition: rotate 1s var(--easing-bezzy2);

  /* Every line is anchored to the vertical centre and offset by --gap when
     closed, so the open-state cross meets at the exact centre at any size. */
  --gap: 0.6rem;
}

@media (min-width: 1024px) {
  .header__burger {
    width: 1.6rem;
    height: 1.5rem;
    margin-bottom: 0.1rem;
  }
}

@media (min-width: 1024px) {
  .header__burger {
    --gap: 0.4rem;
  }
}

.header__burger span {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: 1px;
  background: var(--global-white);
  transition: translate var(--speed) var(--ease), rotate var(--speed) var(--ease), scale var(--speed) var(--ease);
}

.header__burger span:nth-child(1) {
  rotate: 0deg;
  translate: 0 calc(-50% - var(--gap));
}

.header__burger span:nth-child(2) {
  scale: 1 1;
  translate: 0rem -50%;
}

.header__burger span:nth-child(3) {
  rotate: 0deg;
  translate: 0 calc(-50% + var(--gap));
}

.header__trigger[aria-expanded="true"] .header__burger {
  rotate: 270deg;
}

.header__trigger[aria-expanded="true"] .header__burger span:nth-child(1) {
  rotate: -45deg;
  translate: 0 -50%;
}

.header__trigger[aria-expanded="true"] .header__burger span:nth-child(2) {
  scale: 0 1;
  translate: 1rem -50%;
}

.header__trigger[aria-expanded="true"] .header__burger span:nth-child(3) {
  rotate: 45deg;
  translate: 0 -50%;
}

/* ── language switcher slot (was MobileContact, sc-e5b603d-0) ────── */
/* Mobile: first item on the left. Desktop: right after the social icons
   (margin-right: auto keeps the menu trigger on the far right). */

.header__contact {
  visibility: hidden;
  opacity: 0;
  padding-left: var(--gap-m);
  padding-right: var(--gap-s);
}

@media (min-width: 420px) {
  .header__contact { padding-left: var(--gap-l); }
}

@media (min-width: 1024px) {
  .header__contact { padding-right: 0; }
}

.header__contact,
.header__briefing {
  display: grid;
  place-items: center;
  min-height: var(--linha);
}

@media (min-width: 420px) {
  .header { --linha: calc(var(--gap-l) * 2 + 3.2rem); }
}

@media (min-width: 1024px) {
  .header { --linha: calc(var(--gap-xl) * 2 + 3.2rem); }
}

/* Abaixo de 1024 o logo central divide a linha com os dois: o briefing fica no
   canto esquerdo e a bandeira migra para junto do menu, liberando o meio. */
@media (max-width: 1023.98px) {
  .header__briefing {
    order: 1;
    margin-right: auto;
    padding-left: var(--gap-m);
    padding-right: var(--gap-s);
  }

  .header__contact {
    order: 2;
    padding-left: var(--gap-s);
    padding-right: 0;
  }

  .header__trigger { order: 3; }

  .header__briefing a {
    gap: var(--gap-xs);
    padding: var(--gap-xs) var(--gap-sm);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }

  .header__briefing a svg {
    width: 1.3rem;
    height: 1.3rem;
  }
}

@media (min-width: 420px) and (max-width: 1023.98px) {
  .header__briefing { padding-left: var(--gap-l); }
}
/* Icon (sc-3148f3ed) */
.icon {
  --size: 2.4rem;
  width: var(--size);
  height: var(--size);
}
/* LangSwitch — seletor de idioma do cabeçalho (bandeira + sigla → lista com os 3 idiomas). */

.lang-switch {
  position: relative;
}

/* Só a bandeira: o padding garante área de toque sem sigla nem seta ao lado. */
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem;
  color: var(--brand-bc5);
  cursor: pointer;
  transition: opacity 0.3s var(--easing-ease);
}

.lang-switch .flag {
  display: block;
  flex: none;
  width: 2.2rem;
  height: auto;
  aspect-ratio: 28 / 20;
  border-radius: 0.3rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--global-white) 18%, transparent);
}

/* A sigla segue no menu aberto (cada opção mostra nome + sigla). */
.lang-switch__code {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__toggle:hover {
    opacity: 0.6;
  }
}

.lang-switch__toggle:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--brand-bc5) 60%, transparent);
  outline-offset: 0.4rem;
}

/* ── menu ─────────────────────────────────────────────────────────── */

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: -1.2rem;
  z-index: 5;
  display: grid;
  min-width: 19rem;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  background: color-mix(in srgb, var(--global-black) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 14%, transparent);
  box-shadow: 0 2.4rem 4.8rem -1.6rem rgb(0 0 0 / 0.7);
  backdrop-filter: blur(1.4rem);
  -webkit-backdrop-filter: blur(1.4rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transform-origin: top left;
  transition:
    opacity 0.3s var(--easing-ease),
    transform 0.5s var(--easing-bezzy2),
    visibility 0s linear 0.5s;
}

.lang-switch--open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.3s var(--easing-ease),
    transform 0.5s var(--easing-bezzy2),
    visibility 0s;
}

.lang-switch__option {
  font-family: var(--font-body);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  color: color-mix(in srgb, var(--brand-bc5) 75%, transparent);
  text-decoration: none;
  outline: none;
  transition: background-color 0.2s var(--easing-ease), color 0.2s var(--easing-ease);
}

.lang-switch__option em {
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.lang-switch__option:hover,
.lang-switch__option:focus-visible {
  background: color-mix(in srgb, var(--brand-bc5) 8%, transparent);
  color: var(--brand-bc5);
}

.lang-switch__option[aria-current="true"] {
  color: var(--brand-bc5);
}

.lang-switch__option[aria-current="true"] em {
  color: var(--brand-primary, #cc4b37);
}

.lang-switch--leaving .lang-switch__menu {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__menu,
  .lang-switch--open .lang-switch__menu {
    transition: none;
  }
}
/* Loader — 1:1 with the original sc-60e682e4-0..7. */

/* ── overlay (sc-60e682e4-0) ─────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;

  display: grid;
  place-items: center;

  background: var(--global-black);
}

/* ── CinematicText (sc-60e682e4-1, captionL) ─────────────────────── */

.loader__text {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;

  max-width: 45.5rem;
  margin: 0 auto;

  text-align: center;
  text-wrap: balance;
  color: var(--global-white);
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 700px) {
  .loader__text {
    font-size: 1rem;
  }
}

.loader__text > div {
  display: inline-block;
  vertical-align: baseline;
}

/* ── bottom slot (sc-60e682e4-2) ─────────────────────────────────── */

.loader__bottom {
  position: fixed;
  inset: auto auto var(--gap-l) 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .loader__bottom {
    inset: auto auto var(--gap-xl) 50%;
  }
}

/* ── LoaderBottom (sc-60e682e4-3) ────────────────────────────────── */

.loader__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
}

/* ── LoaderProgress (sc-60e682e4-4 / -5) ─────────────────────────── */

.loader__progress {
  width: 16rem;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: color-mix(in srgb, var(--global-white) 10%, transparent);
}

.loader__progress-bar {
  width: 100%;
  height: 100%;
  background: var(--brand-bc5);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ── cookie notice (sc-60e682e4-6, captionS) ─────────────────────── */

.loader__notice {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;

  max-width: 19.9rem;
  text-align: center;
  text-wrap: balance;
  color: color-mix(in srgb, var(--global-white) 40%, transparent);
}

@media (min-width: 700px) {
  .loader__notice {
    font-size: 0.8rem;
  }
}

/* ── EnterButton (sc-60e682e4-7, titleS) ─────────────────────────── */

.loader__enter {
  font-family: var(--font-heading);
  font-synthesis: none;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;

  padding: var(--gap-sm);
  color: var(--global-white);
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  .loader__enter {
    font-size: 1.8rem;
  }
}

.loader__enter > span {
  position: relative;
  display: inline-block;
  overflow: clip;
}

.loader__enter > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--global-white);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .loader__enter:hover {
    cursor: pointer;
  }

  .loader__enter:hover > span::after {
    transform: scaleX(0);
    transform-origin: right center;
  }

  .loader__enter:hover > span > span {
    transform: translateY(2em);
  }
}

.loader__enter > span > span {
  display: inline-block;
  position: relative;
  text-shadow: color-mix(in srgb, var(--global-white) 60%, transparent) 0px -2em 0px;
  transition: transform 0.75s var(--easing-bezzy2);
}

.loader__enter > span > span:nth-child(1) { transition-delay: 0s; }
.loader__enter > span > span:nth-child(2) { transition-delay: 0.03s; }
.loader__enter > span > span:nth-child(3) { transition-delay: 0.06s; }
.loader__enter > span > span:nth-child(4) { transition-delay: 0.09s; }
.loader__enter > span > span:nth-child(5) { transition-delay: 0.12s; }
/* Logo — as letras começam escondidas acima do recorte. */

svg.logo {
  fill: var(--global-white);
  width: auto;
  height: 3.2rem;
}

svg.logo .text text {
  fill: var(--global-white);
  font-family: var(--font-body);
  font-size: 11.6px;
  font-weight: 700;
}

svg.logo .text path,
svg.logo .text text {
  transform: translateY(-100%);
}
/* LogoMarquee (sc-6db9e853-0). Paused until the strip is in view
   (.logo-marquee--in-view is toggled by an IntersectionObserver). */

.logo-marquee {
  --gap: var(--gap-xxl);
  --speed: 20s;
  --play-state: paused;
  --offset: 30%;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  mask-image: linear-gradient(to right,
      transparent 0%,
      #000 var(--offset) 30%,
      #000 calc(100% - var(--offset)),
      transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.logo-marquee--in-view {
  --play-state: running;
}

.logo-marquee ul {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: logo-marquee var(--speed) linear infinite var(--play-state);
}

.logo-marquee ul li {
  aspect-ratio: 2/1;
  width: auto;
  height: 4rem;
}

@media (min-width: 1024px) {
  .logo-marquee ul li {
    height: 6rem;
  }
}

.logo-marquee ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
/* Media (SanityImage) — blurred LQIP until loaded. */

.media {
  --lqip: var(--lqip-mobile, none);
  background: var(--lqip) center/cover no-repeat;
  clip-path: inset(0);
  transition: filter var(--time-l) var(--easing-ease);
}

@media (min-width: 1024px) {
  .media {
    --lqip: var(--lqip-desktop, var(--lqip-mobile, none));
  }
}

.media[data-loaded="false"] {
  filter: blur(24px);
}

.media[data-loaded="true"] {
  background-image: none;
}
/* Menu overlay — 1:1 with the original sc-1eb77e08-0..3.
   Closed/open values come from the component's $isOpen interpolations;
   `.menu--open` is the open state (applied one frame after menuOpen). */

/* ── nav (sc-1eb77e08-0) ─────────────────────────────────────────── */

.menu {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--brand-bc3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--easing-ease) 0.9s,
    visibility 0s linear 1.2s;
}

.menu.menu--open {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s var(--easing-ease) 0s,
    visibility 0s linear 0s;
}

.menu::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--global-black);
  opacity: 0.2;
  pointer-events: none;
}

/* ── content (sc-1eb77e08-1) ─────────────────────────────────────── */

.menu__inner {
  --movement: 1.5em;
  --ease: var(--easing-bezzy2);

  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-m);

  width: 100%;
  height: 100%;

  opacity: 0;
  scale: 2;
  filter: blur(8px);

  transition:
    opacity 0.25s var(--ease),
    scale 0.75s var(--ease),
    filter 0.25s var(--ease);

  transition-delay: 0s;
}

.menu--open .menu__inner {
  opacity: 1;
  scale: 1;
  filter: blur(0px);

  transition:
    opacity 1.2s var(--ease),
    scale 0.75s var(--ease),
    filter 1.2s var(--ease);

  transition-delay: 0.15s;
}

.menu__inner ul[data-name="pages"],
.menu__inner ul[data-name="legals"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__inner ul[data-name="pages"] li a,
.menu__inner ul[data-name="legals"] li a {
  display: inline-block;
  color: var(--brand-bc5);
  overflow: clip;
  transition: opacity 0.3s var(--easing-ease);
}

.menu__inner ul[data-name="pages"] li a span,
.menu__inner ul[data-name="legals"] li a span {
  display: inline-block;
  text-shadow: var(--brand-bc5) 0 calc(var(--movement) * -1) 0;
  transition: transform 0.5s var(--easing-bezzy2);
}

.menu__inner ul[data-name="pages"] li a span:nth-child(1),
.menu__inner ul[data-name="legals"] li a span:nth-child(1) { transition-delay: 0s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(2),
.menu__inner ul[data-name="legals"] li a span:nth-child(2) { transition-delay: 0.02s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(3),
.menu__inner ul[data-name="legals"] li a span:nth-child(3) { transition-delay: 0.04s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(4),
.menu__inner ul[data-name="legals"] li a span:nth-child(4) { transition-delay: 0.06s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(5),
.menu__inner ul[data-name="legals"] li a span:nth-child(5) { transition-delay: 0.08s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(6),
.menu__inner ul[data-name="legals"] li a span:nth-child(6) { transition-delay: 0.1s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(7),
.menu__inner ul[data-name="legals"] li a span:nth-child(7) { transition-delay: 0.12s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(8),
.menu__inner ul[data-name="legals"] li a span:nth-child(8) { transition-delay: 0.14s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(9),
.menu__inner ul[data-name="legals"] li a span:nth-child(9) { transition-delay: 0.16s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(10),
.menu__inner ul[data-name="legals"] li a span:nth-child(10) { transition-delay: 0.18s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(11),
.menu__inner ul[data-name="legals"] li a span:nth-child(11) { transition-delay: 0.2s; }
.menu__inner ul[data-name="pages"] li a span:nth-child(12),
.menu__inner ul[data-name="legals"] li a span:nth-child(12) { transition-delay: 0.22s; }

@media (hover: hover) and (pointer: fine) {
  .menu__inner ul[data-name="pages"]:hover a,
  .menu__inner ul[data-name="legals"]:hover a {
    opacity: 0.2;
  }

  .menu__inner ul[data-name="pages"] a:hover,
  .menu__inner ul[data-name="legals"] a:hover {
    opacity: 1;
  }

  .menu__inner ul[data-name="pages"] a:hover span,
  .menu__inner ul[data-name="legals"] a:hover span {
    transform: translateY(var(--movement));
  }
}

.menu__inner ul[data-name="pages"] {
  flex-direction: column;
  gap: var(--gap-s);
}

/* displayL + uppercase */
.menu__inner ul[data-name="pages"] li a {
  font-family: var(--font-heading);
  font-synthesis: none;
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  .menu__inner ul[data-name="pages"] li a { font-size: 14rem; }
}

.menu__inner ul[data-name="legals"] {
  gap: var(--gap-l);
}

/* titleS */
.menu__inner ul[data-name="legals"] li a {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .menu__inner ul[data-name="legals"] li a { font-size: 1.8rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .menu__inner {
    padding: 7.2rem var(--gap-s) 6.4rem;
    gap: var(--gap-xs);
  }

  .menu__inner ul[data-name="pages"] {
    flex-direction: row;
    gap: var(--gap-m);
  }

  .menu__inner ul[data-name="pages"] li a {
    font-size: clamp(3.2rem, 6vw, 6rem);
  }
}

/* ── TinyText (sc-1eb77e08-2) ────────────────────────────────────── */

.menu__tiny {
  --offset: var(--gap-xl);

  position: absolute;
  bottom: var(--offset);
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  text-align: center;
}

@media (max-height: 500px) and (orientation: landscape) {
  .menu__tiny { --offset: var(--gap-s); }
}

/* captionS */
.menu__tiny p,
.menu__tiny a {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
  transition: color 0.3s var(--easing-ease);
}

@media (min-width: 700px) {
  .menu__tiny p,
  .menu__tiny a { font-size: 0.8rem; }
}

.menu__tiny p svg,
.menu__tiny a svg {
  opacity: 1;
  transition: opacity 0.3s var(--easing-ease);
}

@media (hover: hover) and (pointer: fine) {
  .menu__tiny a:hover { color: var(--brand-bc5); }
  .menu__tiny a:hover svg { opacity: 0.4; }
}

/* Uma marca em cada canto inferior — sem copyright nem rótulo em texto. */
.menu__tiny [data-name="powered"],
.menu__tiny [data-name="siteby"] {
  position: absolute;
  bottom: 0;
}

.menu__tiny [data-name="powered"] { left: var(--offset); }
.menu__tiny [data-name="siteby"] { right: var(--offset); }

.menu__tiny [data-name="powered"] a,
.menu__tiny [data-name="siteby"] a {
  display: block;
}

/* Marca em mono branco-osso: discreta por padrão, acende no hover. */
.menu__credit-logo {
  display: block;
  height: 2rem;
}

.menu__credit-logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity var(--time-m) var(--easing-ease);
}

@media (min-width: 700px) {
  .menu__credit-logo { height: 2.8rem; }
}

@media (hover: hover) and (pointer: fine) {
  .menu__tiny a:hover .menu__credit-logo img { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__credit-logo img { transition: none; }
}

/* ── Background figure (sc-1eb77e08-3) ───────────────────────────── */

.menu__background {
  position: absolute;
  inset: -12rem;
  z-index: 1;
  overflow: visible;
  user-select: none;
  pointer-events: none;
}

.menu__background svg {
  width: 100%;
  height: 100%;
  fill: color-mix(in srgb, var(--global-black) 20%, transparent);
  pointer-events: none;
}

/* ── menu navigations ────────────────────────────────────────────── */
/* The original navigated from the menu with a plain router push — no page
   fade. The router tags those navigations with the "menu" view-transition
   type, so the incoming page is shown as-is behind the closing menu. */

html:active-view-transition-type(menu)::view-transition-new(page) {
  animation: none;
}
/* PageWrapper (sc-d3167531-0) — <main id="page">.
   --menu-open = $isMenuOpen (menuOpen && menuReady), --primed = $isPrimed (menuReady). */

.page-wrapper {
  --speed: 1s;
  --ease: var(--easing-bezzy2);

  position: relative;
  z-index: 1;

  pointer-events: all;
  clip-path: inset(0%);
  scale: 1;
  transition: clip-path var(--speed) var(--ease), scale var(--speed) var(--ease);

  /* Promoted before the first open (when the menu warm-mounts), so the first
     frame of the first open never paints the page unclipped. */
  will-change: auto;
}

.page-wrapper.page-wrapper--menu-open {
  pointer-events: none;
  clip-path: inset(50%);
  scale: 0.5;
}

.page-wrapper.page-wrapper--primed {
  will-change: clip-path, scale;
}
/* ScrollProgress (sc-13a61dc4-0/1). */

.scroll-progress {
  position: fixed;
  z-index: 997;
  /* The three edges ride one unitless custom property (× 1rem) so the bar
     can be driven flush to the corners with a single number. */
  --progress-inset: 1.6;
  inset: auto calc(var(--progress-inset) * 1rem) calc(var(--progress-inset) * 1rem);
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--global-white) 10%, transparent);
  view-transition-name: scroll-progress;
}

.scroll-progress__fill {
  width: 100%;
  height: 100%;
  background: var(--brand-bc5);
  /* Sub-pixel, not zero — see MIN_PROGRESS in scroll-progress.js. */
  transform: scaleX(0.0005);
  transform-origin: left center;
  view-transition-name: scroll-progress-fill;
}
/* Tag (sc-baf86b4b) — dark = fxwGfJ, light = bKpmgx. */

.tag {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(var(--gap-xxs) + 1px) calc(var(--gap-s) - 2px) calc(var(--gap-xxs) - 1px) var(--gap-s);
  backdrop-filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

@media (min-width: 700px) {
  .tag {
    font-size: 1rem;
  }
}

.tag--dark {
  background: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  color: var(--brand-bc5);
}

.tag--light {
  background: var(--brand-bc5);
  color: var(--brand-bc1);
}

/* Shine sweep (dark variant only). */
.tag--dark:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      transparent 0%,
      color-mix(in srgb, var(--brand-bc5) 30%, transparent) 50%,
      transparent 100%);
  transform: translateX(-100%);
  animation: tag-shine 1s infinite;
  z-index: 1;
  pointer-events: none;
}

/* Content sits above the shine, under any absolutely positioned extras. */
.tag > * {
  position: relative;
  z-index: 2;
}

@keyframes tag-shine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}
/* SingleBuildDesc (sc-8b2b4882-0 / 1 / 3). */

.build-desc {
  position: relative;
  z-index: 2;
  overflow: clip;
  padding-block: var(--gap-huge);
  background: var(--brand-bc1);
}

@media (min-width: 1024px) {
  .build-desc {
    padding-block: var(--gap-col);
  }
}

.build-desc waffl-grid {
  padding-block: var(--gap-huge);
}

@media (min-width: 1024px) {
  .build-desc waffl-grid {
    padding-block: var(--gap-col);
  }
}

.build-desc__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-l);
  width: 100%;
}

/* Box $l "4/10" */
@media (min-width: 1024px) {
  .build-desc__inner {
    grid-column: 4/10;
  }
}

.build-desc__inner p {
  text-wrap: pretty;
}

.build-desc__inner p + p {
  margin-top: var(--gap-m);
}

.build-desc__inner p,
.build-desc__inner em {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--brand-bc5);
  text-transform: none;
  text-align: center;
}

@media (min-width: 1200px) {
  .build-desc__inner p,
  .build-desc__inner em {
    font-size: 2.4rem;
  }
}

.build-desc__inner em {
  font-style: italic;
}

.build-desc__actions {
  display: flex;
  justify-content: center;
  gap: var(--gap-sm);
}
/* PlayButton (sc-2c6bca94-0). */

.play-button {
  --ease: ease-in-out;
  --dur: 0.5s;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  white-space: nowrap;
  overflow: clip;
  width: max-content;
  padding: var(--gap-sm) var(--gap-l);
  transition: border-color var(--ease) var(--dur), background var(--ease) var(--dur);
}

.play-button--full {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .play-button:hover {
    cursor: pointer;
    background: color-mix(in srgb, var(--brand-bc5) 5%, transparent);
  }

  .play-button:hover > span span {
    transform: translateY(4em);
  }

  /* Kept as in the original stylesheet — the value is invalid and dropped by
     the browser, so on hover only the opacity changes. */
  .play-button:hover svg {
    transform: translateX(0.8rem) scale()(0.5);
    opacity: 0.6;
  }
}

.play-button svg {
  --size: 0.8rem;
  fill: var(--brand-bc5);
  transform-origin: center left;
  transition: transform var(--ease) var(--dur), opacity var(--ease) var(--dur);
}

.play-button > span {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  overflow: clip;
  transition: opacity var(--ease) var(--dur), letter-spacing var(--ease) var(--dur);
}

@media (min-width: 700px) {
  .play-button > span {
    font-size: 1rem;
  }
}

.play-button > span span {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -4em 0px;
  transition: transform var(--dur) var(--easing-bezzy2);
}

.play-button > span span:nth-child(1) { transition-delay: 0s; }
.play-button > span span:nth-child(2) { transition-delay: 0.02s; }
.play-button > span span:nth-child(3) { transition-delay: 0.04s; }
.play-button > span span:nth-child(4) { transition-delay: 0.06s; }
.play-button > span span:nth-child(5) { transition-delay: 0.08s; }
.play-button > span span:nth-child(6) { transition-delay: 0.1s; }
.play-button > span span:nth-child(7) { transition-delay: 0.12s; }
.play-button > span span:nth-child(8) { transition-delay: 0.14s; }
.play-button > span span:nth-child(9) { transition-delay: 0.16s; }
.play-button > span span:nth-child(10) { transition-delay: 0.18s; }
.play-button > span span:nth-child(11) { transition-delay: 0.2s; }
.play-button > span span:nth-child(12) { transition-delay: 0.22s; }
.play-button > span span:nth-child(13) { transition-delay: 0.24s; }
.play-button > span span:nth-child(14) { transition-delay: 0.26s; }
.play-button > span span:nth-child(15) { transition-delay: 0.28s; }
.play-button > span span:nth-child(16) { transition-delay: 0.3s; }
.play-button > span span:nth-child(17) { transition-delay: 0.32s; }
.play-button > span span:nth-child(18) { transition-delay: 0.34s; }
.play-button > span span:nth-child(19) { transition-delay: 0.36s; }
.play-button > span span:nth-child(20) { transition-delay: 0.38s; }
.play-button > span span:nth-child(21) { transition-delay: 0.4s; }
.play-button > span span:nth-child(22) { transition-delay: 0.42s; }
.play-button > span span:nth-child(23) { transition-delay: 0.44s; }
.play-button > span span:nth-child(24) { transition-delay: 0.46s; }
.play-button > span span:nth-child(25) { transition-delay: 0.48s; }
.play-button > span span:nth-child(26) { transition-delay: 0.5s; }
.play-button > span span:nth-child(27) { transition-delay: 0.52s; }
.play-button > span span:nth-child(28) { transition-delay: 0.54s; }
.play-button > span span:nth-child(29) { transition-delay: 0.56s; }
.play-button > span span:nth-child(30) { transition-delay: 0.58s; }
/* Demo modal — "Ver Demonstração": media (video or cover) + brief, tags and the project link. */

.video-modal {
  --offset: var(--gap-m);
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: calc(var(--offset) * 2 + 2.4rem) var(--offset) var(--offset);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s var(--easing-bezzy2),
    visibility 0s linear 0.45s;
}

@media (min-width: 1024px) {
  .video-modal {
    --offset: var(--gap-l);
    padding: calc(var(--offset) * 2 + 2.4rem) var(--offset);
  }
}

.video-modal[data-ready] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.45s var(--easing-bezzy2),
    visibility 0s linear 0s;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--global-black) 95%, transparent);
  backdrop-filter: blur(0.6rem);
  -webkit-backdrop-filter: blur(0.6rem);
  cursor: pointer;
}

.video-modal__header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--offset);
  transform: translateY(-0.8rem);
  transition: transform 0.45s ease 0.08s;
}

.video-modal[data-ready] .video-modal__header {
  transform: translateY(0);
}

.video-modal__title {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--brand-bc5);
}

@media (min-width: 700px) {
  .video-modal__title {
    font-size: 1rem;
  }
}

.video-modal__close {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--brand-bc5);
  cursor: pointer;
  transition: opacity 0.5s var(--easing-bezzy2);
}

.video-modal__close svg {
  fill: none;
  stroke: var(--brand-bc5);
  stroke-width: 1;
}

@media (hover: hover) and (pointer: fine) {
  .video-modal__close:hover {
    opacity: 0.6;
  }
}

/* ── card ───────────────────────────────────────────────────────── */

.video-modal__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  width: min(124rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--brand-bc1, #0c0c0c);
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 12%, transparent);
}

@media (min-width: 1024px) {
  .video-modal__card {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    height: min(66rem, 100%);
    overflow: hidden;
  }
}

.video-modal__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brand-bc2);
}

@media (min-width: 1024px) {
  .video-modal__media {
    aspect-ratio: auto;
    height: 100%;
  }
}

.video-modal__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand-bc1, #0c0c0c) 55%, transparent), transparent 45%);
}

.video-modal__image,
.video-modal__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
}

.video-modal__info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: var(--gap-l) var(--gap-m) var(--gap-m);
}

@media (min-width: 1024px) {
  .video-modal__info {
    gap: var(--gap-l);
    padding: var(--gap-xl) var(--gap-l) var(--gap-l);
    overflow-y: auto;
  }
}

.video-modal__eyebrow {
  font-family: var(--font-body);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.video-modal__eyebrow span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--brand-bc5);
}

.video-modal__eyebrow span:first-child::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #3ecf6e;
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, #3ecf6e 25%, transparent);
}

.video-modal__name {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: -0.15rem;
  color: var(--brand-bc5);
}

@media (min-width: 1024px) {
  .video-modal__name {
    font-size: 7.2rem;
    letter-spacing: -0.2rem;
  }
}

.video-modal__brief {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.02rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 1024px) {
  .video-modal__brief {
    font-size: 1.8rem;
  }
}

.video-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-modal__tags li {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 20%, transparent);
  color: color-mix(in srgb, var(--brand-bc5) 75%, transparent);
}

.video-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-m);
  margin-top: auto;
  padding-top: var(--gap-s);
}

.video-modal__host {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: color-mix(in srgb, var(--brand-bc5) 55%, transparent);
  text-decoration: none;
  transition: color 0.3s var(--ease, ease);
}

.video-modal__host .icon {
  width: 1.3rem;
  height: 1.3rem;
}

@media (hover: hover) and (pointer: fine) {
  a.video-modal__host:hover {
    color: var(--brand-bc5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal,
  .video-modal[data-ready],
  .video-modal__header {
    transition: none;
  }
}
/* SingleBuildGallery (sc-ba185dd8-0 … 5). */

.build-gallery {
  position: relative;
  z-index: 2;
  overflow: clip;
  background: var(--brand-bc1);
  padding-bottom: var(--gap-m);
}

@media (min-width: 420px) {
  .build-gallery {
    padding-bottom: var(--gap-l);
  }
}

@media (min-width: 1024px) {
  .build-gallery {
    padding-bottom: var(--gap-xl);
  }
}

/* For sale: no bottom padding — the red backdrop runs into the purchase section. */
.build-gallery--available,
.build-gallery.build-gallery--available {
  padding-bottom: 0;
}

.build-gallery__rows {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .build-gallery__rows {
    gap: var(--gap-m);
  }
}

.build-gallery__single,
.build-gallery__double {
  padding-inline: var(--gap-m);
}

@media (min-width: 420px) {
  .build-gallery__single,
  .build-gallery__double {
    padding-inline: var(--gap-l);
  }
}

@media (min-width: 1024px) {
  .build-gallery__single,
  .build-gallery__double {
    padding-inline: var(--gap-xl);
  }
}

/* Falls back to 2:1 when the block's image carries no dimensions. */
.build-gallery__single figure {
  aspect-ratio: var(--ratio, 2 / 1);
}

.build-gallery__double {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .build-gallery__double {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .build-gallery__double {
    gap: var(--gap-m);
  }
}

.build-gallery__double figure {
  aspect-ratio: 4/5;
}

.build-gallery__figure {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: clip;
  background: color-mix(in srgb, var(--brand-bc1) 80%, transparent);
}

.build-gallery__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.build-gallery__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--brand-bc3);
}
/* SingleBuildNext (sc-c0982aa4-0 … 4). */

.build-next {
  position: relative;
  z-index: 1;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background: var(--brand-bc1);
}

.build-next__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.build-next__background .shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Sem WebGL: a foto do próximo projeto em tela cheia, escurecida. */
.build-next__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
}

.build-next__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.build-next__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.build-next__heading {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  text-align: center;
  text-transform: none;
  color: var(--brand-bc5);
  /* Uma linha só ("Próximo Projeto" é mais longo que "Next Build"): o tamanho
     acompanha a largura da tela em vez de quebrar a palavra no meio. */
  white-space: nowrap;
  font-size: min(8rem, 11vw);
  pointer-events: none;
}

@media (min-width: 1200px) {
  .build-next__heading {
    font-size: min(14rem, 11vw);
  }
}

/* The Button's letter roll at display scale: each letter carries a ghost of
   itself 1.2em above (one line box at line-height 1.1) and slides down on hover. */
.build-next__heading a {
  display: block;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

/* Not clickable (or hoverable) until scrolling has settled. */
.build-next__heading--scrolling a {
  pointer-events: none;
}

.build-next__heading a > span {
  display: block;
  overflow: clip;
  transition: opacity var(--time-m) var(--easing-bezzy);
}

.build-next__heading a > span > span {
  display: inline-block;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0 -1.2em 0;
  transition: transform 0.5s var(--easing-bezzy2);
}

.build-next__heading a > span > span:nth-child(1) { transition-delay: 0s; }
.build-next__heading a > span > span:nth-child(2) { transition-delay: 0.02s; }
.build-next__heading a > span > span:nth-child(3) { transition-delay: 0.04s; }
.build-next__heading a > span > span:nth-child(4) { transition-delay: 0.06s; }
.build-next__heading a > span > span:nth-child(5) { transition-delay: 0.08s; }
.build-next__heading a > span > span:nth-child(6) { transition-delay: 0.1s; }
.build-next__heading a > span > span:nth-child(7) { transition-delay: 0.12s; }
.build-next__heading a > span > span:nth-child(8) { transition-delay: 0.14s; }
.build-next__heading a > span > span:nth-child(9) { transition-delay: 0.16s; }
.build-next__heading a > span > span:nth-child(10) { transition-delay: 0.18s; }
.build-next__heading a > span > span:nth-child(11) { transition-delay: 0.2s; }
.build-next__heading a > span > span:nth-child(12) { transition-delay: 0.22s; }
.build-next__heading a > span > span:nth-child(13) { transition-delay: 0.24s; }
.build-next__heading a > span > span:nth-child(14) { transition-delay: 0.26s; }
.build-next__heading a > span > span:nth-child(15) { transition-delay: 0.28s; }
.build-next__heading a > span > span:nth-child(16) { transition-delay: 0.3s; }
.build-next__heading a > span > span:nth-child(17) { transition-delay: 0.32s; }
.build-next__heading a > span > span:nth-child(18) { transition-delay: 0.34s; }
.build-next__heading a > span > span:nth-child(19) { transition-delay: 0.36s; }
.build-next__heading a > span > span:nth-child(20) { transition-delay: 0.38s; }

@media (hover: hover) and (pointer: fine) {
  .build-next__heading a:hover > span {
    opacity: 0.6;
  }

  .build-next__heading a:hover > span > span {
    transform: translateY(1.2em);
  }
}

.build-next__top {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  position: absolute;
  bottom: var(--gap-xxl);
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  cursor: pointer;
  color: var(--brand-bc5);
}

@media (min-width: 700px) {
  .build-next__top {
    font-size: 1rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .build-next__top:hover span > span {
    opacity: 0.6;
    transform: translateY(4em);
  }
}

.build-next__top > span {
  display: block;
  overflow: clip;
}

.build-next__top > span > span {
  display: inline-block;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -4em 0px;
  transition: transform 0.5s var(--easing-bezzy2);
}

.build-next__top > span > span:nth-child(1) { transition-delay: 0s; }
.build-next__top > span > span:nth-child(2) { transition-delay: 0.02s; }
.build-next__top > span > span:nth-child(3) { transition-delay: 0.04s; }
.build-next__top > span > span:nth-child(4) { transition-delay: 0.06s; }
.build-next__top > span > span:nth-child(5) { transition-delay: 0.08s; }
.build-next__top > span > span:nth-child(6) { transition-delay: 0.1s; }
.build-next__top > span > span:nth-child(7) { transition-delay: 0.12s; }
.build-next__top > span > span:nth-child(8) { transition-delay: 0.14s; }
.build-next__top > span > span:nth-child(9) { transition-delay: 0.16s; }
.build-next__top > span > span:nth-child(10) { transition-delay: 0.18s; }
.build-next__top > span > span:nth-child(11) { transition-delay: 0.2s; }
.build-next__top > span > span:nth-child(12) { transition-delay: 0.22s; }
.build-next__top > span > span:nth-child(13) { transition-delay: 0.24s; }
.build-next__top > span > span:nth-child(14) { transition-delay: 0.26s; }
.build-next__top > span > span:nth-child(15) { transition-delay: 0.28s; }
.build-next__top > span > span:nth-child(16) { transition-delay: 0.3s; }
.build-next__top > span > span:nth-child(17) { transition-delay: 0.32s; }
.build-next__top > span > span:nth-child(18) { transition-delay: 0.34s; }
.build-next__top > span > span:nth-child(19) { transition-delay: 0.36s; }
.build-next__top > span > span:nth-child(20) { transition-delay: 0.38s; }
/* SingleBuildPurchase (sc-31db4d31-0 / 1). */

.build-purchase {
  position: relative;
  z-index: 2;
  background: var(--brand-bc1);
}

.build-purchase__panel {
  padding-block: var(--gap-huge);
  background: var(--brand-bc3);
  /* Shrinks about its top edge as the section exits (EXIT_SCALE). */
  transform-origin: top center;
}

@media (min-width: 1024px) {
  .build-purchase__panel {
    padding-block: var(--gap-col);
  }
}

.build-purchase__panel strong {
  font-weight: 700;
}
/* BuildSpecs — full-specification drawer (stock pages). */

.build-specs__drawer {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  justify-content: flex-end;
}

.build-specs__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--brand-bc1) 80%, transparent);
  backdrop-filter: blur(0.8rem);
  opacity: 0;
  cursor: pointer;
  transition: opacity 1200ms var(--easing-bezzy3);
}

.build-specs__drawer--open .build-specs__backdrop {
  opacity: 1;
}

.build-specs__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: var(--brand-bc2);
  transform: translateY(100%);
  transition: transform 1200ms var(--easing-bezzy3);
}

.build-specs__drawer--open .build-specs__panel {
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .build-specs__panel {
    width: 64rem;
    transform: translateX(100%);
  }

  .build-specs__drawer--open .build-specs__panel {
    transform: translateX(0);
  }
}

.build-specs__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding: var(--gap-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.build-specs__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding-right: var(--gap-xl);
}

.build-specs__eyebrow {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

@media (min-width: 700px) {
  .build-specs__eyebrow {
    font-size: 1rem;
  }
}

.build-specs__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.build-specs__title h2,
.build-specs__price,
.build-specs__heading {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .build-specs__title h2,
  .build-specs__price,
  .build-specs__heading {
    font-size: 2.4rem;
  }
}

.build-specs__price {
  flex-shrink: 0;
  color: var(--brand-bc4);
  font-style: italic;
  white-space: nowrap;
}

.build-specs__price small {
  font-size: 0.7em;
  opacity: 0.8;
}

.build-specs__category {
  font-family: var(--font-body);
  margin-top: var(--gap-xs);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.4;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.build-specs__divider {
  height: 1px;
  margin: 0;
  border: none;
  background: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
}

.build-specs__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity 0.5s var(--easing-bezzy2);
}

@media (hover: hover) and (pointer: fine) {
  .build-specs__toggle:hover {
    opacity: 0.8;
  }
}

.build-specs__chevron {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--brand-bc5);
  transform: rotate(0deg);
  transition: transform var(--time-l) var(--easing-bezzy2);
}

.build-specs__chevron svg {
  --size: 1.2rem;
}

.build-specs__section--open .build-specs__chevron {
  transform: rotate(180deg);
}

.build-specs__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--time-l) var(--easing-bezzy2);
}

.build-specs__section--open .build-specs__collapse {
  grid-template-rows: 1fr;
}

.build-specs__clip {
  min-height: 0;
  overflow: hidden;
}

.build-specs__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-top: var(--gap-sm);
}

.build-specs__row {
  font-family: var(--font-body);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
}

@media (min-width: 700px) {
  .build-specs__row {
    font-size: 1.8rem;
  }
}

.build-specs__label {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.build-specs__value {
  color: var(--brand-bc5);
  text-align: right;
}

.build-specs__value--solo {
  text-align: left;
}

.build-specs__empty {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

@media (min-width: 700px) {
  .build-specs__empty {
    font-size: 1.8rem;
  }
}

.build-specs__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--gap-l);
  border: 0;
  background: none;
  color: var(--brand-bc5);
  cursor: pointer;
  transition: opacity 0.5s var(--easing-bezzy2);
}

.build-specs__close svg {
  --size: 1.6rem;
  fill: none;
  stroke: var(--brand-bc5);
  stroke-width: 1;
}

@media (hover: hover) and (pointer: fine) {
  .build-specs__close:hover {
    opacity: 0.6;
  }
}

.build-specs__purchase {
  padding-top: var(--gap-m);
}

/* Reduced motion: no slide, a plain fade. */
.build-specs__drawer--reduced .build-specs__panel,
.build-specs__drawer--reduced.build-specs__drawer--open .build-specs__panel {
  transform: none;
  opacity: 0;
  transition: opacity var(--time-m) linear;
}

.build-specs__drawer--reduced.build-specs__drawer--open .build-specs__panel {
  opacity: 1;
}

.build-specs__drawer--reduced .build-specs__backdrop {
  transition: opacity var(--time-m) linear;
}

.build-specs__drawer--reduced .build-specs__chevron,
.build-specs__drawer--reduced .build-specs__collapse {
  transition: none;
}
/* Banner (sc-1767e08b-0 … 7). */

.build-banner {
  --offset: var(--header-size-mobile);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--offset) 0 var(--gap-m) 0;
  background: var(--brand-bc1);
  height: calc(100dvh - var(--gap-huge));
}

@media (min-width: 420px) {
  .build-banner {
    padding: var(--offset) 0 var(--gap-l) 0;
  }
}

@media (min-width: 1024px) {
  .build-banner {
    --offset: calc(var(--gap-col) + var(--header-size-desktop));
    align-items: flex-start;
    gap: var(--gap-s);
    height: auto;
    min-height: 40rem;
  }
}

.build-banner__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-sm);
}

@media (min-width: 1024px) {
  .build-banner__top {
    padding-left: var(--gap-m);
    grid-column: 1/7;
  }
}

.build-banner__tags {
  display: flex;
  gap: var(--gap-s);
}

.build-banner__title {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  font-style: italic;
}

@media (min-width: 1200px) {
  .build-banner__title {
    font-size: 9.6rem;
  }
}

.build-banner__description {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  text-wrap: balance;
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
  padding-top: var(--gap-s);
}

@media (min-width: 700px) {
  .build-banner__description {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .build-banner__description {
    padding-left: var(--gap-m);
    padding-top: 0;
    grid-column: 1/6;
  }
}

.build-banner__stats {
  --size: var(--gap-m);
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--size);
  padding-top: var(--size);
  margin-top: var(--size);
}

@media (min-width: 420px) {
  .build-banner__stats {
    --size: var(--gap-l);
  }
}

.build-banner__stats:before {
  --offset: calc(var(--gap-l) * -1);
  content: '';
  position: absolute;
  inset: 0 var(--offset) auto;
  background: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  height: 1px;
}

@media (min-width: 1024px) {
  .build-banner__stats:before {
    display: none;
  }
}

@media (min-width: 1024px) {
  .build-banner__stats {
    display: contents;
  }
}

.build-banner__stat {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  align-items: flex-end;
}

.build-banner__stat--first {
  align-items: flex-start;
}

@media (min-width: 700px) {
  .build-banner__stat {
    font-size: 1.8rem;
  }
}

.build-banner__stat span:first-child {
  color: color-mix(in srgb, var(--brand-bc5) 60%, transparent);
}

.build-banner__stat span:last-child {
  color: var(--brand-bc5);
}

@media (min-width: 1024px) {
  .build-banner__stat {
    text-align: right;
    align-items: flex-start;
    grid-column: 11/13;
  }

  .build-banner__stat--first {
    grid-column: 8/11;
  }
}

/* "View full specs" — underline that shrinks right and regrows from the left. */
.build-banner__specs {
  --line-dur: 0.5s;
  --line-ease: var(--easing-bezzy2);
  position: relative;
  padding: 0;
  cursor: pointer;
  color: var(--brand-bc5);
  text-align: left;
  transition: color var(--line-dur) var(--line-ease);
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
}

@media (min-width: 700px) {
  .build-banner__specs {
    font-size: 1.8rem;
  }
}

/* bodyL's 1.4 line-height leaves 0.2em under the glyphs; the line sits just inside it. */
.build-banner__specs::before,
.build-banner__specs::after {
  content: '';
  position: absolute;
  inset: auto 0 0.15em;
  height: 1px;
  transition: transform var(--line-dur) var(--line-ease);
}

.build-banner__specs::before {
  transform: scaleX(1);
  transform-origin: right center;
  background: var(--brand-bc5);
}

.build-banner__specs::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: calc(var(--line-dur) * 0.3);
  background: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .build-banner__specs:hover::before {
    transform: scaleX(0);
  }

  .build-banner__specs:hover::after {
    transform: scaleX(1);
  }
}

/* Fundo do topo — imagem do projeto bem esmaecida atrás do título. */
.build-banner {
  overflow: clip;
}

.build-banner > waffl-grid {
  position: relative;
  z-index: 1;
}

.build-banner__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.build-banner__backdrop picture {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.build-banner__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.85);
}

/* Funde a imagem no preto: some sob o cabeçalho e escurece atrás dos textos. */
.build-banner__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--brand-bc1) 0%, color-mix(in srgb, var(--brand-bc1) 0%, transparent) 28%, color-mix(in srgb, var(--brand-bc1) 0%, transparent) 42%, color-mix(in srgb, var(--brand-bc1) 85%, transparent) 78%, var(--brand-bc1) 100%),
    radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--brand-bc1) 0%, transparent) 40%, color-mix(in srgb, var(--brand-bc1) 70%, transparent) 100%);
}
/* FeaturedImage (sc-f4ec60ce-0) — gpevbk (archive) / hriEAt (interactive). */

.featured-image {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: clip;
  user-select: none;
  pointer-events: none;
  cursor: default;
  background: var(--brand-bc1);
}

.featured-image--interactive {
  cursor: pointer;
}

.featured-image parallax-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

/* The jacket stays pointer-events: none so the sticky image never blocks the
   page beneath; only the hover target opts back in (the custom cursor keys
   off it) and only when there is something to open. */
.featured-image parallax-trigger[data-cursor] {
  pointer-events: none;
}

.featured-image--interactive parallax-trigger[data-cursor] {
  pointer-events: auto;
}

.featured-image parallax-target {
  position: absolute;
  inset: 0;
  display: block;
}

.featured-image img {
  pointer-events: none;
  object-fit: cover;
  object-position: bottom center;
}

.featured-image--centred img {
  object-position: center;
}
/* SingleBuildHero wrapper (sc-725e3499-0). */

.single-build-hero {
  position: relative;
  z-index: 2;
}
/* BuildsHero (sc-dcca4473-0 … 4). */

.builds-hero {
  position: relative;
  z-index: 1;
  overflow: clip;
  height: 100dvh;
  padding-top: 50dvh;
  background: var(--brand-bc1);
}

.builds-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--global-black) 85%, transparent) 0%, transparent 62%);
}

/* Under the WebGL listing the background is painted on the shared canvas
   beneath this section once its texture is up; the DOM copy stays in the
   layout (its rect is what the plane reads) and the ground goes too. */
.builds-hero[data-plane-painted='true'] {
  background: transparent;
}

.builds-hero[data-plane-painted='true'] picture {
  opacity: 0;
}

.builds-hero__background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.builds-hero__background picture {
  display: block;
  width: 100%;
  height: 100%;
}

.builds-hero__background picture img {
  display: block;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .builds-hero__background picture img {
    object-position: center;
  }
}

.builds-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50dvh;
}

.builds-hero__content {
  isolation: isolate;
}

/* Soft dark "fade" only behind the title and the description. */
.builds-hero__content::before {
  content: "";
  position: absolute;
  inset: 0 -4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 12 12 / 0.6) 0%, rgb(12 12 12 / 0.35) 55%, rgb(12 12 12 / 0) 100%);
}

.builds-hero__heading {
  margin-bottom: var(--gap-s);
}

/* h1 on the listing's intro, h2 on the copies that close each loop seam —
   the two must look identical. */
.builds-hero__heading h1,
.builds-hero__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  color: var(--brand-bc5);
  text-align: center;
}

@media (min-width: 1200px) {
  .builds-hero__heading h1,
  .builds-hero__heading h2 {
    font-size: 14rem;
  }
}

.builds-hero__description {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .builds-hero__description {
    font-size: 1.8rem;
  }
}

/* Box $l / $huge = "5/9" */
@media (min-width: 1024px) {
  .builds-hero__description {
    grid-column: 5/9;
  }
}

@media (min-width: 1600px) {
  .builds-hero__description {
    grid-column: 5/9;
  }
}
/* BuildsListing (sc-6b22fb2c-0). */

.builds-listing {
  position: relative;
  overflow: clip;
  background: var(--global-black);
}

/* The loop copies exist for native touch under Lenis. Reduced motion runs
   without Lenis, so nothing would fold them back: one list, one closing hero.
   Children run planes, hero, ul, hero, ul, hero… */
@media (prefers-reduced-motion: reduce) {
  .builds-listing > ul:nth-of-type(n + 2),
  .builds-listing > section:nth-of-type(n + 3) {
    display: none;
  }
}

.builds-listing > ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.builds-listing > ul > li {
  width: 100%;
  height: auto;
}
/* ImagePlanes (sc-38a6f4ab-0) + scrim (sc-38a6f4ab-1). */

.image-planes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.image-planes canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.image-planes__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--global-black) 0%, transparent) 50%, color-mix(in srgb, var(--global-black) 60%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--global-black) 45%, transparent) 0%, color-mix(in srgb, var(--global-black) 0%, transparent) 40%);
}

/* Celular/tablet: textos embaixo → escurecimento reforçado na base. */
@media (max-width: 1023px) {
  .image-planes__scrim {
    background:
      linear-gradient(to top, color-mix(in srgb, var(--global-black) 0%, transparent) 75%, color-mix(in srgb, var(--global-black) 45%, transparent) 100%),
      linear-gradient(to top, color-mix(in srgb, var(--global-black) 82%, transparent) 0%, color-mix(in srgb, var(--global-black) 45%, transparent) 30%, color-mix(in srgb, var(--global-black) 0%, transparent) 55%);
  }
}
/* SingleBuild listing item (sc-2b8449e6-0 … 7). */

.single-build {
  --height: 100dvh;
  position: relative;
  z-index: 1;
  overflow: clip;
  width: 100%;
  height: var(--height);
}

/* Under the WebGL listing the photograph is painted on the shared frame
   beneath this box once its texture is up; the DOM copy stays in the layout
   and fades out over the frame so the swap settles rather than cuts. */
.single-build picture {
  transition: opacity var(--time-l) var(--easing-ease);
}

.single-build[data-plane-painted='true'] picture {
  opacity: 0;
}

.single-build__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.single-build__background:after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--global-black) 0%, transparent) 0%, color-mix(in srgb, var(--global-black) 60%, transparent) 100%);
}

/* The WebGL layer has its own fixed scrim — a gradient scrolling with this
   box would read as a band sliding over the moving frame. */
[data-plane-painted='true'] > .single-build__background:after {
  opacity: 0;
}

.single-build__background picture {
  display: block;
  width: 100%;
  height: 100%;
}

.single-build__background picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (min-width: 1024px) {
  .single-build__background picture img {
    object-position: center;
  }
}

.single-build__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: var(--gap-huge);
  /* Long titles grow down from the header clearance, never above it. */
  min-height: 50dvh;
}

@media (max-height: 700px) {
  .single-build__content {
    padding-top: 8rem;
  }
}

@media (min-width: 1024px) {
  .single-build__content {
    padding-top: var(--gap-col);
  }
}

@media (max-height: 500px) {
  .single-build__content {
    padding-top: 8rem;
  }
}

.single-build__tags {
  display: flex;
  justify-content: center;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-sm);
}

.single-build__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  font-style: italic;
  text-align: center;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .single-build__heading h2 {
    font-size: 9.6rem;
  }
}

@media (max-height: 700px) {
  .single-build__heading h2 {
    font-size: 4.4rem;
    line-height: 1.1;
  }
}

@media (max-height: 500px) {
  .single-build__heading h2 {
    font-size: 3.6rem;
  }
}

.single-build__description {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  margin: var(--gap-s) 0 var(--gap-l);
  text-align: center;
  text-wrap: balance;
  color: var(--global-white);
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--global-black) 60%, transparent));
}

@media (min-width: 700px) {
  .single-build__description {
    font-size: 1.8rem;
  }
}

@media (max-height: 500px) {
  .single-build__description {
    margin: var(--gap-xs) 0 var(--gap-s);
  }
}

.single-build__actions {
  display: flex;
  justify-content: center;
  gap: var(--gap-s);
}

/* Box columns: tags + description $l "5/9", heading $l "4/10". */
@media (min-width: 1024px) {
  .single-build__tags,
  .single-build__description {
    grid-column: 5/9;
  }

  .single-build__heading {
    grid-column: 4/10;
  }
}

/* "Coming soon" stock item — the shared button styles (.button) with a
   disabled state that still shows a not-allowed cursor. */
.single-build__soon:disabled,
.single-build__soon:disabled:hover {
  cursor: not-allowed;
  pointer-events: auto;
  border-color: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
}

.single-build__soon:disabled > span,
.single-build__soon:disabled:hover > span {
  opacity: 1;
}

/* Celular/tablet: os textos ficam na parte de baixo da tela, sobre um
   escurecimento inferior, deixando o assunto da imagem livre no topo. */
@media (max-width: 1023px) {
  .single-build__content {
    position: absolute;
    inset: auto 0 0 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: calc(var(--gap-uber) + env(safe-area-inset-bottom, 0px));
  }

  .single-build__background:after {
    inset: 45% 0 0 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--global-black) 80%, transparent) 0%, color-mix(in srgb, var(--global-black) 45%, transparent) 55%, color-mix(in srgb, var(--global-black) 0%, transparent) 100%);
  }
}

@media (max-width: 1023px) and (max-height: 700px) {
  .single-build__content {
    padding-bottom: var(--gap-xxl);
  }
}
/* ContactHero (sc-fa285fba-0..8) + the ContactForm section (sc-d79889f-0) —
   1:1 with the original compiled CSS. */

/* Jacket (sc-fa285fba-0) */
.contact-hero {
  --height: 100dvh;
  position: relative;
  z-index: 1;
  overflow: clip;
  min-height: var(--height);
  background: var(--global-black);
}

/* Hero (sc-fa285fba-1) */
.contact-hero__intro {
  position: relative;
  overflow: clip;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: var(--gap-huge);
  width: 100%;
  height: var(--height);
}

@media (min-width: 1024px) {
  .contact-hero__intro {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 0;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
  }
}

/* Background (sc-fa285fba-2) */
.contact-hero__background {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
}

.contact-hero__background:after {
  --gradient: color-mix(in srgb, var(--brand-bc1) 0%, transparent) 0%, var(--brand-bc1) 100%;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, var(--gradient));
}

@media (min-width: 1024px) {
  .contact-hero__background:after {
    background: linear-gradient(to right, var(--gradient));
  }
}

.contact-hero__background img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Title (sc-fa285fba-3) — $l "7/12" */
.contact-hero__title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .contact-hero__title {
    grid-column: 7/12;
  }
}

.contact-hero__title h1 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  color: var(--global-white);
  text-wrap: balance;
}

@media (min-width: 1200px) {
  .contact-hero__title h1 {
    font-size: 9.6rem;
  }
}

/* Details (sc-fa285fba-4) — contact list + logo marquee */
.contact-hero__details {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-huge);
  padding-bottom: var(--gap-huge);
  width: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-bc3) 0%, transparent) 0%, var(--brand-bc3) 90%);
}

@media (min-width: 1024px) {
  .contact-hero__details {
    padding-block: var(--gap-col);
    gap: var(--gap-col);
  }
}

@media (min-width: 1024px) {
  .contact-hero__details waffl-grid {
    padding-inline: calc(3.2rem / 2);
    column-gap: 3.2rem;
  }
}

/* List (sc-fa285fba-5) — $l "2/6" */
.contact-hero__list {
  --border: 1px solid color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: var(--border);
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .contact-hero__list {
    grid-column: 2/6;
  }
}

/* SingleOption (sc-fa285fba-6) */
.contact-hero__item {
  --padding: var(--gap-l);
}

.contact-hero__item hgroup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  width: 100%;
  padding: var(--padding);
  border: var(--border);
  border-top: 0;
  background: color-mix(in srgb, var(--brand-bc1) 10%, transparent);
}

@media (min-width: 1024px) {
  .contact-hero__item hgroup {
    backdrop-filter: blur(24px);
  }
}

.contact-hero__item h2,
.contact-hero__item h3,
.contact-hero__item p {
  text-wrap: balance;
}

.contact-hero__item h2,
.contact-hero__item p {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

.contact-hero__item h2 {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .contact-hero__item h2 {
    font-size: 1rem;
  }
}

.contact-hero__item h3 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--brand-bc5);
  text-transform: none;
}

@media (min-width: 1200px) {
  .contact-hero__item h3 {
    font-size: 2.4rem;
  }
}

.contact-hero__item h3 a {
  display: block;
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact-hero__item h3 a:hover span > span {
    transform: translateY(1.2em);
  }
}

.contact-hero__item h3 a > span {
  display: block;
  overflow: clip;
}

.contact-hero__item h3 a > span > span {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -1.2em 0px;
  transition: transform 0.5s var(--easing-bezzy2);
}

.contact-hero__item h3 a > span > span:nth-child(1) { transition-delay: 0s; }
.contact-hero__item h3 a > span > span:nth-child(2) { transition-delay: 0.02s; }
.contact-hero__item h3 a > span > span:nth-child(3) { transition-delay: 0.04s; }
.contact-hero__item h3 a > span > span:nth-child(4) { transition-delay: 0.06s; }
.contact-hero__item h3 a > span > span:nth-child(5) { transition-delay: 0.08s; }
.contact-hero__item h3 a > span > span:nth-child(6) { transition-delay: 0.1s; }
.contact-hero__item h3 a > span > span:nth-child(7) { transition-delay: 0.12s; }
.contact-hero__item h3 a > span > span:nth-child(8) { transition-delay: 0.14s; }
.contact-hero__item h3 a > span > span:nth-child(9) { transition-delay: 0.16s; }
.contact-hero__item h3 a > span > span:nth-child(10) { transition-delay: 0.18s; }
.contact-hero__item h3 a > span > span:nth-child(11) { transition-delay: 0.2s; }
.contact-hero__item h3 a > span > span:nth-child(12) { transition-delay: 0.22s; }
.contact-hero__item h3 a > span > span:nth-child(13) { transition-delay: 0.24s; }
.contact-hero__item h3 a > span > span:nth-child(14) { transition-delay: 0.26s; }
.contact-hero__item h3 a > span > span:nth-child(15) { transition-delay: 0.28s; }
.contact-hero__item h3 a > span > span:nth-child(16) { transition-delay: 0.3s; }
.contact-hero__item h3 a > span > span:nth-child(17) { transition-delay: 0.32s; }
.contact-hero__item h3 a > span > span:nth-child(18) { transition-delay: 0.34s; }
.contact-hero__item h3 a > span > span:nth-child(19) { transition-delay: 0.36s; }
.contact-hero__item h3 a > span > span:nth-child(20) { transition-delay: 0.38s; }

.contact-hero__item p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
}

@media (min-width: 700px) {
  .contact-hero__item p {
    font-size: 1.4rem;
  }
}

.contact-hero__item svg {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
  pointer-events: none;
  stroke: var(--brand-bc5);
}

.contact-hero__item svg [data-opacity] {
  opacity: 0.4;
}

/* Locations (sc-fa285fba-7) */
.contact-hero__locations {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  border-top: 0;
}

/* Location (sc-fa285fba-8) */
.contact-hero__location {
  --ease: ease-in-out;
  --dur: 0.5s;
  --play-state: paused;
  width: 100%;
}

.contact-hero__location a {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--gap-sm) var(--gap-l);
  background: color-mix(in srgb, var(--global-black) 10%, transparent);
  text-decoration: none;
  transition: border-color var(--ease) var(--dur);
}

@media (min-width: 1024px) {
  .contact-hero__location a {
    backdrop-filter: blur(0.8rem);
  }
}

.contact-hero__location a:first-child {
  border-right: 1px solid color-mix(in srgb, var(--brand-bc5) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .contact-hero__location a:hover {
    cursor: pointer;
  }

  .contact-hero__location a:hover > span {
    opacity: 0.6;
  }

  .contact-hero__location a:hover > span span {
    transform: translateY(4em);
  }
}

.contact-hero__location a > span {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  display: block;
  position: relative;
  z-index: 1;
  overflow: clip;
  transition: opacity var(--ease) var(--dur), letter-spacing var(--ease) var(--dur);
}

@media (min-width: 700px) {
  .contact-hero__location a > span {
    font-size: 1rem;
  }
}

.contact-hero__location a > span span {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-shadow: color-mix(in srgb, var(--brand-bc5) 60%, transparent) 0px -4em 0px;
  transition: transform 0.5s var(--easing-bezzy2);
}

.contact-hero__location a > span span:nth-child(1) { transition-delay: 0s; }
.contact-hero__location a > span span:nth-child(2) { transition-delay: 0.02s; }
.contact-hero__location a > span span:nth-child(3) { transition-delay: 0.04s; }
.contact-hero__location a > span span:nth-child(4) { transition-delay: 0.06s; }
.contact-hero__location a > span span:nth-child(5) { transition-delay: 0.08s; }
.contact-hero__location a > span span:nth-child(6) { transition-delay: 0.1s; }
.contact-hero__location a > span span:nth-child(7) { transition-delay: 0.12s; }
.contact-hero__location a > span span:nth-child(8) { transition-delay: 0.14s; }
.contact-hero__location a > span span:nth-child(9) { transition-delay: 0.16s; }
.contact-hero__location a > span span:nth-child(10) { transition-delay: 0.18s; }
.contact-hero__location a > span span:nth-child(11) { transition-delay: 0.2s; }
.contact-hero__location a > span span:nth-child(12) { transition-delay: 0.22s; }
.contact-hero__location a > span span:nth-child(13) { transition-delay: 0.24s; }
.contact-hero__location a > span span:nth-child(14) { transition-delay: 0.26s; }
.contact-hero__location a > span span:nth-child(15) { transition-delay: 0.28s; }
.contact-hero__location a > span span:nth-child(16) { transition-delay: 0.3s; }
.contact-hero__location a > span span:nth-child(17) { transition-delay: 0.32s; }
.contact-hero__location a > span span:nth-child(18) { transition-delay: 0.34s; }
.contact-hero__location a > span span:nth-child(19) { transition-delay: 0.36s; }
.contact-hero__location a > span span:nth-child(20) { transition-delay: 0.38s; }

/* ContactForm section (sc-d79889f-0) */
.contact-enquiry {
  position: relative;
  z-index: 2;
  padding-bottom: var(--gap-huge);
  background: var(--brand-bc3);
}

@media (min-width: 1024px) {
  .contact-enquiry {
    padding-bottom: var(--gap-col);
  }
}
/* ContactProcess (sc-51e8ed87-0..6) — 1:1 with the original compiled CSS. */

/* Jacket (sc-51e8ed87-0) */
.contact-process {
  position: relative;
  z-index: 1;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap-huge);
  min-height: 120dvh;
  padding-top: var(--gap-huge);
  background: var(--global-black);
}

@media (min-width: 1024px) {
  .contact-process {
    justify-content: space-between;
    gap: calc(var(--gap-col) * 2);
    padding-top: var(--gap-col);
    min-height: 70rem;
    min-height: 120dvh;
  }
}

.contact-process waffl-grid[data-level='bottom'] {
  background: linear-gradient(to top, color-mix(in srgb, var(--global-black) 60%, transparent) 0%, transparent 100%);
  padding-bottom: var(--gap-col);
}

/* Background (sc-51e8ed87-1) */
.contact-process__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  filter: brightness(0.5);
}

@media (min-width: 1024px) {
  .contact-process__background {
    filter: none;
  }
}

/* BackgroundParallax (sc-51e8ed87-2) */
.contact-process__parallax {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 140%;
  transform: translateZ(0);
}

.contact-process__parallax > span {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.contact-process__parallax img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Heading (sc-51e8ed87-3) — $l "2/8" */
@media (min-width: 1024px) {
  .contact-process__heading {
    grid-column: 2/8;
  }
}

.contact-process__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
  color: var(--brand-bc5);
  text-wrap: balance;
  text-align: center;
}

@media (min-width: 1024px) {
  .contact-process__heading h2 {
    font-size: 6.4rem;
  }
}

@media (min-width: 1200px) {
  .contact-process__heading h2 {
    font-size: 8rem;
  }
}

@media (min-width: 1024px) {
  .contact-process__heading h2 {
    text-align: left;
  }
}

/* StepsWrap (sc-51e8ed87-4) — $l "2/12" */
.contact-process__steps-wrap {
  width: 100%;
}

@media (min-width: 1024px) {
  .contact-process__steps-wrap {
    grid-column: 2/12;
  }
}

/* Steps (sc-51e8ed87-5) — gap = theme grid gutter (l) */
.contact-process__steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.2rem;
}

@media (min-width: 1024px) {
  .contact-process__steps {
    flex-direction: row;
  }
}

/* Step (sc-51e8ed87-6) */
.contact-process__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-l) var(--gap-l) var(--gap-l) var(--gap-l);
  background: color-mix(in srgb, var(--brand-bc5) 10%, transparent);
  backdrop-filter: blur(8px);
  aspect-ratio: 1;
}

@media (min-width: 1024px) {
  .contact-process__step {
    backdrop-filter: blur(16px);
    padding: var(--gap-l);
    aspect-ratio: 5/6;
  }
}

/* The original also declares `transform: translateX(-var(--gap-s))`, which is
   invalid CSS and therefore dropped by browsers — omitted here on purpose. */
.contact-process__step em {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  color: var(--brand-bc5);
  text-align: center;
  margin: 0 auto;
  flex: 1;
  display: grid;
  place-items: center;
}

@media (min-width: 1200px) {
  .contact-process__step em {
    font-size: 14rem;
  }
}

@media (min-width: 1024px) {
  .contact-process__step em {
    text-align: left;
    flex: 0;
    display: block;
    margin: 0;
  }
}

.contact-process__step hgroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
  width: auto;
  text-align: center;
}

@media (min-width: 1024px) {
  .contact-process__step hgroup {
    text-align: left;
  }
}

.contact-process__step hgroup h3,
.contact-process__step hgroup p {
  text-wrap: balance;
  max-width: 32rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .contact-process__step hgroup h3,
  .contact-process__step hgroup p {
    margin: 0;
  }
}

.contact-process__step hgroup h3 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
}

@media (min-width: 1200px) {
  .contact-process__step hgroup h3 {
    font-size: 2.4rem;
  }
}

.contact-process__step hgroup p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 700px) {
  .contact-process__step hgroup p {
    font-size: 1.4rem;
  }
}
/* Approach (sc-e85696e3-0 … 6). Exactly one viewport tall — the StickyTrack
   aperture clips it with a percentage inset(). */

.approach {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100dvh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--gap-m);
  padding-block: var(--gap-huge);
}

@media (min-width: 1024px) {
  .approach {
    justify-content: space-between;
    padding-block: var(--gap-col);
  }
}

.approach [data-level='bottom'] {
  row-gap: var(--gap-l);
}

/* ---------------------------------------------------------------- background (sc-e85696e3-1/2) */

.approach__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background: var(--global-black);
}

.approach__parallax {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 140%;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.approach__parallax > span {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.approach__parallax img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(0);
}

/* Legibility: darker where the copy sits (top on mobile; top-left heading and
   bottom-right copy on desktop), the photo stays visible in between. */
.approach__background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(12 12 12 / 0.9) 0%, rgb(12 12 12 / 0.62) 38%, rgb(12 12 12 / 0) 66%),
    linear-gradient(to top, rgb(12 12 12 / 0.7) 0%, rgb(12 12 12 / 0) 28%);
}

@media (min-width: 1024px) {
  .approach__background::after {
    background:
      linear-gradient(to bottom, rgb(12 12 12 / 0.65) 0%, rgb(12 12 12 / 0) 42%),
      linear-gradient(to top, rgb(12 12 12 / 0.75) 0%, rgb(12 12 12 / 0) 48%),
      radial-gradient(40% 45% at 82% 78%, rgb(12 12 12 / 0.55) 0%, rgb(12 12 12 / 0) 100%);
  }
}

/* Mobile: heading + copy + CTA together at the top (where the photo is
   empty), the technology carousel at the bottom. */
@media (max-width: 1023px) {
  .approach {
    justify-content: flex-start;
    padding-bottom: var(--gap-l);
  }

  .approach [data-level='bottom'] {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .approach__content {
    order: 0;
  }

  .approach__logos {
    order: 1;
    width: 100%;
    margin-top: auto;
  }
}

/* ---------------------------------------------------------------- heading (sc-e85696e3-3) */

.approach__heading h2 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  text-wrap: balance;
  color: var(--global-white);
}

@media (min-width: 1024px) {
  .approach__heading {
    grid-column: 2/7;
  }
}

@media (min-width: 1200px) {
  .approach__heading h2 {
    font-size: 9.6rem;
  }
}

/* ---------------------------------------------------------------- logos (sc-e85696e3-4) */

@media (min-width: 1024px) {
  .approach__logos {
    grid-column: 1/8;
  }
}

@media (min-width: 1200px) {
  .approach__logos {
    grid-column: 1/9;
  }
}

/* ---------------------------------------------------------------- copy + CTA (sc-e85696e3-5/6) */

.approach__content {
  --offset: calc(2.4rem);
  padding-inline: var(--offset);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  text-wrap: balance;
}

@media (min-width: 700px) {
  .approach__content {
    --offset: calc(3.2rem / 2);
  }
}

@media (min-width: 1024px) {
  .approach__content {
    --offset: calc(3.2rem / 2);
    grid-column: 8/12;
  }
}

@media (min-width: 1200px) {
  .approach__content {
    grid-column: 9/12;
  }
}

.approach__text {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--global-white) 80%, transparent);
  text-wrap: balance;
}

@media (min-width: 700px) {
  .approach__text {
    font-size: 1.8rem;
  }
}
/* BuildsIntroduction — 1:1 with sc-dd0c2790-0…4 (+ Box grid columns iRvBrB / ikaYsN). */

/* ---------------------------------------------------------------- section (sc-dd0c2790-0) */

.builds-introduction {
  --single-col: var(--gap-col);
  --double-col: calc(var(--gap-col) * 2);
  position: relative;
  z-index: 2;
  padding-block: var(--gap-huge);
  width: 100%;
  min-height: 100dvh;
  overflow: clip;
  background: var(--global-black);
}

@media (min-width: 1024px) {
  .builds-introduction {
    padding-block: var(--double-col);
  }
}

.builds-introduction [data-placement='top'] {
  position: sticky;
  top: var(--gap-huge);
  left: 0;
  z-index: -1;
}

@media (min-width: 1024px) {
  .builds-introduction [data-placement='top'] {
    top: calc(var(--single-col) * 2);
  }
}

/* ---------------------------------------------------------------- background (sc-dd0c2790-1) */

.builds-introduction__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  background: var(--global-black);
  opacity: 0.4;
}

.builds-introduction__background figure {
  position: sticky;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--global-black) 90%, transparent) 0%, transparent 100%);
  transform: translateZ(0);
}

/* ---------------------------------------------------------------- pattern layer (sc-dd0c2790-2) */

.builds-introduction__pattern {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.builds-introduction__pattern svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- hgroups (sc-dd0c2790-3) */

.builds-introduction__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gap-s);
}

.builds-introduction__heading h2,
.builds-introduction__heading em {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  text-wrap: balance;
  text-transform: unset;
}

@media (min-width: 1200px) {
  .builds-introduction__heading h2,
  .builds-introduction__heading em {
    font-size: 9.6rem;
  }
}

/* displayL at l (the mixin re-applies text-transform: capitalize) */
@media (min-width: 1024px) {
  .builds-introduction__heading h2,
  .builds-introduction__heading em {
    font-family: var(--font-heading);
    text-transform: none;
    font-synthesis: none;
    font-weight: 200;
    font-size: 8rem;
    line-height: 1.1;
    letter-spacing: -0.2rem;
  }
}

@media (min-width: 1024px) and (min-width: 1200px) {
  .builds-introduction__heading h2,
  .builds-introduction__heading em {
    font-size: 14rem;
  }
}

.builds-introduction__heading h2 span,
.builds-introduction__heading em span {
  display: block;
}

.builds-introduction__heading em {
  font-style: normal;
}

.builds-introduction__heading p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  text-wrap: balance;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 700px) {
  .builds-introduction__heading p {
    font-size: 1.8rem;
  }
}

@media (min-width: 1200px) {
  .builds-introduction__heading p {
    max-width: calc(8.333vw * 4 - 3.2rem);
  }
}

/* Box columns: top $l="5/9" (iRvBrB) · bottom $l="4/10" $huge="3/11" (ikaYsN) */
@media (min-width: 1024px) {
  .builds-introduction__heading--top {
    grid-column: 5/9;
  }

  .builds-introduction__heading--bottom {
    grid-column: 4/10;
  }
}

@media (min-width: 1600px) {
  .builds-introduction__heading--bottom {
    grid-column: 3/11;
  }
}

/* ---------------------------------------------------------------- cars (sc-dd0c2790-4) */

.builds-introduction__cars {
  position: relative;
  margin-block: var(--gap-l);
  user-select: none;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .builds-introduction__cars {
    margin-block: var(--single-col);
  }
}

.builds-introduction__cars picture {
  --width: 85vw;
  --buffer: 5vw;
  --half-width: calc(var(--width) / 2);
  display: block;
  position: relative;
  margin: 0 auto;
  width: var(--width);
  aspect-ratio: 707/1402;
}

@media (min-width: 1024px) {
  .builds-introduction__cars picture {
    --width: 50vw;
  }
}

@media (min-width: 1200px) {
  .builds-introduction__cars picture {
    --buffer: 10vw;
    --width: 70.7rem;
  }
}

.builds-introduction__cars picture[data-car='main'] {
  position: relative;
  z-index: 1;
}

.builds-introduction__cars picture[data-car='side'] {
  display: none;
}

@media (min-width: 1024px) {
  .builds-introduction__cars picture[data-car='side'] {
    display: block;
    position: absolute;
    top: 25%;
  }
}

.builds-introduction__cars picture[data-side='left'] {
  right: calc(var(--width) + var(--half-width) + var(--buffer));
}

.builds-introduction__cars picture[data-side='right'] {
  left: calc(var(--width) + var(--half-width) + var(--buffer));
}

/* Mobile/tablet: os três celulares desencontrados, como no desktop — o
   principal ao centro e os laterais atrás dele, cortados pelas bordas da tela
   e em alturas diferentes (o parallax lateral continua ativo). */
@media (max-width: 1023px) {
  .builds-introduction__cars picture {
    --width: 60vw;
  }

  .builds-introduction__cars picture[data-car='side'] {
    display: block;
    position: absolute;
    z-index: 0;
    width: 46vw;
  }

  .builds-introduction__cars picture[data-side='left'] {
    top: 18%;
    right: auto;
    left: -15vw;
  }

  .builds-introduction__cars picture[data-side='right'] {
    top: 34%;
    left: auto;
    right: -15vw;
  }
}

.builds-introduction__cars picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
/* Hero (sc-12ea9db1-0 … 4). Full-viewport layer of the StickyTrack stage:
   H1 at the top, description at the bottom; the 3D globe (.hero__globe) is
   rendered by the Introduction layer underneath. */

.hero {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

/* The layer is a non-interactive overlay, but the copy stays hit-testable
   (the original re-enabled pointer events on its CMS-editable nodes). */
.hero__title,
.hero__description {
  pointer-events: auto;
}

.hero [data-text] {
  --offset: var(--gap-xxl);
  --offset-top: calc((var(--gap-l) * 2) + 3.2rem);
  position: absolute;
  left: 0;
  right: 0;
}

@media (min-width: 1024px) {
  .hero [data-text] {
    --offset-top: calc((var(--gap-xl) * 2) + 3.2rem);
  }
}

.hero [data-text='top'] {
  top: 0;
  height: 50svh;
  align-items: center;
  padding-top: var(--offset-top);
}

@media (min-width: 1024px) {
  .hero [data-text='top'] {
    align-items: flex-start;
  }

  @media (min-height: 800px) {
    .hero [data-text='top'] {
      align-items: center;
    }
  }
}

.hero [data-text='bottom'] {
  bottom: 0;
  padding-bottom: var(--offset);
}

/* ---------------------------------------------------------------- globe (./hero-globe.js) */
/* Transparent layer: the stage's forged-carbon texture (sticky-track.css)
   shows behind the globe; only a soft red glow and a vignette are added. */

.hero__globe {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(44% 40% at 50% 52%, color-mix(in srgb, var(--brand-primary, #cc4b37) 11%, transparent) 0%, transparent 72%);
}

.hero__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 85% at 50% 50%, transparent 58%, rgb(0 0 0 / 0.45) 100%);
}

.hero__globe-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

.hero__globe--fallback .hero__globe-canvas {
  display: none;
}

/* "Conectado de · Cidade · País" — preso ao marcador do visitante. */
.hero__geo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.6s var(--easing-ease, ease);
}

.hero__geo--visible {
  opacity: 1;
}

/* Rótulo à esquerda do ponto (sem espaço à direita). */
.hero__geo--left {
  flex-direction: row-reverse;
  text-align: right;
}

.hero__geo--left .hero__geo-line {
  margin-left: 0;
  margin-right: 1.6rem;
  transform-origin: right center;
  background: linear-gradient(to left, color-mix(in srgb, #3ee07a 90%, transparent), color-mix(in srgb, #3ee07a 10%, transparent));
}

@media (max-width: 1023px) {
  .hero__geo--left .hero__geo-line {
    margin-right: 1rem;
  }
}

.hero__geo-line {
  display: block;
  width: 4.8rem;
  height: 1px;
  margin-left: 1.6rem;
  background: linear-gradient(to right, color-mix(in srgb, #3ee07a 90%, transparent), color-mix(in srgb, #3ee07a 10%, transparent));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.8s var(--easing-bezzy2, ease) 0.1s;
}

.hero__geo--visible .hero__geo-line {
  transform: scaleX(1);
}

.hero__geo-text {
  display: grid;
  gap: 0.3rem;
  translate: 0 -0.1rem;
}

.hero__geo-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: #3ee07a;
}

.hero__geo-place {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02rem;
  white-space: nowrap;
  color: var(--brand-bc5);
}

@media (max-width: 1023px) {
  .hero__geo-line {
    width: 2.8rem;
    margin-left: 1rem;
  }

  .hero__geo-place {
    font-size: 1.2rem;
  }
}

/* ---------------------------------------------------------------- title (sc-12ea9db1-3) */

.hero__title {
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
  opacity: 0;
  font-family: var(--font-heading);
  text-transform: none;
  font-weight: 200;
  font-size: 6.4rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
}

@media (min-width: 320px) {
  .hero__title {
    grid-column: 1/5;
  }
}

@media (min-width: 420px) {
  .hero__title {
    font-size: 7.2rem;
  }
}

@media (min-width: 700px) {
  .hero__title {
    grid-column: 2/6;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    grid-column: 4/10;
    font-size: clamp(7.2rem, 10dvh, 9.6rem);
  }
}

/* ---------------------------------------------------------------- description (sc-12ea9db1-4) */

.hero__description {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
  opacity: 0;
}

/* The original's tablet column ("$3/11") is an invalid value the browser
   drops, so between 700px and 1023px the paragraph spans the full row. */

@media (min-width: 700px) {
  .hero__description {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .hero__description {
    grid-column: 4/10;
  }
}

@media (min-width: 1200px) {
  .hero__description {
    grid-column: 5/9;
  }
}
/* ImageTrail (sc-d2fec375-0 … 3). Items are positioned and shown from JS. */

.image-trail {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.image-trail--active {
  pointer-events: auto;
}

.image-trail__list {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-trail__item {
  position: absolute;
  width: 21.6rem;
  height: 27rem;
  overflow: hidden;
  border-radius: 0.3125em;
  opacity: 0;
  visibility: hidden;
}

.image-trail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Introduction (sc-2b039258-0 … 6). Bottom layer of the StickyTrack stage. */

.introduction {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
}

/* Raised above the Hero once the heading starts growing in. */
.introduction--elevated {
  z-index: 3;
}

/* ---------------------------------------------------------------- heading (sc-2b039258-3/4) */

.introduction__heading-wrap {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gap-l);
  pointer-events: none;
}

.introduction__heading {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
  text-align: center;
  text-wrap: balance;
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 1024px) {
  .introduction__heading {
    font-size: 6.4rem;
    text-wrap: balance;
  }
}

@media (min-width: 1200px) {
  .introduction__heading {
    font-size: 8rem;
  }
}
/* ServiceListing (sc-ec8dda4b-0 … -7) — 1:1 with the original compiled CSS.
   Box grid columns folded in: list hxkuyx (l 2/6), aside klloGM (l 7/13).
   The grid is the $noGutter + $noMargin variant (.grid--no-gutter.grid--no-margin). */

/* sc-ec8dda4b-0 · wrapper */
.service-listing {
  position: relative;
  z-index: 1;
  background: var(--brand-bc1);
  /* NOTE • Crops the fixed Texture layer below to this section's bounds.
     clip-path clips the whole subtree — fixed descendants included — which
     is what turns the stationary texture into a scrolling window. */
  clip-path: inset(0);
}

/* sc-ec8dda4b-1 · fixed forged-carbon texture (desktop only).
   Texture file: public/images/forged-carbon.jpg (not a vehicle photo). */
.service-listing__texture {
  display: none;
}

@media (min-width: 1024px) {
  .service-listing__texture {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url('/images/forged-carbon.jpg') repeat center center;
    background-size: 313px 314px;
    opacity: 0.2;
    pointer-events: none;
  }
}

/* sc-ec8dda4b-2 · track */
.service-listing__track {
  position: relative;
  z-index: 1;
  background: transparent;
  /* NOTE • The scroll parallax (service-listing.js) writes --section-lift on
     this element by hand rather than through a GSAP transform, so the
     property only ever changes on desktop and rests at zero everywhere else. */
  translate: 0 var(--section-lift, 0dvh);
}

/* sc-ec8dda4b-3 · content column */
@media (min-width: 1024px) {
  .service-listing__list {
    grid-column: 2/6;
  }
}

/* sc-ec8dda4b-4 · picture column */
.service-listing__aside {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .service-listing__aside {
    display: block;
    position: relative;
    inset: unset;
    grid-column: 7/13;
  }
}

/* sc-ec8dda4b-5 · sticky picture stack */
.service-listing__sticky {
  position: absolute;
  inset: 0;
  overflow: clip;
}

@media (min-width: 1024px) {
  .service-listing__sticky {
    position: sticky;
    inset: 0 auto auto 0;
    height: 100dvh;
    width: 100%;
    overflow: clip;
  }
}

/* sc-ec8dda4b-6 · ServiceContent */
.service-listing__content {
  --grid-offset: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 75dvh;
  padding-inline: var(--grid-offset);
}

@media (min-width: 1024px) {
  .service-listing__content {
    --grid-offset: calc(3.2rem / 2);
    height: 100dvh;
  }
}

.service-listing__content hgroup {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.service-listing__content hgroup p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

@media (min-width: 700px) {
  .service-listing__content hgroup p {
    font-size: 1rem;
  }
}

.service-listing__content hgroup h3 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .service-listing__content hgroup h3 {
    font-size: 9.6rem;
  }
}

.service-listing__content > p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  margin-top: var(--gap-sm);
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .service-listing__content > p {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .service-listing__content > p {
    text-wrap: balance;
  }
}

.service-listing__content a {
  margin-top: var(--gap-l);
}

/* sc-ec8dda4b-7 · ServiceImage */
.service-listing__picture {
  display: block;
  position: relative;
  overflow: clip;
  height: 75dvh;
  width: 100%;
  background: var(--brand-bc1);
}

@media (min-width: 1024px) {
  .service-listing__picture {
    position: absolute;
    inset: 0;
    clip-path: inset(100% 0% 0% 0%);
    height: 100%;
  }
}

.service-listing__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
}

@media (min-width: 1024px) {
  .service-listing__picture img {
    opacity: 1;
  }
}
/* ServicesHero (sc-d69e8bb7-0 … -6) — 1:1 with the original compiled CSS.
   Box grid columns folded in: heading eIEVnu (l 2/9 · huge 2/8),
   body fOTidA (l 2/7). */

/* sc-d69e8bb7-0 · section */
.services-hero {
  position: relative;
  z-index: 1;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75dvh;
  padding-block: var(--gap-huge);
  background: var(--brand-bc1);
}

@media (min-width: 1024px) {
  .services-hero {
    padding-block: var(--gap-col);
    justify-content: flex-start;
    min-height: 100dvh;
    height: auto;
  }
}

.services-hero waffl-grid {
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 1024px) {
  .services-hero waffl-grid {
    height: auto;
    justify-content: flex-start;
  }
}

/* sc-d69e8bb7-1 · picture column (desktop only) */
.services-hero__media {
  display: none;
}

@media (min-width: 1024px) {
  .services-hero__media {
    --col: 8.333vw;
    position: absolute;
    z-index: -1;
    top: 0;
    right: calc((var(--col) * 1) + (3.2rem / 2));
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--col) * 3 - 3.2rem);
    height: 100%;
  }
}

/* sc-d69e8bb7-2 · 2:3 window */
.services-hero__frame {
  position: relative;
}

@media (min-width: 1024px) {
  .services-hero__frame {
    width: 100%;
    overflow: clip;
    aspect-ratio: 2/3;
  }
}

/* sc-d69e8bb7-3 · picture (140% tall for the counter-parallax) */
.services-hero__picture {
  position: relative;
}

@media (min-width: 1024px) {
  .services-hero__picture {
    display: block;
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    z-index: 1;
    transform: translateZ(0);
    backface-visibility: hidden;
    background: var(--brand-bc1);
  }
}

@media (min-width: 1024px) {
  .services-hero__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transform: translateZ(0);
    opacity: 1;
  }
}

/* sc-d69e8bb7-4 · heading (headlineS) */
.services-hero__heading {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 3.6rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
  position: relative;
  z-index: 1;
  text-wrap: balance;
  text-transform: none;
  color: #181818;
  margin-bottom: var(--gap-sm);
}

@media (min-width: 1024px) {
  .services-hero__heading {
    font-size: 6.4rem;
    grid-column: 2/9;
  }
}

@media (min-width: 1200px) {
  .services-hero__heading {
    font-size: 8rem;
  }
}

@media (min-width: 1024px) {
  .services-hero__heading {
    margin-bottom: 0;
  }
}

@media (min-width: 1600px) {
  .services-hero__heading {
    grid-column: 2/8;
  }
}

/* sc-d69e8bb7-5 · text + CTA */
.services-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-top: auto;
}

@media (min-width: 1024px) {
  .services-hero__body {
    gap: var(--gap-xl);
    margin-top: var(--gap-l);
    grid-column: 2/7;
  }
}

/* sc-d69e8bb7-6 · paragraph (bodyL) */
.services-hero__text {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  position: relative;
  z-index: 1;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 700px) {
  .services-hero__text {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .services-hero__text {
    text-wrap: balance;
  }
}
/* StickyTrack (sc-2b3d2147-0 … 5).
   jacket (one viewport) → content (the pinned stage) · spacer (scroll length)
   · hold (Approach slot, + 100px on desktop) → aperture (clip host). */

.sticky-track {
  position: relative;
  min-height: 100dvh;
}

.sticky-track__jacket {
  position: relative;
  height: 100dvh;
}

@media (any-pointer: coarse) {
  .sticky-track__jacket {
    position: sticky;
    top: 0;
    /* Same layer as the fixed stage: over the spacer, under the Approach's 2. */
    z-index: 1;
  }
}

/* The stage. Pinned with inline position: fixed from JS on fine pointers. */
.sticky-track__content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: clip;
  z-index: 1;
  background-color: var(--brand-bc1);
  contain: layout paint;
}

/* Forged-carbon texture (not a photo) — expects /images/forged-carbon.jpg. */
.sticky-track__content:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/forged-carbon.jpg') repeat center center;
  background-size: 313px 314px;
  background-color: var(--global-black);
  opacity: 0.2;
  pointer-events: none;
}

/* Blackout for the Approach hand-over below 1024px (--panel-fade from JS). */
.sticky-track__content:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--global-black);
  opacity: var(--panel-fade, 0);
  pointer-events: none;
}

.sticky-track__content > * {
  position: absolute;
  inset: 0;
}

/* (introScrollLength + approach 0.4 − 1) viewports; 140dvh by default. */
.sticky-track__spacer {
  height: 140dvh;
}

.sticky-track__hold {
  position: relative;
  z-index: 2;
  height: 100dvh;
}

@media (min-width: 1024px) {
  .sticky-track__hold {
    height: calc(100dvh + 100px);
  }
}

/* Clip host — exactly one viewport. clip-path/transform are written inline
   from JS (never in CSS, so a JS failure shows the Approach normally). */
.sticky-track__aperture {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
}
/* USPS (sc-3a017878-0 … -12) — 1:1 with the original compiled CSS.
   Box grid columns folded in: aside dVOvUc (l 2/7 · xxl 3/7),
   list kMNmRm (l 8/12 · xxl 8/11).
   Note: --count is never set by the original either, so the min-height
   declarations are invalid at computed-value time (min-height: auto). */

/* sc-3a017878-0 · section */
.usps {
  position: relative;
  z-index: 5;
  min-height: calc(var(--count) * 75dvh);
  background: var(--brand-bc2);
  overflow: clip;
}

@media (min-width: 1024px) {
  .usps {
    min-height: calc(var(--count) * 100dvh);
  }
}

/* sc-3a017878-1 · blurred backdrop layer */
.usps__backdrop {
  display: none;
}

@media (min-width: 1024px) {
  .usps__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
  }
}

/* sc-3a017878-2 · sticky backdrop frame */
.usps__backdrop-frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: clip;
}

/* Legibility over the blurred backdrop: darker on the copy side (right). */
.usps__backdrop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, rgb(12 12 12 / 0.72) 0%, rgb(12 12 12 / 0.45) 45%, rgb(12 12 12 / 0.25) 100%),
    linear-gradient(to top, rgb(12 12 12 / 0.4) 0%, rgb(12 12 12 / 0) 35%);
}

@media (min-width: 1024px) {
  .usps__backdrop-frame {
    position: sticky;
    top: 0;
    left: 0;
  }
}

/* sc-3a017878-3 · backdrop picture */
.usps__backdrop-picture {
  display: block;
  position: relative;
  overflow: clip;
  background: var(--global-black);
}

@media (min-width: 1024px) {
  .usps__backdrop-picture {
    position: absolute;
    inset: -1.6rem;
  }
}

.usps__backdrop-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
  filter: blur(0.8rem);
}

/* sc-3a017878-4 · content layer */
.usps__body {
  position: relative;
  z-index: 2;
}

/* sc-3a017878-5 · sticky square column */
.usps__aside {
  display: none;
}

@media (min-width: 1024px) {
  .usps__aside {
    display: block;
    position: relative;
    z-index: 3;
    height: 100%;
    grid-column: 2/7;
  }
}

@media (min-width: 1400px) {
  .usps__aside {
    grid-column: 3/7;
  }
}

/* sc-3a017878-6 */
.usps__sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sc-3a017878-7 · square frame */
.usps__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--brand-bc1);
}

/* sc-3a017878-8 · content column */
.usps__list {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .usps__list {
    grid-column: 8/12;
  }
}

@media (min-width: 1400px) {
  .usps__list {
    grid-column: 8/11;
  }
}

/* sc-3a017878-9 · ClippedImage */
.usps__clip {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: clip;

  /* Initial Starting Styles */
  clip-path: inset(50%);
}

.usps__clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* sc-3a017878-10 · RelativeContent */
.usps__item {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: clip;
  /* Unidade cqi dos títulos = largura desta coluna. */
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .usps__item {
    height: 100dvh;
    min-height: 60rem;
  }
}

/* sc-3a017878-11 · panel ($isLast adds the bottom padding) */
.usps__content {
  position: relative;
  /* Nunca mais largo que a coluna: sem isso, palavras longas deixavam o bloco
     maior que a coluna e ele era centralizado e cortado dos dois lados. */
  width: 100%;
  min-width: 0;
  height: 100%;
  padding-block: var(--gap-huge) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.usps__content--last {
  padding-block: var(--gap-huge) var(--gap-huge);
}

@media (min-width: 1024px) {
  .usps__content {
    height: calc(33.333vw - 3.2rem);
    padding-block: 0;
    justify-content: space-between;
  }
}

.usps__content em {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  top: 0;
  font-style: normal;
}

@media (min-width: 1200px) {
  .usps__content em {
    font-size: 2.4rem;
  }
}

.usps__content h3 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  margin-top: var(--gap-m);
}

@media (min-width: 1200px) {
  .usps__content h3 {
    /* 9.6rem como no original, reduzindo só quando a palavra não cabe na
       coluna (as palavras em português são mais longas). */
    font-size: min(9.6rem, 24cqi);
  }
}

@media (max-width: 1199px) {
  .usps__content h3 {
    font-size: min(5.8rem, 24cqi);
  }
}

@media (min-width: 1024px) {
  .usps__content h3 {
    margin-top: 0;
  }
}

.usps__content p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  text-wrap: pretty;
  margin-bottom: var(--gap-m);
}

@media (min-width: 700px) {
  .usps__content p {
    font-size: 1.8rem;
  }
}

@media (min-width: 1024px) {
  .usps__content p {
    margin-bottom: 0;
    text-wrap: balance;
  }
}

/* Layout the content group, not SplitText's generated letter boxes. */
.usps__content > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-s);
  width: 100%;
}

.usps__content picture {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: clip;
  margin-block: var(--gap-m);
}

@media (min-width: 1024px) {
  .usps__content picture {
    display: none;
  }
}

.usps__content picture img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

/* sc-3a017878-12 · "/ 03" */
.usps__total {
  opacity: 0.6;
}
/* LegalPage (sc-e23cbf24-0..6) — 1:1 with the original compiled CSS. */

/* Jacket (sc-e23cbf24-0) */
.legal {
  position: relative;
  z-index: 1;
  background: var(--brand-bc1);
  padding-top: 50dvh;
}

@media (min-width: 1024px) {
  .legal {
    padding-top: 0;
  }
}

/* Intro (sc-e23cbf24-1) — $l "2/5" */
.legal__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-m);
}

@media (min-width: 1024px) {
  .legal__intro {
    grid-column: 2/5;
    position: sticky;
    top: 0;
    height: 100dvh;
  }
}

.legal__intro h1 {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 8rem;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  color: var(--brand-bc5);
}

@media (min-width: 1200px) {
  .legal__intro h1 {
    font-size: 14rem;
  }
}

/* LastUpdated (sc-e23cbf24-2) */
.legal__updated {
  display: flex;
  flex-direction: column;
  width: max-content;
}

@media (min-width: 1024px) {
  .legal__updated {
    position: fixed;
    bottom: var(--gap-xl);
    left: var(--gap-xl);
  }
}

.legal__updated span {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--brand-bc5);
}

@media (min-width: 700px) {
  .legal__updated span {
    font-size: 1rem;
  }
}

.legal__updated span:first-child {
  color: color-mix(in srgb, var(--brand-bc5) 40%, transparent);
}

/* Content (sc-e23cbf24-3) — $l "8/12" */
.legal__content {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--gap-huge);
}

@media (min-width: 1024px) {
  .legal__content {
    grid-column: 8/12;
    padding-bottom: var(--gap-col);
  }
}

/* Description (sc-e23cbf24-4) */
.legal__description {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  padding-top: var(--gap-huge);
  padding-bottom: var(--gap-xl);
}

@media (min-width: 1024px) {
  .legal__description {
    padding-top: 50dvh;
  }
}

.legal__description p {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  text-transform: none;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 1200px) {
  .legal__description p {
    font-size: 2.4rem;
  }
}

/* Sections (sc-e23cbf24-5) */
.legal__sections {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

/* Section (sc-e23cbf24-6) */
.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.legal__section h2 {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.05rem;
  color: var(--brand-bc5);
  text-wrap: pretty;
}

@media (min-width: 1200px) {
  .legal__section h2 {
    font-size: 2.4rem;
  }
}

.legal__section h2 span {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  opacity: 0.2;
}

@media (min-width: 1200px) {
  .legal__section h2 span {
    font-size: 9.6rem;
  }
}

.legal__section p {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .legal__section p {
    font-size: 1.4rem;
  }
}

.legal__section ul,
.legal__section ol {
  font-family: var(--font-body);
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.05rem;
  padding-left: 1.2em;
  color: color-mix(in srgb, var(--brand-bc5) 80%, transparent);
}

@media (min-width: 700px) {
  .legal__section ul,
  .legal__section ol {
    font-size: 1.4rem;
  }
}

.legal__section ul {
  list-style-type: disc;
}

.legal__section ol {
  list-style-type: decimal;
}

.legal__section a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* HeatHaze (sc-576b4e69-0..3) — translated from the original styled-components
   templates (the 404 was client-rendered, so there is no compiled CSS). */

/* Jacket (sc-576b4e69-0) */
.heat-haze {
  position: relative;
  overflow: clip;
  width: 100%;
  height: 100%;
  background: #000;
}

/* Image (sc-576b4e69-1) */
.heat-haze__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* Canvas (sc-576b4e69-2) — fades in once textures are uploaded ($isReady) */
.heat-haze__canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--time-m) var(--easing-bezzy);
}

.heat-haze__canvas[data-ready='true'] {
  opacity: 1;
}

.heat-haze__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Content (sc-576b4e69-3) */
.heat-haze__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.heat-haze__content a,
.heat-haze__content button {
  pointer-events: auto;
}

/* The shader draws this text; the DOM copy stays for layout and assistive
   tech. Only hidden when scripts run, and shown again if WebGL is missing. */
@media (scripting: enabled) {
  .heat-haze__content [data-haze-text] {
    opacity: 0;
    pointer-events: none;
    user-select: none;
  }

  .heat-haze[data-haze-fallback] .heat-haze__content [data-haze-text] {
    opacity: 1;
  }
}
/* NotFound (sc-4ff1c1a-0..2) — translated from the original styled-components
   templates (client-rendered page). Offsets use the original literal
   calc(8.333vw + 16px). */

/* Jacket (sc-4ff1c1a-0) */
.not-found {
  position: relative;
  overflow: clip;
  width: 100%;
  height: 100dvh;
  background: var(--global-black);
}

/* Content (sc-4ff1c1a-1) */
.not-found__content {
  position: absolute;
  bottom: calc(8.333vw + 16px);
  left: calc(8.333vw + 16px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}

/* Heading (sc-4ff1c1a-2) — headlineL, one line per span on desktop */
.not-found__title {
  font-family: var(--font-heading);
  text-transform: none;
  font-synthesis: none;
  font-weight: 200;
  font-size: 5.8rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  line-height: 1.2;
  text-transform: none;
  color: var(--global-white);
}

@media (min-width: 1200px) {
  .not-found__title {
    font-size: 9.6rem;
  }
}

.not-found__title span {
  display: block;
}

@media (min-width: 1024px) {
  .not-found__title span {
    white-space: nowrap;
  }
}