/* ===========================================================================
   Single Purpose — production site styles (self-contained)
   Sentient (display) · Satoshi (body & labels) — Fontshare
   Steel "Blue Hour" accent on warm cinematic ink.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ---- Fonts: self-hosted Sentient + Satoshi (Fontshare, ITF FFL) + Courier Prime (Google OFL) -- */
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Extralight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-ExtralightItalic.woff2') format('woff2');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('assets/fonts/Sentient-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-BlackItalic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}

:root {
  /* ink */
  --ink-900:#14110D; --ink-800:#1B1714; --ink-700:#2A241F; --ink-600:#3B332B;
  --ink-500:#574D42; --ink-400:#7A6F60; --ink-300:#9D9180;
  /* stone / paper */
  --stone-300:#BCB09D; --stone-200:#D9D0BF; --stone-100:#EFE8DA;
  --paper:#F4EEE2; --cloud:#FBF8F1; --white:#fff;
  /* steel accent */
  --steel-700:#3F6080; --steel-600:#557CA0; --steel-500:#6F97BD;
  --steel-400:#8DAFCE; --steel-300:#ABC4DC; --steel-200:#CBDAE9; --steel-100:#E4ECF3;
  --accent:var(--steel-500); --accent-strong:var(--steel-600); --accent-soft:var(--steel-100);
  --accent-ink:var(--ink-900);
  /* text */
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-400);
  --on-ink:var(--cloud); --on-ink-muted:var(--stone-300);
  /* lines */
  --border:rgba(27,23,20,.12); --border-strong:rgba(27,23,20,.22); --border-on-ink:rgba(251,248,241,.14);
  /* type */
  --display:'Sentient','Iowan Old Style',Georgia,serif;
  --sans:'Satoshi',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --label:'Satoshi',-apple-system,system-ui,sans-serif;
  /* shadow / motion */
  --shadow-md:0 8px 24px -8px rgba(20,17,13,.16),0 2px 6px rgba(20,17,13,.06);
  --shadow-lg:0 24px 60px -20px rgba(20,17,13,.26),0 6px 14px -8px rgba(20,17,13,.10);
  --shadow-xl:0 48px 120px -36px rgba(20,17,13,.40),0 12px 28px -16px rgba(20,17,13,.14);
  --glow:0 12px 40px -12px rgba(111,151,189,.55);
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1280px; --container-wide:1480px;
  --grain:url('./assets/textures/grain.png');
  --paper-tex:url('./assets/textures/paper-cream.jpg');
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--on-ink);
  background:var(--ink-900); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.06; letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--steel-200); color:var(--ink-900); }
:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(111,151,189,.5); border-radius:8px; }

/* ---- utilities ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px; }
.container-wide{ max-width:var(--container-wide); }
.eyebrow{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:12px; }
.eyebrow.rule::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; }
.eyebrow.dark{ color:var(--steel-400); }
.voice{ font-style:italic; color:var(--steel-400); }
.section{ padding:128px 0; }
.section-sm{ padding:88px 0; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px;
  padding:0 26px; font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em;
  border-radius:999px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease); }
.btn svg{ width:18px; height:18px; }
.btn-lg{ height:56px; padding:0 32px; font-size:16px; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-strong); transform:translateY(-1px); box-shadow:var(--glow); }
.btn-outline{ background:transparent; color:var(--cloud); border-color:var(--border-on-ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--steel-300); }
.btn-ghost{ background:transparent; color:var(--stone-200); }
.btn-ghost:hover{ background:var(--border-on-ink); }
.btn-ink{ background:var(--ink-800); color:var(--cloud); }
.btn-ink:hover{ background:var(--ink-700); transform:translateY(-1px); }

/* ---- tags ---- */
.tag{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; white-space:nowrap; }
.tag-outline{ border:1px solid var(--border-on-ink); color:var(--stone-200); }
.tag-soft{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--steel-300); }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; transition:background .28s var(--ease),border-color .28s var(--ease); border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(20,17,13,.82); backdrop-filter:saturate(1.2) blur(14px); border-bottom-color:var(--border-on-ink); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:var(--container-wide); margin-inline:auto; }
.brand{ display:inline-flex; align-items:center; gap:14px; }
.brand img{ height:34px; }
.brand-name{ font-family:var(--display); font-size:21px; color:var(--cloud); letter-spacing:-.01em; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a:not(.btn){ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone-300); padding:10px 16px; transition:color .16s var(--ease); }
.nav-links a:not(.btn):hover,.nav-links a:not(.btn).active{ color:var(--steel-400); }
.nav-sep{ width:1px; height:22px; background:var(--border-on-ink); margin:0 14px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--cloud); cursor:pointer; padding:8px; }
.nav-toggle svg{ width:26px; height:26px; }

