/* ============ Base ============ */
/* The logo lettering (DO iT CREATiVE): Bangla MN Regular, Latin letters only
   (assets/fonts, made from BANGLA MN.TTF). block: the intro card must never
   flash a fallback font */
@font-face {
  font-family: 'Bangla MN Logo';
  src: url('../assets/fonts/bangla-mn-logo.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-logo: 'Bangla MN Logo', var(--font-display);
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --color-white: #ffffff;
  --color-white-muted: rgba(255, 255, 255, 0.55); /* secondary text and links */
  --color-bg: #00111d; /* deepest navy, replaces black */
  --color-text: #e9e9ec;

  /* Navy scale (from the logo blue family) */
  --navy-900: #071c28; /* panels */
  --navy-800: #0c2330; /* raised surfaces */
  --navy-700: #183543; /* cards, placeholders */
  --navy-600: #24495a;

  /* Intro title card timing */
  --intro-hold: 2.6s; /* opening title card (see the Intro timeline) */
  --intro-fade: 0.9s; /* black screen fading away to reveal the hero */

  /* Full hero <-> condensed hero + showcase. Keep --stage-duration in sync
     with STAGE_TRANSITION_MS in js/main.js */
  --stage-duration: 1.1s;
  --stage-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --hero-condensed: 70%;

  --edge: clamp(1.25rem, 3.5vw, 3rem); /* inset for corner UI */

  /* Page sections (About, Contact) */
  --ink: #00111d;
  --ink-muted: #5a6d78;
  --paper: #ffffff;
  --line: rgba(0, 17, 29, 0.12);
  --accent: #6cc4f0; /* logo blue */
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html,
body {
  overscroll-behavior: none;
}

/* No page scrollbar: it would appear and disappear as the hero locks and
   unlocks scrolling, shifting the whole layout sideways */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* Scrolling is locked while the full hero is showing (js/main.js turns the
   first scroll into the condensed view) and while a dialog is open */
html.is-locked,
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

/* ============ Icon buttons ============ */
/* Icon in a translucent white circle. Declared before the components that
   use it so their own transitions (e.g. .hero__back) take precedence. */
.icon-btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* Plain icon + label, no background */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--color-white-muted);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 17, 29, 0.5);
  cursor: pointer;
}

.text-btn svg {
  filter: drop-shadow(0 1px 6px rgba(0, 17, 29, 0.5));
  transition: transform 0.3s ease;
}

.text-btn:hover,
.text-btn:focus-visible {
  color: var(--color-white);
}

.text-btn:hover svg {
  transform: translateY(-2px);
}

.text-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* ============ Stage ============ */
/* Pinned (sticky) while the About sheet slides up over it. Pure CSS, so the
   layering is driven by the browser's own scrolling and stays perfectly
   steady. */
.stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh; /* avoids mobile browser toolbar jump */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Jumping straight to a page: switch views without the transition */
.stage.is-instant,
.stage.is-instant * {
  transition: none !important;
}

/* Quick navy fade that covers a jump between pages */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.page-curtain.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  flex: none;
  height: 100%;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-bg); /* shown while the video loads */
  transition: height var(--stage-duration) var(--stage-ease);
}

.is-condensed .hero {
  height: var(--hero-condensed);
}

/*
  The source video is 1920x1080 (16:9, no letterbox bars). Instead of
  object-fit: cover, the element is sized so the frame covers the viewport.
  It is sized to the viewport, not the hero, so when the hero shrinks the
  video keeps its size and drifts up at half speed — a parallax effect.
*/
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 100vh * 16 / 9);
  width: max(100vw, 100svh * 16 / 9);
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Animated-image stand-in, where the browser refuses to autoplay the video
   (js/main.js). It sits over the video with the same size and framing, and
   fades out once the video plays. */
.hero__animation {
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.hero__animation.is-leaving {
  opacity: 0;
}

/* Portrait screens: the centre of the frame (768 x 776), covering the
   screen */
.hero__video[data-variant='portrait'] {
  width: max(100vw, 101vh * 768 / 776);
  width: max(100vw, 101svh * 768 / 776);
  aspect-ratio: 768 / 776;
}

/* Shades the video so the white text stays readable on any frame */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__overlay::before,
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity var(--stage-duration) ease;
}

/* Full view: vignette behind the centered content */
.hero__overlay::before {
  background:
    radial-gradient(ellipse at center, rgba(0, 17, 29, 0.25) 0%, rgba(0, 17, 29, 0.6) 100%),
    linear-gradient(to bottom, rgba(0, 17, 29, 0.2), rgba(0, 17, 29, 0.45));
}

/* Condensed view: lighter overall, shade only behind the bottom-left brand */
.hero__overlay::after {
  background:
    linear-gradient(to top, rgba(0, 17, 29, 0.6) 0%, transparent 50%),
    linear-gradient(to right, rgba(0, 17, 29, 0.25) 0%, transparent 60%);
  opacity: 0;
}

.is-condensed .hero__overlay::before {
  opacity: 0.35;
}

.is-condensed .hero__overlay::after {
  opacity: 1;
}

/* ----- Full view: centered content ----- */
.hero__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: end center; /* content sits in the lower part of the screen */
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
  transition:
    opacity 0.7s ease 0.35s,
    transform var(--stage-duration) var(--stage-ease),
    visibility 0s;
}

