/* =========================================================================
   MVDK MEDIA — calm, light-blue, glass aesthetic
   Fonts: Space Grotesk (display) + Inter (body)
   ========================================================================= */

:root {
  /* Calm light-blue palette */
  --bg:        #e9eff7;   /* page background — very light blue */
  --bg-soft:   #f2f6fb;   /* raised surfaces */
  --bg-card:   #ffffff;
  --ink:       #10151d;   /* near-black text */
  --ink-soft:  #38424f;
  --muted:     #6b7684;   /* secondary text */
  --line:      rgba(16, 21, 29, 0.10);
  --line-soft: rgba(16, 21, 29, 0.06);

  /* Accent — warm terracotta for [bracket] labels, used sparingly */
  --accent:    #d1592f;
  --accent-2:  #2f6fb0;   /* calm blue for links/focus */

  /* Dark surfaces (featured card, reel) */
  --dark:      #0d0f12;
  --dark-2:    #17191e;

  /* Glass */
  --glass-bg:     rgba(255, 255, 255, 0.45);
  --glass-brd:    rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 30px -12px rgba(16, 30, 55, 0.35);

  --radius:    18px;
  --radius-lg: 28px;
  --wrap:      1180px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; }

/* --- Ambient blobs (soft calm glow) -------------------------------------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;
}
.ambient span:nth-child(1) { width: 640px; height: 640px; top: -220px; right: -160px; background: #cfe0f4; }
.ambient span:nth-child(2) { width: 520px; height: 520px; bottom: -200px; left: -160px; background: #dfe8f2; }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 9vw, 130px); }
.page-top { padding-top: clamp(120px, 16vw, 190px); }
.muted { color: var(--muted); }
.center { text-align: center; }
.center-block { text-align: center; max-width: 620px; margin-inline: auto; }

/* --- Bracket eyebrow labels ---------------------------------------------- */
.eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.eyebrow.center { text-align: center; }
.tag {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}

/* =========================================================================
   HEADER  (image 4: wordmark left, plain nav right — adapted to light glass)
   ========================================================================= */
/* =========================================================================
   INTRO LOADER  (home, once per session)
   "MIKE VAN DE KERKHOF MEDIA…" → collapses to "MVDKM." → flies to the header
   ========================================================================= */
.preloader {
  display: none; position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center;
}
.preloader::before { /* opaque backdrop, faded separately from the word */
  content: ''; position: absolute; inset: 0; background: var(--bg);
  transition: opacity .45s var(--ease);
}
html.preloading .preloader { display: flex; }
html.preloading body { overflow: hidden; }
html.preloading .site-header { visibility: hidden; animation: none; }

.preloader-word {
  position: relative;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 5.5vw, 3.6rem); letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: baseline;
  transition: transform .7s var(--ease);
  will-change: transform;
}
.pw { display: inline-flex; }
.pw + .pw { margin-left: .3em; transition: margin-left .55s var(--ease); }
.pw-rest {
  display: inline-block; overflow: hidden; white-space: pre; max-width: 8em;
  transition: max-width .55s var(--ease), opacity .4s var(--ease);
}
.pw-dots { display: inline-flex; }
.pd { color: var(--accent); }
.pd2, .pd3 { opacity: 0; }
html.preloading .pd2 { animation: pd2 2s steps(1) infinite; }
html.preloading .pd3 { animation: pd3 2s steps(1) infinite; }
@keyframes pd2 { 0%, 32% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes pd3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }

/* Stage 1 — words collapse to their first letters (MVDKM.) */
html.intro-collapse .pw-rest { max-width: 0; opacity: 0; }
html.intro-collapse .pw + .pw { margin-left: 0; }
html.intro-collapse .pd2, html.intro-collapse .pd3 { animation: none; opacity: 0; }

/* Stage 2 — the mark flies to the header (transform set by JS); bg fades */
html.intro-fly .preloader::before { opacity: 0; }

/* Stage 3 — header unfolds from the center while the word slides to its
   brand slot (the slide + fade transitions are set inline by JS). */
