/* ===================================================
   Ideal Dots — Publicity & Creative Design Agency
   =================================================== */

:root {
  --color-bg: #000000;
  --color-bg-alt: #0b0b0b;
  --color-ink: #fafafa;
  --color-ink-soft: #a1a1aa;
  --color-line: #232323;

  --color-primary: #eb9a23;
  --color-primary-dark: #c97e15;
  --color-secondary: #000000;
  --color-accent: #f7c065;

  --gradient-brand: linear-gradient(120deg, #eb9a23 0%, #f7c065 50%, #c97e15 100%);
  --gradient-dark: linear-gradient(135deg, #000000 0%, #0d0d0d 55%, #171717 100%);

  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 30px;

  --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 1px rgba(235, 154, 35, 0.4), 0 10px 30px rgba(235, 154, 35, 0.12);

  --header-h: 76px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Vertical rhythm. One scale drives every section, so the step from a title
     to the content under it reads the same wherever you are on the page. */
  --space-section: clamp(72px, 8.5vw, 124px);  /* a section's own top and foot */
  --space-band:    clamp(52px, 5.6vw, 80px);   /* shallower bands: stats, footer */
  --space-eyebrow: clamp(12px, 1.1vw, 16px);   /* eyebrow -> title */
  --space-title:   clamp(18px, 1.8vw, 26px);   /* title -> the copy beneath it */
  --space-content: clamp(44px, 4.4vw, 64px);   /* heading block -> the content */
  --space-block:   clamp(26px, 2.6vw, 36px);   /* between blocks in a column */
  --space-gutter:  clamp(40px, 4.4vw, 64px);   /* between grid columns */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}

p { margin: 0 0 1em; color: var(--color-ink-soft); }

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

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #000;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-bg);

  /* Failsafe: if script.js never runs, the loader still lets the site through
     rather than covering it forever. Normal exit removes it long before this. */
  animation: preloaderFailsafe 0.4s linear 8s forwards;
}
@keyframes preloaderFailsafe {
  to { opacity: 0; visibility: hidden; }
}

html.is-loading, html.is-loading body { overflow: hidden; }

.preloader__dots {
  --pre-size: 34px;
  --pre-gap: 20px;
  display: flex;
  align-items: center;
  gap: var(--pre-gap);
}

/* Same size throughout — the dots lift in sequence with a squash-and-stretch,
   so the wave travels left to right with some weight to it. */
.preloader__dot {
  width: var(--pre-size);
  height: var(--pre-size);
  border-radius: 50%;
  background: var(--color-primary);
  animation: preloaderBounce 1.05s cubic-bezier(0.45, 0.05, 0.4, 1) infinite;
}
/* The middle dot sits above the other two so they can slip in behind it. */
.preloader__dot:nth-child(2) { position: relative; z-index: 2; }
.preloader__dot:nth-child(2) { animation-delay: 0.13s; }
.preloader__dot:nth-child(3) { animation-delay: 0.26s; }

@keyframes preloaderBounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  14%      { transform: translateY(2px) scale(1.14, 0.86); }   /* squash */
  42%      { transform: translateY(-20px) scale(0.9, 1.1); }   /* stretch */
  68%      { transform: translateY(0) scale(1.12, 0.88); }     /* land */
  84%      { transform: translateY(0) scale(1, 1); }
}

/* Anticipation: everything crouches before the last dot launches. */
.preloader.is-anticipating .preloader__dot {
  animation: none;
  transform: translateY(7px) scale(1.18, 0.82);
  transition: transform 0.28s cubic-bezier(0.5, 0, 0.75, 0);
}

/* The outer two fling away; the last one pops with an overshoot. */
.preloader.is-exiting .preloader__dot { animation: none; }
/* The middle dot leads with an overshoot; the outer two follow it in and
   disappear behind it, exactly one dot-pitch of travel each. */
.preloader.is-exiting .preloader__dot:nth-child(2) {
  transform: scale(1.4);
  transition: transform 0.44s cubic-bezier(0.34, 1.8, 0.64, 1);
}
/* Identical duration, easing and start time as the centre, so the two slide in
   at exactly the rate it grows. */
