:root {
  --bg: #010206;
  --bg-panel: #03060e;
  --secondary-deep: #020408;
  --text: #d8dde8;
  --muted: #6a7388;
  --highlight: #5eb0e8;
  --highlight-dim: rgba(94, 176, 232, 0.28);
  --retro-amber: #5eb0e8;
  --retro-amber-dim: rgba(94, 176, 232, 0.4);
  --lcars-blue: #8eb4d4;
  --line: rgba(216, 221, 232, 0.08);
  --line-bright: rgba(94, 176, 232, 0.35);
  --nav-h: 64px;
  --max-w: 1280px;
  --pad-x: clamp(20px, 4vw, 56px);
  --bevel: 12px;
  --project-cover-radius: 12px;
  /* Inner top-left, outer bottom-right */
  --clip-bevel-diag: polygon(
    var(--bevel) 0,
    100% 0,
    100% calc(100% - var(--bevel)),
    calc(100% - var(--bevel)) 100%,
    0 100%,
    0 var(--bevel)
  );
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-display: "Jost", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  --font-body: "Jost", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
}

/* First paint (duplicate of critical-dossier — avoids grey flash before full file parses) */
html.dossier .nav__links a,
html.dossier .project__view,
html.dossier .btn-ghost,
html.dossier .hero__showreel-btn,
html.dossier .connect__link,
body.dossier .nav__links a,
body.dossier .project__view,
body.dossier .btn-ghost,
body.dossier .hero__showreel-btn,
body.dossier .connect__link,
body.dossier button.project__view,
body.dossier button.btn-ghost,
body.dossier button.hero__showreel-btn {
  background-color: #fff !important;
  color: #000 !important;
  color-scheme: light;
}

html.dossier .nav__links a .pill__text,
html.dossier .project__view .pill__text,
html.dossier .btn-ghost .pill__text,
html.dossier .hero__showreel-btn .pill__text,
html.dossier .connect__link .pill__text,
body.dossier .nav__links a .pill__text,
body.dossier .project__view .pill__text,
body.dossier .btn-ghost .pill__text,
body.dossier .hero__showreel-btn .pill__text,
body.dossier .connect__link .pill__text {
  color: #000 !important;
}

body.dossier .hero__energy-line {
  background: linear-gradient(180deg, rgba(232, 242, 255, 0.98), rgba(94, 176, 232, 0.42)) !important;
  box-shadow:
    0 0 6px rgba(94, 176, 232, 0.55),
    0 0 14px rgba(110, 196, 255, 0.35),
    0 0 24px rgba(94, 176, 232, 0.2) !important;
  opacity: 0.92 !important;
  filter: none !important;
}

.cursor-blob {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  width: 18px;
  height: 18px;
  background: #fff !important;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
  box-shadow: none;
  opacity: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: clip;
}

