/* Credits / billing face (per style guide) — Univers Thin Ultra Cn. */
    @font-face {
      font-family: "Univers Thin UltraCn";
      src: url("fonts/UniversLTStd-ThinUltraCn.woff2") format("woff2"),
           url("fonts/UniversLTStd-ThinUltraCn.otf") format("opentype");
      font-weight: 100 400;
      font-style: normal;
      font-display: swap;
    }

    /* reset handled by site.css */

    body.page-film { background: #000; color: #fff; }

    .aw-hero {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 255, 200, 0.08), transparent 58%),
        #000;
    }
    .aw-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 14;
      pointer-events: none;
      background:
        radial-gradient(ellipse 70% 68% at 50% 40%, transparent 38%, rgba(0, 0, 0, 0.45) 100%);
    }

    /* Scale to fill the hero. Prefer full-bleed width, but never crop so
       hard that Eddie/Kevin (top of the triangle) leave the frame.
       clamp: fill-height ≤ size ≤ fill-width, capped at ~62% of art height. */
    .aw-hero__stage {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: clamp(
        calc(100dvh * 1640 / 1440),
        100vw,
        calc(100dvh * 1640 / 1440 / 0.62)
      );
      aspect-ratio: 1640 / 1440;
      height: auto;
      flex: 0 0 auto;
      z-index: 1;
      container-type: size;
    }
    @media (min-aspect-ratio: 1640 / 1440) {
      /* Bias toward the top of the artwork (Eddie + Kevin). */
      .aw-hero__stage { transform: translate(-50%, -36%); }
    }

    .aw-hero__layer {
      position: absolute;
      object-fit: fill;
      user-select: none;
      pointer-events: none;
    }

    /* The logo is overlaid independently of the rest of the artwork so it can
       shrink on its own to keep fitting narrow widths before we scale the whole
       hero down. min(90vw, 51.0366%) keeps it at its painted size (51.0366% of
       the stage, which scales with the stage) until it would no longer leave an
       8% margin (4% each side), then pins it to 92vw — shrinking about its
       centre while preserving that margin. It reaches 0.8x its painted size at
       aspect-ratio ~0.5054, which is where the rule below starts scaling the
       whole composition. */
    /* Merged title: a graphical logo (rebuilt from per-letter PNG slices) that
       decrypts into the selected actor's name and back. Both faces live at the
       same point so the morph is centred. Positioned exactly where the painted
       logo used to sit. */
    .aw-hero__title {
      position: absolute;
      left: 50%;
      top: 62.4306%;            /* vertical centre of the painted logo */
      width: min(92vw, 51.0366%);
      transform: translate(-50%, -50%);
      z-index: 13;
      pointer-events: none;
    }
    /* The logo face: 13 full-height letter slices laid edge to edge. Each slice
       is 128px tall, so equal heights + width-shares reconstruct the wordmark
       exactly (the smaller "THE" and the taller apex-A are baked into the art). */
    .title__logo {
      display: flex;
      width: 100%;
      opacity: 1;
      transition: opacity 0.18s ease;
      filter: drop-shadow(0 0 0.5cqw rgba(255, 255, 255, 0.18));  /* soft halo to match the original PNG */
    }
    .title__logo.is-hidden { opacity: 0; }
    .title__logo img { display: block; height: auto; }   /* width set per-letter inline */
    /* The text face: the scramble + actor name, in Orbitron Medium. The first
       name matches the "THE" cap-height and the last name matches "AWAKENING"
       (both ignoring the oversized apex-A), and the two are centre-aligned the
       same way the logo's two sizes are. */
    .title__text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;          /* THE/AWAKENING are centred, not baseline-aligned */
      /* Same autofit as the logo: cqw on wide screens, then pinned to a vw value
         on narrow ones so the names shrink in lockstep with the logo (which is
         the widest element) and keep the 4% side margin. Pin = cqw * 92/51.0366. */
      gap: min(4.687vw, 2.6cqw);
      white-space: nowrap;
      font-family: "Orbitron", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      opacity: 0;
      transition: opacity 0.18s ease;
      text-shadow: 0 0.15cqw 0.7cqw rgba(0, 0, 0, 0.55);   /* legibility over the art */
    }
    .title__text.is-on { opacity: 1; }   /* matches the logo's full opacity */
    /* Sized to the logo's "THE"/"AWAKENING" cap-heights, then scaled 0.85x: at
       equal cap-height Orbitron Medium's heavier strokes read larger than the
       thin logo, so a uniform trim matches it while keeping the size ratio. */
    /* Tracking matches the logo's open spacing (its inter-letter gap is ~0.46x
       the cap-height; Orbitron's natural gap is only ~0.095em, so +0.24em lands
       it there). letter-spacing lives on the spans so its em resolves against
       each name's own size (proportional), not the inherited body size. The
       negative margin cancels the trailing tracking after the last glyph so the
       word gap stays the flex gap and the lockup stays truly centred. */
    .title__first { font-size: min(5.245vw, 2.91cqw); letter-spacing: 0.24em; margin-right: -0.24em; }
    .title__last  { font-size: min(6.382vw, 3.54cqw); letter-spacing: 0.24em; margin-right: -0.24em; }
    /* A last-name "A" becomes the logo's oversized apex-A (∧) — same glyph and
       proportion as the wordmark — so the names feel branded. The slot reserves
       the ∧'s width so resolving from noise causes no layout shift. */
    .title__last .apex {
      position: relative;
      display: inline-block;
      width: 1.59em;
      height: 0.72em;            /* cap band; its bottom rests on the text baseline */
      vertical-align: baseline;
      margin-left: -0.14em;      /* tuck the ∧ closer to the preceding letter */
      margin-right: 0.09em;      /* ...while keeping a bit more room on its right */
    }
    .title__last .apex-noise {   /* the scrambling letter shown before it resolves */
      position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    }
    .title__last .apex-glyph {   /* the ∧ image, centred on the letters' cap-centre */
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      height: 2.17em;            /* sizes the ∧ to the logo's actual ∧ (matches it through the morph) */
      width: auto; display: none;
    }
    .title__last .apex.is-glyph .apex-noise { display: none; }
    .title__last .apex.is-glyph .apex-glyph { display: block; }

    /* Actors grow to 1.2x on hover, scaling about the centre of their graphic.
       The .is-hover class is toggled by the script below, which does per-pixel
       alpha hit-testing so hover lands on the visible figure, not the
       transparent corners of an overlapping actor's bounding box. */
    .aw-hero__actor {
      /* The selected transform is driven by these vars so one keyframe set
         covers every actor (Justin scales less; the others tilt). */
      --sel-scale: 1;
      --sel-rot: 0deg;
      transform-origin: center center;
      transform: scale(var(--sel-scale)) rotate(var(--sel-rot));
      /* Fast, decisive ease-out — no overshoot, no bounce. Governs deselect. */
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.3s ease, filter 0.3s ease;
      will-change: transform, filter;
      /* Non-selected actors are dimmed so the selected one stands out:
         80% opacity, -20% saturation, -10% brightness. */
      opacity: 0.8;
      /* The drop-shadow is present here too (transparent, zero blur) so the
         filter function list matches .is-hover and interpolates cleanly. */
      filter: saturate(0.8) brightness(0.9) drop-shadow(0 0 0 rgba(0, 255, 200, 0)) drop-shadow(0 0 0 rgba(0, 255, 200, 0));
    }
    .aw-hero__actor.is-hover {
      --sel-scale: 1.2;
      opacity: 1;
      filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 0.55cqw rgba(0, 255, 200, 1)) drop-shadow(0 0 3.2cqw rgba(0, 255, 200, 0.85));
      /* Select = a sharp lock-on: the figure snaps to size while a brief light
         bloom + glow surge hits and settles. No squash, no jitter. */
      animation: actorLockOn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Justin is the large central figure, so a 1.2x pop is too much — 1.15x. */
    .aw-hero__actor[alt="Justin"].is-hover { --sel-scale: 1.15; }
    /* A slight tilt on selection, alternating direction per actor. */
    .aw-hero__actor[alt="Eddie"].is-hover { --sel-rot: -2deg; }
    .aw-hero__actor[alt="Kevin"].is-hover { --sel-rot: 2deg; }
    .aw-hero__actor[alt="Alice"].is-hover { --sel-rot: -2deg; }
    .aw-hero__actor[alt="Peter"].is-hover { --sel-rot: 2deg; }
    @keyframes actorLockOn {
      0% {
        transform: scale(1) rotate(0deg);
        filter: saturate(0.85) brightness(0.86) drop-shadow(0 0 0 rgba(0, 255, 200, 0)) drop-shadow(0 0 0 rgba(0, 255, 200, 0));
      }
      30% {
        /* the hit: a hard light bloom + glow surge, scale almost fully in */
        transform: scale(calc(var(--sel-scale) * 0.995)) rotate(var(--sel-rot));
        filter: saturate(1.35) brightness(1.38) drop-shadow(0 0 0.8cqw rgba(0, 255, 200, 1)) drop-shadow(0 0 4.2cqw rgba(0, 255, 200, 0.95));
      }
      100% {
        transform: scale(var(--sel-scale)) rotate(var(--sel-rot));
        filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 0.55cqw rgba(0, 255, 200, 1)) drop-shadow(0 0 3.2cqw rgba(0, 255, 200, 0.85));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .aw-hero__actor.is-hover { animation: none; }
      .aw-hero__actor { transition-duration: 0.2s; }
    }
    /* Logo mode (no actor selected): every actor is fully opaque and fully
       saturated — the dimming only applies once a single actor is the focus. */
    .aw-hero.is-logo .aw-hero__actor {
      opacity: 1;
      filter: saturate(1) brightness(1) drop-shadow(0 0 0 rgba(0, 255, 200, 0)) drop-shadow(0 0 0 rgba(0, 255, 200, 0));
    }

    /* The eye's iris (over the targeting ring) glances toward the selected actor;
       the JS sets its `translate`, this animates the move. */
    .aw-hero__eye-iris {
      transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Subtle neon-sign flicker on the background — mostly steady at full
       opacity with brief, irregular dips. */

    /* Name credit at the bottom of the hero — single line, fully opaque white,
       scrambles when the selection changes. Sizes in cqw so it scales with the
       artwork. */

    .aw-hero__stage::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 18%;
      z-index: 12;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.72));
    }

    /* ===================== Floating navigation =====================
       Brand: black + signal green #00ffc8, Orbitron UI (uppercase, wide
       tracking), hard corners, green glow on interaction (never soft shadow). */
    .aw-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 30px;
      height: 64px;
      padding: 0 clamp(12px, 2vw, 16px);
      background: rgba(4, 7, 10, 0.92);
      -webkit-backdrop-filter: blur(16px);
              backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(0, 255, 200, 0.16);
    }
    body.page-film .aw-nav,
    body.home-v4 .aw-nav {
      background: rgba(4, 7, 10, 0.55);
    }

    .aw-nav__brand { display: inline-flex; align-items: center; margin-left: -2px; }
    .aw-nav__brand img { height: 30px; width: auto; display: block; }

    .aw-nav__burger {
      display: none;             /* desktop: hidden */
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 30px; height: 30px;
      padding: 0; background: none; border: 0; cursor: pointer;
    }
    .aw-nav__burger span {
      display: block; width: 24px; height: 1.5px;
      background: #EEF2EE;
      transition: transform .25s ease, opacity .25s ease;
    }
    .aw-nav.is-menu-open .aw-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .aw-nav.is-menu-open .aw-nav__burger span:nth-child(2) { opacity: 0; }
    .aw-nav.is-menu-open .aw-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .aw-nav__links {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;         /* push links + CTA to the right */
    }
    @media (max-width: 1180px) {
      .aw-nav__links { gap: 16px; }
      .aw-nav { gap: 16px; }
    }
    .aw-nav__links a {
      font-family: "Orbitron", sans-serif;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(238, 242, 238, 0.82);
      text-decoration: none;
      transition: color .2s ease, text-shadow .2s ease;
    }
    .aw-nav__links a:hover {
      color: #00ffc8;
      text-shadow: 0 0 12px rgba(0, 255, 200, 0.55);
    }

    .aw-nav__cta {
      display: inline-flex;
      align-items: center;
      font-family: "Orbitron", sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #04070A;
      background: #00ffc8;
      padding: 11px 20px;
      border: 1px solid #00ffc8; /* hard corners — no border-radius */
      text-decoration: none;
      white-space: nowrap;
      transition: background .2s ease, box-shadow .2s ease;
    }
    .aw-nav__cta:hover {
      background: #33ffd4;
      box-shadow: 0 0 18px rgba(0, 255, 200, 0.6);   /* green glow, never soft shadow */
    }

    /* Scroll cue — a quiet "TRAILER" label over a thin green track with a beam
       that scans downward, plus a soft chevron. Hints there's more below.
       Fades out the moment the user starts scrolling. */
    .scroll-cue {
      position: absolute;
      left: 50%;
      bottom: clamp(8px, 1.8vh, 20px);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      background: none;
      border: 0;
      padding: 6px 10px;
      cursor: pointer;
      z-index: 20;
      opacity: 1;
      transition: opacity .5s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
    .scroll-cue__label {
      font-family: "Orbitron", sans-serif;
      font-weight: 500;
      font-size: clamp(9px, 0.95vw, 11px);
      letter-spacing: 0.44em;
      text-indent: 0.44em;            /* recentre against the trailing tracking */
      text-transform: uppercase;
      color: rgba(238, 242, 238, 0.6);
      transition: color .3s ease, text-shadow .3s ease;
    }
    .scroll-cue__track {
      position: relative;
      width: 1px;
      height: 38px;
      overflow: hidden;
      background: linear-gradient(to bottom,
        rgba(0, 255, 200,0) 0%, rgba(0, 255, 200,0.26) 28%,
        rgba(0, 255, 200,0.26) 72%, rgba(0, 255, 200,0) 100%);
    }
    .scroll-cue__beam {
      position: absolute;
      left: 0; top: 0;
      width: 100%;
      height: 14px;
      background: linear-gradient(to bottom, rgba(0, 255, 200,0), #00ffc8);
      box-shadow: 0 0 6px rgba(0, 255, 200,0.85);   /* green glow, never soft shadow */
      animation: scrollBeam 2.3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    @keyframes scrollBeam {
      0%   { transform: translateY(-14px); opacity: 0; }
      22%  { opacity: 1; }
      78%  { opacity: 1; }
      100% { transform: translateY(38px); opacity: 0; }
    }
    .scroll-cue__chevron {
      width: 8px; height: 8px;
      margin-top: 1px;
      border-right: 1.5px solid rgba(0, 255, 200,0.85);
      border-bottom: 1.5px solid rgba(0, 255, 200,0.85);
      animation: scrollChevron 2.3s ease-in-out infinite;
    }
    @keyframes scrollChevron {
      0%, 100% { opacity: 0.25; transform: rotate(45deg) translate(-1px, -1px); }
      50%      { opacity: 0.9;  transform: rotate(45deg) translate(1px, 1px); }
    }
    .scroll-cue:hover .scroll-cue__label,
    .scroll-cue.is-hover .scroll-cue__label {
      color: #00ffc8;
      text-shadow: 0 0 12px rgba(0, 255, 200, 0.55);
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-cue__beam, .scroll-cue__chevron { animation: none; }
    }

    /* Mobile: hamburger + logo on the left, Watch Movie CTA on the right. */
    @media (max-width: 820px) {
      .aw-nav { gap: 8px; height: 58px; }
      .aw-nav__burger { display: flex; }
      .aw-nav__brand img { height: 24px; }
      .aw-nav__links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 6px 0;
        background: #04070a;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        border-top: 1px solid rgba(0, 255, 200, 0.16);
        border-bottom: 1px solid rgba(0, 255, 200, 0.16);
        /* Slide down on open / up on close: animate the collapsed height plus a
           fade. overflow:hidden clips the links while the panel grows/shrinks. */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.34s ease, opacity 0.26s ease;
      }
      .aw-nav.is-menu-open .aw-nav__links {
        max-height: 520px;       /* a hair over the tallest the menu gets */
        opacity: 1;
        pointer-events: auto;
      }
      .aw-nav__links a {
        padding: 16px clamp(16px, 5vw, 28px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .aw-nav__links a:last-child { border-bottom: 0; }
      .aw-nav__cta { margin-left: auto; padding: 9px 14px; font-size: 11px; }
    }
    @media (max-width: 420px) {
      .aw-nav { padding-left: 8px; padding-right: 8px; gap: 6px; }
      .aw-nav__brand img { height: 20px; max-width: 118px; }
      .aw-nav__cta { padding: 8px 9px; font-size: 9px; letter-spacing: 0.08em; }
    }
/* Trailer block */
.aw-trailer {
  position: relative;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 255, 200, 0.08), transparent 60%),
    linear-gradient(180deg, #000 0%, #040a08 40%, #000 100%);
  border-top: 1px solid rgba(0, 255, 200, 0.12);
}
.aw-trailer .trailer-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 200, 0.2);
  background: #050807;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 60px rgba(0, 255, 200, 0.08);
}
.aw-trailer .trailer-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.55) saturate(0.9);
  max-width: none;
}
.aw-trailer .trailer-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.aw-trailer .trailer-play span {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 200, 0.7);
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #00ffc8;
  box-shadow: 0 0 30px rgba(0, 255, 200, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s;
  padding-left: 4px;
}
.aw-trailer .trailer-play:hover span {
  transform: scale(1.06);
  background: rgba(0, 255, 200, 0.12);
  box-shadow: 0 0 40px rgba(0, 255, 200, 0.4);
}
.aw-trailer .trailer-meta {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

/* Override site.css img max-width for layered hero art */
.aw-hero .aw-hero__layer,
.aw-hero .title__logo img,
.aw-hero .apex-glyph {
  max-width: none !important;
  max-height: none !important;
}
body.page-film .topbar,
body.page-film .noise { display: none !important; }
body.page-film { padding-top: 0; }
.aw-after-hero { position: relative; z-index: 1; }
/* BTS cyan brand on CTA glow already swapped */
.aw-nav__brand img { filter: drop-shadow(0 0 8px rgba(0,255,200,0.25)); }
/* Layer positioning hard-override vs site.css img rules */
.aw-hero .aw-hero__stage {
  overflow: hidden;
}
.aw-hero img.aw-hero__layer {
  position: absolute;
  object-fit: fill;
  max-width: none !important;
  max-height: none !important;
  /* width/height come from inline % styles */
}
.aw-hero .title__logo img {
  max-width: none !important;
  height: auto !important;
  flex: 0 0 auto;
}
/* Soft brand bar under hero ticker */
body.page-film .cinema-ticker {
  border-top: 1px solid rgba(0, 255, 200, 0.1);
}
/* Make aw-nav brand logo use BTS logo sizing */
.aw-nav__brand img {
  height: 28px;
  width: auto;
  max-width: 200px;
}

/* Lockup + overlay words live on the hero (viewport), not the cropped
   stage, so the poster can cover/scale on ultrawide without losing copy. */
.aw-hero__lockup {
  position: absolute;
  left: 50%;
  top: calc(64px + clamp(0.35rem, 1.2vh, 1.15rem));
  width: min(52vw, 38rem);
  transform: translateX(-50%);
  z-index: 16;
  text-align: center;
  pointer-events: none;
}
.aw-hero__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.22));
}
.aw-hero__tagline {
  margin: 0.45rem 0 0;
  font-family: "Orbitron", sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 1.2vw, 18px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: #b7ff6a;
  text-shadow: 0 0 14px rgba(183, 255, 106, 0.45), 0 2px 8px #000;
  white-space: nowrap;
}
.aw-hero.is-logo .aw-hero__title {
  opacity: 0;
  pointer-events: none;
}
.aw-hero__title {
  transition: opacity 0.18s ease;
}

