/* ========== Fonts ========== */
@font-face {
  font-family: "Phonk";
  src: url("assets/Phonk-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Phonk Contrast";
  src: url("assets/Phonk-Contrast.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --font-display: "Anton", "Phonk", system-ui, sans-serif;
  --font-display-contrast: "Anton", "Phonk Contrast", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --c-petrole: #0e2b34;
  --c-petrole-deep: #08191f;
  --c-glacier: #aff0f0;
  --c-sunset: #c0341a;          /* deeper, more premium red */
  --c-sunset-soft: #d9462a;
  --c-paille: #fce99a;
  --c-cream: #f6f1e8;
  --c-ink: #0a1418;
  --c-bone: #ece4d6;
  --c-line: rgba(255, 255, 255, 0.10);

  --c-accent: var(--c-sunset);
  --c-accent-ink: #ffffff;

  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 9vw, 140px);

  /* Refined arrow icon used by every .btn-arrow (CTAs sitewide) */
  --arrow-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M0 6 H24 M18 1 L24 6 L18 11'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-petrole);
  color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* ========== Site-wide cursor spotlight (disabled) ========== */
.site-spotlight { display: none !important; }

/* ========== (legacy custom cursor classes — unused, kept harmless) ========== */
.cursor-dot, .cursor-ring { display: none !important; }

/* ========== Type ========== */
.eyebrow {
  font-family: var(--font-display);
  font-size: 34px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-accent);
}
h2, h3, h4 { text-wrap: balance; }

/* ========== Buttons — iOS Tahoe liquid glass, applied site-wide ========== */
/* Translucent brand tint, backdrop blur + saturate for the frosted look,    */
/* hairline white border, soft inset top-edge highlight, gentle halo.        */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  text-decoration: none;
  background: rgba(192, 52, 26, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  color: #fff;
  white-space: nowrap;
  box-shadow:
    0 10px 28px -10px rgba(192, 52, 26, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition:
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover {
  background: rgba(217, 70, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 14px 36px -10px rgba(192, 52, 26, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.btn-sm { padding: 11px 18px; font-size: 12px; }

/* Clear-glass secondary — neutral frosted look, no brand tint. */
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--c-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--c-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* Arrows are hidden on glass buttons — the glass IS the affordance. */
.btn-arrow { display: none; }

/* ========== Layout ========== */
.container {
  width: 100%; max-width: 1640px; margin: 0 auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-y); position: relative; }
/* Anchor-scroll offset so the fixed nav doesn't cover section titles */
section[id] { scroll-margin-top: 110px; }
#top { scroll-margin-top: 0; }

/* ========== Nav ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* Feathered fade — extends transparency further so the bottom edge dissolves */
  background: linear-gradient(to bottom,
    rgba(8,25,31,0.72) 0%,
    rgba(8,25,31,0.45) 40%,
    rgba(8,25,31,0.12) 75%,
    rgba(8,25,31,0) 100%);
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.4s ease;
}
.nav.is-scrolled {
  background: rgba(8,25,31,0.90);
  backdrop-filter: blur(14px);
  padding-block: 10px;
  border-bottom: 0;
  /* Replaces the hard 1px line with a softly dragged drop shadow */
  box-shadow:
    0 14px 28px -18px rgba(0,0,0,0.55),
    0 28px 56px -32px rgba(0,0,0,0.28);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img {
  height: 88px; width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
  transition: height 0.3s ease;
}
.nav.is-scrolled .nav-logo img { height: 60px; }
.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 16px; letter-spacing: 0.03em;
  color: var(--c-cream); text-decoration: none;
  position: relative; padding-block: 4px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0; background: var(--c-accent);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 2px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.1em;
}
.lang-toggle button {
  background: transparent; border: 0; color: var(--c-cream);
  padding: 6px 10px; border-radius: 2px;
  font: inherit; text-transform: uppercase;
}
.lang-toggle button.active { background: var(--c-cream); color: var(--c-ink); }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ========== Sticky CTA ========== */
.sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  background: rgba(192, 52, 26, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  border-radius: 999px; padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow:
    0 14px 36px -12px rgba(192, 52, 26, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  opacity: 0; transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-cta:hover {
  background: rgba(217, 70, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 18px 44px -12px rgba(192, 52, 26, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); }
.sticky-cta::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; animation: pulse 1.6s ease infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

/* ========== Hero ========== */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 140px var(--gutter) 80px;
  position: relative; overflow: hidden;
  text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  margin-bottom: -80px;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(8,25,31,0.35) 0%, rgba(8,25,31,0.65) 60%, rgba(8,25,31,0.92) 100%);
}
/* Organic colored blobs in brand palette — soft + blurred */
.hero-blobs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: 0.55;
  mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite;
}
.blob-1 { width: 60vw; height: 60vw; left: -18vw; top: -10vw; background: var(--c-sunset); opacity: 0.45; }
.blob-2 { width: 55vw; height: 55vw; right: -14vw; top: 12vw; background: var(--c-petrole); opacity: 0.7; animation-delay: -8s; }
.blob-3 { width: 45vw; height: 45vw; left: 30vw; bottom: -16vw; background: var(--c-paille); opacity: 0.32; animation-delay: -14s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(4vw, -3vw) scale(1.08); }
  66% { transform: translate(-3vw, 5vw) scale(0.96); }
}
/* ========== Unified single-block backgrounds ==========
   Every section is transparent — the body owns the canvas. */
.formats { background: transparent; }
.showcase { background: transparent; }
.process {
  background: transparent;
  text-align: center;
}
.contact { background: transparent; }
.footer { background: transparent; border-top: 1px solid var(--c-line); }
.stats {
  background: transparent;
  padding-block: 56px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logos { background: transparent; }

/* Single body canvas — works for both video and neon modes */
body {
  background: var(--c-petrole-deep);
}
body[data-bg="video"] {
  background: var(--c-petrole-deep);
}
body[data-bg="neon"] {
  background: #050507;
}

/* ========== Neon hero background ========== */
.hero-bg-neon {
  background: #050507;
}
.hero-bg-neon::before { display: none; }
.hero-neon {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  pointer-events: none;
}
.neon-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  opacity: 0.5;
}
.neon-shape {
  position: absolute;
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: neon-drift 24s ease-in-out infinite;
  will-change: transform;
}
.neon-1 {
  width: 38vw; height: 38vw;
  left: -8vw; top: 8vw;
  background: radial-gradient(circle, #ff3b1c 0%, #c0341a 40%, transparent 70%);
  opacity: 0.55;
  border-radius: 50%;
}
.neon-2 {
  width: 32vw; height: 32vw;
  right: -6vw; top: 4vw;
  background: radial-gradient(circle, #6df0f0 0%, #2db4c4 50%, transparent 75%);
  opacity: 0.32;
  border-radius: 50%;
  animation-delay: -7s;
  animation-duration: 28s;
}
.neon-3 {
  width: 30vw; height: 30vw;
  left: 32vw; bottom: -10vw;
  background: radial-gradient(circle, #ffd84d 0%, #f5a524 60%, transparent 80%);
  opacity: 0.22;
  border-radius: 50%;
  animation-delay: -14s;
  animation-duration: 32s;
}
.neon-4 {
  width: 24vw; height: 24vw;
  right: 18vw; bottom: 8vw;
  background: radial-gradient(circle, #ff7a4d 0%, transparent 70%);
  opacity: 0.38;
  border-radius: 50%;
  animation-delay: -3s;
  animation-duration: 20s;
}
@keyframes neon-drift {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  25%  { transform: translate(6vw, -4vw) scale(1.15) rotate(20deg); }
  50%  { transform: translate(-3vw, 5vw) scale(0.92) rotate(-10deg); }
  75%  { transform: translate(4vw, 3vw) scale(1.05) rotate(8deg); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
.hero-bg-neon::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 95%);
}

/* ========== Site-wide neon ambience — big diffuse red + blue halos drifting weightlessly ==========
   IMPORTANT: halos live in dedicated top-level <div>s (injected by halo-tweaks.js), NOT body
   pseudo-elements. Reason: body has `position: relative` and we use mix-blend-mode on the halos —
   that combination turns `position: fixed` into "absolute relative to body", which causes the
   halos to scroll with the page. The dedicated divs sit at <body> level with no positioned
   ancestor, so they stay viewport-locked. */
body {
  position: relative;
}
body::before, body::after { content: none; }

.site-halo-stage {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Force the stage onto its own GPU compositor layer.
     Without this, some browsers briefly lag fixed elements during fast scrolling,
     making them visually "scroll with the page" until the next paint. */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.site-halo {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
body[data-bg="neon"] .site-halo,
body[data-bg="tiles"] .site-halo {
  opacity: var(--halo-opacity, 0.3);
}

/* Pre-rendered radial PNGs — smooth 8-bit alpha falloff, no GPU blur quantization.
   Red anchors upper-left, blue anchors mid-right — both shifted a bit lower on the page. */
.site-halo-red {
  width: 90vw; height: 90vw;
  left: -25vw; top: 20vh;
  background: url("assets/halo-red.png") center / 100% 100% no-repeat;
  animation: halo-float-red calc(140s / var(--halo-speed, 5)) ease-in-out infinite;
}
.site-halo-blue {
  width: 85vw; height: 85vw;
  right: -22vw; top: 60vh;
  background: url("assets/halo-blue.png") center / 100% 100% no-repeat;
  animation: halo-float-blue calc(170s / var(--halo-speed, 5)) ease-in-out infinite;
}

/* Noise overlay disabled — PNG halos are already perfectly smooth, the noise
   was only needed when we used filter: blur(). Keeping the rule structure here
   for posterity but with content: none. */
body[data-bg="neon"] {
  background: #050507;
}

/* All sections fully transparent in neon/tiles mode — single canvas, zero seams */
body[data-bg="neon"] .hero,
body[data-bg="neon"] .formats,
body[data-bg="neon"] .showcase,
body[data-bg="neon"] .process,
body[data-bg="neon"] .contact,
body[data-bg="neon"] .stats,
body[data-bg="neon"] .logos,
body[data-bg="neon"] .footer,
body[data-bg="tiles"] .hero,
body[data-bg="tiles"] .formats,
body[data-bg="tiles"] .showcase,
body[data-bg="tiles"] .process,
body[data-bg="tiles"] .contact,
body[data-bg="tiles"] .stats,
body[data-bg="tiles"] .logos,
body[data-bg="tiles"] .footer {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
body[data-bg="neon"] .stats,
body[data-bg="tiles"] .stats { box-shadow: none; }
body[data-bg="neon"] .format-card,
body[data-bg="tiles"] .format-card { background: rgba(20,20,24,0.45); }

/* Halos now live in dedicated top-level divs (see .site-halo above) — pseudo-elements removed. */
@keyframes halo-float-red {
  0%   { transform: translate(0, 0)               scale(1);    }
  20%  { transform: translate(18vw, 12vh)         scale(1.18); }
  40%  { transform: translate(40vw, 30vh)         scale(0.92); }
  60%  { transform: translate(22vw, 55vh)         scale(1.10); }
  80%  { transform: translate(-8vw, 35vh)         scale(1.22); }
  100% { transform: translate(0, 0)               scale(1);    }
}
@keyframes halo-float-blue {
  0%   { transform: translate(0, 0)               scale(1);    }
  25%  { transform: translate(-22vw, 18vh)        scale(1.20); }
  50%  { transform: translate(-44vw, -10vh)       scale(0.90); }
  75%  { transform: translate(-12vw, 40vh)        scale(1.12); }
  100% { transform: translate(0, 0)               scale(1);    }
}

/* Body base color for tiles mode (matches neon's deep canvas) */
body[data-bg="tiles"] {
  background: #050507 fixed;
}

.hero-content {
  position: relative; z-index: 3;
  max-width: 1280px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero-eyebrow {
  font-size: 22px; letter-spacing: 0.24em;
  color: rgba(246,241,232,0.55);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.92; letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
  text-shadow:
    0 8px 72px rgba(255, 220, 180, 0.10),
    0 12px 36px rgba(0,0,0,0.25);
}
.hero h1 .accent {
  color: var(--c-accent);
  font-family: var(--font-display-contrast);
  font-style: normal;
  /* Backlit feel: warm scatter under the letters + wider deep-red halo behind */
  text-shadow:
    0 0 6px  rgba(255,170,120,0.055),
    0 0 22px rgba(255,110, 60,0.06),
    0 0 56px rgba(192, 52, 26,0.055),
    0 0 110px rgba(192, 52, 26,0.035);
}
.hero-sub {
  font-size: clamp(17px, 1.35vw, 23px);
  line-height: 1.5;
  color: rgba(246,241,232,0.85);
  max-width: 56ch;
  margin: 0;
}
.hero-sub em {
  font-style: normal;
}
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ========== Floating hero video tiles ========== */
.hero-tiles {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-tile {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05),
    0 16px 90px rgba(192,52,26,0.10);
  opacity: 0.7;
  animation: tile-float 14s ease-in-out infinite;
  will-change: transform;
}
.hero-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: contrast(1.05) saturate(1.05);
}
.hero-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(5,5,7,0.45) 100%);
}
.tile-1 {
  width: 22vw; max-width: 320px; aspect-ratio: 16/9;
  top: 10vh; left: 4vw;
  transform: rotate(-3deg);
  animation-delay: -2s;
}
.tile-2 {
  width: 16vw; max-width: 220px; aspect-ratio: 9/16;
  top: 6vh; right: 5vw;
  transform: rotate(4deg);
  animation-delay: -7s;
}
.tile-3 {
  width: 18vw; max-width: 260px; aspect-ratio: 4/5;
  bottom: 8vh; left: 7vw;
  transform: rotate(2deg);
  animation-delay: -4s;
}
.tile-4 {
  width: 20vw; max-width: 290px; aspect-ratio: 16/9;
  bottom: 6vh; right: 4vw;
  transform: rotate(-2deg);
  animation-delay: -10s;
}
@keyframes tile-float {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -16px; }
}
@media (max-width: 980px) {
  .hero-tiles { display: none; }
}

/* ========== Hero variant: Tile Mosaic (vertical marquee columns) ========== */
/* Layered over the neon hero — tiles let neon glow bleed through */
.hero-mosaic {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  pointer-events: none;
  /* Slight desaturation + screen blend lets the neon ambient color the tiles */
  mix-blend-mode: normal;
}
.hero-mosaic-grid {
  position: absolute;
  /* slightly oversize so edges of tilted columns don't show seams */
  inset: -8% -4%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  /* gentle tilt for cinematic feel — different from a flat bento grid */
  transform: rotate(-6deg) scale(1.18);
  transform-origin: 50% 50%;
}
.mc {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 2px;
}
.mc-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
  animation-duration: var(--dur, 50s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay, 0s);
}
.mc-up   .mc-track { animation-name: mc-scroll-up; }
.mc-down .mc-track { animation-name: mc-scroll-down; }
@keyframes mc-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes mc-scroll-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
.mc-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d10;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 1px rgba(192,52,26,0.10),
    0 24px 48px -24px rgba(0,0,0,0.8);
  opacity: 0.82;
}
.mc-tile video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.05) saturate(0.92) brightness(0.85);
}
.mc-tile::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,7,0.15) 0%, rgba(5,5,7,0) 40%, rgba(5,5,7,0.5) 100%);
}
/* Vary aspect/size every 3rd tile so columns don't look stamped */
.mc-track > .mc-tile:nth-child(3n)   { aspect-ratio: 4 / 5; }
.mc-track > .mc-tile:nth-child(4n+2) { aspect-ratio: 1 / 1; }

