/* ============================================================
   NICOLAS LEKAI — Director · AI Film · VFX · Post
   dark minimal luxury
   ============================================================ */
:root {
  --bg: #0d0d0e;
  --bg-soft: #141416;
  --light: #f2f1ee;
  --dim: #9a9a9f;
  --accent: #f4933b;          /* fire orange sampled from the AI clips */
  --hair: rgba(242,241,238,.12);
  --font: "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: initial; }
body {
  background: var(--bg);
  color: var(--light);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* the whole page breathes in on load instead of popping */
  animation: pageFade 1.3s ease .08s both;
}
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem;
  font-size: .72rem; letter-spacing: .18em; font-weight: 600;
  mix-blend-mode: difference;
}
.nav-mid { color: var(--dim); font-weight: 500; display: none; }
@media (min-width: 800px) { .nav-mid { display: block; } }
.nav-cta { border: 1px solid var(--hair); border-radius: 2rem; padding: .45rem 1.1rem; transition: all .3s; }
.nav-cta:hover { background: var(--light); color: #000; }

/* ---------- cinematic scrub sections ---------- */
.cinematic { height: 300vh; position: relative; }
.cinematic .sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--bg);
}
.cinematic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, #0d0d0e 0%, transparent 24%, transparent 76%, #0d0d0e 100%);
}
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; pointer-events: none; padding: 0 6vw;
}
.overlay .line { grid-area: 1/1; opacity: 0; will-change: opacity, transform; }
.overlay h1 {
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  font-weight: 900; letter-spacing: -.02em; line-height: .98;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.overlay .sub {
  margin-top: 1.2rem; font-size: clamp(.85rem, 1.4vw, 1.15rem);
  letter-spacing: .28em; text-transform: uppercase; color: var(--light);
  opacity: .85;
}
.overlay .sub em { letter-spacing: .08em; text-transform: none; color: var(--accent); }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: .65rem; letter-spacing: .5em; color: var(--dim);
  animation: hint 2.2s ease-in-out infinite; transition: opacity .4s;
}
@keyframes hint { 50% { transform: translate(-50%, 8px); opacity: .4; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- statement ---------- */
.statement {
  padding: 13vh 8vw 5vh;
}
.statement p {
  max-width: 1140px; margin: 0 auto;
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  font-weight: 300; line-height: 1.25; letter-spacing: -.01em;
}
.statement em { color: var(--accent); }
.clients {
  margin-top: 4rem; display: flex; flex-wrap: wrap; gap: .9rem 2.4rem;
  font-size: .7rem; letter-spacing: .22em; font-weight: 600; color: var(--dim);
}

/* ---------- work ---------- */
.work { padding: 4vh 4vw 6vh; }
.work-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 .5rem 2.4rem;
}
.work-head h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 900; letter-spacing: -.02em;
}
.work-count { font-size: .72rem; letter-spacing: .3em; color: var(--dim); }
.work-grid {
  list-style: none;
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-grid a { display: block; }
.work-grid figure {
  aspect-ratio: 16/10; overflow: hidden; border-radius: 4px;
  background: var(--bg-soft);
}
.work-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.02);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s;
}
.work-grid li:hover img { transform: scale(1.045); filter: saturate(1.05); }
.card-meta { padding: 1rem .35rem 0; }
.card-meta h3 { font-size: 1.02rem; font-weight: 600; display: inline-block; margin-right: .6rem; }
.pill {
  display: inline-block; vertical-align: middle;
  border: 1px solid var(--hair); border-radius: 2rem;
  padding: .14rem .6rem; font-size: .55rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.card-meta p { margin-top: .4rem; font-size: .8rem; color: var(--dim); }

/* ---------- services ---------- */
.services { padding: 8vh 8vw 6vh; }
.services > * { max-width: 1300px; margin-inline: auto; }
.services h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 900; letter-spacing: -.02em;
  margin-bottom: 4rem;
}
.service-rows { display: grid; gap: 0; }
.service {
  display: grid; grid-template-columns: 4rem 1fr; gap: 0 1.5rem;
  padding: 2.2rem 0; border-top: 1px solid var(--hair);
  align-items: baseline;
}
.service:last-child { border-bottom: 1px solid var(--hair); }
.service .idx { font-size: .75rem; color: var(--accent); letter-spacing: .2em; }
.service h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
.service p { grid-column: 2; margin-top: .6rem; color: var(--dim); max-width: 56ch; line-height: 1.6; font-size: .95rem; }
@media (min-width: 900px) {
  .service { grid-template-columns: 4rem 1fr 1.2fr; }
  .service p { grid-column: 3; margin-top: 0; }
}

