/* ═══════════════════════════════════════════════════════════
   COMPONENTS — pixel-accurate Figma build
   All font sizes / colors verified against GTSFhwai8hGO7TEY7DMVto
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   SHARED UTILITIES
══════════════════════════════════════ */
.section-badge {
  font-family: var(--font-syne);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--stack-heading-sub);
  display: block;
}

:where(.unleash__sub, .work-card__desc, .reel-card__desc, .talent__bio p, .studio__copy p, .contact__sub, .contact__form-status, .rep-agent__meta, .rep-agent__line) {
  line-height: var(--body-line-height);
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 300;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(5, 8, 30, 0.96);
  border: 1px solid rgba(128,174,255,0.36);
  box-shadow: 0 14px 30px rgba(2, 6, 24, 0.32);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  transform: translateY(-180%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, [role="button"], .audio-player__waveform, .audio-progress-bar, .contact__choice, .ai-assistant__launcher, .ai-assistant__close, .ai-assistant__send, .ai-assistant__prompts button) {
  touch-action: manipulation;
}

/* ══════════════════════════════════════
   1. NAV
══════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 122px;
  display: flex;
  align-items: flex-start;
  padding-top: 24px;
  pointer-events: none;
  transition:
    top 0.35s var(--ease-out),
    background 0.35s,
    backdrop-filter 0.35s,
    border-color 0.35s,
    padding-top 0.35s var(--ease-out),
    height 0.35s var(--ease-out);
}

.nav--scrolled {
  background: rgba(5, 8, 30, 0.76);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  height: 82px;
  padding-top: 0;
  align-items: center;
}

.nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  width: min(calc(100% - (var(--container-pad) * 2)), 1264px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo img {
  height: 100px;
  width: auto;
}

.nav--scrolled .nav__logo img {
  height: 65px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 1;
  justify-content: center;
  position: static;
  left: auto;
  transform: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0.88;
  padding: 14px 0 10px;
  overflow: hidden;
  transition: color 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
  white-space: nowrap;
}

.nav__link::before,
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.95;
  transform: scaleX(0);
  transition: transform 0.34s var(--ease-smooth);
}

.nav__link::before {
  top: 6px;
  transform-origin: left;
}

.nav__link::after {
  bottom: 4px;
  transform-origin: right;
}

.nav__link:not(.nav__link--active):hover,
.nav__link:not(.nav__link--active):active {
  color: var(--accent);
  opacity: 1;
}

.nav__link--active {
  color: var(--accent);
  opacity: 1;
}

.nav__link:hover::before,
.nav__link:hover::after,
.nav__link:focus-visible::before,
.nav__link:focus-visible::after,
.nav__link--active::before,
.nav__link--active::after {
  transform: scaleX(1);
}

.nav__link:focus-visible {
  outline: none;
  color: var(--accent);
  opacity: 1;
}

.nav__social {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text);
  opacity: 1;
  transition: color 0.2s, opacity 0.2s;
}

.nav__social a:hover,
.nav__social a:focus-visible {
  color: var(--accent);
  opacity: 1;
}
.nav__social svg { width: 17px; height: 17px; }

.nav__imdb {
  width: auto !important;
  min-width: 42px;
  height: 30px;
  padding-inline: 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: var(--font-druk);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  opacity: 1;
  transition: color 0.2s;
}

.nav__imdb:hover,
.nav__imdb:focus-visible {
  color: rgba(255,255,255,1);
}

.nav__social a:focus-visible,
.nav__imdb:focus-visible,
.nav__cta:focus-visible,
.nav__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(128,174,255,0.18);
  border-radius: 999px;
}

.nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%),
    rgba(5, 8, 30, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 36px rgba(2, 6, 24, 0.26);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 0.22s var(--ease-out),
    border-color 0.22s var(--ease-out),
    background 0.22s var(--ease-out),
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  color: var(--text);
  border-color: rgba(128, 174, 255, 0.64);
  background:
    linear-gradient(180deg, rgba(128,174,255,0.2) 0%, rgba(255,255,255,0.07) 100%),
    rgba(5, 8, 30, 0.42);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 18px 42px rgba(2, 6, 24, 0.32),
    0 0 28px rgba(128,174,255,0.16);
}

.nav__toggle {
  display: none;
  grid-column: 3;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  justify-self: end;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(2, 6, 24, 0.18);
  transition:
    background 0.34s var(--ease-out),
    border-color 0.34s var(--ease-out),
    box-shadow 0.34s var(--ease-out),
    transform 0.34s var(--ease-out);
}

.nav__toggle::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(128,174,255,0.24), rgba(128,174,255,0.02) 68%);
  opacity: 0;
  transform: scale(0.74);
  transition: opacity 0.34s var(--ease-out), transform 0.44s var(--ease-out);
  z-index: 0;
}

.nav__toggle:hover,
.nav--menu-open .nav__toggle {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 16px 38px rgba(2, 6, 24, 0.34);
  transform: translateY(-1px);
}

.nav__toggle:hover::before,
.nav--menu-open .nav__toggle::before {
  opacity: 1;
  transform: scale(1);
}

.nav__toggle-icon {
  display: block;
  position: relative;
  width: 21px;
  height: 16px;
  z-index: 1;
}

.nav__toggle-line {
  display: block;
  position: absolute;
  left: 0;
  width: 21px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.22s ease;
}

.nav__toggle-line:nth-child(1) {
  top: 0;
}

.nav__toggle-line:nth-child(2) {
  top: 7px;
}

.nav__toggle-line:nth-child(3) {
  top: 14px;
}

.nav--menu-open .nav__toggle-icon .nav__toggle-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.nav--menu-open .nav__toggle-icon .nav__toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}

.nav--menu-open .nav__toggle-icon .nav__toggle-line:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

.nav__mobile-panel {
  position: fixed;
  inset: 0;
  padding: clamp(108px, 16svh, 132px) 24px calc(28px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(10, 14, 36, 0.74) 0%, rgba(5, 8, 30, 0.84) 58%, rgba(5, 8, 30, 0.92) 100%),
    rgba(5, 8, 30, 0.72);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(32px, 7svh, 56px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -24px, 0);
  transition:
    opacity 0.38s var(--ease-out),
    visibility 0.38s var(--ease-out),
    -webkit-clip-path 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, clip-path;
  z-index: 1;
}

.nav__mobile-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(128,174,255,0.12) 0%, transparent 18%, transparent 82%, rgba(255,115,25,0.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 18%, transparent 56%);
  opacity: 0.76;
  transform: translate3d(0, -12px, 0);
  transition: opacity 0.44s var(--ease-out), transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav--menu-open .nav__mobile-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

.nav--menu-open .nav__mobile-panel::before {
  opacity: 0.86;
  transform: translate3d(0, 0, 0);
}

.nav__mobile-links,
.nav__mobile-footer {
  position: relative;
  z-index: 1;
}

.nav__mobile-links {
  display: grid;
  gap: 0;
  width: min(100%, 430px);
  margin-inline: auto;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  width: 100%;
  min-height: 48px;
  text-align: center;
  padding-block: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transform: translate3d(0, 18px, 0);
  transition:
    color 0.22s,
    opacity 0.4s var(--ease-out) var(--menu-link-delay, 0s),
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1) var(--menu-link-delay, 0s);
}

.nav--menu-open .nav__mobile-link {
  opacity: 0.96;
  transform: translate3d(0, 0, 0);
}

.nav--menu-open .nav__mobile-link:nth-child(1) { --menu-link-delay: 0.12s; }
.nav--menu-open .nav__mobile-link:nth-child(2) { --menu-link-delay: 0.16s; }
.nav--menu-open .nav__mobile-link:nth-child(3) { --menu-link-delay: 0.2s; }
.nav--menu-open .nav__mobile-link:nth-child(4) { --menu-link-delay: 0.24s; }
.nav--menu-open .nav__mobile-link:nth-child(5) { --menu-link-delay: 0.28s; }
.nav--menu-open .nav__mobile-link:nth-child(6) { --menu-link-delay: 0.32s; }
.nav--menu-open .nav__mobile-link:nth-child(7) { --menu-link-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .nav__toggle,
  .nav__toggle::before,
  .nav__toggle-line,
  .nav__mobile-panel,
  .nav__mobile-panel::before,
  .nav__mobile-link {
    transition: none !important;
  }
}

.nav__mobile-link:last-child {
  border-bottom: 0;
}

.nav__mobile-link::after {
  content: '';
  display: none;
}

.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.nav__mobile-link:hover::after,
.nav__mobile-link:focus-visible::after {
  opacity: 0.72;
  transform: translateX(0) rotate(45deg);
}

.nav__mobile-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 430px);
  margin-inline: auto;
}

.nav__mobile-social {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.nav__mobile-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.nav__mobile-social a:hover,
.nav__mobile-social a:focus-visible {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

.nav__mobile-social svg {
  width: 16px;
  height: 16px;
}

.nav__mobile-imdb {
  color: var(--text) !important;
}

.nav__mobile-email {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
}

body.is-nav-open {
  overflow: hidden;
}

/* ══════════════════════════════════════
   2. HERO
══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 1088px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 386px;
}

/* Three portrait panels — fill entire hero */
.hero__panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 479fr 483fr 479fr;
  z-index: 1;
}

.hero__panel {
  position: relative;
  overflow: hidden;
}

.hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 8s ease-out;
}

.hero__panel--1 img { object-position: 44% 14%; }
.hero__panel--2 img { object-position: 51% 10%; }
.hero__panel--3 img { object-position: 58% 16%; }

