/* ============================================================
   ABIN VARGHESE — Cinematographer + Video Editor
   Dark editorial system. Neo-grotesque + mono fine print.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#08090b;
  --bg-2:#0c0e11;
  --bg-3:#101317;
  --ink:#f3f4f5;
  --ink-2:#b6bbc1;
  --dim:#787e86;
  --dim-2:#565c64;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --accent:#4db6e8;
  --accent-deep:#2f93c4;
  --grotesk:"Helvetica Neue","Arimo",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --maxw:1680px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
#selected-work{scroll-margin-top:96px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--grotesk);
  font-weight:400;
  line-height:1.4;
  overflow-x:hidden;
  letter-spacing:-.01em;
}
::selection{background:var(--accent);color:#04181f}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.grain-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- fine print ---------- */
.fp{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
.fp-ink{color:var(--ink-2)}
.fp-accent{color:var(--accent)}
.label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim-2);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;padding:18px var(--pad);
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,padding .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,9,11,.72);backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-soft);padding-top:14px;padding-bottom:14px;
}
.nav__brand{display:flex;flex-direction:column;line-height:1.1;font-weight:600;font-size:24px;letter-spacing:-.01em}
.nav__brand span:last-child{color:var(--dim);font-weight:400;font-size:14px;letter-spacing:.02em}
.nav__center{display:flex;align-items:center;gap:14px}
.barcode{display:flex;align-items:center;gap:3px;height:14px}
.barcode i{display:block;width:3px;height:100%;background:var(--accent);opacity:.55;transform-origin:center;animation:bar 1.8s ease-in-out infinite}
@keyframes bar{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:.9}}
.nav__menu{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.nav__actions{display:flex;align-items:center;gap:22px}
.nav__sep{width:1px;height:12px;background:var(--line);flex:none}
/* hamburger */
.nav__burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer;background:transparent;border:none;padding:0;position:relative}
.nav__burger span{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s;transform-origin:center}
.nav__burger.is-active span{background:var(--accent)}
.nav__burger:hover span{background:var(--accent)}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav__menu a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding:4px 0;transition:color .25s;white-space:nowrap;
}
.nav__menu a .plus{color:var(--accent);margin-right:5px}
.nav__menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .35s cubic-bezier(.2,.7,.2,1)}
.nav__menu a:hover{color:var(--ink)}
.nav__menu a:hover::after,.nav__menu a.active::after{right:0}
.nav__menu a.active{color:var(--ink)}

/* ---------- slide-out menu (About / Contact) ---------- */
.navmenu{position:fixed;inset:0;z-index:300;pointer-events:none}
.navmenu.open{pointer-events:auto}
.navmenu__bg{position:absolute;inset:0;background:rgba(4,5,7,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
.navmenu.open .navmenu__bg{opacity:1}
.navmenu__panel{position:absolute;top:0;right:0;height:100%;width:min(440px,90vw);
  background:var(--bg-2);border-left:1px solid var(--line);
  padding:clamp(22px,3vw,34px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.navmenu.open .navmenu__panel{transform:none}
.navmenu__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.navmenu__close{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;display:inline-flex;gap:8px;align-items:center;transition:.28s}
.navmenu__close span{color:var(--accent)}
.navmenu__close:hover{border-color:var(--accent);color:var(--ink)}
.navmenu__links{display:flex;flex-direction:column;padding:clamp(24px,5vw,48px) 0}
.navmenu__links a{display:flex;align-items:baseline;gap:16px;padding:clamp(14px,2vw,22px) 0;border-top:1px solid var(--line-soft);
  font-size:clamp(34px,6vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);transition:color .3s,padding .3s;position:relative}
.navmenu__links a:last-child{border-bottom:1px solid var(--line-soft)}
.navmenu__i{display:none;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--accent);align-self:flex-start;margin-top:6px}
.navmenu__links a.navmenu__work{display:none}
.navmenu__ar{margin-left:auto;font-size:.4em;color:var(--dim);transition:.3s}
.navmenu__links a:hover{color:var(--accent);padding-left:10px}
.navmenu__links a:hover .navmenu__ar{color:var(--accent);transform:translate(3px,-3px)}
.navmenu__links a.active{color:var(--accent)}
.navmenu__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--line-soft)}
.navmenu__sub{display:none;flex-direction:column;gap:2px;padding-bottom:8px}
.navmenu__sub .label{margin-bottom:8px}
.navmenu__sub a{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-2);padding:7px 0;transition:color .25s,padding .25s}
.navmenu__sub a:hover{color:var(--accent);padding-left:8px}
.navmenu__sub a.active{color:var(--accent)}
.navmenu__mail{font-size:clamp(15px,1.4vw,18px);font-weight:500;color:var(--ink-2);transition:color .3s;word-break:break-word}
.navmenu__mail:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.navmenu__panel,.navmenu__bg{transition:none}}