.aw-hero__words {
  position: absolute;
  inset: 64px 0 5.8rem 0;
  z-index: 16;
  pointer-events: none;
  overflow: hidden;
}
.hw-col {
  position: absolute;
  top: 10%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.35rem;
}
.hw-col-left {
  left: clamp(0.85rem, 3.4vw, 4.4rem);
  align-items: flex-start;
}
.hw-col-right {
  right: clamp(0.85rem, 3.4vw, 4.4rem);
  align-items: flex-end;
  text-align: right;
}
.aw-hero__words .hw {
  font-family: "Orbitron", "Share Tech Mono", sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.35vh, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(210, 230, 214, 0.78);
  line-height: 1.25;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
}
.aw-hero__words .hw-stack { white-space: normal; line-height: 1.15; }
.aw-hero__words .hw-hot {
  font-size: clamp(16px, 2.4vh, 32px);
  letter-spacing: 0.4em;
  color: #b7ff6a;
  text-shadow: 0 0 14px rgba(183, 255, 106, 0.35), 0 0 8px #000;
}
.aw-hero__words .hw-climate {
  letter-spacing: 0.4em;
  opacity: 0.72;
}
@media (max-width: 820px) {
  .aw-hero__tagline { letter-spacing: 0.14em; text-indent: 0.14em; white-space: normal; }
  .aw-hero__lockup { width: min(88vw, 22rem); }
  .hw-col { top: 8%; bottom: 12%; }
  .aw-hero__words .hw { letter-spacing: 0.18em; }
}