/* Warm panel glow — each panel has its own subtle tint */
.hero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%,
    rgba(211,78,11,0.22) 0%, transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Dark vignette overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5,8,30,0.58) 0%,
      rgba(5,8,30,0.06) 30%,
      rgba(5,8,30,0.06) 56%,
      rgba(5,8,30,0.68) 78%,
      rgba(5,8,30,0.95) 100%),
    linear-gradient(to right,
      rgba(5,8,30,0.72) 0%,
      transparent 17%,
      transparent 83%,
      rgba(5,8,30,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Warm light leak from top */
.hero__lightleak {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(128,174,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Bottom orange burst glow */
.hero__glow {
  position: absolute;
  bottom: -126px;
  left: 50%;
  transform: translateX(-50%);
  width: 144%;
  height: 612px;
  background: radial-gradient(ellipse 55% 100% at 50% 100%,
    rgba(211,78,11,0.82) 0%,
    rgba(180,55,0,0.42) 38%,
    rgba(139,40,0,0.14) 62%,
    transparent 75%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Hero bottom flare — sits at the visual hero/tagline boundary */
.hero__flare {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  overflow: visible;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,72,0,0.18) 10%,
      rgba(255,95,15,0.78) 28%,
      rgba(255,218,128,1) 50%,
      rgba(255,95,15,0.82) 72%,
      rgba(255,72,0,0.18) 90%,
      transparent 100%
    );
  background-size: 180% 100%;
  box-shadow:
    0 0 18px 3px rgba(255,125,28,0.86),
    0 0 58px 14px rgba(255,84,0,0.48),
    0 0 132px 32px rgba(211,78,11,0.28);
  z-index: 7;
  pointer-events: none;
  mix-blend-mode: screen;
  animation:
    heroFlareDrift 16s var(--ease-smooth) infinite alternate,
    heroFlareLumen 9s ease-in-out infinite;
  will-change: background-position, opacity, filter;
}

.hero__flare::before,
.hero__flare::after {
  content: '';
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero__flare::before {
  left: 50%;
  top: 50%;
  width: min(1180px, 96vw);
  height: 76px;
  transform: translate3d(-50%, -50%, 0);
  background:
    radial-gradient(ellipse 34% 82% at 50% 50%, rgba(255,210,112,0.32) 0%, transparent 62%),
    radial-gradient(ellipse 52% 100% at 50% 50%, rgba(255,95,15,0.26) 0%, transparent 72%),
    radial-gradient(ellipse 72% 120% at 50% 50%, rgba(211,78,11,0.14) 0%, transparent 68%);
  filter: blur(18px);
  opacity: 0.72;
  animation: heroFlareHalo 14s var(--ease-smooth) infinite;
}

.hero__flare::after {
  left: 0;
  top: 50%;
  width: min(480px, 46vw);
  height: 54px;
  opacity: 0;
  background:
    radial-gradient(ellipse 12% 44% at 50% 50%, rgba(255,244,206,0.95) 0%, rgba(255,180,66,0.38) 58%, transparent 72%),
    linear-gradient(90deg, transparent 0%, rgba(255,95,15,0.02) 6%, rgba(255,116,24,0.62) 46%, rgba(255,234,178,0.82) 50%, rgba(255,116,24,0.58) 54%, rgba(255,95,15,0.02) 94%, transparent 100%);
  filter: blur(2px);
  transform: translate3d(-65%, -50%, 0) skewX(-10deg);
  animation: heroFlareSweep 11s cubic-bezier(0.55, 0, 0.25, 1) infinite;
  will-change: transform, opacity;
}

/* Headline content */
.hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  width: min(calc(100% - 240px), 1096px);
  padding-inline: 0;
  transform: translateY(clamp(-48px, -3vh, -24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
}

.hero__eyebrow,
.hero__subtext {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  text-shadow:
    0 0 36px rgba(5, 8, 30, 0.78),
    0 0 84px rgba(5, 8, 30, 0.52);
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__headline {
  font-family: var(--font-druk);
  font-size: clamp(2.5rem, 5.55vw, 5.65rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  color: var(--text);
  line-height: 0.96;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
}

.hero__hl-line {
  display: block;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  text-shadow:
    0 0 80px rgba(211,78,11,0.45),
    0 0 160px rgba(211,78,11,0.20);
}

.hero__hl-line--1 { color: var(--text); }
.hero__hl-line--2 { color: var(--text); }

.hero__subtext {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 700;
  line-height: 1.42;
}

.hero__demos {
  width: min(100%, 820px);
  margin-top: clamp(14px, 1vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.2vw, 30px);
}

.hero__demos .audio-player__label {
  color: #fff;
}

.hero__demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(10px, 1.2vw, 18px);
  min-height: 42px;
  padding: 0 24px;
  border: 1px solid rgba(252, 93, 18, 0.78);
  border-radius: var(--radius-pill);
  background: var(--gradient-cta);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 14px 30px rgba(136,52,17,0.26);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

.hero__demo-cta:hover,
.hero__demo-cta:focus-visible {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 16px 34px rgba(136,52,17,0.32),
    0 0 26px rgba(211,78,11,0.22);
}

.hero__demo-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(252,93,18,0.22),
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 16px 34px rgba(136,52,17,0.32);
}

/* ══════════════════════════════════════
   3. DEMOS
══════════════════════════════════════ */
.tagline-section {
  --tagline-hero-gap: clamp(30px, 3vw, 48px);
  background: #05081e;
  margin-top: -320px;
  padding: var(--tagline-hero-gap) 0 var(--section-space-y);
  position: relative;
  z-index: 6;
}

.tagline__inner {
  width: min(calc(100% - (var(--container-pad) * 2)), 1264px);
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sub-content);
}

.tagline__heading {
  font-family: var(--font-druk);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.002em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
}

.tagline__players {
  display: flex;
  flex-direction: row;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  max-width: 820px;
  justify-content: center;
}

.tagline__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(2px, 0.7vw, 10px);
  padding-inline: clamp(34px, 4vw, 54px);
  min-height: 54px;
  text-align: center;
}

/* ── AUDIO PLAYER ── */
.audio-player {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  max-width: 390px;
  min-width: 0;
  position: relative;
  isolation: isolate;
}

.audio-player audio {
  display: none;
}

.audio-player__label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 106, 31, 0.18);
}

.audio-player__bar-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(120px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.1) 24%, transparent 42%),
    radial-gradient(circle at 94% 105%, rgba(255,111,28,0.18) 0%, rgba(255,111,28,0.06) 36%, transparent 64%),
    linear-gradient(142deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 42%, rgba(10, 14, 32, 0.48) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 8px 12px 8px 8px;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 20px 42px rgba(2, 5, 18, 0.34),
    0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(26px) saturate(180%) contrast(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(180%) contrast(1.06);
  transition:
    transform 0.42s var(--ease-smooth),
    box-shadow 0.42s var(--ease-smooth),
    border-color 0.32s var(--ease-smooth),
    background 0.32s var(--ease-smooth),
    filter 0.32s var(--ease-smooth);
}

.audio-meta {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.audio-meta .audio-player__label,
.audio-meta .audio-label {
  text-align: left;
  line-height: 1;
}

.audio-meta .audio-player__time,
.audio-meta .audio-time {
  min-width: 0;
  text-align: left;
}

.audio-player__bar-wrapper::before,
.audio-player__bar-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.audio-player__bar-wrapper::before {
  inset: 1px;
  border-radius: 7px;
  background:
    linear-gradient(152deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.14) 28%, transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(255,141,48,0.24) 0%, transparent 38%);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.audio-player__bar-wrapper::after {
  inset: auto 16px 8px 58px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.58) 30%, rgba(255,126,34,0.74) 58%, transparent 100%);
  opacity: 0.68;
  filter: blur(0.4px);
}

.audio-player:hover .audio-player__bar-wrapper {
  transform: translateY(-2px);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.14) 26%, transparent 44%),
    radial-gradient(circle at 94% 105%, rgba(255,124,31,0.24) 0%, rgba(255,124,31,0.08) 38%, transparent 66%),
    linear-gradient(142deg, rgba(255,255,255,0.27) 0%, rgba(255,255,255,0.13) 42%, rgba(10, 14, 32, 0.42) 100%);
  border-color: rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 24px 54px rgba(2, 5, 18, 0.4),
    0 0 22px rgba(255,111,28,0.12);
  filter: brightness(1.04);
}

.audio-player.is-playing .audio-player__bar-wrapper {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.11) 28%, transparent 48%),
    radial-gradient(circle at 88% 96%, rgba(255,124,31,0.3) 0%, rgba(255,124,31,0.1) 42%, transparent 70%),
    linear-gradient(142deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.11) 42%, rgba(22, 17, 22, 0.52) 100%);
  border-color: rgba(255,128,38,0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 24px 56px rgba(2, 5, 18, 0.38),
    0 0 30px rgba(255,107,20,0.18);
}

.audio-player__play,
.audio-play-btn {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.1) 100%),
    rgba(9, 14, 32, 0.5);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: #f8fbff;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 10px 22px rgba(2, 6, 22, 0.28);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition:
    transform 0.36s var(--ease-smooth),
    box-shadow 0.36s var(--ease-smooth),
    background 0.3s var(--ease-smooth),
    border-color 0.3s var(--ease-smooth);
}

.audio-player__play::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: linear-gradient(150deg, rgba(255,255,255,0.36), transparent 54%);
  pointer-events: none;
}

.audio-player:hover .audio-player__play {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 14px 28px rgba(2, 6, 22, 0.34);
}

.audio-player.is-playing .audio-player__play {
  background:
    linear-gradient(180deg, rgba(255,196,126,0.96) 0%, rgba(255,105,17,0.9) 100%);
  border-color: rgba(255,208,151,0.68);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    0 12px 28px rgba(255,95,13,0.28);
}

.audio-player__play svg {
  width: 16px;
  height: 16px;
}

.audio-player__waveform,
.audio-progress-bar {
  flex: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: 3px;
  min-height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 100%),
    rgba(6, 10, 26, 0.34);
  border: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.14);
}

.audio-player__waveform::before,
.audio-player__waveform::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.audio-player__waveform::before {
  background: rgba(255,255,255,0.2);
  opacity: 0.12;
}