html.dossier {
  --hero-scroll: 0;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.dossier::before {
  display: none;
}

.stars-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero > .stars-wrap {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}

.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.94;
  backface-visibility: hidden;
  contain: strict;
  background-image:
    radial-gradient(3px 3px at 5% 12%, rgba(255, 255, 255, 0.98), transparent),
    radial-gradient(2.5px 2.5px at 13% 36%, rgba(200, 220, 255, 0.9), transparent),
    radial-gradient(2px 2px at 21% 70%, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1.5px 1.5px at 30% 20%, rgba(110, 196, 255, 0.95), transparent),
    radial-gradient(3px 3px at 38% 54%, rgba(180, 160, 255, 0.72), transparent),
    radial-gradient(1px 1px at 46% 7%, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(2px 2px at 53% 86%, rgba(94, 176, 232, 0.88), transparent),
    radial-gradient(0.75px 0.75px at 61% 32%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2.5px 2.5px at 70% 62%, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(1.25px 1.25px at 77% 16%, rgba(200, 220, 255, 0.84), transparent),
    radial-gradient(2px 2px at 85% 46%, rgba(110, 196, 255, 0.9), transparent),
    radial-gradient(0.5px 0.5px at 92% 76%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 3% 50%, rgba(160, 220, 255, 0.78), transparent),
    radial-gradient(2px 2px at 17% 90%, rgba(110, 196, 255, 0.82), transparent),
    radial-gradient(1px 1px at 57% 40%, rgba(255, 255, 255, 0.72), transparent),
    radial-gradient(3px 3px at 87% 5%, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(0.5px 0.5px at 10% 58%, rgba(180, 160, 255, 0.62), transparent),
    radial-gradient(1.5px 1.5px at 26% 8%, rgba(160, 220, 255, 0.8), transparent),
    radial-gradient(1px 1px at 42% 89%, rgba(255, 255, 255, 0.64), transparent),
    radial-gradient(2px 2px at 66% 10%, rgba(110, 196, 255, 0.84), transparent),
    radial-gradient(0.75px 0.75px at 80% 51%, rgba(255, 255, 255, 0.66), transparent),
    radial-gradient(1.25px 1.25px at 96% 22%, rgba(200, 220, 255, 0.74), transparent),
    radial-gradient(1px 1px at 7% 82%, rgba(94, 176, 232, 0.76), transparent),
    radial-gradient(1.5px 1.5px at 34% 65%, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(0.5px 0.5px at 72% 37%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(2px 2px at 15% 26%, rgba(200, 220, 255, 0.7), transparent),
    radial-gradient(1px 1px at 51% 74%, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1.5px 1.5px at 83% 30%, rgba(110, 196, 255, 0.62), transparent),
    radial-gradient(2.5px 2.5px at 44% 44%, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(0.75px 0.75px at 63% 58%, rgba(180, 160, 255, 0.58), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.62;
  background-image:
    radial-gradient(2px 2px at 2% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(0.5px 0.5px at 16% 45%, rgba(110, 196, 255, 0.52), transparent),
    radial-gradient(1px 1px at 23% 81%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1.5px 1.5px at 32% 29%, rgba(200, 220, 255, 0.5), transparent),
    radial-gradient(0.75px 0.75px at 40% 67%, rgba(255, 255, 255, 0.46), transparent),
    radial-gradient(1px 1px at 48% 15%, rgba(94, 176, 232, 0.46), transparent),
    radial-gradient(2px 2px at 55% 52%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(0.5px 0.5px at 62% 84%, rgba(160, 220, 255, 0.48), transparent),
    radial-gradient(1.25px 1.25px at 68% 24%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 75% 69%, rgba(110, 196, 255, 0.44), transparent),
    radial-gradient(0.75px 0.75px at 83% 39%, rgba(180, 160, 255, 0.46), transparent),
    radial-gradient(1.5px 1.5px at 90% 11%, rgba(200, 220, 255, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 94% 64%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 11% 72%, rgba(110, 196, 255, 0.44), transparent),
    radial-gradient(1.25px 1.25px at 50% 3%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(2px 2px at 28% 55%, rgba(94, 176, 232, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 59% 78%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 37% 93%, rgba(160, 220, 255, 0.42), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    radial-gradient(0.5px 0.5px at 9% 33%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 19% 63%, rgba(200, 220, 255, 0.38), transparent),
    radial-gradient(0.75px 0.75px at 36% 48%, rgba(110, 196, 255, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 45% 12%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(1.25px 1.25px at 64% 73%, rgba(180, 160, 255, 0.36), transparent),
    radial-gradient(0.5px 0.5px at 74% 28%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 88% 57%, rgba(94, 176, 232, 0.36), transparent),
    radial-gradient(0.75px 0.75px at 6% 95%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(0.5px 0.5px at 54% 36%, rgba(160, 220, 255, 0.34), transparent),
    radial-gradient(1px 1px at 79% 88%, rgba(255, 255, 255, 0.32), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.shooting-stars {
  position: absolute;
  inset: -15%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

html.dossier.no-shooting-stars .shooting-stars {
  display: none !important;
}

.shooting-star {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--shoot-length, 320px);
  height: 1px;
  transform-origin: 0 50%;
  border-radius: 999px;
  background: radial-gradient(
      circle 1px at 100% 50%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(200, 220, 255, 0.65) 50%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(160, 210, 255, 0.12) 55%,
      rgba(220, 235, 255, 0.45) 88%,
      rgba(255, 255, 255, 0.75) 100%
    );
  box-shadow: 0 0 3px rgba(140, 200, 255, 0.2);
  opacity: 0;
  will-change: transform, opacity;
}

#home,
#projects,
.clients,
#contact,
.footer {
  position: relative;
  z-index: 2;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

strong {
  font-weight: 500;
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

body.dossier .project__media,
body.dossier .project__media:hover,
body.dossier .project__media:focus,
body.dossier .project__media:focus-visible,
body.dossier .project__media:active {
  outline: none;
}

body.dossier .btn-ghost:hover,
body.dossier .btn-ghost:focus-visible,
body.dossier .hero__showreel-btn:hover,
body.dossier .hero__showreel-btn:focus-visible,
body.dossier .connect__link:hover,
body.dossier .connect__link:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

body.dossier .project__view:hover,
body.dossier .project__view:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

/* —— Nav —— */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(1, 2, 6, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
  transition:
    background-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}

.nav.nav--scrolled {
  background: rgba(1, 2, 6, 0.96);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.nav.nav--scrolled::after {
  opacity: 1;
}

.nav.nav--scrolled .nav__links {
  color: var(--text);
}

.nav::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 320ms var(--ease);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 12%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.35) 88%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.22);
}

.dossier .nav {
  border-bottom: none;
}

.dossier .nav::after {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 10%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.45) 90%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.nav__inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffffff;
  color-scheme: only light;
  color-scheme: light;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}

.nav__brand::before {
  content: "";
  position: absolute;
  inset: 8px;
  background-color: #000000;
  mask-image: url("../img/header-logo.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../img/header-logo.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 220ms var(--ease);
}

body.dossier .nav__brand:hover::before,
body.dossier .nav__brand:focus-visible::before {
  background-color: var(--highlight);
}

body.dossier .nav__logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(26px, 4vw, 30px);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

body.dossier .footer__logo {
  filter: none;
}

.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__links a {
  transition: color 200ms var(--ease);
}

html.dossier .nav__links a,
body.dossier .nav__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 6px;
  padding: 9px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000000 !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 999px;
  box-shadow: none !important;
  text-shadow: none;
  opacity: 1;
}

html.dossier .project__view,
html.dossier .btn-ghost,
html.dossier .hero__showreel-btn,
html.dossier .connect__link,
body.dossier .project__view,
body.dossier .btn-ghost,
body.dossier .hero__showreel-btn,
body.dossier .connect__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 13px 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: #000000 !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 999px;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  opacity: 1;
}

.nav__links a:hover {
  color: var(--highlight);
}

html.dossier .nav__links a,
html.dossier .nav__links a:hover,
html.dossier .nav__links a.active,
html.dossier .nav__links a:focus-visible,
body.dossier .nav__links a,
body.dossier .nav__links a:hover,
body.dossier .nav__links a.active,
body.dossier .nav__links a:focus-visible {
  color: #000000 !important;
}

.nav__links a.active {
  color: var(--text);
}

main {
  padding-top: 0;
}

/* —— Hero —— */
/* Hero FX toggles (HERO_FX in main.js) */
html.hero-starfield-off .hero > .stars-wrap,
html.hero-starfield-off .hero .shooting-stars,
html.hero-effects-off .hero > .stars-wrap,
html.hero-effects-off .hero .shooting-stars {
  display: none !important;
}

html.hero-starfield-off body[data-page="home"] > .stars-wrap,
html.hero-starfield-off body[data-page="home"] .hero .shooting-stars,
html.hero-starfield-off body[data-page="archive"] > .stars-wrap,
html.hero-starfield-off body[data-page="coming-soon"] .hero > .stars-wrap,
html.hero-starfield-off body[data-page="coming-soon"] .hero .shooting-stars,
html.hero-effects-off body[data-page="home"] > .stars-wrap,
html.hero-effects-off body[data-page="home"] .hero .shooting-stars,
html.hero-effects-off body[data-page="archive"] > .stars-wrap,
html.hero-effects-off body[data-page="coming-soon"] .hero > .stars-wrap,
html.hero-effects-off body[data-page="coming-soon"] .hero .shooting-stars {
  display: block !important;
}

/* Dossier hero — logo glow bleed (home + coming soon) */
body.dossier #home.hero,
body.dossier .hero.hero--coming-soon {
  overflow: visible;
}

body.dossier .hero > .stars-wrap {
  overflow: hidden;
}

body.dossier .hero__stage,
body.dossier .hero__lockup,
body.dossier .hero__content.hero__brief,
body.dossier .hero__logo-glow {
  overflow: visible;
}

body.dossier .hero__logo-glow {
  isolation: isolate;
}

body[data-page="home"] .hero__name {
  color: #6a7388 !important;
  -webkit-text-fill-color: #6a7388;
  filter: none !important;
  text-shadow: none !important;
}

html.hero-ambience-off .hero .hero__noise,
html.hero-ambience-off .hero .hero__light-dance,
html.hero-ambience-off .hero .hero__vignette,
html.hero-ambience-off .hero .hero__scanlines,
html.hero-effects-off .hero .hero__noise,
html.hero-effects-off .hero .hero__light-dance,
html.hero-effects-off .hero .hero__vignette,
html.hero-effects-off .hero .hero__scanlines {
  display: none !important;
}

html.hero-parallax-off .hero__content,
html.hero-effects-off .hero__content {
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
}

html.hero-star-parallax-off body[data-page="home"] > .stars-wrap,
html.hero-star-parallax-off body[data-page="archive"] > .stars-wrap,
html.hero-star-parallax-off .hero > .stars-wrap,
html.hero-star-parallax-off body[data-page="home"] > .stars-wrap .stars,
html.hero-star-parallax-off body[data-page="archive"] > .stars-wrap .stars,
html.hero-star-parallax-off .hero > .stars-wrap .stars {
  transform: none !important;
}

html.hero-effects-off .hero.hero--offscreen {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: hidden;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.75) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.97) 100%);
  pointer-events: none;
}

html.dossier .hero__vignette,
html.dossier .hero__light-dance {
  display: none;
}

.hero__light-dance {
  position: absolute;
  inset: -15%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 42% 38% at 22% 28%, rgba(255, 255, 255, 0.14), transparent 68%),
    radial-gradient(ellipse 36% 32% at 78% 38%, rgba(94, 176, 232, 0.1), transparent 72%),
    radial-gradient(ellipse 48% 40% at 55% 72%, rgba(142, 180, 212, 0.08), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(28px);
  animation: hero-light-drift 14s ease-in-out infinite alternate;
}

.hero__noise {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: hero-noise-flow 6s steps(8) infinite;
  mix-blend-mode: overlay;
}

@keyframes hero-light-drift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  33% {
    transform: translate3d(3%, 2%, 0) scale(1.04);
  }
  66% {
    transform: translate3d(-1%, 3%, 0) scale(0.98);
  }
  100% {
    transform: translate3d(2%, -2%, 0) scale(1.02);
  }
}

@keyframes hero-noise-flow {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-180px, -180px, 0);
  }
}

.hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(94, 184, 255, 0.15) 2px,
    rgba(94, 184, 255, 0.15) 3px
  );
}

.hero__content {
  position: absolute;
  z-index: 4;
  top: calc(var(--nav-h) + clamp(28px, 5vh, 56px));
  left: var(--pad-x);
  text-align: left;
  max-width: min(90vw, 720px);
}

.hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.8vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: color 200ms var(--ease);
}

.hero__scroll:hover {
  color: var(--highlight);
}

.hero__energy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 52px;
}

.hero__energy-line {
  display: block;
  width: 2px;
  height: 28px;
  background: linear-gradient(180deg, rgba(94, 176, 232, 0.9), rgba(94, 176, 232, 0.15));
  border-radius: 1px;
  transform-origin: center bottom;
  animation: energy-pulse 2.2s var(--ease) infinite;
  opacity: 0.55;
}

.hero__energy-line:nth-child(1) {
  height: 20px;
  animation-duration: 1.75s;
  animation-delay: 0s;
}

.hero__energy-line:nth-child(2) {
  height: 32px;
  animation-duration: 2.05s;
  animation-delay: 0.31s;
}

.hero__energy-line:nth-child(3) {
  height: 44px;
  animation-duration: 2.35s;
  animation-delay: 0.58s;
}

.hero__energy-line:nth-child(4) {
  height: 32px;
  animation-duration: 1.92s;
  animation-delay: 0.17s;
}

.hero__energy-line:nth-child(5) {
  height: 20px;
  animation-duration: 2.18s;
  animation-delay: 0.44s;
}

@keyframes energy-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scaleY(0.55) translateY(4px);
  }
  50% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

/* —— Section titles —— */
.section-title {
  margin: 0 0 clamp(36px, 6vw, 64px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.8vw, 44px);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.section-title--band {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0.55em 0;
  color: var(--text);
  border: none;
  box-sizing: border-box;
}

.section-title--band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: radial-gradient(
    ellipse 85% 160% at 50% 50%,
    transparent 0%,
    transparent 42%,
    rgba(14, 22, 34, 0.35) 62%,
    rgba(14, 22, 34, 0.88) 100%
  );
  border-top: 1px solid rgba(94, 176, 232, 0.1);
  border-bottom: 1px solid rgba(142, 180, 212, 0.06);
}

.section-title--band::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: min(240px, 40%);
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--highlight), var(--lcars-blue));
  border-radius: 0 0 12px 12px;
  opacity: 0.65;
}

.section-band--about .section-title--band::before {
  background: radial-gradient(
    ellipse 85% 160% at 50% 50%,
    transparent 0%,
    transparent 42%,
    rgba(16, 24, 38, 0.32) 62%,
    rgba(16, 24, 38, 0.9) 100%
  );
}

.dossier .project {
  padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: none;
}

.dossier .project:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.dossier .connect__links {
  padding: 0;
  width: fit-content;
}

/* —— Full-width section bands —— */
.section-band {
  width: 100%;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-band--about {
  background: transparent;
  border-top-color: rgba(94, 176, 232, 0.08);
  border-bottom-color: rgba(94, 176, 232, 0.04);
}

.section-band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* —— Projects —— */
.projects {
  position: relative;
  padding: clamp(96px, 14vw, 180px) 0;
  overflow: visible;
}

.projects__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: visible;
}

.about__inner,
.page-intro .section-band__inner {
  overflow: visible;
}

.project {
  position: relative;
  z-index: 1;
}

.project {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
  min-width: 0;
}

.project__media,
.project__text {
  min-width: 0;
}

.project--reverse {
  grid-template-columns: 1fr 1.35fr;
}

.project--reverse .project__media {
  order: 2;
}

.project--reverse .project__text {
  order: 1;
}

.project__media {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(72, 110, 98, 0.12) 0%, transparent 40%),
    var(--bg-panel);
  clip-path: none;
  border-radius: var(--project-cover-radius);
  border: 1px solid rgba(94, 176, 232, 0.42);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  isolation: isolate;
}

.dossier .project__media {
  clip-path: none;
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color 200ms var(--ease);
}

.dossier .project__media::before {
  display: none;
}

.dossier .project__media:hover {
  border-color: rgba(94, 176, 232, 0.78);
}

.project__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--project-cover-radius);
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
}