.is-condensed .hero__center {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5%);
  transition:
    opacity 0.45s ease,
    transform var(--stage-duration) var(--stage-ease),
    visibility 0s linear 0.45s;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 1.5rem;
  max-width: 900px;
  /* Starts as the intro card begins to fade away */
  animation: hero-fade-in 1.4s ease-out calc(var(--intro-hold) + 0.3s) both;
}

.hero__logo {
  width: clamp(48px, 6vw, 80px);
  height: auto;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  filter: drop-shadow(0 4px 18px rgba(0, 17, 29, 0.35));
}

/* Bold Prata, shared by the intro title and the hero headings.
   Prata ships in a single weight; a thin stroke gives a consistent bold
   across browsers instead of relying on synthesized faux-bold. */
.hero__slogan,
.hero__brand-name,
.project-modal__title,
.section-title,
.pillars__name,
.company__name,
.join__title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-white);
  -webkit-text-stroke: 0.035em currentColor;
  paint-order: stroke fill;
}

.hero__slogan {
  font-size: clamp(1.15rem, 3.2vw + 0.4rem, 2.5rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(0, 17, 29, 0.4);
}

.hero__lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.9vw + 0.75rem, 1.25rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  max-width: 46ch;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  text-wrap: balance;
  color: var(--color-white);
  opacity: 0.9;
  text-shadow: 0 2px 16px rgba(0, 17, 29, 0.45);
}

/* ----- Condensed view: back button + bottom-left brand ----- */
.hero__back,
.hero__brand {
  position: absolute;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--stage-ease),
    visibility 0s linear 0.4s,
    color 0.3s ease;
}

.hero__back {
  top: var(--edge);
  left: var(--edge);
  transform: translateY(-12px);
}

.hero__brand {
  left: var(--edge);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  transform: translateY(16px);
}

.is-condensed .hero__back,
.is-condensed .hero__brand {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.7s ease 0.5s,
    transform 1s var(--stage-ease) 0.45s,
    visibility 0s,
    color 0.3s ease;
}

/* ----- Sound on/off, bottom-right in both views ----- */
.hero__sound {
  position: absolute;
  z-index: 3;
  right: var(--edge);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  width: 44px;
  height: 44px;
}

.hero__sound .icon-muted,
.hero__sound.is-muted .icon-sound {
  display: none;
}

.hero__sound.is-muted .icon-muted {
  display: block;
}

/* The stacked logo wordmark: DO iT centred over CREATiVE, in the logo font
   (regular weight, so none of the Prata bolding stroke) */
.wordmark {
  font-family: var(--font-logo);
  -webkit-text-stroke: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 0.12em;
}

/* Read by screen readers only (e.g. the plain spelling of the DO iT CREATiVE
   wordmark) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero__brand-name {
  font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 20px rgba(0, 17, 29, 0.4);
}

/* ============ Showcase slider ============ */
.showcase {
  position: relative;
  flex: none;
  height: calc(100% - var(--hero-condensed));
  overflow: hidden;
  background: var(--color-white);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* horizontal drags belong to the slider */
  opacity: 0;
  transition: opacity 0.9s ease 0.15s;
}

/* Soft fade into the background at both edges */
.showcase::before,
.showcase::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 5%;
  pointer-events: none;
}

.showcase::before {
  left: 0;
  background: linear-gradient(to right, var(--color-white), transparent);
}

.showcase::after {
  right: 0;
  background: linear-gradient(to left, var(--color-white), transparent);
}

.is-condensed .showcase {
  opacity: 1;
}

.showcase.is-dragging {
  cursor: grabbing;
}

.showcase__track {
  display: flex;
  gap: clamp(4px, 0.5vw, 8px);
  height: 100%;
  padding-block: clamp(4px, 0.5vw, 8px);
  will-change: transform;
}

.showcase__card {
  position: relative;
  display: block;
  flex: none;
  height: 100%;
  aspect-ratio: 1 / 1.4142; /* A-series poster */
  padding: 0;
  border: 1px solid var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-700);
  cursor: pointer;
}

.showcase.is-dragging .showcase__card {
  cursor: grabbing;
}

.showcase__card:focus-visible {
  outline: 3px solid var(--color-bg);
  outline-offset: -3px;
}

/* JS zooms the poster slightly and shifts it sideways for the parallax
   effect (see PARALLAX_ZOOM in js/main.js); the fallback matches its zoom */
.showcase__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  pointer-events: none;
  filter: brightness(0.8);
  transition: filter 0.5s ease;
  will-change: transform;
}

.showcase__card:hover img,
.showcase__card:focus-visible img {
  filter: brightness(1);
}

/* ============ Project modal ============ */
.project-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  color: var(--color-white);
  overscroll-behavior: contain;
}

.project-modal[open] {
  display: grid;
  place-items: center;
}