html.intro-reveal .site-header {
  visibility: visible;
  animation: header-unfold .6s var(--ease) both;
}
html.intro-reveal .header-inner { animation: intro-fade .45s var(--ease) .2s both; }
html.intro-reveal .preloader-word { opacity: 0; }
/* After the intro, don't replay the normal drop-in (that caused a flicker). */
html.intro-played .site-header { animation: none; }
@keyframes header-unfold {
  from { clip-path: inset(0 50% 0 50% round 18px); }
  to   { clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }

/* Floating rounded bar, detached from the top edge (upsunday style):
   always slightly see-through with the page blurred behind it. */
.site-header {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 100;
  width: min(1060px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(20, 25, 45, 0.04), 0 10px 24px -20px rgba(20, 25, 45, 0.16);
  transition: box-shadow .3s var(--ease);
  animation: nav-drop .8s var(--ease) .1s both;
}
.site-header.scrolled {
  box-shadow: 0 1px 2px rgba(20, 25, 45, 0.04), 0 18px 40px -24px rgba(20, 25, 45, 0.35);
}
.site-header .wrap { padding-inline: 14px; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-14px); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-mark {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.brand-dot { color: var(--accent); }
.nav { display: flex; gap: 34px; }
.nav a {
  font-size: 0.95rem; font-weight: 500; color: var(--ink-soft);
  position: relative; padding: 4px 0; transition: color .2s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
  background: var(--ink); transition: width .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { width: 100%; }
.nav a[aria-current] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.reel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  display: inline-block; animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: .3s var(--ease); }

/* =========================================================================
   BUTTONS  (glass look + cursor-reactive spotlight)
   ========================================================================= */
.btn {
  --spot-x: 50%; --spot-y: 50%;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: 0.95rem;
  border: 1px solid transparent; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* Glass button — frosted, with a light that follows the cursor */
.btn-glass {
  color: var(--ink);
  background: var(--glass-bg);
  border-color: var(--glass-brd);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(140px circle at var(--spot-x) var(--spot-y),
              rgba(255,255,255,0.9), rgba(255,255,255,0) 60%);
}
.btn-glass:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(16,30,55,0.45), inset 0 1px 0 rgba(255,255,255,0.8); }
.btn-glass:hover::before { opacity: 1; }

/* Ghost button */
.btn-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,0.4); transform: translateY(-2px); }

/* Reel button in header */
.btn-reel { padding: 9px 18px; font-size: 0.88rem; }

/* Dark-context glass (on dark sections) */
.on-dark .btn-glass, .btn-glass.is-dark {
  color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.on-dark .btn-glass::before, .btn-glass.is-dark::before {
  background: radial-gradient(140px circle at var(--spot-x) var(--spot-y),
              rgba(255,255,255,0.35), rgba(255,255,255,0) 60%);
}

/* =========================================================================
   HERO / BANNER  (image 2: full-bleed muted video + overlay text)
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-placeholder {
  background: linear-gradient(135deg, #2a3340, #10151d 70%);
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,11,16,0.72) 0%, rgba(8,11,16,0.15) 45%, rgba(8,11,16,0.25) 100%);
}
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(56px, 9vw, 110px); max-width: 760px; }
.hero .eyebrow { color: #ffb59a; }
.hero-title { font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 700; margin-bottom: 20px; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255,255,255,0.85); max-width: 560px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-glass { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
.hero .btn-glass::before { background: radial-gradient(140px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,0.4), rgba(255,255,255,0) 60%); }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* =========================================================================
   SECTION HEADS / MEGA HEADING  (image 1: giant [ OUR WORK ])
   ========================================================================= */
.section-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.section-link { margin-left: auto; color: var(--muted); font-weight: 500; transition: color .2s; }
.section-link:hover { color: var(--ink); }
.mega-heading {
  font-size: clamp(3rem, 11.5vw, 9.5rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); line-height: 0.95; margin-bottom: 56px;
  text-align: center; white-space: nowrap;
}
/* Square drawn brackets — exactly the height of the capital letters,
   unlike the font's [ ] glyphs which sit lower than the caps. */
.mh-b {
  display: inline-block; width: .32em; height: .73em;
  border: .07em solid currentColor;
  vertical-align: baseline;
}
.mh-b-open  { border-right: 0; margin-right: .14em; }
.mh-b-close { border-left: 0;  margin-left: .14em; }
/* Longer headings (e.g. THE PROCESS) — same style, scaled to fit */
.mega-heading-sub { font-size: clamp(1.7rem, 6.6vw, 5.6rem); }
.page-title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; margin-bottom: 12px; }

/* =========================================================================
   WORK — ROWS  (image 1)
   ========================================================================= */
.work-rows { display: flex; flex-direction: column; gap: 26px; }
.work-row {
  display: grid; grid-template-columns: 280px 1fr 1fr; gap: 44px; align-items: center;
  padding: clamp(24px, 3vw, 40px) clamp(32px, 5.5vw, 72px);
  /* full stadium shape — the browser caps the radius at half the row height */
  border-radius: 999px; border: 1px solid var(--line-soft);
  background: var(--bg-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
/* Hover: the whole row turns dark gray/black and all text brightens */
.work-row:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -24px rgba(16,30,55,0.5); background: var(--dark); border-color: transparent; }
.work-row:hover .work-row-title { color: #fff; }
.work-row:hover .work-row-meta p { color: rgba(255,255,255,0.82); }
.work-row .tag { transition: color .3s var(--ease); }
.work-row:hover .tag { color: #ff9d73; }
.work-row-thumb {
  /* pill-shaped like the reference's featured thumbnail */
  position: relative; aspect-ratio: 16/10; border-radius: 999px;
  overflow: hidden; background: #cdd6e2;
}
.work-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-row:hover .work-row-thumb img { transform: scale(1.06); }
.thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#d6dfea,#c2cddb); }
.work-play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font-size: 1.5rem; opacity: 0; background: rgba(0,0,0,0.25); transition: opacity .3s;
}
.work-row:hover .work-play { opacity: 1; }
.work-row-title { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 700; transition: color .3s var(--ease); }
.work-row-meta p { color: var(--ink-soft); font-size: 1.05rem; margin-top: 10px; transition: color .3s var(--ease); }

.work-more { display: flex; justify-content: center; margin-top: 48px; }

/* WORK — GRID (work index page) */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; margin-top: 40px; }
.work-card {
  display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft);
  border: 1px solid var(--line-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(16,30,55,0.45); }
.work-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #cdd6e2; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-thumb img { transform: scale(1.05); }
.work-meta { padding: 18px 20px 22px; }
.work-cat { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.work-title { font-size: 1.3rem; margin: 6px 0 4px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.filter {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  font-size: 0.9rem; color: var(--muted); transition: .2s;
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.empty-note { padding: 40px 0; }
.work-card[hidden] { display: none; }
/* Cards re-entering when switching category tabs */
.work-card.swap-in { animation: card-in .6s var(--ease) backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }

/* =========================================================================
   WORK — CATEGORY SELECT  (video-game "character select": three slanted,
   full-height panels; hovering one grows it and greys out the others)
   ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.select-stage {
  --skew: -9deg;
  --stage-h: max(100vh, 540px);
  /* The panels are slanted, so the row runs past both screen edges by this
     much — their outer slanted edges stay off-screen and the panels truly
     fill the view (0.08 ≈ half of tan 9°). */
  --edge: calc(var(--stage-h) * 0.08 + 6px);
  position: relative; height: var(--stage-h); overflow: hidden;
}
@supports (height: 100svh) { .select-stage { --stage-h: max(100svh, 540px); } }
.select-row {
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge));
  display: flex; gap: 12px;
}
.select-panel {
  position: relative; flex: 1 1 0; min-width: 0;
  overflow: hidden; color: #fff; background: var(--dark-2);
  transform: translateY(0) skewX(var(--skew));
  transition: flex-grow .7s var(--ease), filter .6s var(--ease), transform .7s var(--ease);
  animation: select-in 1s var(--ease) backwards;     /* slide up, one after another */
  animation-delay: calc(var(--i, 0) * 120ms + 80ms);
  outline: none; -webkit-tap-highlight-color: transparent;
}
@keyframes select-in { from { transform: translateY(102%) skewX(var(--skew)); } }
/* The picture is counter-slanted so it stays upright inside the panel */
.select-media {
  position: absolute; top: 0; bottom: 0; left: -30%; right: -30%;
  transform: skewX(calc(var(--skew) * -1)) scale(1.02);
  transition: transform 1s var(--ease);
  background: linear-gradient(160deg, #2a3340, #10151d 70%);
}
.select-media img, .select-media video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.select-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,11,16,0.82) 0%, rgba(8,11,16,0.18) 50%, rgba(8,11,16,0.35) 100%);
}
.select-panel::after {           /* keyboard focus ring, drawn above the picture */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--accent); opacity: 0; transition: opacity .3s;
}
.select-panel:focus-visible::after { opacity: 1; }
.select-content {
  position: absolute; inset: 0; z-index: 1;
  container-type: inline-size;     /* lets the name scale with its panel */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--stage-h) * 0.15) clamp(22px, 2.6vw, 44px) calc(var(--stage-h) * 0.08);
}
/* Outer panels run partly off-screen: make them wider by that amount so all
   three look equal, and keep their text clear of the hidden part. The first
   panel's text also shifts right to clear its slanted bottom-left corner. */
