/* ═══════════════════════════════════════
   SPARKUP CREATIVE — SHARED STYLESHEET
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Clash+Display:wght@300;400;500;600;700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  --lime:       #C8FF00;
  --lime-30:    rgba(200,255,0,0.30);
  --lime-20:    rgba(200,255,0,0.20);
  --lime-12:    rgba(200,255,0,0.12);
  --lime-06:    rgba(200,255,0,0.06);
  --bg:         #060806;
  --bg1:        #090B07;
  --bg2:        #0C0F09;
  --bg3:        #0F120B;
  --surface:    rgba(255,255,255,0.035);
  --border:     rgba(255,255,255,0.07);
  --border-lime:rgba(200,255,0,0.20);
  --text:       #DEE8D4;
  --muted:      rgba(222,232,212,0.50);
  --dim:        rgba(222,232,212,0.22);
  --red:        #FF3C3C;
  --F1: 'Bebas Neue', sans-serif;
  --F2: 'Clash Display', sans-serif;
  --F3: 'DM Mono', monospace;
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--F2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-thumb { background: var(--lime); }

/* ── CUSTOM CURSOR ─────────────────────────── */
#cur-dot, #cur-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
}
#cur-dot  { width:6px; height:6px; background:var(--lime); box-shadow:0 0 10px var(--lime); }
#cur-ring { width:38px; height:38px; border:1.5px solid rgba(200,255,0,0.55); transition:width .25s,height .25s; }
body.hovering #cur-ring { width:56px; height:56px; }

/* ── PRELOADER ─────────────────────────────── */
#preloader {
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
}
.pre-wordmark {
  font-family:var(--F1);
  font-size:clamp(52px,8vw,100px);
  letter-spacing:0.12em;
  color:var(--text);
  overflow:hidden;
}
.pre-wordmark .hl { color:var(--lime); }
.pre-track {
  width:220px; height:1px;
  background:rgba(255,255,255,0.08);
  overflow:hidden; position:relative;
}
.pre-fill {
  position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  animation:preLoad 1.6s var(--ease-out) forwards;
}
.pre-status {
  font-family:var(--F3); font-size:9px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); animation:blink 1s step-end infinite;
}
@keyframes preLoad { 0%{left:-100%} 100%{left:0%} }
@keyframes blink   { 50%{opacity:0} }

/* ── NAV ───────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0;
  z-index:800; height:var(--nav-h);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 56px;
  background:rgba(6,8,6,0.72);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  transition:border-color .4s;
}
#nav.active { border-color:var(--border-lime); }

.nav-logo {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo-icon {
  width:32px; height:32px; border-radius:50%;
  background:var(--lime);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.logo-icon::after {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--lime);
  animation:pingOut 2.2s ease-out infinite;
}
.logo-icon svg { width:15px; height:15px; fill:var(--bg); }
@keyframes pingOut {
  0%{transform:scale(1);opacity:.7} 100%{transform:scale(2);opacity:0}
}
.logo-text {
  font-family:var(--F1); font-size:20px;
  letter-spacing:.1em; color:var(--text);
}
.logo-text em { color:var(--lime); font-style:normal; }

.nav-links {
  display:flex; align-items:center; gap:40px; list-style:none;
}
.nav-links a {
  font-family:var(--F3); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0; right:0; height:1px;
  background:var(--lime); transform:scaleX(0);
  transform-origin:left; transition:transform .25s var(--ease-out);
}
.nav-links a:hover { color:var(--lime); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a.active { color:var(--lime); }

.nav-cta {
  font-family:var(--F1); font-size:14px; letter-spacing:.1em;
  background:var(--lime); color:var(--bg);
  padding:10px 28px; text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 0 24px rgba(200,255,0,0.2);
}
.nav-cta::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0.15);
  transform:translateX(-101%);
  transition:transform .3s var(--ease-out);
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(200,255,0,0.4); }
.nav-cta:hover::after { transform:translateX(0); }

/* Hamburger (mobile) */
.nav-ham {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:4px;
}
.nav-ham span {
  display:block; width:24px; height:1.5px;
  background:var(--text); transition:.3s;
}
.nav-ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-ham.open span:nth-child(2) { opacity:0; }
.nav-ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav drawer */
.nav-drawer {
  position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(6,8,6,0.97);
  backdrop-filter:blur(40px);
  border-bottom:1px solid var(--border);
  padding:32px 28px 40px;
  transform:translateY(-110%);
  transition:transform .4s var(--ease-out);
  z-index:799;
}
.nav-drawer.open { transform:translateY(0); }
.nav-drawer ul { list-style:none; display:flex; flex-direction:column; gap:0; }
.nav-drawer ul li a {
  display:block;
  font-family:var(--F1); font-size:36px; letter-spacing:.06em;
  color:var(--muted); text-decoration:none;
  padding:12px 0; border-bottom:1px solid var(--border);
  transition:color .2s;
}
.nav-drawer ul li a:hover { color:var(--lime); }
.nav-drawer .drawer-cta {
  margin-top:28px;
  display:inline-block;
  font-family:var(--F1); font-size:18px; letter-spacing:.1em;
  background:var(--lime); color:var(--bg);
  padding:16px 40px; text-decoration:none;
}