.audio-player__waveform::after {
  background:
    radial-gradient(circle at var(--hover-pos, 50%) 50%, rgba(255,255,255,0.52) 0%, rgba(255,151,55,0.16) 24%, rgba(255,255,255,0) 62%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.audio-player:hover .audio-player__waveform::after {
  opacity: 1;
}

.audio-player__progress,
.audio-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff5f0f 0%, #ff9a3d 54%, #fff0d8 100%);
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.12s linear, filter 0.24s var(--ease-smooth);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    0 0 18px rgba(255,104,19,0.26);
  will-change: transform;
}

.audio-player__progress::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,248,236,0.92);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 0 0 4px rgba(255,120,28,0.16),
    0 4px 14px rgba(2, 6, 22, 0.28);
  transform: translate(50%, -50%);
  opacity: 0;
  transition: opacity 0.2s var(--ease-smooth);
}

.audio-player.is-playing .audio-player__progress {
  filter: saturate(1.06) brightness(1.04);
}

.audio-player:hover .audio-player__progress::after,
.audio-player:focus-within .audio-player__progress::after {
  opacity: 1;
}

.audio-player__time {
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 34px;
  text-align: left;
}

.audio-player__download,
.audio-player__vol {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: color 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth);
}

.audio-player__download {
  text-decoration: none;
}

.audio-player__download[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
}

.audio-player__download:disabled {
  cursor: wait;
  opacity: 0.42;
  transform: none;
}

.audio-player__download[data-tooltip]::before,
.audio-player__vol[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 6;
  min-width: max-content;
  max-width: 160px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  background: rgba(5,8,30,0.94);
  box-shadow: 0 10px 26px rgba(2,6,22,0.28);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 4px, 0);
  transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
}

.audio-player__download:hover::before,
.audio-player__download:focus-visible::before,
.audio-player__vol:hover::before,
.audio-player__vol:focus-visible::before {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.audio-player__vol::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
  transition: opacity 0.24s var(--ease-smooth), transform 0.24s var(--ease-smooth);
}

.audio-player__download svg,
.audio-player__vol svg {
  width: 18px;
  height: 18px;
}

.audio-player__download:hover,
.audio-player__download:focus-visible,
.audio-player__vol:hover,
.audio-player__vol:focus-visible,
.audio-player:hover .audio-player__download,
.audio-player:hover .audio-player__vol {
  color: rgba(255,255,255,0.84);
  transform: translateY(-1px);
}

.audio-player__download:disabled:hover,
.audio-player:hover .audio-player__download:disabled {
  color: rgba(255,255,255,0.6);
  transform: none;
}

.audio-player__download:focus-visible,
.audio-player__vol:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(128,174,255,0.16);
}

.audio-player.is-muted .audio-player__vol {
  color: #fff;
}

.audio-player.is-muted .audio-player__vol::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scaleY(1);
}

/* ══════════════════════════════════════
   4. CINEMATIC VOICE STATEMENT
══════════════════════════════════════ */
.unleash {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Cloud bg image — behind portrait */
.unleash__cloud-bg {
  position: absolute;
  top: -44px;
  right: -164px;
  width: min(1360px, 100vw);
  aspect-ratio: 3294 / 1994;
  pointer-events: none;
  z-index: 0;
}

.unleash__cloud-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(
    ellipse 90% 84% at 54% 46%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.9) 58%,
    rgba(0,0,0,0.42) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 90% 84% at 54% 46%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.9) 58%,
    rgba(0,0,0,0.42) 78%,
    transparent 100%
  );
}

.unleash__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 51.5%);
  align-items: center;
  gap: var(--content-media-gap);
  position: relative;
  z-index: 2;
  width: min(calc(100% - (var(--container-pad) * 2)), 1264px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  min-width: 0;
}

.unleash__text,
.unleash__photo {
  min-width: 0;
}

.unleash__text {
  position: relative;
  z-index: 3;
  align-self: center;
  transform: translateY(-8px);
}

.unleash__heading {
  font-family: var(--font-druk);
  font-size: clamp(68px, 6.35vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--stack-heading-sub);
}

.unleash__heading span { color: var(--accent); }

.unleash__heading--statement {
  font-family: var(--font-druk);
  font-size: clamp(68px, 6.35vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  max-width: min(760px, 100%);
  margin-bottom: clamp(20px, 2.2vw, 32px);
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

.unleash__heading--statement .unleash__emphasis {
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
}

.unleash__statement-copy {
  font-family: Inter, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  max-width: min(44ch, 100%);
  text-wrap: balance;
}

.unleash__sub {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  max-width: min(44ch, 100%);
  text-wrap: balance;
}

.unleash__emphasis {
  color: var(--accent);
  font-weight: 800;
  font-style: italic;
}

.unleash__sub-break {
  display: none;
}

/* Photo column — no hard edges via gradient overlays */
.unleash__photo {
  position: relative;
  aspect-ratio: 3277 / 4096;
  height: auto;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.unleash__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  transform: translateX(0);
  filter: drop-shadow(0 26px 80px rgba(0, 0, 0, 0.34));
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.86) 82%,
    rgba(0,0,0,0.28) 94%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.86) 82%,
    rgba(0,0,0,0.28) 94%,
    rgba(0,0,0,0) 100%
  );
}

/* Left edge fade — blends photo into background */
.unleash__photo::before {
  content: none;
}

/* Bottom edge fade */
.unleash__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 210px;
  background: linear-gradient(to top, rgba(5,8,30,0.98) 0%, rgba(5,8,30,0.52) 44%, transparent 100%);
  filter: blur(14px);
  z-index: 1;
  pointer-events: none;
}

/* ══════════════════════════════════════
   5. WORK SHOWCASE
══════════════════════════════════════ */
.work {
  padding-top: 0;
  padding-bottom: var(--section-space-y);
  position: relative;
  z-index: 1;
  overflow: visible;
}

.work > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
}

.work__header {
  margin-bottom: clamp(28px, 4vw, 56px);
}

.work__title {
  font-family: var(--font-druk);
  font-size: clamp(64px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text);
}

.work__title span {
  color: #80aeff;
}

.work__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

.work-card {
  --card-width: 100%;
  --card-left: 0px;
  --card-top: 118px;
  --card-z: 1;
  --hover-x: 52%;
  --hover-y: 44%;
  display: grid;
  grid-template-columns: minmax(260px, 29.12%) minmax(0, 1fr);
  background: var(--gradient-card);
  border: 1.33px solid #aac8ff;
  border-radius: 16px;
  overflow: hidden;
  min-height: clamp(474px, 42.65vw, 539px);
  height: auto;
  position: sticky;
  top: var(--card-top);
  z-index: var(--card-z);
  width: min(var(--card-width), calc(100% - var(--card-left)));
  margin-left: var(--card-left);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08);
  isolation: isolate;
  transition:
    transform 0.32s var(--ease-smooth),
    opacity 0.32s var(--ease-smooth),
    box-shadow 0.28s var(--ease-out),
    border-color 0.25s,
    filter 0.28s var(--ease-out);
}

.js-enhanced .work-card {
  cursor: pointer;
}

.js-enhanced .work-card::before,
.js-enhanced .work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.js-enhanced .work-card::before {
  z-index: 2;
  background:
    radial-gradient(
      circle at var(--hover-x, 52%) var(--hover-y, 44%),
      rgba(255,255,255,0.42) 0%,
      rgba(189,216,255,0.22) 18%,
      rgba(128,174,255,0.1) 34%,
      rgba(128,174,255,0) 58%
    );
  mix-blend-mode: soft-light;
  transition: opacity 0.28s var(--ease-out);
}

.js-enhanced .work-card::after {
  z-index: 3;
  background:
    linear-gradient(
      116deg,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0.28) 49%,
      rgba(170,200,255,0.08) 57%,
      rgba(255,255,255,0) 73%
    );
  transform: translateX(-135%) skewX(-10deg);
  transition:
    opacity 0.26s var(--ease-out),
    transform 0.78s var(--ease-smooth);
}

.js-enhanced .work-card:focus-visible {
  outline: 3px solid rgba(170,200,255,0.88);
  outline-offset: 6px;
}

.work-card:hover {
  border-color: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-card);
  filter: saturate(1.02);
}

.js-enhanced .work-card.work-card--active {
  z-index: 20;
  border-color: rgba(255,255,255,0.82);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255,255,255,0.28),
    0 0 34px rgba(170,200,255,0.2);
  filter: saturate(1.05);
  animation: workCardPromote 0.36s var(--ease-smooth) both;
}

.work-card__text {
  position: relative;
  z-index: 1;
  padding: var(--feature-card-pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.work-card__tag {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(5,8,30,0.88);
  margin-bottom: var(--space-7);
  background: #d4e3ff;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 16px;
  align-self: flex-start;
  line-height: 1.4;
  transition: background 0.22s, color 0.22s, transform 0.28s var(--ease-out);
}

.work-card:hover .work-card__tag {
  background: #e2edff;
  transform: translateY(-1px);
}

.work-card__name {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.work-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  color: rgba(5,8,30,0.8);
  max-width: 32ch;
}

.work-card__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
  padding: var(--feature-card-pad) var(--feature-card-pad) var(--feature-card-pad) 0;
}

.work-card__media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.55s var(--ease-out), filter 0.35s var(--ease-out);
}

.work-card__play {
  position: absolute;
  top: calc(var(--feature-card-pad) + 18px);
  right: calc(var(--feature-card-pad) + 18px);
  z-index: 4;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%),
    rgba(5, 8, 30, 0.46);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 14px 34px rgba(2, 6, 24, 0.28);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition:
    transform 0.28s var(--ease-out),
    border-color 0.24s var(--ease-out),
    background 0.24s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}

.work-card__play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.work-card:hover .work-card__play,
.work-card:focus-visible .work-card__play {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255,255,255,0.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 100%),
    rgba(5, 8, 30, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 18px 44px rgba(2, 6, 24, 0.34);
}

.js-enhanced .work-card.work-card--active:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.js-enhanced .work-card.work-card--active:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateX(132%) skewX(-10deg);
}