/* ---------- layout primitives ---------- */
.section{padding:clamp(80px,10vw,160px) var(--pad)}
.section--tight{padding:clamp(48px,6vw,90px) var(--pad)}
.bound{max-width:var(--maxw);margin:0 auto}
.eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:36px}
.eyebrow .idx{color:var(--accent)}
.rule{height:1px;background:var(--line);width:100%}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero__media{position:absolute;inset:-8% 0 -8% 0;will-change:transform}
.hero__media img{transform:scale(1.06);animation:heroZoom 18s ease-out forwards}
.hero__media video{width:100%;height:100%;object-fit:cover;display:block}
/* mobile: show the full horizontal video frame (no zoom/crop), letterboxed */
@media (max-width:720px){
  .hero__media{inset:0}
  .hero__media video{object-fit:contain;background:#000}
}
.sound-toggle{margin-top:14px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(8,9,11,.35);backdrop-filter:blur(6px);border:1px solid var(--line);
  padding:9px 14px;color:var(--ink-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:.3s;border-radius:2px}
.sound-toggle:hover{border-color:var(--accent);color:var(--ink)}
.sound-toggle.on{border-color:var(--accent);color:var(--ink)}
.sound-toggle__bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:13px}
.sound-toggle__bars i{width:2.5px;height:30%;background:var(--accent);opacity:.5;border-radius:1px;transition:opacity .3s}
.sound-toggle.on .sound-toggle__bars i{opacity:.95;animation:sbar 1s ease-in-out infinite}
.sound-toggle.on .sound-toggle__bars i:nth-child(2){animation-delay:.18s}
.sound-toggle.on .sound-toggle__bars i:nth-child(3){animation-delay:.36s}
.sound-toggle.on .sound-toggle__bars i:nth-child(4){animation-delay:.1s}
@keyframes sbar{0%,100%{height:25%}50%{height:100%}}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.05) 26%,rgba(8,9,11,.15) 60%,rgba(8,9,11,.92) 100%);}
.hero__scrim-2{position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(77,182,232,.10),transparent 55%)}
.hero__inner{position:relative;padding:0 var(--pad) clamp(36px,5vw,72px);max-width:var(--maxw);margin:0 auto;width:100%}
.hero__title{
  font-weight:600;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(40px,8.6vw,150px);text-wrap:balance;
}
.hero__title .plus{color:var(--accent);font-weight:400;letter-spacing:-.06em}
.hero__title .l2{color:var(--ink)}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end;margin-top:clamp(22px,3vw,40px)}
.hero__meta p{max-width:42ch;color:var(--ink-2);font-size:clamp(14px,1.1vw,17px);line-height:1.5}
.scroll-cue{position:absolute;left:var(--pad);bottom:clamp(36px,5vw,72px);display:none}
.hero__corner{position:absolute;top:96px;right:var(--pad);text-align:right;display:flex;flex-direction:column;gap:6px;z-index:5}