/* Center scrim — soft radial dim so headline pops; accent glow at base */
.hero-mosaic-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(5,5,7,0.78) 0%, rgba(5,5,7,0.55) 35%, rgba(5,5,7,0.15) 70%, rgba(5,5,7,0) 100%),
    linear-gradient(180deg, rgba(5,5,7,0.55) 0%, rgba(5,5,7,0) 25%, rgba(5,5,7,0) 75%, rgba(5,5,7,0.85) 100%);
}
.hero-bg-tiles::after { display: none; }
/* Cursor spotlight: in tiles mode, brighten under cursor through the dim */
.hero-bg-tiles .hero-mosaic-scrim {
  -webkit-mask: radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(0,0,0,0.55), rgba(0,0,0,1) 70%);
          mask: radial-gradient(circle 280px at var(--mx,50%) var(--my,50%), rgba(0,0,0,0.55), rgba(0,0,0,1) 70%);
}
@media (max-width: 980px) {
  .hero-mosaic-grid { grid-template-columns: repeat(3, 1fr); transform: rotate(-4deg) scale(1.25); }
  .hero-mosaic-grid > .mc:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-track { animation: none; }
}

/* ========== Section header ========== */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: clamp(40px, 5vw, 80px);
  align-items: end;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 7.5vw, 128px);
  line-height: 1; letter-spacing: 0;
  margin: 0;
}
.section-head h2 em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015);
}
.section-sub {
  margin: 18px 0 0;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.55;
  color: rgba(246,241,232,0.7);
  max-width: 50ch;
}
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