/* ── FOOTER ────────────────────────────────── */
#footer {
  position:relative; z-index:1;
  background:var(--bg1);
  border-top:1px solid var(--border);
  padding:64px 56px 32px;
}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid var(--border);
}
.ft-brand {}
.ft-brand .logo-text { font-family:var(--F1); font-size:28px; letter-spacing:.1em; }
.ft-brand .logo-text em { color:var(--lime); font-style:normal; }
.ft-brand p {
  font-size:13px; color:var(--muted);
  line-height:1.75; margin-top:16px;
  font-weight:300; max-width:280px;
}
.ft-tagline {
  display:inline-block; margin-top:20px;
  font-family:var(--F3); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime);
}
.footer-col h4 {
  font-family:var(--F3); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-bottom:20px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a {
  font-size:13.5px; color:var(--muted);
  text-decoration:none;
  transition:color .2s, padding-left .2s;
  display:block;
}
.footer-col ul a:hover { color:var(--lime); padding-left:6px; }
.footer-col .ft-contact p {
  font-size:12.5px; color:var(--muted); line-height:2;
  font-weight:300;
}
.footer-col .ft-contact a { color:var(--lime); font-size:12.5px; }
.footer-bottom {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap;
  gap:16px; padding-top:28px;
}
.footer-copy {
  font-family:var(--F3); font-size:10px;
  letter-spacing:.1em; color:var(--dim);
}
.footer-socials { display:flex; gap:16px; }
.footer-socials a {
  width:34px; height:34px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--muted);
  transition:border-color .2s, color .2s, transform .2s;
}
.footer-socials a:hover { border-color:var(--lime); color:var(--lime); transform:translateY(-3px); }
.footer-socials svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }

/* ── SHARED SECTION ELEMENTS ───────────────── */
.page-body { padding-top:var(--nav-h); }

.tag {
  display:inline-block;
  font-family:var(--F3); font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--lime); margin-bottom:14px;
}
.tag-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--F3); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime); background:var(--lime-06);
  border:1px solid var(--border-lime);
  padding:7px 18px; border-radius:100px;
  margin-bottom:28px;
}
.badge-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--lime); animation:blink 1.2s step-end infinite;
}

.section-h {
  font-family:var(--F1);
  font-size:clamp(48px,7vw,100px);
  line-height:.92; letter-spacing:.02em;
  color:var(--text);
}
.section-h .hl { color:var(--lime); }
.section-h .dim { color:var(--dim); }

.section-sub {
  font-size:clamp(14px,1.6vw,17px);
  color:var(--muted); line-height:1.75;
  font-weight:300; margin-top:18px;
}

