:root{
  --void:#0a0809; --ink:#050405; --panel:#131011; --panel-2:#1b1617;
  --blood:#a72020; --blood-deep:#601111; --ember:#e23a2f;
  --bone:#f3efe9; --ash:#8d878b; --ash-dim:#5d585b;
  --line:rgba(243,239,233,.12); --line-soft:rgba(243,239,233,.07);
  --display:'Archivo',sans-serif; --body:'Hanken Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace;
  --inset:clamp(12px,2.2vw,26px); --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--bone); font-family:var(--body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; letter-spacing:.005em;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--blood);color:var(--bone)}

/* ---------- ambient layers ---------- */
.bloom{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, rgba(167,32,32,.20), transparent 60%),
    radial-gradient(30vmax 30vmax at 82% 72%, rgba(96,17,17,.26), transparent 62%);
  filter:blur(8px); animation:drift 34s var(--ease) infinite alternate;}
@keyframes drift{from{transform:translate3d(-2%, -1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  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:flick .6s steps(2) infinite;}
@keyframes flick{0%{transform:translate(0,0)}100%{transform:translate(-6px,4px)}}
.vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  box-shadow:inset 0 0 18vmax rgba(0,0,0,.6);}
.frame-shade{position:fixed;left:0;right:0;bottom:0;height:calc(var(--inset) + 46px);z-index:4;pointer-events:none;
  background:linear-gradient(to top, var(--void) 30%, transparent);}

/* ---------- viewfinder frame ---------- */
.viewfinder{position:fixed;inset:var(--inset);z-index:5;pointer-events:none;
  border:1px solid var(--line-soft);}
.vf-c{position:absolute;width:26px;height:26px;border:2px solid var(--bone);opacity:.85;
  transition:all .5s var(--ease);}
.vf-c.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.vf-c.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.vf-c.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.vf-c.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hud{position:absolute;bottom:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ash);text-transform:uppercase}
.hud.l{left:12px}.hud.r{right:12px;display:flex;gap:14px;align-items:center}
.rec{display:inline-flex;align-items:center;gap:7px;color:var(--bone)}
.rec b{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);
  animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.18}}
@media(max-width:680px){.hud .coords{display:none}.vf-c{width:18px;height:18px}}

/* boot animation */
.viewfinder .vf-c{animation:lock .9s var(--ease) both}
.vf-c.tl{animation-delay:.05s}.vf-c.tr{animation-delay:.12s}
.vf-c.bl{animation-delay:.19s}.vf-c.br{animation-delay:.26s}
@keyframes lock{0%{opacity:0;transform:scale(2.4)}60%{opacity:.85;transform:scale(.86)}100%{opacity:.85;transform:scale(1)}}

/* ---------- header ---------- */
header{position:fixed;top:var(--inset);left:var(--inset);right:var(--inset);z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(14px,2.4vw,30px);
  background:linear-gradient(to bottom, rgba(10,8,9,.82), rgba(10,8,9,0));
  backdrop-filter:blur(3px);}
.brand{display:flex;align-items:center;gap:0;cursor:pointer}
.brand img{height:clamp(26px,3.4vw,34px);width:auto}
nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
nav a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);transition:color .25s;position:relative;padding:6px 0}
nav a:hover{color:var(--bone)}
nav a.on{color:var(--bone)}
nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--blood)}
nav a.ext{color:var(--bone);border:1px solid var(--line);border-radius:40px;padding:7px 15px}
nav a.ext:hover{border-color:var(--blood);background:rgba(167,32,32,.12)}
@media(max-width:560px){
  nav{gap:14px}
  nav a{font-size:10.5px;letter-spacing:.12em}
  nav a.ext{padding:6px 11px}
}

/* ---------- routing ---------- */
main{position:relative;z-index:10}
.route{display:none}
.route.active{display:block;animation:fade .6s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* eyebrow + section markers */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--blood);
  display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blood)}