.preloader.is-exiting .preloader__dot:nth-child(1),
.preloader.is-exiting .preloader__dot:nth-child(3) {
  transform: translateX(var(--pre-travel)) scale(0.88);
  transition: transform 0.44s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.preloader.is-exiting .preloader__dot:nth-child(1) {
  --pre-travel: calc(var(--pre-size) + var(--pre-gap));
}
.preloader.is-exiting .preloader__dot:nth-child(3) {
  --pre-travel: calc(-1 * (var(--pre-size) + var(--pre-gap)));
}

/* Final cleanup once the reveal has finished. */
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__dot { animation: none; transform: none; }
  .preloader.is-anticipating .preloader__dot,
  .preloader.is-exiting .preloader__dot { transform: none; transition: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #000000;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-accent); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--gradient-brand);
  color: #000000;
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--glow-accent); }

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-block { width: 100%; }

.btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; }

/* ---------- Decorative cursor dot (desktop only) ---------- */

.dot-cursor {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.5;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width var(--transition), height var(--transition), opacity var(--transition);
  display: none;
  mix-blend-mode: difference;
}
@media (hover: hover) and (pointer: fine) {
  .dot-cursor { display: block; }
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;

  /* Black glass as a pure tint that fades to nothing at the lower edge, so it
     reads as the top of the hero's own gradient rather than a separate bar.
     --nav-veil is driven by the hero scroll so this tint dims in step with the
     beam behind it; the two fade out as one instead of switching off apart. */
  --nav-veil: 1;

  /* A floor on the tint keeps the strip present even once the beam has faded,
     so the bar always reads as a pane rather than vanishing. */
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, calc(0.24 + 0.42 * var(--nav-veil))) 0%,
    rgba(0, 0, 0, calc(0.20 + 0.28 * var(--nav-veil))) 60%,
    rgba(0, 0, 0, calc(0.17 + 0.17 * var(--nav-veil))) 100%);

  /* Hairline along the lower edge: the glass strip's own boundary. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* Frosted pane. The blur lives on a pseudo-element that overhangs the bar and
   is masked away along its lower edge — a backdrop-filter on the bar itself
   stops dead at its boundary and draws a hard line across the beam. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -8px 0;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0.5) 90%, transparent 100%);
}

/* Only once the hero's light has gone does the bar take a solid backing, so
   nothing switches appearance while the gradient is still on screen. */
.site-header.scrolled {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.82) 60%, rgba(0, 0, 0, 0.76) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  transition: background var(--transition), border-color var(--transition);
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.main-nav ul {
  display: flex;
  gap: 32px;
}

.nav-link {
  position: relative;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  padding: 6px 0;
  transition: color var(--transition);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gradient-brand);
  transition: width var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--color-ink); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-ink);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero ---------- */

/* The hero is a tall track; the layer inside it pins while you scroll, which
   is what gives the posters room to grow at the speed of the scroll. */
.hero {
  position: relative;
  height: 178vh;
  padding: 0;              /* the global `section` padding would gap it off the nav */
  background: var(--color-bg);
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + clamp(10px, 2.4vh, 32px)) 0 0;
  background: var(--color-bg);
}

/* Light spilling down from behind the nav. Built from overlapping elliptical
   gradients rather than a clipped cone — gradients have no edge to give away,
   and offsetting them left/right keeps the falloff irregular so it melts into
   the background instead of reading as a shape. */
.hero-beam {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1500px, 110vw);
  height: min(720px, 66vh);
  pointer-events: none;
  z-index: 0;
  background:
    /* broad ambient wash */
    radial-gradient(80% 52% at 50% 0%,  rgba(235, 154, 35, 0.07), transparent 72%),
    /* source, sitting behind the nav */
    radial-gradient(44% 26% at 50% 2%,  rgba(255, 206, 135, 0.38), transparent 72%),
    /* main throw downward */
    radial-gradient(33% 62% at 50% 10%, rgba(235, 154, 35, 0.30), transparent 74%),
    /* offset lobes — these are what make it irregular */
    radial-gradient(30% 46% at 36% 28%, rgba(235, 154, 35, 0.17), transparent 72%),
    radial-gradient(26% 40% at 66% 34%, rgba(247, 192, 101, 0.14), transparent 74%),
    radial-gradient(20% 30% at 44% 48%, rgba(255, 206, 135, 0.10), transparent 72%),
    /* faint floor so the light dies out before the posters */
    radial-gradient(56% 30% at 52% 62%, rgba(201, 126, 21, 0.09), transparent 78%);
  filter: blur(26px);
}