/* ---------- work grid ---------- */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:clamp(28px,3vw,52px)}
.work-head h2{font-size:clamp(30px,4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
.work-head h2 sup{font-size:.34em;color:var(--accent);font-weight:500;vertical-align:super;font-family:var(--mono)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.5vw,26px)}
.tile{position:relative;cursor:pointer;display:flex;flex-direction:column;background:transparent}
.tile__media{position:relative;width:100%;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft)}
.tile__media img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s;transform:scale(1.02);filter:saturate(.92) brightness(.92)}
.tile:hover .tile__media img{transform:scale(1.07);filter:saturate(1.05) brightness(1)}
.tile__grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.45),transparent 30%,transparent 70%,rgba(6,7,9,.35));opacity:.85;transition:opacity .5s}
.tile__top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;z-index:3;opacity:0;transform:translateY(-6px);transition:.45s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__top{opacity:1;transform:none}
.tile__caption{display:flex;flex-direction:column;gap:5px;padding:13px 2px 2px}
/* tile preview (hover / touch to play) */
.tile__preview{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;background:#000;opacity:0;transition:opacity .45s ease}
.tile__preview.on{opacity:1}
.tile__preview iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0}
.grid--h .tile__preview iframe,.mixrow--h .tile__preview iframe{width:100%;height:auto;min-height:100%;aspect-ratio:16/9}
.grid--v .tile__preview iframe,.mixrow--v .tile__preview iframe{height:100%;width:auto;min-width:100%;aspect-ratio:16/9}
.tile.is-previewing .tile__grade{opacity:0}
.tile.is-previewing .tile__play{opacity:0}
.tile__title{font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.12;color:var(--ink)}
.tile__sub{display:flex;gap:3px 9px;align-items:center;flex-wrap:wrap;color:var(--dim);line-height:1.25}
.tile__sub>span:not(.tile__dot){white-space:nowrap}
.tile__meta{color:var(--dim-2);line-height:1.3;margin-top:1px}
.tile__meta::before{content:"";display:inline-block;width:14px;height:1px;background:var(--accent);vertical-align:middle;margin-right:8px;opacity:.7}
.tile:hover .tile__title{color:var(--accent)}
.tile__dot{width:3px;height:3px;border-radius:50%;background:var(--dim);display:inline-block}
/* play affordance / scrubber */
.tile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:4;
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:.5s cubic-bezier(.2,.7,.2,1);
  background:rgba(8,9,11,.25);backdrop-filter:blur(2px)}