.stats {
  background: transparent;
  padding-block: clamp(120px, 12vw, 200px) clamp(40px, 5vw, 80px);
  border-top: 0;
  border-bottom: 0;
}
.stats .container {
  position: relative;
  background: #0a0a0c;
  border-radius: 80px;
  padding: 44px 56px;
  max-width: 1180px;
  margin-inline: auto;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px -20px rgba(0,0,0,0.5);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
}
.stat {
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 22px;
  border-left: 1px solid rgba(246,241,232,0.14);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .num {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 0.9; letter-spacing: -0.04em;
  display: flex; align-items: baseline; gap: 6px;
  color: var(--c-cream);
}
.stat .num-big {
  font-size: clamp(48px, 5.5vw, 88px);
  font-weight: 200;
}
.stat .num-unit {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 32px);
  color: var(--c-accent);
  letter-spacing: 0;
}
.stat .label {
  font-size: 13px; line-height: 1.45;
  color: rgba(246,241,232,0.62);
  max-width: 26ch;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
.stat .source {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.34);
  max-width: 26ch;
}
@media (max-width: 820px) {
  .stats .container { padding: 28px; border-radius: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat { border-left: 0; padding-left: 0; }
}
@media (max-width: 820px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ========== Format Reel (16:9 → 4:5 → 9:16 morph) ========== */
.reel-formats {
  padding-block: clamp(60px, 7vw, 110px);
  background: transparent;
  position: relative;
  z-index: 1;
}
.reel-formats-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
  text-align: center;
}
.reel-formats-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1; letter-spacing: 0;
  margin: 8px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.reel-formats-title em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
}
.reel-formats-stage {
  position: relative;
  width: 100%;
  /* Reserve enough height for the tallest aspect (9:16) at typical widths */
  height: clamp(420px, 60vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel-formats-frame {
  position: relative;
  height: 100%;
  /* Width follows aspect-ratio; height fills stage. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 32px 80px -28px rgba(0,0,0,0.7);
  animation: reel-morph 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: aspect-ratio;
}
.reel-formats-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Morph 16:9 → 4:5 → 9:16 → back to 16:9, holding each shape briefly */
@keyframes reel-morph {
  0%,   18%  { aspect-ratio: 16 / 9; }
  33%,  51%  { aspect-ratio: 4 / 5; }
  66%,  84%  { aspect-ratio: 9 / 16; }
  100%       { aspect-ratio: 16 / 9; }
}
/* Aspect badges that switch in sync */
.reel-formats-labels {
  position: absolute;
  top: 16px; right: 50%;
  transform: translateX(50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.rfl {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.rfl-1 { animation: rfl-on-1 9s linear infinite; }
.rfl-2 { animation: rfl-on-2 9s linear infinite; }
.rfl-3 { animation: rfl-on-3 9s linear infinite; }
@keyframes rfl-on-1 {
  0%,   25%  { color: #fff; background: rgba(192,52,26,0.7); border-color: rgba(255,255,255,0.3); }
  26%, 100%  { color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.12); }
}
@keyframes rfl-on-2 {
  0%,   25%  { color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.12); }
  33%,  58%  { color: #fff; background: rgba(192,52,26,0.7); border-color: rgba(255,255,255,0.3); }
  59%, 100%  { color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.12); }
}
@keyframes rfl-on-3 {
  0%,   58%  { color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.12); }
  66%,  92%  { color: #fff; background: rgba(192,52,26,0.7); border-color: rgba(255,255,255,0.3); }
  93%, 100%  { color: rgba(255,255,255,0.45); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.12); }
}
@media (max-width: 820px) {
  .reel-formats-stage { height: clamp(360px, 70vh, 560px); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-formats-frame { animation: none; aspect-ratio: 4 / 5; }
  .rfl { animation: none; }
}

/* ========== Formats — creative asymmetric grid ========== */
.formats { background: var(--c-petrole); }
.formats-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 18px;
}
.format-card {
  position: relative; overflow: hidden;
  border-radius: 2px;
  text-decoration: none; color: var(--c-cream);
  background: var(--c-petrole-deep);
  display: block;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 24px 56px -18px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.format-card:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 32px 72px -18px rgba(0,0,0,0.6);
}
.format-thumb { position: absolute; inset: 0; }
.format-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: brightness(0.6) saturate(0.9);
}
.format-card:hover .format-thumb img {
  transform: scale(1.06);
  filter: brightness(0.8) saturate(1);
}
.format-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,25,31,0) 50%, rgba(8,25,31,0.85) 100%);
}
.format-meta {
  position: absolute; left: 22px; right: 22px; bottom: 18px;
  z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.format-tag {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-paille);
  opacity: 0.85;
}
.format-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.05; letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
/* Asymmetric layout: 7 items, masonry-feel */
.format-card-0 { grid-column: span 5; grid-row: span 2; }
.format-card-1 { grid-column: span 4; grid-row: span 2; }
.format-card-2 { grid-column: span 3; grid-row: span 2; }
.format-card-3 { grid-column: span 4; }
.format-card-4 { grid-column: span 4; }
.format-card-5 { grid-column: span 4; }
.format-card-6 { grid-column: span 12; grid-row: span 2; }
@media (max-width: 1100px) {
  .formats-grid { grid-template-columns: repeat(6, 1fr); }
  .format-card { grid-column: span 3 !important; grid-row: span 1 !important; }
}
@media (max-width: 600px) {
  .formats-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .format-card { grid-column: span 1 !important; }
}