/* ---------- contact ---------- */
.contact {
  padding: 12vh 8vw 10vh; text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(244,147,59,.06), transparent);
}
.contact h2 {
  font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.02;
}
.contact h2 em { color: var(--accent); font-weight: 400; }
.button {
  display: inline-block; margin-top: 3rem;
  background: var(--light); color: #000;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.1rem 2.6rem; border-radius: 3rem;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s;
}
.button:hover { transform: translateY(-3px); background: var(--accent); }
.contact-meta {
  margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: center;
  font-size: .85rem; color: var(--dim);
}
.contact-meta a:hover { color: var(--light); }
.contact-meta .pill { margin-left: .5rem; }

/* ---------- footer ---------- */
footer {
  display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between;
  padding: 2rem; border-top: 1px solid var(--hair);
  font-size: .7rem; letter-spacing: .12em; color: var(--dim);
}
footer a:hover { color: var(--light); }

/* ============ v2 additions ============ */

/* nav logo */
.nav-brand { display: flex; align-items: center; gap: .7rem; }
.nav-logo { height: 26px; width: auto; display: block; }

/* shorter mid-page cinematic sections */
.cinematic.short { height: 300vh; }

/* bigger thumbnails — 2 per row */
@media (min-width: 700px)  { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; } }
@media (min-width: 1280px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-grid figure { aspect-ratio: 16/9; }
.work-grid figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-meta h3 { font-size: 1.25rem; }
.card-meta p { font-size: .88rem; }

/* featured project */
.featured { padding: 6vh 4vw 4vh; }
.feat-tag {
  display: inline-block; vertical-align: middle; margin-left: 1rem;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 2rem;
  padding: .2rem .8rem; font-size: .55rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.feat-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .feat-grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .feat-main { grid-row: 1 / 3; }
}
.feat-grid figure { margin: 0; }
.feat-grid video, .feat-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 4px; background: var(--bg-soft);
}
.feat-main video { aspect-ratio: 16/9; }
.feat-side img { aspect-ratio: 16/9; }
.feat-grid figcaption {
  padding: .8rem .2rem 0; font-size: .8rem; color: var(--dim); line-height: 1.5;
}

/* instagram embeds */
.ig-row {
  margin-top: 3rem;
  display: grid; gap: 1.4rem; grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 1000px) { .ig-row { grid-template-columns: repeat(3, 1fr); } }
.ig-row .instagram-media { background: var(--bg-soft) !important; border-radius: 6px !important; min-width: 0 !important; width: 100% !important; max-width: 420px !important; }

/* ============ v3 — strips, grey/orange/glass world ============ */

/* strip cinematics: letterboxed bands instead of full-bleed */
.cinematic.strip { height: 220vh; }
.cinematic.strip .sticky {
  height: 54vh; top: 23vh;
}
.cinematic.strip .overlay h1 { font-size: clamp(1.8rem, 4.6vw, 4.2rem); }
.cinematic.strip .vignette {
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%),
    linear-gradient(to bottom, rgba(13,13,14,.5), transparent 25%, transparent 75%, rgba(13,13,14,.55));
}

