/* ─────────────────────────────────────────────────────────
   PROJECT V — Stylesheet
   Closely mirrors the Gang reference site visual language.
───────────────────────────────────────────────────────── */

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::before, ::after { -webkit-user-select: none; user-select: none; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, button,
ul, li, nav, header, footer, main, section, article, figure, figcaption, time {
  margin: 0; padding: 0; border: 0; font-size: 100%;
  font-style: inherit; font-weight: inherit; vertical-align: baseline;
  background: transparent;
}
html { font-size: 62.5%; }
body { line-height: 1; }
ol, ul { list-style: none; }
a { text-decoration: none; color: inherit; background: transparent; }
button {
  appearance: none; -webkit-appearance: none;
  background: inherit; border: inherit; cursor: pointer;
  font-family: inherit; font-size: inherit; outline: none;
  touch-action: manipulation;
}
button:focus-visible { outline: 2px solid var(--c-red); }
svg { overflow: visible; }
img, video { display: block; width: 100%; }

/* ── CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  --bp: 1920;
  --m: calc(50vw - 960px);
  --gut: min(20px, calc(20 / 1920 * 100vw));
  --navH: min(67px, calc(67 / 1920 * 100vw));

  --c-bg:    #ffffff;
  --c-dark:  #1a1a1a;
  --c-red:   #7a1c1c;   /* dried blood */
  --c-red2:  #621616;
  --c-off:   #f5f2f0;
  --c-muted: rgba(26,26,26,.5);
  --c-border: rgba(26,26,26,.15);

  --ease-out: cubic-bezier(.55, 0, .1, 1);
  --ease-in:  cubic-bezier(.55, .055, .675, .19);
}
@media (max-width: 2363px) { :root { --m: 7.7vw; } }
@media (max-width: 1279px) { :root { --m: min(140px, calc(140 / var(--bp) * 100vw)); } }
@media (max-width: 1023px) {
  :root {
    --m: min(60px, calc(60 / var(--bp) * 100vw));
    --gut: min(40px, calc(40 / var(--bp) * 100vw));
  }
}
@media (max-width: 767px) {
  :root {
    --m: min(24px, calc(24 / 393 * 100vw));
    --bp: 393;
    --gut: min(16px, calc(16 / 393 * 100vw));
    --navH: min(52px, calc(52 / 393 * 100vw));
  }
}

