/* 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;
  /* closest-side: the glow fades out before the section's edges, so it never shows as a box around the frame */
  background:radial-gradient(closest-side at 50% 50%, rgba(255,23,65,.09), transparent);
}
/* .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:10, between an on-camera monitor (3:2) and widescreen, so the footage reads well and still fits a laptop screen, 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{
  position:relative; /* the frame and footage fill the ring itself, not the whole full-width section */
  width:min(86vw,960px);aspect-ratio:16/10;
  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;}
  /* phones keep the look Kian liked: the frame wraps the whole CTA band, so the heading and button always fit inside */
  .cta-ring{position:static;width:88vw;aspect-ratio:16/9;}
  .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:9vh 0 10vh;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 i{width:12px;height:12px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
/* the ticker never stops or reacts to hover: it's decoration, not a menu (the list below is the clickable one) */

.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;}

/* ---------- 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)));}

/* Director's chair portrait: a white-bordered print (same paper as the Off Camera Polaroids), held on with a strip
   of masking tape. Desktop: small, in the empty top-right corner between the bio and the sticker column, so it never
   covers a sticker (26 Oct 2026: Kian didn't want it over the collage).
   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 the tape needs to sit above it explicitly */
.founder-portrait .fp-tape{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);}
@media (min-width:901px){
  /* :not(.cluster) matches the specificity of the older ".about-founder > :not(.cluster):not(.svg-defs)" stacking rule */
  /* left edge = just past the text grid (its width is min(1200px, 76vw - gutter)) */
  .about-founder > .founder-portrait:not(.cluster){position:absolute;top:64px;left:calc(min(76vw, var(--gutter) + 1200px) + 22px);margin:0;
    width:clamp(120px, 10vw, 180px);padding:8px 8px 0;transform:rotate(3deg);}
  .founder-portrait figcaption{font-size:20px;padding:9px 2px 11px;}
  .founder-portrait .fp-tape{top:-11px;height:22px;}
  /* tighter: less space above the quote, and the sticker pile sits closer under the text */
  .about-founder{padding-top:90px;padding-bottom:24.8%;}
}
@media (min-width:901px) and (max-width:1300px){.about-founder{padding-bottom:calc(24.8% + 40px);}}