.project__media:hover img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.dossier .project__media:hover img {
  transform: none;
  filter: none;
}

.project__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.15;
}

.project__desc {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 15px;
  max-width: 42ch;
  line-height: 1.55;
}

.project__view {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
  border: none;
  border-bottom: 1px solid var(--highlight-dim);
  padding: 0 0 4px;
  background: none;
  cursor: pointer;
  transition: border-color 200ms var(--ease), text-shadow 200ms var(--ease);
}

.project__view:hover {
  border-color: var(--highlight);
  text-shadow: 0 0 12px var(--highlight-dim);
}

.dossier .project__view:hover,
.dossier .project__view:focus-visible {
  border-bottom: none !important;
  text-shadow: none !important;
}

.projects__inner > article.project:last-of-type {
  margin-bottom: 0;
}

.projects__more {
  display: flex;
  justify-content: center;
  margin-top: 0;
  padding-top: clamp(80px, 14vw, 160px);
  padding-bottom: clamp(16px, 4vw, 32px);
}

.btn-ghost {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line-bright);
  color: var(--text);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.btn-ghost:hover {
  border-color: var(--highlight);
  background: rgba(94, 184, 255, 0.08);
  box-shadow: 0 0 24px var(--highlight-dim);
}

/* —— Client logos marquee —— */
.clients {
  --clients-logo-h: clamp(36px, 5vw, 48px);
  --clients-logo-optical-scale: 1.24;
  --clients-logo-optical-scale-lg: 1.32;
  --clients-logo-max-scale: 1.35;
  --clients-logo-gap: clamp(40px, 6.8vw, 80px);
  --clients-logo-strip-pad-y: 28px;
  --clients-logo-strip-pad-x: clamp(21px, 3.15vw, 42px);
  --clients-logo-glow-pad-y: 14px;
  --clients-logo-slot-h: calc(
    var(--clients-logo-h) * var(--clients-logo-max-scale) + var(--clients-logo-glow-pad-y) * 2
  );
  padding: clamp(48px, 8vw, 88px) 0 clamp(20px, 3vw, 36px);
  overflow-x: clip;
  overflow-y: visible;
}

.clients__shell {
  width: 100%;
  text-align: center;
  overflow: visible;
}

.clients__shell .section-title--lcars {
  margin-bottom: clamp(20px, 3vw, 28px);
}

.clients__track-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  overflow-x: clip;
  overflow-y: visible;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--clients-logo-gap);
  padding: var(--clients-logo-strip-pad-y) var(--clients-logo-strip-pad-x);
  overflow: visible;
  will-change: transform;
}

.clients__track.is-css-marquee {
  --marquee-duration: 75s;
  animation: clients-marquee var(--marquee-duration) linear infinite;
  animation-timing-function: linear;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes clients-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-loop, 50%)), 0, 0);
  }
}