/* ── BASE ───────────────────────────────────────────────── */
html {
  font-size: 16px;
  color: var(--c-dark);
  font-family: 'Inter', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
body { background: var(--c-bg); }
::selection { background: var(--c-dark); color: #fff; }
.preload * { transition: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); margin: -1px;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
/* Display / Titles — Syne */
.title--xl, .title--m, .title--s {
  font-family: 'Syne', Helvetica, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1;
  font-weight: 700;
}
.title--xl  { font-size: min(64px,  calc(64  / var(--bp) * 100vw)); }
.title--m   { font-size: min(40px,  calc(40  / var(--bp) * 100vw)); }
.title--s   { font-size: min(28px,  calc(28  / var(--bp) * 100vw)); }
@media (max-width: 1023px) {
  .title--xl { font-size: min(40px, calc(40 / var(--bp) * 100vw)); }
  .title--m  { font-size: min(28px, calc(28 / var(--bp) * 100vw)); }
}
@media (max-width: 767px) {
  .title--xl { font-size: min(36px, calc(36 / var(--bp) * 100vw)); }
  .title--m  { font-size: min(24px, calc(24 / var(--bp) * 100vw)); }
}

/* Body */
.body--xl {
  font-size: min(56px, calc(56 / var(--bp) * 100vw));
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-weight: 400;
}
.body--m  {
  font-size: min(18px, calc(18 / var(--bp) * 100vw));
  line-height: 1.5;
  font-weight: 400;
}
@media (max-width: 1023px) {
  .body--xl { font-size: min(36px, calc(36 / var(--bp) * 100vw)); }
}
@media (max-width: 767px) {
  .body--xl { font-size: min(26px, calc(26 / var(--bp) * 100vw)); }
  .body--m  { font-size: min(15px, calc(15 / var(--bp) * 100vw)); }
}

/* Labels — monospace uppercase */
.label--s {
  font-family: 'Courier New', Courier, monospace;
  font-size: max(10px, min(12px, calc(12 / var(--bp) * 100vw)));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

/* Italic */
em { font-style: italic; }

/* Suptitle (hero sub-headline) */
.suptitle {
  font-family: 'Syne', Helvetica, sans-serif;
  font-size: min(32px, calc(32 / var(--bp) * 100vw));
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 767px) {
  .suptitle { font-size: min(16px, calc(16 / var(--bp) * 100vw)); line-height: 1.4; }
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.ctn { padding-left: var(--m); padding-right: var(--m); }

.row {
  display: flex;
  flex-direction: column;
  column-gap: var(--gut);
}
@media (min-width: 768px) {
  .row { flex-flow: row wrap; }
}

/* Simplified col system */
.col-2  { width: calc((100% + var(--gut)) / 12 * 2  - var(--gut)); }
.col-3  { width: calc((100% + var(--gut)) / 12 * 3  - var(--gut)); }
.col-4  { width: calc((100% + var(--gut)) / 12 * 4  - var(--gut)); }
.col-6  { width: calc((100% + var(--gut)) / 12 * 6  - var(--gut)); }
.col-8  { width: calc((100% + var(--gut)) / 12 * 8  - var(--gut)); }
.col-9  { width: calc((100% + var(--gut)) / 12 * 9  - var(--gut)); }
.col-12 { width: 100%; }
.ml-1   { margin-left: calc((100% + var(--gut)) / 12 * 1); }
.ml-2   { margin-left: calc((100% + var(--gut)) / 12 * 2); }
.ml-9   { margin-left: calc((100% + var(--gut)) / 12 * 9); }

@media (max-width: 767px) {
  .col-2, .col-3, .col-4, .col-6, .col-8, .col-9 { width: 100%; }
  .ml-1, .ml-2, .ml-9 { margin-left: 0; }
}

/* ── CTA / BUTTON ───────────────────────────────────────── */
.cta {
  --primary:   var(--c-dark);
  --secondary: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  pointer-events: all;
  position: relative;
  text-transform: uppercase;
  width: fit-content;
}

/* Top dashed border */
.cta[data-line="top"]::before,
.cta.top::before {
  background-image: linear-gradient(90deg, currentColor 10%, transparent 25%);
  background-size: 6px 1px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* Bottom dashed border */
.cta.bottom::before {
  background-image: linear-gradient(90deg, currentColor 10%, transparent 25%);
  background-size: 6px 1px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* The inner text span */
.cta .text {
  display: inline-block;
  margin-left: max(-4px, calc(-4 / var(--bp) * 100vw));
  padding: min(6px, calc(6 / var(--bp) * 100vw)) min(12px, calc(12 / var(--bp) * 100vw));
  position: relative;
  transition: color 0.12s;
  z-index: 1;
}
.cta.top  .text { padding-top:    min(18px, calc(18 / var(--bp) * 100vw)); }
.cta.bottom .text { padding-bottom: min(18px, calc(18 / var(--bp) * 100vw)); }

/* Fill block behind text */
.cta .text::after {
  background-color: var(--primary);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(0);
  transform-origin: 0 100%;
  transition: transform 0.3s var(--ease-out);
  width: 100%;
  z-index: -1;
}
.cta.bottom .text::after { transform-origin: 100% 0; }

/* Hover state */
.cta:hover .text { color: var(--secondary); }
.cta:hover .text::after { transform: scaleY(1); }
.cta.bottom:hover .text::after { transform-origin: 0 100%; }

/* Inverted (for dark backgrounds) */
.cta.is-reverted {
  --primary:   #fff;
  --secondary: var(--c-dark);
}

/* Full width */
.cta.full { width: 100%; text-align: left; }
.cta.left { text-align: left; }
.cta.center { text-align: center; }

/* ── BULLET ─────────────────────────────────────────────── */
.bullet {
  display: inline-block;
  width: min(14px, calc(14 / var(--bp) * 100vw));
  height: min(14px, calc(14 / var(--bp) * 100vw));
  background: var(--c-dark);
  border-radius: 50%;
  flex-shrink: 0;
}
.bullet--sm {
  width: min(10px, calc(10 / var(--bp) * 100vw));
  height: min(10px, calc(10 / var(--bp) * 100vw));
}

/* ── PLUS ICON ──────────────────────────────────────────── */
.plus-icon {
  display: inline-block;
  height: min(20px, calc(20 / var(--bp) * 100vw));
  width:  min(20px, calc(20 / var(--bp) * 100vw));
  position: relative;
}
.plus-icon span {
  background: var(--c-dark);
  height: min(20px, calc(20 / var(--bp) * 100vw));
  left: 0; right: 0; margin: auto;
  position: absolute;
  width: 2px;
}
.plus-icon span:last-child { transform: rotate(-90deg); }

/* ── SEE MORE ───────────────────────────────────────────── */
.see-more { margin-top: min(80px, calc(80 / var(--bp) * 100vw)); }
.see-more__wrapper { position: relative; }
.see-more__wrapper::before {
  background: linear-gradient(90deg, var(--c-dark) 10%, transparent 25%);
  background-size: 6px 1px;
  content: '';
  height: 1px;
  left: 0; position: absolute; top: 0; width: 100%;
}
.see-more__nav {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: min(20px, calc(20 / var(--bp) * 100vw));
}
.see-more__text { display: inline-block; }
.see-more__link {
  cursor: pointer;
  height: 100%; left: 0;
  position: absolute; top: 0; width: 100%; z-index: 1;
}
.see-more:hover { opacity: 0.7; }

/* ── NAV ────────────────────────────────────────────────── */
.app-header {
  align-items: center;
  display: flex;
  height: var(--navH);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  color: #fff;  /* transparent state = white text */
}
.app-header.is-solid { color: var(--c-dark); }

.app-header__wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 1;
}
.app-header__wrapper::after {
  background: linear-gradient(to right, currentColor 10%, transparent 25%);
  background-size: 6px 1px;
  bottom: 0; content: '';
  height: 1px; left: 0;
  opacity: 0;
  position: absolute; width: 100%;
  transition: opacity 0.4s;
}
.app-header.is-solid .app-header__wrapper::after { opacity: 0.2; }

/* Logo */
.app-header__logo { z-index: 1; display: flex; align-items: center; }
.logo-svg, .app-header__logo svg {
  width: min(160px, calc(160 / var(--bp) * 100vw));
  fill: currentColor;
  transition: opacity 0.3s;
}
.app-header__logo:hover svg { opacity: 0.7; }

/* Nav links (desktop) */
.app-header__nav { z-index: 1; }
.app-header__list { display: flex; gap: min(4px, calc(4 / var(--bp) * 100vw)); }

/* Background panel (white, slides in on scroll) */
.app-header__background {
  background: #fff;
  height: 100%; left: 0;
  position: absolute; top: 0;
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease-out);
  width: 100%; z-index: 0;
}
.app-header.is-solid .app-header__background { transform: translateY(0); }

/* Mobile burger */
.menu-btn {
  align-items: center;
  cursor: pointer;
  display: none;
  gap: min(8px, calc(8 / var(--bp) * 100vw));
  z-index: 1;
}
.menu-btn__icon {
  display: block;
  height: 12px;
  position: relative;
  width: 18px;
}
.menu-btn__bar {
  background: currentColor;
  height: 1.5px;
  left: 0;
  position: absolute;
  transition: transform 0.3s var(--ease-out);
  width: 100%;
}
.menu-btn__bar:first-child { top: 3px; }
.menu-btn__bar:last-child  { top: 9px; }
.app-header.menu-open .menu-btn__bar:first-child { transform: translateY(3px) rotate(45deg); }
.app-header.menu-open .menu-btn__bar:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 767px) {
  .menu-btn { display: flex; }
  .app-header__nav {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    background: #fff;
    color: var(--c-dark);
    padding-top: var(--navH);
    transform: translateY(-100%);
    transition: transform 0.7s var(--ease-out);
    z-index: 0;
    pointer-events: none;
  }
  .app-header.menu-open .app-header__nav {
    transform: translateY(0);
    pointer-events: all;
  }
  .app-header__list {
    flex-direction: column;
    align-items: center;
    gap: min(28px, calc(28 / var(--bp) * 100vw));
    padding: min(60px, calc(60 / var(--bp) * 100vw)) 0;
  }
}

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  background-color: var(--c-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: calc(var(--navH) * -1);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-bottom: min(56px, calc(56 / var(--bp) * 100vw));
  padding-top: calc(min(110px, calc(110 / var(--bp) * 100vw)) + var(--navH));
  position: relative;
}
@media (max-width: 767px) {
  .hero {
    padding-bottom: min(24px, calc(24 / var(--bp) * 100vw));
    padding-top: calc(min(50px, calc(50 / var(--bp) * 100vw)) + var(--navH));
  }
}

/* Slides container — full bleed */
.hero__slides, .hero__overlay {
  position: absolute;
  inset: 0;
}
.hero__slides { overflow: hidden; }
.hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,5,5,0.6) 0%,
    rgba(10,5,5,0.3) 40%,
    rgba(10,5,5,0.5) 100%
  );
  z-index: 1;
}