.js-enhanced .work-card.work-card--active:is(:hover, :focus-visible) {
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255,255,255,0.34),
    0 0 42px rgba(170,200,255,0.28),
    0 28px 72px rgba(1, 5, 24, 0.2);
}

.js-enhanced .work-card.work-card--active:is(:hover, :focus-visible) .work-card__tag {
  background: #edf4ff;
  color: rgba(5,8,30,0.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.36),
    0 10px 26px rgba(78,121,202,0.18);
}

.js-enhanced .work-card.work-card--active:is(:hover, :focus-visible) .work-card__play {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(255,255,255,0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.14) 100%),
    rgba(5, 8, 30, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.54),
    0 18px 44px rgba(2, 6, 24, 0.38),
    0 0 26px rgba(170,200,255,0.34);
}

.work-card--gypsy .work-card__media :is(img, video) { object-position: center 42%; }
.work-card--nba .work-card__media :is(img, video) { object-position: center 36%; }
.work-card--nike .work-card__media :is(img, video) { object-position: center 42%; }
.work-card--apple .work-card__media :is(img, video) { object-position: center 46%; }
.work-card--trinity .work-card__media :is(img, video) { object-position: center 44%; }

.work-card:hover .work-card__media :is(img, video) {
  transform: scale(1.025);
  filter: saturate(1.04);
}

.js-enhanced .work-card:not(.work-card--active):hover {
  --work-card-hover-lift: -10px;
  border-color: rgba(255,255,255,0.58);
  box-shadow: 0 24px 58px rgba(1, 5, 24, 0.2);
  filter: blur(var(--wheel-blur, 0px)) saturate(var(--wheel-saturate, 1));
}

.js-enhanced .work-card:not(.work-card--active):hover .work-card__tag {
  background: #dce9ff;
  transform: translateY(-1px);
}

.js-enhanced .work-card:not(.work-card--active):hover .work-card__media :is(img, video) {
  transform: scale(1.005);
  filter: saturate(1);
}

.js-enhanced .work-card:not(.work-card--active):hover .work-card__play {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 14px 34px rgba(2, 6, 24, 0.28);
}

.work-card--gypsy {
  --card-width: 1058px;
  --card-left: 104px;
  --card-top: 72px;
  --card-z: 0;
}

.work-card--nba {
  --card-width: 1123px;
  --card-left: 74px;
  --card-top: 104px;
  --card-z: 1;
}

.work-card--nike {
  --card-width: 1198px;
  --card-left: 33px;
  --card-top: 156px;
  --card-z: 2;
  margin-top: -387px;
}

.work-card--apple {
  --card-width: 1270px;
  --card-left: 0px;
  --card-top: 208px;
  --card-z: 3;
  margin-top: -324px;
}

.work-card--trinity {
  --card-width: 1342px;
  --card-left: 0px;
  --card-top: 260px;
  --card-z: 4;
  margin-top: -324px;
}

.js-enhanced .work__cards {
  --work-wheel-card-h: clamp(474px, 42.65vw, 539px);
  --work-wheel-top-room: clamp(216px, 16vw, 278px);
  --work-wheel-bottom-room: clamp(36px, 4vw, 72px);
  --work-wheel-active-y: calc((var(--work-wheel-top-room) - var(--work-wheel-bottom-room)) / 2);
  position: relative;
  min-height: calc(var(--work-wheel-card-h) + var(--work-wheel-top-room) + var(--work-wheel-bottom-room));
  height: calc(var(--work-wheel-card-h) + var(--work-wheel-top-room) + var(--work-wheel-bottom-room));
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
  touch-action: none;
}

.js-enhanced .work-card,
.js-enhanced .work-card--gypsy,
.js-enhanced .work-card--nba,
.js-enhanced .work-card--nike,
.js-enhanced .work-card--apple,
.js-enhanced .work-card--trinity {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, var(--content-max));
  height: var(--work-wheel-card-h);
  min-height: 0;
  margin: 0;
  z-index: var(--wheel-z, var(--card-z));
  transform:
    translate3d(calc(-50% + var(--wheel-x, 0px)), calc(-50% + var(--work-wheel-active-y, 0px) + var(--wheel-y, 0px) + var(--work-card-hover-lift, 0px)), 0)
    scale(var(--wheel-scale, 1))
    rotateX(var(--wheel-rotate, 0deg));
  transform-origin: center center;
  opacity: var(--wheel-opacity, 1);
  filter: blur(var(--wheel-blur, 0px)) saturate(var(--wheel-saturate, 1.05));
  will-change: transform, opacity, filter;
  transition:
    transform 0.4s var(--ease-smooth),
    opacity 0.34s var(--ease-smooth),
    filter 0.34s var(--ease-smooth),
    box-shadow 0.32s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.js-enhanced .work-card.work-card--active {
  z-index: var(--wheel-z, 40);
  border-color: rgba(255,255,255,0.82);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255,255,255,0.28),
    0 0 34px rgba(170,200,255,0.2);
  animation: none;
}

.js-enhanced .work-card:not(.work-card--active) {
  box-shadow: 0 18px 48px rgba(1, 5, 24, 0.14);
}

.js-enhanced .work-card:not(.work-card--active):hover {
  --work-card-hover-lift: -10px;
  border-color: rgba(255,255,255,0.58);
  box-shadow: 0 24px 58px rgba(1, 5, 24, 0.2);
}

body.video-modal-open {
  overflow: hidden;
}

.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  color: #fff;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(128,174,255,0.18), transparent 38%),
    rgba(2, 5, 18, 0.78);
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(100%, 920px);
  overflow: auto;
  outline: none;
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 24, 54, 0.94) 0%, rgba(5, 8, 30, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 38px 110px rgba(0, 0, 0, 0.54);
  animation: videoModalIn 0.28s var(--ease-out) both;
}

.video-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  background: rgba(5, 8, 30, 0.58);
  color: #fff;
  box-shadow: 0 12px 28px rgba(2, 6, 24, 0.28);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition:
    transform 0.24s var(--ease-out),
    border-color 0.24s var(--ease-out),
    background 0.24s var(--ease-out);
}

.video-modal__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.video-modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.video-modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.5);
  background: rgba(5, 8, 30, 0.74);
}

.video-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(128,174,255,0.18), 0 12px 28px rgba(2, 6, 24, 0.28);
}

.video-modal__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__eyebrow {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

@keyframes videoModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ══════════════════════════════════════
   6. GLOBAL REACH
══════════════════════════════════════ */
.global {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.global::before,
.global::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: url("../assets/images/cloud-bg.png") center / contain no-repeat;
  z-index: 0;
}

.global::before {
  top: -74px;
  left: max(-324px, calc(50% - 1106px));
  width: min(1180px, 82vw);
  aspect-ratio: 3294 / 1994;
  opacity: 1;
  filter: brightness(0.88) saturate(0.62) contrast(1.08) blur(0.1px);
  transform: scale(1.38);
}

.global::after {
  top: 10px;
  right: max(188px, calc(50% - 446px));
  width: min(468px, 34vw);
  aspect-ratio: 3294 / 1994;
  opacity: 0.48;
  filter: brightness(0.62) saturate(0.46) contrast(1.04) blur(0.7px);
  transform: scale(0.78);
}

.global > .container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  position: relative;
  z-index: 1;
}

.global__header {
  max-width: 820px;
  margin-bottom: var(--space-6);
  display: grid;
  gap: var(--stack-heading-sub);
}

.global__heading {
  font-family: var(--font-druk);
  font-size: clamp(66px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0;
}

.global__heading span { color: var(--accent); }

.global__sub {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: #fff;
  max-width: none;
  white-space: nowrap;
  text-wrap: balance;
}

.global__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--card-gap);
  width: 100%;
}

.global__logo-item {
  min-width: 0;
  height: clamp(118px, 9vw, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-logo);
  border-radius: 10px;
  padding: var(--card-pad);
  opacity: 1;
  transition: opacity 0.5s var(--ease-out), border-color 0.25s, transform 0.28s var(--ease-out), background 0.25s;
}

.global__logo-item.is-visible {
  animation: logoReveal 0.82s var(--ease-smooth) both;
  animation-delay: calc(var(--logo-i, 0) * 0.04s);
}

.global__logo-item:hover {
  border-color: rgba(128,174,255,0.45);
  background: rgba(255,255,255,0.03);
  transform: translateY(-3px);
}

.global__logo-name {
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: none;
  text-align: center;
  color: rgba(255,255,255,0.76);
  transition: color 0.25s;
  text-wrap: balance;
}

.global__logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.global__logo-item:hover .global__logo-name { color: rgba(255,255,255,0.9); }

.global__logo-item[data-logo="oracle"] .global__logo-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.global__logo-item[data-logo="starry"] .global__logo-name,
.global__logo-item[data-logo="disney"] .global__logo-name {
  font-family: var(--font-syne);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.global__logo-item[data-logo="chase"] .global__logo-name,
.global__logo-item[data-logo="us-foods"] .global__logo-name,
.global__logo-item[data-logo="cisco"] .global__logo-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.global__logo-item[data-logo="walmart"] .global__logo-name,
.global__logo-item[data-logo="beacons"] .global__logo-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.global__logo-item[data-logo="pfizer"] .global__logo-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.global__logo-item[data-logo="boeing"] .global__logo-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.global__logo-item[data-logo="okta"] .global__logo-name,
.global__logo-item[data-logo="volvo"] .global__logo-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.global__logo-item[data-logo="espn"] .global__logo-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════
   7. PURPOSE / REEL GALLERY
══════════════════════════════════════ */
.purpose {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Ocean/wave background imagery */
.purpose__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.purpose__bg::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -10%;
  height: 36%;
  background: linear-gradient(
    to bottom,
    rgba(5, 8, 30, 0) 0%,
    rgba(5, 8, 30, 0.4) 30%,
    rgba(5, 8, 30, 0.82) 68%,
    rgba(5, 8, 30, 1) 100%
  );
  filter: blur(34px);
}

.purpose__bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}

