/* Homepage hero: the night-building shot, scrubbed by scroll.
   Scrolling down carries the camera through the glass and into the office. */
.hero{position:relative;height:400vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0A1314}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:1;transition:opacity 1.1s var(--ease-soft)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0}
/* base scrim so no frame is ever raw behind the page */
.scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 92% at 62% 42%,rgba(6,14,15,0) 26%,rgba(6,14,15,.72) 100%)}
.capscrim{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,17,18,0) 0%,rgba(8,17,18,.62) 44%,rgba(8,17,18,.95) 100%)}

.ring{position:absolute;top:calc(50% - 24px);left:calc(50% - 24px);width:48px;height:48px;
  color:var(--accent);z-index:5;opacity:.9;pointer-events:none;transition:opacity .4s var(--ease-soft)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

/* the record: the concrete point, ticking while the film plays */
.record{position:absolute;top:calc(3.6rem + 1.3rem);right:clamp(1.2rem,5vw,3.2rem);z-index:4;
  width:min(310px,42vw);background:rgba(10,19,20,.62);border:1px solid var(--line);
  border-radius:12px;backdrop-filter:blur(12px);overflow:hidden;
  opacity:var(--rec,0);transform:translateY(calc((1 - var(--rec,0))*10px));
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft)}
.record .rhead{display:flex;justify-content:space-between;padding:.62rem .8rem;
  border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.16em;color:var(--sage)}
.record .rrow{display:grid;grid-template-columns:50px 1fr;gap:.6rem;padding:.5rem .8rem;
  font-family:var(--font-mono);font-size:.7rem;line-height:1.35;color:var(--text-secondary);
  border-bottom:1px solid rgba(154,176,178,.09);opacity:var(--on,0);transition:opacity .45s var(--ease-soft)}
.record .rrow:last-child{border-bottom:0}
.record .rrow .tm{color:var(--sage)}
.record .rrow.hit{color:var(--text-primary)}
.record .rrow.hit .tm{color:var(--accent)}
@media(max-width:1080px){.record{display:none}}

.bands{position:absolute;inset:0;z-index:3;pointer-events:none}
.band{position:absolute;left:clamp(1.2rem,6vw,4rem);right:clamp(1.2rem,6vw,4rem);
  bottom:clamp(3rem,11vh,6.5rem);opacity:var(--op,0);max-width:min(680px,54%)}
.band::before{content:"";position:absolute;inset:-58% -32% -84% -44%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 60% at 34% 54%,
    rgba(6,14,15,.93) 0%, rgba(6,14,15,.86) 44%,
    rgba(6,14,15,.5) 72%, rgba(6,14,15,0) 100%)}
.band .kicker{margin-bottom:.9em}
.band h1,.band h2{font-family:var(--font-display);font-weight:700;line-height:1.1;
  letter-spacing:-.015em;max-width:none;text-shadow:var(--tshadow)}
.band h1{font-size:clamp(1.75rem,4.2vw,3.1rem)}
.band h2{font-size:clamp(1.5rem,3.4vw,2.5rem)}
.band p.big{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,2.5vw,1.7rem);color:var(--text-primary);max-width:30ch;line-height:1.3;
  text-shadow:var(--tshadow)}
.band .cta-row{margin-top:1.3em;pointer-events:auto}
.band .btn{text-shadow:none}

.scroll-cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--text-secondary);opacity:var(--cue,.8);pointer-events:none}
.scroll-cue svg{animation:cuebounce 2s ease-in-out infinite}
@keyframes cuebounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.static-hero{display:none;padding:calc(3.6rem + 2.6rem) clamp(1.2rem,6vw,4rem) 3.2rem;position:relative}
.static-hero .shot{border-radius:16px;overflow:hidden;margin-bottom:1.9rem}
.static-hero .shot img{width:100%;height:auto;display:block}
.static-hero .sh-title{font-family:var(--font-display);font-weight:700;line-height:1.12;
  font-size:clamp(1.85rem,7vw,2.6rem);letter-spacing:-.015em}
.static-hero p{color:var(--text-secondary);margin-top:1em;font-size:1.04rem;max-width:52ch}
.static-hero .svc-list{list-style:none;margin-top:1.9rem;display:grid;gap:.65rem}
.static-hero .svc-list a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.95rem 1.15rem;font-family:var(--font-display);font-weight:600}
.static-hero .svc-list span{font-family:var(--font-mono);font-size:.7rem;color:var(--sage)}
.static-hero .cta-row{margin-top:1.7rem}

/* the five gates, matching hero.js GATES character for character */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:auto;padding:0;background:transparent}
  #hero-video,.ring,.scroll-cue,.bands,.scrim,.capscrim,.record,.poster{display:none}
  .static-hero{display:block}
}
@media(max-height:560px){.scroll-cue{display:none}}