/* Motes drifting in the light. */
/* Confined to the space above the carousel so no mote ever sits over a
   poster card. */
.hero-stars {
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-stars span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffdca8;
  box-shadow: 0 0 8px 1px rgba(247, 192, 101, 0.6);
  opacity: 0;
  animation: heroStar 14s ease-in-out infinite;
}
.hero-stars span:nth-child(1)  { top: 12%; left:  8%; animation-delay: 0s;     }
.hero-stars span:nth-child(2)  { top: 30%; left: 20%; animation-delay: -1.9s;  width: 4px; height: 4px; }
.hero-stars span:nth-child(3)  { top: 8%; left: 31%; animation-delay: -4.1s;  }
.hero-stars span:nth-child(4)  { top: 52%; left: 13%; animation-delay: -6.3s;  width: 2px; height: 2px; }
.hero-stars span:nth-child(5)  { top:  7%; left: 45%; animation-delay: -8.4s;  }
.hero-stars span:nth-child(6)  { top: 40%; left: 61%; animation-delay: -1.1s;  width: 4px; height: 4px; }
.hero-stars span:nth-child(7)  { top: 22%; left: 74%; animation-delay: -5.2s;  }
.hero-stars span:nth-child(8)  { top: 62%; left: 87%; animation-delay: -3.0s;  }
.hero-stars span:nth-child(9)  { top: 78%; left: 69%; animation-delay: -7.6s;  width: 2px; height: 2px; }
.hero-stars span:nth-child(10) { top: 88%; left:  5%; animation-delay: -9.8s;  }
.hero-stars span:nth-child(11) { top: 70%; left: 93%; animation-delay: -2.6s;  width: 4px; height: 4px; }
.hero-stars span:nth-child(12) { top: 34%; left: 53%; animation-delay: -11.2s; width: 2px; height: 2px; }
.hero-stars span:nth-child(13) { top:  5%; left: 82%; animation-delay: -12.7s; }
.hero-stars span:nth-child(14) { top: 92%; left: 26%; animation-delay: -10.4s; }

@keyframes heroStar {
  0%, 100% { opacity: 0.12; transform: translate(0, 0); }
  25%      { opacity: 0.85; }
  50%      { opacity: 1;    transform: translate(7px, -22px); }
  75%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stars span { animation: none; opacity: 0.4; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  will-change: opacity, transform;
  max-width: 1180px;
  text-align: center;
  margin: 0 auto;
}

/* ---------- Hero poster carousel (3D cylinder) ---------- */

.poster-carousel {
  transform-origin: 50% 50%;
  will-change: transform;
  --card-h: clamp(300px, 43vh, 470px);
  --card-w: calc(var(--card-h) * 0.8);

  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 7.4vh, 78px);
  height: calc(var(--card-h) + 54px);
  touch-action: pan-y;
  cursor: grab;
}
.poster-carousel.is-dragging { cursor: grabbing; }

.poster-stage {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.poster-card {
  position: absolute;
  top: 0;
  left: calc(var(--card-w) / -2);
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  border: 0;
  background: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}

.poster-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
  transition: box-shadow 0.45s ease;
}
/* Layered falloff so the glow dies away gradually rather than stopping at one
   radius. The carousel no longer clips, so it can fade fully into the page. */
.poster-card.is-hot .poster-inner {
  box-shadow: 0 0 0 1px rgba(235, 154, 35, 0.5),
              0 30px 70px rgba(0, 0, 0, 0.75),
              0 0 22px rgba(235, 154, 35, 0.24),
              0 0 54px rgba(235, 154, 35, 0.15),
              0 0 110px rgba(235, 154, 35, 0.08);
}

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

.poster-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 16px 16px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.45) 55%, transparent);
  transition: color 0.4s ease;
}
.poster-card.is-hot .poster-caption { color: var(--color-accent); }