.project-modal::backdrop {
  background: rgba(0, 17, 29, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.project-modal[open]::backdrop {
  animation: modal-backdrop-in 0.4s ease both;
}

.project-modal.is-closing::backdrop {
  animation: modal-backdrop-out 0.3s ease both;
}

.project-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  width: min(1080px, 100%);
  max-height: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: var(--navy-900);
  box-shadow: 0 40px 120px rgba(0, 17, 29, 0.6);
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  /* grows to fill the screen for the trailer */
  transition:
    width 0.6s var(--stage-ease),
    max-height 0.6s var(--stage-ease),
    border-radius 0.6s var(--stage-ease);
}

/* "backwards" only: a transform held after the animation would make the
   panel the containing block for the fixed close button on phones */
.project-modal[open] .project-modal__panel {
  animation: modal-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.project-modal.is-closing .project-modal__panel {
  animation: modal-out 0.3s ease both;
}

/* Blurred poster as an ambient glow behind the whole panel */
.project-modal__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.project-modal__ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(60px) saturate(1.3);
  opacity: 0.35;
  transform: scale(1.3);
}

.project-modal__ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(7, 28, 40, 0.85) 55%, var(--navy-900) 100%);
}

.project-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
}

.project-modal__media {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  min-height: 0;
}

.project-modal__poster {
  position: relative;
  /* as wide as fits, but never taller than the panel */
  width: min(100%, 340px, calc((min(720px, 100dvh) - 7rem) / 1.4142));
  aspect-ratio: 1 / 1.4142;
  overflow: hidden;
  border-radius: 6px;
  background: var(--navy-700) center / cover no-repeat; /* small poster shows while the large one loads */
  box-shadow: 0 30px 60px rgba(0, 17, 29, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.project-modal__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-modal__poster img.is-loaded {
  opacity: 1;
}

.project-modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) 1.5rem clamp(1.5rem, 2vw, 1.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.project-modal__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.project-modal__title {
  margin-top: 0.75rem;
  padding-right: 3rem; /* clear the close button */
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.project-modal__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1rem clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-block: 1.1rem;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.project-modal__stats dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.project-modal__stats dd {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.project-modal__description {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 54ch;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.project-modal__label {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.project-modal__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  list-style: none;
}

.project-modal__services li {
  padding: 0.4em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
}

.project-modal__actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.project-modal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-modal__content {
  padding-bottom: 2rem;
}

.project-modal__counter {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-white-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes modal-backdrop-out {
  to {
    opacity: 0;
  }
}

/* ----- Trailer ----- */
/* Round play button used on the poster, the trailer card and the player */
.play-disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  padding-left: 3px; /* optical centring of the triangle */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  transition: transform 0.4s var(--stage-ease), background-color 0.3s ease, color 0.3s ease;
}

.play-disc--solid {
  background: var(--accent);
  color: var(--color-bg);
}

.play-disc--large {
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
}

.play-disc--large svg {
  width: 34%;
  height: 34%;
}

/* Play button over the poster (on hover) */
.project-modal__poster-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(0, 17, 29, 0.35);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.project-modal__poster-play[hidden] {
  display: none;
}

.project-modal__poster:hover .project-modal__poster-play,
.project-modal__poster-play:focus-visible {
  opacity: 1;
}

.project-modal__poster-play:hover .play-disc {
  transform: scale(1.08);
  background: var(--accent);
  color: var(--color-bg);
}

/* Trailer section in the details */
.project-modal__trailer[hidden] {
  display: none;
}

.trailer-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.9rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: transparent;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

/* The poster, blurred, behind the button */
.trailer-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy-700) center / cover no-repeat;
  filter: blur(14px) saturate(1.2) brightness(0.5);
  transform: scale(1.35);
  transition: transform 0.8s var(--stage-ease), filter 0.5s ease;
}

.trailer-card:hover {
  border-color: rgba(108, 196, 240, 0.5);
}

.trailer-card:hover .trailer-card__bg {
  transform: scale(1.5);
  filter: blur(12px) saturate(1.3) brightness(0.65);
}

.trailer-card:hover .play-disc {
  transform: scale(1.08);
}

.trailer-card:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.trailer-card__text {
  display: grid;
  gap: 0.15rem;
}

.trailer-card__title {
  font-size: 1rem;
}

.trailer-card__meta {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

/* Cinema mode: the window fills the screen and plays the trailer */
.project-modal.is-trailer {
  padding: 0;
}

.project-modal.is-trailer .project-modal__panel {
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: 0;
}

.project-modal.is-trailer .project-modal__media,
.project-modal.is-trailer .project-modal__body {
  display: none;
}

.project-modal__theater {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 2vh, 1.25rem);
  height: 100%;
  min-height: 0;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vh, 2rem);
  animation: hero-fade-in 0.7s ease-out 0.15s backwards;
}

.project-modal__theater[hidden] {
  display: none;
}

.theater__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 44px;
}

.theater__back {
  justify-self: start;
}

.theater__title {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  text-align: center;
}

.theater__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.theater__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  -webkit-text-stroke: 0.03em currentColor;
  paint-order: stroke fill;
}

/* ----- Player ----- */
/* 16:9 until a video file loads; then js/main.js sets the video's own
   ratio (--ratio-w / --ratio-h). Width is capped so it fits the height. */
.player {
  --ratio-w: 16;
  --ratio-h: 9;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, (100dvh - 8.5rem) * var(--ratio-w) / var(--ratio-h));
  aspect-ratio: var(--ratio-w) / var(--ratio-h);
  transition: aspect-ratio 0.4s ease;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.player.is-fullscreen {
  width: 100%;
  border-radius: 0;
}