/* ---- hero ---- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-veil{ position:absolute; inset:0; background:linear-gradient(to top,rgba(20,17,13,.92) 0%,rgba(20,17,13,.38) 46%,rgba(20,17,13,.55) 100%); }
.hero-grain{ position:absolute; inset:0; background-image:var(--grain); background-size:256px; opacity:.5; mix-blend-mode:soft-light; pointer-events:none; }
.hero-inner{ position:relative; width:100%; max-width:var(--container-wide); margin-inline:auto; padding:0 32px 92px; }
.hero h1{ font-size:clamp(46px,8.2vw,116px); line-height:1.0; letter-spacing:-.03em; color:var(--cloud); margin-top:24px; }
.hero .lead{ color:var(--stone-200); font-size:clamp(17px,2vw,21px); line-height:1.6; max-width:58ch; margin-top:26px; }
.hero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.scrollcue{ position:absolute; bottom:30px; right:max(32px,calc((100vw - var(--container-wide))/2 + 32px)); display:flex; align-items:center; gap:10px; color:var(--stone-300); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.scrollcue svg{ width:16px; height:16px; color:var(--steel-400); }

/* ---- philosophy ---- */
.philosophy{ background:var(--ink-900); text-align:center; }
.philosophy .lines{ font-family:var(--display); font-size:clamp(28px,4.4vw,56px); line-height:1.3; letter-spacing:-.02em; color:var(--stone-300); margin-top:30px; }
.philosophy .lines .one{ color:var(--cloud); display:block; margin-top:18px; }

/* ---- services (paper) ---- */
.paper-sec{ background-color:var(--paper); background-image:var(--paper-tex); background-size:cover; color:var(--text-body); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:56px; }
.sec-head h2{ color:var(--text-strong); font-size:clamp(32px,4vw,52px); margin-top:18px; }
.sec-head .note{ max-width:38ch; color:var(--text-muted); font-size:17px; }
.services{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:28px; overflow:hidden; }
.service{ background:var(--white); padding:48px; }
.service-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.service-ic{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; background:var(--accent-soft); color:var(--steel-700); }
.service-ic svg{ width:22px; height:22px; }
.service-n{ font-family:var(--mono); font-size:13px; color:var(--ink-300); letter-spacing:.1em; }
.service h3{ color:var(--text-strong); font-size:26px; margin-bottom:10px; }
.service p{ color:var(--text-muted); font-size:16px; line-height:1.6; }

/* ---- work / media cards ---- */
.work-sec{ background:var(--ink-800); }
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.media{ cursor:pointer; }
.media-well{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:28px; background:var(--ink-700); }
.media-well img,.media-well video{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .52s var(--ease); display:block; }
.media-well video{ position:absolute; inset:0; }
.media:hover .media-well img,.media:hover .media-well video{ transform:scale(1.045); }
.media-veil{ position:absolute; inset:0; background:linear-gradient(to top,rgba(20,17,13,.78) 0%,rgba(20,17,13,.1) 50%,rgba(20,17,13,0) 74%); }
.media-cap{ position:absolute; left:0; right:0; bottom:0; padding:26px; }
.media-cap .kind{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-300); margin-bottom:8px; }
.media-cap h3{ color:var(--cloud); font-size:28px; }
.media-cap .meta{ color:var(--stone-300); font-size:14px; margin-top:6px; }
.media.stack .media-well{ aspect-ratio:16/11; }
.media-below{ padding-top:18px; }
.media-below .kind{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-400); margin-bottom:8px; }
.media-below h3{ color:var(--cloud); font-size:26px; }
.media-below .blurb{ color:var(--stone-300); font-size:15px; margin-top:10px; max-width:46ch; }
.media-below .tags{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* ---- cta band ---- */
.cta{ position:relative; overflow:hidden; background:radial-gradient(120% 120% at 80% 0%,rgba(111,151,189,.22),transparent 55%),var(--ink-900); text-align:center; }
.cta h2{ color:var(--cloud); font-size:clamp(36px,6vw,78px); letter-spacing:-.03em; margin:22px auto 0; max-width:16ch; }
.cta p{ color:var(--stone-300); font-size:19px; margin:24px auto 0; max-width:46ch; }
.cta .btn{ margin-top:40px; }

/* ---- page header (work/contact) ---- */
.page-head{ padding:160px 0 56px; background:var(--ink-900); }
.page-head h1{ color:var(--cloud); font-size:clamp(44px,7vw,104px); line-height:1.02; letter-spacing:-.03em; margin-top:24px; max-width:15ch; }

/* ---- filters ---- */
.filters{ display:flex; gap:10px; margin-top:44px; flex-wrap:wrap; }
.filter{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:9px 16px;
  border-radius:999px; cursor:pointer; border:1px solid var(--border-on-ink); background:transparent; color:var(--stone-300); transition:all .16s var(--ease); }
.filter.active{ background:var(--accent); color:var(--ink-900); border-color:transparent; }

/* ---- approach steps ---- */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:120px 1fr; gap:40px; padding:48px 0; border-top:1px solid var(--border-on-ink); }
.step-n{ font-family:var(--mono); font-size:15px; color:var(--steel-400); letter-spacing:.1em; }
.step-body{ display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:baseline; }
.step-body h2{ color:var(--cloud); font-size:clamp(34px,4.5vw,60px); }
.step-body p{ color:var(--stone-300); font-size:18px; line-height:1.66; }
.values{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-on-ink); border-radius:18px; overflow:hidden; margin-top:36px; }
.value{ background:var(--ink-800); padding:48px; }
.value h3{ color:var(--cloud); font-size:28px; margin-bottom:10px; }
.value p{ color:var(--stone-300); font-size:16px; line-height:1.6; }