.clients__logos {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.clients__logos > li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--clients-logo-slot-h);
  flex-shrink: 0;
  overflow: visible;
}

.dossier .clients__track {
  gap: clamp(32px, 5vw, 64px);
  padding: 22px clamp(17px, 2.6vw, 34px);
}

.clients__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  padding: 0 6px;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  overflow: visible;
}

.clients__logo-link:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

.clients__logo-img {
  display: block;
  width: auto;
  height: var(--clients-logo-h);
  max-width: min(220px, 42vw);
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
  opacity: 0.55;
  transition: opacity 300ms var(--ease), filter 300ms var(--ease), transform 300ms var(--ease);
  will-change: filter;
}

/* Thin/wide marks — scale up optically without affecting track gap */
.clients__logo-img[src*="abb.svg"] {
  transform: scale(0.88);
  transform-origin: center;
}

.clients__logo-img[src*="google.svg"] {
  max-width: min(156px, 32vw);
}

.clients__logo-img[src*="schweppes.svg"] {
  width: auto;
  max-width: min(168px, 34vw);
  transform: scale(1.24);
  transform-origin: center center;
}

.clients__logo-img[src*="buck-design.svg"] {
  width: auto;
  max-width: min(104px, 22vw);
  transform: scale(0.94);
  transform-origin: center;
  /* Raster logo — flatten to dossier gray before any brightness (never brighten raw red PNG) */
  filter: brightness(0) saturate(100%) invert(54%) sepia(12%) saturate(480%) hue-rotate(186deg)
    brightness(0.88) contrast(0.92);
}

.clients__logo-img[src*="iust-ai.svg"] {
  transform: scale(0.9);
  transform-origin: center;
}

.clients__logo-img[src*="nasa.svg"] {
  width: auto;
  max-width: min(108px, 22vw);
  transform: scale(1.22);
  transform-origin: center;
}

.clients__logo-img[src*="tbwa.svg"] {
  width: auto;
  max-width: min(48px, 10vw);
}

.clients__logo-img[src*="deloitte.svg"] {
  width: auto;
  max-width: min(141px, 31vw);
  transform: scale(0.99);
  transform-origin: center;
}

.clients__logo-img[src*="asos.svg"] {
  width: auto;
  max-width: min(106px, 22vw);
  transform: scale(1.01);
  transform-origin: center;
}

.clients__logo-img[src*="nissan.svg"],
.clients__logo-img[src*="level42ai.svg"],
.clients__logo-img[src*="logo_expo2025.svg"],
.clients__logo-img[src*="g12.svg"],
.clients__logo-img[src*="rise-football-academy.svg"],
.clients__logo-img[src*="jti.svg"],
.clients__logo-img[src*="tvfront.svg"],
.clients__logo-img[src*="wgs-dubai.svg"] {
  transform: scale(var(--clients-logo-optical-scale));
  transform-origin: center center;
}

.clients__logo-img[src*="once-lost-games.svg"],
.clients__logo-img[src*="uarts-belgrade.svg"],
.clients__logo-img[src*="wayward-realms.svg"] {
  width: auto;
  max-width: min(112px, 22vw);
  transform: scale(var(--clients-logo-optical-scale-lg));
  transform-origin: center;
}

/* Fetched brand marks (often dark/colored) — read as light on dossier */
.clients__logo-img--brand {
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

.clients__logo-link:hover .clients__logo-img,
.clients__logo-link:focus-visible .clients__logo-img {
  opacity: 0.94;
  filter:
    brightness(1.78)
    drop-shadow(0 0 4px rgba(94, 176, 232, 0.65))
    drop-shadow(0 0 12px rgba(94, 176, 232, 0.4))
    drop-shadow(0 0 22px rgba(94, 176, 232, 0.22));
}

.clients__logo-link:hover .clients__logo-img[src*="abb.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="abb.svg"] {
  transform: scale(0.88);
}

.clients__logo-link:hover .clients__logo-img[src*="schweppes.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="schweppes.svg"] {
  transform: scale(1.24);
}

.clients__logo-link:hover .clients__logo-img[src*="buck-design.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="buck-design.svg"] {
  transform: scale(0.94);
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(12%)
    saturate(520%)
    hue-rotate(186deg)
    brightness(1.12)
    contrast(0.92)
    drop-shadow(0 0 4px rgba(94, 176, 232, 0.65))
    drop-shadow(0 0 12px rgba(94, 176, 232, 0.4))
    drop-shadow(0 0 22px rgba(94, 176, 232, 0.22));
}

.clients__logo-link:hover .clients__logo-img[src*="iust-ai.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="iust-ai.svg"] {
  transform: scale(0.9);
}

.clients__logo-link:hover .clients__logo-img[src*="nasa.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="nasa.svg"] {
  transform: scale(1.22);
}

.clients__logo-link:hover .clients__logo-img[src*="wayward-realms.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="wayward-realms.svg"] {
  transform: scale(var(--clients-logo-optical-scale-lg));
}

.clients__logo-link:hover .clients__logo-img[src*="deloitte.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="deloitte.svg"] {
  transform: scale(0.99);
}

.clients__logo-link:hover .clients__logo-img[src*="asos.svg"],
.clients__logo-link:focus-visible .clients__logo-img[src*="asos.svg"] {
  transform: scale(1.01);
}

.clients__logo-link:hover .clients__logo-img--brand,
.clients__logo-link:focus-visible .clients__logo-img--brand {
  opacity: 0.92;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 4px rgba(94, 176, 232, 0.7))
    drop-shadow(0 0 12px rgba(94, 176, 232, 0.45))
    drop-shadow(0 0 22px rgba(94, 176, 232, 0.25));
}

/* —— About —— */
.about {
  padding: clamp(40px, 6vw, 72px) 0 clamp(96px, 14vw, 180px);
}

.about__inner {
  width: 100%;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) 1.4fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.about__photo-frame {
  position: relative;
  padding: 0;
  background: var(--bg-panel);
  overflow: hidden;
  clip-path: var(--clip-bevel-diag);
  border: 1px solid var(--line-bright);
}

.about__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}

.about__bio p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  max-width: 58ch;
  line-height: 1.6;
}

.about__bio p:first-child {
  color: var(--text);
  font-size: 17px;
}

.about__contact {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--line);
}

.connect__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.connect__link {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(10, 18, 32, 0.6);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.connect__link:hover {
  color: var(--highlight);
  border-color: var(--line-bright);
  background: rgba(110, 196, 255, 0.08);
}

/* —— Footer —— */
.footer {
  position: relative;
  border-top: none;
  padding: 0 var(--pad-x) clamp(28px, 4vw, 40px);
  background: var(--bg);
}

.footer::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(20px, 3vw, 28px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(142, 180, 212, 0.08) 18%,
    rgba(142, 180, 212, 0.42) 50%,
    rgba(142, 180, 212, 0.08) 82%,
    transparent 100%
  );
}

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 0;
}

.footer__logo {
  display: block;
  width: auto;
  height: clamp(32px, 5vw, 40px);
}

.footer__copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* —— Project modal —— */
body.modal-open {
  overflow: hidden;
}

.modal[hidden] {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.88);
  backdrop-filter: blur(8px);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1120px, 96vw);
  max-height: min(92vh, 920px);
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--line-bright);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  appearance: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 12, 20, 0.92);
  cursor: pointer;
  transition:
    color 200ms var(--ease),
    border-color 200ms var(--ease),
    background 200ms var(--ease);
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: 0;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center center;
}