.poster-card:focus-visible .poster-inner {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Darkens the cylinder towards the edges so the front poster reads first */
.poster-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--color-bg) 0%, rgba(0,0,0,0.55) 12%, transparent 30%,
      transparent 70%, rgba(0,0,0,0.55) 88%, var(--color-bg) 100%),
    linear-gradient(to top, var(--color-bg) 0%, rgba(0,0,0,0.75) 9%, transparent 34%);
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-eyebrow);
}

.hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.12;
  margin-bottom: 0.85em;
}
.hero h1 em { font-style: normal; color: var(--color-primary); }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Brand story (auto-cycling lines over a drifting dot field) ---------- */

.manifesto {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) 24px;
  text-align: center;
  background: var(--color-bg);
}

/* --- background --- */

.story-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Ripple of dots, painted on canvas (see script.js). */
.story-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Layered gradients give the black some depth behind the ripple. */
.story-aura {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 46% at 50% 48%, rgba(235, 154, 35, 0.14), transparent 72%),
    radial-gradient(34% 30% at 20% 26%, rgba(247, 192, 101, 0.07), transparent 74%),
    radial-gradient(38% 34% at 82% 76%, rgba(201, 126, 21, 0.08), transparent 74%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 26%, transparent 74%, rgba(0, 0, 0, 0.5) 100%);
}

/* Keeps the line crisp where the dots are densest. */
.story-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 22% at 50% 50%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.3) 58%, transparent 82%);
}

/* --- foreground --- */

.story-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.story-lines {
  position: relative;
  width: min(1000px, 92vw);
  height: clamp(88px, 13vh, 132px);
  margin: 0 auto;
}

.story-line {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.7vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);

  /* Blur-fade. Durations come from the ripple interval (set in script.js),
     so the copy keeps time with the wave behind it. The incoming line waits
     for the ripple to wash the old one away before easing into focus. */
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.985);

  /* Easy ease — eased at both ends, so the swap starts and settles gently.
     Both directions share one duration and easing, and start together, so the
     outgoing and incoming opacities always add up to one — the lines cross
     through each other instead of leaving a gap. */
  --story-ease: cubic-bezier(0.42, 0, 0.58, 1);
  transition:
    opacity   var(--fade, 1000ms) var(--story-ease),
    filter    var(--fade, 1000ms) var(--story-ease),
    transform var(--fade, 1000ms) var(--story-ease);
}
.story-line.is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.story-line.is-out {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.015);
}

/* Before JS splits them, the lines simply stack and read normally. */
.story-lines:not(.is-ready) .story-line {
  position: relative;
  inset: auto;
  opacity: 1;
  filter: none;
  transform: none;
}
.story-lines:not(.is-ready) .story-line + .story-line { display: none; }

/* Reduced motion: no cycling — every line is shown at once. */
.story-lines.no-motion { height: auto; display: grid; gap: 14px; }
.story-lines.no-motion .story-line {
  position: relative;
  inset: auto;
  opacity: 1;
  filter: none;
  transform: none;
}

/* ---------- Section shared ---------- */

section { padding: var(--space-section) 0; }

.section-eyebrow { display: block; text-align: center; }
.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-title);
}
/* A title with nothing under it hands the whole gap to the content that
   follows, so the step is the same as it is after a lead paragraph. */
.section-title:last-child { margin-bottom: 0; }
.section-lead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-content);
  font-size: 1.05rem;
}

/* ---------- Services (pinned: rail-width image -> split -> full bleed) ---------- */

.services {
  padding: 0;
  background: var(--color-bg);
}
.svc-track {
  position: relative;
  height: 300vh;          /* the scroll distance the sequence runs over */
}
.svc-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

/* Invisible ruler: gives JS the exact content box the nav and every other
   section align to, so the image and list share that width. */
.svc-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  visibility: hidden;
}

/* --- the image: rail width, then a left half, then the whole section --- */
.svc-media {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  will-change: left, top, width, height, opacity;
}
.svc-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.svc-shot.is-on { opacity: 1; }

/* A light wash so the white statement holds on the artwork. Any of the six may
   be the one showing, and the palest of them need this much to keep white above
   3:1; measured across the whole set. Its strength is driven from script.js and
   is gone by the time the image has halved. */
