/* POV — case study / collection layer. Shared by all collection pages. */
:root { --bg:#0a0a0a; --ink:#f5f5f3; --ink-dim:#8a8a85; --rule:#1f1f1f; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html, body { background:var(--bg); color:var(--ink); }
body { font-family:'Inter',-apple-system,sans-serif; font-weight:400; font-size:14px; letter-spacing:-0.005em; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--ink); }
img, video { display:block; max-width:100%; }
.mono-cap { font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:0.18em; font-size:11px; font-weight:500; }

nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:24px 40px; background:rgba(10,10,10,0.65); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--rule); }
.logo { font-family:'Instrument Sans',sans-serif; font-size:20px; font-weight:600; letter-spacing:-0.04em; }
.logo span { font-weight:400; opacity:0.5; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { font-size:13px; opacity:0.7; transition:opacity .25s; }
.nav-links a:hover, .nav-links a.active { opacity:1; }
.nav-cta { border:1px solid #3a3a3a; border-radius:999px; padding:8px 16px; }
.nav-cta:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }

.back { padding:120px 40px 0; }
.back a { display:inline-flex; align-items:center; gap:8px; color:var(--ink-dim); font-size:13px; transition:color .25s; }
.back a:hover { color:var(--ink); }

.col-header { padding:40px 40px 56px; display:grid; grid-template-columns:1fr; gap:28px; max-width:1100px; }
.col-header .eyebrow { display:flex; align-items:center; gap:14px; color:var(--ink-dim); }
.col-header .eyebrow .dot { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,0.12); }
.col-header h1 { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:clamp(40px,6.5vw,96px); line-height:0.95; letter-spacing:-0.045em; }
.col-header h1 .dim { color:var(--ink-dim); }
.col-header .lede { color:var(--ink-dim); font-size:17px; line-height:1.6; max-width:640px; }

.meta-strip { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:32px 40px; display:flex; flex-wrap:wrap; gap:56px; }
.meta-strip .m .mono-cap { color:var(--ink-dim); display:block; margin-bottom:8px; }
.meta-strip .m .v { font-family:'Instrument Sans',sans-serif; font-size:18px; font-weight:500; letter-spacing:-0.02em; }

.cover { padding:40px; }
.cover .ph { width:100%; aspect-ratio:16/9; background:linear-gradient(150deg,#1a1a1a,#101010); border-radius:6px; position:relative; overflow:hidden; }
.cover .ph::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.05),transparent 60%); }
.cover .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .strip { display:flex; gap:6px; width:100%; aspect-ratio:16/9; }
.cover .strip figure { position:relative; flex:1; min-width:0; overflow:hidden; border-radius:6px; background:linear-gradient(150deg,#1a1a1a,#101010); }
.cover .strip figure::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.05),transparent 60%); }
.cover .strip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .cap { color:var(--ink-dim); font-size:12px; margin-top:12px; text-transform:uppercase; letter-spacing:.14em; }

.block { padding:64px 40px; border-top:1px solid var(--rule); display:grid; grid-template-columns:200px 1fr; gap:60px; }
.block > .mono-cap { color:var(--ink-dim); padding-top:6px; }
.block h2 { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:clamp(24px,3vw,36px); line-height:1.1; letter-spacing:-0.03em; margin-bottom:18px; }
.block .body p { color:var(--ink-dim); font-size:15px; line-height:1.65; max-width:620px; margin-bottom:16px; }

