/* Self-hosted fonts (SIL Open Font License, from Google Fonts). Latin + Latin Extended only. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --bg:#000;
  --fg:#fff;
  --accent:#ff1741;
  --muted:#9a9a9a;
  --line:rgba(255,255,255,0.14);
  --display:'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body:'Jost', 'Futura', -apple-system, sans-serif;
  --mono:'JetBrains Mono', 'SF Mono', monospace;
  --gutter:6vw;
}
.timecode{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  font-size:11px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{width:100%;padding-left:var(--gutter);padding-right:var(--gutter);}

/* ---------- placeholder tag ---------- */
.placeholder-note{
  font-size:11px;
  color:var(--accent);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--body);
  opacity:.8;
}

.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;
  min-height:110px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:0 var(--gutter);
  z-index:100;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
  transition:background .35s ease, backdrop-filter .35s ease;
}
@media (max-width:560px){header{min-height:88px;}}
header.solid{
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;z-index:2;}
.logo img{height:60px;width:auto;display:block;}
@media (max-width:560px){.logo img{height:44px;}}

.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{
  font-family:var(--body);font-size:14px;letter-spacing:.03em;color:var(--fg);
  opacity:.75;position:relative;padding:6px 0;transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1;}
.nav-links a.current{opacity:1;}
.nav-links a.current::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}
@media (max-width:1024px){.nav-links{display:none;}}

.header-right{display:flex;align-items:center;gap:22px;z-index:2;}

.menu-trigger{
  display:none;
  background:none;border:none;color:var(--fg);cursor:pointer;
  font-family:var(--body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding:8px 0;
}
.menu-trigger::after{
  content:'';position:absolute;bottom:2px;left:0;width:0;height:1px;
  background:var(--accent);transition:width .25s ease;
}
.menu-trigger:hover::after{width:100%;}
@media (max-width:1024px){.menu-trigger{display:inline-block;}}

.client-login{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 16px;border-radius:2px;
}
.client-login:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:560px){.client-login{display:none;}}

.mobile-menu{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:105;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(-100%);transition:transform .35s ease;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:var(--display);font-size:28px;text-transform:uppercase;}
.mobile-menu-logo{width:52px;margin-bottom:6px;}
.menu-close{
  position:absolute;top:28px;right:var(--gutter);
  background:none;border:1px solid var(--line);border-radius:50%;
  width:40px;height:40px;color:var(--fg);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.menu-close:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- intro loader ---------- */
.intro-loader{
  position:fixed;inset:0;z-index:200;
  background:rgba(20,20,20,.32);
  backdrop-filter:blur(22px) saturate(1.15) brightness(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.15) brightness(1.25);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease, visibility .3s ease, backdrop-filter .3s ease;
  pointer-events:none;
}
.intro-loader img{width:min(85vw,900px);max-height:85vh;height:auto;position:relative;z-index:2;}
.intro-loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.intro-loader.quick{transition:opacity .15s ease, visibility .15s ease;}

/* ---------- BTS rolling strip ---------- */
.bts-strip{overflow:hidden;padding:50px 0;border-bottom:1px solid var(--line);}
.bts-track{display:flex;gap:16px;width:max-content;animation:btsScroll 32s linear infinite;}
.bts-track img{width:220px;height:145px;object-fit:cover;border-radius:2px;filter:brightness(.7);flex-shrink:0;}
@keyframes btsScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#0a0a0a;
  overflow:hidden;
}
.hero .rec{position:absolute;top:24px;right:70px;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.85;}
.hero .rec .timecode{color:var(--fg);opacity:.75;text-transform:none;letter-spacing:.02em;}
.hero-media{
  position:absolute;inset:0;z-index:1;
}
.hero-media img, .hero-media video{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.55) saturate(1.05);
  object-position:center;
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.9) 100%);
}
.crosshair{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;z-index:2;opacity:.55;pointer-events:none;
}
.crosshair .ch-h{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--fg);transform:translateY(-50%);}
.crosshair .ch-v{position:absolute;left:50%;top:0;height:100%;width:1px;background:var(--fg);transform:translateX(-50%);}
.hero-video-tag{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;text-align:center;
}
.play-circle{
  width:74px;height:74px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  backdrop-filter:blur(2px);
}
.play-circle::before{
  content:'';width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid var(--fg);margin-left:5px;
}
.hero-content{
  position:relative;z-index:3;padding:0 var(--gutter) 60px;
  max-width:920px;
}
.tagline{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg);
  display:flex;
  align-items:center;
  margin-bottom:20px;
}
.tagline .dot{margin-left:9px;animation:recPulse 2.4s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.hero-content h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(19px, 6.4vw, 68px);
  line-height:1.08;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-content h1 em{font-style:normal;color:var(--accent);}
.hero-content p{
  margin-top:18px;font-size:clamp(14px,1.4vw,17px);color:var(--muted);
  max-width:480px;line-height:1.5;
}
.location-line{
  display:block;margin-top:16px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.hero-cta{
  margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;
}
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:2px;border:1px solid var(--fg);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn::before,.btn::after{
  content:'';position:absolute;width:10px;height:10px;opacity:0;transition:opacity .2s ease;
}
.btn::before{top:-5px;left:-5px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent);}
.btn::after{bottom:-5px;right:-5px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent);}
.btn:hover::before,.btn:hover::after{opacity:1;}
.btn.primary{background:var(--fg);color:#000;}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.ghost{border-color:var(--line);}
.btn.ghost:hover{border-color:var(--fg);}
.scroll-cue{
  position:absolute;bottom:24px;right:var(--gutter);z-index:3;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;
}
.scroll-cue::after{content:'';width:1px;height:40px;background:var(--muted);}

/* ---------- about page photo hero ---------- */
.about-hero{position:relative;height:94vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);}
.about-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:brightness(.65) saturate(1.05);}
.about-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.92) 100%);}
.about-hero-content{position:relative;z-index:2;padding:0 var(--gutter) 60px;max-width:760px;}
.about-hero-content h1{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(38px,7vw,84px);line-height:1.02;}
.about-hero-content p{margin-top:18px;color:var(--muted);max-width:560px;font-size:16px;line-height:1.5;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  padding:170px var(--gutter) 70px;border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,7vw,84px);line-height:1.02;
}
.page-hero p{margin-top:18px;color:var(--muted);max-width:560px;font-size:16px;line-height:1.5;}
.build-note{
  margin-top:26px;display:inline-block;font-size:12px;letter-spacing:.06em;
  color:var(--accent);border:1px dashed var(--accent);padding:8px 14px;border-radius:2px;
}

/* ---------- intro ---------- */
.intro{padding:120px var(--gutter) 90px;max-width:920px;}
.section-label{
  display:flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:26px;
  font-weight:600;
}
.section-label::before{content:'';width:22px;height:1px;background:var(--accent);}
.intro p{
  font-family:var(--display);font-weight:500;
  font-size:clamp(22px,3.2vw,38px);line-height:1.35;color:var(--fg);
}
.intro p span{color:var(--muted);}

/* ---------- logo strip ---------- */
.trust-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 0;overflow:hidden;position:relative;
}
.marquee{display:flex;width:max-content;animation:scroll 70s linear infinite;}
.marquee-group{display:flex;align-items:center;}
.marquee-item{
  padding:0 46px;font-family:var(--display);font-size:20px;
  letter-spacing:.03em;color:var(--muted);white-space:nowrap;
  text-transform:uppercase;
}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- work grid ---------- */
.work{padding:110px var(--gutter);}
.work-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:50px;flex-wrap:wrap;gap:20px;
}
.work-head h2{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,4.5vw,54px);
}
.filters{display:flex;gap:10px;flex-wrap:wrap;}
.filter-btn{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 18px;border:1px solid var(--line);border-radius:20px;color:var(--muted);
  cursor:pointer;
}
.filter-btn.active{border-color:var(--accent);color:var(--fg);background:rgba(255,23,65,.08);}
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.grid.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid.grid-4{grid-template-columns:1fr;}}
.card{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:#111;
  border-radius:2px;
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease, filter .4s ease;filter:brightness(.65);}
.card:hover img{transform:scale(1.06);filter:brightness(.4);}
.card .frame span{position:absolute;width:20px;height:20px;border-color:var(--fg);opacity:0;transition:opacity .3s ease;}
.card:hover .frame span{opacity:1;}
.card .frame .tl{top:14px;left:14px;border-top:1.5px solid;border-left:1.5px solid;}
.card .frame .tr{top:14px;right:14px;border-top:1.5px solid;border-right:1.5px solid;}
.card .frame .bl{bottom:14px;left:14px;border-bottom:1.5px solid;border-left:1.5px solid;}
.card .frame .br{bottom:14px;right:14px;border-bottom:1.5px solid;border-right:1.5px solid;}

.card .card-crosshair{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;z-index:2;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.card:hover .card-crosshair{opacity:.65;}
.card .card-crosshair .cch-h{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--fg);transform:translateY(-50%);}
.card .card-crosshair .cch-v{position:absolute;left:50%;top:0;height:100%;width:1px;background:var(--fg);transform:translateX(-50%);}
.card-tag{
  position:absolute;top:18px;left:18px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg);border:1px solid rgba(255,255,255,.4);
  padding:4px 10px;border-radius:20px;backdrop-filter:blur(3px);
}
.card-timecode{
  position:absolute;top:18px;right:18px;
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.85);letter-spacing:.02em;
  background:rgba(0,0,0,.45);padding:4px 9px;border-radius:2px;backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;
}
.card:hover .card-timecode{opacity:1;}
.card-timecode .dot{width:6px;height:6px;animation:recPulseFast 1.1s ease-in-out infinite;}
@keyframes recPulseFast{0%,100%{opacity:1;}50%{opacity:.25;}}
.card-exif{
  position:absolute;top:18px;right:18px;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.85);letter-spacing:.02em;
  background:rgba(0,0,0,.45);padding:4px 9px;border-radius:2px;backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;
}
.card:hover .card-exif{opacity:1;}
.card-info{position:absolute;bottom:20px;left:20px;right:20px;}
.card-info h3{font-family:var(--display);font-size:19px;text-transform:uppercase;}
.card-info p{font-size:12px;color:var(--muted);margin-top:4px;}
.view-archive{
  display:block;text-align:center;margin-top:56px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px;width:fit-content;margin-left:auto;margin-right:auto;
}
.view-archive:hover{color:var(--fg);border-color:var(--fg);}

/* ---------- how i work / process ---------- */
.process{padding:100px var(--gutter);border-top:1px solid var(--line);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px;}
.process-step{border-top:1px solid var(--line);padding-top:20px;}
.process-step .num{font-family:var(--mono);color:var(--accent);font-size:13px;letter-spacing:.03em;font-variant-numeric:tabular-nums;}
.process-step h3{font-family:var(--display);font-size:20px;margin-top:14px;text-transform:uppercase;}
.process-step p{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.5;}

/* ---------- testimonial ---------- */
.testimonial{
  position:relative;
  padding:30px var(--gutter) 24px;text-align:center;max-width:680px;margin:0 auto;
}
.testimonial blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(17px,2.4vw,26px);line-height:1.3;
}
/* on wider screens the quote has room to breathe — let it use more of the section instead of
   sitting as a small centred block with a lot of dead space either side (mobile is unaffected) */
@media (min-width:900px){
  .testimonial{max-width:980px;}
  .testimonial blockquote{font-size:clamp(24px,2.4vw,34px);}
}
.testimonial .who{margin-top:14px;font-size:12px;color:var(--muted);letter-spacing:.04em;}
.testimonial .who strong{color:var(--fg);}
.testimonial .stars{color:var(--accent);letter-spacing:4px;margin-bottom:10px;font-size:13px;}
.review-icon{display:block;margin:0 auto 10px;color:var(--accent);width:22px;height:22px;}
.trust-stat{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);letter-spacing:.02em;
}
.t-slider-wrap{position:relative;}
.t-slider{position:relative;}
.t-slide{display:none;}
.t-slide.active{display:block;animation:fadeIn .5s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.t-dots{display:flex;justify-content:center;gap:9px;margin-top:14px;}
.t-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s ease;}
.t-dot.active{background:var(--accent);}

.t-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,color .2s ease;z-index:3;
}
.t-arrow:hover{border-color:var(--accent);color:var(--accent);}
.t-arrow-prev{left:-4px;}
.t-arrow-next{right:-4px;}
@media (min-width:1040px){
  .t-arrow-prev{left:-56px;}
  .t-arrow-next{right:-56px;}
}
@media (max-width:560px){
  .t-arrow{width:32px;height:32px;font-size:17px;}
  .t-arrow-prev{left:-8px;}
  .t-arrow-next{right:-8px;}
}

/* ---------- cta ---------- */
.cta{
  padding:36px var(--gutter);text-align:center;
  position:relative;overflow:hidden;min-height:300px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(255,23,65,.10), transparent 62%);
}
/* .cta-ring and .cta-content share the exact same grid cell, so the frame and the text it's meant
   to surround are always centred on precisely the same point — no drift from padding/box quirks. */
.cta-ring, .cta-content{grid-column:1;grid-row:1;}
.cta-content{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;}
/* camera-viewfinder dressing behind the CTA: rectangular frame (like looking through an EVF), not a
   circle. 16:9 so it reads as a proper widescreen/cinema frame on a full-size desktop window, while
   still scaling down cleanly on mobile since it's driven off vw. .cta-ring and .cta-content are plain
   (non-absolute) grid items sharing the same cell, so the section's height always auto-grows to fit
   whichever is taller — the frame never gets clipped by .cta's overflow:hidden at any width. */
.cta-ring{
  width:min(84vw,880px);aspect-ratio:16/9;
  pointer-events:none;
}
@keyframes recBlink{0%,45%{opacity:1;}50%,95%{opacity:.15;}100%{opacity:1;}}
.vf-frame{position:absolute;inset:0;border:1px solid rgba(255,255,255,.07);}
.vf-grid-h1,.vf-grid-h2{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.045);}
.vf-grid-h1{top:33.33%;}
.vf-grid-h2{top:66.66%;}
.vf-grid-v1,.vf-grid-v2{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.045);}
.vf-grid-v1{left:33.33%;}
.vf-grid-v2{left:66.66%;}
.vf-corner{position:absolute;width:22px;height:22px;border-color:rgba(255,23,65,.4);}
.vf-tl{top:-1px;left:-1px;border-top:1.5px solid;border-left:1.5px solid;}
.vf-tr{top:-1px;right:-1px;border-top:1.5px solid;border-right:1.5px solid;}
.vf-bl{bottom:-1px;left:-1px;border-bottom:1.5px solid;border-left:1.5px solid;}
.vf-br{bottom:-1px;right:-1px;border-bottom:1.5px solid;border-right:1.5px solid;}
.vf-hud{position:absolute;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.32);white-space:nowrap;}
/* top-left: SD card slot + recording time remaining */
.vf-hud-tl{top:12px;left:14px;}
.vf-sd-icon{position:relative;display:inline-flex;width:15px;height:11px;flex-shrink:0;}
.vf-sd-icon svg{width:100%;height:100%;display:block;}
.vf-sd-num{position:absolute;inset:0;left:2px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;}
/* top-right: recording format + battery, stacked */
.vf-hud-tr{top:12px;right:14px;flex-direction:column;align-items:flex-end;gap:2px;}
.vf-batt{color:rgba(255,255,255,.32);}
/* stacked directly above the shutter-angle readout (the first item of the bottom row, same left
   edge): REC tally, then the running timecode, then the shutter angle right below it */
.vf-hud-rec{bottom:50px;left:14px;color:rgba(255,23,65,.85);}
.vf-hud-rec .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:recBlink 1.6s infinite;flex-shrink:0;}
.vf-hud-tc{bottom:30px;left:14px;}
/* bottom row: shutter angle, f-stop, exposure, ISO spread left to right across the full width */
.vf-hud-bottom{
  position:absolute;bottom:12px;left:14px;right:14px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.32);
}
.vf-hud-bottom span{display:flex;align-items:center;gap:5px;white-space:nowrap;}
/* exposure-compensation glyph next to "+1.7" — a square split diagonally: black half with a white
   "+", white half with a black "−", like the exposure icon on a real camera viewfinder */
.vf-ev{position:relative;width:11px;height:11px;flex-shrink:0;background:#fff;border-radius:1px;overflow:hidden;}
.vf-ev::before{content:'';position:absolute;inset:0;background:#000;clip-path:polygon(0 0,100% 0,100% 100%);}
.vf-ev-plus{position:absolute;top:-1px;right:0;font-size:7px;line-height:1;color:#fff;font-weight:700;}
.vf-ev-minus{position:absolute;bottom:-2px;left:0.5px;font-size:9px;line-height:1;color:#000;font-weight:700;}
/* small grey center-lock brackets sitting behind the heading, like an AF centre-weight reticle */
.vf-center-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58%;height:52%;pointer-events:none;}
.vfc{position:absolute;width:14px;height:14px;border-color:rgba(255,255,255,.16);}
.vfc-tl{top:0;left:0;border-top:1px solid;border-left:1px solid;}
.vfc-tr{top:0;right:0;border-top:1px solid;border-right:1px solid;}
.vfc-bl{bottom:0;left:0;border-bottom:1px solid;border-left:1px solid;}
.vfc-br{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid;}
/* right-angle isosceles triangle, vertical edge sitting against the "180°" text (a mirrored/backwards L) */
.vf-tri{
  width:9px;height:9px;flex-shrink:0;
  background:rgba(255,255,255,.4);
  clip-path:polygon(0% 100%, 100% 100%, 100% 0%);
}
@media (max-width:1024px){.cta{min-height:280px;}}
@media (max-width:560px){
  .cta{min-height:240px;}
  .cta-ring{width:88vw;}
  .vf-hud{font-size:9px;}
  .vf-tri{width:7px;height:7px;}
}
.cta h2{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,4vw,52px);line-height:1.05;
}
.cta h2 em{font-style:normal;color:var(--accent);}
.cta .btn{margin-top:40px;}

/* ---------- FAQ ---------- */
.faq{padding:100px var(--gutter);border-top:1px solid var(--line);max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:22px 0;}
.faq summary{
  font-family:var(--display);font-size:18px;text-transform:uppercase;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--accent);font-size:22px;}
.faq details[open] summary::after{content:'–';}
.faq p{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.6;max-width:600px;}

/* ---------- footer ---------- */
footer{padding:60px var(--gutter) 40px;border-top:1px solid var(--line);}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:50px;}
.footer-col h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;padding:5px 0;}
.footer-col a:hover{color:var(--accent);}
.footer-logo img{height:30px;margin-bottom:16px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);flex-wrap:wrap;gap:14px;
}
.footer-bottom .dot{margin-right:8px;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{flex-direction:column;gap:30px;}
  .page-hero{padding:150px var(--gutter) 60px;}
  .intro{padding:90px var(--gutter) 70px;}
  .work{padding:80px var(--gutter);}
  .process{padding:80px var(--gutter);}
  .cta{padding:40px var(--gutter);}
  .faq{padding:80px var(--gutter);}
  .about-hero{height:70vh;min-height:460px;}
}
@media (max-width:560px){
  :root{--gutter:6.5vw;}
  .grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .hero-cta{flex-direction:column;align-items:flex-start;}
  .work-head{flex-direction:column;align-items:flex-start;}
  .rec{display:none;}
  .scroll-cue{display:none;}
  .page-hero{padding:130px var(--gutter) 50px;}
  .intro{padding:70px var(--gutter) 50px;}
  .work{padding:60px var(--gutter);}
  .process{padding:60px var(--gutter);}
  .cta{padding:32px var(--gutter);}
  .faq{padding:60px var(--gutter);}
  .about-hero{height:60vh;min-height:400px;}
  .testimonial{padding:24px var(--gutter) 18px;}
  .bts-track img{width:160px;height:106px;}
}