.svc-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* --- the statement, sitting over the image while it is full width --- */
.svc-intro {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  will-change: opacity, transform;
}
.svc-intro h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
}

/* --- the list, sharing the image's height --- */
.svc-panel {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  opacity: 0;
  will-change: opacity, transform;
}
.svc-eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 22px);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.svc-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vh, 9px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-item {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(13px, 1.4vw, 20px);
  padding: 0 clamp(12px, 1.2vw, 18px);
  border-radius: 14px;
  cursor: pointer;
  isolation: isolate;
  will-change: opacity, transform;
}

/* The fill is a layer of its own so it can be eased by scroll without
   fighting the text colour. */
/* Highlight is hover-only — nothing lights up from scrolling alone. */
.svc-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-list.hover-on .svc-item:hover::before { opacity: 1; }

/* --- typography --- */
/* Each service is marked by a drawn icon rather than a number, held in a tile
   so every title starts on the same line however wide the drawing is. */
.svc-icon {
  display: grid;
  place-items: center;
  width: clamp(36px, 3.1vw, 46px);
  height: clamp(36px, 3.1vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(250, 250, 250, 0.72);
  transition: color 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}
.svc-icon svg {
  width: clamp(19px, 1.6vw, 23px);
  height: clamp(19px, 1.6vw, 23px);
  display: block;
}
.svc-body { display: block; }
/* The title carries the row; it is the only thing set in the display weight. */
.svc-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.78vw, 1.68rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  transition: color 0.45s ease;
}
/* The note sits a clear step below it — smaller, lighter, and held to a
   comfortable measure so it never runs the width of the panel. */