.purpose__bg-img--1 {
  --purpose-wave-y: -25%;
  --purpose-wave-scale: 1.2;
  --purpose-wave-y-mid: -26%;
  --purpose-wave-scale-mid: 1.22;
  opacity: 0.9;
  transform: translate3d(0, var(--purpose-wave-y), 0) scale(var(--purpose-wave-scale));
  transform-origin: center top;
  filter: hue-rotate(12deg) saturate(1.34) brightness(0.68) contrast(1.12);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 66%,
    rgba(0, 0, 0, 0.82) 78%,
    rgba(0, 0, 0, 0.3) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 66%,
    rgba(0, 0, 0, 0.82) 78%,
    rgba(0, 0, 0, 0.3) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

.purpose__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 34%, rgba(55, 118, 235, 0.28) 0%, rgba(17, 40, 109, 0.12) 38%, transparent 66%),
    linear-gradient(to bottom,
      rgba(4, 8, 34, 0.72) 0%,
      rgba(6, 18, 52, 0.18) 22%,
      rgba(5, 11, 38, 0.44) 52%,
      rgba(3, 7, 26, 0.94) 100%);
  box-shadow:
    inset 0 108px 146px rgba(2, 8, 34, 0.34),
    inset 0 -180px 180px rgba(1, 4, 20, 0.9);
}

.purpose__header {
  width: min(calc(100% - (var(--container-pad) * 2)), 1264px);
  margin-inline: auto;
  padding-inline: 0;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--stack-sub-content);
}

.purpose__heading {
  font-family: var(--font-druk);
  font-size: clamp(62px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0;
  max-width: 1159px;
}

.purpose__heading span { color: var(--accent); }

.purpose__heading--connection {
  font-family: var(--font-druk);
  font-size: clamp(48px, 5.9vw, 92px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 1180px;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

.purpose__heading--connection span {
  color: var(--accent);
  font-style: italic;
}

.tabs-wrapper {
  width: 100%;
  max-width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.purpose__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 8px;
  background: rgba(10, 16, 44, 0.38);
  border: 1px solid rgba(168, 188, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 44px rgba(2, 6, 26, 0.18);
}

.purpose__tab {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 44px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.purpose__tab:hover {
  color: var(--text);
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  box-shadow: none;
}

.purpose__tab:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: 0 0 0 4px rgba(128,174,255,0.16);
}

.purpose__tab--active,
.purpose__tab[aria-pressed="true"] {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 28px rgba(2, 6, 26, 0.18);
}

.purpose__gallery-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: var(--space-7);
  cursor: grab;
  scroll-padding-inline: var(--container-pad);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.purpose__gallery-wrap::-webkit-scrollbar { display: none; }
.purpose__gallery-wrap.is-dragging { cursor: grabbing; }

.purpose__gallery {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  padding: 10px var(--container-pad) 8px;
}

.purpose__scrollbar {
  width: min(720px, calc(100% - (var(--container-pad) * 2)));
  height: 10px;
  margin: var(--space-5) auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 40px rgba(0,0,0,0.22);
  position: relative;
  z-index: 1;
  cursor: pointer;
  outline: none;
}

.purpose__scrollbar:focus-visible {
  border-color: rgba(157, 184, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 4px rgba(104, 140, 255, 0.14);
}

.purpose__scrollbar.is-disabled {
  opacity: 0.52;
  pointer-events: none;
}

.purpose__scrollbar-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  height: calc(100% + 6px);
  min-width: 74px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,154,86,0.96) 0%, rgba(192,67,14,0.92) 100%);
  border: 1px solid rgba(255,197,154,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 8px 24px rgba(160,56,12,0.34);
  transform: translate3d(0, -50%, 0);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  will-change: transform, width;
}

.purpose__scrollbar:hover .purpose__scrollbar-thumb,
.purpose__scrollbar.is-dragging .purpose__scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,172,104,1) 0%, rgba(216,82,18,0.98) 100%);
  border-color: rgba(255,216,184,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 10px 28px rgba(191,67,12,0.42);
}

.reel-card {
  inline-size: clamp(350px, 30vw, 430px);
  aspect-ratio: 43 / 61;
  height: auto;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  flex: 0 0 auto;
  cursor: pointer;
  box-shadow: 0 24px 64px rgba(2, 6, 26, 0.18);
  transition: transform 0.28s var(--ease-out), border-color 0.22s, box-shadow 0.28s var(--ease-out), background 0.22s;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  touch-action: manipulation;
}

.reel-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--card-accent, 138, 176, 255), 0.18) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 42%);
  pointer-events: none;
  z-index: 0;
}

.reel-card:hover,
.reel-card:focus-visible {
  transform: translateY(-10px) scale(1.01);
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 36px 88px rgba(2, 6, 26, 0.28);
}

.reel-card:focus-visible {
  outline: 3px solid rgba(128,174,255,0.68);
  outline-offset: 5px;
}

.reel-card__thumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.reel-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-object, center center);
  transition: transform 0.6s var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}

.reel-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,30,0.02) 0%, rgba(5,8,30,0.08) 24%, rgba(5,8,30,0.34) 62%, rgba(5,8,30,0.92) 100%),
    linear-gradient(135deg, rgba(var(--card-accent, 138, 176, 255), 0.12) 0%, rgba(5,8,30,0) 38%);
  pointer-events: none;
}

.reel-card:hover .reel-card__thumb img,
.reel-card:focus-visible .reel-card__thumb img { transform: scale(1.04); }

.reel-card__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px;
  background: none;
  transition: none;
  z-index: 2;
}

.reel-card:hover .reel-card__play-overlay,
.reel-card:focus-visible .reel-card__play-overlay { background: none; }

.reel-card__play-btn {
  width: 54px;
  height: 54px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 10px 28px rgba(5, 8, 30, 0.2);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.reel-card:hover .reel-card__play-btn,
.reel-card:focus-visible .reel-card__play-btn {
  transform: scale(1.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.11) 100%);
  border-color: rgba(255,255,255,0.36);
}

.reel-card__play-btn svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

.reel-card__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: none;
  width: 100%;
  min-height: 210px;
  height: clamp(210px, 15vw, 260px);
  box-sizing: border-box;
  padding: 22px 24px 24px;
  border-radius: 0 0 8px 8px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 28%, transparent 48%),
    radial-gradient(circle at 88% 8%, rgba(var(--card-accent, 138, 176, 255), 0.18) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(16, 22, 50, 0.46) 34%, rgba(5, 8, 24, 0.74) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 -18px 42px rgba(3, 7, 24, 0.18);
  backdrop-filter: blur(28px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(180%) contrast(1.05);
  display: grid;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
  align-content: end;
  transition:
    background 0.34s var(--ease-smooth),
    border-color 0.34s var(--ease-smooth),
    box-shadow 0.34s var(--ease-smooth),
    transform 0.34s var(--ease-smooth);
}

.reel-card__info::before,
.reel-card__info::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.reel-card__info::before {
  inset: 1px 0 auto;
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 44%, transparent 100%);
  opacity: 0.72;
}

.reel-card__info::after {
  left: 18px;
  right: 18px;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.62) 28%, rgba(var(--card-accent, 138, 176, 255), 0.52) 58%, transparent 100%);
  opacity: 0.68;
  filter: blur(0.3px);
}

.reel-card:hover .reel-card__info {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.1) 30%, transparent 50%),
    radial-gradient(circle at 88% 8%, rgba(var(--card-accent, 138, 176, 255), 0.24) 0%, transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(16, 22, 50, 0.5) 34%, rgba(5, 8, 24, 0.78) 100%);
  border-top-color: rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(255,255,255,0.1),
    0 -20px 52px rgba(3, 7, 24, 0.24);
}

.reel-card__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

.reel-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: clamp(28px, 2.3vw, 36px);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.08;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: auto;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
  display: block;
  cursor: default;
}

.reel-card__title.is-title-truncated {
  cursor: default;
}

.reel-title-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 240;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(188, 212, 255, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 25, 54, 0.96) 0%, rgba(7, 11, 34, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 18px 48px rgba(1, 5, 24, 0.34);
  color: rgba(255,255,255,0.94);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--tooltip-x, 0), var(--tooltip-y, 0), 0) translateY(6px) scale(0.98);
  transform-origin: center bottom;
  transition:
    opacity 0.16s var(--ease-smooth),
    visibility 0.16s var(--ease-smooth),
    transform 0.16s var(--ease-smooth);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.reel-title-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(188, 212, 255, 0.18);
  border-bottom: 1px solid rgba(188, 212, 255, 0.18);
  background: rgba(7, 11, 34, 0.94);
  transform: translateX(-50%) rotate(45deg);
}

.reel-title-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(var(--tooltip-x, 0), var(--tooltip-y, 0), 0) translateY(0) scale(1);
}

.reel-card__desc {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
  max-width: 100%;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ══════════════════════════════════════
   8. TALENT / VERSATILITY
══════════════════════════════════════ */
.talent {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.talent > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
}

.talent__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.talent__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.06;
}

.talent__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(5,8,30,0.95) 0%,
    rgba(5,8,30,0.7) 60%,
    rgba(5,8,30,0.95) 100%);
}

.talent__inner {
  position: relative;
  min-height: clamp(760px, 44vw, 840px);
  z-index: 1;
}

.talent__copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding-top: var(--space-3);
  display: grid;
  gap: var(--space-4);
}

.talent__heading {
  font-family: var(--font-druk);
  font-size: clamp(62px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 722px;
  margin-bottom: 0;
  text-wrap: balance;
}

.talent__heading-line {
  display: block;
}

.talent__heading-accent {
  color: var(--accent);
}

.talent__bio {
  position: relative;
  z-index: 2;
}

.talent__bio--primary {
  max-width: 60ch;
}

.talent__bio--primary p:nth-child(2) {
  max-width: 584px;
}

.talent__bio--wide {
  max-width: 100%;
  margin-top: 0;
}

.talent__bio p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 18px;
  text-wrap: pretty;
  max-width: 58ch;
}