/* ---------- holomatrix — retro glowing pixel sign ---------- */
.holo-mark{
  padding:40px var(--gutter) 56px;text-align:center;
  background:#000;
}
.holo-video-wrap{position:relative;width:100%;max-width:440px;margin:0 auto;}
.holo-video{
  width:100%;height:auto;display:block;
  filter:brightness(.55);
  -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 88%);
  mask-image:radial-gradient(circle, #000 55%, transparent 88%);
}
/* full-brightness spotlight that follows the cursor — a backdrop-filter brightness boost, visible
   only inside a small circle at the pointer position (--mx/--my set by JS), so only the spot the
   cursor is over lights up to full brightness while the rest of the sign stays dimmed */
.holo-spotlight{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  -webkit-backdrop-filter:brightness(2.6);
  backdrop-filter:brightness(2.6);
  -webkit-mask-image:radial-gradient(circle 80px at var(--mx,50%) var(--my,50%), #000 0%, transparent 100%);
  mask-image:radial-gradient(circle 80px at var(--mx,50%) var(--my,50%), #000 0%, transparent 100%);
}
.holo-video-wrap:hover .holo-spotlight{opacity:1;}
@media (max-width:560px){.holo-mark{padding:40px var(--gutter);}.holo-video-wrap{max-width:300px;}}

/* custom camera cursor + magnetic buttons — desktop only. A small pulsing red accent dot (the same
   dot from the logo/REC indicator) leads, trailed by an autofocus reticle that snaps in tight and
   turns red around whatever's hovered — like a camera locking focus on its subject. */
.cursor-fx, .cursor-fx a, .cursor-fx button, .cursor-fx .btn{cursor:none;}
.cursor-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:301;
  transform:translate(-50%,-50%);
  animation:cursorPulse 1.8s ease-in-out infinite;
}
@keyframes cursorPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  50%{transform:translate(-50%,-50%) scale(1.6);opacity:.5;}
}
.cursor-ring{
  position:fixed;top:0;left:0;width:32px;height:32px;pointer-events:none;z-index:300;
  transform:translate(-50%,-50%);
  transition:width .22s ease, height .22s ease;
}
.cr-corner{position:absolute;width:7px;height:7px;border-color:rgba(255,255,255,.55);transition:border-color .22s ease;}
.cr-tl{top:0;left:0;border-top:1.3px solid;border-left:1.3px solid;}
.cr-tr{top:0;right:0;border-top:1.3px solid;border-right:1.3px solid;}
.cr-bl{bottom:0;left:0;border-bottom:1.3px solid;border-left:1.3px solid;}
.cr-br{bottom:0;right:0;border-bottom:1.3px solid;border-right:1.3px solid;}
.cursor-ring.hover{width:50px;height:50px;}
.cursor-ring.hover .cr-corner{border-color:var(--accent);}
@media (hover:none), (pointer:coarse){
  .cursor-fx, .cursor-fx a, .cursor-fx button, .cursor-fx .btn{cursor:auto;}
  .cursor-dot, .cursor-ring{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .cursor-dot, .cursor-ring{display:none;}
  .cursor-fx, .cursor-fx a, .cursor-fx button, .cursor-fx .btn{cursor:auto;}
}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute;left:var(--gutter);top:-60px;z-index:400;
  background:var(--fg);color:#000;padding:12px 18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-radius:2px;
}
.skip-link:focus{top:16px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
/* white on the accent red is only 3.9:1, so the hover state switches to black text (5.5:1) */
.btn.primary:hover{color:#000;}
/* closed mobile menu is off-screen; hide it from keyboard and screen readers too */
.mobile-menu{visibility:hidden;transition:transform .35s ease, visibility 0s linear .35s;}
.mobile-menu.open{visibility:visible;transition:transform .35s ease, visibility 0s linear 0s;}
button.filter-btn{font-family:var(--body);background:transparent;}
/* testimonial dots are real buttons with a 24px tap target; the visible dot is drawn inside */
.t-dots{gap:0;align-items:center;}
.t-dot{width:24px;height:24px;border:0;padding:0;background:none;display:grid;place-items:center;}
.t-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s ease;}
.t-dot.active{background:none;}
.t-dot.active::before{background:var(--accent);}
.t-pause{
  margin-left:10px;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--muted);font-size:9px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.t-pause:hover{color:var(--fg);border-color:var(--fg);}
/* client logo strip rolls nonstop, even on hover (pause removed 23 Oct 2026: it made the logos look clickable); it still stops for reduced-motion users */
/* BTS strip keeps rolling on hover (pause removed 17 Oct 2026) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .marquee, .bts-track, .tagline .dot, .card-timecode .dot, .vf-hud-rec .dot{animation:none;}
  .t-slide.active{animation:none;}
}

/* ---------- forms ---------- */
.contact-form input, .contact-form textarea, .contact-form select{border-bottom-color:rgba(255,255,255,.4);}
.contact-form ::placeholder{color:#8a8a8a;opacity:1;}
.contact-form .req{color:var(--accent);}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{margin-top:22px;font-size:12px;line-height:1.6;color:var(--muted);max-width:520px;}
.form-note a{color:var(--fg);text-decoration:underline;}
.form-turnstile{margin-top:22px;}
.form-turnstile:empty{margin:0;}
.form-status{margin-top:16px;font-size:14px;line-height:1.5;min-height:1.5em;}
.form-status.error{color:var(--accent);}
button.btn{font-family:var(--body);cursor:pointer;}

/* ---------- business details + legal links (footer) ---------- */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 22px;}
.footer-legal a:hover{color:var(--fg);}
.footer-business{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px;max-width:260px;}

/* ---------- legal pages ---------- */
.legal{padding:70px var(--gutter) 110px;max-width:820px;}
.legal .updated{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:40px;}
.legal h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);margin:52px 0 16px;}
.legal h3{font-family:var(--body);font-weight:600;font-size:16px;margin:28px 0 10px;}
.legal p, .legal li{color:#c8c8c8;font-size:15px;line-height:1.7;}
.legal p + p{margin-top:12px;}
.legal ul{margin:10px 0 0 20px;}
.legal ul + p, .legal .table-wrap + p{margin-top:16px;}
.legal li + li{margin-top:6px;}
.legal a{color:var(--fg);text-decoration:underline;}
.legal table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;}
.legal th, .legal td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line);color:#c8c8c8;line-height:1.55;}
.legal th{color:var(--fg);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.legal .table-wrap{overflow-x:auto;}
/* details Kian still has to confirm before launch — impossible to miss, easy to search for */
.tbc{background:rgba(255,23,65,.14);color:#fff;border:1px dashed var(--accent);padding:0 5px;border-radius:2px;}
.legal-summary{border:1px solid var(--line);border-radius:2px;padding:24px 26px;margin-bottom:10px;}
.legal-summary p{color:var(--fg);}

/* ---------- click-to-load embeds (no third-party requests until asked) ---------- */
.embed-gate{border:1px dashed var(--line);border-radius:2px;padding:32px;text-align:center;margin-bottom:40px;}
.embed-gate p{color:var(--muted);font-size:13px;line-height:1.6;max-width:420px;margin:0 auto 20px;}
.embed-gate p a{color:var(--fg);text-decoration:underline;}
.embed-frame{width:100%;height:700px;border:0;border-radius:2px;background:#fff;margin-bottom:40px;}
main:focus{outline:none;}

/* ---------- Jost tuning ----------
   Jost (Futura lineage) is the single brand typeface, matching the geometric Montserrat logo.
   Uppercase display type gets a little open tracking, the way Futura is set on film titles. */
.hero-content h1, .page-hero h1, .about-hero-content h1, .work-head h2, .cta h2,
.card-info h3, .faq summary, .process-step h3, .mobile-menu a, .legal h2,
.strip-item h3, .service-row h3, .package-card h3, .quote-note h3, .marquee-item{letter-spacing:.035em;}
.intro p{font-weight:400;}
.testimonial blockquote{font-weight:400;}

/* =====================================================================
   FILM LANGUAGE PASS (16 Oct 2026)
   Motion is opt-in via html.js and switched off for prefers-reduced-motion,
   so without JS (or with reduced motion) everything simply shows.
   ===================================================================== */
:root{--ease-out:cubic-bezier(.16,.84,.24,1);--ease-cut:cubic-bezier(.7,0,.3,1);}
html{background:#000;}

/* ---------- film grain: a faint living texture so the black never reads as flat ---------- */
body::after{
  content:'';position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);} 20%{transform:translate(-4%,3%);} 40%{transform:translate(3%,-5%);}
  60%{transform:translate(-2%,4%);} 80%{transform:translate(5%,1%);} 100%{transform:translate(0,0);}
}
@media (max-width:560px){body::after{animation:none;opacity:.045;}}

/* ---------- page transitions: fade up from black on arrival, dip to black on leaving ---------- */
html.js body{animation:cutIn .5s var(--ease-out) both;}
/* starts at 1%, not 0: Chrome never counts a first paint made at opacity 0, which hid FCP/LCP from Core Web Vitals */
@keyframes cutIn{from{opacity:.01;}to{opacity:1;}}
.page-cut{position:fixed;inset:0;background:#000;z-index:450;pointer-events:none;opacity:0;transition:opacity .24s var(--ease-cut);}
.page-cut.on{opacity:1;pointer-events:all;}

/* ---------- scene markers on section labels ---------- */
.section-label .sc{font-family:var(--mono);font-weight:400;letter-spacing:.04em;color:var(--muted);margin-right:4px;}

/* ---------- hero: title-card reveal + reel button ---------- */
.hero-content h1 .line{display:block;width:max-content;max-width:none;overflow:hidden;padding-bottom:.04em;}
.hero-content h1 .line > *{display:inline-block;}
html.js .hero-content h1 .line > *{transform:translateY(108%);transition:transform 1.1s var(--ease-out);}
html.js .hero-content h1 .line:nth-child(2) > *{transition-delay:.14s;}
html.js .hero .tagline, html.js .hero-content p, html.js .hero .location-line, html.js .hero .hero-cta{opacity:0;transform:translateY(14px);transition:opacity .9s ease, transform .9s var(--ease-out);}
html.js .hero .tagline{transition-delay:0s;}
html.js .hero-content p{transition-delay:.35s;}
html.js .hero .location-line{transition-delay:.45s;}
html.js .hero .hero-cta{transition-delay:.55s;}
html.js .hero.ready .hero-content h1 .line > *{transform:none;}
html.js .hero.ready .tagline, html.js .hero.ready .hero-content p, html.js .hero.ready .location-line, html.js .hero.ready .hero-cta{opacity:1;transform:none;}
.reel-btn{gap:12px;}
.play-ico{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;}
.reel-btn:hover{border-color:var(--accent);color:var(--fg);}
@media (max-width:560px){
  .hero-content h1{white-space:normal;font-size:clamp(34px,10.6vw,46px);line-height:1.02;}
  .hero-cta{flex-direction:row;flex-wrap:wrap;}
  .hero-cta .btn{padding:14px 20px;}
}

/* ---------- Who We Are: editorial split ---------- */
.intro.intro-split{max-width:none;}
.intro-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px 8vw;align-items:end;}
.intro-split .intro-lead{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,50px);line-height:1.18;letter-spacing:.005em;color:var(--fg);}
.intro-side p{font-family:var(--body);font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--muted);font-weight:400;}
.intro-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;margin:34px 0 30px;padding-top:24px;border-top:1px solid var(--line);}
.intro-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.intro-meta dd{margin-top:5px;font-size:15px;color:var(--fg);}
.text-link{display:inline-flex;gap:10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .25s ease, gap .25s ease;}
.text-link:hover{border-color:var(--accent);gap:16px;}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr;}}

/* lens pull: soft and slightly oversized, then snaps into focus */
html.js [data-reveal="focus"]{filter:blur(14px);opacity:.15;transform:scale(1.03);transition:filter 1.3s var(--ease-out), opacity 1.1s ease, transform 1.4s var(--ease-out);}
html.js [data-reveal="focus"].in-view{filter:none;opacity:1;transform:none;}
html.js [data-reveal="rise"]{opacity:0;transform:translateY(28px);transition:opacity 1s ease .25s, transform 1.1s var(--ease-out) .25s;}
html.js [data-reveal="rise"].in-view{opacity:1;transform:none;}

/* ---------- frames: children wipe in one after another, like frames on a strip ---------- */
html.js [data-reveal="frames"] > *{clip-path:inset(0 0 100% 0);opacity:.001;transition:clip-path 1s var(--ease-out), opacity .4s ease;transition-delay:calc(var(--i,0) * 90ms);}
html.js [data-reveal="frames"].in-view > *{clip-path:inset(0 0 0 0);opacity:1;}

/* ---------- logo strip (white cut-outs in assets/img/logos; each img's width/height attributes set its optical size) ---------- */
.marquee-item{display:flex;align-items:center;}
.marquee-item img{display:block;opacity:.55;transition:opacity .3s ease;}
@media (max-width:640px){.marquee-item{padding:0 30px;}.marquee-item img{zoom:.75;}}

/* ---------- Working Together: frame numbers + a red line that draws across ---------- */
.strip-item{position:relative;overflow:hidden;transition:background .3s ease;}
.strip-item .num{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:22px;}
.strip-item::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);}
.strip-item:hover::after, .strip-item:focus-visible::after{transform:scaleX(1);}