/* Individual slides */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
  overflow: hidden;
}
.hero__slide-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__slide.is-active .hero__slide-bg { transform: scale(1); }

/* Slide gradient images */
/* Hero slide backgrounds */
.sb-0 { background: radial-gradient(ellipse at 35% 60%, #c03030 0%, #6e1818 40%, #200808 75%, #0a0303 100%); }
.sb-1 { background: radial-gradient(ellipse at 65% 40%, #2858b0 0%, #143060 40%, #081020 75%, #030610 100%); }
.sb-2 { background: radial-gradient(ellipse at 50% 70%, #806035 0%, #4a3818 40%, #1a1408 75%, #080806 100%); }
.sb-3 { background: radial-gradient(ellipse at 25% 35%, #583878 0%, #2e1c44 40%, #100c1c 75%, #060408 100%); }

/* Hero content */
.hero__infos { position: relative; z-index: 2; }
.hero__headline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: min(20px, calc(20 / var(--bp) * 100vw));
}
.hero__headline a {
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.15s;
}
.hero__headline a:hover { opacity: 0.7; }
.icon-glyph {
  width: min(40px, calc(40 / var(--bp) * 100vw));
  height: auto;
  opacity: 0.6;
  fill: currentColor;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .icon-glyph { width: min(22px, calc(22 / var(--bp) * 100vw)); }
}
.hero__headline-copy { flex: 1; text-align: center; }

/* Large wordmark */
.hero__logo-wrap {
  margin: min(48px, calc(48 / var(--bp) * 100vw)) 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.hero__wordmark {
  font-family: 'Syne', Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  white-space: nowrap;
  display: block;
  width: 100%;
  /* JS will set exact font-size; this is the fallback */
  font-size: clamp(48px, 14vw, 200px);
}
@media (max-width: 767px) {
  .hero__logo-wrap { margin: min(20px, calc(20 / var(--bp) * 100vw)) 0; }
  .hero__wordmark  { font-size: clamp(36px, 12vw, 80px); }
}

/* Bottom row wrapping project info + nav */
.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* Featured project */
.hero__project {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  text-align: right;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .hero__bottom { flex-direction: column-reverse; gap: min(20px, calc(20 / var(--bp) * 100vw)); align-items: flex-start; }
  .hero__project {
    align-items: flex-start;
    text-align: left;
  }
}
.hero__project-title {
  margin-bottom: min(8px, calc(8 / var(--bp) * 100vw));
}
.hero__project-author {
  margin-bottom: min(16px, calc(16 / var(--bp) * 100vw));
}

/* Slide controls */
.hero__nav {
  align-items: center;
  display: flex;
  gap: min(16px, calc(16 / var(--bp) * 100vw));
  position: relative;
  z-index: 2;
}
.hero__nav-btn {
  color: #fff;
  cursor: pointer;
  font-size: min(18px, calc(18 / var(--bp) * 100vw));
  transition: opacity 0.15s;
}
.hero__nav-btn:hover { opacity: 0.6; }
.hero__nav-count { opacity: 0.6; }

/* ── ABOUT ──────────────────────────────────────────────── */
.about {
  padding-top: min(200px, calc(200 / var(--bp) * 100vw));
  padding-bottom: min(140px, calc(140 / var(--bp) * 100vw));
  align-items: flex-end;
}
@media (max-width: 1023px) {
  .about { padding-top: min(80px, calc(80 / var(--bp) * 100vw)); }
}
@media (max-width: 767px) {
  .about { padding-top: min(48px, calc(48 / var(--bp) * 100vw)); padding-bottom: min(48px, calc(48 / var(--bp) * 100vw)); }
  .about__cta { margin-top: min(32px, calc(32 / var(--bp) * 100vw)); }
}

.suptitle-row {
  align-items: center;
  display: flex;
  gap: min(20px, calc(20 / var(--bp) * 100vw));
  margin-bottom: min(80px, calc(80 / var(--bp) * 100vw));
}
@media (max-width: 767px) {
  .suptitle-row { margin-bottom: min(32px, calc(32 / var(--bp) * 100vw)); }
}

.about__rest { color: var(--c-muted); }
.about__rest em { color: var(--c-dark); font-style: italic; }

/* ── CAPABILITIES / CAP SECTION ─────────────────────────── */
.cap-section {
  background: var(--c-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--navH));
  position: relative;
  width: 100%;
}
@media (max-width: 639px) { .cap-section { height: 100vh; max-height: none; } }
@media (min-width: 640px) { .cap-section { aspect-ratio: 16 / 9; } }

.cap-section__header {
  align-items: center;
  padding-top: min(40px, calc(40 / var(--bp) * 100vw));
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
}
.cap-section__label {
  opacity: 0.6;
}
.cap-section__tabs {
  display: flex;
  gap: min(6px, calc(6 / var(--bp) * 100vw));
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Tab buttons */
.cap-tab {
  --slant: min(10px, calc(10 / var(--bp) * 100vw));
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  font-size: min(22px, calc(22 / var(--bp) * 100vw));
  font-style: italic;
  font-weight: 700;
  overflow: hidden;
  padding: 0 min(14px, calc(14 / var(--bp) * 100vw));
  position: relative;
  transition: color 0.3s var(--ease-out);
}
.cap-tab::after {
  background: var(--c-red);
  content: '';
  height: 100%;
  left: 0; top: 0;
  position: absolute;
  transform: translateY(100%);
  transition: transform 0.2s var(--ease-out);
  width: 100%;
  z-index: -1;
}
.cap-tab:hover, .cap-tab.is-active { color: #fff; }
.cap-tab.is-active::after,
.cap-tab:hover::after { transform: translateY(0); }

/* Slide */
.cap-slider { position: relative; flex: 1; }
.cap-slide {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.cap-slide.is-active { opacity: 1; pointer-events: all; }

.cap-slide__bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.cap-slide__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cap-slide__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
/* Capabilities slide backgrounds */
.cs-bg-0 { background: radial-gradient(ellipse at 40% 60%, #8a2020 0%, #4a1010 35%, #1a0808 70%, #0a0404 100%); }
.cs-bg-1 { background: radial-gradient(ellipse at 60% 40%, #183050 0%, #0c1a30 35%, #080e18 70%, #040810 100%); }
.cs-bg-2 { background: radial-gradient(ellipse at 50% 75%, #183828 0%, #0c2018 35%, #080e0c 70%, #040808 100%); }
.cs-bg-3 { background: radial-gradient(ellipse at 30% 30%, #301028 0%, #1c0818 35%, #0c0810 70%, #080408 100%); }

.cap-slide__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: min(56px, calc(56 / var(--bp) * 100vw));
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (max-width: 767px) {
  .cap-slide__content { flex-direction: column; gap: min(24px, calc(24 / var(--bp) * 100vw)); align-items: flex-start; }
}

.cap-slide__title {
  font-family: 'Syne', sans-serif;
  font-size: min(80px, calc(80 / var(--bp) * 100vw));
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  max-width: 60%;
}
@media (max-width: 1023px) {
  .cap-slide__title { font-size: min(52px, calc(52 / var(--bp) * 100vw)); max-width: 70%; }
}
@media (max-width: 767px) {
  .cap-slide__title { font-size: min(32px, calc(32 / var(--bp) * 100vw)); max-width: 100%; }
}

.cap-slide__info {
  max-width: min(320px, calc(320 / var(--bp) * 100vw));
  display: flex; flex-direction: column;
  gap: min(24px, calc(24 / var(--bp) * 100vw));
}
.cap-slide__info p { opacity: 0.7; line-height: 1.6; font-size: min(16px, calc(16 / var(--bp) * 100vw)); }

/* ── FILMS SECTION ──────────────────────────────────────── */
.films-section {
  padding-top: min(100px, calc(100 / var(--bp) * 100vw));
  padding-bottom: min(100px, calc(100 / var(--bp) * 100vw));
}
@media (max-width: 767px) {
  .films-section { padding-top: min(48px, calc(48 / var(--bp) * 100vw)); }
}

.films-section__header {
  align-items: flex-start;
  margin-bottom: min(40px, calc(40 / var(--bp) * 100vw));
  flex-wrap: nowrap;
}
.films-section__label {
  display: flex;
  align-items: center;
  gap: min(12px, calc(12 / var(--bp) * 100vw));
  padding-top: min(4px, calc(4 / var(--bp) * 100vw));
}
.films-section__filter {
  display: flex;
  gap: min(8px, calc(8 / var(--bp) * 100vw));
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .films-section__header { flex-direction: column; gap: min(16px, calc(16 / var(--bp) * 100vw)); }
  .films-section__label, .films-section__filter { width: 100%; }
  .films-section__filter { justify-content: flex-start; }
}

/* Filter buttons */
.filt {
  color: rgba(26,26,26,0.45);
  cursor: pointer;
  padding: min(4px, calc(4 / var(--bp) * 100vw)) min(10px, calc(10 / var(--bp) * 100vw));
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
}
.filt:hover { color: var(--c-dark); }
.filt.is-active { color: var(--c-red); border-bottom-color: var(--c-red); }

/* Film grid */
.films-grid {
  display: flex;
  flex-wrap: wrap;
  gap: min(60px, calc(60 / var(--bp) * 100vw)) var(--gut);
  align-items: flex-start;
}
@media (max-width: 767px) {
  .films-grid { gap: min(40px, calc(40 / var(--bp) * 100vw)); }
}

/* Film card */
.film-card {
  position: relative;
  width: calc((100% + var(--gut)) / 12 * 4 - var(--gut));
  transition: opacity 0.3s;
}
.film-card--large {
  width: calc((100% + var(--gut)) / 12 * 8 - var(--gut));
}
.film-card--tall .film-card__thumb::before { padding-top: 130%; }

@media (max-width: 1023px) {
  .film-card { width: calc((100% + var(--gut)) / 12 * 6 - var(--gut)); }
  .film-card--large { width: 100%; }
}
@media (max-width: 767px) {
  .film-card, .film-card--large { width: 100%; }
}

.film-card__link {
  bottom: 0; height: 100%; left: 0;
  position: absolute; right: 0; top: 0; width: 100%;
  z-index: 2;
}

/* Hover effects */
.film-card:hover .film-card__title,
.film-card:hover .film-card__excerpt { opacity: 0.65; }
.film-card:hover .film-card__thumb::after {
  box-shadow: inset 0 0 0 min(8px, calc(8 / var(--bp) * 100vw)) #fff;
}

/* Thumbnail */
.film-card__thumb {
  margin-bottom: min(16px, calc(16 / var(--bp) * 100vw));
  position: relative;
  overflow: hidden;
}
.film-card__thumb::before {
  content: ''; display: block; padding-top: 62%;
}
.film-card__thumb::after {
  box-shadow: inset 0 0 0 0 #fff;
  content: '';
  display: block;
  height: 100%; left: 0;
  position: absolute; top: 0;
  transition: box-shadow 0.2s ease;
  width: 100%; z-index: 1;
}
.film-card__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
}
.film-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.film-card:hover .film-card__img { transform: scale(1.03); }

/* Film card image gradients */
.fi-0 { background: radial-gradient(ellipse at 40% 55%, #b83030 0%, #681818 40%, #200808 75%, #0c0404 100%); }
.fi-1 { background: radial-gradient(ellipse at 55% 45%, #305898 0%, #182e54 40%, #080e20 75%, #030610 100%); }
.fi-2 { background: radial-gradient(ellipse at 45% 65%, #2a7850 0%, #154030 40%, #081810 75%, #040808 100%); }
.fi-3 { background: radial-gradient(ellipse at 60% 35%, #786038 0%, #423414 40%, #181204 75%, #080806 100%); }
.fi-4 { background: radial-gradient(ellipse at 35% 55%, #a02828 0%, #581414 40%, #180808 75%, #0c0404 100%); }
.fi-5 { background: radial-gradient(ellipse at 50% 60%, #7a5820 0%, #42300c 40%, #180e04 75%, #080604 100%); }

/* Film card header */
.film-card__header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: min(10px, calc(10 / var(--bp) * 100vw));
  justify-content: space-between;
  padding-top: min(28px, calc(28 / var(--bp) * 100vw));
  position: relative;
  margin-bottom: min(12px, calc(12 / var(--bp) * 100vw));
}
.film-card__header::before {
  background: linear-gradient(90deg, var(--c-dark) 10%, transparent 25%);
  background-size: 6px 1px;
  content: ''; height: 1px;
  left: 0; position: absolute; top: 0; width: 100%;
}
.film-card__header time { margin-left: auto; }

/* Separator bars */
.film-card__sep {
  display: flex;
  align-items: center;
  gap: 3px;
  height: min(10px, calc(10 / var(--bp) * 100vw));
  margin-right: min(6px, calc(6 / var(--bp) * 100vw));
}
.film-card__sep span {
  background: var(--c-dark);
  display: block;
  height: 100%;
  width: 2px;
}

.film-card__title  { transition: opacity 0.15s; }
.film-card__excerpt {
  margin-top: min(16px, calc(16 / var(--bp) * 100vw));
  transition: opacity 0.15s;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--c-muted);
}
.film-card__btn {
  margin-top: min(32px, calc(32 / var(--bp) * 100vw));
  z-index: 3;
  position: relative;
}

/* Film card hidden/visible for filter */
.film-card.is-hidden {
  display: none;
}

/* ── NEWS SECTION ───────────────────────────────────────── */
.news-section {
  background: var(--c-off);
  padding-top: min(80px, calc(80 / var(--bp) * 100vw));
  padding-bottom: min(120px, calc(120 / var(--bp) * 100vw));
}
@media (max-width: 639px) {
  .news-section { padding-top: min(40px, calc(40 / var(--bp) * 100vw)); }
}

.news-section__header {
  align-items: center;
  margin-bottom: min(40px, calc(40 / var(--bp) * 100vw));
}
.news-section__label {
  display: flex;
  align-items: center;
  gap: min(12px, calc(12 / var(--bp) * 100vw));
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: min(60px, calc(60 / var(--bp) * 100vw)) var(--gut);
  align-items: flex-start;
}

/* News card */
.news-card {
  position: relative;
  width: calc((100% + var(--gut)) / 12 * 4 - var(--gut));
}
.news-card--large {
  width: calc((100% + var(--gut)) / 12 * 8 - var(--gut));
}
@media (max-width: 1023px) {
  .news-card { width: calc((100% + var(--gut)) / 12 * 6 - var(--gut)); }
  .news-card--large { width: 100%; }
}
@media (max-width: 767px) {
  .news-card, .news-card--large { width: 100%; }
}

.news-card__link {
  bottom: 0; height: 100%; left: 0;
  position: absolute; right: 0; top: 0; width: 100%; z-index: 2;
}
.news-card:hover .news-card__title,
.news-card:hover .news-card__excerpt { opacity: 0.65; }
.news-card:hover .news-card__thumb::after {
  box-shadow: inset 0 0 0 min(8px, calc(8 / var(--bp) * 100vw)) #fff;
}

.news-card__thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: min(16px, calc(16 / var(--bp) * 100vw));
}
.news-card__thumb::before { content: ''; display: block; padding-top: 62%; }
.news-card--large .news-card__thumb::before { padding-top: 55%; }
.news-card__thumb::after {
  box-shadow: inset 0 0 0 0 #fff;
  content: ''; display: block;
  height: 100%; left: 0; position: absolute; top: 0;
  transition: box-shadow 0.2s ease;
  width: 100%; z-index: 1;
}
.news-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s var(--ease-out);
  overflow: hidden;
}
.news-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.news-card:hover .news-card__img { transform: scale(1.03); }

/* News card image gradients */
.ni-0 { background: radial-gradient(ellipse at 45% 55%, #b02828 0%, #601414 40%, #1c0808 75%, #0a0404 100%); }
.ni-1 { background: radial-gradient(ellipse at 55% 45%, #245088 0%, #122848 40%, #080e1c 75%, #03060e 100%); }
.ni-2 { background: radial-gradient(ellipse at 40% 65%, #686040 0%, #383410 40%, #120e04 75%, #080806 100%); }

.news-card__header {
  align-items: center;
  display: flex;
  gap: min(8px, calc(8 / var(--bp) * 100vw));
  justify-content: space-between;
  padding-top: min(24px, calc(24 / var(--bp) * 100vw));
  position: relative;
  margin-bottom: min(12px, calc(12 / var(--bp) * 100vw));
}
.news-card__header::before {
  background: linear-gradient(90deg, var(--c-dark) 10%, transparent 25%);
  background-size: 6px 1px;
  content: ''; height: 1px;
  left: 0; position: absolute; top: 0; width: 100%;
}
.news-card__header time { margin-left: auto; }

.news-card__title, .news-card__excerpt { transition: opacity 0.15s; }
.news-card__excerpt {
  margin-top: min(12px, calc(12 / var(--bp) * 100vw));
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__btn {
  margin-top: min(32px, calc(32 / var(--bp) * 100vw));
  z-index: 3; position: relative;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.app-footer {
  background: var(--c-dark);
  color: #fff;
  padding-top: min(60px, calc(60 / var(--bp) * 100vw));
  padding-bottom: min(420px, calc(420 / var(--bp) * 100vw));
  position: relative;
}
@media (max-width: 639px) {
  .app-footer { padding-bottom: min(300px, calc(300 / var(--bp) * 100vw)); }
}

.footer-nav {
  display: flex;
  gap: var(--gut);
  flex-wrap: wrap;
  padding-bottom: min(60px, calc(60 / var(--bp) * 100vw));
}
.footer-col { flex: 1; min-width: 160px; }
.footer-col--nl { flex: 2; min-width: 260px; }

.footer-col__title {
  color: rgba(255,255,255,0.5);
  margin-bottom: min(20px, calc(20 / var(--bp) * 100vw));
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col__title::before {
  content: '';
  display: inline-block;
  width: min(12px, calc(12 / var(--bp) * 100vw));
  height: min(12px, calc(12 / var(--bp) * 100vw));
  background: var(--c-red);
  border-radius: 50%;
}

/* Newsletter form */
.nl-form {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  width: fit-content;
  min-width: 280px;
}
.nl-input {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: max(10px, min(12px, calc(12 / var(--bp) * 100vw)));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 min(12px, calc(12 / var(--bp) * 100vw)) min(8px, calc(8 / var(--bp) * 100vw)) 0;
  outline: none;
  flex: 1;
}
.nl-input::placeholder { color: rgba(255,255,255,0.4); transition: color 0.15s; }
.nl-input:hover::placeholder { color: rgba(255,255,255,0.2); }
.nl-btn {
  color: #fff;
  cursor: pointer;
  padding-bottom: min(8px, calc(8 / var(--bp) * 100vw));
  transition: opacity 0.15s;
  white-space: nowrap;
}
.nl-btn:hover { opacity: 0.5; }
.nl-confirm {
  color: var(--c-red);
  margin-top: min(10px, calc(10 / var(--bp) * 100vw));
  display: block;
}

.footer-list { display: flex; flex-direction: column; gap: min(12px, calc(12 / var(--bp) * 100vw)); }
.footer-list a, .footer-cookie-btn {
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: opacity 0.15s;
}
.footer-list a:hover, .footer-cookie-btn:hover { opacity: 0.5; }
.footer-cookie-btn {
  appearance: none; -webkit-appearance: none;
  background: none; border: none;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Large wordmark at bottom */
.footer-large-logo {
  bottom: min(90px, calc(90 / var(--bp) * 100vw));
  font-family: 'Syne', sans-serif;
  font-size: min(140px, calc(140 / var(--bp) * 100vw));
  font-weight: 800;
  left: 0;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.06;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 767px) {
  .footer-large-logo { font-size: min(70px, calc(70 / var(--bp) * 100vw)); bottom: min(60px, calc(60 / var(--bp) * 100vw)); }
}

/* Offices row */
.footer-offices {
  bottom: min(30px, calc(30 / var(--bp) * 100vw));
  display: flex;
  flex-wrap: wrap;
  gap: min(6px, calc(6 / var(--bp) * 100vw)) min(20px, calc(20 / var(--bp) * 100vw));
  justify-content: center;
  left: 0; position: absolute; right: 0;
  color: rgba(255,255,255,0.35);
}

/* ── ANIMATIONS & REVEALS ───────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scrollFill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Marquee not in this HTML but keeping for reference */

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}