/* The hero, complete. Loads after foundation.css.
   Consolidated in Phase 4 from rules that were spread across four files.
   Every effect here is decorative: the hero stays complete and legible with
   no JavaScript, no scroll timelines and no animation.
   Removed in Phase 4, as planned: the diagonal ticker, the magnetic pull on
   the actions and the aurora's endless breathing loop. */

/* ---------------------------------------------------------------
   1. Stage. The hero runs edge to edge, but its copy and rail stay
   on the same grid as the masthead and every section below.
   Photo sits at -1, atmosphere at 1, copy at 2, chrome at 3.
   --------------------------------------------------------------- */
#hero{padding:0;border-top:0;overflow:clip}
.hero__stage{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;min-height:740px;
  padding:82px max(var(--gutter),calc((100% - var(--shell))/2)) 158px;
  border:0;border-bottom:1px solid #303132;border-radius:0;background:#101011}
.hero__copy{position:relative;z-index:2;width:62%}

/* ---------------------------------------------------------------
   2. Copy.
   --------------------------------------------------------------- */
.hero__eyebrow{display:flex;align-items:center;gap:12px;max-width:none;margin-bottom:30px;font-size:10px;letter-spacing:.07em;color:#c8cacd}
.hero h1{margin:0 0 26px;font-size:clamp(90px,10.7vw,164px);font-weight:700;line-height:.87;letter-spacing:-.02em;text-transform:uppercase}
.hero h1>span{display:block}
/* Metallic headline. The accent line keeps its colour, so only the
   non-accent lines take the gradient fill. */
.hero h1>span:not(.hero__accent){
  background:linear-gradient(174deg,#ffffff 0%,#f1f2f0 34%,#8b8d90 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px #f1f2f01c)}
.hero__accent{font-weight:600;color:var(--accent-ink);filter:drop-shadow(0 0 30px #9cc9ae3d)}
.hero__intro{max-width:310px;font-size:16px;line-height:1.7;color:#cacccf}

.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:32px}
.hero__actions .btn{min-height:54px;font-size:12px}
.hero__actions .btn--primary{box-shadow:0 12px 36px -10px #9cc9ae85}
/* The secondary action is a quiet square outline. It used to be frosted
   glass, which re-blurred the photograph on every scroll frame. */
.hero__text-link{display:flex;align-items:center;gap:18px;min-height:52px;padding:15px 25px;
  border:1px solid #f1f2f021;border-radius:var(--radius);
  background:linear-gradient(145deg,#f1f2f010,#f1f2f003);
  box-shadow:0 10px 30px -10px #00000085,inset 0 1px 1px #f1f2f01c;font-size:12px;
  transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.hero__text-link:hover{border-color:#f1f2f03d;background:linear-gradient(145deg,#f1f2f01f,#f1f2f008);box-shadow:0 20px 42px -12px #000000ad,inset 0 1px 1px #f1f2f030}
.hero__text-link span{font-size:20px;color:var(--accent-ink);transition:transform var(--duration) var(--ease)}
.hero__text-link:hover span{transform:translate(2px,-2px)}

/* ---------------------------------------------------------------
   3. Photograph.
   --------------------------------------------------------------- */
.hero__visual{position:absolute;inset:0;z-index:-1;overflow:hidden;width:100%;height:100%;margin:0;background:#101011}
.hero__image{width:100%;height:100%;object-fit:cover;object-position:center 20%;transform:scale(1.015)}
.hero__image-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0f1114eb 0%,#0f111485 36%,#0f111400 66%),linear-gradient(0deg,#0f1114f2,transparent 45%)}
/* The concept-photography credit is a disclosure, so it sits clear of the rail. */
.hero__visual figcaption{position:absolute;z-index:3;right:32px;bottom:calc(var(--nb-rail-h,104px) + 24px);left:auto;
  display:flex;flex-direction:column;gap:4px;font-size:8px;letter-spacing:.09em;text-align:right;color:#b4b5b7}

/* Slow drift as the hero leaves. No JS, Chromium only, degrades to static. */
@keyframes hero-depth{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(0,36px,0) scale(1.04)}}
@keyframes nb-drift{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-38px)}}
@supports(animation-timeline:view()){
  @media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .hero{view-timeline-name:--hero-depth;view-timeline-axis:block}
    .hero__image{animation:hero-depth linear both;animation-timeline:--hero-depth;animation-range:exit 0% exit 100%}
    .hero__watermark{animation:nb-drift linear both;animation-timeline:--hero-depth;animation-range:exit 0% exit 100%}
  }
}

/* ---------------------------------------------------------------
   4. Atmosphere: engineering grid, a still glow, the wordmark.
   --------------------------------------------------------------- */
.hero__atmos{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero__grid{position:absolute;inset:-2px;
  background-image:linear-gradient(to right,#f1f2f00d 1px,transparent 1px),linear-gradient(to bottom,#f1f2f00d 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(104deg,#000 0%,#000000b0 30%,transparent 61%);
  mask-image:linear-gradient(104deg,#000 0%,#000000b0 30%,transparent 61%)}
.hero__aurora{position:absolute;left:16%;top:44%;width:min(900px,88%);height:min(540px,72%);
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(88px);
  background:radial-gradient(circle at 50% 50%,#9cc9ae30 0%,#5b7a9420 44%,transparent 71%)}
/* Outline wordmark, bottom-anchored so the rail crops its feet. Held right
   of centre so it never sits behind the actions on the left. */
.hero__watermark{position:absolute;left:57%;bottom:calc(var(--nb-rail-h,104px) - 2.8vw);transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:clamp(58px,10.2vw,168px);
  line-height:.74;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px #f1f2f010;
  background:linear-gradient(180deg,#f1f2f013 0%,transparent 64%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-user-select:none;user-select:none}

/* ---------------------------------------------------------------
   5. Annotation card.
   --------------------------------------------------------------- */
.hero__annotation{position:absolute;z-index:3;top:50%;right:5%;display:flex;align-items:center;gap:15px;padding:18px 22px;
  border:1px solid #f1f2f026;border-radius:var(--radius);background:#141416f0;box-shadow:0 12px 40px #0004;
  font-size:12px}
.hero__annotation small{display:block;margin-top:4px;font-size:10px;color:var(--ink-2)}
.signal-bars{display:flex;align-items:center;gap:4px;height:30px}
.signal-bars i{display:block;width:3px;height:14px;border-radius:var(--radius);background:var(--accent-ink)}
.signal-bars i:nth-child(2n){height:28px}
.signal-bars i:nth-child(3){height:21px}

/* ---------------------------------------------------------------
   6. Rail: a record to start listening, the disciplines, a way down.
   --------------------------------------------------------------- */
.hero__rail{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:23px max(var(--gutter),calc((100% - var(--shell))/2));border-top:1px solid #ffffff1c;background:#0f1114eb}
.hero__record{display:flex;align-items:center;gap:15px;min-height:56px}
.hero__record img{width:54px;height:54px;object-fit:cover;border-radius:var(--radius);transition:transform .3s var(--ease)}
.hero__record:hover img{transform:rotate(-7deg)}
.hero__record small{display:block;margin-bottom:4px;font-size:9px;color:var(--ink-2)}
.hero__record strong{font-size:15px;font-weight:500}
.hero__record strong span{margin-left:25px;color:var(--accent-ink)}
.hero__disciplines{font-size:11px;letter-spacing:.02em;color:#d5d7d9}
.hero__disciplines span{margin-inline:12px;color:#5b6167}
.hero__scroll{display:flex;align-items:center;gap:25px;min-height:44px;font-size:10px}
.hero__scroll span{font-size:20px;color:var(--accent-ink)}

/* ---------------------------------------------------------------
   7. Entrance. Each H1 line rises out from behind a mask. It never
   fades: an opacity ramp on the largest text would push LCP out by
   the length of the animation. The negative insets leave room for
   the glow once the line is up.
   --------------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .hero h1>span{animation:nb-wipe 1100ms cubic-bezier(.16,1,.3,1) both}
  .hero h1>span:nth-child(1){animation-delay:60ms}
  .hero h1>span:nth-child(2){animation-delay:210ms}
  .hero__eyebrow{animation:nb-rise 760ms var(--ease) both}
  .hero__intro{animation:nb-rise 820ms var(--ease) 300ms both}
  .hero__actions{animation:nb-rise 820ms var(--ease) 380ms both}
}
@keyframes nb-wipe{from{transform:translateY(46%);clip-path:inset(-30% -8% 100% -8%)}to{transform:none;clip-path:inset(-30% -8% -30% -8%)}}

/* Live signal. The annotation's bars run as a meter and the eyebrow dot
   blinks on air. Both stop while the hero is off screen (demo.js). */
@media(prefers-reduced-motion:no-preference){
  .signal-bars i{animation:nb-signal 1.3s linear infinite}
  .signal-bars i:nth-child(1){animation-duration:1.1s;animation-delay:-.4s}
  .signal-bars i:nth-child(2){animation-duration:1.7s;animation-delay:-1.1s}
  .signal-bars i:nth-child(3){animation-duration:.9s;animation-delay:-.2s}
  .signal-bars i:nth-child(4){animation-duration:1.5s;animation-delay:-.7s}
  .signal-bars i:nth-child(5){animation-duration:1.2s;animation-delay:-.9s}
  .hero__eyebrow .signal-dot{animation:on-air 2.4s ease-in-out infinite}
  .hero[data-offscreen] .signal-bars i,.hero[data-offscreen] .hero__eyebrow .signal-dot{animation-play-state:paused}
}
@keyframes nb-signal{0%,100%{transform:scaleY(.3)}18%{transform:scaleY(.95)}32%{transform:scaleY(.5)}51%{transform:scaleY(1)}68%{transform:scaleY(.38)}84%{transform:scaleY(.78)}}

/* Marquee band. Travel is measured in pixels (demo.js), so the speed is
   the same on a phone and a wide screen. Solid and outline words take
   turns, with a sage mark between each. */
.ticker{overflow:hidden;padding-block:clamp(18px,2.2vw,30px);border-bottom:1px solid var(--rule);background:var(--ground)}
.ticker__track{display:flex;width:max-content}
.ticker__track[data-ready]{animation:nb-ticker var(--ticker-duration) linear infinite}
.ticker:not([data-active]) .ticker__track{animation-play-state:paused}
.ticker[data-active] .ticker__track{will-change:transform}
@media(hover:hover) and (pointer:fine){.ticker:hover .ticker__track{animation-play-state:paused}}
.ticker__set{display:flex;flex:none;align-items:center}
.ticker__set span{display:flex;align-items:center;font-family:var(--display);font-size:clamp(46px,6.6vw,104px);font-weight:700;line-height:1;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.ticker__set span:nth-child(even){color:transparent;-webkit-text-stroke:1px #f1f2f06b}
.ticker__set span::after{content:"";flex:none;width:.14em;height:.14em;margin-inline:.55em;background:var(--accent-ink);transform:rotate(45deg)}
@keyframes nb-ticker{to{transform:translate3d(calc(var(--ticker-shift) * -1),0,0)}}
@keyframes nb-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------
   8. Narrower screens.
   --------------------------------------------------------------- */
@media(max-width:1199px){
  .hero__stage{min-height:680px;padding-top:70px}
  .hero__copy{width:65%}
  .hero__annotation{top:55%;right:4%}
  .hero__disciplines{display:none}
}
@media(max-width:1023px){
  .hero__eyebrow{max-width:310px}
  .hero__actions .btn{gap:12px;padding-inline:16px}
  .hero__text-link{gap:10px}
}
@media(max-width:900px){
  .hero__stage{min-height:640px}
  .hero__copy{width:75%}
  .hero h1{font-size:100px}
  .hero__annotation{display:none}
  .hero__aurora{left:34%;filter:blur(72px)}
  .hero__grid{-webkit-mask-image:linear-gradient(120deg,#000 0%,transparent 72%);mask-image:linear-gradient(120deg,#000 0%,transparent 72%)}
}
/* Mobile. The portrait stops being a background and becomes a frame of its
   own beneath the copy: a landscape photograph cannot keep the headline
   readable and the person recognisable at the same time at 390px. */
@media(max-width:767px){
  .hero__stage{display:block;min-height:0;padding-top:44px;padding-bottom:0}
  .hero__copy{width:100%;max-width:430px}
  .hero__eyebrow{max-width:none;gap:9px;margin-bottom:25px;font-size:8px;letter-spacing:.03em}
  .hero h1{max-width:420px;margin-bottom:24px;font-size:clamp(79px,15.3vw,115px);line-height:.9}
  .hero__intro{max-width:230px;font-size:13px}
  .hero__actions{gap:18px;max-width:340px;margin-top:25px}
  .hero__actions .btn{gap:14px;min-height:49px;padding-inline:18px;font-size:11px}
  .hero__text-link{min-height:48px;padding:13px 20px;font-size:11px}

  .hero__visual{position:relative;inset:auto;z-index:auto;width:auto;height:auto;aspect-ratio:1.12;margin:32px calc(var(--gutter)*-1) 0}
  .hero__image{object-position:60% 20%;transform:none}
  .hero__image-shade{background:linear-gradient(0deg,#0f1114e6 0%,#0f111400 44%)}
  .hero__visual figcaption{right:16px;bottom:12px;max-width:210px;gap:2px}

  .hero__rail{position:relative;inset:auto;gap:10px;margin:0 calc(var(--gutter)*-1);padding-block:18px}
  .hero__record{gap:11px}
  .hero__record img{width:44px;height:44px}
  .hero__record small{font-size:8px}
  .hero__record strong{font-size:13px}
  .hero__record strong span{margin-left:12px}
  .hero__scroll{justify-content:center;gap:0;min-width:44px;font-size:0}
  .hero__scroll span{font-size:24px}

  .hero__watermark{display:none}
  .hero__grid{background-size:48px 48px}
}
@media(max-width:389px){
  .hero__eyebrow{letter-spacing:0}
  .hero h1{font-size:clamp(62px,20vw,76px)}
  .hero__actions{gap:11px}
  .hero__actions .btn{padding-inline:15px;font-size:10px}
  .hero__text-link{font-size:10px}
}
@media(max-width:359px){
  .hero__record strong span{margin-left:6px}
}

/* ---------------------------------------------------------------
   9. Preferences.
   --------------------------------------------------------------- */
@media(hover:none),(pointer:coarse){
  .hero__image{animation:none;transform:none}
  .hero__record:hover img,.hero__text-link:hover span{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .hero__image{transform:none}
  .hero__record:hover img{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .hero__annotation,.hero__rail{background:#141416}
}
@media(prefers-contrast:more){
  .hero__grid,.hero__aurora,.hero__watermark{display:none}
  .hero h1>span:not(.hero__accent){background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);filter:none}
}