/* ---------- reviews: letterboxed like a 2.39:1 frame ---------- */
.letterbox{position:relative;background:#0b0b0b;padding:92px 0 80px;margin:30px 0 10px;overflow:hidden;}
.letterbox::before, .letterbox::after{content:'';position:absolute;left:0;right:0;height:34px;background:#000;z-index:2;transition:transform 1.2s var(--ease-out);}
.letterbox::before{top:0;}
.letterbox::after{bottom:0;}
html.js .letterbox::before{transform:translateY(-100%);}
html.js .letterbox::after{transform:translateY(100%);}
html.js .letterbox.in-view::before, html.js .letterbox.in-view::after{transform:none;}
.letterbox .testimonial{padding-top:0;padding-bottom:0;}

/* ---------- CTA viewfinder: corners focus in, REC starts when it's in shot ---------- */
html.js [data-reveal="viewfinder"] .vf-corner{opacity:0;transition:transform 1s var(--ease-out), opacity .6s ease;}
html.js [data-reveal="viewfinder"] .vf-tl{transform:translate(-18px,-18px);}
html.js [data-reveal="viewfinder"] .vf-tr{transform:translate(18px,-18px);}
html.js [data-reveal="viewfinder"] .vf-bl{transform:translate(-18px,18px);}
html.js [data-reveal="viewfinder"] .vf-br{transform:translate(18px,18px);}
html.js [data-reveal="viewfinder"] .vf-center-lock{transform:translate(-50%,-50%) scale(1.25);opacity:0;transition:transform 1.2s var(--ease-out) .25s, opacity .8s ease .25s;}
html.js [data-reveal="viewfinder"] .vf-hud-rec .dot{animation-play-state:paused;}
html.js [data-reveal="viewfinder"].in-view .vf-corner{opacity:1;transform:none;}
html.js [data-reveal="viewfinder"].in-view .vf-center-lock{transform:translate(-50%,-50%);opacity:1;}
html.js [data-reveal="viewfinder"].in-view .vf-hud-rec .dot{animation-play-state:running;}

/* ---------- footer: the retro logo lives here now, on every page ---------- */
.footer-top{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(110px,auto));gap:40px 48px;align-items:start;}
.footer-holo{max-width:190px;margin:0 0 18px -14px;}
@media (max-width:1024px){
  .footer-top{grid-template-columns:repeat(2,1fr);}
  .footer-top .footer-logo{grid-column:1 / -1;}
}
@media (max-width:560px){.footer-holo{max-width:160px;}}

/* ---------- reduced motion: no grain flicker, no transitions, everything in place ---------- */
@media (prefers-reduced-motion: reduce){
  body::after{animation:none;}
  html.js body{animation:none;}
  .page-cut{display:none;}
  html.js .hero-content h1 .line > *, html.js .hero .tagline, html.js .hero-content p, html.js .hero .location-line, html.js .hero-cta,
  html.js [data-reveal], html.js [data-reveal] > *, html.js [data-reveal] .vf-corner, html.js [data-reveal] .vf-center-lock{
    transition:none !important;transform:none !important;opacity:1 !important;filter:none !important;clip-path:none !important;
  }
  html.js [data-reveal="viewfinder"] .vf-center-lock{transform:translate(-50%,-50%) !important;}
  html.js .letterbox::before, html.js .letterbox::after{transform:none;transition:none;}
}
.footer-logo .holo-video{height:auto;margin:0;}
@media (max-width:560px){.hero-content h1 .line{width:auto;}}

/* =====================================================================
   CREATIVE PASS 2 (16 Oct 2026): transitions, footer card, statement,
   About knockout, Work browse wall + project pop-up, easter eggs
   ===================================================================== */

/* ---------- page transitions: every one ends on black ---------- */
.page-cut{position:fixed;inset:0;z-index:450;pointer-events:none;visibility:hidden;opacity:1;transition:none;overflow:hidden;background:transparent;}
.page-cut.on{visibility:visible;pointer-events:all;}
.cut-layer, .cut-black{position:absolute;inset:0;opacity:0;}
.cut-black{background:#000;}
/* fade */
.cut-fade.on .cut-black{animation:cutBlack .26s var(--ease-cut) forwards;}
@keyframes cutBlack{to{opacity:1;}}
/* film burn: hot spots bloom from the edge of the frame, then burn out to black */
.cut-burn .cut-a{background:radial-gradient(circle at 20% 70%, #fff6d8 0%, #ffb347 14%, #ff5a1f 30%, #b3001e 48%, transparent 66%);mix-blend-mode:screen;}
.cut-burn .cut-b{background:radial-gradient(circle at 85% 20%, #ffe9b0 0%, #ff7b2e 18%, #ff1741 36%, transparent 60%);mix-blend-mode:screen;}
.cut-burn.on .cut-a{animation:burnA .56s ease-in forwards;}
.cut-burn.on .cut-b{animation:burnB .56s ease-in .06s forwards;}
.cut-burn.on .cut-black{animation:cutBlack .2s ease-in .36s forwards;}
@keyframes burnA{0%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1.2);}100%{opacity:1;transform:scale(2.6);}}
@keyframes burnB{0%{opacity:0;transform:scale(.3);}60%{opacity:.9;transform:scale(1.3);}100%{opacity:1;transform:scale(2.4);}}
/* iris: a circular matte closes in on the centre of frame */
.cut-iris .cut-a{left:50%;top:50%;right:auto;bottom:auto;width:150vmax;height:150vmax;border-radius:50%;box-shadow:0 0 0 150vmax #000, inset 0 0 0 2px rgba(255,23,65,.7);transform:translate(-50%,-50%) scale(1);opacity:1;}
.cut-iris.on .cut-a{animation:iris .55s var(--ease-cut) forwards;}
.cut-iris.on .cut-black{animation:cutBlack .1s linear .46s forwards;}
@keyframes iris{from{transform:translate(-50%,-50%) scale(1);}to{transform:translate(-50%,-50%) scale(0);}}
/* light leak: one warm wash sweeps across (soft, not a strobe), then black */
.cut-flash .cut-a{background:linear-gradient(100deg, transparent 0%, rgba(255,120,60,.0) 10%, rgba(255,170,90,.75) 35%, rgba(255,240,215,.92) 50%, rgba(255,90,60,.6) 68%, transparent 90%);background-size:250% 100%;mix-blend-mode:screen;}
.cut-flash.on .cut-a{animation:leak .56s ease-out forwards;}
.cut-flash.on .cut-black{animation:cutBlack .22s ease-in .34s forwards;}
@keyframes leak{0%{opacity:0;background-position:100% 0;}30%{opacity:1;}100%{opacity:1;background-position:0 0;}}
/* shutter: top and bottom blades meet in the middle */
.cut-shutter .cut-a, .cut-shutter .cut-b{background:#000;opacity:1;}
.cut-shutter .cut-a{bottom:50%;transform:translateY(-100%);border-bottom:1px solid rgba(255,23,65,.6);}
.cut-shutter .cut-b{top:50%;transform:translateY(100%);border-top:1px solid rgba(255,23,65,.6);}
.cut-shutter.on .cut-a, .cut-shutter.on .cut-b{animation:shutter .46s var(--ease-cut) forwards;}
.cut-shutter.on .cut-black{animation:cutBlack .1s linear .44s forwards;}
@keyframes shutter{to{transform:none;}}
/* VHS tracking glitch: torn colour bands roll through, then signal lost */
.cut-glitch .cut-a{background:repeating-linear-gradient(0deg, rgba(255,23,65,.55) 0 3px, transparent 3px 9px), repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px);mix-blend-mode:screen;}
.cut-glitch .cut-b{background:linear-gradient(90deg, rgba(0,255,255,.35), rgba(255,0,80,.35));mix-blend-mode:screen;}
.cut-glitch.on .cut-a{animation:glitchA .5s steps(1) forwards;}
.cut-glitch.on .cut-b{animation:glitchB .5s steps(1) forwards;}
.cut-glitch.on .cut-black{animation:cutBlack .14s linear .4s forwards;}
@keyframes glitchA{
  0%{opacity:1;clip-path:inset(10% 0 78% 0);transform:translateX(-12px);}
  20%{clip-path:inset(55% 0 30% 0);transform:translateX(16px);}
  40%{clip-path:inset(30% 0 52% 0);transform:translateX(-6px);}
  60%{clip-path:inset(0 0 60% 0);transform:translateX(10px);}
  80%{clip-path:inset(0);transform:translateX(0);}
  100%{opacity:1;clip-path:inset(0);}
}
@keyframes glitchB{
  0%{opacity:.9;clip-path:inset(70% 0 12% 0);transform:translateX(20px);}
  25%{clip-path:inset(20% 0 66% 0);transform:translateX(-18px);}
  50%{clip-path:inset(44% 0 40% 0);transform:translateX(8px);}
  75%{clip-path:inset(0 0 0 0);transform:translateX(-4px);opacity:.6;}
  100%{opacity:0;}
}

/* ---------- TV-panel texture (scanlines + RGB sub-pixels), used on red + About ---------- */
.tv{position:relative;}
.tv::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,0,0,.07) 0 1px, rgba(0,255,0,.05) 1px 2px, rgba(0,0,255,.07) 2px 3px);
}

/* ---------- statement: brand red, but a designed surface, not a flat fill ---------- */
.statement{
  overflow:hidden;color:#fff;padding:150px var(--gutter);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255,140,120,.35), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(80,0,12,.85), transparent 60%),
    radial-gradient(60% 60% at 50% 50%, #ff2a50, #e0102f 70%, #9c0a22 100%);
}
.statement::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 160px rgba(40,0,6,.75);}
.statement-inner{position:relative;z-index:2;max-width:1180px;}
.statement-label, .statement-label .sc{color:#000;}
.statement-label::before{background:#000;}
.statement-text{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.8vw,72px);line-height:1.1;letter-spacing:.005em;}
.statement-text.words-live .w{opacity:.28;transition:opacity .35s ease;}
.statement-text.words-live .w.lit{opacity:1;}
.statement-hud{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:56px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(0,0,0,.75);}
@media (max-width:560px){.statement{padding:90px var(--gutter);}}

/* ---------- Home cards are real links now ---------- */
a.card{display:block;color:inherit;}

/* ---------- About: the word is a window onto the footage ---------- */
.about-knockout .ko-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.15) contrast(1.05);}
.about-knockout .ko-panel{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center;z-index:1;}
.about-knockout .ko-text{color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(90px,25vw,420px);line-height:.8;letter-spacing:-.01em;margin-top:-6vh;}
.about-knockout::after{z-index:1;background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.9) 100%);}
.about-knockout .about-hero-content{z-index:3;}
.ko-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent) !important;margin-top:0 !important;}

/* ---------- Work: browse wall ---------- */
.work-browse{padding-bottom:28px;}
.work-browse .work-head{margin-bottom:20px;align-items:center;}
.work-browse .section-label{margin-bottom:0;}
.filter-intro{max-width:620px;color:var(--muted);font-size:14px;min-height:20px;}
.wall-hint{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);}
.wall{position:relative;padding:0 var(--gutter);}
.wall-track{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:18px;}
.wall.is-live{height:min(80vh,780px);overflow:hidden;padding:0;background:#050505;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.wall.is-live .wall-track{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);grid-template-columns:repeat(3, clamp(360px, 40vw, 680px));gap:22px;padding:22px;will-change:transform;}
.wall.is-live::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.85) 100%);}
.tile{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#111;border:0;padding:0;color:#fff;text-align:left;font:inherit;cursor:pointer;
  transition:transform .45s var(--ease-out), box-shadow .45s ease, opacity .4s ease, filter .4s ease;}
.tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);transition:transform .9s var(--ease-out), filter .4s ease;}
.tile:hover, .tile:focus-visible{transform:scale(1.045);z-index:3;box-shadow:0 28px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,23,65,.65);}
.tile:hover img, .tile:focus-visible img{filter:brightness(.8);transform:scale(1.06);}
.tile-meta{position:absolute;left:20px;right:20px;bottom:18px;display:flex;flex-direction:column;gap:5px;}
.tile-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;}
.tile-title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(17px,1.7vw,26px);line-height:1.1;}
.tile-sub{font-size:12px;color:#bdbdbd;}
.tile-play{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity .3s ease, transform .3s var(--ease-out);}
.tile-play::before{content:'';border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #fff;margin-left:3px;}
.tile:hover .tile-play, .tile:focus-visible .tile-play{opacity:1;transform:none;}
.tile.is-soon{cursor:default;}
.tile.is-soon img{filter:brightness(.28) grayscale(.6);}
.tile.is-soon:hover{transform:none;box-shadow:none;}
.tile.is-dim{opacity:.16;filter:grayscale(1);pointer-events:none;}

/* ---------- project pop-up ---------- */
.project-modal{border:0;padding:0;margin:auto;background:transparent;color:var(--fg);width:min(1120px, 94vw);max-width:none;max-height:92vh;overflow:visible;}
.project-modal::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.project-modal[open] .pm-inner{animation:pmIn .45s var(--ease-out);}
@keyframes pmIn{from{opacity:0;transform:translateY(24px) scale(.98);}to{opacity:1;transform:none;}}
.pm-inner{position:relative;display:grid;grid-template-columns:1.6fr 1fr;background:#0b0b0b;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:92vh;}
.pm-media{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center;align-self:start;}
.pm-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5);}
.pm-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}
.pm-play{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid #fff;border-radius:2px;background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}
.pm-play:hover{background:var(--accent);border-color:var(--accent);color:#000;}
.pm-note{position:absolute;left:0;right:0;bottom:12px;z-index:2;text-align:center;font-size:11px;color:#c8c8c8;}
.pm-note a{color:#fff;text-decoration:underline;}
.pm-info{padding:34px 30px 26px;display:flex;flex-direction:column;gap:10px;overflow:auto;}
.pm-tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}
.pm-title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(24px,2.6vw,36px);line-height:1.05;}
.pm-meta{font-size:13px;color:var(--muted);}
.pm-desc{font-size:15px;line-height:1.65;color:#cfcfcf;margin-top:6px;}
.pm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.pm-actions .btn{padding:12px 18px;}
.pm-nav{display:flex;justify-content:space-between;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);}
.pm-step{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:6px 0;}
.pm-step:hover{color:var(--fg);}
.pm-close{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.6);color:#fff;font-size:15px;cursor:pointer;}
.pm-close:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:860px){
  .pm-inner{grid-template-columns:1fr;overflow:auto;}
  .pm-info{padding:24px 20px 20px;}
}

/* ---------- footer: a floating card, logo left with the words beside it ---------- */
footer.site-footer{padding:30px var(--gutter) 34px;border-top:0;}
.footer-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.1);padding:44px 46px 24px;
  background:radial-gradient(70% 120% at 0% 0%, rgba(255,23,65,.12), transparent 60%), linear-gradient(160deg, #161616 0%, #0b0b0b 55%, #070707 100%);}
.site-footer .footer-top{display:grid;grid-template-columns:minmax(320px,1.15fr) 2fr;gap:40px 60px;align-items:center;padding-bottom:40px;}
.footer-brand{display:flex;align-items:center;gap:24px;}
.site-footer .footer-holo{flex:0 0 150px;max-width:150px;margin:0;}
.footer-brand-text p{font-size:13px;color:var(--muted);line-height:1.6;max-width:300px;}
.footer-brand-text p + p{margin-top:8px;}
.footer-tagline{font-family:var(--display);font-weight:600;font-size:14px !important;letter-spacing:.2em;text-transform:uppercase;color:var(--fg) !important;display:flex;align-items:center;gap:8px;}
.footer-tagline .dot{width:7px;height:7px;}
.footer-business a{text-decoration:underline;}
.footer-cols{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:30px;align-self:start;}
.footer-col h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:600;}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1);}
.rewind{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.rewind:hover{color:var(--accent);}
@media (max-width:1024px){
  .site-footer .footer-top{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:560px){
  footer.site-footer{padding:18px 12px 20px;}
  .footer-card{border-radius:16px;padding:28px 20px 18px;}
  .site-footer .footer-holo{flex-basis:96px;max-width:96px;}
  .footer-brand{gap:16px;align-items:flex-start;}
}

/* ---------- easter egg: the slate ---------- */
.slate{position:fixed;inset:0;z-index:600;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.45);transition:opacity .5s ease;}
.slate.out{opacity:0;}
.slate-board{width:min(440px, 86vw);background:#0d0d0d;border:2px solid #fff;font-family:var(--mono);color:#fff;transform:rotate(-3deg);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.slate-sticks{height:40px;background:repeating-linear-gradient(-45deg, #fff 0 20px, #0d0d0d 20px 40px);border-bottom:2px solid #fff;transform-origin:0 100%;transform:rotate(-20deg);transition:transform .12s ease-in;}
.slate.clap .slate-sticks{transform:none;}
.slate-board dl{display:grid;grid-template-columns:1fr 1fr;}
.slate-board dl > div{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.35);border-right:1px solid rgba(255,255,255,.35);}
.slate-board dt{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.slate-board dd{font-size:15px;margin-top:3px;}
.slate-note{padding:12px 14px 14px;font-size:12px;color:#bbb;}

@media (prefers-reduced-motion: reduce){
  .page-cut{display:none;}
  .tile, .tile img{transition:none;}
  .project-modal[open] .pm-inner{animation:none;}
  .slate-sticks{transition:none;}
}
.cut-burn .cut-a, .cut-burn .cut-b, .cut-flash .cut-a{inset:-40%;}

/* =====================================================================
   PASS 3 (16 Oct 2026): fixes + In Focus series, My Story, wall v2,
   end card, new transitions, easter eggs
   ===================================================================== */

/* ---------- one typeface: labels that were mono are Jost now (mono stays for real timecode/HUD only) ---------- */
.section-label .sc, .wall-hint, .tile-tag, .ko-eyebrow, .pm-tag, .intro-meta dt, .strip-item .num,
.rewind, .legal .updated, .episode-num{font-family:var(--body);}
.section-label .sc{letter-spacing:.12em;font-weight:500;}
.ko-eyebrow{letter-spacing:.14em !important;font-weight:500;}
.wall-hint{letter-spacing:.1em;text-transform:uppercase;font-size:11px;}

/* ---------- fix: page jumping on its own (reviews changed height every 6s) ---------- */
.t-slider{display:grid;}
.t-slide, .t-slide.active{display:block;grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .5s ease, visibility 0s linear .5s;animation:none;}
.t-slide.active{visibility:visible;opacity:1;transition:opacity .5s ease, visibility 0s;}

/* ---------- fix: grain jitter. Same texture, but the overlay no longer moves or overhangs the screen ---------- */
body::after{inset:0;transform:none !important;animation:grainShift .8s steps(5) infinite;}
@keyframes grainShift{0%{background-position:0 0;}20%{background-position:-37px 23px;}40%{background-position:51px -41px;}60%{background-position:-18px 62px;}80%{background-position:44px 9px;}100%{background-position:0 0;}}
@media (max-width:560px){body::after{animation:none;}}
@media (prefers-reduced-motion: reduce){body::after{animation:none;}}

/* ---------- fix: normal cursor inside pop-ups (the custom cursor can't draw above them) ---------- */
dialog, dialog *{cursor:auto !important;}
dialog button, dialog a{cursor:pointer !important;}

/* ---------- footer: logo far left on black, card shades out to grey on the right ---------- */
.footer-card{background:
  linear-gradient(90deg, #000 0%, #000 18%, #0d0d0d 45%, #171717 100%);
}
.footer-mark{flex:0 0 auto;display:block;}
.footer-mark img{width:84px;height:auto;display:block;}
@media (max-width:560px){.footer-mark img{width:60px;}}

/* ---------- Home end card: the retro VHS logo on pure black ---------- */
.end-card{padding:40px var(--gutter) 30px;text-align:center;background:#000;}
.end-card .holo-video-wrap{max-width:380px;margin:0 auto;}
.end-card-line{margin-top:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;}
@media (max-width:560px){.end-card .holo-video-wrap{max-width:260px;}}

/* ---------- CTA: footage inside the viewfinder ---------- */
.vf-media{position:absolute;inset:0;overflow:hidden;}
.vf-media img, .vf-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(1.1);}
.vf-frame{background:#050505;}
.cta-content{text-shadow:0 2px 30px rgba(0,0,0,.6);}

/* ---------- "standby" placeholder for anything not shot/uploaded yet ---------- */
.standby{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, #1a1a1a 0%, #070707 75%);}
.standby-bars{position:absolute;left:0;right:0;top:0;height:5px;display:block;
  background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.56%,#00c0c0 0 42.84%,#00c000 0 57.12%,#c000c0 0 71.4%,#c00000 0 85.68%,#0000c0 0);opacity:.55;}
.standby-ring{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent);animation:standbySpin 1.4s linear infinite;margin-bottom:22%;}
@keyframes standbySpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.standby-ring{animation:none;}}
.tile.is-soon{background:#070707;}

/* ---------- Work wall v2: smaller titles, more on screen, pinned while you scroll through it ---------- */
.wall-stage.is-live{height:210vh;position:relative;}
.wall-stage.is-live .wall{position:sticky;top:0;height:100vh;}
.wall.is-live .wall-track{grid-template-columns:repeat(4, clamp(250px, 25vw, 420px));gap:16px;padding:16px;}
.wall.is-live .tile-title{font-size:clamp(14px,1.25vw,20px);}
.wall.is-live .tile-meta{left:14px;right:14px;bottom:12px;}
.wall.is-live .tile-play{width:34px;height:34px;top:12px;right:12px;}
.wall-track{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));}

/* ---------- In Focus: series page ---------- */
.series-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);}
.series-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.05);}
.series-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, transparent 80%), linear-gradient(0deg, #000 0%, transparent 40%);}
.series-content{position:relative;z-index:2;padding:0 var(--gutter) 70px;max-width:760px;}
.series-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#d0d0d0;margin-bottom:14px;}
.series-eyebrow .dot{width:8px;height:8px;}
.series-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(54px,9vw,128px);line-height:.9;letter-spacing:.02em;}
.series-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;font-size:13px;color:#cfcfcf;}
.series-meta span + span::before{content:'·';margin-right:16px;color:var(--accent);}
.series-desc{margin-top:16px;color:#cfcfcf;font-size:16px;line-height:1.6;max-width:560px;}
.series-content .hero-cta{margin-top:28px;}
button.btn.primary .play-ico{margin-right:2px;}
.yt-note{margin-top:14px;font-size:11px;color:#8f8f8f;}
.yt-note a{text-decoration:underline;color:#cfcfcf;}

.episodes{padding:70px var(--gutter) 110px;max-width:1180px;}
.episodes-head{display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.episodes-head h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(24px,2.6vw,34px);}
.season-pill{font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:6px 12px;border-radius:20px;color:var(--muted);}
.episode-list{list-style:none;border-top:1px solid var(--line);}
.episode{display:grid;grid-template-columns:minmax(220px, 340px) 1fr;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);}
.ep-thumb{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:6px;background:#0a0a0a;border:0;padding:0;cursor:pointer;}
.ep-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform .6s var(--ease-out), filter .3s ease;}
.ep-thumb:hover img, .ep-thumb:focus-visible img{transform:scale(1.05);filter:brightness(.9);}
.ep-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.35);display:grid;place-items:center;opacity:.9;transition:transform .3s var(--ease-out), background .3s ease;}
.ep-play::before{content:'';border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff;margin-left:4px;}
.ep-thumb:hover .ep-play{transform:scale(1.1);background:var(--accent);border-color:var(--accent);}
.ep-dur{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.7);padding:2px 6px;border-radius:2px;}
.ep-top{display:flex;align-items:baseline;gap:14px;}
.ep-num{font-family:var(--display);font-size:30px;font-weight:600;color:var(--muted);min-width:22px;}
.ep-top h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;letter-spacing:.03em;flex:1;}
.ep-len{font-size:13px;color:var(--muted);}
.ep-body p{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.6;max-width:620px;}
.ep-body p a{color:var(--fg);text-decoration:underline;}
.episode.is-soon .ep-thumb{cursor:default;}
.episode.is-soon .ep-top h3{color:var(--muted);}
@media (max-width:700px){.episode{grid-template-columns:1fr;gap:16px;}}
.apply-block{border:1px solid var(--line);border-radius:10px;padding:30px;margin-top:56px;max-width:640px;
  background:linear-gradient(90deg, rgba(255,23,65,.08), transparent 70%);}