/* Numbered list — campaigns, deliverables, phases */
.campaigns { display:grid; grid-template-columns:1fr; gap:2px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:24px; }
.campaign { background:var(--bg); padding:28px 32px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline; transition:background .25s; }
.campaign:hover { background:#111; }
.campaign .num { font-family:'Instrument Sans',sans-serif; color:var(--ink-dim); font-size:13px; letter-spacing:.06em; }
.campaign .c-title { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:19px; letter-spacing:-0.02em; }
.campaign .c-desc { color:var(--ink-dim); font-size:14px; line-height:1.6; margin-top:6px; }

/* Deliverables — what the client received */
.delivs { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:24px; }
.deliv { background:var(--bg); padding:24px 22px; }
.deliv .n { font-family:'Instrument Sans',sans-serif; font-size:34px; font-weight:500; letter-spacing:-0.04em; line-height:1; }
.deliv .k { color:var(--ink-dim); font-size:12px; text-transform:uppercase; letter-spacing:.16em; margin-top:10px; }

.films { grid-template-columns:1fr; }
.films-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.film { border:0; padding:0; background:none; cursor:pointer; text-align:left; }
.film .ph { width:100%; aspect-ratio:16/9; background:linear-gradient(150deg,#1a1a1a,#101010); border-radius:4px; position:relative; overflow:hidden; }
.film .ph video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film .play { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:5px 10px 5px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#fff; }
.film .play .tri { width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; }
.film .f-label { font-size:13px; margin-top:10px; }
.film .f-label .dim { color:var(--ink-dim); }

.gallery { grid-template-columns:1fr; }
.gallery-grid { columns:3; column-gap:16px; margin-top:8px; }
.g-tile { break-inside:avoid; margin-bottom:16px; border:0; padding:0; background:none; cursor:pointer; width:100%; display:block; }
.g-tile .ph { width:100%; background:linear-gradient(150deg,#1a1a1a,#101010); border-radius:4px; position:relative; overflow:hidden; }
.g-tile .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-45 { aspect-ratio:4/5; } .ar-11 { aspect-ratio:1/1; } .ar-54 { aspect-ratio:5/4; } .ar-32 { aspect-ratio:3/2; } .ar-169 { aspect-ratio:16/9; } .ar-34 { aspect-ratio:3/4; } .ar-23 { aspect-ratio:2/3; }

/* Venue rows — gallery-first collection layout */
.venues { border-top:1px solid var(--rule); padding:56px 40px 8px; }
.venues-lead { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.venues-lead .mono-cap { color:var(--ink-dim); }
.venue { padding:34px 0; border-bottom:1px solid var(--rule); }
.venue:last-child { border-bottom:0; }
.venue-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:16px; }
.venue-head .vh-left { display:flex; align-items:baseline; gap:16px; }
.venue-head .num { font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--ink-dim); }
.venue-head h3 { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; line-height:1; }
.venue-head .vh-meta { color:var(--ink-dim); font-size:13px; text-align:right; }
.vr { display:flex; gap:12px; height:clamp(300px,31vw,440px); }
.vr + .vr { margin-top:12px; }
.v-item { flex:var(--ar) 1 0; min-width:0; position:relative; display:block; border:0; padding:0; cursor:pointer; border-radius:4px; overflow:hidden; background:linear-gradient(150deg,#1a1a1a,#101010); }
.v-item::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.05),transparent 60%); pointer-events:none; }
.v-item::before { content:''; position:absolute; z-index:1; inset:auto 0 0 0; height:46%; background:linear-gradient(to top,rgba(10,10,10,.62),transparent); pointer-events:none; }
.v-item img, .v-item video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v-item .play { position:absolute; z-index:2; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:5px 10px 5px 8px; font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:#fff; }
.v-item .play .tri { width:0; height:0; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #fff; }
.v-item .cap { position:absolute; z-index:2; bottom:11px; left:12px; right:12px; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); transition:color .25s; }
.v-item:hover .cap { color:var(--ink); }
.v-item .cap { color:rgba(245,245,243,.84); text-shadow:0 1px 2px rgba(0,0,0,.55); }

/* Next collection */
.next { border-top:1px solid var(--rule); padding:64px 40px; display:grid; grid-template-columns:200px 1fr; gap:60px; }
.next > .mono-cap { color:var(--ink-dim); padding-top:6px; }
.next-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.nc { display:block; border:1px solid var(--rule); border-radius:6px; overflow:hidden; transition:border-color .3s; }
.nc:hover { border-color:#3a3a3a; }
.nc-cover { aspect-ratio:16/9; background:linear-gradient(150deg,#1c1c1c,#101010); position:relative; overflow:hidden; }
.nc-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nc-body { padding:18px 20px 20px; }
.nc-body h3 { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:20px; letter-spacing:-.025em; }
.nc-meta { color:var(--ink-dim); font-size:13px; margin-top:6px; }
.nc-arrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; margin-top:16px; transition:gap .3s; }
.nc:hover .nc-arrow { gap:14px; }
.next-all { display:inline-flex; align-items:center; gap:12px; font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; }
.next-all .t { position:relative; }
.next-all .t::after { content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.next-all:hover .t::after { transform:scaleX(1); }
.next-all .a { display:inline-block; color:var(--ink-dim); transition:transform .5s cubic-bezier(.34,1.5,.5,1),color .25s; }
.next-all:hover .a { transform:translateX(8px); color:var(--ink); }

.cta { border-top:1px solid var(--rule); padding:120px 40px; text-align:center; }
.cta h2 { font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:clamp(32px,5vw,64px); line-height:1.0; letter-spacing:-0.04em; max-width:800px; margin:0 auto 36px; }
.cta h2 .dim { color:var(--ink-dim); }
.cta-button { display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--bg); padding:16px 32px; border-radius:999px; font-size:14px; font-weight:500; transition:transform .25s; }
.cta-button:hover { transform:translateY(-2px); color:var(--bg); }

footer { padding:60px 40px 32px; border-top:1px solid var(--rule); display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.foot-brand { font-family:'Instrument Sans',sans-serif; font-size:28px; font-weight:500; letter-spacing:-0.04em; line-height:1.1; }
.foot-brand .fb2{display:block;margin-top:-0.1em}.foot-brand .fb-dot{color:var(--ink-dim)}
.foot-brand .dim { color:var(--ink-dim); display:block; font-size:14px; font-weight:400; margin-top:8px; }
.foot-col .mono-cap { color:var(--ink-dim); display:block; margin-bottom:16px; }
.foot-col a { display:block; padding:6px 0; font-size:13px; color:var(--ink-dim); transition:color .25s; }
.foot-col a:hover { color:var(--ink); }
.colophon { grid-column:1 / -1; border-top:1px solid var(--rule); padding-top:24px; margin-top:40px; display:flex; justify-content:space-between; color:var(--ink-dim); font-size:11px; text-transform:uppercase; letter-spacing:0.18em; }

.lightbox { position:fixed; inset:0; z-index:100; background:rgba(6,6,6,0.96); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:60px; }
.lightbox.open { display:flex; }
.lb-media { max-width:90vw; max-height:84vh; display:flex; align-items:center; justify-content:center; }
.lb-media video, .lb-media img { max-width:90vw; max-height:80vh; border-radius:6px; }
.lb-ph { width:min(80vw,900px); aspect-ratio:16/9; background:linear-gradient(150deg,#1c1c1c,#0f0f0f); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:12px; text-transform:uppercase; letter-spacing:.16em; }
.lb-caption { position:fixed; left:0; right:0; bottom:28px; text-align:center; color:var(--ink-dim); font-size:13px; }
.lb-close { position:fixed; top:28px; right:32px; font-size:26px; line-height:1; color:var(--ink-dim); background:none; border:0; cursor:pointer; }
.lb-close:hover { color:var(--ink); }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); font-size:34px; color:var(--ink-dim); background:none; border:0; cursor:pointer; padding:12px; }
.lb-nav:hover { color:var(--ink); }
.lb-prev { left:20px; } .lb-next { right:20px; }

@media (max-width:1000px) { .delivs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  nav { padding:18px 20px; } .nav-links { gap:14px; } .nav-links a { font-size:12px; } .nav-cta { padding:6px 14px; font-size:12px; }
  .back { padding:96px 20px 0; } .col-header { padding:32px 20px 40px; } .meta-strip { padding:24px 20px; gap:28px; }
  .cover { padding:24px 20px; } .cover .strip { aspect-ratio:4/3; gap:4px; } .cover .strip figure:nth-child(3) { display:none; } .block { grid-template-columns:1fr; padding:48px 20px; gap:20px; }
  .films-grid { grid-template-columns:1fr; } .gallery-grid { columns:2; } .cta { padding:80px 20px; }
  .venues { padding:40px 20px 0; } .venue-head { flex-direction:column; align-items:flex-start; gap:8px; } .venue-head .vh-meta { text-align:left; }
  .vr { height:min(66vw,400px); overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px; scrollbar-width:none; }
  .vr::-webkit-scrollbar { display:none; }
  .v-item { flex:0 0 auto; aspect-ratio:var(--ar); height:100%; scroll-snap-align:start; }
  .next { grid-template-columns:1fr; padding:48px 20px; gap:20px; } .next-grid { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr 1fr; padding:40px 20px 24px; } .lightbox { padding:20px; }
}

/* Vimeo embeds */
.lb-media iframe{border:0;background:#000;max-width:92vw;max-height:84vh}
.vimeo-inline{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ph>iframe.vimeo-inline{position:absolute}