.player__video,
.player__embed,
.player__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__video {
  object-fit: contain;
  cursor: pointer;
}

.player.is-embed .player__video,
.player:not(.is-embed) .player__embed,
.player.is-embed .player__controls,
.player.is-embed .player__big-play,
.player.is-embed .player__spinner {
  display: none;
}

/* Hide the cursor with the controls while playing */
.player.is-playing:not(.show-controls) {
  cursor: none;
}

.player__big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.4s var(--stage-ease);
}

.player__big-play:hover .play-disc {
  background: var(--accent);
  color: var(--color-bg);
}

.player.is-playing .player__big-play,
.player.is-loading .player__big-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.player__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: player-spin 0.9s linear infinite;
  transition: opacity 0.2s ease;
}

.player.is-loading .player__spinner {
  opacity: 1;
}

@keyframes player-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Control bar */
.player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  padding: 2.5rem clamp(0.75rem, 1.6vw, 1.25rem) clamp(0.6rem, 1.2vw, 1rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.player.show-controls .player__controls,
.player:not(.is-playing) .player__controls {
  opacity: 1;
}

.player__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.player__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent);
}

.player__btn:focus-visible,
.player__big-play:focus-visible,
.player__progress:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Icon pairs: show the one that fits the state */
.player .icon-pause,
.player .icon-muted,
.player .icon-collapse,
.player.is-playing .icon-play,
.player.is-muted .icon-sound,
.player.is-fullscreen .icon-expand {
  display: none;
}

.player.is-playing .icon-pause,
.player.is-muted .icon-muted,
.player.is-fullscreen .icon-collapse {
  display: block;
}

.player__time {
  flex: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.8);
}

.player__progress {
  position: relative;
  flex: 1;
  height: 18px; /* easy to hit; the visible track is thinner */
  cursor: pointer;
  touch-action: none;
}

.player__progress::before,
.player__buffered,
.player__played {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  border-radius: 4px;
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.player__progress::before {
  content: '';
  right: 0;
  background: rgba(255, 255, 255, 0.18);
}

.player__buffered {
  width: 0;
  background: rgba(255, 255, 255, 0.3);
}

.player__played {
  width: 0;
  background: var(--accent);
}

/* Scrub handle at the end of the played bar */
.player__played::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(108, 196, 240, 0.35);
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s ease;
}

.player__progress:hover::before,
.player__progress:hover .player__buffered,
.player__progress:hover .player__played {
  height: 6px;
}

.player__progress:hover .player__played::after {
  transform: translateY(-50%) scale(1);
}

/* Phones & small tablets: one column, the whole panel scrolls */
@media (max-width: 760px) {
  .project-modal__panel {
    grid-template-columns: 1fr;
    max-height: 100%;
    overflow-y: auto;
  }

  .project-modal__media {
    padding: 2rem 1.5rem 0.5rem;
  }

  .project-modal__poster {
    width: min(240px, 60vw);
  }

  .project-modal__body {
    padding: 1.5rem;
    overflow: visible;
  }

  .project-modal__title {
    padding-right: 0;
  }

  /* Stays on screen while the panel scrolls */
  .project-modal__close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
  }

  .project-modal__ambient::after {
    background: linear-gradient(180deg, transparent 0%, rgba(7, 28, 40, 0.85) 40%, var(--navy-900) 70%);
  }
}

/* ============ Intro title card ============ */
/* Timeline (with --intro-hold at 2.6s):
   0.1s   the logo fades in from a blur, with a soft blue glow
   0.4s   the name is drawn as an outline
   1.2s   the gradient fills in, like a finished render
   1.75s  a light sweeps across the name
   2.6s   the card fades to reveal the hero */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding-inline: 1.5rem;
  background: var(--color-bg);
  pointer-events: none;
  animation: intro-out var(--intro-fade) ease-in-out var(--intro-hold) forwards;
}

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3.5vh, 2.25rem);
}

.intro__logo {
  width: clamp(44px, 5vw, 72px);
  height: auto;
  animation: intro-logo 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

@keyframes intro-logo {
  from {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0) drop-shadow(0 0 22px rgba(108, 196, 240, 0.45));
  }
}

.intro__title {
  width: min(72vw, 480px);
  height: auto;
  overflow: visible;
}

/* Two lines (DO iT over CREATiVE) sized to sit inside the 800x300 viewBox */
.intro__text {
  font-family: var(--font-logo);
  font-size: 128px;
  letter-spacing: 8px;
}

/* Outline drawn in, then the gradient fills it; the outline stays as the
   bolding stroke */