.apply-block h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.2vw,22px);margin-bottom:10px;letter-spacing:.03em;}
.apply-block p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:22px;max-width:440px;}

/* ---------- About: My Story ---------- */
.my-story{padding:100px var(--gutter);border-top:1px solid var(--line);}
.my-story-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:50px;align-items:center;}
.story-player{position:relative;display:block;aspect-ratio:4/3;width:100%;overflow:hidden;border-radius:8px;border:0;padding:0;background:#000;cursor:pointer;}
.story-player img{width:100%;height:100%;object-fit:cover;filter:brightness(.75);transition:transform .8s var(--ease-out), filter .3s ease;}
.story-player:hover img, .story-player:focus-visible img{transform:scale(1.03);filter:brightness(.9);}
.story-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#000;transition:transform .3s var(--ease-out);}
.story-play .play-ico{border-top-width:10px;border-bottom-width:10px;border-left-width:16px;margin-left:5px;}
.story-player:hover .story-play{transform:scale(1.08);}
.story-dur{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:2px;color:#fff;}
.my-story-text h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(24px,2.8vw,38px);line-height:1.1;}
.my-story-text p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.65;}
.my-story-text .yt-note{font-size:11px;}
@media (max-width:900px){.my-story-grid{grid-template-columns:1fr;}}

/* ---------- film player (YouTube, click-to-play) ---------- */
.film-player{border:0;padding:0;margin:auto;background:transparent;width:min(1200px, 94vw);max-width:none;overflow:visible;color:#fff;}
.film-player::backdrop{background:rgba(0,0,0,.92);}
.fp-inner{position:relative;}
.fp-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.8);}
.fp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.fp-title{margin-top:14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#bdbdbd;}
.fp-close{top:-52px;right:0;}
.film-player[open] .fp-inner{animation:pmIn .45s var(--ease-out);}

/* ---------- transitions v2: About = lightning flash, Contact = real glitch ---------- */
.cut-flash .cut-a{inset:0;background:#fff;mix-blend-mode:normal;background-size:auto;}
.cut-flash .cut-b{inset:0;background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 49%, transparent 60%);mix-blend-mode:normal;}
.cut-flash.on .cut-b{animation:bolt .42s linear forwards;}
.cut-flash.on .cut-a{animation:lightning .42s linear forwards;}
.cut-flash.on .cut-black{animation:cutBlack .08s linear .34s forwards;}
@keyframes bolt{0%{opacity:0;transform:translateX(-30%);}10%{opacity:1;}30%{opacity:0;transform:translateX(10%);}100%{opacity:0;}}
/* two quick strikes (well under 3 flashes a second), then black */
@keyframes lightning{0%{opacity:0;}8%{opacity:.95;}16%{opacity:.1;}30%{opacity:.85;}44%{opacity:.25;}62%{opacity:1;}100%{opacity:1;}}
.cut-glitch .cut-a{background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);mix-blend-mode:normal;}
.cut-glitch .cut-b{background:
  linear-gradient(90deg, transparent 0 12%, rgba(255,23,65,.85) 12% 31%, transparent 31% 58%, rgba(0,230,255,.7) 58% 71%, transparent 71%);
  mix-blend-mode:screen;}
.cut-glitch.on .cut-a{animation:snow .5s steps(1) forwards;}
.cut-glitch.on .cut-b{animation:glitchBands .5s steps(1) forwards;}
.cut-glitch.on .cut-black{animation:cutBlack .1s steps(1) .42s forwards;}
@keyframes snow{0%{opacity:.6;}50%{opacity:1;}100%{opacity:1;}}
@keyframes glitchBands{
  0%{opacity:1;clip-path:inset(12% 0 80% 0);transform:translateX(-20px);}
  12%{clip-path:inset(62% 0 26% 0);transform:translateX(26px);}
  24%{clip-path:inset(34% 0 58% 0);transform:translateX(-10px);}
  36%{clip-path:inset(80% 0 6% 0);transform:translateX(14px);}
  48%{clip-path:inset(4% 0 88% 0);transform:translateX(-30px);}
  60%{clip-path:inset(46% 0 38% 0);transform:translateX(8px);}
  72%{clip-path:inset(20% 0 64% 0);transform:translateX(-16px);}
  84%{opacity:.7;clip-path:inset(0);}
  100%{opacity:0;}
}
/* the page itself tears: RGB split, slice jumps, hue shifts */
html.is-glitching main, html.is-glitching header{animation:tear .45s steps(1) forwards;}
@keyframes tear{
  0%{transform:translateX(0);filter:none;}
  10%{transform:translateX(-14px) skewX(-4deg);filter:drop-shadow(6px 0 0 rgba(255,0,60,.9)) drop-shadow(-6px 0 0 rgba(0,240,255,.9));clip-path:inset(0 0 40% 0);}
  22%{transform:translateX(18px);filter:hue-rotate(80deg) contrast(1.6) drop-shadow(-8px 0 0 rgba(255,0,60,.9));clip-path:inset(30% 0 10% 0);}
  34%{transform:translateX(-6px) skewX(6deg);filter:invert(.15) drop-shadow(10px 0 0 rgba(0,240,255,.9));clip-path:inset(55% 0 0 0);}
  46%{transform:translateX(24px);filter:saturate(3) drop-shadow(-4px 0 0 rgba(255,0,60,.9));clip-path:inset(0 0 65% 0);}
  58%{transform:translateX(-20px);filter:hue-rotate(-90deg) contrast(2);clip-path:inset(20% 0 20% 0);}
  70%{transform:translateX(8px) skewX(-8deg);filter:brightness(1.8) drop-shadow(8px 0 0 rgba(255,0,60,.9));clip-path:inset(70% 0 5% 0);}
  85%,100%{transform:translateX(0);filter:brightness(0);clip-path:inset(0);}
}

