/* ============================================================================
   PRIME-CAE · hero — simulation environment, navigation
   ========================================================================== */

/* ==========================================================================
   NAVIGATION — one controlled dark surface, so the lockup never has to change
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  border-bottom:var(--lw-hair) solid transparent;
  transition:background var(--t-normal) var(--ease-standard),
             border-color var(--t-normal),backdrop-filter var(--t-normal)}
.nav.stuck{
  background:linear-gradient(180deg,rgba(3,10,20,.92),rgba(3,10,20,.80));
  border-bottom-color:var(--env-line);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.nav__in{display:flex;align-items:center;gap:var(--s-5);height:var(--nav-h)}
.nav__brand{display:flex;align-items:center;gap:20px;flex:none;padding-block:10px}
.nav__logo{width:var(--logo-w);height:auto;object-fit:contain;
  filter:drop-shadow(0 2px 14px rgba(30,127,228,.30))}
.nav__sub{display:none;padding-left:20px;border-left:var(--lw-1) solid var(--env-line-strong);
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;line-height:1.5;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tod-4)}
@media (min-width:1340px){.nav__sub{display:block}}
.nav__aws{display:flex;flex:none;align-items:center;margin-left:calc(20px - var(--s-5));
  padding-left:var(--aws-pad);border-left:var(--lw-1) solid var(--env-line-strong)}
.nav__aws img{display:block;height:var(--aws-h);width:auto}

.nav__links{display:none;align-items:center;gap:4px;margin-inline:auto 0;position:relative}
@media (min-width:1080px){.nav__links{display:flex}}
.nav__a{position:relative;padding:12px 15px;border-radius:6px;
  font-size:var(--fs-nav);font-weight:500;color:var(--tod-2);white-space:nowrap;
  transition:color var(--t-fast)}
.nav__a:hover,.nav__a.active{color:var(--tod-1)}
/* an illuminated baseline plus a small engineering marker */
.nav__ind{position:absolute;bottom:4px;height:var(--lw-2);border-radius:2px;
  background:var(--prime-lift);box-shadow:0 0 12px var(--prime-lift);opacity:0;
  transition:transform .42s var(--ease-standard),width .42s var(--ease-standard),opacity var(--t-normal)}
.nav__ind::before{content:"";position:absolute;left:50%;top:-7px;width:3px;height:3px;
  margin-left:-1.5px;border-radius:50%;background:var(--prime-lift)}

.nav__act{display:flex;align-items:center;gap:12px;margin-left:auto}
@media (min-width:1080px){.nav__act{margin-left:0}}
.nav__icon{width:46px;height:46px;border-radius:var(--r-2);
  border:var(--lw-1) solid var(--env-line-strong);display:grid;place-items:center;
  color:var(--tod-2);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.nav__icon:hover{color:var(--tod-1);border-color:var(--env-line-active);background:var(--env-surface)}
.nav__burger{display:grid;border-color:rgba(126,190,238,.22)}
@media (min-width:1080px){.nav__burger{display:none}}
.nav__auth{display:none}
@media (min-width:600px){.nav__auth{display:inline-flex}}

.menu{position:fixed;inset:var(--nav-h) 0 0;z-index:calc(var(--z-nav) - 1);
  background:var(--navy-950);border-top:var(--lw-hair) solid var(--env-line);
  padding:var(--s-5) var(--gutter) var(--s-8);overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--t-normal),transform var(--t-normal) var(--ease-standard),visibility var(--t-normal)}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:64px;
  border-bottom:var(--lw-hair) solid var(--env-line);
  font-family:var(--font-sans);font-size:1.4rem;color:var(--tod-1)}
.menu a span{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--tod-4)}