.talent__bio p:nth-child(n + 4) {
  max-width: 100%;
}

.talent__bio p:last-child { margin-bottom: 0; }

.talent__bio .talent__bio-finale {
  color: var(--accent);
  font-weight: 800;
}

.talent__bio strong {
  font-weight: 600;
  color: #fff;
}

.talent__photo {
  position: absolute;
  right: -18px;
  top: 0;
  width: min(757px, 58vw);
  aspect-ratio: 757 / 755;
  height: auto;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
}

.talent__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 62% bottom;
  display: block;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0.84) 84%,
    rgba(0,0,0,0.26) 94%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0.84) 84%,
    rgba(0,0,0,0.26) 94%,
    rgba(0,0,0,0) 100%
  );
}

.talent__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44%;
  background: linear-gradient(to top, rgba(5,8,30,0.98) 0%, rgba(5,8,30,0.52) 42%, transparent 100%);
  filter: blur(16px);
  pointer-events: none;
}

/* ══════════════════════════════════════
   9. STUDIO
══════════════════════════════════════ */
.studio {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  position: relative;
  z-index: 1;
}

.studio > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
  position: relative;
  z-index: 1;
}

.studio__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr);
  gap: var(--content-media-gap);
  align-items: start;
  justify-content: space-between;
}

.studio__left,
.studio__cards {
  min-width: 0;
}

.studio__heading {
  font-family: var(--font-druk);
  font-size: clamp(70px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--stack-heading-sub);
  max-width: 471px;
}

.studio__heading-line {
  display: block;
}

.studio__heading-line--accent {
  color: var(--accent);
}

.studio__copy {
  display: grid;
  gap: var(--space-4);
  max-width: min(44ch, 100%);
  margin-bottom: var(--space-6);
}

.studio__copy p {
  font-family: Inter, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0;
  text-wrap: balance;
}

.studio__copy strong {
  color: var(--accent);
}

.studio__copy p:last-child {
  margin-bottom: 0;
}

.studio__photos {
  position: relative;
  width: min(100%, 498px);
  aspect-ratio: 498 / 457;
  height: auto;
  padding-top: 0;
  margin-left: 0;
  display: block;
}

.studio__photo {
  position: absolute;
  flex: 0 0 auto;
  width: 24.5%;
  aspect-ratio: 122 / 334;
  height: auto;
  border-radius: 20px;
  border: 1px solid rgba(61, 61, 99, 0.9);
  overflow: hidden;
  background: rgba(9, 12, 35, 0.95);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.studio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio__photo--1 {
  left: 0;
  top: 12%;
  z-index: 1;
}

.studio__photo--2 {
  left: 25.1%;
  top: 26.9%;
  z-index: 2;
}

.studio__photo--3 {
  left: 50.4%;
  top: 0;
  z-index: 3;
}

.studio__photo--4 {
  left: 75.5%;
  top: 21.9%;
  z-index: 2;
}

.studio__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
  align-content: start;
}

.studio-card {
  min-width: 0;
  min-height: 188px;
  background: linear-gradient(140deg, #ffffff 0%, #f4f6f5 44%, #dde3e2 100%);
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 16px;
  padding: var(--card-pad);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-soft);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.22s;
}

.studio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(255,255,255,0.92);
}

.studio-card--tall {
  min-height: 188px;
}

.studio-card--wide {
  grid-column: 1 / -1;
  min-height: 188px;
}

.studio-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 18px;
  border: 1px solid #8F91A7;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8F91A7;
  white-space: nowrap;
}

.studio-card__copy {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: rgba(5,8,30,0.96);
}

/* ══════════════════════════════════════
   10. CONTACT / CTA
══════════════════════════════════════ */
.contact {
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  position: relative;
  z-index: 1;
}

.contact__inner {
  max-width: none;
}

.contact > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
}

.contact__heading {
  font-family: var(--font-druk);
  font-size: clamp(58px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 1264px;
  margin-bottom: var(--stack-heading-sub);
}

.contact__heading span {
  display: inline;
  color: var(--accent);
}

.contact__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: #fff;
  max-width: min(1264px, 100%);
  margin-bottom: var(--stack-content-cta);
  text-wrap: balance;
}

.contact__sub strong {
  font-weight: 600;
  color: var(--text);
}

.contact__sub a {
  color: var(--accent-light);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}

.contact__sub a:hover,
.contact__sub a:focus-visible {
  color: var(--text);
}

.contact__sub a:focus-visible {
  outline: none;
  text-decoration-thickness: 2px;
}

.contact__response-note {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-top: var(--space-5);
  letter-spacing: 0.492em;
  text-transform: uppercase;
  max-width: 100%;
  margin-inline: auto;
  line-height: 1.5;
  text-wrap: balance;
}

.contact__form-wrap {
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f1efef 100%);
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 16px;
  padding: calc(var(--card-pad) + var(--space-1)) calc(var(--card-pad) + var(--space-1)) calc(var(--card-pad) + var(--space-1));
  max-width: none;
  box-shadow: var(--shadow-card);
  scroll-margin-top: var(--anchor-offset);
}

.contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact__form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__form-group--full {
  grid-column: 1 / -1;
}

.contact__fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact__legend {
  padding: 0;
  margin: 0 0 var(--space-2);
}

.contact__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(5,8,30,0.92);
  text-transform: none;
}

.contact__required {
  color: #b20040;
}

.contact__input,
.contact__textarea {
  width: 100%;
  background: linear-gradient(180deg, rgba(241,244,247,0.98) 0%, rgba(234,238,243,0.96) 100%);
  border: 1px solid rgba(175,186,201,0.74);
  border-radius: 6px;
  padding: 12px 16px 12px 20px;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  outline: none;
  appearance: none;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
}

.contact__input:focus,
.contact__textarea:focus {
  border-color: rgba(252,93,18,0.45);
  background: #f8fafc;
  box-shadow: 0 0 0 4px rgba(252,93,18,0.10);
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: rgba(5,8,30,0.28);
}

.contact__textarea {
  resize: vertical;
  min-height: 110px;
}

.contact__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.contact__choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(185,194,207,0.88);
  border-radius: 10px;
  background: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.contact__choice:hover {
  border-color: rgba(252,93,18,0.4);
  background: rgba(255,255,255,0.92);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(5, 8, 30, 0.06);
}

.contact__choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact__choice-indicator {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #cbd4e0;
  border-radius: 4px;
  background: #ffffff;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.contact__choice-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(5,8,30,0.92);
}

.contact__choice-input:focus-visible + .contact__choice-indicator {
  box-shadow: 0 0 0 3px rgba(128,174,255,0.24);
}

.contact__choice-input:checked + .contact__choice-indicator {
  border-color: #fc5d12;
  background:
    radial-gradient(circle at center, #ffffff 0 28%, transparent 30%),
    linear-gradient(135deg, #fc5d12 0%, #a33d16 100%);
}

.contact__choice-input:checked ~ .contact__choice-text {
  font-weight: 600;
}

.contact__form-status {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(5,8,30,0.72);
}

.contact__submit {
  grid-column: 1 / -1;
  display: flex;
  margin-top: var(--space-4);
}

.contact__button {
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid #fc5d12;
  border-radius: 46px;
  background: linear-gradient(90deg, #d34e0b 0%, #883411 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 14px 28px rgba(136,52,17,0.20);
  font-family: var(--font-druk);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.contact__button:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 18px 34px rgba(136,52,17,0.28);
}

.contact__button:disabled,
.contact__button:disabled:hover {
  cursor: wait;
  transform: none;
  filter: none;
  opacity: 0.96;
}

.contact__button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(128,174,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 16px 28px rgba(136,52,17,0.24);
}

.btn-cta {
  background: var(--gradient-cta);
  border: 1.5px solid var(--border-cta);
  border-radius: var(--radius-pill);
  padding: 18px 56px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-cta:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(211,78,11,0.35);
}

/* ══════════════════════════════════════
   11. REPRESENTATION
══════════════════════════════════════ */
.rep {
  --rep-bg-position: 63% 50%;
  --rep-bg-size: cover;
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-loose);
  min-height: clamp(740px, 62vw, 900px);
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #05081e;
}

.rep > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
}

.rep::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.94;
  background-image:
    radial-gradient(circle at 6% 4%, rgba(215,232,255,0.95) 0 1.1px, transparent 2.6px),
    radial-gradient(circle at 20% 9%, rgba(125,168,255,0.7) 0 0.9px, transparent 2.1px),
    radial-gradient(circle at 34% 5%, rgba(255,255,255,0.78) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 49% 8%, rgba(160,194,255,0.78) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 68% 6%, rgba(145,184,255,0.82) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 79% 10%, rgba(255,255,255,0.72) 0 1px, transparent 2.4px),
    radial-gradient(circle at 93% 4%, rgba(205,226,255,0.85) 0 1px, transparent 2.5px),
    radial-gradient(circle at 12% 16%, rgba(132,174,255,0.72) 0 1px, transparent 2.4px),
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.62) 0 0.85px, transparent 2px),
    radial-gradient(circle at 44% 15%, rgba(210,228,255,0.8) 0 1px, transparent 2.5px),
    radial-gradient(circle at 57% 20%, rgba(255,255,255,0.68) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 72% 19%, rgba(132,174,255,0.84) 0 1.9px, transparent 3.6px),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,0.68) 0 1px, transparent 2.5px),
    radial-gradient(circle at 96% 14%, rgba(160,196,255,0.78) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 8% 26%, rgba(255,255,255,0.76) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 18% 30%, rgba(125,168,255,0.68) 0 1.1px, transparent 2.5px),
    radial-gradient(circle at 33% 27%, rgba(210,228,255,0.84) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 47% 32%, rgba(255,255,255,0.58) 0 0.9px, transparent 2px),
    radial-gradient(circle at 61% 29%, rgba(145,182,255,0.78) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 76% 33%, rgba(255,255,255,0.84) 0 1.6px, transparent 3.1px),
    radial-gradient(circle at 88% 28%, rgba(125,168,255,0.68) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 5% 40%, rgba(210,228,255,0.92) 0 1.7px, transparent 3.3px),
    radial-gradient(circle at 14% 46%, rgba(255,255,255,0.6) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 25% 39%, rgba(145,184,255,0.72) 0 1px, transparent 2.4px),
    radial-gradient(circle at 39% 43%, rgba(255,255,255,0.72) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 58% 41%, rgba(125,168,255,0.74) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 69% 47%, rgba(255,255,255,0.58) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 84% 44%, rgba(210,228,255,0.88) 0 1.6px, transparent 3.1px),
    radial-gradient(circle at 94% 40%, rgba(255,255,255,0.58) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 11% 58%, rgba(125,168,255,0.62) 0 1px, transparent 2.3px),
    radial-gradient(circle at 21% 63%, rgba(255,255,255,0.84) 0 1.25px, transparent 2.7px),
    radial-gradient(circle at 35% 57%, rgba(145,184,255,0.72) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 51% 61%, rgba(255,255,255,0.62) 0 1px, transparent 2.4px),
    radial-gradient(circle at 66% 58%, rgba(210,228,255,0.8) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 79% 64%, rgba(125,168,255,0.68) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 91% 60%, rgba(255,255,255,0.78) 0 1.25px, transparent 2.8px),
    radial-gradient(circle at 6% 73%, rgba(255,255,255,0.7) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 18% 78%, rgba(145,184,255,0.7) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 31% 71%, rgba(210,228,255,0.82) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 46% 76%, rgba(255,255,255,0.58) 0 0.9px, transparent 2.1px),
    radial-gradient(circle at 63% 72%, rgba(125,168,255,0.68) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 76% 79%, rgba(255,255,255,0.78) 0 1.5px, transparent 2.9px),
    radial-gradient(circle at 89% 74%, rgba(145,184,255,0.68) 0 0.95px, transparent 2.2px),
    radial-gradient(circle at 96% 82%, rgba(255,255,255,0.68) 0 1px, transparent 2.4px),
    radial-gradient(circle at 13% 90%, rgba(210,228,255,0.9) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 29% 94%, rgba(255,255,255,0.72) 0 1px, transparent 2.4px),
    radial-gradient(circle at 44% 89%, rgba(125,168,255,0.72) 0 1.05px, transparent 2.4px),
    radial-gradient(circle at 61% 95%, rgba(255,255,255,0.64) 0 0.95px, transparent 2.3px),
    radial-gradient(circle at 78% 91%, rgba(210,228,255,0.9) 0 1.4px, transparent 2.9px),
    radial-gradient(circle at 92% 96%, rgba(255,255,255,0.74) 0 1.05px, transparent 2.5px),
    radial-gradient(circle, rgba(170,200,255,0.44) 0 0.95px, transparent 1.75px),
    radial-gradient(circle, rgba(255,255,255,0.24) 0 0.75px, transparent 1.45px),
    radial-gradient(circle, rgba(125,168,255,0.28) 0 1.15px, transparent 1.95px);
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    220px 220px,
    160px 160px,
    300px 300px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    18px 42px,
    88px 96px,
    148px 18px;
}

