.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  pointer-events: none;
  will-change: transform;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 5rem;
  padding: 1rem 25px;
}

.site-brand,
.site-header__actions,
.header-audio,
.header-cta,
.menu-toggle {
  pointer-events: auto;
}

.site-brand {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(5.75rem, 7vw, 6.75rem);
  aspect-ratio: 1001 / 394;
}

.site-brand__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-brand__image--light {
  opacity: 1;
}

.site-brand__image--dark {
  opacity: 0;
}

.site-header.is-on-light .site-brand__image--light,
.site-header.is-brand-on-light .site-brand__image--light {
  opacity: 0;
}

.site-header.is-on-light .site-brand__image--dark,
.site-header.is-brand-on-light .site-brand__image--dark {
  opacity: 1;
}

.site-header__actions {
  position: relative;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-cta,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms ease;
}

.header-audio {
  position: relative;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: color 420ms ease, background-color 420ms ease, border-color 420ms ease, transform 220ms ease;
}

.header-audio:hover {
  transform: translateY(-1px);
}

.header-audio__icon {
  position: absolute;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-audio__icon--on,
.header-audio[aria-pressed="true"] .header-audio__icon--off {
  opacity: 0;
  transform: scale(0.72);
}

.header-audio[aria-pressed="true"] .header-audio__icon--on {
  opacity: 1;
  transform: scale(1);
}

.header-audio[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.header-cta {
  padding: 0.5rem 1rem 0.46rem;
  background: #ffffff;
  color: #0a0a0a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.menu-toggle {
  gap: 0.55rem;
  min-width: 5.25rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.header-cta:hover,
.menu-toggle:hover {
  transform: translateY(-1px);
}

.menu-toggle__icon {
  position: relative;
  display: grid;
  width: 1rem;
  height: 0.75rem;
  place-items: center;
}

.menu-toggle__icon span {
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease,
    width 420ms ease;
}

.menu-toggle__icon span:nth-child(1) {
  transform: translateY(-0.31rem);
}

.menu-toggle__icon span:nth-child(2) {
  width: 0.72rem;
}

.menu-toggle__icon span:nth-child(3) {
  transform: translateY(0.31rem);
}

.site-header.is-on-light:not(.is-menu-open) .header-cta,
.site-header.are-actions-on-light:not(.is-menu-open) .header-cta {
  background: #0a0a0a;
  color: #ffffff;
}

.site-header.is-on-light:not(.is-menu-open) .menu-toggle,
.site-header.are-actions-on-light:not(.is-menu-open) .menu-toggle {
  border-color: rgba(10, 10, 10, 0.7);
  color: rgba(10, 10, 10, 0.78);
}

.site-header.is-on-light:not(.is-menu-open) .header-audio,
.site-header.are-actions-on-light:not(.is-menu-open) .header-audio {
  border-color: rgba(10, 10, 10, 0.16);
  background: rgba(10, 10, 10, 0.08);
  color: rgba(10, 10, 10, 0.72);
}

.site-header.is-on-light:not(.is-menu-open) .header-audio[aria-pressed="true"],
.site-header.are-actions-on-light:not(.is-menu-open) .header-audio[aria-pressed="true"] {
  border-color: rgba(10, 10, 10, 0.24);
  background: rgba(10, 10, 10, 0.14);
  color: #0a0a0a;
}

.site-header.is-menu-open .menu-toggle__icon span:nth-child(1) {
  transform: rotate(45deg);
}

.site-header.is-menu-open .menu-toggle__icon span:nth-child(2) {
  width: 0;
  opacity: 0;
}

.site-header.is-menu-open .menu-toggle__icon span:nth-child(3) {
  transform: rotate(-45deg);
}

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 105;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.24);
  opacity: 0;
}

.site-menu {
  --menu-origin-x: calc(100% - 2.5rem);
  --menu-origin-y: 2.5rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  width: min(31rem, calc(100vw - 2rem));
  visibility: hidden;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 0.75rem;
  background: #f8f8f6;
  color: #0a0a0a;
  clip-path: circle(0 at var(--menu-origin-x) var(--menu-origin-y));
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.18);
  will-change: clip-path;
}