/* ==========================================================================
   PHASE B · simulation environment
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--navy-990)}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s linear;
  filter:saturate(.56) contrast(1.12) brightness(.66)}
.hero__vid.live{opacity:1}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.56) contrast(1.12) brightness(.66);opacity:1;
  transition:opacity .8s var(--ease-large)}
.hero.playing .hero__poster{opacity:0}
.hero__grade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(3,10,20,.96) 0%,rgba(3,10,20,.87) 28%,rgba(3,10,20,.40) 56%,rgba(3,10,20,.10) 80%),
    radial-gradient(58% 46% at 20% 64%,rgba(3,10,20,.30),rgba(3,10,20,0) 72%),
    linear-gradient(0deg,rgba(3,10,20,.94) 0%,rgba(3,10,20,.30) 28%,rgba(3,10,20,0) 54%),
    linear-gradient(180deg,rgba(3,10,20,.80) 0%,rgba(3,10,20,0) 24%)}
.hero__scan{position:absolute;inset:0;pointer-events:none;opacity:.26;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}

.hero__ui{position:relative;z-index:var(--z-hero-ui);width:100%;
  padding-block:clamp(72px,13vh,180px) 0}
.hero__copy{max-width:min(760px,92%)}
.hero__eyebrow{display:flex;align-items:center;gap:16px;
  margin-bottom:clamp(14px,2.2vh,var(--s-5))}
.hero__eyebrow span{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tod-2)}
.hero__eyebrow i{display:block;width:46px;height:var(--lw-2);background:var(--prime-lift);
  box-shadow:0 0 10px rgba(74,169,255,.7)}
.hero h1{margin-bottom:clamp(10px,1.6vh,20px)}
.hero h1 em{font-style:normal;display:block}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);
  margin-top:clamp(18px,2.8vh,var(--s-6))}
/* the hero action keeps its blue and weight, with a little less bulk */
.hero__cta .btn{min-height:46px;padding-inline:24px;gap:11px;letter-spacing:.004em}
.hero__cta .btn__go{width:14px;height:14px}
.hero__tertiary{margin-top:var(--s-4)}
.play-link{display:inline-flex;align-items:center;gap:14px;color:var(--tod-2);
  font-size:var(--fs-body);min-height:44px;transition:color var(--t-fast)}
.play-link:hover{color:var(--tod-1)}
.play-link i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:var(--lw-2) solid var(--env-accent-edge);background:var(--env-accent-wash);
  color:var(--prime-lift);transition:transform var(--t-normal) var(--ease-standard),box-shadow var(--t-normal)}
.play-link:hover i{transform:scale(1.08);box-shadow:0 0 0 8px rgba(74,169,255,.09)}

/* bottom rail: an instrument strip, readable at a glance ------------------ */
.hero__rail{position:relative;z-index:var(--z-hero-ui);width:100%;
  margin-top:clamp(24px,6vh,96px);padding-block:clamp(12px,1.6vh,var(--s-4)) clamp(18px,3vh,34px)}
.hero__railin{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);
  padding-top:var(--s-4);border-top:var(--lw-1) solid var(--env-line);flex-wrap:wrap}
.hero__inst{display:flex;gap:clamp(24px,3.4vw,56px);flex-wrap:wrap}
.hero__inst span{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--tod-4)}
.hero__inst b{display:block;margin-top:6px;font-family:var(--font-mono);
  font-size:var(--fs-meta);font-weight:500;letter-spacing:.07em;color:var(--tod-1)}
.scroll-cue{display:flex;align-items:center;gap:14px;min-height:44px;
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tod-3);flex:none;
  transition:color var(--t-fast)}
.scroll-cue:hover{color:var(--tod-1)}
.scroll-cue i{display:block;width:54px;height:var(--lw-2);transform-origin:left;
  background:linear-gradient(90deg,var(--prime-lift),transparent);
  animation:cue 2.8s var(--ease-standard) infinite}
@keyframes cue{0%,100%{transform:scaleX(.35);opacity:.4}50%{transform:scaleX(1);opacity:1}}

.hero__manual{position:absolute;z-index:calc(var(--z-hero-ui) + 1);left:50%;top:44%;
  transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:16px}
.hero[data-autoplay="blocked"] .hero__manual{display:flex}
.hero__manual button{width:84px;height:84px;border-radius:50%;
  border:var(--lw-2) solid var(--env-accent-edge);background:rgba(6,17,32,.66);
  backdrop-filter:blur(8px);color:var(--prime-lift);display:grid;place-items:center;
  transition:transform var(--t-normal) var(--ease-standard),box-shadow var(--t-normal)}
.hero__manual button:hover{transform:scale(1.06);box-shadow:0 0 0 12px rgba(74,169,255,.08)}

@media (max-width:900px){
  .hero__grade{background:
    linear-gradient(0deg,rgba(3,10,20,.96) 0%,rgba(3,10,20,.74) 38%,rgba(3,10,20,.34) 62%,rgba(3,10,20,.08) 80%),
    linear-gradient(180deg,rgba(3,10,20,.86) 0%,rgba(3,10,20,0) 28%)}
  .hero__inst{display:none}
  .hero__ui{padding-block:clamp(104px,14vh,150px) 0}
}

/* =========================================================================
   HEADER · fit before completeness
   The header must never leave the viewport. Low-priority links retire into
   the menu before anything is allowed to clip, and the contact action is the
   last thing to go.
   ========================================================================= */