.svc-item p {
  margin: 0.42em 0 0;
  max-width: 34ch;
  font-size: clamp(0.7rem, 0.82vw, 0.84rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: rgba(250, 250, 250, 0.5);
  transition: color 0.45s ease;
}
.svc-go {
  display: block;
  width: 19px;
  height: 19px;
  color: rgba(250, 250, 250, 0.4);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s ease;
}

/* Lit state — colours cross-fade while the fill itself is eased by scroll. */
.svc-list.hover-on .svc-item:hover h3 { color: #0d0d0d; }
.svc-list.hover-on .svc-item:hover p { color: rgba(13, 13, 13, 0.66); }
.svc-list.hover-on .svc-item:hover .svc-icon {
  color: #0d0d0d;
  border-color: rgba(13, 13, 13, 0.28);
  background: rgba(13, 13, 13, 0.08);
}
.svc-list.hover-on .svc-item:hover .svc-go {
  opacity: 1;
  transform: translate(0, 0);
  color: #0d0d0d;
}
.svc-go svg { width: 100%; height: 100%; display: block; }

/* Without scripting the section stacks and reads normally. */
.services:not(.is-ready) .svc-track { height: auto; }
.services:not(.is-ready) .svc-pin { position: static; height: auto; padding: 96px 0; }
.services:not(.is-ready) .svc-rail { display: none; }
.services:not(.is-ready) .svc-media {
  position: relative;
  opacity: 1;
  width: min(1180px, 100%);
  height: 52vh;
  margin: 0 auto 40px;
  border-radius: 24px;
}
.services:not(.is-ready) .svc-intro { position: relative; padding: 0 24px 40px; }
.services:not(.is-ready) .svc-panel {
  position: relative;
  opacity: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.services:not(.is-ready) .svc-item { padding: 14px clamp(10px, 1.2vw, 20px); }

@media (max-width: 860px) {
  .svc-item h3 { font-size: clamp(0.95rem, 3.2vw, 1.3rem); }
  .svc-item p { display: none; }
}

/* ---------- Stats ---------- */

.stats {
  background: var(--color-bg);
  padding: var(--space-band) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* A ruled band: four columns divided by hairlines, each reading label first and
   figure second, so the eye runs along the row rather than bouncing between
   four centred blocks. */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(16px, 2.1vw, 36px);
  border-left: 1px solid var(--color-line);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }

.stat-label {
  font-size: clamp(0.66rem, 0.74vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.42);
}
.stat-value {
  display: flex;
  align-items: baseline;
  margin-top: clamp(10px, 1.3vw, 18px);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
/* Tabular figures: without them the number jitters as it counts up. */
.stat-number { font-variant-numeric: tabular-nums; }
.stat-unit { color: var(--color-primary); }

.stat-note {
  margin-top: clamp(9px, 1vw, 14px);
  font-size: clamp(0.74rem, 0.82vw, 0.84rem);
  line-height: 1.45;
  color: rgba(250, 250, 250, 0.4);
}

/* ---------- Work: film titles rolling past ---------- */

.work { background: var(--color-bg); }

.title-strip {
  position: relative;
  margin-top: var(--space-content);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* The set is duplicated in the markup, so shifting exactly half the track
   loops seamlessly. Spacing lives on the cards (not as a flex gap) so each
   card's footprint is identical and the halves line up exactly. */
.title-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: titleRoll 46s linear infinite;
  will-change: transform;
}
.title-track.is-paused,
.title-strip:focus-within .title-track { animation-play-state: paused; }

@keyframes titleRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.title-card {
  flex: 0 0 auto;
  width: clamp(240px, 25vw, 350px);
  height: clamp(155px, 15.5vw, 220px);
  margin-right: clamp(16px, 1.7vw, 28px);
  --pad: clamp(24px, 3vw, 46px);
  position: relative;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: border-color 0.5s ease;
}

.title-card img {
  /* Pinned to the card's inset rather than sized in percentages: a percentage
     height had nothing definite to resolve against and the artwork spilled
     past the lower padding. This guarantees equal space on every side. */
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: calc(100% - var(--pad) * 2);
  height: calc(100% - var(--pad) * 2);
  object-fit: contain;
  /* Sits monochrome until hovered, then returns to full colour. */
  filter: grayscale(1) brightness(1.12) contrast(1.04);
  opacity: 0.84;
  /* Scaled up about its own centre, so the title reads larger without the
     card or its centring changing. */
  --sc: 1.2;
  transform: scale(var(--sc));
  transition: filter 0.55s ease, opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.title-card.is-lit,
.title-card:focus-within {
  border-color: rgba(255, 255, 255, 0.45);
}
.title-card.is-lit img,
.title-card:focus-within img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
  transform: scale(calc(var(--sc) * 1.07));
}

@media (prefers-reduced-motion: reduce) {
  .title-track { animation: none; }
}

/* ---------- How we work (one image -> four cards -> flip to content) ---------- */

.process {
  padding: 0;
  background: var(--color-bg);
}
.how-track {
  position: relative;
  height: 360vh;
}
.how-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

.how-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Rises out from behind the image as it halves in height. */
.how-title {
  position: absolute;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--color-ink);
  opacity: 0;
  will-change: opacity, transform;
}

/* The cards ARE the image: each one shows its own slice of a single picture,
   so with no gap between them they read as one panel. */
.how-cards {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  perspective: 1600px;
  --outer-card-r: 20px;
}
.how-cards.is-live { pointer-events: auto; }

.how-card {
  flex: 0 0 auto;
  height: 100%;
  will-change: transform;
}
.how-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  /* The turn is driven frame by frame in script.js: the widening has to land on
     the exact moment the cards are edge-on, which needs the live angle, not a
     transition the script cannot see inside. */
}

.how-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-r, 0px);
  overflow: hidden;
}

/* While the four slices still read as one image, only the outside edges are
   rounded. This keeps the picture seamless; the inner corners round in as the
   cards separate during the scroll animation. */
.how-card:first-child .how-card__face {
  border-radius: var(--outer-card-r) var(--card-r, 0px) var(--card-r, 0px) var(--outer-card-r);
}
.how-card:last-child .how-card__face {
  border-radius: var(--card-r, 0px) var(--outer-card-r) var(--outer-card-r) var(--card-r, 0px);
}

/* Front: the slice of the shared image. */
.how-card__face--shot {
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, var(--edge, 0));
}

/* Back: the step, waiting behind. */
.how-card__face--back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(16px, 1.45vw, 24px);
  transform: rotateY(180deg);
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -70px 100px rgba(0, 0, 0, 0.16);
  transition: filter 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* Four muted, low-sheen colourways give the cards the same soft matte finish
   as the reference while keeping every process step distinct. */