.select-panel:first-child, .select-panel:last-child { flex-basis: var(--edge); }
.select-panel:first-child .select-content { padding-left: calc(var(--edge) + 22px); }
.select-panel:first-child .select-bottom  { transform: translateX(calc(var(--stage-h) * 0.065)); }
.select-panel:last-child  .select-content { padding-right: calc(var(--edge) + 22px); }
.select-num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.16em; color: #ffb59a;
}
.select-bottom { display: flex; flex-direction: column; align-items: flex-start; }
.select-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 3.3vw, 3.4rem);
  /* Sized to the panel, so long words (VIDEOGRAPHY) fit even when the panel
     narrows — and the name grows along with a highlighted panel. */
  font-size: clamp(1.1rem, 13.5cqi, 3.4rem);
  line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; text-wrap: balance; max-width: 9em;
}
.select-meta { margin-top: 12px; font-size: 0.95rem; color: rgba(255,255,255,0.72); }
.select-cta {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 500;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
/* Highlighted option: grows a little; every other option darkens + greys out */
.select-panel:focus-visible { flex-grow: 1.15; z-index: 2; }
.select-panel:focus-visible .select-media { transform: skewX(calc(var(--skew) * -1)) scale(1.04); }
.select-panel:focus-visible .select-cta { opacity: 1; transform: none; }
.select-row:has(.select-panel:focus-visible) .select-panel:not(:focus-visible) { filter: grayscale(1) brightness(0.42); }
@media (hover: hover) {
  .select-panel:hover { flex-grow: 1.15; z-index: 2; }
  .select-panel:hover .select-media { transform: skewX(calc(var(--skew) * -1)) scale(1.04); }
  .select-panel:hover .select-cta { opacity: 1; transform: none; }
  .select-row:has(.select-panel:hover) .select-panel:not(:hover) { filter: grayscale(1) brightness(0.42); }
}
/* Picked: the chosen panel sweeps across the screen, the others drop away */
.select-row.has-chosen .select-panel {
  flex-grow: 0.0001; filter: grayscale(1) brightness(0.3);
  transform: translateY(105%) skewX(var(--skew));
  transition-duration: .3s;
}
.select-row.has-chosen .select-panel.is-chosen {
  flex-grow: 1; filter: none; z-index: 3;
  transform: translateY(0) skewX(var(--skew));
}

/* =========================================================================
   PROCESS  (Think → Create → Deliver, connected by a scroll-drawn line)
   ========================================================================= */
.process-stage { position: relative; padding-top: 50px; margin-top: 10px; }
.process-line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; color: var(--accent); z-index: 0; pointer-events: none;
}
.pnode {
  fill: var(--accent); opacity: 0;
  transform: scale(0); transform-box: fill-box; transform-origin: center;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
/* Vertical, staggered: 1 left, 2 right, 3 just right of center */
.process-grid {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 110px;
}
.process-card {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 38px; padding: 44px 42px;
  width: min(560px, 100%);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.process-card:nth-child(1) { align-self: flex-start; }
.process-card:nth-child(2) { align-self: flex-end; }
.process-card:nth-child(3) { align-self: flex-start; }
.process-card:nth-child(4) { align-self: center; margin-left: 22%; }
.process-title { font-size: 2.2rem; margin: 14px 0 2px; }
.process-sub { font-size: 1rem; margin-bottom: 20px; }
.process-points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.process-points li {
  position: relative; padding-left: 22px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55;
}
.process-points li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
}
/* Armed by JS: cards hidden until the line reaches them */
.section-process.armed .process-card { opacity: 0; transform: translateY(28px); }
.section-process.reached-1 .process-card:nth-child(1),
.section-process.reached-2 .process-card:nth-child(2),
.section-process.reached-3 .process-card:nth-child(3),
.section-process.reached-4 .process-card:nth-child(4) { opacity: 1; transform: none; }
.section-process.reached-1 .pnode-1,
.section-process.reached-2 .pnode-2,
.section-process.reached-3 .pnode-3,
.section-process.reached-4 .pnode-4 { opacity: 1; transform: scale(1); }

/* =========================================================================
   CLIENTS MARQUEE  (image 5: scrolling right→left)
   ========================================================================= */
.section-clients { padding-block: clamp(48px, 6vw, 80px); }
.section-clients .eyebrow { color: var(--muted); letter-spacing: 0.2em; }
.marquee { overflow: hidden; margin-top: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
/* Each sequence includes its trailing gap, so two sequences are exactly equal
   halves and the -50% loop point is invisible. */
.marquee-seq { display: flex; align-items: center; gap: 68px; padding-right: 68px; flex: 0 0 auto; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.client { display: flex; align-items: center; justify-content: center; height: 46px; flex: 0 0 auto; }
/* Logos are recolored to the muted text color: the logo image acts as a mask
   (set inline per logo) and this background shows through its shape. */
.client-tint {
  display: block;
  background-color: var(--muted);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color .3s;
}
.client-tint:hover { background-color: var(--ink); }
.client-tint img { display: block; max-height: 42px; width: auto; opacity: 0; }
.client-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 500; color: var(--muted); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.cta-band { text-align: center; }
.cta-inner { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-inner h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about-photo img, .about-photo-placeholder { width: 100%; border-radius: var(--radius-lg); }
.about-photo-placeholder { aspect-ratio: 4/5; display: grid; place-items: center; background: linear-gradient(135deg,#d6dfea,#c2cddb); color: var(--muted); font-family: 'Space Grotesk'; }
.about-text h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 20px; }
.about-text p { margin-bottom: 16px; color: var(--ink-soft); }
.about-text .btn { margin-top: 12px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 22px; margin-top: 34px; }
.service-card { padding: 30px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line-soft); transition: transform .3s var(--ease), box-shadow .3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(16,30,55,0.4); }
.service-card h3 { font-size: 1.3rem; margin-bottom: 10px; }

/* =========================================================================
   PROJECT DETAIL
   ========================================================================= */
.project-head { margin-bottom: 30px; }
.back-link { color: var(--muted); font-size: 0.9rem; display: inline-block; margin-bottom: 20px; }
.back-link:hover { color: var(--ink); }
.project-client { margin-top: 4px; }
.project-video, .project-hero-img { text-align: center; }
/* Fit within the column AND the viewport height, keeping aspect ratio — so
   portrait/vertical videos don't blow up taller than the screen. */
.project-video video, .project-hero-img img {
  display: inline-block;
  width: auto; height: auto;
  max-width: 100%; max-height: 82vh;
  border-radius: var(--radius-lg); background: #000;
}
.project-body { max-width: 720px; margin: 44px auto; font-size: 1.1rem; }
.project-body p { margin-bottom: 18px; color: var(--ink-soft); }
.project-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; margin-top: 30px; }
.project-gallery img { width: 100%; border-radius: var(--radius); }
.project-cta { text-align: center; margin-top: 60px; }

/* =========================================================================
   CONTACT  (image 6: two columns, details + form card w/ dropdown)
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact-intro h1 { margin-bottom: 16px; }
.contact-direct { margin-top: 26px; color: var(--muted); }
.contact-direct a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.contact-form-wrap {
  background: var(--dark); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 42px); box-shadow: 0 30px 70px -30px rgba(10,16,30,0.6);
}
.field { margin-bottom: 18px; display: flex; flex-direction: column; }
.field label { font-size: 0.85rem; color: rgba(255,255,255,0.72); margin-bottom: 7px; font-weight: 500; }
.field label .muted { color: rgba(255,255,255,0.45); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 0.98rem; color: #fff; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 13px 15px; width: 100%;
  transition: border-color .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.4); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1);
}
.field textarea { resize: vertical; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.6); pointer-events: none;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
/* Make the native date-picker icon visible on the dark form */
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.65; cursor: pointer; }
.field input[type="date"] { color-scheme: dark; }
.field select option { color: #111; }
.contact-form .btn-glass { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); margin-top: 6px; }
.contact-form .btn-glass::before { background: radial-gradient(140px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,0.4), rgba(255,255,255,0) 60%); }
.field-err { color: #ff9d7a; font-size: 0.82rem; margin-top: 6px; }
.form-error-top { background: rgba(255,120,90,0.12); border: 1px solid rgba(255,120,90,0.3); color: #ffb59a; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 0.9rem; }
.form-success { text-align: center; padding: 30px 10px; }
.form-success h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.form-success .muted { color: rgba(255,255,255,0.7); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 30px; margin-top: 40px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; align-items: start; }
.footer-logo { font-family: 'Space Grotesk'; font-weight: 700; font-size: 1.3rem; margin-bottom: 8px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--muted); transition: color .2s; }
.footer-nav a:hover { color: var(--ink); }
.footer-email { font-size: 1.05rem; color: var(--ink); }
.footer-email:hover { color: var(--accent); }
.socials { display: flex; gap: 16px; margin-top: 14px; }
.socials a { color: var(--muted); font-size: 0.9rem; }
.socials a:hover { color: var(--ink); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 0.85rem; }

/* =========================================================================
   REEL MODAL
   ========================================================================= */
.reel-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.reel-modal.open { display: flex; }
.reel-backdrop { position: absolute; inset: 0; background: rgba(6,9,14,0.85); backdrop-filter: blur(6px); }
.reel-frame { position: relative; width: min(1000px, 100%); z-index: 1; }
.reel-frame video { width: 100%; border-radius: var(--radius); background: #000; box-shadow: 0 40px 90px -30px #000; }
.reel-x { position: absolute; top: -46px; right: 0; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 860px) {
  .nav, .header-actions .btn-reel { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .nav {
    display: flex; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column;
    gap: 4px; padding: 20px 24px 28px;
    background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(20, 25, 45, 0.35);
  }
  .work-row { grid-template-columns: 1fr; gap: 16px; border-radius: 32px; padding: 22px; }
  .work-row-thumb { border-radius: 22px; }
  .work-row-title { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .process-grid { gap: 22px; }
  .process-card { width: 100%; }
  .process-card:nth-child(4) { margin-left: 0; }
  .process-stage { padding-top: 10px; }
  .process-line { display: none; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* Category select on phones: the three panels stack top to bottom */
@media (max-width: 720px) {
  .select-stage { --skew: -5deg; --edge: 28px; }
  .select-row { flex-direction: column; gap: 10px; }
  .select-panel:first-child, .select-panel:last-child { flex-basis: 0; }
  .select-panel:first-child .select-bottom { transform: none; }
  .select-content,
  .select-panel:first-child .select-content,
  .select-panel:last-child .select-content {
    justify-content: flex-end; padding: 0 calc(var(--edge) + 20px) 22px calc(var(--edge) + 30px);
  }
  .select-num { margin-bottom: 6px; }
  .select-name { font-size: clamp(1.7rem, 8vw, 2.4rem); max-width: none; }
  .select-meta { margin-top: 6px; }
  .select-cta { display: none; }
  .select-media { left: -12%; right: -12%; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero.reveal { opacity: 1; transform: none; } /* hero paints immediately */

/* Word-by-word heading reveal — words rise, sharpen from a blur, staggered */
.anim-text .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-text.played .w { opacity: 1; transform: none; filter: none; }

/* Lenis smooth scrolling (native smooth behavior must be off while active) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .anim-text .w { opacity: 1; transform: none; filter: none; transition: none; }
}