/* ========== Showcase — creative tile layout, no dividers, no numbers ========== */
.showcase { background: var(--c-petrole-deep); }
/* ========== Showcase — dedicated case-study page ========== */
.showcase-page {
  padding-top: clamp(140px, 14vw, 200px);
  padding-bottom: clamp(80px, 9vw, 140px);
}
.showcase-head {
  text-align: center;
  margin-bottom: clamp(60px, 7vw, 120px);
}
.showcase-head h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 8vw, 144px);
  line-height: 1; letter-spacing: 0;
  margin: 12px auto 0;
  max-width: 18ch;
  text-wrap: balance;
}
.showcase-head h1 em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015);
}
.showcase-page-sub {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.55;
  color: rgba(246,241,232,0.72);
}

.case-studies {
  display: grid;
  gap: clamp(80px, 9vw, 140px);
}
.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.case-study:nth-child(even) .case-media { order: 2; }
.case-media {
  position: relative; overflow: hidden;
  display: block;
  aspect-ratio: 16/10;
  background: #000;
  border-radius: 16px;
  text-decoration: none;
  box-shadow:
    0 32px 80px -28px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.05);
}
.case-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.case-media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.case-media:hover img { transform: scale(1.04); filter: brightness(0.85); }
.case-media:hover::before { opacity: 1; }