.intro__text--render {
  fill: url(#intro-gradient);
  fill-opacity: 0;
  stroke: url(#intro-gradient);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation:
    intro-draw 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.4s forwards,
    intro-fill 0.6s ease 1.2s forwards;
}

@keyframes intro-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes intro-fill {
  to {
    fill-opacity: 1;
  }
}

.intro__shine {
  animation: intro-shine 0.8s ease-in-out 1.75s both;
}

@keyframes intro-shine {
  to {
    transform: translateX(1400px);
  }
}

@keyframes intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Down chevron under the hero text, gently bouncing */
.scroll-cue {
  width: 44px;
  height: 44px;
  margin-top: clamp(2.25rem, 6vh, 4rem);
  animation: scroll-cue-bounce 2.2s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* ============ Site menu ============ */
/* Trigger: "MENU" + two lines, fixed top-right on every page */
.menu-toggle {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 17, 29, 0.5);
  cursor: pointer;
  /* appears with the hero content once the intro card lifts */
  animation: hero-fade-in 1.4s ease-out calc(var(--intro-hold) + 0.3s) both;
}

.menu-toggle__icon {
  position: relative;
  width: 28px;
  height: 10px;
}

.menu-toggle__icon span {
  position: absolute;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: width 0.4s var(--stage-ease), transform 0.4s var(--stage-ease), top 0.4s var(--stage-ease);
}

.menu-toggle__icon span:first-child {
  top: 0;
  width: 100%;
}

.menu-toggle__icon span:last-child {
  top: calc(100% - 1.5px);
  width: 62%;
}

.menu-toggle:hover .menu-toggle__icon span:last-child {
  width: 100%;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 6px;
}

/* Inside the open menu the same control reads "Close" with an X */
.menu-toggle--close {
  position: static;
  animation: none;
}

.menu-toggle--close .menu-toggle__icon span,
.menu-toggle--close:hover .menu-toggle__icon span:last-child {
  top: calc(50% - 0.75px);
  right: 4px;
  width: 20px;
}

.menu-toggle--close .menu-toggle__icon span:first-child {
  transform: rotate(45deg);
}

.menu-toggle--close .menu-toggle__icon span:last-child {
  transform: rotate(-45deg);
}

/* Quarter turn on hover */
.menu-toggle--close:hover .menu-toggle__icon span:first-child {
  transform: rotate(135deg);
}

.menu-toggle--close:hover .menu-toggle__icon span:last-child {
  transform: rotate(45deg);
}

/* Overlay: drops down from the top like a curtain */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  color: var(--color-white);
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(108, 196, 240, 0.1), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px),
    var(--color-bg);
  scrollbar-width: none;
}

.menu::backdrop {
  background: transparent;
}

.menu[open] {
  animation: menu-in 0.7s var(--stage-ease) both;
}

.menu.is-closing {
  animation: menu-out 0.55s var(--stage-ease) both;
}

@keyframes menu-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes menu-out {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}

.menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding: 0 var(--edge) var(--edge);
}

.menu__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* lines the Close control up with the fixed Menu trigger */
  padding-top: var(--edge);
}

.menu__brand {
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.menu__nav {
  align-self: center;
  padding-block: clamp(1.5rem, 5vh, 3rem);
}

.menu__list {
  list-style: none;
}

/* Each line is masked so its text can slide up into place */
.menu__item {
  overflow: hidden;
}

.menu__link {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding-block: 0.08em;
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.menu__num {
  padding-top: 1.1em;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.menu__text {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, min(7vw, 10.5vh), 6.5rem);
  line-height: 1.08;
  -webkit-text-stroke: 0.03em currentColor;
  paint-order: stroke fill;
  transition: transform 0.5s var(--stage-ease), color 0.3s ease;
}

/* Arrow that slides in on hover */
.menu__text::after {
  content: '\2192';
  position: absolute;
  left: calc(100% + 0.3em);
  top: 50%;
  font-family: var(--font-body);
  font-size: 0.45em;
  -webkit-text-stroke: 0;
  color: var(--accent);
  opacity: 0;
  transform: translate(-0.4em, -50%);
  transition: opacity 0.3s ease, transform 0.5s var(--stage-ease);
}

/* Hovering one link dims the others */
.menu__list:hover .menu__link,
.menu__list:focus-within .menu__link {
  opacity: 0.35;
}

.menu__list .menu__link:hover,
.menu__list .menu__link:focus-visible {
  opacity: 1;
}

.menu__link:hover .menu__text,
.menu__link:focus-visible .menu__text {
  transform: translateX(0.25em);
}

.menu__link:hover .menu__text::after,
.menu__link:focus-visible .menu__text::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.menu__link:focus-visible {
  outline: none;
}

/* The page you're on */
.menu__link[aria-current="page"] .menu__text {
  color: var(--accent);
}

.menu__legal {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: var(--color-white-muted);
}

/* Entrance: links rise one after another, then the legal line fades in */
.menu[open] .menu__text,
.menu[open] .menu__num {
  /* "backwards" so the finished animation releases transform for the hover */
  animation: menu-link-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.3s + var(--i, 0) * 0.07s) backwards;
}

.menu[open] .menu__legal {
  animation: hero-fade-in 0.9s ease-out 0.6s backwards;
}

@keyframes menu-link-in {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem; /* keeps paired buttons equal width, incl. when stacked */
  padding: 0.85em 2em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn--solid {
  color: var(--color-bg);
  background: var(--color-white);
  border: 1.5px solid var(--color-white);
}

.btn--solid:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
}

.btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ Page sections (About, Contact) ============ */
.container {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.eyebrow--light {
  color: var(--color-white-muted);
}

.section-title {
  margin-top: 1.25rem;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--ink);
}

.section-title--sm {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
}

.section-title--light {
  color: var(--color-white);
}

/* Sheets slide up over the pinned stage */
.sheet {
  position: relative;
}

/* ----- About: one screen on desktop ----- */
/*  [ statement, intro, commitments | company details ]
    Vertical sizes lean on vh so everything fits one screen. */
.about {
  position: sticky; /* js/main.js sets top so it pins once fully in view */
  top: 0;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(5.5rem, 12vh, 7.5rem) clamp(2.5rem, 6vh, 4.5rem); /* top clears the Menu button */
  overflow: hidden; /* clips the drifting photo */
  isolation: isolate;
  background: var(--navy-900);
  color: var(--color-white);
  box-shadow: 0 -30px 80px rgba(0, 17, 29, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* The studio, as a navy/blue duotone (assets/about, made from studio-bg.png),
   drifting very slowly */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/about/studio-bg-2400.jpg') 60% 50% / cover no-repeat;
  animation: about-drift 40s ease-in-out infinite alternate;
}

/* Shade: deep on the text side, lighter on the right so the studio shows */
.about::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 17, 29, 0.95) 0%, rgba(0, 17, 29, 0.88) 35%, rgba(0, 17, 29, 0.6) 68%, rgba(0, 17, 29, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 17, 29, 0.6) 0%, transparent 28%, transparent 70%, rgba(0, 17, 29, 0.8) 100%);
}