/* ---- contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:start; }
.contact-info{ margin-top:40px; display:flex; flex-direction:column; gap:18px; }
.contact-line{ display:flex; align-items:center; gap:14px; color:var(--stone-200); font-size:16px; }
.contact-line .ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:rgba(251,248,241,.06); color:var(--steel-400); }
.contact-line .ic svg{ width:18px; height:18px; }
.form-card{ background:var(--ink-800); border:1px solid var(--border-on-ink); border-radius:28px; padding:40px; box-shadow:var(--shadow-xl); }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-300); }
.field input,.field textarea{ width:100%; padding:13px 16px; background:var(--ink-700); border:1px solid var(--border-on-ink);
  border-radius:12px; color:var(--cloud); font-family:var(--sans); font-size:16px; outline:none; transition:border-color .16s var(--ease),box-shadow .16s var(--ease); }
.field input:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,151,189,.4); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:999px;
  cursor:pointer; border:1px solid var(--border-on-ink); background:transparent; color:var(--stone-300); transition:all .16s var(--ease); }
.chip.on{ background:var(--accent); color:var(--ink-900); border-color:transparent; }
.form-ok{ text-align:center; padding:40px 0; }
.form-ok .ic{ display:inline-flex; width:64px; height:64px; border-radius:999px; background:var(--accent-soft); color:var(--steel-700); align-items:center; justify-content:center; margin-bottom:20px; }
.form-ok h3{ color:var(--cloud); font-size:30px; }
.form-ok p{ color:var(--stone-300); max-width:34ch; margin:8px auto 0; }

/* ---- footer ---- */
.footer{ background:var(--ink-900); border-top:1px solid var(--border-on-ink); }
.footer-inner{ padding:88px 32px 40px; max-width:var(--container-wide); margin-inline:auto; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-400); font-weight:400; margin-bottom:14px; }
.footer-col a,.footer-col span{ display:block; color:var(--stone-300); font-size:15px; margin-bottom:12px; transition:color .16s var(--ease); }
.footer-col a:hover{ color:var(--steel-300); }
.footer-about p{ color:var(--stone-300); font-size:15px; line-height:1.6; max-width:320px; margin:22px 0 24px; }
.footer-bottom{ margin-top:64px; padding-top:24px; border-top:1px solid var(--border-on-ink); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom .copy{ font-family:var(--mono); font-size:12px; color:var(--ink-400); }

/* ---- reel modal ---- */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(10,8,6,.86); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:32px; }
.modal.open{ display:flex; }
.modal-box{ width:min(1040px,92vw); aspect-ratio:16/9; border-radius:28px; overflow:hidden; position:relative; box-shadow:var(--shadow-xl); border:1px solid var(--border-on-ink); }
.modal-box img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.modal-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,17,13,.3); }
.modal-play span{ display:inline-flex; width:84px; height:84px; border-radius:999px; background:var(--accent); color:var(--ink-900); align-items:center; justify-content:center; box-shadow:var(--glow); }
.modal-play span svg{ width:34px; height:34px; }
.modal-close{ position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:999px; border:none; background:rgba(20,17,13,.6); color:var(--cloud); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-close svg{ width:20px; height:20px; }

/* ---- about ---- */
.about-split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
.about-portrait{ border-radius:28px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.about-portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.about-lead{ color:var(--stone-200); font-size:clamp(19px,2.2vw,26px); line-height:1.5; font-family:var(--display); }
.about-body{ color:var(--stone-300); font-size:17px; line-height:1.7; margin-top:24px; max-width:54ch; }
.about-sign{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--steel-400); margin-top:28px; }
.bts-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.bts-cell{ aspect-ratio:4/3; border-radius:18px; overflow:hidden; }
.bts-cell.tall{ aspect-ratio:3/4; }
.bts-cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .5s var(--ease); }
.bts-cell:hover img{ transform:scale(1.05); }
.credo{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:8px; }
.credo .item h3{ color:var(--cloud); font-size:24px; margin-bottom:8px; }
.credo .item p{ color:var(--stone-300); font-size:15px; line-height:1.6; }