.how-card:nth-child(1) .how-card__face--back {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 211, 188, 0.24), transparent 48%),
    linear-gradient(135deg, #96564a 0%, #743c33 100%);
}
.how-card:nth-child(2) .how-card__face--back {
  background:
    radial-gradient(circle at 82% 14%, rgba(195, 224, 211, 0.20), transparent 48%),
    linear-gradient(135deg, #386b63 0%, #214a45 100%);
}
.how-card:nth-child(3) .how-card__face--back {
  background:
    radial-gradient(circle at 80% 12%, rgba(230, 226, 199, 0.18), transparent 48%),
    linear-gradient(135deg, #706f59 0%, #4d4e3d 100%);
}
.how-card:nth-child(4) .how-card__face--back {
  background:
    radial-gradient(circle at 84% 12%, rgba(236, 190, 157, 0.18), transparent 48%),
    linear-gradient(135deg, #794a39 0%, #4e3028 100%);
}
.how-card__face--back::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 100% 64px, 64px 100%;
  mix-blend-mode: soft-light;
}

/* Index, title and copy read as one block so the card carries a single
   deliberate gap above the deliverables, not two pockets of dead space. */
.how-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 0.95vw, 14px);
  min-height: 0;
}
.how-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.how-card__num {
  font-size: clamp(0.72rem, 0.82vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.45s ease;
}
.how-card__rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.45s ease;
}

.how-card__face--back h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.95vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  transition: color 0.45s ease;
}
.how-card__face--back p {
  margin: 0;
  font-size: clamp(0.74rem, 0.88vw, 0.9rem);
  line-height: 1.52;
  color: rgba(250, 250, 250, 0.5);
  transition: color 0.45s ease;
}

/* What the step actually produces — closes the card off at the foot. */
.how-card__tags {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(10px, 1vw, 14px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(0.63rem, 0.73vw, 0.74rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.38);
  transition: color 0.45s ease, border-color 0.45s ease;
}

/* Hover lifts the existing colourway instead of replacing it with a new one. */
.how-cards.is-live .how-card:hover .how-card__face--back {
  filter: brightness(1.08) saturate(1.04);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -70px 100px rgba(0, 0, 0, 0.1);
}
.how-cards.is-live .how-card:hover .how-card__num { color: rgba(255, 255, 255, 0.76); }
.how-cards.is-live .how-card:hover .how-card__rule { background: rgba(255, 255, 255, 0.3); }
.how-cards.is-live .how-card:hover .how-card__tags {
  color: rgba(255, 255, 255, 0.56);
  border-top-color: rgba(255, 255, 255, 0.24);
}

/* Without scripting the section stacks and reads normally. */
.process:not(.is-ready) .how-track { height: auto; }
.process:not(.is-ready) .how-pin { position: static; height: auto; padding: 96px 24px; }
.process:not(.is-ready) .how-rail { display: none; }
.process:not(.is-ready) .how-title {
  position: relative;
  opacity: 1;
  margin: 0 auto 48px;
  max-width: 1180px;
}
.process:not(.is-ready) .how-cards {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  gap: 18px;
  pointer-events: auto;
  perspective: none;
}
.process:not(.is-ready) .how-card { flex: 1 1 0; height: 320px; }
.process:not(.is-ready) .how-card__face--shot { display: none; }
.process:not(.is-ready) .how-card__face--back { position: relative; transform: none; }

@media (max-width: 860px) {
  .how-card__face--back p { display: none; }
  .how-card__tags { letter-spacing: 0.06em; }
}
@media (max-width: 600px) {
  .how-card__tags li:nth-child(n + 3) { display: none; }
}

/* ---------- Process ticker ---------- */

.process-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 16px 0;
  background: var(--gradient-brand);
}
.process-ticker__track {
  display: flex;
  width: max-content;
  animation: processTicker 24s linear infinite;
}
.process-ticker__track span {
  position: relative;
  padding: 0 28px;
  color: #050505;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.process-ticker__track span::after {
  content: '\2726';
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  font-size: 0.7rem;
  opacity: 0.55;
}
@keyframes processTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- About ---------- */

.about { background: var(--color-bg); }
.about-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-gutter);
  align-items: center;
}
.about-copy .section-eyebrow,
.about-copy .section-title { text-align: left; margin-left: 0; }