/* type scale */
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.96;letter-spacing:-.02em;text-transform:uppercase}
.display{font-size:clamp(2.6rem,8.4vw,7rem)}
.display .it{font-style:italic;color:var(--blood)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
.lede{font-size:clamp(1.05rem,1.6vw,1.32rem);color:#d9d4cf;max-width:46ch;line-height:1.5;font-weight:400}
.small{font-size:.82rem;color:var(--ash)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;border-radius:46px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--bone);transition:all .3s var(--ease)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn.primary{background:var(--blood);border-color:var(--blood)}
.btn.primary:hover{background:var(--ember);box-shadow:0 8px 30px rgba(167,32,32,.4)}
.btn.ghost:hover{border-color:var(--bone)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;
  padding-top:120px;padding-bottom:90px}
/* HERO IMAGE (optional): add class "has-img" to the hero and set --img.
   <div class="wrap hero has-img" style="--img:url('images/hero.jpg')"> */
.hero.has-img{background-image:linear-gradient(rgba(10,8,9,.74), rgba(10,8,9,.9)), var(--img);
  background-size:cover;background-position:center}
.hero .eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:30px}
.hero-row{display:flex;gap:46px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.reel{display:inline-flex;align-items:center;gap:14px;cursor:pointer;color:var(--bone);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.reel .pp{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:all .3s var(--ease)}
.reel:hover .pp{border-color:var(--blood);background:rgba(167,32,32,.14);transform:scale(1.05)}
.reel .pp svg{width:13px;height:13px;margin-left:2px;fill:var(--bone)}
.scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;letter-spacing:.3em;color:var(--ash-dim);text-transform:uppercase;
  animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translate(-50%,8px);opacity:.5}}

/* section spacing */
.block{padding:clamp(70px,11vw,150px) 0}
.block-head{margin-bottom:clamp(36px,6vw,68px)}
.block-head h2{margin-top:18px;max-width:18ch}

/* ---------- formats strip ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft)}
.fmt{background:var(--void);padding:30px 26px;min-height:170px;display:flex;flex-direction:column;
  justify-content:space-between;cursor:pointer;transition:background .35s var(--ease);position:relative;overflow:hidden}
.fmt:hover{background:var(--panel)}
.fmt .ix{font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.14em}
.fmt h3{font-size:clamp(1.3rem,2.4vw,1.9rem);transition:color .3s}
.fmt:hover h3{color:var(--blood)}
.fmt .gocount{font-family:var(--mono);font-size:11px;color:var(--ash-dim);letter-spacing:.1em}
.fmt .glow{position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 110%, rgba(167,32,32,.35), transparent 70%);
  opacity:0;transition:opacity .4s}
.fmt:hover .glow{opacity:1}
.fmt .shot{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .55s var(--ease);z-index:0}
.fmt:hover .shot{opacity:1}
.fmt .ix,.fmt h3,.fmt .gocount{position:relative;z-index:2}
.fmt .glow{z-index:1}
@media(max-width:820px){.formats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.formats{grid-template-columns:1fr}}

/* ---------- work grid (poster tiles) ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;background:var(--panel);
  border:1px solid var(--line-soft)}
.tile .poster{position:absolute;inset:0;transition:transform .8s var(--ease),filter .6s}
.tile:hover .poster{transform:scale(1.06)}
.tile .scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(5,4,5,.86) 0%, rgba(5,4,5,.18) 55%, transparent 100%)}
.tile .meta{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;justify-content:space-between;align-items:flex-end}
.tile .meta h3{font-size:clamp(1.15rem,2vw,1.5rem)}
.tile .meta .ix{font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.14em;margin-bottom:7px}
.tile .cnt{font-family:var(--mono);font-size:11px;color:var(--bone);letter-spacing:.1em;
  border:1px solid var(--line);border-radius:30px;padding:5px 11px;white-space:nowrap}
/* focus brackets on tiles */
.tile .fc{position:absolute;width:20px;height:20px;border:2px solid var(--bone);opacity:0;transition:all .4s var(--ease)}
.tile .fc.tl{top:14px;left:14px;border-right:0;border-bottom:0;transform:translate(6px,6px)}
.tile .fc.tr{top:14px;right:14px;border-left:0;border-bottom:0;transform:translate(-6px,6px)}
.tile .fc.bl{bottom:14px;left:14px;border-right:0;border-top:0;transform:translate(6px,-6px)}
.tile .fc.br{bottom:14px;right:14px;border-left:0;border-top:0;transform:translate(-6px,-6px)}
.tile:hover .fc{opacity:.9;transform:translate(0,0)}
.tile .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:58px;height:58px;
  border-radius:50%;background:rgba(167,32,32,.92);display:grid;place-items:center;opacity:0;transition:all .4s var(--ease)}
.tile:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tile .play svg{width:16px;height:16px;fill:var(--bone);margin-left:2px}

/* featured (home) larger first tile */
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)}
.feat .tile:first-child{grid-column:1 / -1;aspect-ratio:21/9}
@media(max-width:560px){.feat{grid-template-columns:1fr}.feat .tile:first-child{aspect-ratio:4/3}}

/* ---------- statement ---------- */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(60px,9vw,110px) 0}
.statement p{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.18;
  letter-spacing:-.01em;max-width:20ch}
