/* =========================================================
   LTF.STUDIOS — design tokens
   Bold & cinematic. Dark viewfinder aesthetic.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:        #0b0a08;
  --bg-elev:   #16130f;
  --bg-elev-2: #1e1a14;
  --text:      #f3eee4;
  --text-dim:  #948c7e;
  --text-faint:#5c564a;
  --amber:     #e7a33e;
  --amber-dim: #8a6427;
  --red:       #d6402c;
  --line:      #2a251e;

  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --hud-inset: 18px;
}

@media (min-width: 900px){
  :root{ --hud-inset: 28px; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* subtle film grain */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 5;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background: var(--amber); color: var(--bg); }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.wrap{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 900px){
  .wrap{ padding: 0 48px; }
}

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

.display{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
}

/* =========================================================
   VIEWFINDER HUD — signature element, persists on every page
   ========================================================= */
.hud{
  position: fixed;
  inset: var(--hud-inset);
  z-index: 40;
  pointer-events: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.hud .corner{
  position:absolute;
  width: 22px; height: 22px;
  border-color: var(--amber-dim);
  border-style: solid;
  border-width: 0;
  opacity: 0.85;
}
.hud .corner.tl{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.hud .corner.tr{ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.hud .corner.bl{ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.hud .corner.br{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }

.hud .rec{
  position:absolute; top:0; left:34px;
  display:flex; align-items:center; gap:7px;
  text-transform:uppercase;
  color: var(--text-dim);
}
.hud .rec .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--red);
  animation: blink 1.6s step-start infinite;
  box-shadow: 0 0 6px var(--red);
}
@keyframes blink{ 50%{ opacity:0.15; } }

.hud .tc{
  position:absolute; top:0; right:34px;
  color: var(--text-dim);
}

.hud .tag{
  position:absolute; bottom:0; left:34px;
  color: var(--text-faint);
}

.hud .reel{
  position:absolute; bottom:0; right:34px;
  color: var(--text-faint);
}

@media (max-width: 640px){
  .hud{ font-size:9px; }
  .hud .tag{ display:none; }
}

/* =========================================================
   NAV
   ========================================================= */
header.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(11,10,8,0.92), rgba(11,10,8,0));
  padding: 26px 0 40px;
}
.nav-inner{
  max-width: 1220px;
  margin:0 auto;
  padding: 0 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand .mark{
  width:20px; height:16px;
  border:1px solid var(--amber);
  position:relative;
  flex-shrink:0;
}
.brand .mark::before{
  content:"";
  position:absolute; top:-1px; left:-1px; right:-1px;
  height:5px;
  background: repeating-linear-gradient(110deg, var(--amber) 0 3px, transparent 3px 6px);
}
nav.links{
  display:flex; gap:34px;
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
nav.links a{
  color: var(--text-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
nav.links a:hover, nav.links a[aria-current="page"]{
  color: var(--text);
  border-color: var(--amber);
}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color: var(--text);
  width:38px; height:34px; border-radius:2px;
  align-items:center; justify-content:center;
}
@media (max-width: 760px){
  .nav-inner{ padding: 0 24px; }
  nav.links{
    position:fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--bg-elev);
    border-left:1px solid var(--line);
    flex-direction:column; gap:0;
    padding: 90px 32px 32px;
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  nav.links.open{ transform: translateX(0); }
  nav.links a{ padding: 16px 0; border-bottom:1px solid var(--line); width:100%; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding: 15px 26px;
  border:1px solid var(--amber);
  color: var(--text);
  background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover{ background: var(--amber); color: var(--bg); }
.btn.solid{ background: var(--amber); color: var(--bg); }
.btn.solid:hover{ background: transparent; color: var(--text); }
.btn::after{ content:"\2192"; transition: transform .2s; }
.btn:hover::after{ transform: translateX(3px); }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
section{ position:relative; padding: 110px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom: 56px; max-width: 640px; }
.section-head .display{ font-size: clamp(34px, 5vw, 56px); margin-top:14px; }

footer{
  padding: 60px 0 90px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between;
  border-top: 1px solid var(--line);
}
footer a{ color: var(--text-dim); }
footer a:hover{ color: var(--amber); }

/* placeholder work tiles */
.placeholder-tile{ transition: border-color .25s; }
.placeholder-tile:hover{ border-color: var(--amber-dim) !important; }
.placeholder-tile .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9);
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--text-faint);
  display:flex; align-items:center; justify-content:center;
  opacity:0.6; transition: opacity .25s, transform .25s, border-color .25s;
}
.placeholder-tile:hover .play{ opacity:1; transform:translate(-50%,-50%) scale(1); border-color:var(--amber); }
.placeholder-tile .play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:11px solid var(--text-dim);
}
.placeholder-tile:hover .play::after{ border-left-color: var(--amber); }

.tile-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;
}

.video-tile{
  position:relative; aspect-ratio:4/5; overflow:hidden; display:block;
  background: var(--bg-elev); border:1px solid var(--line);
  transition: border-color .25s;
}
.video-tile:hover{ border-color: var(--amber-dim); }
.video-tile video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(0.9) brightness(0.85);
  transition: filter .3s, transform .5s;
}
.video-tile:hover video{ filter:saturate(1) brightness(1); transform: scale(1.03); }
.video-tile::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(11,10,8,0.85) 0%, rgba(11,10,8,0.1) 45%, rgba(11,10,8,0.35) 100%);
  pointer-events:none;
}
.video-tile .tile-label{
  position:absolute; bottom:16px; left:16px; z-index:2;
  font-family: var(--display); font-size:20px; text-transform:uppercase; letter-spacing:.02em;
}
.video-tile .play{ z-index:2; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filters button{
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--text-dim);
  padding:10px 18px; transition: all .2s;
}
.filters button:hover{ color:var(--text); border-color: var(--amber-dim); }
.filters button.active{ color:var(--bg); background:var(--amber); border-color:var(--amber); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr !important; gap:48px !important; }
  .contact-grid > div[style*="border-left"]{ border-left:none !important; padding-left:0 !important; border-top:1px solid var(--line); padding-top:36px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hud .dot{ animation:none; }
}