.about-visual {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 40px;
  width: 100%;
}
.about-dots span {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.about-dots span:nth-child(3n+1) { background: var(--color-primary); }
.about-dots span:nth-child(5n+2) { background: #ffffff; }

/* ---------- CTA banner ---------- */

.cta-banner {
  min-height: 560px;
  padding: var(--space-section) 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: url('assets/cta-banner.jpg') center top / cover no-repeat;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 50% 100%, rgba(235, 154, 35, 0.12), transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; text-align: center; }
.cta-inner h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-title);
}
.cta-inner p { color: rgba(255,255,255,0.65); max-width: 480px; margin: 0 auto var(--space-block); }

@media (max-width: 780px) {
  .cta-banner { min-height: 440px; }
}

/* ---------- Contact ---------- */

.contact { background: var(--color-bg); }
.contact-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-gutter);
}
.contact-info .section-eyebrow,
.contact-info .section-title,
.contact-info .section-lead { text-align: left; margin-left: 0; }
.contact-info .section-lead { margin-bottom: var(--space-content); }

.contact-list { margin-bottom: var(--space-block); }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-weight: 500;
}
.contact-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition);
}
.contact-list li:hover .contact-icon { border-color: var(--color-primary); color: var(--color-primary); }

.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all var(--transition);
}
.social-links a:hover {
  background: var(--gradient-brand);
  color: #000000;
  border-color: transparent;
  transform: translateY(-3px);
}

.contact-form {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-ink);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6b6b70; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(235, 154, 35, 0.15);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #f87171;
}
.error-msg {
  display: block;
  min-height: 18px;
  font-size: 0.8rem;
  color: #f87171;
  margin-top: 6px;
}

.form-status {
  margin: 16px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 20px;
}
.form-status.success { color: #4ade80; }
.form-status.error { color: #f87171; }

/* ---------- Footer ---------- */

.site-footer {
  background: #000000;
  color: rgba(255,255,255,0.7);
  padding: var(--space-band) 0 0;
  border-top: 1px solid var(--color-line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr;
  gap: var(--space-gutter);
  padding-bottom: var(--space-content);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo { color: #fff; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,0.5); max-width: 280px; margin-bottom: 20px; }
.footer-brand .social-links a { border-color: rgba(255,255,255,0.2); color: #fff; }

.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--color-primary); }

.footer-newsletter p { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin-bottom: 16px; }
.newsletter-form {
  display: flex;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
}
.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  border: none;
  background: var(--gradient-brand);
  color: #000000;
  width: 46px;
  font-size: 1rem;
  font-weight: 700;
}
.footer-newsletter .form-status { color: var(--color-primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Back to top ---------- */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-brand);
  color: #000000;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 400;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--glow-accent); }

/* ===================================================
   Responsive
   =================================================== */

@media (max-width: 1024px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: clamp(30px, 4vw, 46px); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(even) { padding-right: 0; }
  .about-inner { grid-template-columns: 1fr; }
  .about-visual { max-width: 420px; margin: 0 auto; }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .poster-carousel {
    --card-w: 250px;
    --card-h: 312px;
    height: 356px;
  }

  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .main-nav.open {
    display: block;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
  }
  .main-nav.open ul {
    flex-direction: column;
    padding: 20px 24px 28px;
    gap: 4px;
  }
  .main-nav.open .nav-link {
    display: block;
    padding: 12px 0;
  }
}

@media (max-width: 560px) {
  .stats-band { grid-template-columns: 1fr; row-gap: clamp(26px, 6vw, 36px); }
  .stat { padding: 0; border-left: 0; }
  .header-actions .btn-sm { display: none; }
  .logo-img { height: 18px; }
}

@media (max-width: 780px) {
  .hero { padding: 0; }

  .poster-carousel {
    --card-w: 186px;
    --card-h: 232px;
    height: 296px;
    margin-top: 30px;
  }
  .poster-stage { top: 22px; }
  .poster-caption { padding: 28px 10px 11px; font-size: 0.72rem; }


  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 22px; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }

}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .poster-carousel {
    --card-w: 150px;
    --card-h: 188px;
    height: 246px;
  }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}