/* Layout: a camera viewfinder world. Black stage, poster-weight condensed type, every piece of work framed as footage.
   One accent: the REC red the artist already uses in his reel typography. */
:root{
  --bg:#F7F6F2;          /* light paper */
  --panel:#ECEAE4;
  --fg:#121212;          /* ink */
  --muted:#6B6761;
  --line:rgba(18,18,18,.12);
  --rec:#E5321F;         /* REC light, deepened to read on paper */
  --display:"Big Shoulders Display", "Oswald", Impact, sans-serif;
  --body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.2,.75,.15,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,video{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--rec); outline-offset:3px}
::selection{background:var(--rec); color:#fff}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
em{font-style:normal; color:var(--rec)}

/* film grain */
.grain{position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:var(--noise); animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}

/* REC dot */
.rec{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rec); box-shadow:0 0 10px var(--rec); animation:rec 1.2s steps(2,start) infinite; vertical-align:middle}
@keyframes rec{to{opacity:.15}}

/* ---------- Custom cursor ---------- */
.cursor{position:fixed; left:0; top:0; z-index:100; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--fg); mix-blend-mode:difference; pointer-events:none; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s; display:grid; place-items:center}
.cursor span{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#000; opacity:0; transition:opacity .2s}
.cursor.play{width:86px; height:86px; margin:-43px 0 0 -43px; background:var(--fg)}
.cursor.play span{opacity:1}
.cursor.link{width:40px; height:40px; margin:-20px 0 0 -20px}
@media (hover:none), (pointer:coarse){ .cursor{display:none} }

/* ---------- Iris intro ---------- */
.iris{position:fixed; inset:0; z-index:200; display:grid; place-items:center; pointer-events:none}
.iris svg{position:absolute; width:max(160vw,160vh); height:max(160vw,160vh)}
.iris path{fill:#EFEDE8; stroke:#D8D5CE; stroke-width:.4}
.iris-word{position:relative; font:900 clamp(40px,8vw,110px)/1 var(--display); letter-spacing:.02em; color:var(--fg); text-transform:uppercase}
.iris.done{display:none}

/* ---------- Nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:calc(16px + env(safe-area-inset-top,0px)) var(--gutter) 16px; transition:background .4s, backdrop-filter .4s}
.nav.solid{background:rgba(247,246,242,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.logo{display:flex; align-items:center; gap:10px; font:700 24px/1 var(--display); letter-spacing:.02em; text-decoration:none}
.logo span{color:var(--rec)}
.nav nav{display:flex; gap:28px}
.nav nav a{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--muted); transition:color .2s}
.nav nav a:hover{color:var(--fg)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font:600 13px/1 var(--body); letter-spacing:.04em; text-transform:uppercase; transition:background .3s, color .3s, border-color .3s; white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn-solid{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn-solid:hover{background:var(--rec); border-color:var(--rec); color:#fff}
@media (max-width:860px){ .nav nav{display:none} .nav .btn{padding:11px 16px; font-size:11px} }

/* ---------- Hero ---------- */
.hero{position:relative; padding:calc(88px + env(safe-area-inset-top,0px)) var(--gutter) clamp(32px,5vw,64px)}
.viewfinder{position:relative; width:100%; aspect-ratio:2.39/1; background:#000; overflow:hidden; border-radius:4px}
.viewfinder video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 1s ease}
#reelB{opacity:0}
.vf-ui{position:absolute; inset:0; pointer-events:none; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#fff}
.vf-ui .c{position:absolute; width:26px; height:26px; border:solid rgba(255,255,255,.8); border-width:0}
.vf-ui .tl{top:16px; left:16px; border-top-width:1.5px; border-left-width:1.5px}
.vf-ui .tr{top:16px; right:16px; border-top-width:1.5px; border-right-width:1.5px}
.vf-ui .bl{bottom:16px; left:16px; border-bottom-width:1.5px; border-left-width:1.5px}
.vf-ui .br{bottom:16px; right:16px; border-bottom-width:1.5px; border-right-width:1.5px}
.vf-top,.vf-bottom{position:absolute; left:52px; right:52px; display:flex; justify-content:space-between; gap:16px; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vf-top{top:24px} .vf-bottom{bottom:24px}
.vf-top span:first-child{display:flex; align-items:center; gap:8px}
.focus{position:absolute; left:50%; top:50%; width:64px; height:44px; margin:-22px 0 0 -32px; border:1px solid rgba(255,255,255,.7); transition:left .5s var(--ease), top .5s var(--ease), border-color .3s}
.focus.lock{border-color:#5BFF7A}
@media (max-width:700px){ .vf-bottom span:nth-child(2), .vf-top span:last-child{display:none} .vf-top,.vf-bottom{left:44px; right:44px} .viewfinder{aspect-ratio:4/5} }

.hero-copy{display:grid; gap:20px; margin-top:clamp(20px,3vw,40px)}
.kicker{color:var(--muted)}
.hero-title{margin:0; font:900 clamp(84px, 19vw, 300px)/.8 var(--display); letter-spacing:-.01em; text-transform:uppercase; display:grid}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.02em}
.hero-title .split{display:inline-block}
.hero-title .split .ch{display:inline-block; will-change:transform}
.hero-title .outline{color:transparent; -webkit-text-stroke:2px var(--fg)}
.hero-foot{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap}
.motto{margin:0; font:700 clamp(26px,3vw,40px)/1.05 var(--display); text-transform:uppercase; letter-spacing:.01em}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:22px}
.marquee-track{display:flex; width:max-content; animation:marq 45s linear infinite}
.marquee span{font:700 clamp(26px,3.4vw,46px)/1 var(--display); text-transform:uppercase; padding-inline:28px; display:flex; align-items:center; gap:56px; white-space:nowrap}
.marquee span::after{content:"●"; font-size:.35em; color:var(--rec)}
.marquee span:nth-child(even){color:transparent; -webkit-text-stroke:1px var(--muted)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Section heads ---------- */
section{position:relative}
.work,.grade,.photo,.services,.about,.contact{padding:clamp(80px,11vw,170px) var(--gutter) 0}
.sec-head{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,32px); align-items:end; margin-bottom:clamp(36px,5vw,72px)}
.label{grid-column:1 / span 3; color:var(--muted); margin:0}
.big{grid-column:4 / span 6; margin:0; font:900 clamp(52px,8vw,128px)/.86 var(--display); text-transform:uppercase; letter-spacing:-.005em}
.sub{grid-column:10 / span 3; margin:0; color:var(--muted); font-size:15px}
@media (max-width:900px){ .sec-head{grid-template-columns:minmax(0,1fr)} .sec-head > *{grid-column:1 / -1} }

/* ---------- Work ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.chip{border:1px solid var(--line); background:transparent; padding:10px 16px; border-radius:999px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all .25s}
.chip:hover{color:var(--fg); border-color:var(--fg)}
.chip[aria-selected="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.chip sup{margin-left:6px; opacity:.6}
.grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); grid-auto-flow:dense}
.card{position:relative; margin:0; aspect-ratio:9/16; background:#000; overflow:hidden; border-radius:6px; cursor:pointer; isolation:isolate}
.card.wide{grid-column:span 2; aspect-ratio:auto}
.card img,.card video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), opacity .4s}
.card video{opacity:0}
.card.playing video{opacity:1}
.card:hover img,.card:hover video{transform:scale(1.04)}
.card .meta{position:absolute; inset:auto 0 0 0; z-index:2; padding:18px; display:grid; gap:6px; background:linear-gradient(transparent, rgba(0,0,0,.82))}
.card .meta .mono{color:rgba(255,255,255,.75)}
.card .meta strong{font:700 clamp(20px,1.7vw,26px)/1 var(--display); text-transform:uppercase; letter-spacing:.01em}
.card .num{position:absolute; top:14px; left:14px; z-index:2; color:#fff; opacity:.8}
.card::after{content:""; position:absolute; inset:0; z-index:1; border:1px solid rgba(255,255,255,.08); border-radius:6px; pointer-events:none}
.card.hide{display:none}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .card .meta{padding:12px} .card .meta strong{font-size:17px} }

/* ---------- Grade slider ---------- */
.grader{position:relative; aspect-ratio:16/9; max-height:80vh; width:100%; background:#000; border-radius:6px; overflow:hidden; --pos:50%; touch-action:pan-y; user-select:none}
.grader video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.grade-log{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.grade-log video{filter:saturate(.22) contrast(.55) brightness(1.24) sepia(.06)}
.grade-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; translate:-1px 0; background:var(--fg); z-index:3; pointer-events:none}
.grade-handle span{position:absolute; top:50%; left:50%; translate:-50% -50%; width:58px; height:58px; border-radius:50%; background:var(--fg); display:grid; place-items:center}
.grade-handle span::before{content:"⟷"; color:var(--bg); font-size:20px}
.g-tag{position:absolute; top:18px; z-index:3; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(6px)}
.g-tag.l{left:18px} .g-tag.r{right:18px}
.grader input{position:absolute; inset:0; z-index:4; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize}
.grader:has(input:focus-visible) .grade-handle span{outline:2px solid var(--rec); outline-offset:4px}

/* ---------- Photo strip ---------- */
.photo{overflow:hidden}
.strip{display:flex; gap:clamp(10px,1.4vw,20px); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:16px; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--panel) transparent; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.strip.drag{cursor:grabbing; scroll-snap-type:none}
.strip figure{flex:0 0 auto; margin:0; height:clamp(260px, 52vh, 560px); scroll-snap-align:start; border-radius:6px; overflow:hidden; background:var(--panel); position:relative}
.strip img{height:100%; width:auto; max-width:none; object-fit:cover; pointer-events:none; user-select:none; transition:transform 1.2s var(--ease)}
.strip figure:hover img{transform:scale(1.03)}
.strip figcaption{position:absolute; left:14px; bottom:12px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- Services ---------- */
.svc{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.svc li{display:grid; grid-template-columns:60px minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:baseline; padding-block:clamp(22px,3vw,38px); border-bottom:1px solid var(--line); transition:padding .4s var(--ease), color .3s}
.svc .n{color:var(--rec)}
.svc h3{margin:0; font:800 clamp(34px,5vw,76px)/.9 var(--display); text-transform:uppercase; transition:transform .5s var(--ease)}
.svc p{margin:0; color:var(--muted); max-width:42ch}
.svc li:hover h3{transform:translateX(18px)}
.svc:hover li:not(:hover){color:rgba(18,18,18,.3)}
.svc-preview{position:fixed; left:0; top:0; z-index:40; width:220px; aspect-ratio:9/16; border-radius:8px; overflow:hidden; pointer-events:none; opacity:0; transform:scale(.8); transition:opacity .3s, transform .4s var(--ease); background:#000}
.svc-preview.on{opacity:1; transform:scale(1)}
.svc-preview video{width:100%; height:100%; object-fit:cover}
@media (max-width:760px){ .svc li{grid-template-columns:36px minmax(0,1fr)} .svc p{grid-column:2} .svc-preview{display:none} }

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,32px)}
.about-grid .label{grid-column:1 / span 3}
.about-body{grid-column:4 / span 9; display:grid; gap:48px; min-width:0}
.statement{margin:0; font:700 clamp(32px,4.6vw,72px)/1 var(--display); text-transform:uppercase}
.statement .w{opacity:.18; transition:opacity .3s}
.statement .w.on{opacity:1}
.about-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; color:var(--muted)}
.about-cols p{margin:0; max-width:52ch}
.about-cols a{color:var(--fg)}
.kit{margin:0; display:grid; gap:0; border-top:1px solid var(--line)}
.kit div{display:flex; justify-content:space-between; gap:16px; padding-block:14px; border-bottom:1px solid var(--line)}
.kit dd{margin:0; color:var(--fg); font-weight:500; text-align:right}
@media (max-width:900px){ .about-grid{grid-template-columns:minmax(0,1fr)} .about-grid > *{grid-column:1 / -1} .about-cols{grid-template-columns:minmax(0,1fr)} }

/* ---------- Contact ---------- */
.contact{padding-bottom:clamp(60px,8vw,120px)}
.cta-giant{display:grid; margin:24px 0 clamp(40px,5vw,72px); text-decoration:none; font:900 clamp(90px,21vw,360px)/.8 var(--display); text-transform:uppercase; letter-spacing:-.01em}
.cta-giant .row{display:flex; align-items:center; gap:.08em}
.cta-giant em{color:transparent; -webkit-text-stroke:2px var(--rec); transition:color .4s}
.cta-giant:hover em{color:var(--rec)}
.cta-giant .arrow{font-style:normal; font-size:.4em; color:var(--rec); transition:transform .5s var(--ease)}
.cta-giant:hover .arrow{transform:translate(.1em,-.1em) rotate(8deg)}
.contact-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-top:1px solid var(--line); padding-top:28px}
.contact-row div{display:grid; gap:10px; align-content:start}
.contact-row .mono{color:var(--muted)}
.contact-row a,.contact-row p{margin:0; font:700 clamp(22px,2.2vw,32px)/1.1 var(--display); text-transform:uppercase; text-decoration:none; overflow-wrap:anywhere}
.contact-row a:hover{color:var(--rec)}
.copy{justify-self:start; background:none; border:1px solid var(--line); border-radius:999px; padding:7px 12px; color:var(--muted); cursor:pointer}
.copy:hover{color:var(--fg); border-color:var(--fg)}
@media (max-width:760px){ .contact-row{grid-template-columns:minmax(0,1fr)} }

.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px var(--gutter) calc(80px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); color:var(--muted)}

/* ---------- Scroll timeline HUD ---------- */
.timeline{position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:55; display:flex; align-items:center; gap:16px; pointer-events:none; mix-blend-mode:difference; color:#fff}
.tl-bar{flex:1; height:1px; background:rgba(255,255,255,.3); position:relative}
.tl-bar i{position:absolute; left:0; top:-1px; height:3px; width:0; background:#fff}
@media (max-width:600px){ .timeline{display:none} }

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(247,246,242,.97); backdrop-filter:blur(10px); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:calc(56px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px))}
.lb-frame{margin:0; display:grid; gap:14px; justify-items:center; min-width:0; max-height:100%}
.lb-frame video{max-height:calc(100svh - 170px); max-width:100%; border-radius:6px; background:#000}
.lb-frame figcaption{display:grid; gap:4px; text-align:center}
.lb-frame strong{font:800 clamp(24px,3vw,40px)/1 var(--display); text-transform:uppercase}
.lb-frame .mono{color:var(--muted)}
.lb-close{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:var(--gutter); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; font-size:16px}
.lb-nav{width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; font-size:20px}
.lb-close:hover,.lb-nav:hover{border-color:var(--fg)}
@media (max-width:700px){ .lightbox{grid-template-columns:minmax(0,1fr)} .lb-nav{position:absolute; bottom:calc(20px + env(safe-area-inset-bottom,0px))} .lb-nav.prev{left:var(--gutter)} .lb-nav.next{right:var(--gutter)} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .iris{display:none}
}

/* ---------- Cars ---------- */
.cars,.realestate{padding:clamp(80px,11vw,170px) var(--gutter) 0}
.feature{position:relative; margin:0 0 clamp(12px,1.4vw,20px); aspect-ratio:16/9; max-height:82vh; width:100%; background:#000; border-radius:6px; overflow:hidden; cursor:pointer}
.feature video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.feature:hover video{transform:scale(1.03)}
.feature::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.75)); pointer-events:none}
.feature .vf-ui{z-index:2}
.feature-cap{position:absolute; left:clamp(20px,3vw,52px); bottom:clamp(20px,3vw,44px); z-index:3; display:grid; gap:8px}
.feature-cap .mono{color:rgba(255,255,255,.75)}
.feature-cap strong{font:900 clamp(48px,8vw,140px)/.82 var(--display); text-transform:uppercase}
.speedo{font-variant-numeric:tabular-nums; color:#fff}
.speed{transform-origin:left center}
@media (max-width:700px){ .feature{aspect-ratio:4/5} .feature .vf-top span:last-child{display:inline} }

/* ---------- Real estate ---------- */
.re-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:clamp(24px,3vw,40px)}
.re-stats div{padding:22px 0; display:grid; gap:6px}
.re-stats div + div{padding-left:24px; border-left:1px solid var(--line)}
.re-stats strong{font:900 clamp(44px,6vw,92px)/.85 var(--display); font-variant-numeric:tabular-nums}
.re-stats .mono{color:var(--muted)}
.re-photos{margin-top:clamp(48px,6vw,90px); display:grid; gap:20px}
.re-photos .label{grid-column:auto}
@media (max-width:600px){ .re-stats{grid-template-columns:minmax(0,1fr)} .re-stats div + div{padding-left:0; border-left:0; border-top:1px solid var(--line)} }

/* ---------- light theme: anything layered on footage stays white ---------- */
.cursor{background:#fff}
.cursor.play{background:#fff}
.card .meta,.card .num,.feature-cap,.feature-cap strong,.strip figcaption{color:#fff}
.grade-handle{background:#fff}
.grade-handle span{background:#fff}
.grade-handle span::before{color:#121212}
.viewfinder,.card,.feature,.grader{box-shadow:0 30px 60px -40px rgba(18,18,18,.45)}
.lb-frame video{box-shadow:0 40px 80px -40px rgba(18,18,18,.5)}
.marquee span:nth-child(even){-webkit-text-stroke:1px var(--fg); color:transparent}
.hero-title .outline{-webkit-text-stroke:2px var(--fg)}