/* Glass play button overlay on the thumbnail */
.case-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 84px; height: 84px;
  margin-top: -42px; margin-left: -42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}
.case-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.case-media:hover .case-play { opacity: 1; transform: scale(1); }

.case-body { display: flex; flex-direction: column; gap: 24px; }
.case-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.05; letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.case-rows { display: grid; gap: 18px; }
.case-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(246,241,232,0.10);
}
.case-label {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.case-row p {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(246,241,232,0.82);
}
.case-row--results p {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  letter-spacing: 0;
  color: #ffffff;
}

@media (max-width: 900px) {
  .case-study { grid-template-columns: 1fr; gap: 24px; }
  .case-study:nth-child(even) .case-media { order: 0; }
  .case-row { grid-template-columns: 1fr; gap: 6px; }
}

/* CTA below Formats grid linking to the realisations page */
.formats-cta {
  display: flex; justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

/* ========== Process — short, sexy, KPI-driven ========== */
.process {
  background: transparent;
  text-align: center;
}
.process-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.process h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 8vw, 132px);
  line-height: 1; letter-spacing: 0;
  margin: 8px 0 0;
  text-wrap: balance;
}
.process h2 em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015);
}
.process-sub {
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55;
  color: rgba(246,241,232,0.75);
  max-width: 60ch;
  margin: 0;
}
.process-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  width: 100%;
}
.process-kpi {
  border-top: 1px solid var(--c-line);
  padding-top: 20px;
  text-align: left;
}
.process-kpi-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--c-cream);
  text-transform: lowercase;
}
.process-kpi-label {
  font-size: 13px; line-height: 1.4;
  color: rgba(246,241,232,0.6);
  margin-top: 10px;
  max-width: 28ch;
}
@media (max-width: 820px) {
  .process-kpis { grid-template-columns: 1fr; gap: 20px; }
}