/* glassmorphism touches */
.nav-cta, .pill, .feat-tag {
  background: rgba(242,241,238,.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.work-grid figure, .feat-grid video, .feat-grid img {
  border: 1px solid rgba(242,241,238,.07);
}

/* featured intro + ig caption + cta */
.feat-intro {
  max-width: 64ch; padding: 0 .5rem 2.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.6;
  color: var(--light);
}
.feat-intro, .ig-caption { opacity: 0; }   /* .reveal handles fade-in */
.ig-caption {
  margin-top: 4rem; padding: 0 .5rem 1.6rem;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 300;
}
.ig-caption em { color: var(--accent); }
.feat-cta {
  margin-top: 3rem; padding: 2rem .5rem 0;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid var(--hair);
}
.feat-cta p { color: var(--dim); font-size: .9rem; }
.feat-cta .button { margin-top: 0; }

/* archive — compact rows */
.archive { padding: 10vh 8vw 14vh; max-width: 1300px; margin: 0 auto; }
.archive h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: 2.4rem; color: var(--dim); }
.archive-rows { list-style: none; }
.archive-rows li { border-top: 1px solid var(--hair); }
.archive-rows li:last-child { border-bottom: 1px solid var(--hair); }
.archive-rows a, .archive-rows div {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem;
  align-items: baseline; padding: 1.1rem .2rem;
}
@media (min-width: 900px) {
  .archive-rows a, .archive-rows div { grid-template-columns: 2fr auto 2fr; }
}
.archive-rows h3 { font-size: 1.05rem; font-weight: 600; transition: color .3s; }
.archive-rows a:hover h3 { color: var(--accent); }
.archive-rows p { color: var(--dim); font-size: .82rem; }

/* bio */
.bio { padding: 5vh 8vw 0; }
.bio > * { max-width: 1300px; margin-inline: auto; }
.bio .bio-link { display: block; width: fit-content; margin-top: 2.6rem; }
.bio p {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 300; line-height: 1.6;
  color: var(--dim); max-width: 64ch;
  border-left: 2px solid var(--accent); padding-left: 1.6rem;
}

/* contact sub */
.contact-sub { margin-top: 2rem; color: var(--dim); font-size: .95rem; line-height: 1.8; }

/* ============ v4 — lens-engraving design language ============ */

/* orange focus hairline: scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(244,147,59,.55);
  pointer-events: none;
}

/* selection reads like an engraving */
::selection { background: var(--accent); color: #000; }

/* focal-tick ruler on the cinematic strips (lens distance-scale motif) */
.cinematic.strip .sticky::before, .cinematic.strip .sticky::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; z-index: 3; opacity: .3 !important;
  background:
    repeating-linear-gradient(to right,
      rgba(242,241,238,.22) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to right,
      rgba(244,147,59,.85) 0 1px, transparent 1px 120px);
  opacity: .5; pointer-events: none;
}
.cinematic.strip .sticky::before { top: 0; }
.cinematic.strip .sticky::after  { bottom: 0; }

/* work cards: focus-ring hover, engraved pills */
.work-grid figure { transition: border-color .4s, box-shadow .4s; }
.work-grid li:hover figure {
  border-color: rgba(244,147,59,.55);
  box-shadow: 0 0 0 1px rgba(244,147,59,.25), 0 0 28px rgba(244,147,59,.07);
}
.work-grid li:hover .pill { border-color: rgba(244,147,59,.5); color: var(--accent); }

/* counters & section labels styled like focal markings */
.work-count, .archive h2 {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
}
.work-count { font-size: .68rem; }

/* ============ v5 — brand duotone thumbnails, color on hover ============ */
.work-grid figure { position: relative; }
.work-grid figure img,
.work-grid figure video {
  filter: grayscale(1) contrast(1.12) brightness(.96);
  transition: filter .6s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}
.work-grid figure::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* orange gel wash over the B&W, echoing the AI clips — saturated, not sepia */
  background: linear-gradient(135deg, rgba(248,112,8,.62), rgba(248,112,8,.22) 62%, rgba(248,112,8,.06) 90%);
  opacity: 1;
  transition: opacity .6s cubic-bezier(.22,1,.36,1);
}
.work-grid figure::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* film grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: .22;
  transition: opacity .6s cubic-bezier(.22,1,.36,1);
}
.work-grid li:hover figure::after,
.work-grid li:hover figure::before { opacity: 0; }
.work-grid li:hover figure img,
.work-grid li:hover figure video { filter: grayscale(0) contrast(1) brightness(1); }

/* bio second note */
.bio .bio-note { margin-top: 1.4rem; font-size: .92em; border-left-color: var(--hair); }