/* ---- work: true-aspect masonry of looping video ---- */
.reel{ columns:3; column-gap:22px; column-fill:balance; }
.reel-item{ break-inside:avoid; margin:0 0 22px; position:relative; border-radius:18px; overflow:hidden; cursor:pointer; background:var(--ink-700); display:block; }
.reel-well{ position:relative; width:100%; }
.reel-well img.poster,.reel-item video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block; transition:transform .55s var(--ease); }
.reel-item:hover img.poster,.reel-item:hover video{ transform:scale(1.04); }
.reel-veil{ position:absolute; inset:0; background:linear-gradient(to top,rgba(20,17,13,.8) 0%,rgba(20,17,13,0) 46%); opacity:0; transition:opacity .35s var(--ease); }
.reel-item:hover .reel-veil{ opacity:1; }
.reel-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px; opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease),transform .35s var(--ease); }
.reel-item:hover .reel-cap{ opacity:1; transform:none; }
.reel-cap .kind{ font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-300); margin-bottom:6px; }
.reel-cap h3{ color:var(--cloud); font-size:24px; }

/* ---- about: gapless uniform photo wall (true ratios) ---- */
.photo-wall{ columns:4; column-gap:0; }
.photo-cell{ break-inside:avoid; overflow:hidden; line-height:0; }
.photo-cell img{ width:100%; display:block; filter:grayscale(1); transition:transform .6s var(--ease); }
.photo-cell:hover img{ transform:scale(1.06); }
.mission{ font-family:var(--display); font-size:clamp(28px,4vw,52px); line-height:1.22; letter-spacing:-.02em; color:var(--cloud); max-width:20ch; }
.mission .voice{ color:var(--steel-400); }
.mission-body{ color:var(--stone-300); font-size:clamp(17px,1.6vw,20px); line-height:1.7; max-width:60ch; margin-top:28px; }

/* ---- client wall (home) ---- */
.client-wall{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:44px 56px; margin-top:56px; }
.client-cell{ height:88px; display:flex; align-items:center; justify-content:center; }
.client-cell img{ object-fit:contain; opacity:.46; transition:opacity .3s var(--ease); }
.client-cell:hover img{ opacity:1; }

/* ---- work: atmospheric wall + featured ---- */
.work-wall{ position:relative; height:100dvh; min-height:640px; overflow:hidden; background:var(--ink-900); }
.wall-grid{ display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; width:100%; height:100%; }
.wall-cell video{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) saturate(.5); display:block; }
.wall-cell{ text-decoration:none; }
.wall-cell{ position:relative; overflow:hidden; }
.wall-cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) saturate(.5); }
.wall-vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 0%,rgba(20,17,13,0) 38%,rgba(20,17,13,.55) 100%),linear-gradient(to top,rgba(20,17,13,.9) 0%,rgba(20,17,13,0) 40%); }
.wall-head{ position:absolute; left:0; right:0; bottom:0; padding:0 0 44px; pointer-events:none; }
.wall-head-inner{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.wall-head h1{ color:var(--cloud); font-size:clamp(34px,5vw,68px); line-height:1.02; letter-spacing:-.02em; margin-top:14px; }
.wall-scroll{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-300); display:inline-flex; align-items:center; gap:8px; }
.wall-scroll svg{ width:14px; height:14px; }
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; margin-top:40px; }
.feat-item{ display:block; cursor:pointer; }
.feat-well{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border-on-ink); background:var(--ink-800); }
.feat-well img,.feat-well video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.feat-item:hover .feat-well img,.feat-item:hover .feat-well video{ transform:scale(1.04); }
.feat-play{ position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:999px; background:rgba(20,17,13,.55); backdrop-filter:blur(6px); border:1px solid var(--border-on-ink); display:flex; align-items:center; justify-content:center; color:var(--cloud); }
.feat-play svg{ width:17px; height:17px; }
.feat-cap{ padding-top:16px; }
.feat-cap .kind{ font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-300); display:block; margin-bottom:6px; }
.feat-cap h3{ color:var(--cloud); font-size:clamp(21px,2.2vw,27px); letter-spacing:-.01em; transition:color .28s var(--ease); }
.feat-item:hover .feat-cap h3{ color:var(--steel-300); }