.tile:hover .tile__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tile__play::after{content:"";border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.tile__scrub{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.16);z-index:5;opacity:0;transition:opacity .4s}
.tile:hover .tile__scrub{opacity:1}
.tile__scrub i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent)}
.tile:hover .tile__scrub i{animation:scrub 6s linear forwards}
@keyframes scrub{to{width:100%}}
.tile__rec{display:flex;align-items:center;gap:7px}
.tile__rec b{width:7px;height:7px;border-radius:50%;background:#ff4d4d;display:inline-block;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

/* row-span masonry grid (work page, real thumbnails) */
.grid--auto{grid-auto-rows:clamp(58px,5.8vw,98px);grid-auto-flow:dense}
.grid--auto .tile{height:100%}
.tile__ext{position:absolute;top:14px;right:16px;z-index:4;color:var(--ink);opacity:0;transform:translate(-4px,4px);transition:.45s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__ext{opacity:1;transform:none}

/* showreel feature */
.reel{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line-soft);cursor:pointer}
.reel__media{position:absolute;inset:0;overflow:hidden}
.reel__media video{width:100%;height:100%;object-fit:cover;display:block}
.reel__sound{position:absolute;right:clamp(16px,1.6vw,24px);bottom:clamp(20px,2.4vw,36px);z-index:6}
.reel__expand{position:absolute;right:clamp(16px,1.6vw,24px);top:clamp(16px,1.6vw,24px);z-index:6;cursor:pointer;
  background:rgba(8,9,11,.4);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;
  display:inline-flex;gap:8px;align-items:center;transition:.3s;border-radius:2px}
.reel__expand span{color:var(--accent);font-size:13px;line-height:1}
.reel__expand:hover{border-color:var(--accent);color:var(--ink)}
.reel__media img{transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s;transform:scale(1.03);filter:saturate(.95) brightness(.86)}
.reel:hover .reel__media img{transform:scale(1.08);filter:saturate(1.05) brightness(1)}
.reel__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.4),transparent 30%,rgba(6,7,9,.2) 55%,rgba(6,7,9,.9));z-index:2}
.reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:clamp(74px,7vw,118px);height:clamp(74px,7vw,118px);border-radius:50%;border:1px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;transition:.5s cubic-bezier(.2,.7,.2,1);background:rgba(8,9,11,.2);backdrop-filter:blur(2px)}
.reel:hover .reel__play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.reel__play::after{content:"";border-left:clamp(20px,1.8vw,30px) solid var(--ink);border-top:clamp(13px,1.2vw,19px) solid transparent;border-bottom:clamp(13px,1.2vw,19px) solid transparent;margin-left:6px;transition:.4s}
.reel:hover .reel__play::after{border-left-color:#04181f}
.reel__cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.reel__cap h3{font-size:clamp(26px,3.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}
.reel__cap .meta{display:flex;flex-direction:column;gap:6px;max-width:60%}
.reel__top{position:absolute;top:0;left:0;right:0;z-index:5;padding:clamp(16px,1.6vw,24px);display:flex;justify-content:space-between}
@media (max-width:720px){
  .grid--auto{grid-auto-rows:auto}
  .grid--auto .tile{grid-column:1/-1 !important;grid-row:auto !important;aspect-ratio:16/9;height:auto}
}
@media (min-width:721px) and (max-width:1080px){
  .grid--auto .tile{grid-column:span 6 !important;grid-row:span 4 !important}
}

/* tile hidden by filter */
.tile.is-hidden{display:none}

/* uniform aligned grids — verticals first (3 per row), then horizontals (3 per row) */
.grid--v{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,26px);align-items:start}
.grid--v .tile__media{aspect-ratio:9/16}
.grid--h{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,26px);align-items:start}
.grid--h .tile__media{aspect-ratio:16/9}
.grid-group+.grid-group{margin-top:clamp(36px,4.5vw,72px)}
.grid-group.is-hidden{display:none}
.grid-sub{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(16px,1.8vw,26px)}
@media (max-width:900px){.grid--v{grid-template-columns:repeat(2,1fr)}.grid--h{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--v{grid-template-columns:1fr}.grid--h{grid-template-columns:1fr}}

/* mixed interleave layout — 3 vertical row, 3 horizontal row (responsive, clean) */
.mixrow{display:grid;gap:clamp(14px,1.5vw,26px);margin-bottom:clamp(14px,1.5vw,26px)}
.mixrow--v{grid-template-columns:repeat(3,1fr)}
.mixrow--v .tile__media{aspect-ratio:9/16}
.mixrow--h{grid-template-columns:repeat(3,1fr)}
.mixrow--h .tile__media{aspect-ratio:16/9}
/* responsive: 3-up everywhere down to phones, then a clean single column.
   (skipping a 2-col stage avoids orphan wraps in the 3-per-row interleave) */
@media (max-width:540px){
  .mixrow--v{grid-template-columns:1fr}
  .mixrow--h{grid-template-columns:1fr}
}

/* hero sound toggle (always visible) */
.hero__sound{position:absolute;right:var(--pad);bottom:clamp(20px,3vw,44px);z-index:6}

/* hero scroll cue */
.hero__scroll{position:absolute;left:50%;bottom:clamp(20px,3vw,40px);transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-2);transition:color .3s}
.hero__scroll:hover{color:var(--ink)}
.hero__scroll-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.hero__scroll-line{position:relative;width:1px;height:46px;background:rgba(255,255,255,.22);overflow:hidden}
.hero__scroll-line i{position:absolute;top:-55%;left:0;width:100%;height:55%;background:var(--accent);animation:scrollLine 1.9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes scrollLine{0%{top:-55%}100%{top:100%}}
.hero__scroll-arrow{font-size:14px;line-height:1;animation:scrollArrow 1.9s ease-in-out infinite}
@keyframes scrollArrow{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__scroll-line i,.hero__scroll-arrow{animation:none}}
@media (max-width:720px){.hero__scroll-label{display:none}}

/* category filter bar */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,36px)}
.filters .filter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid var(--line);padding:11px 16px;transition:.28s}
.filters .filter span{font-size:9.5px;color:var(--dim);transition:.28s}
.filters .filter:hover{border-color:var(--ink-2);color:var(--ink)}
.filters .filter.active{background:var(--accent);border-color:var(--accent);color:#04181f}
.filters .filter.active span{color:rgba(4,24,31,.6)}

/* in-page video player */
.player{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px)}
.player.open{display:flex;animation:plFade .3s ease}
@keyframes plFade{from{opacity:0}to{opacity:1}}
.player__bg{position:absolute;inset:0;background:rgba(4,5,7,.93);backdrop-filter:blur(10px) saturate(120%)}
.player__frame{position:relative;z-index:2;width:min(1180px,94vw)}
.player__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.player__close{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;display:inline-flex;gap:8px;align-items:center;transition:.28s}
.player__close span{color:var(--accent)}
.player__close:hover{border-color:var(--accent);color:var(--ink)}
.player__media{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.player__media iframe,.player__media video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:14px}
.player__cap .tile__title{position:static}
.player__cap a:hover{color:var(--accent)}

/* tile spans */
.s-12{grid-column:span 12}.s-8{grid-column:span 8}.s-7{grid-column:span 7}
.s-6{grid-column:span 6}.s-5{grid-column:span 5}.s-4{grid-column:span 4}
.s-3{grid-column:span 3}
.r-wide{aspect-ratio:16/9}.r-tall{aspect-ratio:4/5}.r-sq{aspect-ratio:1/1}
.r-cine{aspect-ratio:21/9}.r-stand{aspect-ratio:3/2}