/* ── BUTTONS ───────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--F1); letter-spacing:.1em;
  font-size:15px; padding:14px 38px;
  text-decoration:none;
  position:relative; overflow:hidden;
  cursor:none; transition:transform .3s var(--ease-out), box-shadow .3s;
}
.btn-lime { background:var(--lime); color:var(--bg); box-shadow:0 0 32px rgba(200,255,0,.25); }
.btn-lime:hover { box-shadow:0 0 60px rgba(200,255,0,.45); }
.btn-outline { border:1px solid rgba(255,255,255,.12); color:var(--text); }
.btn-outline:hover { border-color:var(--border-lime); color:var(--lime); }
.btn::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.12);
  transform:translateX(-101%);
  transition:transform .3s var(--ease-out);
}
.btn:hover { transform:translateY(-3px); }
.btn:hover::before { transform:translateX(0); }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── MAGNETIC BUTTON wrapper ───────────────── */
.mag { display:inline-block; }

/* ── REVEAL ANIMATIONS ─────────────────────── */
.rv { opacity:0; transform:translateY(50px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv.lft { transform:translateX(-50px); }
.rv.rgt { transform:translateX(50px); }
.rv.scl { transform:scale(.9); }
.rv.visible { opacity:1; transform:none; }

/* ── PAGE HERO BANNER ──────────────────────── */
.page-hero {
  position:relative; overflow:hidden;
  min-height:52vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:80px 52px 72px;
  border-bottom:1px solid var(--border);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, var(--lime-06) 0%, transparent 100%);
  pointer-events:none;
}
.ph-bg-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(200,255,0,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(200,255,0,.04) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 100%, black 0%, transparent 100%);
}
.page-hero .inner { position:relative; z-index:2; }
.page-hero .section-h { margin-top:10px; }

/* ── MARQUEE ───────────────────────────────── */
.marquee-bar {
  overflow:hidden; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg1); padding:13px 0;
}
.mq-track { display:flex; width:max-content; animation:mqScroll 28s linear infinite; }
.mq-item {
  display:flex; align-items:center; gap:14px;
  padding:0 32px;
  font-family:var(--F3); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.mq-item .star { color:var(--lime); }
@keyframes mqScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── GRID NOISE LAYER ──────────────────────── */
.noise-layer {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:overlay;
}

/* ── MISC UTILS ────────────────────────────── */
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.container { max-width:1180px; margin:0 auto; }
.line-sep { width:100%; height:1px; background:var(--border); margin:80px 0; }

/* ── MOBILE ────────────────────────────────── */
@media (max-width:960px) {
  #nav { padding:0 20px; }
  .nav-links, .nav-cta { display:none; }
  .nav-ham { display:flex; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .split-grid { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:600px) {
  #footer { padding:40px 20px 24px; }
  .footer-top { grid-template-columns:1fr; }
  .page-hero { padding:60px 20px 52px; }
}

/* ── GLOBAL BACKGROUND CANVAS INTEGRATION ─────────────────
   All sections get a semi-transparent bg so the particle
   network canvas underneath bleeds through subtly.
──────────────────────────────────────────────────────────── */
.page-body { position: relative; z-index: 1; }

/* Give every section a very slightly transparent bg */
section, #hero, .page-hero, .marquee-bar,
#intro, #svc-preview, #stats-strip, #showreel,
#team-preview, #home-cta, #services-main,
#process, #faq, #about-hero, #story,
#team-section, #culture, #contact-main,
#locations, #footer {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

/* Re-apply the dark backgrounds as semi-transparent overlays
   so the particle canvas still glows through slightly */
#intro, #showreel, #faq, #contact-main { background: rgba(6,8,6,0.82) !important; }
#svc-preview, #process, #team-section, #story { background: rgba(9,11,7,0.85) !important; }
#stats-strip, #home-cta, #about-hero { background: rgba(6,8,6,0.75) !important; }
#team-preview, #culture, #locations { background: rgba(12,15,9,0.86) !important; }
.page-hero { background: rgba(6,8,6,0.80) !important; }
.marquee-bar { background: rgba(9,11,7,0.90) !important; }
#footer { background: rgba(9,11,7,0.94) !important; }

/* Ensure hero canvas still sits above bg canvas */
#hero-canvas, #ah-canvas { z-index: 1; }
.hero-vignette, .ah-overlay { z-index: 2; }
.hero-content, .ah-content { z-index: 3; }

/* ── LOGO GLOW PULSE ─────────────────────────────────────── */
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 6px #C8FF00); }
  50%       { filter: drop-shadow(0 0 18px #C8FF00); }
}