:root {
  --tp-black: #050505;
  --tp-white: #f2f0eb;
  --tp-grey: #777774;
  --tp-coral: #ff705f;
  --tp-rule: rgba(242, 240, 235, .2);
  --tp-display: "Anton", "Arial Narrow", sans-serif;
  --tp-ui: "Manrope", sans-serif;
}

html, body { background: var(--tp-black); color: var(--tp-white); }
body.bright-redesign { background: var(--tp-black); }
.grain { opacity: .085; mix-blend-mode: soft-light; }
#world { opacity: .35; }

/* Editorial navigation */
.nav {
  mix-blend-mode: normal;
  padding: 1.15rem 2.4vw;
  border-bottom: 1px solid var(--tp-rule);
  background: linear-gradient(#050505e8, #05050500);
  backdrop-filter: blur(8px);
}
.bright-redesign .nav {
  color:var(--tp-white);
  background:linear-gradient(#050505f2,#050505d8);
  border-bottom:1px solid var(--tp-rule);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
.bright-redesign .nav-links a,.bright-redesign .sound { color:var(--tp-white); }
.bright-redesign .menu span { background:var(--tp-white); }
.nav .brand img { width: 68px; height: 58px; filter: invert(1); }
.nav-links { margin-left: auto; margin-right: 3rem; gap: 2.4rem; }
.nav-links a, .sound { color: var(--tp-white); opacity: .8; }
.header-socials { margin-right: 1.4rem; }

/* New sculptural entry hero */
.opening {
  --hero-x: calc(var(--intro-x, 0) * 1px);
  --hero-y: calc(var(--intro-y, 0) * 1px);
  background: #050505;
  isolation: isolate;
  overflow: hidden;
}
.opening-expedition {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate3d(var(--hero-x), var(--hero-y), 0) scale(1.035);
  transition: transform 1.25s cubic-bezier(.2,.7,.2,1);
}
.opening-expedition::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #050505 0%, transparent 22%, transparent 76%, #050505 100%),
    linear-gradient(0deg, #050505 0%, transparent 34%, rgba(5,5,5,.15) 70%, #05050580 100%);
}
.opening-expedition img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  clip-path: inset(0) !important;
  mix-blend-mode: normal !important;
  filter: contrast(1.08) saturate(.65);
  animation: tpHeroBreath 10s ease-in-out infinite alternate !important;
}
@keyframes tpHeroBreath { to { transform: scale(1.045); filter: contrast(1.14) saturate(.82); } }
.opening-apertures { position:absolute; inset:0; z-index:1; pointer-events:none; }
.opening-apertures i {
  position:absolute; top:0; bottom:0; width:1px; background:var(--tp-rule);
  box-shadow: 0 0 50px rgba(255,112,95,.08);
}
.opening-apertures i:nth-child(1){left:22%}.opening-apertures i:nth-child(2){left:50%}.opening-apertures i:nth-child(3){left:78%}
.opening-apertures span { position:absolute; left:50%; top:0; width:2px; height:0; background:var(--tp-coral); animation:tpScan 5s ease-in-out infinite; }
@keyframes tpScan { 0%,15%{height:0;opacity:0}35%{height:38vh;opacity:1}75%{transform:translateY(62vh);height:12vh;opacity:.4}100%{transform:translateY(100vh);opacity:0} }
.opening-logo { top: 2.2rem; left: 2.4vw; width: 82px; filter: invert(1); z-index: 6; transform:none !important; animation:none !important; }
.opening-title {
  inset: auto 2.4vw 11vh 2.4vw;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  transform:none !important;
  animation:none !important;
}
.opening-title p { grid-column: 1/-1; margin: 0 0 1.2rem; letter-spacing: .28em; font-size: .62rem; }
.opening-title h1 {
  max-width: 1120px;
  margin: 0;
  font-family: var(--tp-display);
  font-size: clamp(5rem, 11vw, 12rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.opening-title h1 em { font-style: normal; color: #777774; }
.opening-title > span { align-self:end; max-width: 190px; padding-bottom:.8rem; font-size:.62rem; line-height:1.7; letter-spacing:.18em; text-transform:uppercase; }
.opening-enter {
  left:auto; top:auto; right:2.4vw; bottom:3.2vh; width:170px; height:52px; border-radius:0;
  border:1px solid var(--tp-white); background:var(--tp-white); color:#050505; transform:none !important;
  animation:none !important;
}
.opening-enter::before,.opening-enter::after { display:none !important; }
.opening-enter span { font-size:.6rem; letter-spacing:.2em; line-height:1.4; }
.opening-enter i { inset:auto 0 0 0; height:3px; border:0; border-radius:0; transform:none; }
.opening-enter.holding i { animation:tpHold 1.35s linear forwards; background:var(--tp-coral); }
@keyframes tpHold { from{width:0} to{width:100%} }
.opening-instruction { left:2.4vw; bottom:2.6vh; transform:none !important; letter-spacing:.2em; animation:none !important; }
.opening-coordinates { left:auto; right:2.4vw; bottom:auto; top:2.2rem; flex-direction:row; gap:1.3rem; color:var(--tp-coral); }
.opening-sound { right:2.4vw; bottom:calc(3.2vh + 72px); }
.opening-skip { right:12rem; bottom:3.2vh; }

/* Retire the previous timed intro choreography so the editorial composition is stable. */
.bright-redesign .opening > .opening-logo {
  top:2.2rem; left:2.4vw; width:82px; transform:none !important;
  animation:none !important;
}
.bright-redesign .opening > .opening-title {
  left:2.4vw; right:2.4vw; top:auto; bottom:11vh; width:auto;
  transform:none !important; text-align:left; animation:none !important;
}
.bright-redesign .opening > .opening-title h1 {
  font-family:var(--tp-display); font-size:clamp(5rem,11vw,12rem);
  line-height:.78; letter-spacing:-.035em; white-space:normal;
}
.bright-redesign .opening > .opening-enter {
  left:auto; right:2.4vw; top:auto; bottom:3.2vh; width:170px; height:52px;
  transform:none !important; animation:none !important;
}
.bright-redesign .opening > .opening-instruction {
  left:2.4vw; right:auto; top:auto; bottom:2.6vh; width:auto;
  transform:none !important; text-align:left; display:block; animation:none !important;
}
.bright-redesign .opening > .opening-coordinates {
  left:auto; right:2.4vw; top:2.2rem; bottom:auto;
  display:flex; gap:1.3rem;
}
.bright-redesign .opening > .opening-skip {
  left:auto; right:14.5rem; top:auto; bottom:3.2vh;
}
.bright-redesign .opening > .opening-sound {
  left:auto; right:23.5rem; top:auto; bottom:3.2vh;
}

/* Main hero becomes the first editorial statement after entry */
.hero { min-height: 105vh; padding: 13rem 3vw 6rem; justify-content:flex-end; border-bottom:1px solid var(--tp-rule); }
.hero-media { display:none; }
.hero-sculpture { display:none; }
.hero-logo { opacity:.08; width:min(24vw,320px); right:3vw; top:14vh; }
.hero .eyebrow { order:1; }
.hero h1 { order:2; max-width:1450px; font-family:var(--tp-display); font-size:clamp(5rem,11.3vw,12rem); line-height:.79; letter-spacing:-.035em; text-transform:uppercase; }
.hero h1 br { display:block; }
.hero h1 em { color:#777774; -webkit-text-stroke:0; }
.hero-copy { order:3; max-width:460px; margin:2rem 0 1rem auto; color:#d0cec8; }
.hero-actions { order:4; margin-left:auto; }
.button.primary { background:var(--tp-coral); color:#050505; }

/* Shared brutalist editorial system */
.scene { padding-left:3vw; padding-right:3vw; }
.eyebrow { color:var(--tp-coral); }
.manifesto { border-bottom:1px solid var(--tp-rule); }
.manifesto-lines p { font-family:var(--tp-display); text-transform:uppercase; letter-spacing:-.02em; color:#2d2d2b; }
.manifesto-lines p.active { color:var(--tp-white); }
.manifesto-lines em { color:var(--tp-coral); }
.proof { border-bottom:1px solid var(--tp-rule); gap:4vw; }
.proof h2,.team h2,.chapter-copy h2,.section-head h2,.process h2,.convergence h2,.contact h2,.digital-copy h2 {
  font-family:var(--tp-display); font-weight:400; text-transform:uppercase; letter-spacing:-.02em; line-height:.84;
}
h2 em { color:#777774; -webkit-text-stroke:0; }
.proof dt { font-family:var(--tp-display); color:var(--tp-coral); }
.chapter { border-bottom:1px solid var(--tp-rule); }
.world-media { filter:grayscale(1) contrast(1.1); }
.chapter-copy { border-left:1px solid var(--tp-rule); padding-left:2rem; }
.chapter-index { left:3vw; right:3vw; }
.pipeline li { font-family:var(--tp-display); text-transform:uppercase; }
.pipeline li.active { color:var(--tp-coral); }
.comparison { left:3vw; right:3vw; border-radius:0; }
.production-rail { left:3vw; }
.production-rail article,.event-types span { border-radius:0; background:#090909de; }
.reel-lab,.work,.process,.team,.clients,.services,.digital,.contact { border-bottom:1px solid var(--tp-rule); }
.reel-heading h2,.section-head h2 { font-family:var(--tp-display); text-transform:uppercase; }
.reel-card { border-radius:0 !important; }
.convergence { background:#0a0a0a; }
.service-flight-copy h2 em { color:var(--tp-coral); }
.portfolio-filters button { border-radius:0 !important; }
.gallery-frame,.gallery-frame img,.gallery-frame video { border-radius:0 !important; }
.gallery-caption h3 { font-family:var(--tp-display) !important; text-transform:uppercase; }
.clients { background:var(--tp-white); color:#080808; }
.clients .eyebrow { color:#a12f23; }
.client-orbit { filter:grayscale(1); }
.process-slide,.process-scenes { border-radius:0 !important; }
.process-caption h3 { font-family:var(--tp-display) !important; text-transform:uppercase; }
.process-list b { font-family:var(--tp-display); text-transform:uppercase; }
.services-list span { font-family:var(--tp-display); text-transform:uppercase; color:#343432; }
.services-list span:hover { color:var(--tp-coral); }
.digital-layers b { font-family:var(--tp-display); text-transform:uppercase; }
.team-reel { gap:1.2rem; }
.team-reel article { border:0; border-top:1px solid var(--tp-rule); padding:1rem 0; background:none; }
.team-reel article img { filter:grayscale(1) contrast(1.05); border-radius:0 !important; }
.team-reel h3 { font-family:var(--tp-display); text-transform:uppercase; }
.contact { min-height:100vh; }
footer { background:var(--tp-coral); color:#050505; border:0; }
footer .brand img { filter:none; }
footer>p { font-family:var(--tp-display); text-transform:uppercase; font-size:clamp(3rem,7vw,8rem); line-height:.84; }

/* Scroll reveal language */
@supports (animation-timeline:view()) {
  .chapter-copy h2,.section-head h2,.proof h2,.team h2,.contact h2 {
    animation:tpTypeReveal linear both; animation-timeline:view(); animation-range:entry 5% cover 34%;
  }
  @keyframes tpTypeReveal { from{clip-path:inset(0 100% 0 0);transform:translateY(32px)} to{clip-path:inset(0);transform:none} }
}

@media (max-width:800px) {
  .nav { padding:.8rem 1rem; }
  .nav .brand img { width:48px;height:42px; }
  .header-socials { display:none; }
  .opening-logo { top:1.2rem; left:1rem; width:58px; }
  .opening-coordinates { top:1.2rem; right:1rem; display:grid; gap:.2rem; font-size:.48rem; }
  .opening-expedition { transform:translate3d(0,0,0) scale(1.06); }
  .opening-expedition img { object-position:58% center; }
  .opening-expedition::after { background:linear-gradient(0deg,#050505 0 18%,transparent 54%,#050505aa 100%); }
  .opening-title { inset:auto 1rem 18vh; display:block; }
  .opening-title p { font-size:.48rem; margin-bottom:.7rem; }
  .opening-title h1 { font-size:clamp(4rem,18vw,6.8rem); line-height:.8; max-width:100%; }
  .opening-title > span { display:block; margin-top:1rem; font-size:.48rem; max-width:230px; }
  .opening-enter { right:1rem; left:1rem; bottom:2.2vh; width:auto; height:56px; }
  .opening-instruction,.opening-skip { display:none; }
  .opening-sound { right:1rem; bottom:calc(2.2vh + 68px); }
  .bright-redesign .opening > .opening-logo { top:1.2rem; left:1rem; width:58px; }
  .bright-redesign .opening > .opening-coordinates { top:1.2rem; right:1rem; display:grid; gap:.2rem; }
  .bright-redesign .opening > .opening-title { left:1rem; right:1rem; bottom:17vh; width:auto; }
  .bright-redesign .opening > .opening-title h1 { font-size:clamp(4rem,18vw,6.8rem); line-height:.8; }
  .bright-redesign .opening > .opening-enter { left:1rem; right:1rem; bottom:1.4rem; width:auto; height:54px; }
  .bright-redesign .opening > .opening-instruction,
  .bright-redesign .opening > .opening-skip { display:none; }
  .bright-redesign .opening > .opening-sound { left:1rem; right:auto; bottom:calc(1.4rem + 67px); }
  .opening-apertures i:nth-child(1){left:33%}.opening-apertures i:nth-child(2){left:66%}.opening-apertures i:nth-child(3){display:none}
  .hero { padding:9rem 1.25rem 5rem; min-height:100svh; }
  .hero h1 { font-size:clamp(4rem,18vw,6.8rem); line-height:.82; }
  .hero-copy,.hero-actions { margin-left:0; }
  .scene { padding-left:1.25rem; padding-right:1.25rem; }
  .chapter-copy { border-left:0; padding-left:0; }
  .clients { color:#080808; }
  footer { padding-left:1.25rem;padding-right:1.25rem; }
}

@media (prefers-reduced-motion:reduce) {
  .opening-expedition img,.opening-apertures span { animation:none !important; }
}