.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__close:hover,
.modal__close:focus-visible {
  color: var(--highlight);
  border-color: rgba(94, 176, 232, 0.45);
  background: rgba(12, 18, 28, 0.98);
}

.modal__stage {
  position: relative;
  flex-shrink: 0;
  background: #000;
  border-bottom: 1px solid var(--line);
}

.modal__stage--single .modal__viewport {
  min-height: min(52vw, 520px);
}

.modal__viewport {
  overflow: hidden;
  width: 100%;
  min-height: min(52vw, 520px);
  background: var(--bg);
}

.modal__track {
  display: flex;
  height: 100%;
  min-height: inherit;
  transition: transform 450ms var(--ease);
  will-change: transform;
}

.modal__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  min-width: 0;
}

.modal__slide-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vw, 520px);
}

.modal__youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__slide-img {
  width: 100%;
  max-height: min(52vw, 520px);
  object-fit: contain;
}

.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 4px 8px;
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  border: none;
  background: transparent;
  cursor: pointer;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
  transition: color 200ms var(--ease), opacity 200ms var(--ease);
}

.modal__nav[hidden] {
  display: none;
}

.modal__nav:hover {
  color: #fff;
  opacity: 1;
}

.modal__nav--prev {
  left: 12px;
}

.modal__nav--next {
  right: 12px;
}

.modal__counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(7, 11, 20, 0.8);
  border: 1px solid var(--line);
}

.modal__counter[hidden] {
  display: none;
}

.modal__body {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 36px) clamp(28px, 4vw, 48px);
}

.modal__year {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--highlight);
}

.modal__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal__detail {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  max-width: none;
  width: 100%;
  line-height: 1.65;
}

.modal__year,
.modal__title,
.modal__detail {
  width: 100%;
}

/* —— Reveal —— */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 720ms var(--ease),
    transform 720ms var(--ease);
}

.reveal.in-view {
  opacity: 1;
}

.reveal.in-view:not(.project__text) {
  transform: none;
}

.reveal.in-view.project__text {
  transform: none;
}

/* —— Projects page —— */
.page-intro {
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + 48px) var(--pad-x) 0;
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--secondary-deep);
}

.page-intro .section-title {
  margin-bottom: clamp(32px, 6vw, 64px);
}

.projects--archive {
  padding-top: 0;
}

/* Archive: no rule between the page title and project list */
body[data-page="archive"] .page-intro {
  background: transparent;
}

body[data-page="archive"] .page-intro.section-band {
  border-bottom: none;
}

body[data-page="archive"] .projects--archive.section-band {
  border-top: none;
}

body[data-page="archive"] .page-intro .section-title {
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* —— Responsive —— */
@media (max-width: 768px) {
  :root {
    --nav-h: 60px;
  }

  .nav__links {
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .hero__brand {
    letter-spacing: 0.12em;
  }

  .project,
  .project--reverse,
  .project--featured {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .project--reverse .project__media,
  .project--reverse .project__text {
    order: unset;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .connect__links {
    gap: 10px 14px;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .clients__track.is-css-marquee {
    animation: none;
  }

  .hero__energy-line {
    animation: none;
    filter: none;
    box-shadow: none;
  }

  html.cursor-blob-active body.dossier,
  html.cursor-blob-active body.dossier a,
  html.cursor-blob-active body.dossier button {
    cursor: auto !important;
  }

  .cursor-blob {
    display: none;
  }

  .stars-wrap {
    transform: none !important;
  }

  .stars,
  .stars::before {
    animation: none;
  }

  .shooting-stars {
    display: none;
  }
}

/* —— Retro dossier (70s/80s cyberpunk) —— */
.nav__inner {
  position: relative;
}

.nav__links a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: var(--retro-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}

.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}

.nav__links a.active {
  color: var(--retro-amber);
  text-shadow: 0 0 18px var(--retro-amber-dim);
}

.dossier .nav__links a::after {
  display: none;
}

.dossier .nav__links a.active {
  color: #000000;
  font-weight: 500;
}

/* Hero — N9 lockup */
.hero__content.hero__brief {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  max-width: min(92vw, 420px);
  border: none;
  background: none;
  box-shadow: none;
  clip-path: none;
}

body.dossier .hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dossier .hero__content.hero__brief {
  position: relative;
  z-index: 4;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  align-items: center;
  text-align: center;
  max-width: min(92vw, 480px);
  margin: 0;
  will-change: transform;
}

body.dossier .hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

body.dossier .hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.dossier .hero__logo-glow {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 0 0 clamp(12px, 2vh, 20px);
  overflow: visible;
  transition: opacity 280ms var(--ease);
}

/* Morphing glow follows logo silhouette (#hero-logo-glow in index.html) */
body.dossier .hero__logo-glow .hero__logo {
  position: relative;
  z-index: 1;
  margin: 0;
  filter: url(#hero-logo-glow);
}

html.hero-logo-glow-off body.dossier .hero__logo-glow .hero__logo {
  filter: drop-shadow(0 0 16px rgba(94, 176, 232, 0.38))
    drop-shadow(0 0 40px rgba(94, 176, 232, 0.22));
}

.hero.hero--offscreen {
  content-visibility: visible;
}

.hero.hero--offscreen .stars,
.hero.hero--offscreen .stars::before,
.hero.hero--offscreen .stars::after {
  opacity: 0.35;
}

.hero.hero--offscreen .shooting-stars {
  visibility: hidden;
}

.hero.hero--perf-no-stars .stars,
.hero.hero--perf-no-stars .stars::before,
.hero.hero--perf-no-stars .stars::after {
  opacity: 0 !important;
}

body.dossier .hero__name {
  transition: opacity 320ms var(--ease) 80ms;
}

body.dossier .hero.is-showreel-opening .hero__logo-glow,
body.dossier .hero.is-showreel-open .hero__logo-glow,
body.dossier .hero.is-showreel-closing .hero__logo-glow,
body.dossier .hero.is-showreel-opening .hero__name,
body.dossier .hero.is-showreel-open .hero__name,
body.dossier .hero.is-showreel-closing .hero__name {
  opacity: 0;
  pointer-events: none;
}

body.dossier .hero__showreel-btn {
  margin-top: clamp(26px, 4.5vh, 44px);
  transition: opacity 360ms var(--ease);
}

body.dossier .hero.is-showreel-opening .hero__showreel-btn,
body.dossier .hero.is-showreel-open .hero__showreel-btn,
body.dossier .hero.is-showreel-closing .hero__showreel-btn {
  opacity: 0;
  pointer-events: none;
}

body.dossier .hero.is-showreel-open .hero__content {
  pointer-events: none;
}

body.dossier .hero.is-showreel-opening .hero__scroll,
body.dossier .hero.is-showreel-open .hero__scroll,
body.dossier .hero.is-showreel-closing .hero__scroll {
  opacity: 0;
  pointer-events: none;
}

body.dossier .hero__video {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: #000;
  transition:
    opacity 560ms var(--ease),
    visibility 0ms linear 560ms;
}

body.dossier .hero__video[hidden] {
  display: none !important;
  visibility: hidden !important;
  transition: none;
}

body.dossier .hero.is-showreel-opening .hero__video,
body.dossier .hero.is-showreel-open .hero__video,
body.dossier .hero.is-showreel-closing .hero__video {
  display: block !important;
  z-index: 10;
  visibility: visible;
  transition:
    opacity 560ms var(--ease),
    visibility 0ms;
}

body.dossier .hero.is-showreel-opening .hero__video,
body.dossier .hero.is-showreel-closing .hero__video {
  opacity: 0;
  pointer-events: none;
}

body.dossier .hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.35) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.55) 100%);
}

body.dossier .hero.is-showreel-open .hero__video::after {
  display: block;
}

body.dossier .hero.is-showreel-open .hero__video {
  opacity: 1;
  pointer-events: auto;
}

body.dossier .hero.is-showreel-open .hero__noise {
  opacity: 0.03;
}

body.dossier .hero__scanlines {
  display: none;
}

body.dossier .hero__video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

body.dossier .hero__video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  min-width: 100%;
  min-height: 100%;
  border: 0;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 560ms var(--ease);
}