.site-menu__scroll {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: clamp(5.25rem, 10vh, 6.5rem) clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3.5vh, 2.25rem);
  scrollbar-width: thin;
}

.site-menu__navigation {
  flex: 0 0 auto;
}

.site-menu__links {
  display: grid;
  gap: 0.05em;
}

.site-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  color: rgba(10, 10, 10, 0.7);
  font-family: var(--font-primary);
  font-size: clamp(1.85rem, 5.6vh, 3.85rem);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.055em;
  transition: color 300ms ease;
}

.site-menu__word {
  display: inline-flex;
}

.site-menu__character {
  display: inline-block;
  opacity: 1;
  will-change: transform;
}

.site-menu__arrow {
  margin-left: 1rem;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  transform: translate(-0.45rem, 0.15rem);
}

.name-story-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.45rem;
  margin-top: clamp(1.2rem, 3.2vh, 2.5rem);
  padding: 0.68rem 0.9rem 0.6rem;
  border: 1px solid rgba(10, 10, 10, 0.2);
  border-radius: var(--radius-pill);
  color: rgba(10, 10, 10, 0.68);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: border-color 240ms ease, color 240ms ease, background-color 240ms ease;
}

.name-story-link:hover {
  border-color: rgba(10, 10, 10, 0.58);
  background: rgba(10, 10, 10, 0.04);
  color: #0a0a0a;
}

.site-menu__divider {
  position: relative;
  display: flex;
  align-items: center;
  margin: clamp(1.25rem, 3.3vh, 2.75rem) 0 clamp(1.2rem, 3vh, 2.5rem);
}

.site-menu__divider::before,
.site-menu__divider::after {
  height: 1px;
  flex: 1;
  background: rgba(10, 10, 10, 0.16);
  content: "";
}

.site-menu__divider span {
  position: relative;
  width: 2rem;
  height: 1rem;
}

.site-menu__divider span::before,
.site-menu__divider span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(10, 10, 10, 0.5);
  content: "";
  transform: translate(-50%, -50%);
}

.site-menu__divider span::before {
  width: 0.75rem;
  height: 1px;
}

.site-menu__divider span::after {
  width: 1px;
  height: 0.75rem;
}

.site-menu__details {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: auto;
}

.menu-eyebrow {
  margin-bottom: 0.85rem;
  color: rgba(10, 10, 10, 0.42);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.menu-contact__list {
  display: grid;
  gap: 0.38rem;
  font-size: 0.88rem;
  color: rgba(10, 10, 10, 0.7);
}

.menu-contact__list div {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.35rem;
}

.menu-contact__list dt {
  color: rgba(10, 10, 10, 0.38);
}

.menu-contact__list a,
.menu-social__list a {
  transition: color 200ms ease;
}

.menu-contact__list a:hover,
.menu-social__list a:hover {
  color: #0a0a0a;
}

.menu-social__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  color: rgba(10, 10, 10, 0.7);
  font-size: 0.88rem;
}

@media (min-width: 48rem) {
  .site-header.is-menu-open .header-audio {
    border-color: rgba(10, 10, 10, 0.16);
    background: rgba(10, 10, 10, 0.08);
    color: #0a0a0a;
  }
  .site-header.is-menu-open .header-cta {
    background: #0a0a0a;
    color: #ffffff;
  }

  .site-header.is-menu-open .menu-toggle {
    border-color: rgba(10, 10, 10, 0.7);
    background: transparent;
    color: #0a0a0a;
  }
}

