/* SYSTEM BY NOVA — V11.24.2
   Corrective cinematic hero integration.
   Principle: original homepage content is canonical. Cinematic treatment changes the visual engine, not the copy hierarchy. */

.nova-cinematic-hero{
  --cinema-p:0;
  position:relative;
  height:320svh;
  background:#060706;
  color:var(--paper);
  isolation:isolate;
}
.nova-cinematic-hero-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 42%,rgba(201,255,67,.045),transparent 35%),
    linear-gradient(180deg,#070807 0%,#0a0b09 56%,#060706 100%);
}
.nova-cinematic-hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}
.nova-cinematic-hero-scan,
.nova-cinematic-hero-vignette,
.nova-cinematic-hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.nova-cinematic-hero-scan{
  z-index:1;
  opacity:.13;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.075) 0 1px,transparent 1px 3px);
  mix-blend-mode:soft-light;
}
.nova-cinematic-hero-grid{
  z-index:1;
  opacity:.11;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25));
}
.nova-cinematic-hero-vignette{
  z-index:2;
  background:
    radial-gradient(circle at 70% 46%,transparent 0 20%,rgba(5,6,5,.08) 42%,rgba(5,6,5,.57) 76%,#050605 108%),
    linear-gradient(90deg,rgba(5,6,5,.56),transparent 34%,transparent 70%,rgba(5,6,5,.38));
}
.nova-cinematic-state{
  position:absolute!important;
  inset:0!important;
  width:100%;
  height:100svh;
  min-height:100svh!important;
  z-index:4;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,18px,0);
  transition:none!important;
  will-change:opacity,transform;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.nova-cinematic-state[data-cinematic-state="0"]{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
/* Preserve the original hero layout verbatim while using the new material engine. */
.nova-cinematic-state.hero{
  background:transparent!important;
  overflow:visible!important;
}
.nova-cinematic-state.hero::before{
  opacity:.22!important;
  background:
    radial-gradient(circle at 83% 25%,rgba(201,255,67,.08),transparent 21%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)!important;
  background-size:auto,64px 64px,64px 64px!important;
}
.nova-cinematic-state.hero::after{opacity:.08!important}
.nova-cinematic-state.hero .hero-inner{z-index:6}
.nova-cinematic-state.hero .hero-coordinate{z-index:7}

.nova-cinematic-editorial{
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h) + clamp(54px,8vh,92px)) 0 clamp(40px,7vh,76px);
}
.nova-cinematic-editorial-inner{
  position:relative;
  z-index:4;
  width:100%;
}
.nova-cinematic-editorial-copy{
  width:min(650px,47vw);
}
.nova-cinematic-editorial .micro{
  color:#b9bcb4;
  margin-bottom:18px;
}
.nova-cinematic-editorial h2{
  margin:0;
  font-size:clamp(4.25rem,8.4vw,9.2rem);
  line-height:.78;
  letter-spacing:-.085em;
  font-weight:800;
  max-width:8.1ch;
}
.nova-cinematic-editorial h2 em{
  display:block;
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:var(--acid);
  letter-spacing:-.052em;
  line-height:.9;
}
.nova-cinematic-editorial p{
  margin:clamp(22px,3vh,30px) 0 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  max-width:540px;
  color:#bfc2ba;
}

/* Hard editorial exit: cinematic black ends cleanly; the original ivory Point of View begins immediately. */
.nova-cinematic-hero + .intro{margin-top:0!important}