.nav__in{min-width:0}
.nav__brand{min-width:0}
.nav__links{min-width:0;flex-wrap:nowrap;overflow:hidden}
.nav__a{flex:0 0 auto}
/* compact tab spacing everywhere: the badge row needs the room at every desktop width */
.nav__links{gap:0}
.nav__a{padding-inline:11px}
/* the header runs the full window width: the lockup and the account button
   each sit the same short gutter from their edge of the window */
@media (min-width:1080px){
  .nav__in.shell{max-width:none;margin-inline:0;padding-inline:clamp(24px,2.6vw,44px)}
}
@media (max-width:1260px){
  .nav__a--low{display:none}          /* Technology and Company move to the menu */
}
@media (max-width:1160px){
  .nav__a{padding-inline:9px;font-size:.9375rem}
}
@media (max-width:1079px){
  .nav__links{display:none}           /* everything is in the menu below this */
}

/* =========================================================================
   HEADER · lockup scale
   Over the hero the PRIME-CAE lockup is shown large and hangs into the hero;
   once the header is raised (.stuck) it settles to its compact size. Only
   transforms move, so the header row never reflows and the nav height the
   anchor offsets rely on stays --nav-h. Over the hero the AWS badge takes a
   second line under the wordmark (at 1340px+ the subtitle stays beside the
   lockup) and both slide back into the row on scroll.
   ========================================================================= */
:root{--logo-w:clamp(196px,15.5vw,264px);--logo-s:1.6;--logo-ar:.2172;
  --aws-h:40.8px;--aws-pad:20px;--logo-word:.4331;--sub-w:252px}
@media (max-width:1160px){:root{--logo-w:clamp(172px,15.5vw,204px)}}
@media (max-width:1339px){:root{--aws-h:35.2px}}
.nav__logo,.nav__sub,.nav__aws{
  transition:transform var(--t-large) var(--ease-standard),border-color var(--t-large)}
.nav__logo{transform-origin:0 0}
/* once the header is raised the AWS badge settles to 0.9x, anchored at its divider */
.nav__aws img{transform-origin:0 50%;transition:transform var(--t-large) var(--ease-standard)}
.nav.stuck .nav__aws img{transform:scale(.9)}
:root:not(.menu-open) .nav:not(.stuck) .nav__logo{transform:scale(var(--logo-s))}
/* over the hero the AWS badge drops to a second line, left-aligned with the
   spelled-out PRIME-CAE wordmark (--logo-word: where the wordmark starts in the
   lockup), never under the icon */
:root:not(.menu-open) .nav:not(.stuck) .nav__aws{
  transform:translate(calc(var(--logo-w) * var(--logo-s) * var(--logo-word)
      - var(--logo-w) - 20px - var(--lw-1) - var(--aws-pad)),
    calc(var(--logo-w) * var(--logo-ar) * (var(--logo-s) - .5) + 10px + var(--aws-h) / 2))}
/* on its own line the badge has nothing to divide from, so its rule fades out */
:root:not(.menu-open) .nav:not(.stuck) .nav__aws{border-left-color:transparent}
@media (min-width:1340px){
  .nav__sub{width:var(--sub-w)}
  /* the subtitle stays beside the enlarged lockup, centred on it */
  :root:not(.menu-open) .nav:not(.stuck) .nav__sub{
    transform:translate(calc(var(--logo-w) * (var(--logo-s) - 1)),
      calc(var(--logo-w) * var(--logo-ar) * (var(--logo-s) - 1) / 2))}
  /* the badge passes the subtitle to reach the wordmark's second line */
  :root:not(.menu-open) .nav:not(.stuck) .nav__aws{
    transform:translate(calc(var(--logo-w) * var(--logo-s) * var(--logo-word)
        - var(--logo-w) - 20px - var(--sub-w) - 20px - var(--lw-1) - var(--aws-pad)),
      calc(var(--logo-w) * var(--logo-ar) * (var(--logo-s) - .5) + 10px + var(--aws-h) / 2))}
}
/* the hero copy clears the large lockup and the badge's second line */
@media (min-width:720px) and (min-height:541px){
  .hero__ui{padding-top:max(clamp(72px,13vh,180px),
    calc(44px + var(--logo-w) * var(--logo-ar) * (var(--logo-s) - .5) + 10px + var(--aws-h) + 22px))}
}
@media (prefers-reduced-motion:reduce){
  .nav__logo,.nav__sub,.nav__aws,.nav__aws img{transition:none}
}