.nav{position:fixed;z-index:20;top:var(--space-18);left:var(--space-18);right:var(--space-18);
  display:grid;grid-template-columns:1fr auto;align-items:center;color:var(--tribe-warm-white)}
.nav__brand{display:flex;align-items:center}
.nav__mark{height:40px;width:auto}
.nav__links{display:flex;justify-content:center;gap:var(--space-30)}
.nav .btn--light{justify-self:end}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--tribe-true-black);color:var(--tribe-warm-white);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-3;transform:scale(1.06);will-change:transform}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-2;
  background:
   linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.35) 100%),
   linear-gradient(to right,rgba(0,0,0,.55),transparent 65%)}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.hero__content{width:100%;padding:0 var(--space-18) 60px;display:flex;flex-direction:column;gap:var(--hero-gap)}
.hero__title{font-family:var(--font-hero);font-weight:400;font-size:var(--text-display-hero);line-height:1;letter-spacing:0;
  text-transform:uppercase;max-width:none;margin-bottom:-.27em} /* trims Astrobia's empty line-box space under the caps so --hero-gap is the visible gap */
.hero__title .line{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-30);flex-wrap:wrap}
/* Status chip: signal dot + cycling mono label (the one place colour appears) */
.status{display:inline-flex;align-items:center;gap:var(--space-12);color:var(--tribe-warm-white);
  font-family:var(--font-mono);font-weight:700;font-size:var(--text-label);line-height:1;text-transform:uppercase;letter-spacing:.96px}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--tribe-signal);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,163,61,.45)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(232,163,61,0)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero__actions{display:flex;gap:var(--space-10);flex-wrap:wrap}

.hero__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(240,238,235,.15)}
.hero__progress span{display:block;height:100%;width:100%;background:var(--tribe-warm-white);transform-origin:left;transform:scaleX(0)}

@media (max-width:720px){
  .hero__row{flex-direction:column;align-items:flex-start}
}

.hero__title .word{display:inline-block;white-space:nowrap}
.hero__title .char{display:inline-block}

/* Nav links: plain text, underline on hover, dim on press */
.btn--chip{color:var(--tribe-warm-white);padding:var(--space-13) var(--space-6);position:relative}
.btn--chip::after{content:"";position:absolute;left:var(--space-6);right:var(--space-6);bottom:8px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-calm)}
.btn--chip:hover::after,.btn--chip:focus-visible::after{transform:scaleX(1)}
.btn--chip:active{opacity:.6}
@media (max-width:720px){
  .hero__content{padding-bottom:60px}
}

/* Small screens: the statement stacks on two lines and gets bigger */
@media (max-width:900px){
  .hero__title{font-size:min(12.5vw,84px)}
}


/* Mobile header: logo, links and Connect share one row, tucked close to the top edge */
@media (max-width:720px){
  .nav{top:var(--space-12);left:var(--space-15);right:var(--space-15);display:grid;grid-template-columns:1fr auto;align-items:center}
  .nav__mark{height:30px}
  .nav__links{justify-content:center;gap:var(--space-13)}
  .nav .btn--chip{font-size:11px;letter-spacing:.4px;padding:var(--space-12) 0}
  .nav .btn--chip::after{left:0;right:0;bottom:8px}
  .nav .btn--light{padding:var(--space-12) var(--space-10);font-size:11px;letter-spacing:.4px}
}
@media (max-width:360px){
  .nav__links{gap:var(--space-10)}
  .nav .btn--chip,.nav .btn--light{font-size:10px;letter-spacing:.2px}
}
/* soft top scrim so nav text stays legible over bright footage */
.hero__scrim{background-image:
  linear-gradient(to bottom,rgba(0,0,0,.5),transparent 24%),
  linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.35) 100%),
  linear-gradient(to right,rgba(0,0,0,.55),transparent 65%)}

/* "the fall" always wraps under "Unworking", at every width */
.hero__title .line:first-child .word:first-child{display:block!important} /* SplitText sets display inline-block inline on each word */


/* room for the descender of the "g" above the paragraph */