.rep__planet {
  position: absolute;
  top: clamp(206px, 18vw, 266px);
  left: clamp(4px, 0.8vw, 18px);
  width: clamp(148px, 10vw, 182px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 12px rgba(255,168,84,0.16))
    drop-shadow(0 0 32px rgba(96,132,255,0.12));
  user-select: none;
}

.rep__crosshair {
  position: absolute;
  top: 19%;
  right: 27%;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,225,255,0.7) 40%, transparent 70%);
  transform: rotate(45deg);
  box-shadow:
    0 0 6px 2px rgba(200,225,255,0.8),
    0 0 18px 5px rgba(160,200,255,0.4),
    0 0 40px 10px rgba(120,175,255,0.18);
}
.rep__crosshair::before,
.rep__crosshair::after {
  content: '';
  position: absolute;
  border-radius: 2px;
}
.rep__crosshair::before {
  top: 50%; left: 50%;
  width: 82px; height: 1.5px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(160,200,255,0.25) 15%,
    rgba(200,225,255,0.85) 42%,
    rgba(255,255,255,1) 50%,
    rgba(200,225,255,0.85) 58%,
    rgba(160,200,255,0.25) 85%,
    transparent 100%
  );
  box-shadow: 0 0 4px 1px rgba(200,225,255,0.55), 0 0 12px 2px rgba(160,200,255,0.25);
}
.rep__crosshair::after {
  top: 50%; left: 50%;
  width: 1.5px; height: 82px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(160,200,255,0.25) 15%,
    rgba(200,225,255,0.85) 42%,
    rgba(255,255,255,1) 50%,
    rgba(200,225,255,0.85) 58%,
    rgba(160,200,255,0.25) 85%,
    transparent 100%
  );
  box-shadow: 0 0 4px 1px rgba(200,225,255,0.55), 0 0 12px 2px rgba(160,200,255,0.25);
}

.rep::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -48px;
  width: auto;
  height: clamp(240px, 25vw, 352px);
  transform: none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,95,15,0.54) 10%,
      rgba(255,185,55,0.98) 50%,
      rgba(255,95,15,0.54) 90%,
      transparent 100%
    ) center calc(100% - 46px) / 100% 2px no-repeat,
    radial-gradient(ellipse 84% 100% at 50% 100%, rgba(255,168,78,0.72) 0%, rgba(234,97,26,0.34) 34%, rgba(136,52,17,0.16) 58%, transparent 78%);
  opacity: 0.9;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 14px rgba(255,115,25,0.68))
    drop-shadow(0 0 42px rgba(255,75,0,0.34))
    drop-shadow(0 0 110px rgba(200,45,0,0.18));
  z-index: 0;
  pointer-events: none;
}

.rep__inner {
  position: relative;
  z-index: 2;
}

.rep__layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 920px) minmax(240px, 1fr);
  column-gap: clamp(40px, 4vw, 72px);
  justify-content: stretch;
  align-items: start;
}

.rep__content {
  width: 100%;
}

.rep__visual {
  position: relative;
  width: min(100%, 360px);
  min-height: clamp(400px, 34vw, 470px);
  overflow: visible;
  pointer-events: none;
  justify-self: end;
}

.rep__planet-back {
  position: absolute;
  top: clamp(188px, 16vw, 248px);
  left: clamp(-4px, 0.3vw, 12px);
  width: clamp(172px, 11.2vw, 208px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  mix-blend-mode: screen;
  filter:
    blur(0.2px)
    drop-shadow(0 0 18px rgba(116, 162, 255, 0.18))
    drop-shadow(0 0 28px rgba(255, 142, 54, 0.16));
}

.rep__moon-flare {
  position: absolute;
  top: clamp(320px, 26vw, 372px);
  left: clamp(102px, 7vw, 138px);
  width: clamp(186px, 14vw, 252px);
  height: clamp(6px, 0.7vw, 9px);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,246,252,0.98) 0%,
    rgba(246,214,240,0.95) 6%,
    rgba(132,166,255,0.62) 18%,
    rgba(58,87,196,0.24) 56%,
    rgba(21,31,78,0) 100%
  );
  transform: rotate(-42deg);
  transform-origin: 0 50%;
  opacity: 0.96;
  box-shadow:
    0 0 14px rgba(246,239,255,0.6),
    0 0 30px rgba(102,134,255,0.22),
    0 0 72px rgba(67,93,205,0.14);
  filter: blur(0.45px);
}

.rep__moon-flare::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% - 4px);
  width: 58px;
  height: clamp(5px, 0.55vw, 7px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(21,31,78,0) 0%,
    rgba(88,120,236,0.22) 46%,
    rgba(255,240,250,0.9) 100%
  );
  opacity: 0.72;
  filter: blur(0.45px);
}

.rep__moon-flare::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(18px, 1.3vw, 22px);
  height: clamp(18px, 1.3vw, 22px);
  transform: translate(-44%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,207,240,0.92) 36%, rgba(150,184,255,0.52) 62%, transparent 82%);
  box-shadow:
    0 0 12px rgba(255,255,255,0.92),
    0 0 26px rgba(150,184,255,0.72),
    0 0 42px rgba(96,132,255,0.38);
}

.rep::after {
  background:
    linear-gradient(90deg, rgba(5,8,30,0.22) 0%, rgba(5,8,30,0.08) 42%, rgba(5,8,30,0.16) 100%),
    url("../assets/images/rep-bg.png") var(--rep-bg-position) / var(--rep-bg-size) no-repeat;
  opacity: 1;
}

.rep::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: auto;
  height: clamp(96px, 10vw, 148px);
  transform: none;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,82,0,0.48) 24%, rgba(255,128,28,1) 50%, rgba(255,82,0,0.48) 76%, transparent 100%),
    radial-gradient(ellipse 72% 108% at 50% 100%, rgba(255,118,24,0.72) 0%, rgba(255,78,0,0.38) 30%, rgba(185,58,0,0.16) 56%, transparent 76%);
  background-size:
    180% 2px,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    center bottom,
    center bottom;
  opacity: 0.94;
  filter: none;
  box-shadow: none;
  mix-blend-mode: screen;
  animation:
    repBoundaryFlareDrift 16s var(--ease-smooth) infinite alternate,
    repBoundaryFlareLumen 8s ease-in-out infinite;
  will-change: background-position, opacity, filter;
}

.rep__crosshair,
.rep__visual,
.rep__planet-back,
.rep__planet,
.rep__moon-flare {
  display: none;
}

.rep__heading {
  font-family: var(--font-druk);
  font-size: clamp(70px, 6.5vw, 94px);
  font-weight: 700;
  line-height: 1.0936;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 560px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.rep__heading span {
  display: block;
}

.rep__grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 440px);
  grid-template-rows: auto auto auto;
  column-gap: clamp(82px, 6vw, 112px);
  row-gap: clamp(68px, 6vw, 88px);
  align-items: start;
  width: min(100%, 982px);
  max-width: 982px;
  margin-top: 96px;
  margin-left: clamp(32px, 2.8vw, 54px);
}