.statement p em{font-style:italic;color:var(--blood)}
.statement .sub{font-family:var(--body);font-weight:400;font-size:1.05rem;color:var(--ash);
  max-width:54ch;margin-top:30px;letter-spacing:0}

/* ---------- marketing bridge ---------- */
.bridge{position:relative;border:1px solid var(--line);overflow:hidden;
  padding:clamp(40px,6vw,72px);display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;
  background:linear-gradient(120deg, var(--panel), var(--void))}
.bridge::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 120% at 100% 0%, rgba(167,32,32,.22), transparent 60%)}
.bridge>*{position:relative;z-index:1}
/* IMAGE OVERLAY: add class "has-img" to any .bridge and set --img to a photo.
   The dark gradient on top keeps the text readable. Example:
   <div class="bridge has-img" style="--img:url('images/cta.jpg')"> */
.bridge.has-img{background-image:linear-gradient(120deg, rgba(10,8,9,.92), rgba(10,8,9,.55)), var(--img);
  background-size:cover;background-position:center}
.bridge h3{font-size:clamp(1.5rem,3vw,2.3rem);max-width:16ch}
.bridge p{color:var(--ash);max-width:42ch;margin-top:14px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px)}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr;gap:54px}}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line);
  color:var(--bone);padding:14px 16px;font-family:var(--body);font-size:16px;border-radius:4px;transition:border .25s}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blood)}
.starts{border:1px solid var(--line)}
.start{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line-soft)}
.start:last-child{border-bottom:0}
.start .name{font-family:var(--display);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em}
.start .desc{font-size:.86rem;color:var(--ash);margin-top:4px}
.start .price{font-family:var(--mono);font-size:13px;color:var(--blood);white-space:nowrap;letter-spacing:.04em}
.cside .ig{margin-top:30px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;color:var(--ash);text-transform:uppercase}
.cside .ig:hover{color:var(--bone)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:0;padding:clamp(48px,7vw,80px) 0 40px;position:relative;z-index:10}
.foot{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
.foot img{height:30px;margin-bottom:18px}
.foot .col p{color:var(--ash);font-size:.9rem;max-width:34ch}
.foot nav{flex-direction:column;align-items:flex-start;gap:12px}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:46px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ash-dim);text-transform:uppercase}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,3,4,.92);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:var(--inset)}
.lightbox.open{display:flex;animation:fade .3s ease both}
.lb-inner{width:min(1100px,100%);}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:14px;padding:30px}
.lb-empty .eyebrow{justify-content:center}
.lb-empty p{color:var(--ash);font-size:.95rem;max-width:38ch;margin:0 auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.lb-bar h3{font-size:1.2rem}
.lb-close{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ash);
  text-transform:uppercase;border:1px solid var(--line);border-radius:30px;padding:9px 16px;transition:all .25s}
.lb-close:hover{color:var(--bone);border-color:var(--blood)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto}
  .bloom,.grain{animation:none}
  .rv{opacity:1;transform:none}
}

/* ============ viewfinder fade at footer (prevents HUD / footer overlap) ============ */
.viewfinder{transition:opacity .55s var(--ease)}
body.at-footer .viewfinder{opacity:0}
body.at-footer .frame-shade{opacity:0;transition:opacity .55s var(--ease)}

/* ============ responsive ============ */
/* tablet */
@media(max-width:900px){
  .hero-row{gap:32px}
  .bridge{gap:30px}
}
/* mobile */
@media(max-width:640px){
  body{font-size:16px}
  .hero{min-height:auto;padding-top:118px;padding-bottom:64px}
  .hero-row{flex-direction:column;align-items:flex-start;gap:30px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 150px;justify-content:center}
  .reel{width:100%}
  .scrollcue{display:none}
  .block-head h2{max-width:none}
  .bridge{flex-direction:column;align-items:flex-start}
  .bridge .btn{width:100%;justify-content:center}
  .bridge h3{max-width:none}
  .foot{gap:30px}
  .foot .col p{max-width:none}
  .lb-bar{flex-wrap:wrap;gap:12px}
  .start{flex-wrap:wrap;gap:6px}
}
/* small phones */
@media(max-width:520px){
  header{padding:13px 14px}
  .brand img{height:22px}
  nav{gap:11px}
  nav a{font-size:10px;letter-spacing:.1em}
  nav a.ext{padding:5px 10px}
  .btn{padding:14px 20px;font-size:11.5px}
  .hud.l{font-size:9.5px}
}
@media(max-width:380px){
  nav{gap:8px}
  nav a{font-size:9.5px;letter-spacing:.06em}
  .brand img{height:20px}
}