@keyframes about-drift {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.12) translate(-1.5%, -1%);
  }
}

.about .eyebrow {
  color: var(--color-white-muted);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
}

.about__title {
  color: var(--color-white);
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  font-size: clamp(2rem, min(3.3vw, 5.6vh), 3.6rem);
  line-height: 1.1;
}

.about__lead {
  max-width: 62ch;
  margin-top: clamp(1.1rem, 3vh, 2rem);
  font-weight: 300;
  font-size: clamp(0.98rem, min(1.1vw, 2.1vh), 1.2rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

/* Showreel (Vimeo) in the right-hand column, under a title styled like the
   About heading */
.about__reel-title {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

.about__reel {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: var(--navy-900); /* while the player loads */
  box-shadow: 0 30px 70px rgba(0, 17, 29, 0.55);
}

.about__reel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.about__lead strong {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-white);
  -webkit-text-stroke: 0.03em currentColor;
  paint-order: stroke fill;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  list-style: none;
}

.pillars__item {
  position: relative;
  padding-top: clamp(1rem, 2.2vh, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Top rule that draws across on hover */
.pillars__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--stage-ease);
}

.pillars__item:hover::before {
  transform: scaleX(1);
}

.pillars__num {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pillars__name {
  margin-top: clamp(0.5rem, 1.4vh, 0.9rem);
  font-size: clamp(1.1rem, min(1.35vw, 2.6vh), 1.45rem);
  line-height: 1.2;
  color: var(--color-white);
}

.pillars__text {
  margin-top: 0.55rem;
  font-weight: 300;
  font-size: clamp(0.85rem, min(0.95vw, 1.8vh), 0.95rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.64);
}

/* Company details card: soft glass panel, logo-blue accent on the top edge,
   the company name as its title and the details as label / value pairs */
.company {
  position: relative;
  padding: clamp(1.5rem, min(3vw, 4.5vh), 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  /* frosted glass over the studio photo */
  background: linear-gradient(160deg, rgba(24, 53, 67, 0.55) 0%, rgba(0, 17, 29, 0.45) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 17, 29, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.company::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(1.5rem, min(3vw, 4.5vh), 2.75rem);
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.company__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1rem, 2.6vh, 1.6rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.company__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.company__name {
  margin-top: 0.5rem;
  font-size: clamp(1.5rem, min(2.3vw, 4.2vh), 2.3rem);
  line-height: 1.15;
}

.company__logo {
  flex: none;
  width: clamp(26px, 2.4vw, 36px);
  height: auto;
  opacity: 0.9;
}

.company__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2.6vh, 1.6rem) 1.5rem;
  margin-top: clamp(1rem, 2.6vh, 1.6rem);
}

.company__fact--wide {
  grid-column: 1 / -1;
}

.company__facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.company__facts dd,
.company__facts address {
  font-style: normal;
  font-size: clamp(0.95rem, min(1.05vw, 2vh), 1.1rem);
  line-height: 1.5;
  color: var(--color-white);
}

.company__facts dd {
  margin-top: 0.35rem;
}

/* ----- Crew: one screen on desktop ----- */
/*  [ heading                       | intro + Join Us button ]
    [ featured card | crew credits (role | name, like film end credits) ] */
.crew {
  position: sticky; /* js/main.js sets top so it pins once fully in view */
  top: 0;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(5.5rem, 12vh, 7.5rem) clamp(2.5rem, 6vh, 4.5rem); /* top clears the Menu button */
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(55% 50% at 0% 0%, rgba(108, 196, 240, 0.1), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(24, 53, 67, 0.75), transparent 70%),
    var(--color-bg);
  color: var(--color-white);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -30px 70px rgba(0, 5, 10, 0.55);
}

.crew__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
}

.crew__title {
  font-size: clamp(1.9rem, min(3.2vw, 5.4vh), 3.5rem);
  line-height: 1.1;
}



/* Outline button (Join Us) */
.btn--ghost {
  gap: 0.75rem;
  min-width: 0;
  padding: 0.8em 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--color-white);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.btn__arrow {
  transition: transform 0.3s ease;
}

.btn--ghost:hover .btn__arrow {
  transform: translateX(4px);
}

/* Names only: one per row, hairline between. As the section arrives each
   rule draws out from the left and the name rises up from behind it, one
   row after the next (--delay per row, set in js/sections.js). */
.crew-list {
  width: min(100%, 60rem);
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
  list-style: none;
}

.crew-list__item {
  position: relative;
  overflow: hidden; /* the name rises from behind the rule */
}

/* The rules are drawn, so they are pseudo-elements rather than borders */
.crew-list__item::before,
.crew-list__item:last-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--stage-ease) var(--delay, 0s);
}

.crew-list__item::before {
  top: 0;
}

.crew-list__item:last-child::after {
  bottom: 0;
}

.crew-list__name {
  padding-block: clamp(0.5rem, 1.5vh, 0.95rem);
  font-size: clamp(0.9rem, min(1.1vw, 2.1vh), 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--delay, 0s) + 0.12s),
    opacity 0.6s ease calc(var(--delay, 0s) + 0.12s),
    color 0.3s ease,
    letter-spacing 0.4s ease;
}