body.dossier .hero.is-showreel-opening .hero__video-iframe,
body.dossier .hero.is-showreel-closing .hero__video-iframe {
  opacity: 0;
}

body.dossier .hero__video-close {
  position: absolute;
  top: calc(var(--nav-h) + 14px);
  right: var(--pad-x);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 12, 20, 0.92);
  color: var(--text);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition:
    color 200ms var(--ease),
    border-color 200ms var(--ease),
    background 200ms var(--ease);
}

body.dossier .hero__video-close::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(
      to bottom right,
      transparent calc(50% - 1px),
      currentColor calc(50% - 1px),
      currentColor calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to bottom left,
      transparent calc(50% - 1px),
      currentColor calc(50% - 1px),
      currentColor calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

body.dossier .hero__video-close:hover,
body.dossier .hero__video-close:focus-visible {
  color: var(--highlight);
  border-color: rgba(94, 176, 232, 0.45);
  background: rgba(12, 18, 28, 0.98);
}

@media (prefers-reduced-motion: reduce) {
  body.dossier .hero__logo-glow .hero__logo,
  body.dossier .section-title--lcars,
  body.dossier .section-title--lcars::before,
  body.dossier .section-title--lcars::after {
    animation: none;
  }

  body.dossier .hero__logo-glow .hero__logo {
    filter: drop-shadow(0 0 18px rgba(94, 176, 232, 0.4))
      drop-shadow(0 0 42px rgba(94, 176, 232, 0.22));
  }

  body.dossier .section-title--lcars {
    filter: drop-shadow(0 0 6px rgba(94, 176, 232, 0.2));
    text-shadow: 0 0 10px rgba(94, 176, 232, 0.14);
  }

  body.dossier .hero__lockup,
  body.dossier .hero__logo-glow,
  body.dossier .hero__name,
  body.dossier .hero__showreel-btn,
  body.dossier .hero__video,
  body.dossier .hero__video-iframe {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

body.dossier .hero__content.hero__brief .hero__name {
  margin-left: auto;
  margin-right: auto;
}

body.dossier .hero__energy-line {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(232, 242, 255, 0.98), rgba(94, 176, 232, 0.42));
  box-shadow:
    0 0 6px rgba(94, 176, 232, 0.55),
    0 0 14px rgba(110, 196, 255, 0.35),
    0 0 24px rgba(94, 176, 232, 0.2);
  filter: none;
  opacity: 0.92;
  animation: energy-pulse-glow var(--energy-pulse-dur, 2.2s) var(--ease) infinite;
}

body.dossier .hero__energy-line:nth-child(1) {
  --energy-pulse-dur: 1.75s;
  animation-delay: 0s;
}

body.dossier .hero__energy-line:nth-child(2) {
  --energy-pulse-dur: 2.05s;
  animation-delay: 0.31s;
}

body.dossier .hero__energy-line:nth-child(3) {
  --energy-pulse-dur: 2.35s;
  animation-delay: 0.58s;
}

body.dossier .hero__energy-line:nth-child(4) {
  --energy-pulse-dur: 1.92s;
  animation-delay: 0.17s;
}

body.dossier .hero__energy-line:nth-child(5) {
  --energy-pulse-dur: 2.18s;
  animation-delay: 0.44s;
}

@keyframes energy-pulse-glow {
  0%,
  100% {
    opacity: 0.88;
    transform: scaleY(0.6) translateY(3px);
    box-shadow:
      0 0 5px rgba(94, 176, 232, 0.45),
      0 0 12px rgba(110, 196, 255, 0.28),
      0 0 20px rgba(94, 176, 232, 0.16);
  }
  50% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    box-shadow:
      0 0 8px rgba(94, 176, 232, 0.75),
      0 0 18px rgba(110, 196, 255, 0.48),
      0 0 28px rgba(94, 176, 232, 0.28);
  }
}

/* —— Noise-morph cursor blob (shape only; position tracks pointer 1:1) —— */
html.cursor-blob-active body.dossier,
html.cursor-blob-active body.dossier a,
html.cursor-blob-active body.dossier button,
html.cursor-blob-active body.dossier [role="button"],
html.cursor-blob-active body.dossier label,
html.cursor-blob-active body.dossier summary {
  cursor: none !important;
}

html.cursor-blob-active body.dossier.cursor-overlay-open,
html.cursor-blob-active body.dossier.cursor-overlay-open a,
html.cursor-blob-active body.dossier.cursor-overlay-open button {
  cursor: auto !important;
}

.cursor-blob {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  width: 18px;
  height: 18px;
  margin: 0;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
  will-change: transform;
  box-shadow: none;
  opacity: 0;
  transition: opacity 120ms var(--ease);
}

.cursor-blob.is-visible {
  opacity: 0.94;
}

body.dossier.cursor-overlay-open .cursor-blob {
  opacity: 0;
  visibility: hidden;
}

body.dossier .hero__scroll {
  z-index: 10;
}

body.dossier .hero__energy {
  position: relative;
  z-index: 1;
}

/* Coming soon — one screen, no page scroll; hero shrinks inside viewport */
html:has(body[data-page="coming-soon"]) {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-page="coming-soon"] {
  margin: 0;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-page="coming-soon"] #main {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

body[data-page="coming-soon"] .hero--coming-soon {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: 100%;
  height: auto;
}

body[data-page="coming-soon"] .hero__stage {
  gap: clamp(20px, 5vh, 56px);
}

body[data-page="coming-soon"] .hero__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(13px, 1.8vw, 17px);
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: none;
  color: #6a7388 !important;
  -webkit-text-fill-color: #6a7388;
  filter: none !important;
  text-shadow: none !important;
}

body[data-page="coming-soon"] .hero__name {
  margin: 0;
}

body[data-page="coming-soon"] .hero__logo-glow .hero__logo {
  filter: url(#hero-logo-glow) !important;
}

body[data-page="coming-soon"] .hero__logo {
  filter: none;
}

html:not(.hero-star-parallax-off) body[data-page="home"] > .stars-wrap,
html:not(.hero-star-parallax-off) body[data-page="archive"] > .stars-wrap,
html:not(.hero-star-parallax-off) .hero > .stars-wrap {
  will-change: transform;
}

html:not(.hero-star-parallax-off) body[data-page="home"] > .stars-wrap .stars,
html:not(.hero-star-parallax-off) body[data-page="archive"] > .stars-wrap .stars,
html:not(.hero-star-parallax-off) .hero > .stars-wrap .stars {
  will-change: transform;
}

.hero__logo {
  display: block;
  width: clamp(100px, 20vw, 160px);
  height: auto;
  margin: 0 0 clamp(12px, 2vh, 20px);
  filter: drop-shadow(0 0 12px rgba(94, 176, 232, 0.12));
}

.dossier .hero__vignette {
  background: none;
}

body.dossier .hero__light-dance {
  display: none;
}

.dossier .nav::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 14%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.35) 86%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}