@media (max-width: 47.999rem) {
  .site-header__inner {
    min-height: 4.5rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .site-brand {
    width: clamp(5.5rem, 23vw, 6.25rem);
  }

  .site-header__actions {
    gap: 0.4rem;
  }

  .header-cta,
  .menu-toggle {
    min-height: 2.25rem;
  }

  .header-cta {
    padding: 0.5rem 0.78rem 0.46rem;
    font-size: 0.66rem;
  }

  .menu-toggle {
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
  }

  .menu-toggle__label {
    display: none;
  }

  .menu-scrim {
    display: none;
  }

  .site-menu {
    --menu-origin-x: calc(100% - 2.15rem);
    --menu-origin-y: 2.15rem;
    inset: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #000000;
    color: #ffffff;
    box-shadow: none;
  }

  .site-menu__scroll {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: clamp(7.2rem, 17vh, 9rem) var(--page-padding) 5rem;
    scrollbar-gutter: stable;
  }

  .site-menu__navigation {
    text-align: center;
  }

  .site-menu__links {
    justify-items: center;
    gap: 0.08em;
  }

  .site-menu__link {
    justify-content: center;
    width: auto;
    color: #ffffff;
    font-size: clamp(2.2rem, 10.5vw, 4.2rem);
    line-height: 1.03;
  }

  .site-menu__arrow {
    position: absolute;
    right: -1.4rem;
    color: #ffffff;
  }

  .name-story-link {
    align-self: center;
    margin-top: clamp(3rem, 8vh, 5rem);
    border-color: rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.76);
  }

  .name-story-link:hover {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  .site-menu__divider {
    margin-top: clamp(4rem, 11vh, 7rem);
    margin-bottom: clamp(3.5rem, 10vh, 6rem);
  }

  .site-menu__divider::before,
  .site-menu__divider::after {
    background: rgba(255, 255, 255, 0.22);
  }

  .site-menu__divider span::before,
  .site-menu__divider span::after {
    background: rgba(255, 255, 255, 0.62);
  }

  .site-menu__details {
    grid-template-columns: 1fr;
    gap: 4rem;
    width: min(100%, 24rem);
    margin: 0 auto;
  }

  .menu-eyebrow {
    color: rgba(255, 255, 255, 0.42);
  }

  .menu-contact__list,
  .menu-social__list {
    color: rgba(255, 255, 255, 0.76);
  }

  .menu-contact__list dt {
    color: rgba(255, 255, 255, 0.38);
  }

  .menu-contact__list a:hover,
  .menu-social__list a:hover {
    color: #ffffff;
  }

  .site-header.is-menu-open .site-brand__image--light {
    opacity: 1;
  }

  .site-header.is-menu-open .site-brand__image--dark {
    opacity: 0;
  }
}

@media (max-width: 23rem) {
  .header-cta {
    padding-inline: 0.72rem;
    font-size: 0.6rem;
  }

  .site-brand {
    width: 5.5rem;
  }
}
/* Rodapé universal */
.site-footer{position:relative;z-index:10;width:100%;height:100svh;min-height:42rem;margin-top:-1px;overflow:hidden;border-radius:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0 0;background:#000;color:#f3f3f3}
.site-footer#site-footer{transform:none!important}
/* Páginas de projeto (/trabalhos/<projeto>/): rodapé sem cantos arredondados.
   :has() em vez de irmão-adjacente porque o GSAP envolve o
   .case-footer-transition num .pin-spacer ao pinar, quebrando a adjacência
   direta no DOM renderizado. */
body:has(.case-footer-transition) .site-footer{border-radius:0}
.site-footer__inner{display:grid;width:100%;height:100%;padding:clamp(7rem,15vh,10rem) var(--page-padding) clamp(2rem,5vh,3.5rem);grid-template-columns:minmax(0,1.25fr) minmax(16rem,.7fr) minmax(11rem,.34fr);grid-template-rows:1fr auto auto;gap:clamp(2rem,5vw,5rem);align-items:end}
.site-footer__lead{align-self:center;grid-column:1/2}
.site-footer__eyebrow,.site-footer__time,.site-footer__legal p,.site-footer__contact h3,.site-footer__social h3{font-family:var(--font-mono);font-size:.66rem;font-weight:500;line-height:1.35;letter-spacing:-.03em;text-transform:uppercase}
.site-footer__eyebrow{margin:0 0 1.4rem}.site-footer__lead h2{margin:0;font-family:var(--font-primary);font-size:clamp(3.5rem,5.4vw,6.1rem);font-weight:500;line-height:.9;letter-spacing:-.075em}
.site-footer__time{align-self:center;justify-self:end;grid-column:3;margin:0;color:rgba(255,255,255,.5)}
.site-footer__cta{display:flex;align-items:center;justify-content:space-between;align-self:end;width:min(100%,13rem);padding-bottom:.55rem;border-bottom:1px solid currentColor;grid-column:2;color:#fff;font-family:var(--font-mono);font-size:.72rem;font-weight:500;text-decoration:none;text-transform:uppercase}
.site-footer__legal{display:grid;align-self:end;gap:clamp(1.5rem,5vh,3.5rem);grid-column:1;grid-row:3}.site-footer__legal p{max-width:72ch;margin:0;color:rgba(255,255,255,.6);text-wrap:pretty;hyphens:none;-webkit-hyphens:none}
.site-footer__contact{display:grid;align-self:end;gap:.45rem;grid-column:2;grid-row:3;margin:0;font-style:normal}.site-footer__contact h3,.site-footer__social h3{margin:0 0 .8rem;color:rgba(255,255,255,.42)}
.site-footer__contact a,.site-footer__social a{color:rgba(255,255,255,.88);font-size:.92rem;text-decoration:none;transition:color 300ms ease}.site-footer__contact a span{display:inline-block;width:1.35rem;color:rgba(255,255,255,.48)}
.site-footer__social{align-self:end;grid-column:3;grid-row:3}.site-footer__social ul{display:grid;margin:0;padding:0;grid-template-columns:repeat(2,max-content);gap:.45rem 2rem;list-style:none}.site-footer__contact a:hover,.site-footer__social a:hover{color:#fff}.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:61.999rem){.site-footer__inner{padding-top:clamp(6.5rem,12vh,8rem);grid-template-columns:minmax(0,1fr) minmax(12rem,.7fr);grid-template-rows:1fr auto auto;gap:2.5rem}.site-footer__lead{grid-column:1}.site-footer__time{grid-column:2}.site-footer__cta{grid-column:2;grid-row:2}.site-footer__legal{grid-column:1;grid-row:3}.site-footer__contact{grid-column:2;grid-row:3}.site-footer__social{display:none}}
@media(max-width:47.999rem){.site-footer__inner{display:grid;height:100%;padding:6.25rem 20px max(1.25rem,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto;gap:1.4rem 1rem;align-items:end}.site-footer__lead{align-self:end;grid-column:1/-1;grid-row:1;margin:0}.site-footer__lead h2{font-size:clamp(2.85rem,13.2vw,4.5rem)}.site-footer__time{position:absolute;top:6.6rem;right:20px}.site-footer__cta{width:min(100%,13rem);margin:0 0 0 auto;grid-column:1/-1;grid-row:2}.site-footer__legal{align-self:end;grid-column:1/-1;grid-row:4;gap:0;margin:0}.site-footer__legal p{max-width:none;font-size:.56rem;line-height:1.45}.site-footer__contact{align-self:start;grid-column:1;grid-row:3;margin:0}.site-footer__social{display:block;align-self:start;grid-column:2;grid-row:3;margin:0}.site-footer__social ul{grid-template-columns:1fr;gap:.4rem}.site-footer__contact a,.site-footer__social a{font-size:.76rem}}
.motion-link[data-motion-ready="true"] {
  position: relative;
  display: block;
  width: 13rem;
  max-width: 100%;
  height: 2rem;
  padding: 0.6rem 0 0.62rem;
  overflow: hidden;
  border: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.motion-link__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  overflow: hidden;
}

.motion-link__line span {
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
  will-change: transform;
}

.motion-link__line span:last-child {
  transform: scaleX(0);
  transform-origin: left;
}

.motion-link__label {
  position: absolute;
  top: 0.6rem;
  left: 0;
  display: flex;
  width: max-content;
  pointer-events: none;
  white-space: nowrap;
}

.motion-link__char {
  display: inline-block;
  will-change: transform;
}

.motion-link__arrow {
  position: absolute;
  top: 0.54rem;
  display: block;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  line-height: 1;
  will-change: transform, opacity;
}

.motion-link__arrow--left {
  left: 0;
  opacity: 0;
  transform: translateX(-0.55rem);
}

.motion-link__arrow--right {
  right: 0;
}