/* Optical event is intentionally isolated to the lower DIFFERENCE scene only. */
.nova-contrast-story .nova-optical-heading{
  position:relative;
  isolation:isolate;
}
.nova-contrast-story .nova-optical-heading::after{
  content:"";
  position:absolute;
  z-index:3;
  top:-10%;
  bottom:-12%;
  left:-20%;
  width:22%;
  pointer-events:none;
  opacity:var(--optical-beam-alpha,0);
  transform:translate3d(var(--optical-beam-x,-42vw),0,0) skewX(-13deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,.64) 44%,rgba(201,255,67,.72) 51%,rgba(255,255,255,.4) 59%,transparent 100%);
  filter:blur(9px);
  mix-blend-mode:screen;
}
.nova-contrast-story .nova-optical-word{
  position:relative;
  display:inline-block;
  color:transparent!important;
  background-image:linear-gradient(92deg,#c9ff43 0%,#c9ff43 26%,#f2efe6 44%,#fff 50%,#dfff87 58%,#c9ff43 74%,#c9ff43 100%);
  background-size:230% 100%;
  background-position:var(--optical-bg-x,100%) 50%;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 calc(10px + var(--optical-live,0)*9px) rgba(201,255,67,.14));
}
.nova-contrast-story .nova-optical-word::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:#f8f6ee;
  opacity:var(--optical-lens-alpha,0);
  clip-path:circle(18% at var(--optical-lens-x,0%) 52%);
  transform:scaleX(1.045) translateX(.012em);
  filter:blur(.15px) drop-shadow(0 0 10px rgba(255,255,255,.24));
  pointer-events:none;
}

@media (max-width:900px){
  .nova-cinematic-hero{height:285svh}
  .nova-cinematic-editorial-copy{width:min(78vw,620px)}
  .nova-cinematic-editorial h2{font-size:clamp(3.8rem,12.8vw,7rem)}
}
@media (max-width:760px){
  .nova-cinematic-hero{height:245svh}
  .nova-cinematic-hero-grid{background-size:16vw 16vw}
  .nova-cinematic-state.hero{padding-top:calc(var(--nav-h) + 70px)!important}
  .nova-cinematic-editorial{padding:calc(var(--nav-h) + 44px) 0 32px;align-items:flex-end}
  .nova-cinematic-editorial-copy{width:100%}
  .nova-cinematic-editorial h2{font-size:clamp(3.1rem,14.4vw,5.05rem);line-height:.83;max-width:8.4ch}
  .nova-cinematic-editorial p{font-size:.94rem;max-width:94%}
}
@media (prefers-reduced-motion:reduce){
  .nova-cinematic-hero{height:auto}
  .nova-cinematic-hero-sticky{position:relative;height:auto;min-height:100svh}
  .nova-cinematic-hero-canvas,.nova-cinematic-hero-scan{display:none!important}
  .nova-cinematic-state{position:relative!important;height:auto;min-height:100svh!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
  .nova-cinematic-editorial+.nova-cinematic-editorial{border-top:1px solid rgba(255,255,255,.1)}
  .nova-contrast-story .nova-optical-heading::after,.nova-contrast-story .nova-optical-word::before{display:none!important}
  .nova-contrast-story .nova-optical-word{color:var(--acid)!important;background:none!important}
}

/* SYSTEM BY NOVA — V11.25.1
   Mobile first-frame breathing room + coherent Operating Field behavior.
   Mobile removes the redundant kicker from the constrained first viewport;
   the process map becomes a stable overview instead of animating while the
   entire panel itself is leaving the viewport. Desktop live behavior is unchanged. */
@media (max-width:760px){
  .nova-cinematic-state.hero{
    align-items:flex-start!important;
    padding-top:calc(var(--nav-h) + 24px)!important;
    overflow:hidden!important;
  }
  .nova-cinematic-state.hero .hero-kicker{display:none!important}
  .nova-cinematic-state.hero .hero-inner{width:100%;padding-bottom:18px}
  .nova-cinematic-state.hero .hero-title{margin-top:0!important}
  .nova-cinematic-state.hero .hero-bottom{margin-top:22px!important;gap:18px!important}
  .nova-cinematic-state.hero .hero-bottom .lead{font-size:clamp(.96rem,4.15vw,1.04rem);line-height:1.52}
  .nova-cinematic-state.hero .hero-actions{gap:10px!important}
  .nova-cinematic-state.hero .hero-index{margin-top:20px!important;padding-top:11px!important;gap:12px!important}
}
@media (max-width:420px){
  .nova-cinematic-state.hero .hero-index{font-size:.52rem}
}
@media (max-width:960px){
  .process-film-caption span:last-child{display:none!important}
}