.dossier .footer::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 14%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.35) 86%,
    transparent 100%
  );
}

.dossier .project__media {
  background: var(--bg-panel);
}

.dossier .section-title--band::before,
.dossier .section-title--band::after {
  background: none;
  border: none;
}

/* LCARS section headers (dossier) — blue / slate palette */
.dossier .section-title--lcars {
  position: relative;
  z-index: 0;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.55em 1.5em 0.55em 0;
  margin-bottom: clamp(36px, 6vw, 64px);
  color: var(--text);
  font-weight: 600;
  isolation: isolate;
  overflow: visible;
  animation: section-title-glow-breathe 7s ease-in-out infinite;
}

.dossier .section-title--lcars > * {
  position: relative;
  z-index: 1;
}

.dossier .section-title--lcars::before,
.dossier .section-title--lcars::after {
  content: "";
  position: absolute;
  inset: -0.38em -0.58em;
  width: auto;
  height: auto;
  margin: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: 46% 54% 58% 42% / 44% 56% 48% 52%;
  -webkit-mask-image: radial-gradient(
    ellipse 88% 78% at 50% 50%,
    #000 14%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 88% 78% at 50% 50%,
    #000 14%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 100%
  );
}

.dossier .section-title--lcars::before {
  filter: blur(11px);
  opacity: 0.54;
  background-image:
    radial-gradient(ellipse 32% 22% at 12% 58%, rgba(94, 176, 232, 0.22), transparent 72%),
    radial-gradient(ellipse 26% 38% at 38% 22%, rgba(72, 210, 185, 0.18), transparent 70%),
    radial-gradient(ellipse 18% 28% at 62% 68%, rgba(110, 196, 255, 0.16), transparent 68%),
    radial-gradient(ellipse 34% 16% at 78% 42%, rgba(130, 160, 255, 0.14), transparent 74%),
    radial-gradient(ellipse 22% 34% at 88% 78%, rgba(88, 220, 200, 0.12), transparent 72%),
    radial-gradient(ellipse 28% 20% at 48% 48%, rgba(94, 176, 232, 0.1), transparent 65%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: section-title-aurora-a 14s ease-in-out infinite;
}

.dossier .section-title--lcars::after {
  inset: -0.34em -0.52em;
  border-radius: 52% 48% 44% 56% / 58% 42% 54% 46%;
  filter: blur(13px);
  opacity: 0.48;
  -webkit-mask-image: radial-gradient(
    ellipse 90% 74% at 48% 52%,
    #000 12%,
    rgba(0, 0, 0, 0.48) 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 90% 74% at 48% 52%,
    #000 12%,
    rgba(0, 0, 0, 0.48) 58%,
    transparent 100%
  );
  background-image:
    radial-gradient(ellipse 24% 36% at 22% 72%, rgba(110, 196, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 30% 18% at 58% 28%, rgba(94, 176, 232, 0.16), transparent 68%),
    radial-gradient(ellipse 20% 32% at 72% 62%, rgba(140, 130, 255, 0.13), transparent 72%),
    radial-gradient(ellipse 36% 14% at 92% 34%, rgba(72, 210, 185, 0.12), transparent 75%),
    radial-gradient(ellipse 16% 40% at 8% 38%, rgba(88, 232, 210, 0.11), transparent 68%),
    radial-gradient(ellipse 26% 24% at 44% 56%, rgba(110, 196, 255, 0.09), transparent 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: section-title-aurora-b 17s ease-in-out infinite;
}

@keyframes section-title-aurora-a {
  0%,
  100% {
    opacity: 0.48;
    border-radius: 46% 54% 58% 42% / 44% 56% 48% 52%;
  }
  35% {
    opacity: 0.62;
    border-radius: 58% 42% 48% 52% / 52% 48% 56% 44%;
  }
  68% {
    opacity: 0.52;
    border-radius: 42% 58% 54% 46% / 46% 54% 42% 58%;
  }
}

@keyframes section-title-aurora-b {
  0%,
  100% {
    opacity: 0.42;
    border-radius: 52% 48% 44% 56% / 58% 42% 54% 46%;
  }
  40% {
    opacity: 0.58;
    border-radius: 44% 56% 60% 40% / 48% 52% 44% 56%;
  }
  72% {
    opacity: 0.48;
    border-radius: 56% 44% 46% 54% / 42% 58% 50% 50%;
  }
}

@keyframes section-title-glow-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(94, 176, 232, 0.24));
    text-shadow:
      0 0 14px rgba(94, 176, 232, 0.18),
      0 0 26px rgba(110, 196, 255, 0.1);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(110, 196, 255, 0.34));
    text-shadow:
      0 0 20px rgba(110, 196, 255, 0.26),
      0 0 34px rgba(94, 176, 232, 0.12);
  }
}

.dossier .section-title--center.section-title--lcars {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.dossier .section-title--offset.section-title--lcars {
  margin-left: 0;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(24px, 5vw, 48px);
}

.section-title--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: fit-content;
  max-width: 100%;
}

.section-title--offset {
  padding-left: clamp(12px, 4vw, 48px);
  width: fit-content;
  max-width: 88%;
}

.section-title--offset-right {
  margin-left: auto;
  padding-left: 0;
  padding-right: clamp(12px, 5vw, 56px);
  text-align: right;
  width: fit-content;
  max-width: 72%;
}

/* Projects asymmetry */
.projects__inner {
  padding-left: var(--pad-x);
}

.project {
  position: relative;
  max-width: 96%;
}

.project--reverse {
  margin-left: auto;
  margin-right: 0;
  max-width: 92%;
}

.project:nth-of-type(odd):not(.project--featured) {
  margin-right: auto;
  margin-left: clamp(0px, 2vw, 24px);
}

.project__year {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--retro-amber);
}

.project--featured {
  grid-template-columns: 1.45fr 1fr;
  max-width: 98%;
  margin-left: clamp(0px, 1vw, 16px);
  margin-bottom: clamp(48px, 7vw, 72px);
}

.project--featured .project__media img {
  aspect-ratio: 16 / 10;
  max-height: none;
}

.dossier .nav__inner {
  align-items: center;
}

.dossier .nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  min-height: 2.6em;
  padding-bottom: 0;
  isolation: isolate;
}

.dossier .nav__links::after {
  display: none;
}

.dossier .nav__goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#nav-goo);
}

.dossier .nav__goo-bridge {
  position: absolute;
  background: #ffffff;
  border-radius: 999px;
}

.dossier .nav__goo-node {
  position: absolute;
  background: #ffffff;
  border-radius: 999px;
}

.dossier .nav__links a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.35em;
  margin: 0 6px;
  padding: 9px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  text-shadow: none;
  opacity: 1;
  transition:
    padding 280ms var(--ease),
    background-color 120ms var(--ease);
}

.dossier .nav__links a:hover,
.dossier .nav__links a:focus-visible,
.dossier .nav__links a.active {
  margin: 0 6px;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  box-shadow: none;
  opacity: 1;
}