/* ---- film page ---- */
.film-page{ padding:120px 0 128px; }
.back-link{ display:inline-flex; align-items:center; gap:9px; margin-bottom:34px; font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-300); transition:color .16s var(--ease); }
.back-link:hover{ color:var(--steel-300); }
.back-link svg{ width:15px; height:15px; }
.film-title{ color:var(--cloud); font-size:clamp(34px,5.2vw,68px); line-height:1.04; letter-spacing:-.02em; margin:18px 0 14px; max-width:20ch; }
.film-meta{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-300); display:flex; gap:14px; align-items:center; margin-bottom:34px; }
.film-meta .sep{ opacity:.4; }
.film-player{ position:relative; width:100%; aspect-ratio:16/9; border-radius:28px; overflow:hidden; border:1px solid var(--border-on-ink); box-shadow:var(--shadow-xl); background:#000; }
.film-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.film-blurb{ font-family:var(--display); font-style:italic; font-size:clamp(19px,2.2vw,26px); line-height:1.4; color:var(--stone-200); max-width:34ch; margin-top:34px; }
.more-sec{ margin-top:120px; }
.more-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin-top:30px; }
.more-row{ display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:16px; padding:20px 4px; border-top:1px solid var(--border-on-ink); }
.more-t{ font-family:var(--display); font-size:clamp(19px,2vw,24px); letter-spacing:-.01em; color:var(--cloud); transition:color .28s var(--ease); }
.more-row:hover .more-t{ color:var(--steel-300); }
.more-k{ font-family:var(--label); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone-300); }
.more-i{ display:inline-flex; color:var(--stone-300); transition:transform .28s var(--ease),color .28s var(--ease); }
.more-i svg{ width:14px; height:14px; }
.more-row:hover .more-i{ color:var(--steel-300); transform:translate(2px,-2px); }

/* ---- reveal ---- */
.reveal{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ---- responsive ---- */
@media (max-width:900px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(320px,82vw); flex-direction:column; align-items:flex-start;
    background:var(--ink-800); padding:96px 28px; gap:6px; transform:translateX(100%); transition:transform .3s var(--ease); border-left:1px solid var(--border-on-ink); }
  .nav-links.open{ transform:none; }
  .nav-links .nav-sep{ display:none; }
  .nav-links .btn{ margin-top:12px; }
  .nav-toggle{ display:inline-flex; z-index:60; }
  .services,.work-grid,.values,.contact-grid,.footer-grid,.field-row,.step-body,.step,.about-split,.credo{ grid-template-columns:1fr; }
  .bts-strip{ grid-template-columns:1fr 1fr; }
  .credo{ gap:32px; }
  .reel{ columns:2; }
  .photo-wall{ columns:3; }
}
@media (max-width:600px){
  .reel{ columns:1; }
  .photo-wall{ columns:2; }
  .step{ gap:16px; }
  .section{ padding:88px 0; }
  .contact-grid{ gap:40px; }
  .footer-grid{ gap:32px; }
}

/* ---- about ---- */
.lead-display{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,44px); line-height:1.32; letter-spacing:-.02em; color:var(--cloud); margin:0; max-width:34ch; }
.body-copy{ color:var(--stone-300); font-size:18px; line-height:1.72; max-width:64ch; margin-top:28px; }
.about-photos{ background:var(--ink-800); padding:88px 0 0; }
.photo-wall{ columns:4; column-gap:0; }
.photo-wall img{ width:100%; display:block; break-inside:avoid; filter:grayscale(1); }
.credo{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px; }
.credo h3{ color:var(--cloud); font-size:26px; margin:0 0 12px; }
.credo p{ color:var(--stone-300); font-size:16px; line-height:1.66; margin:0; }
@media (max-width:900px){ .credo{ grid-template-columns:1fr; gap:28px; } }