/* The row carries its own entrance, so the shared reveal stays out of it */
.js .crew-list__item[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.crew-list__item.is-visible::before,
.crew-list__item.is-visible:last-child::after {
  transform: scaleX(1);
}

.crew-list__item.is-visible .crew-list__name {
  transform: none;
  opacity: 1;
}

/* A quiet lift on hover */
.crew-list__item:hover::before,
.crew-list__item:hover + .crew-list__item::before,
.crew-list__item:hover:last-child::after {
  background: rgba(108, 196, 240, 0.5);
}

.crew-list__item:hover .crew-list__name {
  color: var(--accent);
  letter-spacing: 0.14em;
}

/* ----- Join Us window ----- */
.join-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 2rem);
  border: 0;
  background: transparent;
  color: var(--color-white);
}

.join-modal[open] {
  display: grid;
  place-items: center;
}

.join-modal::backdrop {
  background: rgba(0, 17, 29, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.join-modal[open]::backdrop {
  animation: modal-backdrop-in 0.4s ease both;
}

.join-modal.is-closing::backdrop {
  animation: modal-backdrop-out 0.3s ease both;
}

.join-modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(108, 196, 240, 0.12), transparent 60%),
    var(--navy-900);
  box-shadow: 0 40px 120px rgba(0, 17, 29, 0.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.join-modal__panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(1.75rem, 4vw, 3rem);
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.join-modal[open] .join-modal__panel {
  animation: modal-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.join-modal.is-closing .join-modal__panel {
  animation: modal-out 0.3s ease both;
}

.join-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
}

.join__eyebrow,
.join__label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

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

.join__title {
  margin-top: 0.5rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
}

.join__text {
  margin-top: 1rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.join__label {
  margin-top: 1.75rem;
  color: var(--color-white-muted);
}

.join__roles {
  margin-top: 0.6rem;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.join__role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  text-decoration: none;
}

.join__role::after {
  content: '\2192';
  color: var(--accent);
  transition: transform 0.3s ease;
}

.join__role-title {
  display: block;
  font-size: 0.98rem;
  transition: color 0.3s ease;
}

.join__role-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-white-muted);
}

.join__role:hover .join__role-title,
.join__role:focus-visible .join__role-title {
  color: var(--accent);
}

.join__role:hover::after,
.join__role:focus-visible::after {
  transform: translateX(4px);
}

.join__role:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.join__cta {
  margin-top: 1.75rem;
}

/* ----- Contact: one screen on desktop ----- */
/*  [ map        | heading, details, form ]
    [ footer bar across the bottom        ]  */
.contact {
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-white);
  /* Defines the sheet's edge as it slides over the (also dark) About page */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -30px 70px rgba(0, 5, 10, 0.55);
}

/* Map, restyled to the navy palette (the embed itself can't be themed) */
.contact__map {
  position: relative;
  min-height: 18rem;
  background: var(--navy-900);
}

.contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* A still locator (use "Get directions" to open it): an interactive map
     would swallow the mouse wheel that moves between pages */
  pointer-events: none;
  /* dark map, then tinted from grey towards the navy palette */
  filter: grayscale(1) invert(0.92) sepia(0.5) hue-rotate(165deg) saturate(2.2) brightness(0.8) contrast(1.05);
}

/* Fade into the content side */
.contact__map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--color-bg) 100%);
  pointer-events: none;
}

.contact__map-card {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 1;
  max-width: 20rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(0, 17, 29, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 17, 29, 0.45);
}

.contact__map-card address {
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-white);
}

.contact__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  transition: color 0.3s ease;
}

.contact__directions::after {
  content: '\2197';
  letter-spacing: 0;
}

.contact__directions:hover,
.contact__directions:focus-visible {
  color: var(--color-white);
}

.contact__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