/* Explicit placement: left col stacks CESD, right col stacks regional agencies. */
.rep-agent--ny      { grid-column: 1; grid-row: 1; }
.rep-agent--donna   { grid-column: 1; grid-row: 2; }
.rep-agent--la      { grid-column: 1; grid-row: 3; }
.rep-agent--chicago { grid-column: 2; grid-row: 1; }
.rep-agent--atlanta { grid-column: 2; grid-row: 2; }

.rep-agent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

.rep-agent__city {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 2.6vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 10px;
  white-space: nowrap;
  transition: color 0.22s, text-shadow 0.28s var(--ease-out);
}

.rep-agent__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.rep-agent__logo {
  min-height: 54px;
  height: 54px;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(170, 200, 255, 0.34);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
}

.rep-agent__logo img {
  max-height: 100%;
  max-width: 104px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.rep-agent__logo img.rep-logo--formation {
  max-width: 120px;
}

.rep-agent__logo img.rep-logo--cesd,
.rep-agent__logo img.rep-logo--big-mouth {
  margin-left: 0;
  transform: translateX(-24px);
}

.rep-agent__meta {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.rep-agent__role {
  color: rgba(255,255,255,0.88);
}

.rep-agent__divider {
  color: rgba(255,255,255,0.42);
}

.rep-agent__inline-name {
  white-space: nowrap;
}

.rep-agent__title-tail {
  white-space: nowrap;
}

.rep-agent__person-divider {
  height: 1px;
  width: 100%;
  margin: 9px 0 7px;
  background: rgba(170, 200, 255, 0.28);
}

.rep-agent__name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
}

.rep-agent__line {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.rep-agent__line-label {
  flex: 0 0 auto;
}

.rep-agent__line a {
  color: #fff;
  transition: color 0.2s;
  white-space: nowrap;
}

.rep-agent__line a:hover,
.rep-agent__line a:focus-visible {
  color: #80aeff;
}

.rep-agent__line a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ══════════════════════════════════════
   12. FOOTER
══════════════════════════════════════ */
.footer {
  position: relative;
  overflow: hidden;
  background: #05081e;
  border-top: 1px solid rgba(61,61,99,0.55);
}

.footer__upper {
  padding: 30px 0 28px;
  position: relative;
  z-index: 1;
  background: #05081e;
  border-top: 1px solid rgba(61,61,99,0.42);
  border-bottom: 1px solid rgba(61,61,99,0.46);
}

.footer__upper > .container,
.footer__lower > .container {
  max-width: calc(var(--content-max) + (var(--container-pad) * 2));
  padding-inline: var(--container-pad);
}

.footer__upper::before {
  content: none;
}

.footer__upper-inner {
  display: grid;
  grid-template-columns: 162px 1fr 224px;
  align-items: center;
  gap: 40px;
  min-height: 96px;
  position: relative;
  z-index: 1;
}

.footer__logo {
  justify-self: start;
}

.footer__logo img {
  height: 96px;
  width: auto;
}

.footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end;
  width: 224px;
  gap: 12px;
  text-align: center;
}

.footer__brand-logo {
  width: 82px;
  height: auto;
}

.footer__email-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text);
  opacity: 0.82;
  transition: opacity 0.2s, transform 0.2s;
}

.footer__email-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.footer__email-icon svg {
  width: 18px;
  height: 18px;
}

.footer__source-connect {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ffffff;
  background: #d34e0b;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.12) inset,
    0 4px 20px rgba(0,0,0,0.25);
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}

.footer__source-connect:hover,
.footer__source-connect:focus-visible {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.26);
  color: #d34e0b;
}

.footer__source-connect:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(128,174,255,0.18),
    0 1px 0 0 rgba(255,255,255,0.12) inset,
    0 4px 20px rgba(0,0,0,0.25);
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #ffffff;
  opacity: 1;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
}

.footer__social a:hover,
.footer__social a:focus-visible {
  color: #80aeff;
  opacity: 1;
  transform: translateY(-1px);
}

.footer__social svg { width: 17px; height: 17px; }

.footer__imdb {
  position: relative;
  top: 1px;
  width: auto !important;
  min-width: 42px;
  height: 18px;
  border: none;
  border-radius: 7px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-druk);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 18px;
  color: #ffffff !important;
  opacity: 1;
  transition: color 0.2s;
}

.footer__social a:focus-visible,
.footer__imdb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(128,174,255,0.18);
  border-radius: 999px;
}

.footer__imdb:hover,
.footer__imdb:focus-visible { color: #80aeff !important; }

.footer__lower {
  padding: 24px 0 18px;
  background: #01092A;
  position: relative;
  z-index: 1;
}

.footer__lower-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: left;
}

.footer__built {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.footer__built a {
  color: inherit;
  transition: color 0.2s;
}

.footer__built a:hover,
.footer__built a:focus-visible {
  color: #80aeff;
}

.footer__built a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ══════════════════════════════════════
   13. STEVEN'S A.I ASSISTANCE
══════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-assistant {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 120;
  font-family: var(--font-body);
  color: var(--text);
  pointer-events: none;
}

body.is-nav-open .ai-assistant {
  opacity: 0;
  visibility: hidden;
}

.ai-assistant__panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(420px, calc(100vw - 40px));
  max-height: min(640px, calc(100svh - 132px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.07) 46%, rgba(7,10,25,0.72)),
    rgba(8,12,30,0.72);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 22px 70px rgba(0,0,0,0.48),
    0 0 42px rgba(216,82,18,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.ai-assistant__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), rgba(255,127,46,0.58), transparent);
  pointer-events: none;
}

.ai-assistant--open .ai-assistant__panel {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.ai-assistant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

.ai-assistant__eyebrow {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,170,100,0.82);
}

.ai-assistant__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  color: rgba(255,255,255,0.96);
}

.ai-assistant__close,
.ai-assistant__send,
.ai-assistant__launcher,
.ai-assistant__prompts button {
  appearance: none;
  font-family: var(--font-body);
}

.ai-assistant__close,
.ai-assistant__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.ai-assistant__close svg,
.ai-assistant__send svg {
  width: 18px;
  height: 18px;
}

.ai-assistant__close:hover,
.ai-assistant__close:focus-visible,
.ai-assistant__send:hover,
.ai-assistant__send:focus-visible {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.26);
  color: rgba(255,255,255,1);
  transform: translateY(-1px);
}

.ai-assistant__close:focus-visible,
.ai-assistant__send:focus-visible,
.ai-assistant__launcher:focus-visible,
.ai-assistant__prompts button:focus-visible,
.ai-assistant__input:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.26),
    0 0 0 4px rgba(255,127,46,0.18);
}

.ai-assistant__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 188px;
  max-height: 330px;
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.24) transparent;
}

.ai-assistant__message {
  width: fit-content;
  max-width: 92%;
  border-radius: 8px;
  padding: 12px 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
}

.ai-assistant__message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
}

.ai-assistant__message-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 10px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,160,92,0.38);
  border-radius: 8px;
  background: rgba(255,127,46,0.14);
  color: rgba(255,255,255,0.96);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.ai-assistant__message-link:hover,
.ai-assistant__message-link:focus-visible {
  background: rgba(255,127,46,0.22);
  border-color: rgba(255,196,146,0.58);
  transform: translateY(-1px);
}

.ai-assistant__message-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 4px rgba(255,127,46,0.18);
}

.ai-assistant__message--bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
}

.ai-assistant__message--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(245,113,35,0.92), rgba(188,67,16,0.92));
  color: #fff;
}

.ai-assistant__prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 16px;
}

.ai-assistant__prompts button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.ai-assistant__prompts button:hover,
.ai-assistant__prompts button:focus-visible {
  background: rgba(255,127,46,0.16);
  border-color: rgba(255,127,46,0.34);
  color: rgba(255,255,255,0.98);
  transform: translateY(-1px);
}

.ai-assistant__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.11);
  background: rgba(5,8,30,0.28);
}

.ai-assistant__input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.94);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  padding: 0 13px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ai-assistant__input::placeholder {
  color: rgba(255,255,255,0.48);
}

.ai-assistant__input:focus-visible {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.28);
}

.ai-assistant__send {
  width: 42px;
  height: 42px;
  background: rgba(245,113,35,0.88);
  border-color: rgba(255,160,92,0.42);
  color: #fff;
}

.ai-assistant__send:hover,
.ai-assistant__send:focus-visible {
  background: rgba(255,127,46,0.96);
  border-color: rgba(255,196,146,0.54);
}

.ai-assistant__launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255,255,255,0.94);
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.22s ease;
}

.ai-assistant__launcher:hover,
.ai-assistant__launcher:focus-visible,
.ai-assistant--open .ai-assistant__launcher {
  background: transparent;
  box-shadow: none;
  transform: translateY(-2px);
}

.ai-assistant__launcher:focus-visible {
  outline: none;
}

.ai-assistant__launcher:focus-visible .ai-assistant__launcher-mark {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 8px 20px rgba(168,54,10,0.34),
    0 0 0 1px rgba(255,255,255,0.26),
    0 0 0 4px rgba(255,127,46,0.18);
}

.ai-assistant__launcher-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,154,86,0.94), rgba(169,54,10,0.92));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 8px 20px rgba(168,54,10,0.34);
}

.ai-assistant__launcher-mark svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ══════════════════════════════════════
   FADE-IN UTILITY
══════════════════════════════════════ */
.fade-in--visible,
.reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal--left.reveal--visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal--right.reveal--visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.fade-in--delay-1,
.reveal--delay-1 { transition-delay: 0.12s; }

.fade-in--delay-2,
.reveal--delay-2 { transition-delay: 0.24s; }

.fade-in--delay-3,
.reveal--delay-3 { transition-delay: 0.36s; }