/* ========== Logos — Scob-style dark band with accent halo ========== */
.logos {
  background: #050507;
  color: var(--c-cream);
  padding-block: clamp(80px, 9vw, 140px);
  overflow: hidden;
  text-align: center;
  position: relative;
}
.logos-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 6.5vw, 100px);
  line-height: 1; letter-spacing: 0;
  margin: 0 0 48px;
  color: #fff;
}
.logos-title em {
  font-family: var(--font-display-contrast);
  font-style: italic;
  color: var(--c-accent);
}
.logos-band {
  position: relative;
  background: #0a0a0c;
  border-radius: 80px;
  padding: 36px 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px -20px rgba(0,0,0,0.5);
}
.logos-track-wrap {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex; gap: 96px;
  animation: ticker 40s linear infinite;
  white-space: nowrap; align-items: center;
  width: max-content;
}
.logo-cell {
  flex: 0 0 auto;
  height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.logo-cell img {
  height: 100%; width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.65);
  transition: filter 0.3s ease;
}
.logo-cell:hover img { filter: brightness(0) invert(1) opacity(1); }
.logo-cell img[alt="France TV"],
.logo-cell img[alt="Pilotage sur Glace Flaine"],
.logo-cell img[alt="Notaires des Savoie"],
.logo-cell img[alt="Cluses, La Passionnée"],
.logo-cell img[alt="Thyez et ses lacs"] {
  height: 180%;
  max-height: 110px;
  max-width: 320px;
}
@keyframes ticker { to { transform: translateX(-33.333%); } }