/* =====================================================================
   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;}

/* ---------- 404: "Media Offline" edit-suite viewer ---------- */
.offline-page{min-height:100vh;display:flex;align-items:center;}
.offline{width:100%;max-width:760px;margin:0 auto;padding:150px var(--gutter) 90px;box-sizing:content-box;}
@media (min-width:1000px){.offline{max-width:1180px;display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center;}.offline .offline-copy{margin-top:0;}}
.offline-viewer{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,23,65,.07) 0 14px, transparent 14px 28px), #0a0a0a;border:1px solid var(--line);}
.offline-viewer::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);}
.offline-viewer .sb-corner{position:absolute;width:16px;height:16px;border-color:rgba(255,23,65,.7);}
.offline-flag{position:relative;font-family:var(--mono);font-size:clamp(18px,4vw,34px);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  animation:offlineFlicker 4.5s steps(1) infinite;}
.offline-path{max-width:80%;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@keyframes offlineFlicker{0%,100%{opacity:1;transform:none;}91%{opacity:.35;transform:translateX(3px);}92%{opacity:1;transform:translateX(-2px);}93%{transform:none;}}
.offline-timeline{position:relative;margin-top:14px;display:grid;gap:4px;}
.ot-track{display:flex;gap:3px;height:22px;}
.ot-label{width:30px;flex:none;font-family:var(--mono);font-size:10px;line-height:22px;color:var(--muted);}
.ot-clip{border-radius:2px;background:rgba(255,255,255,.16);}
.ot-audio{background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 5px);height:70%;align-self:center;}
.ot-gone{background:repeating-linear-gradient(135deg, rgba(255,23,65,.55) 0 5px, rgba(255,23,65,.15) 5px 10px);outline:1px solid var(--accent);}
.ot-playhead{position:absolute;top:-6px;bottom:-4px;left:calc(30px + (100% - 30px) * .42);width:1.5px;background:var(--accent);}
.offline-copy{margin-top:44px;}
.offline-code{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.offline-copy h1{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(32px,5vw,56px);line-height:1.02;text-transform:uppercase;}
.offline-copy p:not(.offline-code){margin-top:16px;max-width:460px;color:var(--muted);font-size:16px;line-height:1.5;}
.offline-actions{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;}
@media (max-width:600px){.offline{padding-top:130px;}.offline-actions .btn{flex:1 1 auto;justify-content:center;}}
@media (prefers-reduced-motion:reduce){.offline-flag{animation:none;}}

/* ---------- About, Off Camera (26 Oct 2026): smaller Polaroids on desktop + animated drawings (v19) ----------
   Desktop only: the board is capped and spaced out, so the Polaroids are about 25% smaller. Phones keep their size.
   The drawings are inline SVG (source: _lab/stickers/v19-offcamera-anim.py). Each one is inked in (a left-to-right
   pen wipe) once the board is on screen, then its own parts move. script.js adds .oc-live only while the board is
   visible, so nothing animates off screen; everything is still with reduced motion. */
/* Desktop: Polaroids stay a modest size and spread across the full width like a pinned board (no empty sides) */
@media (min-width:861px){.pinboard{grid-template-columns:repeat(4, minmax(0, clamp(170px, 15vw, 280px)));justify-content:space-between;gap:48px 28px;}}
/* narrower windows and tablets: two columns, capped so the Polaroids never balloon */
@media (max-width:860px){.pinboard{grid-template-columns:repeat(2, minmax(0, 300px));justify-content:center;column-gap:clamp(16px, 6vw, 56px);}}
/* Shape stays right at every window size: the front sets the card's size and the story on the back fits inside it,
   sized to the card (container units), instead of the back stretching the card when the window narrows */
.pin-card{container-type:inline-size;}
.pin-face.pin-back{position:absolute;inset:0;overflow:auto;padding:9cqi 8cqi;gap:4cqi;}
.pin-back .pin-label{font-size:clamp(9px, 4.4cqi, 12px);}
.pin-back-text{font-size:clamp(12.5px, 7.6cqi, 24px);line-height:1.35;}
.pol-photo .oc-art{width:72%;height:auto;display:block;overflow:visible;}
html.js .pinboard[data-reveal="frames"] .oc-art{clip-path:inset(0 100% 0 0);}
html.js .pinboard[data-reveal="frames"].in-view .oc-art{animation:inkIn 1.1s cubic-bezier(.45,.05,.3,1) forwards;animation-delay:calc(.45s + var(--i, 0) * .14s);}
@keyframes inkIn{to{clip-path:inset(0 -10% 0 -10%);}}
.pin-card:nth-child(2) .oc-art{--i:1;} .pin-card:nth-child(3) .oc-art{--i:2;} .pin-card:nth-child(4) .oc-art{--i:3;}
.pin-card:nth-child(5) .oc-art{--i:4;} .pin-card:nth-child(6) .oc-art{--i:5;} .pin-card:nth-child(7) .oc-art{--i:6;} .pin-card:nth-child(8) .oc-art{--i:7;}
.oc-a{transform-box:view-box;}
/* Interstellar: stars twinkle (the ship is SMIL, paused/resumed by script.js) */
.oc-twinkle{animation:ocTwinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--k) * -.55s);}
@keyframes ocTwinkle{0%,100%{opacity:1;}50%{opacity:.15;}}
/* Spider-Man: drop, bounce, climb back up; the web gives a little when it lands */
.oc-thread{transform-origin:84px 18px;animation:ocThread 4.5s ease-in-out infinite;}
.oc-spider{animation:ocDrop 4.5s ease-in-out infinite;}
.oc-web{transform-origin:84px 18px;animation:ocGive 4.5s ease-in-out infinite;}
@keyframes ocDrop{0%,100%{transform:none;}14%{transform:translateY(14px);}22%{transform:translateY(6px);}30%{transform:translateY(11px);}37%{transform:translateY(8px);}48%{transform:translateY(9px);}}
@keyframes ocThread{0%,100%{transform:none;}14%{transform:scaleY(1.54);}22%{transform:scaleY(1.23);}30%{transform:scaleY(1.42);}37%{transform:scaleY(1.31);}48%{transform:scaleY(1.35);}}
@keyframes ocGive{0%,10%,30%,100%{transform:none;}15%{transform:translateY(1.5px) scale(1.015);}22%{transform:translateY(-.5px);}}
/* MCU: each stone glows in turn */
.oc-halo{opacity:0;transform-box:fill-box;transform-origin:center;animation:ocGlow 6s ease-in-out infinite;animation-delay:calc(var(--k) * 1s);}
@keyframes ocGlow{0%,28%,100%{opacity:0;transform:scale(.7);}12%{opacity:.5;transform:scale(1.25);}}
/* PlayStation: the light bar breathes */
.oc-glow{animation:ocBreathe 3s ease-in-out infinite;opacity:.15;}
.oc-bar{animation:ocBar 3s ease-in-out infinite;}
@keyframes ocBreathe{0%,100%{opacity:.08;}50%{opacity:.5;}}
@keyframes ocBar{0%,100%{opacity:.55;}50%{opacity:1;}}
/* Turntable: 33 1/3 rpm */
.oc-record{transform-origin:52px 59px;animation:ocSpin 1.8s linear infinite;}
@keyframes ocSpin{to{transform:rotate(360deg);}}
/* Camera: the lamp glows, then the flash fires */
.oc-lamp{animation:ocLamp 6s linear infinite;}
.oc-burst{opacity:0;transform-origin:60px 15px;animation:ocBurst 6s ease-out infinite;}
.oc-flashwin{animation:ocWin 6s linear infinite;}
@keyframes ocLamp{0%,74%,92%,100%{fill:#fff;}76%,90%{fill:#ffb02e;}}
@keyframes ocBurst{0%,89%,100%{opacity:0;transform:scale(.4);}91%{opacity:1;transform:scale(1.15);}97%{opacity:0;transform:scale(1.3);}}
@keyframes ocWin{0%,89%,97%,100%{stroke:#141210;}90%,94%{stroke:#ffd27a;}}
/* NR3: the cap is thrown up and lands back on the roof */
.oc-cap{transform-origin:33px 12px;animation:ocToss 5s cubic-bezier(.3,.6,.4,1) infinite;}
.oc-tassel{transform-origin:45px 13px;animation:ocTassel 5s ease-in-out infinite;}
@keyframes ocToss{0%,62%,100%{transform:none;}72%{transform:translateY(-12px) rotate(-200deg);}80%{transform:translateY(-14px) rotate(-320deg);}90%{transform:translateY(1px) rotate(-360deg);}94%{transform:rotate(-360deg);}}
@keyframes ocTassel{0%,60%,100%{transform:none;}75%{transform:rotate(30deg);}88%{transform:rotate(-20deg);}}
/* Brighton: waves roll through the pier legs, the flag flutters */
.oc-wave{animation:ocRoll 4s linear infinite;}
.oc-wave2{animation-duration:6s;animation-direction:reverse;}
@keyframes ocRoll{to{transform:translateX(60px);}}
.oc-flag{transform-origin:75px 21px;animation:ocFlag 1.4s ease-in-out infinite;}
@keyframes ocFlag{0%,100%{transform:none;}50%{transform:scaleX(.72) skewY(-6deg);}}
/* paused unless the board is on screen; kept after the animation shorthands above so they don't reset it */
.pinboard .oc-a{animation-play-state:paused;}
.pinboard.oc-live .oc-a{animation-play-state:running;}
@media (prefers-reduced-motion:reduce){
  html.js .pinboard[data-reveal="frames"] .oc-art, html.js .pinboard[data-reveal="frames"].in-view .oc-art{clip-path:none;animation:none;}
  .oc-a{animation:none !important;}
  .oc-halo, .oc-burst{opacity:0;}
}

/* ---------- Home (26 Oct 2026): Ongoing marked as recommended; review controls on the card ---------- */
.wt-card.wt-pick{border-color:rgba(255,23,65,.5);
  background:radial-gradient(90% 130% at 100% 0%, rgba(255,23,65,.2), transparent 62%), linear-gradient(135deg, #070707 0%, #120d0e 50%, #1d1416 100%);}
.wt-badge{display:inline-flex;align-items:center;gap:7px;margin:1px auto 0 14px;padding:5px 10px 5px 9px;border:1px solid rgba(255,23,65,.55);border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,23,65,.12);}
.wt-badge .dot{width:6px;height:6px;animation:recBlink 1.6s infinite;}
@media (prefers-reduced-motion:reduce){.wt-badge .dot{animation:none;}}
/* arrows, pause and count sit under the reviewer's name, just above the red progress line */
.rv-stage .rv-controls{margin-top:30px;}
.rv-stage .rv-count{margin:0 0 0 auto;}
.rv-stage .rv-scrub{margin-top:18px;}
@media (max-width:900px){.rv-stage .rv-controls{margin-top:24px;}.reviews-v3 .t-arrow{width:40px;height:40px;}}

/* ---------- Footer (26 Oct 2026): its own centred card, not full width ----------
   The brand block (tagline, line, business details) spreads to the same height as the link columns beside it. */
.footer-card{max-width:1280px;margin-left:auto;margin-right:auto;}
@media (min-width:1025px){
  .site-footer .footer-top{align-items:stretch;}
  .site-footer .footer-brand{align-items:stretch;padding-left:10px;}
  .footer-brand-text{display:flex;flex-direction:column;justify-content:space-between;gap:14px;}
  .footer-brand-text p + p{margin-top:0;}
  .footer-brand-text p{font-size:14px;line-height:1.65;}
}
/* End ident: the retro VHS logo after the footer on every page (interactive spotlight on hover) */
.end-ident{padding:34px var(--gutter) 10px;background:#000;}
.end-ident .holo-video-wrap{max-width:240px;margin:0 auto;}
.end-ident .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%);}
@media (max-width:560px){.end-ident .holo-video-wrap{max-width:180px;}}
.end-card{padding:10px var(--gutter) 6px;}
.focus-note{margin-top:0;}
.focus-note .btn{margin-top:18px;}

/* ---------- Contact hero: call sheet card on the right (27 Oct 2026) ---------- */
.routes-card{position:relative;border-radius:10px;border:1px solid rgba(255,255,255,.1);overflow:hidden;padding:54px 30px 34px;margin-top:44px;max-width:460px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 0%, #1a1a1a 0%, #070707 80%);}
.routes-card .sb-corner{position:absolute;width:18px;height:18px;border-color:rgba(255,23,65,.75);}
.routes-head{margin:0;}
.routes-card .sb-rec{top:18px;left:38px;}
.routes-tc{position:absolute;top:17px;right:38px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.routes-list{list-style:none;margin:0;padding:0;}
.routes-list li + li{border-top:1px solid rgba(255,255,255,.09);}
.routes-list a{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:"no name arrow" "no note arrow";column-gap:12px;align-items:center;padding:16px 4px;color:#fff;text-decoration:none;}
.routes-no{grid-area:no;font-family:var(--mono);font-size:11px;color:var(--accent);align-self:start;padding-top:5px;}
.routes-name{grid-area:name;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(17px,1.5vw,21px);}
.routes-note{grid-area:note;font-size:13px;color:var(--muted);margin-top:2px;}
.routes-arrow{grid-area:arrow;font-size:18px;color:rgba(255,255,255,.5);transition:transform .3s ease, color .3s ease;}
.routes-list a:hover .routes-arrow, .routes-list a:focus-visible .routes-arrow{color:var(--accent);transform:translateY(3px);}
.routes-list li:last-child a:hover .routes-arrow, .routes-list li:last-child a:focus-visible .routes-arrow{transform:translate(2px,-2px);}
.routes-card .standby-bars{top:auto;bottom:0;height:4px;opacity:.5;}
#book{scroll-margin-top:70px;}
@media (min-width:1025px){
  .contact-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);column-gap:56px;align-content:end;}
  .contact-hero > :not(.routes-card){grid-column:1;}
  .contact-hero .routes-card{grid-column:2;grid-row:1 / span 4;align-self:end;margin-top:0;width:100%;}
}

/* ---------- In Focus: About the series box beside the episodes (27 Oct 2026) ---------- */
.episodes{max-width:none;}
.ep-layout{display:grid;grid-template-columns:minmax(0,1180px) minmax(240px,320px);gap:56px;align-items:start;justify-content:space-between;}
.series-about{position:sticky;top:110px;border:1px solid var(--line);border-radius:10px;padding:24px 24px 10px;background:rgba(255,255,255,.02);}
.series-about h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px;margin:0 0 6px;padding-bottom:14px;border-bottom:1px solid var(--accent);}
.series-about dl{margin:0;}
.series-about dl > div{padding:13px 0;border-bottom:1px solid var(--line);}
.series-about dl > div:last-child{border-bottom:0;}
.series-about dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;}
.series-about dd{margin:0;font-size:14px;line-height:1.5;color:#d6d6d6;}
.series-about a{color:#fff;}
@media (max-width:1100px){
  .ep-layout{grid-template-columns:1fr;gap:40px;}
  .series-about{position:static;max-width:640px;}
}

/* ---------- Contact: the email underline only runs under the email (27 Oct 2026) ---------- */
.contact-hero .big-mail{justify-self:start;}

/* ---------- Home CTA: text sits inside the centre brackets; "Let's get started" bigger and white (27 Oct 2026) ---------- */
.vf-center-lock{width:62%;height:52%;}
@media (max-width:560px){.vf-center-lock{width:74%;height:78%;}.cta .btn{margin-top:16px;}.cta .cta-kicker{margin-top:8px;}}
.cta h2{font-size:clamp(24px,3.3vw,44px);}
.cta .cta-kicker{margin-top:14px;color:#fff;font-size:clamp(17px,1.7vw,23px);font-weight:500;letter-spacing:.02em;}
.cta .btn{margin-top:24px;}

/* ---------- Header: liquid-glass bar once you scroll (27 Oct 2026, v2) ----------
   iPhone Safari 26 can't be drawn under: it tints the status bar from a fixed bar touching the top edge, and it
   stops doing that if the bar itself has backdrop-filter. So the bar keeps a plain background colour (what Safari
   samples) and the frosted blur lives on ::before inside it. */
header{padding-top:env(safe-area-inset-top, 0px);min-height:calc(110px + env(safe-area-inset-top, 0px));}
@media (max-width:560px){header{min-height:calc(88px + env(safe-area-inset-top, 0px));}}
header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 100%);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.04);-webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.04);}
header.solid{
  background:rgba(12,12,12,.5);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.22);
}
header.solid::before{opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.solid{background:rgba(0,0,0,.88);}}

/* ---------- Phone menu v3 (27 Oct 2026): frosted full screen, centred, Jost regular in normal case like the
   desktop nav, small red numbers, red Client Login button. Same Safari rule as the header: plain colour on the
   menu itself (it touches the top and bottom edges, so Safari tints both bars from it), blur on ::before. ---------- */
html.menu-open{overflow:hidden;}
.mobile-menu{
  inset:0;height:auto;
  display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:24px;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 26px);
  background:rgba(10,10,10,.72);backdrop-filter:none;-webkit-backdrop-filter:none;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);}