/* photo grid (photography page) — 2 per row, responsive */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,26px)}
.photo-grid figure{break-inside:avoid;margin:0;position:relative;overflow:hidden;border:1px solid var(--line-soft);cursor:pointer;background:var(--bg-2)}
.photo-grid figure .pm{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
.photo-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(.96) brightness(.92)}
.photo-grid figure:hover img{transform:scale(1.045);filter:saturate(1.05) brightness(1)}
.photo-grid figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.82));opacity:0;transform:translateY(6px);transition:.45s cubic-bezier(.2,.7,.2,1)}
.photo-grid figure:hover figcaption{opacity:1;transform:none}
.photo-grid .pc-t{font-weight:600;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em}
.photo-grid .pc-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent);white-space:nowrap}
@media (max-width:560px){.photo-grid{grid-template-columns:1fr}}

/* 3-up portrait variant (Nivea row) */
.photo-grid--3{grid-template-columns:repeat(3,1fr)}
.photo-grid--3 figure .pm{aspect-ratio:4/5}
@media (max-width:560px){.photo-grid--3{grid-template-columns:1fr}}

/* 3-up tall portrait variant (Passion Projects) */
.photo-grid--p{grid-template-columns:repeat(3,1fr)}
.photo-grid--p figure .pm{aspect-ratio:3/4}
@media (max-width:680px){.photo-grid--p{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.photo-grid--p{grid-template-columns:1fr}}

/* 3-up landscape variant (new horizontal experiments) */
.photo-grid--h{grid-template-columns:repeat(3,1fr)}
.photo-grid--h figure .pm{aspect-ratio:3/2}
@media (max-width:680px){.photo-grid--h{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.photo-grid--h{grid-template-columns:1fr}}

/* sub-subheading (e.g. experiments under Passion Projects) */
.photo-subhead{display:flex;align-items:center;gap:12px;margin:clamp(34px,4.5vw,64px) 0 clamp(16px,2vw,28px);
  font-size:clamp(15px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
.photo-subhead::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
.photo-subhead--plain{margin-top:0;margin-bottom:clamp(16px,2vw,28px)}
.photo-subhead--plain::before{display:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb.open{display:flex;animation:plFade .3s ease}
.lb__bg{position:absolute;inset:0;background:rgba(4,5,7,.94);backdrop-filter:blur(8px)}
.lb__img{position:relative;z-index:2;max-width:92vw;max-height:84vh;display:block;object-fit:contain;border:1px solid var(--line)}
.lb__close{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);z-index:4;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink-2);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;display:inline-flex;gap:8px;align-items:center;transition:.28s}
.lb__close span{color:var(--accent)}
.lb__close:hover{border-color:var(--accent);color:var(--ink)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;cursor:pointer;background:rgba(8,9,11,.4);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--ink);width:54px;height:54px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:.28s}
.lb__nav:hover{border-color:var(--accent);color:var(--accent)}
.lb__prev{left:clamp(10px,2vw,28px)}.lb__next{right:clamp(10px,2vw,28px)}
.lb__cap{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,28px);z-index:4;text-align:center;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:560px){.lb__nav{width:44px;height:44px}}

/* ---------- about ---------- */
.statement{font-size:clamp(26px,3.6vw,58px);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.statement .accent{color:var(--accent)}
.statement .dim{color:var(--dim)}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px)}
.bio p{color:var(--ink-2);font-size:clamp(15px,1.15vw,18px);line-height:1.62;margin-bottom:1em;max-width:60ch}
.bio p strong{color:var(--ink);font-weight:600}
.approach h3{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.approach p{color:var(--ink-2);font-size:clamp(15px,1.1vw,17px);line-height:1.6;max-width:54ch}
.stat{display:flex;flex-direction:column;gap:6px;padding:24px 0;border-top:1px solid var(--line)}
.stat b{font-size:clamp(34px,4vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat b .u{color:var(--accent)}
.stat span{color:var(--dim)}

/* reviews */
.review{padding:34px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:18px}
.review q{font-size:clamp(20px,2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.28;quotes:none;text-wrap:pretty}
.review q::before{content:"“";color:var(--accent)}.review q::after{content:"”";color:var(--accent)}
.review__who{display:flex;gap:12px;align-items:baseline}
.review__who b{font-weight:600}
.review__who span{color:var(--dim)}

/* timeline */
.tl{border-top:1px solid var(--line)}
.tl__row{display:grid;grid-template-columns:120px 1fr auto;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.tl__row .yr{font-family:var(--mono);color:var(--accent);font-size:13px;letter-spacing:.08em}
.tl__row h4{font-weight:600;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.01em}
.tl__row p{color:var(--dim);font-size:14px;margin-top:4px}
.tl__row .loc{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:right}

/* skills chips */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.skills-grid span{display:flex;align-items:baseline;gap:14px;padding:20px 4px;border-bottom:1px solid var(--line-soft);
  font-size:clamp(16px,1.4vw,22px);font-weight:500;letter-spacing:-.01em;color:var(--ink);transition:color .3s,padding .3s}
.skills-grid span i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--accent);min-width:22px}
.skills-grid span:hover{color:var(--accent);padding-left:12px}
@media (max-width:900px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.skills-grid{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.clients-title{font-size:clamp(30px,4.4vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.clients-title--sub{font-size:clamp(22px,2.6vw,38px)}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:9px 14px;transition:.3s}
.chip:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- contact ---------- */
.contact-big a{display:block;font-weight:600;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(34px,6.5vw,118px);transition:color .3s;word-break:break-word}
.contact-big a:hover{color:var(--accent)}
.cta{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);
  padding:16px 26px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:.35s;color:var(--ink)}
.cta:hover{background:var(--accent);color:#04181f;border-color:var(--accent)}
.cta .ar{transition:transform .35s}
.cta:hover .ar{transform:translate(4px,-4px)}
.contact-social{display:flex;gap:12px}
.contact-social a{width:54px;height:54px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.3s}
.contact-social a svg{width:22px;height:22px;display:block}
.contact-social a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.social-row{display:flex;flex-direction:column}
.social-row a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid var(--line);transition:.3s}
.social-row a:last-child{border-bottom:1px solid var(--line)}
.social-row a span:first-child{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.01em}
.social-row a .ar{color:var(--dim);transition:.3s}
.social-row a:hover{padding-left:14px;color:var(--ink)}
.social-row a:hover .ar{color:var(--accent);transform:translate(3px,-3px)}

/* ---------- footer ---------- */
.footer{position:relative;padding:0 var(--pad);overflow:hidden}
.footer__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:28px;padding-bottom:48px}
.footer__social{max-width:var(--maxw);margin:0 auto;display:flex;gap:14px;padding-bottom:clamp(40px,5vw,72px)}
.footer__social a{width:48px;height:48px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.3s}
.footer__social a svg{width:20px;height:20px;display:block}
.footer__social a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.footer__icons{display:flex;gap:14px;align-items:center}
.footer__icons a{color:var(--dim);transition:color .25s,transform .25s;display:flex}
.footer__icons a svg{width:16px;height:16px;display:block}
.footer__icons a:hover{color:var(--accent);transform:translateY(-2px)}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__col h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-bottom:8px}
.footer__col a,.footer__col p{color:var(--ink-2);font-size:14px;transition:color .25s}
.footer__col a:hover{color:var(--accent)}
.marquee{border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:18px 0}
.marquee__track{display:inline-flex;gap:.4em;animation:marq 28s linear infinite;will-change:transform}
.marquee__track span{font-size:clamp(34px,6.5vw,96px);font-weight:600;letter-spacing:-.04em;color:var(--bg-3);line-height:.9}
.marquee__track span .o{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14)}
@keyframes marq{to{transform:translateX(-50%)}}
.footer__bottom{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:18px 0 26px}
.footer__credit{transition:color .25s}
.footer__credit:hover{color:var(--accent)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero__media img{animation:none;transform:none}
  .barcode i,.tile__rec b{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav__menu{gap:14px}
  .nav__menu a{font-size:10px;letter-spacing:.1em}
}
@media (max-width:1080px){
  .s-8,.s-7{grid-column:span 12}.s-6,.s-5{grid-column:span 6}
  .s-4,.s-3{grid-column:span 6}
  .hero__corner{display:none}
}
@media (max-width:860px){
  .nav__menu{display:none}
  .navmenu__links a.navmenu__work{display:flex}
  .navmenu__i{display:block}
  .navmenu__links{padding:clamp(20px,5vw,40px) 0}
}
@media (max-width:720px){
  .grid{gap:12px}
  .s-6,.s-5,.s-4,.s-3,.s-8,.s-7{grid-column:span 12}
  .tl__row{grid-template-columns:64px 1fr;gap:14px}
  .tl__row .loc{display:none}
  .cols>*{grid-column:span 12 !important}
  .footer__col{grid-column:span 6}
}