/* Override neon-mode logos style to match new design */
body[data-bg="neon"] .logos { background: transparent !important; }

/* ========== Contact ========== */
.contact {
  background: var(--c-petrole-deep);
  position: relative; overflow: hidden;
}
.contact-page {
  padding-top: 120px; /* clear fixed nav */
  min-height: calc(100vh - 200px);
}
.contact-page .contact {
  padding-block: clamp(60px, 8vw, 110px) clamp(60px, 7vw, 100px);
}
.contact::before {
  content: "contact";
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(120px, 28vw, 460px);
  line-height: 0.8;
  color: rgba(255,255,255,0.004);
  letter-spacing: -0.04em;
  pointer-events: none; white-space: nowrap;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  position: relative; z-index: 2;
}
.contact h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 6.4vw, 104px);
  line-height: 1; letter-spacing: 0;
  margin: 16px 0 24px;
}
.contact h2 em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015);
}
.contact-info {
  display: flex; flex-direction: column;
  margin-top: 32px;
}
.contact-info-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding-block: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
}
.contact-info-row:last-child { border-bottom: 1px solid var(--c-line); }
.contact-info-row .key {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.5);
}
.contact-info-row a {
  color: var(--c-cream);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  justify-self: start;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.contact-info-row a:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

.form {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: clamp(28px, 3vw, 44px);
  display: grid; gap: 18px;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.6);
}
.form-field input, .form-field textarea, .form-field select {
  background: transparent; border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: 10px 0;
  color: var(--c-cream);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--c-accent);
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.form-chip {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent; color: var(--c-cream);
  transition: all 0.2s ease;
}
.form-chip.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.form-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 8px; flex-wrap: wrap;
}
.form-or {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.16em;
  color: rgba(246,241,232,0.5);
  text-transform: uppercase;
}
.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid;
}
.form-status--ok {
  background: rgba(46,160,90,0.10);
  border-color: rgba(46,160,90,0.45);
  color: #aef0c2;
}
.form-status--error {
  background: rgba(192,52,26,0.10);
  border-color: rgba(192,52,26,0.45);
  color: #ffb6a4;
}
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ========== Footer ========== */
.footer {
  background: var(--c-petrole-deep);
  padding-block: 48px 24px;
  border-top: 1px solid var(--c-line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-mark {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 9vw, 160px);
  line-height: 0.85; letter-spacing: -0.03em;
  text-transform: lowercase; margin: 0;
}
.footer-mark em {
  font-family: var(--font-display-contrast);
  font-style: italic; color: var(--c-accent);
}
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.5);
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col a {
  color: var(--c-cream); text-decoration: none; font-size: 14px;
}
.footer-col a:hover { color: var(--c-accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(246,241,232,0.5);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--c-accent); }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== Density variant ========== */
[data-density="airy"]  { --section-y: clamp(120px, 13vw, 200px); }
[data-density="dense"] { --section-y: clamp(60px, 6vw, 100px); }