/* ============ v6 — bigger overlay type, bold orange ============ */
.overlay .sub {
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  opacity: 1;
  letter-spacing: .22em;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.overlay .sub em {
  font-weight: 700;
  color: var(--accent);
}
.cinematic.strip .overlay h1 { font-size: clamp(2.16rem, 5.5vw, 5rem); }
.statement em, .contact h2 em { font-weight: 400; }

/* ============ v7 — project case pages ============ */
.case-hero { padding: 16vh 4vw 0; }
.case-hero h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.back { display: inline-block; margin-bottom: 2.4rem; font-size: .72rem; letter-spacing: .2em; color: var(--dim); }
.back:hover { color: var(--accent); }
.case-embed { position: relative; aspect-ratio: 16/9; background: var(--bg-soft); border: 1px solid rgba(242,241,238,.07); border-radius: 4px; overflow: hidden; }
.case-embed iframe, .case-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-gallery { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 800px) { .case-gallery { grid-template-columns: repeat(2, 1fr); } }
.case-gallery img { width: 100%; border-radius: 4px; border: 1px solid rgba(242,241,238,.07); display: block; }
.case-notes { max-width: 70ch; margin-top: 3.5rem; color: var(--dim); line-height: 1.7; font-size: .95rem; }
.case-notes p + p { margin-top: 1.2rem; }
.coverage { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.coverage h3 { font-size: .72rem; letter-spacing: .3em; color: var(--accent); margin-bottom: 1.2rem; }
.coverage a { display: inline-block; margin: 0 1.6rem .6rem 0; font-size: .9rem; color: var(--dim); border-bottom: 1px solid var(--hair); }
.coverage a:hover { color: var(--light); border-color: var(--accent); }

/* ============ v8 — device-frame format showcase ============ */
.formats { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--hair); }
.formats h3 { font-size: .72rem; letter-spacing: .3em; color: var(--accent); margin-bottom: 1.8rem; }
.format-row { display: flex; gap: 3rem; flex-wrap: wrap; align-items: flex-end; }

/* iPhone 17-style frame: 70.6×152.2 body, even bezels, Dynamic Island */
.phone {
  position: relative;
  width: clamp(210px, 24vw, 270px);
  aspect-ratio: 706 / 1522;
  border-radius: 14.2% / 6.6%;
  background: #060607;
  /* titanium band */
  box-shadow:
    0 0 0 1.5px #3d3d40,
    0 0 0 2.5px #18181a,
    0 30px 70px rgba(0,0,0,.55);
  padding: 2.6%;
}
.phone .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 12% / 5.6%;
  overflow: hidden; background: #000;
}
.phone .screen video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Dynamic Island */
.phone .island {
  position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%);
  width: 34%; height: 3.4%;
  background: #000; border-radius: 100px; z-index: 3;
}
/* side buttons */
.phone .btn { position: absolute; background: #2c2c2f; border-radius: 2px; }
.phone .btn.action { left: -1.5px; top: 18%; width: 3px; height: 4.5%; }
.phone .btn.volup  { left: -1.5px; top: 26%; width: 3px; height: 7%; }
.phone .btn.voldn  { left: -1.5px; top: 35%; width: 3px; height: 7%; }
.phone .btn.power  { right: -1.5px; top: 28%; width: 3px; height: 10%; }

/* 4:5 feed frame — minimal matching slab */
.tablet {
  position: relative; width: clamp(250px, 30vw, 350px);
  border-radius: 18px; padding: 10px;
  background: #060607;
  box-shadow: 0 0 0 1.5px #3d3d40, 0 0 0 2.5px #18181a, 0 30px 70px rgba(0,0,0,.55);
}
.tablet video { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; display: block; background: #000; }
.format-label { margin-top: 1rem; text-align: center; font-size: .62rem; letter-spacing: .25em; color: var(--dim); }

/* IG reel inside the phone frame */
.ig-phone-wrap { display: flex; justify-content: center; align-items: flex-start; }
.phone .screen iframe {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 104%; height: 104%; border: 0; background: #000;
}

/* ============ v9 — mobile overlay scale, minimal shadow ============ */
.overlay .sub { text-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (max-width: 700px) {
  .overlay h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .overlay .sub { font-size: clamp(1.1rem, 5.5vw, 1.7rem); }
  .cinematic.strip .overlay h1 { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
  /* phones get much longer pins — clips deserve more than two thumb-swipes */
  .cinematic { height: 340vh; }
  .cinematic.strip { height: 250vh; }
}

/* case page: video + side text */
.case-split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .case-split { grid-template-columns: 2.1fr 1fr; } }
.case-side h3 { font-size: .72rem; letter-spacing: .3em; color: var(--accent); margin-bottom: 1.2rem; }
.case-side p { color: var(--dim); line-height: 1.7; font-size: .95rem; }
.case-side p + p { margin-top: 1rem; }

/* self-hosted films keep their native aspect (Vimeo iframes stay 16:9 boxes) */
.case-embed:has(> video) { aspect-ratio: auto; }
.case-embed > video { position: static; width: 100%; height: auto; }

/* video facade: our own poster + play button, player loads on click */
.video-facade { cursor: pointer; }
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade .play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer;
  background: rgba(13,13,14,.55); border: 1px solid rgba(242,241,238,.35);
  backdrop-filter: blur(6px); transition: all .3s;
}
.video-facade .play-btn::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-left: 22px solid var(--light); border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.video-facade:hover .play-btn { background: rgba(244,147,59,.25); border-color: var(--accent); }

/* VFX breakdown screening window: slate header + viewfinder corners */
.breakdown-window {
  position: relative; padding: 16px;
  border: 1px solid rgba(244,147,59,.28); border-radius: 6px;
  background: rgba(244,147,59,.03);
}
.breakdown-window::before, .breakdown-window::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.breakdown-window::before { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); border-radius: 6px 0 0 0; }
.breakdown-window::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); border-radius: 0 0 6px 0; }
.bd-head {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 14px;
  font-size: .66rem; font-weight: 600; letter-spacing: .3em; color: var(--accent);
}
.bd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: bdblink 1.6s steps(1) infinite; }
@keyframes bdblink { 50% { opacity: .2; } }
.bd-meta { margin-left: auto; color: var(--dim); font-weight: 500; letter-spacing: .25em; }
@media (max-width: 700px) { .bd-meta { display: none; } }