/* Watch/Gallery — fixed pill size; hover = outline + blue label only */
.dossier .project__view,
.dossier .project__view:hover,
.dossier .project__view:focus-visible {
  transform: none !important;
  padding: 13px 32px !important;
  min-height: 38px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.dossier .project__view .pill__text {
  transform: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  transition: color 320ms var(--ease);
}

.dossier .project__view,
.dossier .btn-ghost,
.dossier .hero__showreel-btn,
.dossier .connect__link {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 38px;
  padding: 13px 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  opacity: 1;
  isolation: isolate;
  border-bottom: none;
  text-shadow: none;
}

body.dossier .btn-ghost:hover,
body.dossier .btn-ghost:focus-visible,
body.dossier .hero__showreel-btn:hover,
body.dossier .hero__showreel-btn:focus-visible,
body.dossier .connect__link:hover,
body.dossier .connect__link:focus-visible {
  padding: 13px 32px;
  min-height: 38px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: #000000;
  background: #ffffff;
  border: none;
  border-bottom: none;
  box-shadow: none;
  text-shadow: none;
  opacity: 1;
}

.dossier .pill__text {
  display: inline-block;
  color: #000000;
  line-height: 1;
  white-space: nowrap;
  transform-origin: center center;
  transition:
    transform 220ms var(--ease),
    color 320ms var(--ease);
}

.dossier .nav__links a .pill__text {
  line-height: 1.2;
}

.dossier .nav__links a:hover .pill__text,
.dossier .nav__links a:focus-visible .pill__text,
.dossier .btn-ghost:hover .pill__text,
.dossier .btn-ghost:focus-visible .pill__text,
.dossier .hero__showreel-btn:hover .pill__text,
.dossier .hero__showreel-btn:focus-visible .pill__text,
.dossier .connect__link:hover .pill__text,
.dossier .connect__link:focus-visible .pill__text {
  transform: scale(1.08);
  color: var(--highlight);
}

.dossier .project__view:hover .pill__text,
.dossier .project__view:focus-visible .pill__text {
  transform: none !important;
  color: var(--highlight) !important;
  -webkit-text-fill-color: var(--highlight) !important;
}

.dossier .nav__links a.active .pill__text {
  color: var(--highlight);
}

.dossier .nav__goo {
  opacity: 0;
  visibility: hidden;
}

.dossier .nav__links[data-goo-synced="1"] .nav__goo {
  opacity: 1;
  visibility: visible;
}

/* Solid pills — never inherit muted body text colors (nav uses goo + fallback) */
body.dossier .project__view,
body.dossier .project__view:hover,
body.dossier .project__view:focus-visible,
body.dossier .btn-ghost,
body.dossier .btn-ghost:hover,
body.dossier .btn-ghost:focus-visible,
body.dossier .hero__showreel-btn,
body.dossier .hero__showreel-btn:hover,
body.dossier .hero__showreel-btn:focus-visible,
body.dossier .connect__link,
body.dossier .connect__link:hover,
body.dossier .connect__link:focus-visible {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html.dossier .nav__links a,
html.dossier .nav__links a:hover,
html.dossier .nav__links a:focus-visible,
html.dossier .nav__links a.active,
body.dossier .nav__links a,
body.dossier .nav__links a:hover,
body.dossier .nav__links a:focus-visible,
body.dossier .nav__links a.active {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html.dossier .nav__links a .pill__text,
body.dossier .nav__links a .pill__text,
html.dossier .project__view .pill__text,
html.dossier .btn-ghost .pill__text,
html.dossier .hero__showreel-btn .pill__text,
html.dossier .connect__link .pill__text,
body.dossier .project__view .pill__text,
body.dossier .btn-ghost .pill__text,
body.dossier .hero__showreel-btn .pill__text,
body.dossier .connect__link .pill__text {
  color: #000000 !important;
}

html.dossier .nav__links a:hover .pill__text,
html.dossier .nav__links a:focus-visible .pill__text,
html.dossier .project__view:hover .pill__text,
html.dossier .project__view:focus-visible .pill__text,
html.dossier .btn-ghost:hover .pill__text,
html.dossier .btn-ghost:focus-visible .pill__text,
html.dossier .hero__showreel-btn:hover .pill__text,
html.dossier .hero__showreel-btn:focus-visible .pill__text,
html.dossier .connect__link:hover .pill__text,
html.dossier .connect__link:focus-visible .pill__text,
body.dossier .nav__links a:hover .pill__text,
body.dossier .nav__links a:focus-visible .pill__text,
body.dossier .project__view:hover .pill__text,
body.dossier .project__view:focus-visible .pill__text {
  transform: none !important;
  color: var(--highlight) !important;
  -webkit-text-fill-color: var(--highlight) !important;
}

html.dossier .btn-ghost:hover .pill__text,
html.dossier .btn-ghost:focus-visible .pill__text,
html.dossier .hero__showreel-btn:hover .pill__text,
html.dossier .hero__showreel-btn:focus-visible .pill__text,
html.dossier .connect__link:hover .pill__text,
html.dossier .connect__link:focus-visible .pill__text,
body.dossier .btn-ghost:hover .pill__text,
body.dossier .btn-ghost:focus-visible .pill__text,
body.dossier .hero__showreel-btn:hover .pill__text,
body.dossier .hero__showreel-btn:focus-visible .pill__text,
body.dossier .connect__link:hover .pill__text,
body.dossier .connect__link:focus-visible .pill__text {
  color: var(--highlight) !important;
}

html.dossier .nav__links a.active .pill__text,
body.dossier .nav__links a.active .pill__text {
  color: var(--highlight) !important;
}

html.dossier .nav__links {
  color: #000000;
}

/* About — photo + bio left, social stack right */
.dossier .about__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.dossier .about__grid {
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.dossier .about__social {
  margin-top: 0;
  padding-top: clamp(8px, 2vw, 16px);
  border-top: none;
}

.dossier .connect__links--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: clamp(140px, 18vw, 180px);
}

.dossier .connect__links--stack .connect__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 32px;
}

.about__grid {
  grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.dossier .about__photo {
  max-width: 180px;
  margin-top: 0;
  transform: none;
}

.dossier .about__photo-frame {
  border-color: rgba(72, 110, 98, 0.35);
}

.dossier .about__photo img {
  aspect-ratio: 3 / 4;
  max-height: 220px;
  object-fit: cover;
}

.about__photo {
  margin-top: -20px;
  transform: translateX(clamp(-8px, -2vw, -20px));
}

.dossier .about__bio {
  padding-top: clamp(8px, 2vw, 24px);
  margin-left: 0;
}

.about__bio {
  padding-top: clamp(32px, 6vw, 72px);
  margin-left: clamp(-16px, -3vw, 0px);
}

.about__lede {
  color: var(--text);
  font-size: 17px;
}

.dossier .connect__link {
  clip-path: none;
}

.modal__dialog {
  border-color: rgba(94, 176, 232, 0.2);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(94, 176, 232, 0.08);
}

@media (max-width: 768px) {
  .project--featured {
    width: 100%;
    margin-left: 0;
    grid-template-columns: 1fr;
  }

  .section-title--offset-right {
    margin-left: 0;
    text-align: left;
    padding-right: 0;
    max-width: 100%;
  }

  .dossier .about__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .dossier .about__grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dossier .about__social {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .dossier .connect__links--stack {
    min-width: 0;
    width: 100%;
  }

  .dossier .about__photo {
    max-width: 160px;
  }

  .about__photo {
    transform: none;
    margin-top: 0;
  }

  .about__bio {
    padding-top: 0;
    margin-left: 0;
  }

  .dossier .about__bio {
    padding-top: 0;
    text-align: left;
  }

}