/* ========== Reveal ========== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ========== About page ========== */
.about-hero {
  padding: 180px var(--gutter) 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  margin-bottom: -60px;
}
.about-hero::before {
  display: none;
}
.about-hero > * { position: relative; z-index: 1; }
.about-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 9vw, 160px);
  line-height: 1.08; letter-spacing: 0;
  margin: 16px 0 24px;
  text-wrap: balance;
}
.about-hero h1 em {
  font-family: var(--font-display);
  font-style: normal; font-weight: 700;
  color: var(--c-accent);
  text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015);
}
.about-hero p {
  max-width: 56ch; margin: 0 auto;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55;
  color: rgba(246,241,232,0.78);
}
.about-body {
  background: transparent; color: var(--c-cream);
  position: relative;
  padding-block: 100px;
}
.about-body > .container { position: relative; z-index: 2; }

/* Page-wide animated neon ambience for about page — now handled by the
   site-wide body::before / body::after halos. The .about-neon layer is
   kept in the markup for legacy structure but hidden so we don't double up. */
.about-page-body { background: #050507; }
.about-neon { display: none; }
.about-shape {
  position: absolute;
  filter: blur(90px);
  mix-blend-mode: screen;
  border-radius: 50%;
  will-change: transform;
}
/* Bigger, more diffuse, very slow zero-gravity drift — only red & blue */
.about-shape { filter: blur(160px); }
.ash-1 {
  width: 78vw; height: 78vw;
  left: -22vw; top: -18vw;
  background: radial-gradient(circle, #ff3b1c 0%, #c0341a 30%, transparent 70%);
  opacity: 0.46;
  animation: ash-float-a 120s ease-in-out infinite;
}
.ash-2 {
  width: 70vw; height: 70vw;
  right: -20vw; top: 30vh;
  background: radial-gradient(circle, #6df0f0 0%, #2db4c4 40%, transparent 75%);
  opacity: 0.32;
  animation: ash-float-b 150s ease-in-out infinite;
}
.ash-3, .ash-4, .ash-5 { display: none; }
.about-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100px 100px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
  opacity: 0.4;
}
@keyframes ash-orbit-a {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(8vw, 6vw) scale(1.18); }
  66%     { transform: translate(-5vw, 10vw) scale(0.9); }
}
@keyframes ash-orbit-b {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  50%     { transform: translate(-8vw, -4vw) scale(1.2) rotate(40deg); }
}
@keyframes ash-orbit-c {
  0%,100% { transform: translate(0,0) scale(1); }
  25%     { transform: translate(5vw, -8vw) scale(1.1); }
  50%     { transform: translate(-3vw, 4vw) scale(0.95); }
  75%     { transform: translate(7vw, 6vw) scale(1.15); }
}
/* Slow, weightless float — wide travel, gentle scale breathing */
@keyframes ash-float-a {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(12vw, 8vh) scale(1.12); }
  40%  { transform: translate(-8vw, 16vh) scale(0.94); }
  60%  { transform: translate(14vw, 22vh) scale(1.06); }
  80%  { transform: translate(-4vw, 10vh) scale(1.18); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes ash-float-b {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-14vw, -10vh) scale(1.15); }
  50%  { transform: translate(8vw, -18vh) scale(0.92); }
  75%  { transform: translate(-10vw, -6vh) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
.about-page-body .nav,
.about-page-body .about-hero,
.about-page-body .about-body,
.about-page-body .footer { position: relative; z-index: 2; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.about-portrait {
  aspect-ratio: 16/9; overflow: visible; border-radius: 8px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14),
    0 40px 100px -18px rgba(0,0,0,0.6),
    0 16px 100px rgba(255,255,255,0.18),
    0 30px 180px rgba(255,255,255,0.10),
    0 50px 280px rgba(255,255,255,0.06);
}
.about-portrait::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.28), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.about-portrait > * { border-radius: 8px; overflow: hidden; }
.about-portrait img,
.about-portrait video,
.about-portrait iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.about-portrait .ken-burns {
  animation: ken-burns 18s ease-in-out infinite alternate;
  transform-origin: center;
  filter: saturate(0.85) brightness(0.85);
}
@keyframes ken-burns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}
.about-text h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1; letter-spacing: 0;
  margin: 0 0 24px;
}
.about-text h2 em { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--c-accent); text-shadow: 0 0 4px rgba(255,170,120,0.03), 0 0 14px rgba(255,110,60,0.03), 0 0 36px rgba(192,52,26,0.025), 0 0 70px rgba(192,52,26,0.015); }
.about-text p {
  font-size: 17px; line-height: 1.6;
  color: rgba(246,241,232,0.78);
  margin: 0 0 18px; max-width: 56ch;
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
}