.mm-top{display:flex;align-items:center;justify-content:space-between;min-height:calc(88px - 14px);}
.mobile-menu-logo{width:auto;height:44px;margin:0;}
.mobile-menu .menu-close{position:static;}
.mm-links{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;}
.mobile-menu .mm-links a{display:inline-flex;align-items:baseline;justify-content:center;gap:12px;padding:10px 0;font-family:var(--body);font-weight:400;font-size:clamp(26px,7.4vw,34px);line-height:1.15;letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.88);}
.mm-no{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--accent);min-width:0;padding:0;transform:translateY(-.9em);}
.mobile-menu .mm-links a.current{color:#fff;}
.mobile-menu .mm-links a.current .mm-label{color:#fff;border-bottom:1px solid var(--accent);padding-bottom:2px;}
.mm-foot{display:flex;flex-direction:column;gap:16px;}
.mobile-menu .mm-login{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;background:var(--accent);color:#fff;border-radius:2px;font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;}
.mm-login .dot{width:7px;height:7px;background:#fff;}
.mm-login-arrow{margin-left:auto;}
.mobile-menu .mm-mail{font-family:var(--body);font-size:15px;text-transform:none;text-align:center;color:#d6d6d6;}
.mm-social{display:flex;justify-content:center;gap:24px;margin:0;}
.mobile-menu .mm-social a{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mm-links li, .mm-foot{opacity:0;transform:translateY(14px);transition:opacity .4s ease, transform .5s var(--ease-out);}
.mobile-menu.open .mm-links li, .mobile-menu.open .mm-foot{opacity:1;transform:none;}
.mobile-menu.open .mm-links li:nth-child(1){transition-delay:.10s;}
.mobile-menu.open .mm-links li:nth-child(2){transition-delay:.14s;}
.mobile-menu.open .mm-links li:nth-child(3){transition-delay:.18s;}
.mobile-menu.open .mm-links li:nth-child(4){transition-delay:.22s;}
.mobile-menu.open .mm-links li:nth-child(5){transition-delay:.26s;}
.mobile-menu.open .mm-links li:nth-child(6){transition-delay:.30s;}
.mobile-menu.open .mm-foot{transition-delay:.36s;}
@media (prefers-reduced-motion: reduce){.mm-links li, .mm-foot{transition:none;opacity:1;transform:none;}}
.reviews-v3 .rv-controls .t-pause{margin:0 2px;}

/* ---------- Idle clapperboard v2 (27 Oct 2026): laid out like a real production slate ---------- */
.slate-board.v2{width:min(500px, 90vw);background:#0b0b0b;border-radius:8px;transform:rotate(-2deg);}
.slate-board.v2 .slate-clapper{height:50px;}
.slate-board.v2 .slate-stick{height:22px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(-58deg, #f2f2f2 0 24px, #0b0b0b 24px 48px);box-shadow:inset 0 0 0 2px #f2f2f2;}
.slate-board.v2 .slate-base{border-radius:0;}
.slate-board.v2 .slate-top{bottom:26px;}
.slate-hinge{position:absolute;left:6px;bottom:17px;width:10px;height:10px;border-radius:50%;background:#0b0b0b;border:2px solid #f2f2f2;z-index:2;}
.slate-board.v2 .slate-body{border:2px solid #f2f2f2;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(160deg, #141414, #070707);}
.slate-board.v2 .slate-row span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#8d8d8d;}
.slate-board.v2 .slate-prod{display:flex;align-items:baseline;gap:16px;}
.slate-board.v2 .slate-prod strong{margin:0;font-size:clamp(22px,5vw,30px);letter-spacing:.08em;}
.slate-big strong{font-size:clamp(26px,6vw,38px) !important;font-weight:600 !important;line-height:1;margin-top:8px !important;}
.slate-big em{display:block;margin-top:6px;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.slate-grid3.slate-big{grid-template-columns:1.2fr 1.3fr .8fr;}
.slate-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;}
.slate-board.v2 .slate-tags span{display:inline-block;padding:4px 8px;border:1px solid rgba(242,242,242,.25);border-radius:3px;color:#6f6f6f;letter-spacing:.14em;text-transform:uppercase;}
.slate-board.v2 .slate-tags span.on{border-color:#f2f2f2;color:#f2f2f2;}
.slate-board.v2 .slate-tags .slate-fps{margin-left:auto;border-color:var(--accent);color:var(--accent);}
.slate-tags i{width:1px;height:16px;background:rgba(242,242,242,.2);}
.slate-caption{display:flex;align-items:center;justify-content:center;gap:10px;}
.slate-caption .dot{width:7px;height:7px;animation:recBlink 1.6s infinite;}

/* ---------- In Focus hero on phones (27 Oct 2026): the still sits across the top (framed on Christabel's face,
   about 44% across) and fades into black under the title, so the text never covers her ---------- */
@media (max-width:700px){
  .series-hero{min-height:0;align-items:stretch;}
  .series-bg{inset:0 0 auto 0;height:min(118vw, 540px);object-position:38% 30%;filter:brightness(.8) saturate(1.05);}
  .series-hero::after{background:linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 90px, rgba(0,0,0,0) calc(min(118vw, 540px) * .55), #000 min(118vw, 540px));}
  .series-content{padding-top:calc(min(118vw, 540px) - 70px);}
}
@media (max-width:360px){.vf-center-lock{width:86%;}}
.slate{align-content:center;row-gap:6px;}
/* the call sheet card is a monitor/viewfinder, not a "no signal" standby screen: no colour bars, no scanlines, thin red line instead */
.routes-card{background:radial-gradient(ellipse at 30% 0%, #1a1a1a 0%, #070707 80%);}
.routes-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg, var(--accent), rgba(255,23,65,0) 70%);}
/* Contact sidebar: email / Instagram boxes centre their text both ways, and the In Focus title gets the same gap above it as Pricing */
.contact-brief .other-contact a{display:flex;align-items:center;justify-content:center;text-align:center;}
.brief-side .quote-note + .section-label{margin-top:40px;}

/* ---------- iPhone status bar / toolbar tint strips (27 Oct 2026, round 4) ----------
   Safari 26 samples a solid fixed strip (6px+) touching the screen edge to colour its bars. The header's top is solid
   for its first 14px and fades into the glass, so the strip doesn't show as a seam. */
.edge-tint{display:none;position:fixed;left:0;right:0;height:12px;background:#0c0c0c;z-index:106;pointer-events:none;}
.edge-top{top:0;}
.edge-bottom{bottom:0;}
html.header-solid .edge-top, html.menu-open .edge-top, html.menu-open .edge-bottom{display:block;}
header.solid{background:linear-gradient(180deg, #0c0c0c 0, #0c0c0c 12px, rgba(12,12,12,.5) 44px);}
.mobile-menu{background:linear-gradient(180deg, #0c0c0c 0, #0c0c0c 12px, rgba(10,10,10,.72) 60px, rgba(10,10,10,.72) calc(100% - 60px), #0c0c0c calc(100% - 12px));}

/* ---------- Footer on phones and tablets (27 Oct 2026): no "Site" list (the menu already has every page);
   socials run along one line, Clients and Legal sit side by side ---------- */
@media (max-width:1024px){
  .footer-col-site{display:none;}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:560px){
  .footer-cols .footer-col:nth-child(2){grid-column:1 / -1;}
  .footer-cols .footer-col:nth-child(2) a{display:inline-block;margin-right:18px;}
}

/* ---------- iPhone bars, round 5 (27 Oct 2026) ----------
   Safari picks the colour for its status bar / toolbar from the top-most fixed layer touching that edge, and it
   counts layers that are invisible (opacity 0, visibility hidden). Two full-screen see-through layers sat above
   everything: the film grain (body::after) and the page-transition layer. So: the transition layer is display:none
   unless a cut is playing, the grain is off on touch screens, and the frosted blur layers stop 12px short of the
   edges so the solid edge strips are what Safari finds. */
.page-cut:not(.on){display:none;}
@media (hover:none) and (pointer:coarse){body::after{display:none;}}
header::before{top:12px;}
.mobile-menu::before{inset:12px 0;}
.edge-tint{z-index:160;}
@media (max-width:400px){.page-hero h1{font-size:clamp(28px,10.5vw,44px);overflow-wrap:break-word;}}