/* bio story */
.bio-grid { display: flex; gap: 4rem; align-items: flex-start; margin-top: 2.2rem; }
.bio-photo { flex: 0 0 clamp(220px, 24vw, 320px); margin: 0; }
.bio-photo img {
  width: 100%; display: block; border-radius: 2px;
  filter: grayscale(1) contrast(1.1) brightness(.97);
}
.bio-photo figcaption {
  margin-top: .8rem; font-size: .66rem; letter-spacing: .2em; color: var(--dim);
}
.bio-grid .bio-story { margin-top: 0; }
@media (max-width: 700px) {
  .bio-grid { flex-direction: column; gap: 2rem; }
  .bio-photo { flex: none; width: min(70vw, 320px); }
}
.bio-story { margin-top: 2.2rem; max-width: 64ch; }
.bio-story p { color: var(--dim); line-height: 1.75; font-size: .95rem; }
.bio-story p + p { margin-top: 1.1rem; }
.bio-story em { color: var(--light); }

/* touch: card at mid-screen reveals true color (same as hover) */
.work-grid li.reveal-color figure::after,
.work-grid li.reveal-color figure::before { opacity: 0; }
.work-grid li.reveal-color figure img,
.work-grid li.reveal-color figure video { filter: grayscale(0) contrast(1) brightness(1); }
/* touch reveal breathes slower than the desktop hover */
@media (hover: none), (max-width: 700px) {
  /* base state governs the return to B&W (fade ON) — slow, symmetric ease */
  .work-grid figure img,
  .work-grid figure video { transition: filter 1.7s cubic-bezier(.45,.05,.25,1), transform 1.2s cubic-bezier(.22,1,.36,1); }
  .work-grid figure::after,
  .work-grid figure::before { transition: opacity 1.7s cubic-bezier(.45,.05,.25,1); }
  /* reveal-color state governs the fade OFF (color in) — a touch quicker */
  .work-grid li.reveal-color figure img,
  .work-grid li.reveal-color figure video { transition: filter 1.1s cubic-bezier(.33,1,.45,1), transform 1.2s cubic-bezier(.22,1,.36,1); }
  .work-grid li.reveal-color figure::after,
  .work-grid li.reveal-color figure::before { transition: opacity 1.1s cubic-bezier(.33,1,.45,1); }
}

/* bio pull quote */
.bio-quote {
  margin-top: 2.6rem; max-width: 62ch;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.65;
  color: var(--light);
  border-left: 2px solid var(--accent); padding-left: 1.6rem;
}

/* ============ v10 — no dead scroll: content overlaps the released clip ============ */
.cinematic { margin-bottom: -50vh; }
.cinematic.strip { margin-bottom: -68vh; }
.statement, .work, .featured, .services, .bio, .contact, footer {
  position: relative; z-index: 2; background: var(--bg);
}
.cinematic { z-index: 1; }