:root{
  --bg:#0a0909; --surface:#141313; --card:#1b1a1a; --text:#fff; --muted:#939598; --line:#2a2a2a; --brand:#c01313; --brand-600:#a61212;
  --glow: rgba(255,255,255,.45);
  --grey:#808080;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial; color:var(--text); line-height:1.6;
  background:
    radial-gradient(1200px 600px at 60% -10%, rgba(192,19,19,.16), transparent 55%),
    radial-gradient(900px 480px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 90% 25%, rgba(255,255,255,.04), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 20%),
    linear-gradient(180deg, #0a0a0a, #0a0909);
  isolation:isolate;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin:0 auto}

/* Header */
header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(10px);background:rgba(10,9,9,.7);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:20px}
.brandmark{width:min(240px,80vw);display:grid;place-items:center} /* desktop lock */
@media(max-width:600px){.brandmark{width:min(180px,70vw)}} /* mobile lock */
.brandmark img{width:100%;height:auto;object-fit:contain;animation:fadeUp .45s ease .05s both} /* faster fade, no hover */
.tagline{margin-left:auto;color:var(--grey);font-weight:700;text-align:right;max-width:520px;white-space:normal;line-height:1.2;font-size:clamp(12px,1.6vw,18px);display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.tagline{max-width:360px;line-height:1.3}}
@media(max-width:600px){.tagline{max-width:260px;line-height:1.35;font-size:14px}}

/* Hero */
.hero{padding:clamp(28px,5vw,60px) 0 28px}
.hero-inner{display:grid;gap:20px;justify-items:center;text-align:center}
h1.headline{color:var(--brand);font-size:clamp(28px,5.2vw,54px);line-height:1.08;margin:6px 0 6px}
.subhead{color:var(--muted);max-width:820px}

/* Social icons */
.social-icons{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:6px}
.icon{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:8px;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.icon svg{width:22px;height:22px;fill:var(--brand)}
.icon:hover{transform:scale(1.08); box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 6px 16px var(--glow)}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.trust .item{border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.trust .label{color:var(--muted);font-size:14px}
.trust .value{font-weight:700;font-size:18px}
@media(max-width:820px){.trust{grid-template-columns:1fr}}

/* Sections */
.section-tight{padding-top:clamp(28px,4vw,56px)}
.section{padding:clamp(40px,6vw,80px) 0}
.section h2{color:var(--brand);font-size:clamp(22px,3vw,34px);margin:0 0 12px}
.eyebrow{color:var(--muted);letter-spacing:.25em;text-transform:uppercase;font-size:12px}
.lede{color:var(--muted);max-width:800px}

/* Cards / form */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,28px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.quote{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media(max-width:980px){.quote{grid-template-columns:1fr}}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:720px){form .row{grid-template-columns:1fr}}
label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--brand);border-color:var(--brand)}
.actions{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:14px 18px;border-radius:12px;border:1px solid var(--brand);background:linear-gradient(180deg,var(--brand),var(--brand-600));color:#fff;font-weight:700;cursor:pointer;box-shadow:0 14px 40px rgba(192,19,19,.25);transition:transform .18s ease, box-shadow .18s ease, opacity .5s ease}
.btn:hover{transform:scale(1.03); box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 6px 16px var(--glow)}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none;color:var(--text)}
.btn.ghost:hover{transform:scale(1.03); box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 6px 16px var(--glow)}

/* Work grid */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:10px}
@media(max-width:820px){.work-grid{grid-template-columns:1fr;row-gap:8px;column-gap:10px}}
.tile{overflow:hidden;border-radius:16px;border:none;background:#0e0e0e}
.tile.reveal.in{transition:opacity .6s ease, transform .6s ease}
.thumb{display:grid;place-items:center;align-content:center}
.frame{width:100%;border:1px solid var(--brand);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));position:relative;overflow:hidden}
.frame-16x9{aspect-ratio:16/9; max-height:200px}
.frame-9x16{aspect-ratio:9/16}
.frame-1x1{aspect-ratio:1/1}
.frame .tag{position:absolute;bottom:10px;right:10px;background:var(--brand);color:#fff;border-radius:999px;padding:4px 8px;font-size:12px}
@media(max-width:820px){.frame-16x9{max-height:150px} .frame-9x16{max-height:240px}}
.tile:hover .frame{transform:scale(1.01)}
.tile:hover{box-shadow:0 12px 30px rgba(0,0,0,.35)}

.tile .meta{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.chip{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--muted)}

/* Capabilities chips to red */
.capabilities .chip{background:var(--brand);border-color:var(--brand);color:#fff}

/* About / stats */
.about{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center}
@media(max-width:980px){.about{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{text-align:center;border:1px solid var(--line);border-radius:16px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.stat .num{color:var(--brand);font-size:28px;font-weight:800}
.stat .cap{color:var(--muted);font-size:12px}

/* Footer */
footer{border-top:1px solid var(--line);padding:24px 0 56px;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr;text-align:center}}
.foot-cta{display:flex;gap:12px;flex-wrap:wrap}
.social{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);align-items:center}
.tiny{color:#777;font-size:12px;margin-top:18px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

/* === Cinematic Parallax Foreground Layers (mouse/scroll reactive) === */
.bg-parallax{position:fixed;inset:-10vh;z-index:-1;pointer-events:none;isolation:isolate}
.bg-parallax .layer{position:absolute;inset:-20vh;will-change:transform;filter:blur(28px)}
.bg-parallax .l-red{background:
  radial-gradient(40% 35% at 20% 20%, rgba(192,19,19,.16), transparent 60%),
  radial-gradient(28% 24% at 80% 30%, rgba(192,19,19,.10), transparent 65%)}
.bg-parallax .l-grey{background:
  radial-gradient(45% 30% at 70% 15%, rgba(255,255,255,.05), transparent 70%),
  radial-gradient(35% 28% at 30% 80%, rgba(255,255,255,.04), transparent 75%)}
.bg-parallax .l-cone{background:
  conic-gradient(from 0turn at 60% 25%, transparent 0 0.72turn, rgba(192,19,19,.06) 0.8turn 0.9turn, transparent 1turn);
  mix-blend-mode:screen;filter:blur(48px) saturate(105%);opacity:.85}

@media (prefers-reduced-motion: reduce){
  .bg-parallax .layer{transform:none !important}
}