/* ---------- easter eggs ---------- */
/* Interstellar: Murph's Morse "S T A Y" in place of the footer dot */
.footer-copy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.morse{display:inline-flex;align-items:center;gap:3px;}
.morse i, .morse b{display:block;height:4px;background:var(--accent);border-radius:2px;}
.morse i{width:4px;}
.morse b{width:11px;}
.morse i:nth-child(3), .morse b:nth-child(4), .morse b:nth-child(6), .morse i:nth-child(8){margin-right:6px;}
/* MCU: the post-credits line */
.post-credits{padding:26vh 0 12vh;text-align:center;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#777;}
/* GTA: mission passed */
.mission{position:fixed;inset:0;z-index:620;display:grid;place-content:center;text-align:center;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);transition:opacity .6s ease;}
.mission.out{opacity:0;}
.mission-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(40px,7vw,96px);color:#ffd166;text-shadow:3px 3px 0 #000, 0 0 30px rgba(0,0,0,.6);animation:missionIn .5s var(--ease-out);}
.mission-sub{margin-top:6px;font-family:var(--display);font-weight:600;font-size:clamp(18px,2.4vw,30px);color:#fff;text-shadow:2px 2px 0 #000;}
@keyframes missionIn{from{transform:scale(1.4);opacity:0;}to{transform:none;opacity:1;}}
/* Spider-Man: a web drops in from the top-right */
.web-drop{position:fixed;top:0;right:12vw;z-index:610;pointer-events:none;display:flex;flex-direction:column;align-items:center;color:#fff;transform:translateY(-100%);animation:webDrop .9s cubic-bezier(.3,1.6,.5,1) forwards;transition:transform .7s ease-in;}
.web-drop.up{transform:translateY(-110%) !important;animation:none;}
.web-line{width:1.5px;height:38vh;background:linear-gradient(#fff, rgba(255,255,255,.7));}
.web-spider{width:34px;height:34px;color:var(--accent);margin-top:-2px;animation:spiderSway 1.6s ease-in-out .9s infinite alternate;transform-origin:50% -38vh;}
@keyframes webDrop{to{transform:translateY(0);}}
@keyframes spiderSway{from{transform:rotate(-3deg);}to{transform:rotate(3deg);}}

/* ---------- slate v2: a proper clapperboard ---------- */
.slate{background:rgba(0,0,0,.55);}
.slate-board{width:min(520px, 90vw);background:#111;border:0;border-radius:6px;transform:rotate(-2deg);box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:visible;font-family:var(--body);}
.slate-clapper{position:relative;height:46px;}
.slate-stick{position:absolute;left:0;right:0;height:22px;border-radius:3px;background:repeating-linear-gradient(-55deg, #f2f2f2 0 22px, #111 22px 44px);box-shadow:inset 0 0 0 2px #f2f2f2;}
.slate-base{bottom:0;}
.slate-top{bottom:24px;transform-origin:4px 100%;transform:rotate(-24deg);transition:transform .12s cubic-bezier(.6,0,.9,.4);}
.slate.clap .slate-top{transform:rotate(0);}
.slate.clap .slate-board{animation:slateKnock .25s ease-out .12s;}
@keyframes slateKnock{0%{transform:rotate(-2deg) translateY(0);}40%{transform:rotate(-2deg) translateY(5px);}100%{transform:rotate(-2deg) translateY(0);}}
.slate-body{border:2px solid #f2f2f2;border-top:0;border-radius:0 0 6px 6px;}
.slate-row{border-top:2px solid #f2f2f2;padding:10px 14px;}
.slate-row span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;}
.slate-row strong{display:block;margin-top:4px;font-size:18px;font-weight:500;color:#f2f2f2;letter-spacing:.02em;}
.slate-prod strong{font-size:26px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.slate-prod sup{font-size:.45em;vertical-align:super;}
.slate-grid3, .slate-grid2{display:grid;padding:0;}
.slate-grid3{grid-template-columns:1fr 1.6fr .7fr;}
.slate-grid2{grid-template-columns:1.6fr 1fr;}
.slate-grid3 > div, .slate-grid2 > div{padding:10px 14px;}
.slate-grid3 > div + div, .slate-grid2 > div + div{border-left:2px solid #f2f2f2;}
.slate-rec strong{color:var(--accent);}
@media (prefers-reduced-motion: reduce){.slate-top{transition:none;}}

/* =====================================================================
   PASS 4 (16 Oct 2026)
   ===================================================================== */
/* About transition: one soft camera flash (never full white, never strobing), then black */
.cut-flash .cut-a{background:radial-gradient(ellipse at center, rgba(255,250,240,.78) 0%, rgba(255,240,225,.55) 45%, rgba(255,230,210,.3) 100%);}
.cut-flash .cut-b{display:none;}
.cut-flash.on .cut-a{animation:softFlash .46s ease-out forwards;}
.cut-flash.on .cut-black{animation:cutBlack .2s ease-in .26s forwards;}
@keyframes softFlash{0%{opacity:0;}22%{opacity:1;}100%{opacity:.4;}}

/* Contact transition: short, smooth glitch (RGB split + tracking tear lines), no blocky bands */
.cut-glitch .cut-a{background:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);mix-blend-mode:normal;}
.cut-glitch .cut-b{display:none;}
.cut-glitch.on .cut-a{animation:snow .38s linear forwards;}
.cut-glitch.on .cut-black{animation:cutBlack .12s ease-in .27s forwards;}
html.is-glitching main, html.is-glitching header{filter:url(#kjgGlitch);animation:tearShake .3s steps(6) forwards;}
@keyframes tearShake{0%{transform:none;}20%{transform:translateX(-5px);}40%{transform:translateX(6px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}100%{transform:none;}}

/* custom cursor shows inside pop-ups now; native cursor only when there's no custom one */
dialog, dialog *{cursor:none !important;}
html:not(.has-cursor) dialog, html:not(.has-cursor) dialog *{cursor:auto !important;}
html:not(.has-cursor) dialog button, html:not(.has-cursor) dialog a{cursor:pointer !important;}
dialog .cursor-dot, dialog .cursor-ring{position:fixed;}

/* rewind icon (drawn, not an emoji) */
.rewind{display:inline-flex;align-items:center;gap:8px;}
.rewind-ico{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid currentColor;box-shadow:none;position:relative;margin-left:7px;}
.rewind-ico::before{content:'';position:absolute;top:-5px;left:-7px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid currentColor;}

/* footer without a second logo: brand text gets the room */
.footer-brand{gap:0;}
.footer-brand-text p{max-width:340px;}

/* standby v2: viewfinder card (corner brackets, standby tally, timecode, colour bars) — no spinner */
.standby{background:radial-gradient(ellipse at 50% 40%, #151515 0%, #080808 70%), #080808;}
.standby-ring{display:none;}
.standby .sb-corner{position:absolute;width:16px;height:16px;border-color:rgba(255,23,65,.7);}
.sb-tl{top:12px;left:12px;border-top:1.5px solid;border-left:1.5px solid;}
.sb-tr{top:12px;right:12px;border-top:1.5px solid;border-right:1.5px solid;}
.sb-bl{bottom:12px;left:12px;border-bottom:1.5px solid;border-left:1.5px solid;}
.sb-br{bottom:12px;right:12px;border-bottom:1.5px solid;border-right:1.5px solid;}
.sb-rec{position:absolute;top:16px;left:34px;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#cfcfcf;}
.sb-rec .dot{width:6px;height:6px;animation:recBlink 1.6s infinite;}
.sb-tc{position:absolute;top:15px;right:34px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.06em;}
.standby .standby-bars{top:auto;bottom:0;height:4px;opacity:.5;}
.tile.is-soon .tile-meta, .card.is-soon .card-info{z-index:2;}
.card.is-soon{cursor:default;}
@media (prefers-reduced-motion: reduce){.sb-rec .dot{animation:none;}}

/* My Story thumbnail */
.story-player picture{display:block;width:100%;height:100%;}

/* idle easter eggs */
.slate-caption{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cfcfcf;}
.slate{flex-direction:column;}
.tile.dusting{animation:dust 1.6s ease-in forwards;pointer-events:none;}
.tile.restoring{animation:undust 1.2s ease-out forwards;}
@keyframes dust{
  0%{opacity:1;filter:none;transform:none;}
  100%{opacity:0;filter:blur(6px) grayscale(1) contrast(.6);transform:translate(26px,-18px) scale(.96);
       -webkit-mask-image:radial-gradient(circle at 70% 30%, transparent 40%, #000 80%);mask-image:radial-gradient(circle at 70% 30%, transparent 40%, #000 80%);}
}
@keyframes undust{from{opacity:0;filter:blur(6px);transform:translate(26px,-18px) scale(.96);}to{opacity:1;filter:none;transform:none;}}
/* Services: arc-reactor glow on the featured card */
.package-card.featured{overflow:visible;}
.package-card.featured::after{content:'';position:absolute;right:22px;bottom:22px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle, #f2fbff 0 18%, #9fe6ff 30%, rgba(80,190,255,.35) 55%, transparent 72%);
  box-shadow:0 0 0 1.5px rgba(160,230,255,.5), 0 0 14px rgba(110,210,255,.35);opacity:.18;transition:opacity .5s ease, box-shadow .5s ease, transform .5s ease;}
.package-card.featured:hover::after{opacity:1;transform:scale(1.15);box-shadow:0 0 0 1.5px rgba(160,230,255,.9), 0 0 30px rgba(110,210,255,.75);}

/* ---------- reviews: festival laurels + a strip of film frames, the active one in the gate ---------- */
.reviews .testimonial{max-width:none;padding:0;}
.reviews-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:34px;color:#cfcfcf;}
.laurel{width:26px;height:52px;}
.laurel-r{transform:scaleX(-1);}
.reviews-title{text-align:center;line-height:1;}
.reviews-title span{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);}
.reviews-title h2{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;}
.reviews .t-slider-wrap{max-width:none;}
.filmstrip{position:relative;overflow:hidden;padding:26px 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, #0b0b0b 14px 24px, transparent 24px 38px) top/100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, #0b0b0b 14px 24px, transparent 24px 38px) bottom/100% 12px no-repeat,
    #1a1a1a;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);}
.filmstrip .t-slider{display:flex;gap:14px;align-items:stretch;transition:transform .8s var(--ease-out);will-change:transform;}
.filmstrip .t-slide, .filmstrip .t-slide.active{grid-area:auto;visibility:visible;flex:0 0 min(640px, 78vw);position:relative;margin:0;
  background:#050505;border-radius:4px;padding:44px 46px 34px;opacity:.28;transform:scale(.94);filter:saturate(0);
  transition:opacity .6s ease, transform .8s var(--ease-out), filter .6s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:center;}
.filmstrip .t-slide.active{opacity:1;transform:none;filter:none;cursor:default;box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.6);}
.filmstrip .t-slide blockquote{font-size:clamp(18px,1.9vw,26px);line-height:1.35;}
.frame-no{position:absolute;top:14px;left:18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#ffb347;opacity:.7;}
.reviews .t-arrow-prev{left:calc(50% - min(320px, 39vw) - 54px);}
.reviews .t-arrow-next{right:calc(50% - min(320px, 39vw) - 54px);}
@media (max-width:760px){
  .reviews .t-arrow-prev{left:4px;}
  .reviews .t-arrow-next{right:4px;}
  .filmstrip .t-slide, .filmstrip .t-slide.active{padding:34px 26px 26px;}
}
@media (prefers-reduced-motion: reduce){.filmstrip .t-slider, .filmstrip .t-slide{transition:none;}}

/* =====================================================================
   PASS 5 (16 Oct 2026)
   ===================================================================== */
/* About: a bright, clean flash frame (like a white flash in the edit) — one flash, same timing */
.cut-flash .cut-a{background:radial-gradient(ellipse at center, #ffffff 0%, #fffdf8 55%, #fff4ea 100%);}
@keyframes softFlash{0%{opacity:0;}22%{opacity:.96;}100%{opacity:.55;}}

/* ---------- Work: slim "Now Showing" header (no divider) ---------- */
.work-top{display:grid;grid-template-columns:1fr minmax(320px, 520px);gap:20px 6vw;align-items:end;padding:150px var(--gutter) 34px;}
.wt-eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d0d0d0;margin-bottom:12px;}
.wt-eyebrow .dot{width:7px;height:7px;animation:recPulse 2.4s ease-in-out infinite;}
.wt-count{color:var(--muted);letter-spacing:.14em;}
.work-top h1{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.035em;font-size:clamp(44px,7vw,96px);line-height:.92;}
.wt-intro{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:18px;}
.work-top .filters{gap:0;border-bottom:1px solid var(--line);}
.work-top .filter-btn{border:0;border-radius:0;padding:10px 16px 12px;background:none;position:relative;color:var(--muted);}
.work-top .filter-btn:first-child{padding-left:0;}
.work-top .filter-btn::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease-out);}
.work-top .filter-btn:first-child::after{left:0;}
.work-top .filter-btn.active{color:var(--fg);background:none;}
.work-top .filter-btn.active::after, .work-top .filter-btn:hover::after{transform:scaleX(1);}
.work-top .filter-intro{margin-top:12px;font-size:13px;}
.work-top .wall-hint{grid-column:1 / -1;margin-top:6px;}
@media (max-width:860px){.work-top{grid-template-columns:1fr;padding-top:120px;}}

/* ---------- Work: wall v3 — 3D warp + lens ---------- */
.wall.is-live{perspective:1700px;}
.wall.is-live .wall-track{transform-style:preserve-3d;}
.wall.is-live .tile{transform:translateZ(var(--lift, 0px)) scale(var(--lens, 1));transition:box-shadow .45s ease, opacity .4s ease, filter .4s ease;}
.wall.is-live .tile:hover, .wall.is-live .tile:focus-visible{transform:translateZ(calc(var(--lift, 0px) + 24px)) scale(calc(var(--lens, 1) * 1.03));}
/* Thanos snap v2: the tile dissolves left to right while the dust canvas drifts away */
.tile.dusting{animation:dissolve 1.5s ease-in forwards;pointer-events:none;}
.tile.restoring{animation:reform 1.4s ease-out forwards;}
.tile.dusting, .tile.restoring{-webkit-mask-image:linear-gradient(90deg, transparent 40%, #000 60%);mask-image:linear-gradient(90deg, transparent 40%, #000 60%);-webkit-mask-size:300% 100%;mask-size:300% 100%;}
@keyframes dissolve{from{-webkit-mask-position:100% 0;mask-position:100% 0;}to{-webkit-mask-position:0 0;mask-position:0 0;}}
@keyframes reform{from{-webkit-mask-position:0 0;mask-position:0 0;filter:blur(4px);}to{-webkit-mask-position:100% 0;mask-position:100% 0;filter:none;}}
.dust-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:620;pointer-events:none;}

/* ---------- section themes for pages without footage: black / paper white / brand red ---------- */
.sec-light{--bg:#f2f1ee;--fg:#0d0d0d;--muted:#5e5b56;--line:rgba(0,0,0,.14);background:var(--bg);color:var(--fg);}
.sec-light .section-label, .sec-light .section-label .sc{color:#c8102e;}   /* deeper red: small text needs 4.5:1 on paper */
.sec-light .section-label::before{background:#c8102e;}
.sec-light .btn.primary{background:#0d0d0d;color:#fff;border-color:#0d0d0d;}
.sec-light .btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#000;}
.sec-light .btn.ghost{border-color:rgba(0,0,0,.25);color:#0d0d0d;}
.sec-light .btn.ghost:hover{border-color:#0d0d0d;}
.sec-red{--muted:rgba(0,0,0,.72);--line:rgba(0,0,0,.25);color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255,140,120,.35), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(80,0,12,.85), transparent 60%),
    radial-gradient(60% 60% at 50% 50%, #ff2a50, #e0102f 70%, #9c0a22 100%);}
.sec-red::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 160px rgba(40,0,6,.75);}
.sec-red > *{position:relative;z-index:2;}
.sec-red .section-label, .sec-red .section-label .sc{color:#000;}
.sec-red .section-label::before{background:#000;}
.sec-red .btn.primary{background:#000;color:#fff;border-color:#000;}
.sec-red .btn.primary:hover{background:#fff;color:#000;border-color:#fff;}

/* ---------- Services ---------- */
.svc-hero, .contact-hero{padding:160px var(--gutter) 70px;position:relative;overflow:hidden;}
.svc-hero h1, .contact-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(56px,11vw,168px);line-height:.86;}
.svc-hero h1 em, .contact-hero h1 em, .svc-h2 em, .svc-cta h2 em, .book-title em{font-style:normal;color:var(--accent);}
.svc-lede{margin-top:24px;max-width:540px;color:var(--muted);font-size:16px;line-height:1.6;}
.kinetic{margin:70px calc(var(--gutter) * -1) 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;}
.kinetic-track{display:flex;align-items:center;gap:34px;width:max-content;animation:scroll 34s linear infinite;}
.kinetic-track span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(34px,5vw,72px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);white-space:nowrap;transition:color .3s ease;}
.kinetic-track span:hover{color:#fff;}
.kinetic-track i{width:12px;height:12px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.kinetic:hover .kinetic-track{animation-play-state:paused;}

.svc-offer{padding:110px var(--gutter);}
.offer-list{list-style:none;border-top:1px solid var(--line);margin-top:10px;}
.offer-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;padding:26px 18px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:color .35s ease;}
.offer-row::before{content:'';position:absolute;inset:0;background:#0d0d0d;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out);z-index:0;}
.offer-row > *{position:relative;z-index:1;}
.offer-row:hover{color:#fff;}
.offer-row:hover::before{transform:scaleY(1);}
.offer-num{font-family:var(--mono);font-size:13px;color:#c8102e;}
.offer-row:hover .offer-num{color:var(--accent);}
.offer-name{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(22px,3.4vw,46px);line-height:1.05;}
.offer-arrow{font-size:28px;color:var(--accent);opacity:0;transform:translateX(-14px);transition:opacity .3s ease, transform .4s var(--ease-out);}
.offer-row:hover .offer-arrow{opacity:1;transform:none;}
.offer-note{margin-top:26px;max-width:620px;font-size:14px;color:var(--muted);line-height:1.6;}
.offer-note a{color:var(--fg);text-decoration:underline;}

.svc-statement{padding:130px var(--gutter);}
.svc-statement .statement-text{max-width:1100px;}

.svc-formats{padding:120px var(--gutter);}
.svc-h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(32px,5vw,64px);line-height:1;margin-bottom:50px;}
.formats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.format-card{border:1px solid var(--line);border-radius:12px;padding:28px 26px 30px;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(135deg, #0a0a0a 0%, #121212 55%, #181818 100%);transition:border-color .3s ease, transform .4s var(--ease-out);}
.format-card:hover{border-color:rgba(255,23,65,.5);transform:translateY(-4px);}
.format-card.featured{border-color:rgba(255,23,65,.55);}
.format-card .package-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:22px 0 10px;}
.format-card h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px;}
.format-card p{font-size:14px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:24px;}
.format-card .btn{align-self:flex-start;}
.format-frame{position:relative;height:150px;display:grid;place-items:center;}
.format-frame::before{content:'';aspect-ratio:var(--ar);height:auto;width:min(100%, 260px);max-height:150px;border:1.5px solid rgba(255,255,255,.55);border-radius:3px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, rgba(255,23,65,.12), transparent 70%);}
.ff-vertical::before{width:auto;height:150px;}
.ff-ratio{position:absolute;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#fff;}
.ff-tc{position:absolute;bottom:-6px;right:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);}
@media (max-width:900px){.formats-grid{grid-template-columns:1fr;}}

.svc-cta{padding:110px var(--gutter);text-align:center;}
.svc-cta h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(36px,6vw,80px);line-height:.95;}
.svc-cta h2 em{color:#c8102e;}
.svc-cta p{margin:20px auto 0;max-width:520px;color:var(--muted);line-height:1.6;}
.svc-cta .hero-cta{justify-content:center;}

/* ---------- Contact ---------- */
.contact-hero .timecode{font-size:12px;color:#d0d0d0;margin-left:6px;}
.big-mail{display:inline-flex;gap:12px;margin-top:40px;font-family:var(--display);font-weight:500;font-size:clamp(22px,3.4vw,46px);letter-spacing:.01em;border-bottom:2px solid var(--line);padding-bottom:6px;transition:border-color .3s ease, color .3s ease;}
.big-mail:hover{border-color:var(--accent);color:var(--accent);}
.contact-brief{padding:100px var(--gutter);}
.brief-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:start;}
.contact-brief .contact-form{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:30px 34px 34px;box-shadow:0 20px 60px rgba(40,30,20,.08);}
.callsheet-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5e5b56;border-bottom:2px solid #0d0d0d;padding-bottom:12px;margin-bottom:26px;}
.callsheet-head b{color:#c8102e;font-weight:500;}
.contact-brief .contact-form input, .contact-brief .contact-form textarea, .contact-brief .contact-form select{border-bottom-color:rgba(0,0,0,.35);color:#0d0d0d;}
.contact-brief .contact-form ::placeholder{color:#76736e;}
.contact-brief .contact-form .req{color:#c8102e;}
.contact-brief .form-note a{color:#0d0d0d;}
.contact-brief .form-status.error{color:#c8102e;}
.contact-brief .other-contact a:hover{border-color:#0d0d0d;color:#0d0d0d;background:rgba(0,0,0,.03);}
.brief-side .quote-note{background:rgba(255,255,255,.55);border-radius:10px;}
.brief-side .quote-note a{color:#0d0d0d;}
@media (max-width:900px){.brief-grid{grid-template-columns:1fr;gap:50px;}.contact-brief .contact-form{padding:24px 20px 26px;}}

.contact-book{padding:110px var(--gutter);}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.book-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(38px,6vw,84px);line-height:.92;}
.book-title em{color:#000 !important;}
.book-sub{margin-top:18px;max-width:420px;color:rgba(255,255,255,.85);line-height:1.6;}
.contact-book .embed-gate{border:1.5px solid rgba(0,0,0,.35);background:rgba(0,0,0,.18);border-radius:12px;margin:0;}
.contact-book .embed-gate p{color:rgba(255,255,255,.9);}
.contact-book .embed-gate p a{color:#fff;}
@media (max-width:900px){.book-grid{grid-template-columns:1fr;}}
.contact-faq{border-top:0;}

/* ---------- footer mixtape (music easter egg) ---------- */
.footer-mid{display:flex;align-items:center;gap:16px;}
.mixtape{position:relative;display:inline-flex;outline-offset:4px;cursor:default;}
.tape{position:relative;display:block;width:44px;height:28px;border:1.5px solid #6f6f6f;border-radius:3px;background:#111;}
.tape-label{position:absolute;left:3px;right:3px;top:3px;height:6px;background:var(--accent);border-radius:1px;font-size:0;}
.tape-window{position:absolute;left:11px;right:11px;top:12px;height:9px;border:1px solid #6f6f6f;border-radius:5px;}
.reel{position:absolute;top:13px;width:7px;height:7px;border-radius:50%;border:1.5px dotted #cfcfcf;z-index:1;}
.reel:nth-child(2){left:12px;}
.reel:nth-child(3){right:12px;}
.mixtape:hover .reel, .mixtape:focus-visible .reel{animation:reelSpin 1.2s linear infinite;}
@keyframes reelSpin{to{transform:rotate(360deg);}}
.tape-list{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%, 6px);white-space:nowrap;background:#0d0d0d;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:8px 12px;font-size:12px;color:#d6d6d6;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .3s var(--ease-out);z-index:5;}
.mixtape:hover .tape-list, .mixtape:focus-visible .tape-list{opacity:1;transform:translate(-50%, 0);}
@media (max-width:560px){.footer-mid{flex-wrap:wrap;}.tape-list{left:0;transform:translate(0,6px);white-space:normal;width:240px;}.mixtape:hover .tape-list,.mixtape:focus-visible .tape-list{transform:none;}}
@media (prefers-reduced-motion: reduce){.mixtape .reel{animation:none !important;}.kinetic-track{animation:none;}}
header.solid{background:rgba(0,0,0,.86);}

/* =====================================================================
   PASS 6 (16 Oct 2026)
   ===================================================================== */
/* cursor reticle goes dark over light surfaces so it never disappears */
.cursor-ring.on-light .cr-corner{border-color:rgba(13,13,13,.75);}
.cursor-ring.on-light.hover .cr-corner{border-color:var(--accent);}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}
.kinetic-track span{-webkit-text-stroke:0;color:#fff;filter:url(#kjgOutline);transition:filter .3s ease;}
.kinetic-track span:hover{filter:none;}

/* ---------- footer vinyl (music easter egg; replaces the cassette) ---------- */
.vinyl-egg{position:relative;display:inline-flex;outline-offset:4px;cursor:default;}
.vinyl{position:relative;display:block;width:30px;height:30px;border-radius:50%;
  background:repeating-radial-gradient(circle, #111 0 1.2px, #1d1d1d 1.2px 2.4px);box-shadow:0 0 0 1px #555;}
.vinyl::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%);}
.vinyl-label{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--accent);}
.vinyl-label::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:#000;}
.vinyl-egg:hover .vinyl, .vinyl-egg:focus-visible .vinyl{animation:reelSpin 1.8s linear infinite;}
.vinyl-egg:hover .tape-list, .vinyl-egg:focus-visible .tape-list{opacity:1;transform:translate(-50%, 0);}
.tape-list b{color:#fff;font-weight:500;}
@media (max-width:560px){.vinyl-egg:hover .tape-list,.vinyl-egg:focus-visible .tape-list{transform:none;}}
@media (prefers-reduced-motion: reduce){.vinyl-egg .vinyl{animation:none !important;}}

/* ---------- About v2: founder (paper) with pinned stickers, Off Camera pinboard (red) ---------- */
.about-founder{position:relative;padding:120px var(--gutter) 130px;overflow:hidden;}
.founder-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px 6vw;align-items:start;max-width:1200px;}
.founder-quote{font-family:var(--display);font-weight:500;font-size:clamp(24px,3vw,40px);line-height:1.3;border-left:3px solid var(--accent);padding-left:26px;}
.founder-quote footer{margin-top:18px;font-family:var(--body);font-size:13px;font-weight:400;color:var(--muted);letter-spacing:.04em;}
.founder-bio{font-size:clamp(16px,1.5vw,18px);line-height:1.75;color:#3f3d39;padding-top:8px;}
@media (max-width:900px){.founder-grid{grid-template-columns:1fr;}}

/* stickers: die-cut white edge, slight tilt, they straighten up when you hover them */
.stickers{position:absolute;inset:0;pointer-events:none;}
.sticker{position:absolute;display:inline-flex;align-items:center;justify-content:center;transform:rotate(var(--r, 0deg));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));transition:transform .45s var(--ease-out);pointer-events:auto;font-family:var(--display);}
.sticker:hover{transform:rotate(0deg) scale(1.06);}
.sticker svg{width:100%;height:100%;display:block;}
.st-est{top:60px;right:7vw;width:118px;height:118px;border-radius:50%;background:var(--accent);color:#fff;flex-direction:column;border:5px solid #fff;font-weight:700;font-size:19px;letter-spacing:.02em;line-height:1.05;}
.st-est b{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;}
.st-est i{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-top:3px;opacity:.9;}
.st-route{bottom:44px;left:var(--gutter);background:#0d0d0d;color:#fff;padding:10px 16px;border:4px solid #fff;border-radius:6px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;gap:10px;}
.st-route em{font-style:normal;color:var(--accent);}
.st-postcode{bottom:70px;right:12vw;background:#fff;color:#0d0d0d;padding:6px 18px;border:3px solid #0d0d0d;outline:4px solid #fff;border-radius:4px;font-weight:700;font-size:30px;letter-spacing:.08em;}
.st-take{top:44px;left:52%;background:#111;color:#fff;border:4px solid #fff;border-radius:4px;padding:18px 16px 8px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;flex-direction:column;}
.st-take-top{position:absolute;top:0;left:0;right:0;height:9px;background:repeating-linear-gradient(-55deg,#fff 0 7px,#111 7px 14px);}
.st-web{top:0;right:0;width:120px;height:120px;filter:none;opacity:.35;transform:none !important;}
@media (max-width:900px){
  .stickers{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:34px;align-items:center;}
  .stickers .sticker{position:relative;top:auto;left:auto;right:auto;bottom:auto;}
  .st-est{width:92px;height:92px;font-size:15px;}
  .st-web{display:none;}
}

/* My Story: a web caught in the corner */
.my-story{position:relative;}
.st-corner-web{top:0;left:0;width:150px;height:150px;opacity:.22;filter:invert(1);transform:none !important;pointer-events:none;}

/* Off Camera: polaroid-style pinned cards */
.off-camera{padding:120px var(--gutter) 130px;}
.oc-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(34px,5.4vw,76px);line-height:.95;max-width:900px;}
.oc-title em{font-style:normal;color:#000;}
.pinboard{list-style:none;display:grid;grid-template-columns:repeat(4, 1fr);gap:34px 28px;margin-top:60px;}
.pin-card{position:relative;background:#f7f5f1;color:#0d0d0d;border-radius:4px;padding:30px 18px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;
  transform:rotate(var(--r));box-shadow:0 14px 30px rgba(40,0,6,.35);transition:transform .45s var(--ease-out), box-shadow .45s ease;}
.pin-card:hover{transform:rotate(0deg) translateY(-6px) scale(1.03);box-shadow:0 24px 50px rgba(40,0,6,.45);}
.pin-tape{position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.12);transform:rotate(-3deg);}
.pin-icon{width:76px;height:76px;margin-bottom:16px;}
.pin-icon svg{width:100%;height:100%;}
.pin-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#c8102e;}
.pin-title{margin-top:6px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em;text-transform:uppercase;line-height:1.2;}
@media (max-width:1024px){.pinboard{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:420px){.pinboard{gap:26px 16px;}.pin-card{padding:26px 12px 16px;}.pin-icon{width:60px;height:60px;}.pin-title{font-size:14px;}}
/* the cards are wiped in by the frames reveal — keep their tilt once they land */
html.js .pinboard[data-reveal="frames"].in-view > .pin-card{clip-path:none;}

/* Process on paper */
.about-process{position:relative;border-top:0;padding:110px var(--gutter);}
.about-process .process-step p{color:var(--muted);}
.about-process .process-step .num{color:#c8102e;}
.st-reel{top:70px;right:8vw;width:96px;height:96px;}
@media (max-width:900px){.st-reel{display:none;}}
@media (prefers-reduced-motion: reduce){.sticker, .pin-card{transition:none;}}
.founder-quote footer{padding:0;border-top:0;}

/* =====================================================================
   PASS 7 (16 Oct 2026)
   ===================================================================== */
/* Work: shorter pinned scroll — move around it, a couple more scrolls and you're through */
.wall-stage.is-live{height:150vh;}
/* In Focus: episode timecode readable */
.ep-dur{color:#fff;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.18);}
/* BTS strip: two identical sets, so the loop is seamless */
.bts-track{will-change:transform;}
.bts-track img{content-visibility:visible;}

/* ---------- Home reviews v3: "In Their Words" ---------- */
.reviews-v3{padding:110px var(--gutter) 90px;border-top:1px solid var(--line);}
.rv-wrap{display:grid;grid-template-columns:minmax(240px, 340px) 1fr;gap:40px 6vw;align-items:stretch;position:relative;}
.rv-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(38px,5vw,72px);line-height:.92;}
.rv-title em{font-style:normal;color:var(--accent);}
.rv-count{margin-top:28px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--muted);}
.rv-count span{color:var(--fg);}
.rv-controls{display:flex;align-items:center;gap:10px;margin-top:18px;}
.reviews-v3 .t-arrow{position:static;transform:none;width:44px;height:44px;}
.reviews-v3 .t-pause{margin-left:4px;width:32px;height:32px;}
.rv-stage{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.1);padding:64px 60px 34px;overflow:hidden;
  background:radial-gradient(70% 120% at 100% 0%, rgba(255,23,65,.10), transparent 60%), linear-gradient(135deg, #000 0%, #0d0d0d 40%, #171717 100%);}
.rv-mark{position:absolute;top:-34px;left:34px;font-family:var(--display);font-weight:700;font-size:220px;line-height:1;color:var(--accent);opacity:.9;pointer-events:none;}
.reviews-v3 .t-slider{display:grid;}
.reviews-v3 .t-slide{margin:0;}
.reviews-v3 blockquote{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.3;letter-spacing:.005em;max-width:880px;}
.reviews-v3 .who{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:13px;}
.reviews-v3 .who::before{content:'';width:28px;height:1px;background:var(--accent);}
.who-name{font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);}
.who-role{color:var(--muted);}
.rv-scrub{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:44px;}
.rv-seg{width:auto !important;height:24px !important;display:flex !important;align-items:center;padding:0;border:0;background:none;cursor:pointer;}
.rv-seg::before{display:none !important;}
.rv-seg span{position:relative;display:block;width:100%;height:2px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px;}
.rv-seg span::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;}
.rv-seg.active span::after{transform:scaleX(1);}
.rv-seg.filling span::after{animation:segFill 6s linear forwards;}
.rv-wrap.is-paused .rv-seg.filling span::after{animation:none;transform:scaleX(1);}
@keyframes segFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.rv-trust{margin-top:34px;text-align:left;border-top:0;padding-top:0;}
@media (max-width:900px){
  .rv-wrap{grid-template-columns:1fr;}
  .rv-stage{padding:56px 24px 26px;}
  .rv-mark{font-size:160px;top:-26px;left:18px;}
}
@media (prefers-reduced-motion: reduce){.rv-seg.filling span::after{animation:none;transform:scaleX(1);}}

/* ---------- Home "Working Together": premium gradient format cards ---------- */
.wt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:none;border:0;}
.wt-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:230px;padding:26px 26px 24px;
  border-radius:14px;border:1px solid rgba(255,255,255,.1);color:var(--fg);font:inherit;cursor:pointer;overflow:hidden;
  background:radial-gradient(80% 120% at 100% 0%, rgba(255,23,65,.08), transparent 60%), linear-gradient(135deg, #000 0%, #0e0e0e 50%, #181818 100%);
  transition:transform .45s var(--ease-out), border-color .3s ease, box-shadow .45s ease;}
.wt-card:hover, .wt-card:focus-visible{transform:translateY(-5px);border-color:rgba(255,23,65,.55);box-shadow:0 22px 60px rgba(0,0,0,.55);}
.wt-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;margin-bottom:auto;}
.wt-card .num{font-family:var(--mono);font-size:12px;color:var(--muted);}
.wt-frame{display:grid;place-items:center;height:62px;}
.wt-frame::before{content:'';grid-area:1/1;aspect-ratio:var(--ar);height:auto;width:96px;max-height:62px;border:1.5px solid rgba(255,255,255,.45);border-radius:3px;transition:border-color .3s ease;}
.wt-frame[style*="9/16"]::before{width:auto;height:62px;}
.wt-frame span{grid-area:1/1;font-family:var(--mono);font-size:10px;color:#cfcfcf;}
.wt-card:hover .wt-frame::before{border-color:var(--accent);}
.wt-card .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:34px 0 8px;}
.wt-name{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,26px);text-transform:uppercase;letter-spacing:.035em;line-height:1.1;}
.wt-more{margin-top:18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:8px;transition:color .3s ease, gap .3s ease;}
.wt-more span{color:var(--accent);font-size:15px;line-height:1;}
.wt-card:hover .wt-more{color:var(--fg);gap:12px;}
@media (max-width:900px){.wt-grid{grid-template-columns:1fr;}.wt-card{min-height:190px;}}

/* format details pop-up */
.pk-media{background:radial-gradient(ellipse at 50% 45%, #151515 0%, #050505 75%);}
.pk-frame{position:relative;display:grid;place-items:center;aspect-ratio:var(--ar);width:min(70%, 420px);max-height:72%;border:1.5px solid rgba(255,255,255,.5);border-radius:4px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, rgba(255,23,65,.14), transparent 70%);}
.pk-frame[style*="9/16"]{width:auto;height:78%;}
.pk-ratio{font-family:var(--mono);font-size:clamp(18px,2.2vw,28px);letter-spacing:.06em;color:#fff;}
.pk-media .sb-rec{top:18px;left:22px;}
.pk-best{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:14px;color:#cfcfcf;line-height:1.55;}
.pk-best span:first-child{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.pk-example{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:10px;transition:border-color .3s ease, background .3s ease;}
.pk-example:hover{border-color:var(--accent);background:rgba(255,23,65,.06);}
.pk-ex-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.pk-ex-title{flex:1;font-size:14px;}
.services-strip-grid.wt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:none;border:0;}
@media (max-width:900px){.services-strip-grid.wt-grid{grid-template-columns:1fr;}}

/* ---------- About: interactive stickers (caption on hover / focus / tap) ---------- */
:where(button.sticker){border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;}
.sticker .st-body{display:contents;}
.st-tip{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%, -4px) rotate(calc(var(--r, 0deg) * -1));width:max-content;max-width:220px;
  background:#0d0d0d;color:#fff;font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.45;text-align:center;
  padding:8px 12px;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .3s var(--ease-out);z-index:6;}
.sticker:hover .st-tip, .sticker:focus-visible .st-tip, .sticker.show .st-tip{opacity:1;transform:translate(-50%, 0) rotate(calc(var(--r, 0deg) * -1));}
.sticker:hover, .sticker:focus-visible, .sticker.show{z-index:5;}
/* new stickers */
.st-ticket{top:auto;bottom:150px;left:42%;flex-direction:column;background:#fff4dc;color:#0d0d0d;border:4px solid #fff;border-radius:6px;padding:8px 18px;
  -webkit-mask:radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;}
.tk-top{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#c8102e;}
.tk-mid{font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase;border-top:1px dashed rgba(0,0,0,.35);border-bottom:1px dashed rgba(0,0,0,.35);margin:3px 0;padding:1px 0;}
.tk-bot{font-family:var(--mono);font-size:9px;letter-spacing:.06em;}
.st-hole{top:150px;right:22vw;width:84px;height:84px;background:#0d0d0d;border-radius:50%;border:4px solid #fff;padding:8px;}
.st-mixtape{position:absolute;top:56px;right:7vw;flex-direction:column;width:132px;height:84px;background:#111;border:4px solid #fff;border-radius:8px;padding:8px;}
.mt-label{display:block;width:100%;background:var(--accent);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:3px 0;border-radius:2px;}
.mt-reels{display:flex;justify-content:space-around;width:100%;margin-top:9px;}
.mt-reels i{width:22px;height:22px;border-radius:50%;border:3px dotted #cfcfcf;}
.st-mixtape:hover .mt-reels i, .st-mixtape.show .mt-reels i{animation:reelSpin 1.2s linear infinite;}
.st-gems{position:absolute;bottom:60px;right:4vw;width:92px;height:92px;background:#fff;border-radius:50%;padding:10px;}
.st-wanted{top:auto;bottom:60px;right:20vw;flex-direction:column;background:#0d0d0d;color:#fff;border:4px solid #fff;border-radius:6px;padding:8px 14px;}
.wl-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfcf;}
.wl-stars{font-size:18px;letter-spacing:3px;color:#ffd166;margin-top:2px;}
.st-popcorn{top:60px;right:20vw;width:76px;height:76px;}
@media (max-width:900px){
  .st-mixtape, .st-gems, .st-wanted, .st-popcorn{position:relative;top:auto;right:auto;bottom:auto;left:auto;margin:0 10px 20px 0;}
  .about-process .sticker{display:none;}
  .st-hole, .st-ticket{position:relative;top:auto;right:auto;bottom:auto;left:auto;}
}

/* ---------- About: Off Camera cards flip ---------- */
.pin-card{padding:0;background:none;box-shadow:none;perspective:1000px;}
.pin-card:hover{box-shadow:none;}
.pin-flip{position:relative;display:grid;width:100%;min-height:230px;border:0;padding:0;background:none;font:inherit;color:#0d0d0d;cursor:pointer;
  transform-style:preserve-3d;transition:transform .7s var(--ease-out);}
.pin-card.is-flipped .pin-flip{transform:rotateY(180deg);}
.pin-face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 18px 20px;border-radius:4px;
  background:#f7f5f1;box-shadow:0 14px 30px rgba(40,0,6,.35);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.pin-back{transform:rotateY(180deg);background:#0d0d0d;color:#fff;justify-content:center;gap:12px;}
.pin-back .pin-label{color:var(--accent);}
.pin-back-text{font-size:14px;line-height:1.55;color:#e6e6e6;}
.pin-hint{margin-top:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8a8580;opacity:0;transition:opacity .3s ease;}
.pin-card:hover .pin-hint, .pin-flip:focus-visible .pin-hint{opacity:1;}
.pin-face .pin-tape{top:-11px;}
@media (prefers-reduced-motion: reduce){
  .pin-flip{transition:none;}
  .pin-card.is-flipped .pin-flip{transform:none;}
  .pin-card.is-flipped .pin-front{visibility:hidden;}
  .pin-back{transform:none;visibility:hidden;}
  .pin-card.is-flipped .pin-back{visibility:visible;}
}

/* ---------- Services: "What We Offer" accordion ---------- */
.offer-item{border-bottom:1px solid var(--line);}
.offer-row{width:100%;border:0;border-bottom:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;}
.offer-list .offer-row{border-bottom:0;}
.offer-arrow{font-family:var(--body);font-size:30px;font-weight:300;opacity:1;transform:none;color:#c8102e;transition:transform .4s var(--ease-out), color .3s ease;}
.offer-row:hover .offer-arrow{color:var(--accent);transform:none;}
.offer-item.is-open .offer-arrow{transform:rotate(45deg);}
.offer-item.is-open .offer-row{color:#fff;}
.offer-item.is-open .offer-row::before{transform:scaleY(1);}
.offer-panel{background:#0d0d0d;color:#fff;}
.offer-panel-inner{padding:6px 18px 30px 88px;display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:center;animation:panelIn .45s var(--ease-out);}
@keyframes panelIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.offer-desc{font-size:16px;line-height:1.6;color:#d6d6d6;max-width:560px;}
.offer-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.offer-example{margin-top:0;border-color:rgba(255,255,255,.18);color:#fff;}
.offer-soon{font-size:13px;color:#9a9a9a;}
.offer-panel .btn.primary{background:#fff;color:#000;border-color:#fff;}
.offer-panel .btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#000;}
@media (max-width:760px){.offer-panel-inner{grid-template-columns:1fr;padding:6px 18px 26px;}}
@media (prefers-reduced-motion: reduce){.offer-panel-inner{animation:none;}}
.stickers .st-web{position:absolute;top:0;right:0;width:120px;height:120px;opacity:.3;pointer-events:none;}
.stickers .st-web svg{width:100%;height:100%;}
@media (max-width:900px){.stickers .st-web{display:none;}}
/* founder stickers live in the margins, clear of the text */
@media (min-width:901px){
  .about-founder{padding-bottom:170px;}
  .st-ticket{bottom:34px;left:38%;}
  .st-hole{top:34px;right:auto;left:33%;width:70px;height:70px;}
  .st-take{top:40px;left:60%;}
  .st-postcode{bottom:44px;right:26vw;}
}

/* =====================================================================
   PASS 8 (16 Oct 2026)
   ===================================================================== */
/* About: sticker captions never get hidden under the next section */
.about-founder, .my-story, .about-process{overflow:visible;z-index:2;}
.about-founder{z-index:3;}
/* stickers sitting low in a section open their caption upwards */
.st-route .st-tip, .st-postcode .st-tip, .st-ticket .st-tip, .st-gems .st-tip, .st-mission .st-tip{top:auto;bottom:calc(100% + 12px);}
/* GTA nod: Mission Passed */
.st-mission{bottom:60px;right:20vw;flex-direction:column;background:#0d0d0d;border:4px solid #fff;border-radius:6px;padding:9px 16px;}
.ms-title{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#ffd166;text-shadow:2px 2px 0 #000;}
.ms-sub{font-size:11px;color:#fff;letter-spacing:.08em;margin-top:2px;}
@media (max-width:900px){.st-mission{position:relative;top:auto;right:auto;bottom:auto;left:auto;margin:0 10px 20px 0;}.about-process .sticker{display:none;}}
#brief{scroll-margin-top:90px;}
/* In Focus: Kian's own 16:9 stills (no letterbox bars to crop). Christabel sits right of centre in the hero,
   so phones keep her in frame rather than the empty wall */
.series-bg{object-position:72% center;}
/* nominate row: the block plus a "now casting" viewfinder card, no dead space */
.nominate{display:grid;grid-template-columns:minmax(0, 640px) 1fr;gap:28px;align-items:stretch;margin-top:56px;}
.nominate .apply-block{margin-top:0;max-width:none;}
.casting-card{position:relative;min-height:240px;border-radius:10px;border:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 28px 30px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 70% 30%, rgba(255,23,65,.14), transparent 60%), #080808;}
.casting-card .sb-corner{position:absolute;width:18px;height:18px;border-color:rgba(255,23,65,.75);}
.casting-card .sb-rec{position:absolute;top:18px;left:38px;}
.casting-card .sb-tc{position:absolute;top:17px;right:38px;}
.cc-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(30px,3.4vw,46px);line-height:.95;}
.cc-title em{font-style:normal;color:var(--accent);}
.cc-meta{margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.casting-card .standby-bars{position:absolute;left:0;right:0;bottom:0;top:auto;height:4px;opacity:.5;display:block;
  background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.56%,#00c0c0 0 42.84%,#00c000 0 57.12%,#c000c0 0 71.4%,#c00000 0 85.68%,#0000c0 0);}
@media (max-width:900px){.nominate{grid-template-columns:1fr;}}
/* In Focus transition: a soft, feathered iris that eases closed (no hard ring) */
.cut-iris .cut-a{box-shadow:0 0 0 150vmax #000;background:radial-gradient(circle, transparent 0 56%, rgba(0,0,0,.6) 64%, #000 71%);}
.cut-iris.on .cut-a{animation:iris .62s cubic-bezier(.65,0,.35,1) forwards;}
.cut-iris.on .cut-black{animation:cutBlack .12s linear .52s forwards;}

/* =====================================================================
   PASS 9 (16 Oct 2026): sticker + pin system (laptop lid / backpack pins)
   ===================================================================== */
/* one consistent finish: vinyl stickers get a white die-cut edge, pins get a metal rim + gloss */
.sticker{filter:drop-shadow(0 5px 8px rgba(0,0,0,.22));}
.sticker.pin{width:74px;height:74px;border-radius:50%;padding:6px;
  background:radial-gradient(circle at 30% 25%, #ffffff 0%, #d8d8d8 35%, #8d8d8d 100%);}
.sticker.pin .st-body{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;background:#111;}
.sticker.pin .st-body svg{width:100%;height:100%;display:block;}
.sticker.pin .st-body::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 42%);}
.sticker.pin:hover{transform:rotate(0deg) scale(1.08);}
/* a little "press" when tapped */
.sticker:active{transform:rotate(var(--r, 0deg)) scale(.96);}

/* founder */
.st-70mm{position:absolute;top:30px;left:33%;}
.st-70mm .st-body{background:#f2f1ee !important;}
/* My Story */
.st-88{position:absolute;bottom:50px;right:4vw;}
.st-claws{position:absolute;bottom:150px;right:9vw;}
.st-claws .st-body{background:#1c2a44 !important;}
.st-88 .st-body{background:#151515 !important;}
/* Off Camera: a cluster of pins pinned beside the title */
.off-camera{position:relative;}
.oc-pins{position:absolute;top:96px;right:var(--gutter);display:grid;grid-template-columns:repeat(3, 74px);gap:14px 16px;z-index:3;}
.oc-pins .sticker{position:relative;top:auto;left:auto;right:auto;bottom:auto;}
.oc-pins .sticker:nth-child(2){margin-top:22px;}
.oc-pins .sticker:nth-child(4){margin-left:44px;}
.st-hammer .st-body, .st-four .st-body, .st-horns .st-body, .st-star .st-body, .st-arc .st-body{background:#f2f1ee !important;}
/* Process */
.st-reel{top:60px;right:8vw;}
.st-bot{position:absolute;top:150px;right:16vw;}
.st-bot .st-body{background:#e9e9e9 !important;}
.st-qmile{position:absolute;top:58px;right:20vw;width:104px;height:56px;background:#fff;border-radius:8px;padding:4px;}
.st-mystic{position:absolute;top:170px;right:5vw;}
.st-mystic .st-body{background:#14102a !important;}
@media (max-width:1100px){.oc-pins{position:relative;top:auto;right:auto;grid-template-columns:repeat(5, 64px);margin:0 0 30px;}.oc-pins .sticker{width:64px;height:64px;}.oc-pins .sticker:nth-child(n){margin:0;}}
@media (max-width:900px){
  .st-70mm, .st-88, .st-claws{position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:0 10px 20px 0;}
  .about-process .sticker{display:none;}
}
@media (max-width:560px){.oc-pins{grid-template-columns:repeat(5, 52px);gap:10px;}.oc-pins .sticker{width:52px;height:52px;padding:4px;}}
/* captions for stickers on the right edge open leftwards so they never run off screen */
.st-88 .st-tip, .st-mystic .st-tip, .oc-pins .sticker:nth-child(3) .st-tip{left:auto;right:0;transform:translate(0, -4px) rotate(calc(var(--r, 0deg) * -1));}
.st-88:hover .st-tip, .st-mystic:hover .st-tip, .oc-pins .sticker:nth-child(3):hover .st-tip,
.st-88:focus-visible .st-tip, .st-mystic:focus-visible .st-tip, .oc-pins .sticker:nth-child(3):focus-visible .st-tip,
.st-88.show .st-tip, .st-mystic.show .st-tip, .oc-pins .sticker:nth-child(3).show .st-tip{transform:translate(0, 0) rotate(calc(var(--r, 0deg) * -1));}
.st-88 .st-tip{top:auto;bottom:calc(100% + 12px);}

/* Services: the arc reactor is switched off until you hover the card, then it powers on */
.package-card.featured::after{opacity:0;transform:scale(.6);box-shadow:none;}
.package-card.featured:hover::after, .package-card.featured:focus-within::after{opacity:1;transform:scale(1.15);
  box-shadow:0 0 0 1.5px rgba(160,230,255,.9), 0 0 30px rgba(110,210,255,.75);animation:arcOn .6s steps(1) 1;}
@keyframes arcOn{0%{opacity:.2;}20%{opacity:1;}35%{opacity:.35;}55%{opacity:1;}70%{opacity:.6;}100%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.package-card.featured:hover::after{animation:none;}}
.st-qmile{width:auto;height:auto;flex-direction:row;gap:10px;background:#111;border:4px solid #fff;border-radius:8px;padding:8px 14px 8px 8px;}
.qm-flag{width:30px;height:30px;border-radius:3px;background:conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0/10px 10px;}
.qm-text{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#fff;font-style:italic;}

/* =====================================================================
   PASS 10 (16 Oct 2026): "The Props Department" — film-world ephemera
   Real objects, printed details, one material each. No character art.
   ===================================================================== */
:root{--ticket:#ece4d2;--paper:#f2f1ee;--brass1:#e9d9a6;--brass2:#a8894a;}
.props{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:26px 30px;}
.props-top{margin-bottom:64px;}
.props-bottom{margin-top:70px;}
.prop{position:relative;display:inline-flex;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;
  transform:translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .5s var(--ease-out), filter .4s ease;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.18)) drop-shadow(0 2px 2px rgba(0,0,0,.12));}
.prop:hover, .prop:focus-visible, .prop.show{transform:translateY(calc(var(--y,0) - 6px)) rotate(0deg);z-index:6;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.24)) drop-shadow(0 2px 2px rgba(0,0,0,.12));}
.prop .pb{display:flex;}
/* caption */
.pt{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,-4px) rotate(calc(var(--r,0deg) * -1));width:max-content;max-width:230px;
  background:#000;color:#fff;font-family:var(--body);font-size:12px;line-height:1.45;text-align:center;letter-spacing:.01em;text-transform:none;font-weight:400;
  padding:8px 12px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .3s var(--ease-out);z-index:8;}
.props-bottom .pt{top:auto;bottom:calc(100% + 14px);}
.prop:hover .pt, .prop:focus-visible .pt, .prop.show .pt{opacity:1;transform:translate(-50%,0) rotate(calc(var(--r,0deg) * -1));}
.props .prop:first-child .pt{left:0;transform:translate(0,-4px) rotate(calc(var(--r,0deg) * -1));}
.props .prop:last-child .pt{left:auto;right:0;transform:translate(0,-4px) rotate(calc(var(--r,0deg) * -1));}
.props .prop:first-child:hover .pt, .props .prop:last-child:hover .pt,
.props .prop:first-child.show .pt, .props .prop:last-child.show .pt,
.props .prop:first-child:focus-visible .pt, .props .prop:last-child:focus-visible .pt{transform:translate(0,0) rotate(calc(var(--r,0deg) * -1));}

/* Dymo label: embossed plastic strip */
.p-dymo .pb{padding:9px 14px 8px;border-radius:2px;background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18)), var(--dy,#c8102e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.3);}
.dy-text{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.35);}
.dy-red{--dy:#c8102e;} .dy-green{--dy:#2f6b2a;} .dy-black{--dy:#151515;} .dy-steel{--dy:#5f6973;}

/* film can */
.p-can .pb{width:112px;height:112px;border-radius:50%;align-items:center;justify-content:center;
  background:repeating-conic-gradient(from 0deg, #c9ccd0 0 4deg, #aeb2b7 4deg 8deg);box-shadow:inset 0 0 0 5px #8e9399, inset 0 0 0 9px #d7dadd;}
.can-label{display:flex;flex-direction:column;align-items:center;background:var(--paper);padding:6px 10px;border:1px solid rgba(0,0,0,.2);transform:rotate(-8deg);}
.can-label b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;color:#000;}
.can-label i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#c8102e;text-transform:uppercase;}

/* laminated press pass */
.p-pass .pb{flex-direction:column;align-items:flex-start;width:108px;padding:18px 12px 10px;background:#fff;border-radius:6px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background-image:linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%);}
.pass-slot{position:absolute;top:6px;left:50%;width:26px;height:5px;margin-left:-13px;border-radius:3px;background:#d8d8d8;}
.pass-head{width:calc(100% + 24px);margin:4px -12px 8px;padding:4px 12px;background:#c8102e;color:#fff;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.3em;text-transform:uppercase;}
.pass-role{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#6b6b6b;}
.pass-name{font-family:var(--display);font-weight:600;font-size:15px;color:#000;margin-top:2px;}
.pass-code{display:block;width:100%;height:16px;margin-top:8px;background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px,#000 3px 5px,transparent 5px 6px,#000 6px 7px,transparent 7px 10px);}

/* cinema ticket with a tear-off stub */
.p-ticket .pb{background:var(--ticket);color:#000;}
.tk-main{display:flex;flex-direction:column;padding:10px 14px;border-right:1.5px dashed rgba(0,0,0,.35);}
.tk-main i{font-style:normal;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:#c8102e;}
.tk-main b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.1em;text-transform:uppercase;line-height:1.1;}
.tk-main em{font-style:normal;font-family:var(--mono);font-size:9px;color:#5a554b;}
.tk-stub{display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10px;line-height:1.3;color:#c8102e;text-align:center;}
.p-ticket .pb{-webkit-mask:radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;}

/* luggage tag */
.p-tag .pb{flex-direction:column;align-items:flex-start;padding:12px 16px 12px 34px;background:var(--ticket);color:#000;position:relative;
  clip-path:polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);}
.tag-eye{position:absolute;left:11px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#bfa46a;box-shadow:inset 0 0 0 3px #e7d9b3;}
.tag-from{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;}
.tag-to{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#c8102e;text-transform:uppercase;}

/* postcode sign */
.p-sign .pb{flex-direction:column;align-items:center;padding:8px 20px 6px;background:#fff;border:3px solid #000;outline:3px solid #fff;}
.p-sign b{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.06em;color:#000;line-height:1;}
.p-sign i{font-style:normal;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#c8102e;margin-top:3px;}

/* mini slate */
.p-slate .pb{flex-direction:column;width:96px;background:#111;}
.sl-top{height:12px;background:repeating-linear-gradient(-55deg,#f2f1ee 0 8px,#111 8px 16px);}
.sl-body{display:flex;flex-direction:column;padding:6px 10px 8px;border:2px solid #f2f1ee;border-top:0;}
.sl-body i{font-style:normal;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9a;}
.sl-body b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#f2f1ee;}

/* gaffer tape with marker */
.p-gaffer .pb{padding:9px 20px;background:#1d1d1d;background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  clip-path:polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 0, 97% 30%, 100% 55%, 96% 100%, 0 100%, 3% 60%);}
.p-gaffer span{font-family:var(--display);font-weight:500;font-style:italic;font-size:20px;letter-spacing:.14em;color:#f2f1ee;}

/* cassette J-card (score side) */
.p-jcard .pb{flex-direction:column;width:210px;background:#f3ead6;color:#000;position:relative;padding:0 0 10px;}
.jc-stripes{height:16px;background:linear-gradient(180deg,#e2572b 0 33%,#f0a032 0 66%,#f6cf5c 0);}
.jc-title{padding:8px 12px 4px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
.jc-title em{font-style:normal;color:#e2572b;}
.jc-list{padding:0 12px;font-family:var(--mono);font-size:9px;line-height:1.6;color:#3f3a31;text-align:left;}

/* number plate */
.p-plate .pb{flex-direction:column;align-items:center;padding:5px 18px 6px;background:#f7f7f2;border-radius:5px;box-shadow:inset 0 0 0 2px #1d3a7a, inset 0 0 0 4px #f7f7f2, inset 0 0 0 5px rgba(0,0,0,.15);}
.p-plate i{font-style:normal;font-size:8px;letter-spacing:.3em;color:#c8102e;font-weight:600;}
.p-plate b{font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:.08em;color:#1d3a7a;line-height:1.1;}

/* stamped dog tag */
.p-dogtag .pb{flex-direction:column;align-items:flex-start;width:118px;padding:10px 14px 10px 30px;border-radius:14px;position:relative;
  background:linear-gradient(135deg,#e9ebee 0%,#b9bec4 45%,#e2e5e8 60%,#a3a9b0 100%);}
.dt-hole{position:absolute;left:10px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 2px #8d939a;}
.p-dogtag b{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:.14em;color:#3a3f45;text-shadow:0 1px 0 rgba(255,255,255,.7);}
.p-dogtag i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:#4a5057;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.6);}

/* comic misprint (Spider-Verse) */
.p-misprint .pb{padding:8px 16px;background:radial-gradient(circle, rgba(0,0,0,.18) 1px, transparent 1.4px) 0 0/6px 6px, #f6f0e4;}
.p-misprint b{position:relative;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.06em;color:#000;}
.p-misprint b::before, .p-misprint b::after{content:attr(data-t);position:absolute;left:0;top:0;mix-blend-mode:multiply;}
.p-misprint b::before{color:#00b7eb;transform:translate(-2.5px,1px);}
.p-misprint b::after{color:#ff1f8e;transform:translate(2.5px,-1px);}

/* enamel pins (only two): brass rim, black enamel, fine line art */
.p-pin .pb{width:74px;height:74px;border-radius:50%;padding:5px;background:radial-gradient(circle at 30% 25%, var(--brass1), var(--brass2));}
.pf{display:block;width:100%;height:100%;border-radius:50%;background:#0b0b0b;position:relative;overflow:hidden;}
.pf svg{width:100%;height:100%;display:block;}
.pf::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,255,255,.28), transparent 45%);}
.pin-arc .pf{background:radial-gradient(circle, #0f2a3a 0%, #071219 70%);}

/* hazard tag (B-127) */
.p-hazard .pb{flex-direction:column;align-items:flex-start;padding:12px 16px;background:#111;position:relative;border:6px solid transparent;
  border-image:repeating-linear-gradient(-45deg,#f2c230 0 8px,#111 8px 16px) 6;}
.p-hazard b{font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:.06em;color:#f2c230;}
.p-hazard i{font-style:normal;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfcf;}

/* location tags */
.p-loc .pb{flex-direction:column;align-items:flex-start;padding:8px 14px 8px;background:#000;border-left:4px solid #f2f1ee;}
.p-loc b{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:#f2f1ee;}
.p-loc i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#9a9a9a;text-transform:uppercase;}
.loc-red .pb{border-left-color:#c8102e;}

/* embroidered mission patch */
.p-patch .pb{width:118px;height:118px;}
.p-patch svg{width:100%;height:100%;}

/* race decal */
.p-decal .pb{padding:4px 18px;background:#c8102e;border-radius:4px;transform:skewX(-10deg);box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px #c8102e;}
.p-decal b{font-family:var(--display);font-weight:700;font-style:italic;font-size:40px;line-height:1;color:#fff;text-shadow:3px 3px 0 #f2c230;}

/* town sign (Briarwood) with the five ranger colours */
.p-town .pb{flex-direction:column;align-items:center;padding:8px 18px 0;background:#1f3d2b;border:2px solid #f2f1ee;outline:3px solid #1f3d2b;}
.p-town i{font-style:normal;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#cfe3d4;}
.p-town b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding-bottom:6px;}
.town-stripe{display:block;width:calc(100% + 36px);height:5px;background:linear-gradient(90deg,#e11d48 0 20%,#2563eb 0 40%,#facc15 0 60%,#16a34a 0 80%,#ec4899 0);}

/* boarding pass (Pandora) */
.p-board .pb{flex-direction:column;align-items:flex-start;width:172px;padding:9px 14px 10px;background:#fff;border-left:6px solid #19c3b8;color:#000;}
.bd-head{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#19a69d;}
.bd-route{display:flex;align-items:center;gap:6px;margin:2px 0;}
.bd-route b{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.04em;}
.bd-route i{font-style:normal;color:#19a69d;}
.bd-meta{font-family:var(--mono);font-size:9px;color:#6b6b6b;}

/* signpost arrow (Far Far Away) */
.p-arrow .pb{padding:8px 34px 8px 16px;background:#7a5a39;clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px);}
.p-arrow b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#f4ead6;}

/* the old sticker system is retired */
.stickers, .oc-pins, .st-corner-web{display:none !important;}
.about-founder{padding-top:110px;padding-bottom:90px;}
.about-process{padding-top:90px;}

/* Off Camera cards: editorial fronts */
.pin-front{align-items:flex-start;text-align:left;justify-content:flex-end;padding:26px 22px 22px;}
.pin-front .pin-label{order:1;}
.pin-front .pin-title{order:2;font-size:clamp(20px,1.8vw,26px);line-height:1.05;margin-top:8px;}
.pin-fact{order:3;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.14);width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#5e5b56;}
.pin-front .pin-hint{order:4;}
.pin-front .pin-tape{left:22px;margin-left:0;}
.pin-flip{min-height:200px;}

/* Spotify link */
.spotify-link{display:inline-block;margin-top:18px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:4px;color:var(--fg);}
.spotify-link:hover{border-color:var(--accent);color:var(--accent);}

@media (max-width:900px){
  .props{justify-content:flex-start;gap:22px 18px;}
  .prop{--y:0px !important;}
  .props .prop .pt{left:50%;right:auto;transform:translate(-50%,-4px) rotate(calc(var(--r,0deg) * -1));}
  .props .prop:hover .pt, .props .prop.show .pt{transform:translate(-50%,0) rotate(calc(var(--r,0deg) * -1));}
}
@media (max-width:560px){.prop{transform:scale(.86) rotate(var(--r,0deg));}.props-top{margin-bottom:40px;}.props-bottom{margin-top:44px;}}
@media (prefers-reduced-motion: reduce){.prop{transition:none;}}
/* retro VHS logo: its navy background melts into the page — screen blend + a softer, wider fade */
.end-card .holo-video{mix-blend-mode:screen;filter:brightness(.62) contrast(1.35) saturate(1.1);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,.6) 46%, transparent 64%);
          mask-image:radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,.6) 46%, transparent 64%);}
.end-card .holo-video-wrap{isolation:auto;}
/* About title: three clips side by side, lined up with A–B, O and U–T */
.ko-slots{display:grid;grid-template-columns:41% 21% 38%;}
/* clips are made at each letter group's shape with Kian in the B, on the O and along the T
   (_lab/about-title/build.py). script.js places each one exactly over its letters (.is-fitted); without JS the
   grid columns show them, with object-position keeping Kian near the same letters */
.ko-slots .ko-clip, .ko-slots img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.15) contrast(1.05);}
.ko-slots > :nth-child(1){object-position:76% center;}
.ko-slots > :nth-child(3){object-position:78% center;}
.ko-slots.is-fitted{display:block;}
.ko-slots.is-fitted > *{position:absolute;object-position:center;}

/* =====================================================================
   PASS 11 (16 Oct 2026): sticker clusters — stuck on, overlapping,
   bridging section edges. Two finishes only: die-cut vinyl + enamel pins.
   Sections keep their original size (clusters are absolutely placed).
   ===================================================================== */
.about-founder{padding-top:120px;padding-bottom:130px;}
.about-process{padding-top:100px;}
.about-founder, .my-story, .off-camera, .about-process{position:relative;}
.cluster{position:absolute;z-index:5;pointer-events:none;}
.stk{position:absolute;left:var(--x);top:var(--y);z-index:var(--z,1);pointer-events:auto;border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;
  transform:rotate(var(--r,0deg)) scale(var(--s,1));transition:transform .45s var(--ease-out), filter .35s ease;}
.stk.prop{transform:rotate(var(--r,0deg)) scale(var(--s,1));}
.stk:hover, .stk:focus-visible, .stk.show, .stk.prop:hover, .stk.prop:focus-visible, .stk.prop.show{transform:rotate(0deg) scale(calc(var(--s,1) * 1.06));z-index:20;}
.stk:active{transform:rotate(var(--r,0deg)) scale(calc(var(--s,1) * .97));}
.stk .sb{display:flex;}
.stk svg{display:block;width:100%;height:100%;}
.stk.sm{--s:.82;}
/* die-cut vinyl: a white cut edge that follows the artwork, then one soft shadow */
.vinyl-st{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(20,10,5,.28));}
.st-bus{width:118px;height:77px;} .st-tower{width:36px;height:92px;} .st-vinyl{width:104px;height:104px;}
.st-bee{width:132px;height:55px;} .st-endur{width:96px;height:96px;} .st-flora{width:84px;height:84px;}
/* enamel pins: the art carries its own metal rim; here just depth */
.pin{filter:drop-shadow(0 7px 9px rgba(20,10,5,.32)) drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.pin.pin-90{width:90px;height:90px;} .pin.pin-80{width:80px;height:80px;} .pin.pin-70{width:70px;height:70px;}
/* props reuse their print styles but sit in clusters */
.stk.prop{filter:drop-shadow(0 8px 10px rgba(20,10,5,.24)) drop-shadow(0 1px 1px rgba(0,0,0,.18));}
/* captions */
.stk .pt{top:auto;bottom:calc(100% + 10px);}
.cl-founder-tr .stk .pt, .cl-off .stk .pt, .cl-proc .stk .pt{top:calc(100% + 10px);bottom:auto;}

/* placements (desktop) */
.cl-founder-tr{top:-46px;right:7vw;width:200px;height:170px;}
.cl-founder-bl{bottom:-24px;left:var(--gutter);width:260px;height:110px;}
.cl-founder-br{bottom:-34px;right:6vw;width:340px;height:120px;}
.cl-story{bottom:22px;right:5vw;width:400px;height:240px;}
.cl-off{top:86px;right:var(--gutter);width:400px;height:170px;}
.cl-proc{top:36px;right:var(--gutter);width:400px;height:180px;}
/* the old strip system is gone */
.props{display:none !important;}

/* OUTATIME: closer to the real California plate */
.p-plate .pb{flex-direction:column;align-items:center;padding:5px 20px 7px;background:linear-gradient(180deg,#ffffff,#eef0f2);border-radius:6px;
  box-shadow:inset 0 0 0 2px #2b2b2b, inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(0,0,0,.12);position:relative;}
.p-plate .pb::before, .p-plate .pb::after{content:'';position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#9aa0a6;box-shadow:inset 0 0 0 1px #6b7178;}
.p-plate .pb::before{left:9px;} .p-plate .pb::after{right:9px;}
.p-plate i{font-family:var(--display);font-style:italic;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:none;color:#c8102e;}
.p-plate b{font-family:var(--mono);font-weight:500;font-size:26px;letter-spacing:.06em;color:#14306b;line-height:1;margin-top:1px;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.25);}

/* Off Camera cards: icon back on top, editorial type underneath */
.card-icon{order:0;display:block;width:46px;height:46px;margin-bottom:auto;}
.card-icon svg{width:100%;height:100%;display:block;}
.pin-front{justify-content:space-between;min-height:230px;}
.pin-front .pin-label{margin-top:18px;}
.pin-flip{min-height:230px;}

@media (max-width:1180px){
  .cluster{position:relative;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;width:auto !important;height:auto !important;
    display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 28px;pointer-events:auto;}
  .cluster .stk{position:relative;left:auto;top:auto;--s:.78;}
  .cluster .stk.sm{--s:.7;}
  .cl-founder-bl, .cl-founder-br{margin:28px 0 0;}
  .stk .pt, .cl-founder-tr .stk .pt, .cl-off .stk .pt, .cl-proc .stk .pt{top:calc(100% + 8px);bottom:auto;}
}
@media (max-width:560px){.cluster .stk{--s:.66;}.cluster .stk.sm{--s:.6;}.cluster{gap:6px 4px;}}
@media (min-width:1181px){
  .cl-founder-bl{bottom:8px;}
  .cl-founder-br{bottom:4px;}
  .cl-story{top:-18px;bottom:auto;right:5vw;width:420px;height:230px;}
  .cl-story .stk .pt{top:calc(100% + 10px);bottom:auto;}
}

/* =====================================================================
   PASS 12 (16 Oct 2026): stickers move into the background
   Faded, behind the text, inside their own section, hover-only labels.
   ===================================================================== */
.about-founder, .my-story, .off-camera, .about-process{overflow:hidden;}
.about-founder > :not(.cluster):not(.svg-defs), .my-story > :not(.cluster), .off-camera > :not(.cluster), .about-process > :not(.cluster){position:relative;z-index:2;}
.cluster{z-index:1;pointer-events:none;}
.stk{opacity:.22;filter:saturate(.7);cursor:default;pointer-events:auto;transition:opacity .4s ease, transform .5s var(--ease-out), filter .4s ease;}
.my-story .stk, .off-camera .stk{opacity:.28;}
.stk:hover{opacity:1;filter:none;transform:rotate(0deg) scale(calc(var(--s,1) * 1.04));z-index:3;}
.stk:active{transform:rotate(0deg) scale(calc(var(--s,1) * 1.04));}
.stk .pt{display:block;}
.stk:hover .pt{opacity:1;}
/* keep every cluster inside its own section */
@media (min-width:1181px){
  .cl-founder-tr{top:30px;}
  .cl-founder-bl{bottom:20px;}
  .cl-founder-br{bottom:20px;}
  .cl-story{top:30px;}
}
/* one typeface on the Off Camera cards */
.pin-fact, .pin-back-text, .pin-label{font-family:var(--body);}
.pin-fact{letter-spacing:.02em;font-size:12px;}

/* =====================================================================
   PASS 16 (17 Oct 2026): BTS strip as a 70mm film strip, always rolling.
   Sprocket period 24px divides both half-track widths (8 x 234 desktop, 8 x 174 mobile) so the loop is seamless.
   ===================================================================== */
.bts-strip{padding:44px 0;background:#0b0b0b;}
.bts-track{position:relative;gap:0;padding:34px 0;background:#17120d;animation-duration:40s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.06);}
.bts-track::before, .bts-track::after{content:'';position:absolute;left:0;right:0;height:12px;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 7px, #d8d0bf 7px 17px, transparent 17px 24px);
  -webkit-mask:linear-gradient(#000,#000);opacity:.82;border-radius:2px;}
.bts-track::before{top:11px;} .bts-track::after{bottom:11px;}
.bts-track img{margin-right:14px;border-radius:3px;filter:brightness(.78) saturate(.9) sepia(.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 0 3px #0e0b08;}
.bts-strip .bts-track{background-image:linear-gradient(90deg, rgba(255,170,60,.04), rgba(255,170,60,0) 40%, rgba(255,170,60,.04));}
@media (max-width:640px){.bts-track{padding:30px 0;}.bts-track::before{top:9px;}.bts-track::after{bottom:9px;}}

/* =====================================================================
   PASS 17 (17 Oct 2026): approved About stickers.
   Meet the Founder: Kian's hand-placed collage of all 35 stickers (source + layout: _lab/stickers/,
   founder-layout.json), designed at a ~1700px-wide section and scaled with the section width.
   Off Camera: cards become Polaroids with hand-drawn icons (tap still flips to the story).
   ===================================================================== */
.about-founder{position:relative;overflow:hidden;padding-bottom:25.9%;}
.about-founder > :not(.founder-stickers){position:relative;z-index:2;}
.founder-stickers{position:absolute !important;left:0;bottom:0;width:100%;aspect-ratio:1700/952;z-index:1 !important;pointer-events:none;
  opacity:.62;filter:saturate(.85);}
.founder-stickers img{position:absolute;height:auto;transform:rotate(var(--r,0deg));}
@media (max-width:900px){
  .about-founder{padding-bottom:62%;}
  .founder-stickers{width:190%;left:auto;right:-6%;}
}

/* Polaroids */
.pinboard{gap:40px 28px;}
.pin-card{transform:rotate(var(--r));}
.pin-face.pin-front{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;
  background:#fbfaf7;padding:12px 12px 16px;border-radius:2px;min-height:0;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 20px 40px rgba(40,0,6,.45);}
.pin-front .pin-tape{left:50%;margin-left:-35px;}
.pol-photo{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;
  background:radial-gradient(120% 100% at 30% 20%, #f3ecdc, #e2d6bd);box-shadow:inset 0 0 30px rgba(90,60,20,.18);}
.pol-photo img{width:62%;height:auto;display:block;}
.pin-front .pin-title{order:0;margin-top:12px;font-family:Caveat, cursive;font-weight:700;font-size:clamp(24px,2vw,28px);
  text-transform:none;letter-spacing:0;line-height:1;}
.pin-front .pin-label{order:0;margin-top:6px;font-size:10px;}
.pin-front .pin-fact{order:0;margin-top:4px;padding-top:0;border-top:0;font-size:11.5px;color:#5e5b56;}
.pin-front .pin-hint{order:0;margin-top:6px;}
.pin-flip{min-height:0;}
.pin-back{border-radius:2px;}
/* keep the paragraph out of the sticker column on narrower desktops (design width ~1700px) */
.about-founder .founder-grid{max-width:min(1200px, calc(76vw - var(--gutter)));}
@media (min-width:901px) and (max-width:1300px){.about-founder{padding-bottom:calc(25.9% + 40px);}}

/* Director's chair portrait: a white-bordered print (same paper as the Off Camera Polaroids), held on with a strip
   of masking tape and a lens pin. Desktop: top right, its lower half over the top of the sticker pile.
   On phones (900px and below) it sits under the bio, above the collage. */
.about-founder > .founder-portrait{position:relative;z-index:2;width:min(300px, 62vw);margin:52px 0 0 6px;
  padding:10px 10px 0;background:#fbfaf7;border-radius:2px;transform:rotate(-2.5deg);
  box-shadow:0 2px 0 rgba(0,0,0,.06), 0 22px 44px rgba(30,20,10,.28);}
.founder-portrait .fp-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.95) contrast(1.02);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.founder-portrait figcaption{font-family:Caveat, cursive;font-weight:700;font-size:24px;line-height:1;color:#2b2926;
  padding:12px 4px 14px;}
/* z-index: the photo's filter paints it like a positioned layer, so tape and pin need to sit above it explicitly */
.founder-portrait .fp-tape, .founder-portrait .fp-pin{z-index:1;}
.founder-portrait .fp-tape{position:absolute;top:-13px;left:50%;width:42%;height:26px;margin-left:-21%;transform:rotate(-4deg);
  background:linear-gradient(180deg, rgba(240,232,212,.86), rgba(226,216,192,.82));box-shadow:0 1px 3px rgba(0,0,0,.14);
  -webkit-mask:linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);mask:linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);}
.founder-portrait .fp-pin{position:absolute;right:-16px;bottom:22px;width:24%;transform:rotate(8deg);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
@media (min-width:901px){
  /* :not(.cluster) matches the specificity of the older ".about-founder > :not(.cluster):not(.svg-defs)" stacking rule */
  .about-founder > .founder-portrait:not(.cluster){position:absolute;top:calc(60px + 7vw);right:calc(var(--gutter) * .55);margin:0;
    width:clamp(150px, 16vw, 290px);transform:rotate(3deg);}
  .founder-portrait .fp-pin{right:auto;left:-18px;transform:rotate(-8deg);}
}

/* =====================================================================
   PASS 18 (17 Oct 2026): My Story gets a projection texture (it was plain black),
   and a new jointed-leg spider for the web drop.
   ===================================================================== */
.my-story{background:#0b0b0b;isolation:isolate;}
.my-story::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(118deg, rgba(255,236,200,.07) 0%, rgba(255,236,200,.025) 22%, transparent 45%),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%),
    repeating-linear-gradient(90deg, transparent 0 173px, rgba(255,255,255,.035) 173px 174px, transparent 174px 389px, rgba(255,255,255,.022) 389px 390px, transparent 390px 611px);}
.my-story::after{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -7.6'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:storyDust .5s steps(3) infinite;}
@keyframes storyDust{0%{transform:translate(0,0);}33%{transform:translate(-3%,2%);}66%{transform:translate(2%,-2%);}100%{transform:translate(0,0);}}
.my-story > *{position:relative;z-index:1;}
@media (prefers-reduced-motion: reduce){.my-story::after{animation:none;}}

.web-line{width:1px;height:38vh;background:linear-gradient(rgba(255,255,255,.95), rgba(220,226,235,.6));box-shadow:0 0 3px rgba(255,255,255,.35);}
.web-spider{width:52px;height:56px;margin-top:-4px;filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.25)) drop-shadow(0 6px 8px rgba(0,0,0,.5));}

/* Web drop v3: lives inside My Story, drops while in view, climbs back when it leaves */
.my-story .web-drop{position:absolute;top:0;right:9%;left:auto;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  animation:none;transform:translateY(-110%);transition:transform .8s cubic-bezier(.5,0,.75,0);}
.my-story .web-drop.down{transform:translateY(0);transition:transform 1.1s cubic-bezier(.3,1.45,.5,1) .35s;}
.my-story .web-line{width:1px;height:170px;background:linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.75));box-shadow:none;}
.my-story .web-spider{width:44px;height:52px;margin-top:-6px;fill:var(--accent);filter:none;
  transform-origin:50% -170px;animation:spiderSway 2.4s ease-in-out infinite alternate;}
@media (max-width:900px){.my-story .web-drop{right:6%;}.my-story .web-line{height:90px;}}
/* Polaroid backs: bigger story text filling the card */
.pin-back{padding:28px 24px;gap:16px;justify-content:center;}
.pin-back .pin-label{font-size:12px;}
.pin-back-text{font-size:clamp(20px,1.9vw,27px);line-height:1.35;color:#f2f0ec;}
@media (max-width:640px){.pin-back-text{font-size:17px;}}

/* hover preview clips (Home cards, Work tiles, In Focus episode 1): the still stays until the clip is playing */
.card, .ep-thumb, .tile{position:relative;}
video.hover-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity .35s ease;filter:brightness(.8);}
.card video.hover-preview{z-index:0;}
.tile video.hover-preview{filter:brightness(.6);} /* matches the tile still's dimming so the title stays readable */
.is-previewing > video.hover-preview{opacity:1;}
@media (prefers-reduced-motion: reduce){video.hover-preview{display:none;}}


/* My Story inline player (About): video fills the 4:3 frame; sound pill bottom-left, play/pause centre,
   thin red progress line along the bottom. The pill pulses gently until sound is on. */
.story-inline{cursor:default;}
.story-inline .story-video{display:block;width:100%;height:100%;object-fit:cover;background:#000;}
.story-inline.is-enhanced .story-video{cursor:pointer;}
.story-sound{position:absolute;left:14px;bottom:16px;z-index:2;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.62);color:#fff;
  font:500 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease;}
.story-sound:hover, .story-sound:focus-visible{background:var(--accent);border-color:var(--accent);color:#000;}
.story-inline:not(.has-sound) .story-sound{animation:soundPulse 2.4s ease-in-out infinite;}
@keyframes soundPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,23,65,.0);}50%{box-shadow:0 0 0 6px rgba(255,23,65,.28);}}
/* speaker drawn in CSS: a box + cone, with a slash while muted */
.snd-ico{position:relative;width:16px;height:12px;display:inline-block;}
.snd-ico::before{content:'';position:absolute;left:0;top:3px;width:5px;height:6px;background:currentColor;
  box-shadow:3px 0 0 0 currentColor;clip-path:none;}
.snd-ico::after{content:'';position:absolute;left:4px;top:0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid currentColor;}
.story-inline:not(.has-sound) .snd-ico{background:linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 58%, transparent 58%) no-repeat 9px 1px / 8px 10px;}
.story-inline.has-sound .snd-ico{background:radial-gradient(circle at 0 50%, transparent 4px, currentColor 4px, currentColor 5.5px, transparent 5.5px) no-repeat 10px 0 / 7px 12px;}
.story-toggle{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;
  background:var(--accent);display:grid;place-items:center;color:#000;cursor:pointer;transition:opacity .3s ease, transform .3s var(--ease-out);}
.story-toggle .tg-ico{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor;margin-left:5px;}
.story-inline.is-playing .story-toggle{opacity:0;transform:scale(.85);}
.story-inline.is-playing:hover .story-toggle, .story-inline.is-playing .story-toggle:focus-visible{opacity:.92;transform:scale(1);}
.story-inline.is-playing .story-toggle .tg-ico{width:18px;height:22px;border:0;margin:0;border-left:6px solid currentColor;border-right:6px solid currentColor;}
.story-inline .story-dur{z-index:2;transition:opacity .3s ease;}
.story-inline.is-playing .story-dur{opacity:0;}
.story-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:rgba(255,255,255,.14);}
.story-progress span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s linear;}
.story-inline:not(.is-enhanced) .story-progress, .story-inline:not(.is-enhanced) .story-dur{display:none;}
@media (prefers-reduced-motion: reduce){.story-inline .story-sound{animation:none;}}
@media (hover: none){.story-inline.is-playing .story-toggle{opacity:0;}}

/* Project pop-up extras (one project per client job): reels row + photo grid under the film and info,
   and the full-screen photo viewer. The pop-up scrolls when a project has extras. */
.project-modal.has-extras .pm-inner{overflow:auto;}
.pm-media.no-film img{filter:none;}
.pm-extras{grid-column:1 / -1;display:grid;gap:30px;padding:28px 30px 32px;border-top:1px solid var(--line);}
.pm-extras[hidden]{display:none;}
.pm-sub{margin:0 0 14px;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pm-sub span{color:var(--accent);margin-left:6px;}
.pm-reel-row{display:grid;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:14px;}
.pm-reel, .pm-reel-video{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:8px;overflow:hidden;background:#000;}
.pm-reel{cursor:pointer;}
.pm-reel img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:transform .6s var(--ease-out), filter .3s ease;}
.pm-reel:hover img, .pm-reel:focus-visible img{transform:scale(1.04);filter:brightness(.95);}
.pm-reel-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#000;transition:transform .3s var(--ease-out);}
.pm-reel-play .play-ico{border-top-width:8px;border-bottom-width:8px;border-left-width:13px;margin-left:4px;}
.pm-reel:hover .pm-reel-play{transform:scale(1.08);}
.pm-reel-video{object-fit:cover;}
.pm-photo-grid{columns:3 200px;column-gap:12px;}
.pm-photo{display:block;width:100%;margin:0 0 12px;padding:0;border:0;border-radius:6px;overflow:hidden;background:#111;cursor:zoom-in;break-inside:avoid;}
.pm-photo img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-out), filter .3s ease;filter:brightness(.9);}
.pm-photo:hover img, .pm-photo:focus-visible img{transform:scale(1.03);filter:brightness(1);}
.photo-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.95);color:#fff;overflow:hidden;}
.photo-viewer::backdrop{background:transparent;}
.pv-fig{position:absolute;inset:60px 84px 64px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.pv-fig img{max-width:100%;max-height:calc(100% - 30px);object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.pv-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);}
.pv-close, .pv-step{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer;transition:background .2s ease, border-color .2s ease, color .2s ease;}
.pv-close:hover, .pv-step:hover, .pv-close:focus-visible, .pv-step:focus-visible{background:var(--accent);border-color:var(--accent);color:#000;}
.pv-close{top:18px;right:18px;}
.pv-step{top:50%;margin-top:-24px;}
.pv-prev{left:20px;} .pv-next{right:20px;}
@media (max-width:760px){
  .pm-extras{padding:22px 20px 26px;gap:24px;}
  .pm-reel-row{grid-template-columns:repeat(3, 1fr);gap:8px;}
  .pm-photo-grid{columns:2;column-gap:8px;}
  .pm-photo{margin-bottom:8px;}
  .pv-fig{inset:60px 12px 90px;}
  .pv-step{top:auto;bottom:24px;margin-top:0;}
  .pv-prev{left:calc(50% - 60px);} .pv-next{right:calc(50% - 60px);}
}
@media (prefers-reduced-motion: reduce){.pm-reel img, .pm-photo img{transition:none;}}

/* pop-up "More films": extra 16:9 films in a project (e.g. an earlier event in a series), labelled, play in place */
.pm-film-row{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:14px;}
.pm-film-item{margin:0;}
.pm-film, .pm-film-video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:8px;overflow:hidden;background:#000;}
.pm-film{cursor:pointer;}
.pm-film img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:transform .6s var(--ease-out), filter .3s ease;}
.pm-film:hover img, .pm-film:focus-visible img{transform:scale(1.03);filter:brightness(.95);}
.pm-film-item figcaption{margin-top:9px;font-size:13px;color:var(--muted);}
@media (prefers-reduced-motion: reduce){.pm-film img{transition:none;}}

/* Work tiles + Home cards: lighter dimming (stills and previews are now brightness-matched at source,
   ~110/255) and a soft gradient behind the title so text stays readable on any frame */
.tile img{filter:brightness(.74);}
.tile:hover img, .tile:focus-visible img{filter:brightness(.9);}
.tile video.hover-preview{filter:brightness(.82);}
.card img{filter:brightness(.78);}
.card:hover img{filter:brightness(.66);}
.card video.hover-preview{filter:brightness(.85);}
.tile:not(.is-soon)::after, .card:not(.is-soon)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);}
.tile-meta, .tile-play, .card-info, .card-tag, .card-timecode, .card .frame, .card-crosshair{z-index:2;}