/* Vertical sizes lean on vh so everything fits one screen */
.contact__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) clamp(1.25rem, 3vh, 2.5rem) clamp(2rem, 5vw, 5.5rem);
}

.contact .section-title {
  margin-top: clamp(0.6rem, 1.5vh, 1rem);
  font-size: clamp(1.8rem, min(3vw, 5vh), 3.2rem);
}

.contact__lead {
  max-width: 44ch;
  margin-top: clamp(0.75rem, 1.8vh, 1.25rem);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.08rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.contact__details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(1rem, 3vh, 2rem);
  list-style: none;
}

.contact__details li {
  display: grid;
  gap: 0.3rem;
}

.contact__details a {
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.25rem);
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact__details a:hover {
  color: var(--accent);
}

/* Facebook, X and YouTube, sitting with the email and phone. Icons only:
   the names are there for screen readers (aria-label). */
.socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
  list-style: none;
}

.socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--color-white-muted);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.socials a:hover,
.socials a:focus-visible {
  color: var(--color-white);
  border-color: var(--accent);
  background: rgba(108, 196, 240, 0.12);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 2vh, 1.4rem) 1.5rem;
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
}

.field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.field__optional {
  letter-spacing: 0.05em;
  text-transform: none;
  opacity: 0.7;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  font: inherit;
  font-weight: 300;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.field select {
  padding-right: 1.5rem;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat;
  cursor: pointer;
}

.field select option {
  color: var(--ink);
}

.field textarea {
  height: clamp(3rem, 8vh, 6rem);
  min-height: 3rem;
  resize: vertical;
  line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-white);
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: #ff7b7b;
}

.field__error {
  font-size: 0.78rem;
  color: #ff9a9a;
}

.field__error:empty {
  display: none;
}

.contact-form__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.contact-form__note {
  font-size: 0.82rem;
  color: var(--color-white-muted);
}

.contact-form__status {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--accent);
}

.contact-form__status:empty {
  display: none;
}

/* ----- Footer bar (bottom of the Contact screen) ----- */
.site-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 0.9rem var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: var(--color-white-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  list-style: none;
}

.site-footer__links a {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white-muted);
  transition: color 0.3s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-white);
}

.site-footer__top {
  text-decoration: none;
}

/* ----- Scroll reveal (only hidden when JS is there to reveal it) ----- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1s ease var(--delay, 0s),
    transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ----- Sections: tablets ----- */
@media (max-width: 900px) {
  /* About stacks and takes its natural height */
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about::before {
    background-image: url('../assets/about/studio-bg-1200.jpg');
  }

  /* Text now runs full width: shade evenly */
  .about::after {
    background: linear-gradient(180deg, rgba(0, 17, 29, 0.85) 0%, rgba(0, 17, 29, 0.78) 50%, rgba(0, 17, 29, 0.9) 100%);
  }

  /* Contact stacks: details + form, then the map, then the footer */
  .contact {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .contact__content {
    order: -1;
    padding: clamp(4rem, 12vw, 6rem) var(--gutter) 3rem;
  }

  .contact__map {
    height: 22rem;
  }

  .contact__map::after {
    background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 25%);
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Pages scroll under the menu button here: once scrolled, give it a small
     navy backing so it never sits on top of text */
  .menu-toggle {
    padding: 0.55rem 0.9rem;
    margin-right: -0.9rem;
    border-radius: 999px;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease;
  }

  .is-scrolled .menu-toggle:not(.menu-toggle--close) {
    background-color: rgba(0, 17, 29, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* ----- Sections: phones ----- */
@media (max-width: 600px) {
  .contact-form,
  .company__facts {
    grid-template-columns: 1fr;
  }

  /* Let the address wrap naturally instead of at the desktop line break */
  .company__facts address br {
    display: none;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* All five links on one row, spread across, with room to tap */
  .site-footer nav {
    width: 100%;
  }

  .site-footer__links {
    justify-content: space-between;
    gap: 0.25rem 1rem;
  }

  .site-footer__links a,
  .site-footer__top {
    display: inline-block;
    padding-block: 0.6rem;
  }
}

/* ============ Short screens (landscape phones) ============ */
@media (max-height: 620px) {
  .hero__logo {
    width: 44px;
    margin-bottom: 1rem;
  }

  .hero__lead {
    margin-top: 0.75rem;
  }

  .hero__center {
    padding-bottom: 1rem;
  }

  .scroll-cue {
    width: 40px;
    height: 40px;
    margin-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --stage-duration: 0.01s;
  }

  .intro {
    display: none;
  }

  .hero__content,
  .scroll-cue,
  .about::before,
  .menu-toggle,
  .menu[open],
  .menu[open] .menu__text,
  .menu[open] .menu__num,
  .menu[open] .menu__legal,
  .menu.is-closing,
  .project-modal[open] .project-modal__panel,
  .project-modal[open]::backdrop,
  .join-modal[open] .join-modal__panel,
  .join-modal[open]::backdrop {
    animation: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Crew rows: shown in place, with no drawing or rising */
  .crew-list__item::before,
  .crew-list__item:last-child::after {
    transform: scaleX(1);
    transition: none;
  }

  .crew-list__name {
    transform: none;
    opacity: 1;
    transition: color 0.3s ease;
  }

  .page-curtain {
    transition: none;
  }
}