/* ESP Films — Studiogram treatment + scanline/barcode layer (teal + orange) */
:root {
  --bg-dark: #080F0E;
  --bg-dark2: #0D1B1A;
  --teal: #0E9C95;
  --teal-bright: #2FD4CB;
  --orange: #E8452C;
  --light: #F1FAF8;
  --light-alt: #E2F3EF;
  --ink: #123A37;
  --on-dark: #EAF6F4;
  --muted-dark: #7FA39F;
  --muted-light: #5F807C;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(8, 15, 14, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--on-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, iframe { max-width: 100%; display: block; }
a { color: var(--teal-bright); text-decoration: none; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: 'Space Mono', monospace; }

/* ---------- Scanline texture ---------- */
.scan { position: relative; }
.scan > .scanfx {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(234,246,244,0.035) 0 1px, transparent 1px 4px);
}
.on-light.scan > .scanfx {
  background: repeating-linear-gradient(0deg, rgba(18,58,55,0.05) 0 1px, transparent 1px 4px);
}
.scan > .container { position: relative; z-index: 2; }

/* ---------- Barcode strip device ---------- */
.barcode {
  height: 32px;
  background: repeating-linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 5px,
    currentColor 5px 6px, transparent 6px 12px,
    currentColor 12px 16px, transparent 16px 19px,
    currentColor 19px 20px, transparent 20px 27px,
    currentColor 27px 29px, transparent 29px 31px,
    currentColor 31px 36px, transparent 36px 41px);
  opacity: 0.8;
  color: rgba(234,246,244,0.25);
}
.on-light .barcode { color: rgba(18,58,55,0.3); }

/* ---------- Technical annotation ---------- */
.tech {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-dark);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tech .plus { color: var(--teal-bright); }
.rec {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); animation: blink 1.6s steps(2) infinite; flex-shrink: 0;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- Registration corners ---------- */
.reg { position: relative; }
.reg::before, .reg::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 1.5px solid var(--teal); z-index: 3; pointer-events: none;
}
.reg::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.reg::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- Header ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.3s;
  background: linear-gradient(rgba(8,15,14,0.85), transparent);
}
header.scrolled { background: rgba(8,15,14,0.92); backdrop-filter: blur(12px); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.wordmark { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--on-dark); }
.wordmark .dot { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a { color: var(--on-dark); font-size: 0.95rem; font-weight: 500; opacity: 0.85; }
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--teal-bright); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--on-dark); font-size: 1.7rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; transition: all 0.25s ease;
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-bright); color: var(--bg-dark); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(234,246,244,0.3); color: var(--on-dark); background: transparent; }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-sm { padding: 10px 22px; font-size: 0.85rem; }
.btn .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.2);
  font-size: 1rem; line-height: 1;
}
.on-light .btn-ghost { border-color: rgba(18,58,55,0.3); color: var(--ink); }
.on-light .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Typography ---------- */
h1, h2, .acc-title, .stats .num, .big-stat .huge {
  font-family: 'Archivo', 'Inter', sans-serif;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal-bright); margin-bottom: 18px;
}
.eyebrow::before { content: "+"; color: var(--orange); font-weight: 700; }
.on-light .eyebrow { color: var(--teal); }
h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 900; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 900; }
h2 .dot, h1 .dot { color: var(--orange); }
h3 { font-size: 1.2rem; font-weight: 700; }
.lead { font-size: 1.18rem; color: var(--muted-dark); max-width: 660px; margin-top: 22px; }
.on-light .lead, .on-light p { color: var(--muted-light); }
.on-light h1, .on-light h2, .on-light h3 { color: var(--ink); }

/* ---------- Sections ---------- */
section { padding: 110px 0; position: relative; }
.on-light { background: var(--light); color: var(--ink); }
.on-light-alt { background: var(--light-alt); }
.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head p { color: var(--muted-dark); margin-top: 16px; font-size: 1.05rem; }
.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }

/* ---------- Hero ---------- */
.hero {
  min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 150px 0 0; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 88% 15%, rgba(14,156,149,0.35), transparent 62%),
    radial-gradient(680px 440px at 2% 82%, rgba(232,69,44,0.13), transparent 55%),
    var(--bg-dark);
}
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.hero-sub { color: var(--muted-dark); font-size: 1.12rem; max-width: 540px; margin-top: 24px; }
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hero-side { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.data-card {
  border: 1px solid rgba(234,246,244,0.14); padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.data-card .k { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted-dark); text-transform: uppercase; }
.data-card .v { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--teal-bright); }
.data-card .v.or { color: var(--orange); }
.data-card .v.tc { font-family: 'Space Mono', monospace; font-size: 1.05rem; }

/* ghost wordmark with scanline fill */
.ghost-band { overflow: hidden; margin-top: 70px; line-height: 0.78; pointer-events: none; }
.ghost {
  font-family: 'Archivo', sans-serif;
  font-weight: 900; letter-spacing: -0.04em; white-space: nowrap;
  font-size: clamp(6rem, 19vw, 19rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(234,246,244,0.13);
  background: repeating-linear-gradient(0deg, rgba(234,246,244,0.14) 0 2px, rgba(234,246,244,0.02) 2px 6px);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- Ticker band ---------- */
.ticker { border-top: 1px solid rgba(234,246,244,0.12); border-bottom: 1px solid rgba(234,246,244,0.12); padding: 14px 0; overflow: hidden; }
.ticker-inner {
  display: flex; gap: 56px; white-space: nowrap;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted-dark);
  animation: slide 30s linear infinite; width: max-content;
}
.ticker-inner b { color: var(--teal-bright); font-weight: 400; }
.ticker-inner i { color: var(--orange); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Word reveal ---------- */
.reveal-words span { color: rgba(234,246,244,0.22); transition: color 0.5s ease; }
.reveal-words span.lit { color: var(--on-dark); }
.on-light .reveal-words span { color: rgba(18,58,55,0.25); }
.on-light .reveal-words span.lit { color: var(--ink); }

/* ---------- Appear effects ---------- */
.appear { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s ease; }
.appear.in { opacity: 1; transform: none; }

/* ---------- Stats (bordered grid) ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(234,246,244,0.12); border: 1px solid rgba(234,246,244,0.12);
  margin-top: 70px;
}
.stats > div { background: var(--bg-dark); padding: 30px 26px; }
.stats .num {
  font-size: clamp(2.4rem, 4.8vw, 3.8rem); font-weight: 900; letter-spacing: -0.04em;
  color: var(--teal-bright); line-height: 1;
}
.stats > div:nth-child(2) .num { color: var(--orange); }
.stats .label {
  font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-dark); margin-top: 12px;
}

/* ---------- Accordion services ---------- */
.acc { border-radius: var(--radius); overflow: hidden; display: grid; gap: 10px; }
.acc-item { background: var(--teal); border-radius: var(--radius); overflow: hidden; }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 28px;
  padding: 30px 34px; cursor: pointer; background: none; border: none;
  font-family: inherit; text-align: left; color: #fff;
}
.acc-num {
  flex-shrink: 0; background: var(--light); color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-weight: 700; font-size: 1.05rem; padding: 10px 16px; border-radius: 8px;
}
.acc-title { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.acc-icon { font-size: 1.9rem; font-weight: 300; line-height: 1; transition: transform 0.3s; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-item.open { background: var(--orange); }
.acc-item.open .acc-num { color: var(--orange); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; }
.acc-body p { padding: 0 34px 32px; color: rgba(255,255,255,0.94); font-size: 1.05rem; max-width: 820px; }

/* ---------- Work cards ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
.work-grid .wide { grid-column: 1 / -1; }
.bracket { position: relative; padding: 18px; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--teal); transition: all 0.3s;
}
.bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }
.bracket:hover::before { top: -6px; left: -6px; border-color: var(--orange); }
.bracket:hover::after { bottom: -6px; right: -6px; border-color: var(--orange); }
.idx {
  position: absolute; top: -6px; left: 18px; z-index: 4;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.15em;
  color: var(--orange);
}
.video-thumb {
  position: relative; aspect-ratio: 16/9; background: var(--bg-dark2);
  cursor: pointer; overflow: hidden; border-radius: 10px;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.video-thumb:hover img { transform: scale(1.04); }
.video-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(8,15,14,0.12) 0 1px, transparent 1px 4px);
}
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,15,14,0.25); transition: background 0.2s; z-index: 2;
}
.video-thumb:hover .play-badge { background: rgba(8,15,14,0.4); }
.play-badge span {
  background: rgba(241,250,248,0.95); color: var(--ink);
  padding: 11px 24px; border-radius: 999px; font-weight: 600; font-size: 0.85rem;
}
.work-meta { padding: 20px 4px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.work-meta h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
.work-meta .tc-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--teal); white-space: nowrap; }
.work-meta p { color: var(--muted-light); font-size: 0.95rem; margin-top: 6px; }

/* compact grid for library */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.video-grid h3 { font-size: 1.02rem; padding: 14px 4px 0; }

/* ---------- Clients ---------- */
.client-row { display: flex; flex-wrap: wrap; gap: 22px 60px; align-items: center; margin-top: 24px; }
.client-row span { color: var(--muted-dark); font-weight: 700; font-size: 1.2rem; opacity: 0.6; letter-spacing: 0.02em; }
.on-light .client-row span { color: var(--muted-light); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 30px; }
.card h3 { margin-bottom: 10px; color: var(--ink); }
.card p { color: var(--muted-light); font-size: 0.98rem; }
.card-dark { background: var(--bg-dark2); }
.card-dark h3 { color: var(--on-dark); }
.card-dark p { color: var(--muted-dark); }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.process .step-num { font-family: 'Space Mono', monospace; color: var(--teal-bright); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em; }
.process h3 { margin: 10px 0 6px; font-size: 1.08rem; }
.process p { color: var(--muted-dark); font-size: 0.93rem; }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta-glow {
  background: radial-gradient(700px 420px at 50% 100%, rgba(232,69,44,0.16), transparent 60%), var(--bg-dark);
}
.cta .lead { margin-left: auto; margin-right: auto; }
.cta .btn { margin-top: 36px; }
.cta .under-btn { margin-top: 22px; color: var(--muted-dark); font-size: 0.95rem; }

/* ---------- Forms ---------- */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
form .field { margin-bottom: 20px; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 7px; color: var(--ink); }
label .req { color: var(--orange); }
input, select, textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid rgba(18,58,55,0.16); background: #fff;
  font-family: inherit; font-size: 0.97rem; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,156,149,0.15);
}
textarea { min-height: 150px; resize: vertical; }
.direct-details { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 30px; }
.direct-details h3 { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin: 24px 0 6px; }
.direct-details h3:first-child { margin-top: 0; }
.direct-details p, .direct-details a { color: var(--ink); font-size: 1rem; }

/* ---------- Footer ---------- */
footer { background: var(--bg-dark); padding: 90px 0 0; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer-grid h4 { font-family: 'Space Mono', monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 18px; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 11px; }
.footer-grid a { color: var(--on-dark); font-size: 0.95rem; opacity: 0.85; }
.footer-grid a:hover { opacity: 1; color: var(--teal-bright); }
.footer-head { font-weight: 700; font-size: 1.2rem; margin-bottom: 12px; }
.footer-contact { color: var(--muted-dark); font-size: 0.95rem; }
.footer-legal {
  border-top: 1px solid rgba(234,246,244,0.1); padding: 28px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: var(--muted-dark); font-size: 0.82rem;
}
.footer-ghost { line-height: 0.75; margin-top: 20px; }

/* ---------- 404 ---------- */
.page-404 { min-height: 70vh; display: flex; align-items: center; text-align: center; }
.page-404 .container { max-width: 680px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 190px 0 90px;
  background:
    radial-gradient(900px 600px at 85% 0%, rgba(14,156,149,0.32), transparent 60%),
    radial-gradient(500px 340px at 0% 100%, rgba(232,69,44,0.1), transparent 55%),
    var(--bg-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .video-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  section { padding: 72px 0; }
  .video-grid, .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .acc-head { padding: 22px 20px; gap: 16px; }
  .acc-body p { padding: 0 20px 24px; }
  .nav-links {
    display: none; position: absolute; top: 80px; left: 0; right: 0;
    background: var(--bg-dark2); flex-direction: column; padding: 28px; gap: 22px;
    border-bottom: 1px solid rgba(234,246,244,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Work page — film count caption under section heads */
.section-head .count { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-light); margin-top: 6px; }
.on-light .section-head .count { color: var(--muted-light); }

/* Footer barcode wordmark sign-off */
.footer-wordmark { width: 100%; max-width: 820px; margin: 40px auto 0; display: block; opacity: 0.92; }
@media (max-width: 640px){ .footer-wordmark { margin-top: 28px; } }

/* ============================================================
   DECAL OVERHAUL v2 — dark charcoal + teal/orange, ZERO white.
   Flips the former .on-light system to dark decal panels and
   drops the barcode camera in as a ghost background layer.
   (Ref: techwear/decal-sheet posters — dark ground, one accent.)
   ============================================================ */
:root{
  --panel: #0C1A18;      /* teal-tinted charcoal (former "light" sections) */
  --panel-alt: #0F211E;
  --hair: rgba(47,212,203,0.20);
}

/* former light sections -> dark decal panels */
.on-light{ background: var(--panel); color: var(--on-dark); }
.on-light-alt{ background: var(--panel-alt); }
.on-light h1, .on-light h2, .on-light h3{ color: var(--on-dark); }
.on-light .lead, .on-light p, .on-light .section-head p{ color: var(--muted-dark); }
.on-light .eyebrow{ color: var(--teal-bright); }
.on-light .barcode{ color: rgba(47,212,203,0.22); }
.on-light.scan > .scanfx{ background: repeating-linear-gradient(0deg, rgba(234,246,244,0.04) 0 1px, transparent 1px 4px); }
.on-light .client-row span{ color: var(--muted-dark); }
.on-light .reveal-words span{ color: rgba(234,246,244,0.20); }
.on-light .reveal-words span.lit{ color: var(--on-dark); }
.on-light .section-head .count{ color: var(--muted-dark); }
.on-light .work-meta p{ color: var(--muted-dark); }
.on-light .btn-ghost{ border-color: rgba(234,246,244,0.3); color: var(--on-dark); }
.on-light .btn-ghost:hover{ border-color: var(--orange); color: var(--orange); }

/* cards -> dark panels with teal hairline (kills white cards) */
.card{ background: var(--bg-dark); border: 1px solid var(--hair); box-shadow: none; }
.card h3{ color: var(--on-dark); }
.card p{ color: var(--muted-dark); }

/* accordion number chip -> dark + teal ink (was white) */
.acc-num{ background: var(--bg-dark); color: var(--teal-bright); }
.acc-item.open .acc-num{ background: var(--bg-dark); color: var(--orange); }

/* video play pill -> teal (was white) */
.play-badge span{ background: var(--teal); color: #fff; }

/* forms -> dark fields (kills white form + details panel) */
label{ color: var(--on-dark); }
input, select, textarea{ background: var(--bg-dark2); border-color: var(--hair); color: var(--on-dark); }
input::placeholder, textarea::placeholder{ color: var(--muted-dark); }
input:focus, select:focus, textarea:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,156,149,0.20); }
select option{ background: var(--bg-dark2); color: var(--on-dark); }
.direct-details{ background: var(--bg-dark2); border: 1px solid var(--hair); box-shadow: none; }
.direct-details p, .direct-details a{ color: var(--on-dark); }
.direct-details h3{ color: var(--teal-bright); }

/* ---- barcode camera as ghost background layer ---- */
.hero{ position: relative; }
.hero::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 6%; width: 72%; height: 82%;
  background: url("assets/espfilms-camera-ghost.png") no-repeat right center;
  background-size: contain; opacity: 0.16;
}
.hero .container, .hero .ghost-band{ position: relative; z-index: 2; }

.page-hero{ position: relative; overflow: hidden; }
.page-hero::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -10%; top: 14%; width: 58%; height: 128%;
  background: url("assets/espfilms-camera-ghost.png") no-repeat right center;
  background-size: contain; opacity: 0.12;
}
.page-hero .container{ position: relative; z-index: 2; }

/* ---- visible full-width camera band (dropped into Home) ---- */
.camera-band{
  background: var(--teal); position: relative; overflow: hidden;
  padding: 0; border-top: 1px solid rgba(8,15,14,0.25); border-bottom: 1px solid rgba(8,15,14,0.25);
}
.camera-band img{ width: 100%; display: block; }
.camera-band .band-tag{
  position: absolute; left: 28px; bottom: 20px; z-index: 2;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #08110E;
}
.camera-band .band-tag .plus{ color: var(--orange); }

/* ---- ghost numeral decal on section heads ---- */
.section-head{ position: relative; }
.section-head[data-ghost]::before{
  content: attr(data-ghost); position: absolute; right: 0; top: -46px; z-index: 0;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 8rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(47,212,203,0.12);
  pointer-events: none;
}

/* ============================================================
   DECAL PUSH v3 — make the camera visible + poster density
   (echo titles, crosshairs, ghost numerals, vertical captions,
    chevrons — refs: HYPERION / RENDESVOUS / cyber-poster)
   ============================================================ */

/* --- CAMERA: bring it forward (was a faint ghost) --- */
.hero::after{ opacity: 0.42; right: -5%; top: 2%; width: 78%; height: 90%; }
.page-hero::after{ opacity: 0.55; right: -7%; top: 4%; width: 62%; height: 140%; }
@media (max-width: 960px){
  .hero::after{ opacity: 0.24; width: 100%; }
  .page-hero::after{ opacity: 0.30; width: 90%; }
}

/* --- echo on display titles (repeated-title look) --- */
.hero h1, .page-hero h1{
  text-shadow: 6px 7px 0 rgba(47,212,203,0.08), 13px 15px 0 rgba(47,212,203,0.04);
}

/* --- vertical running side-caption on heroes --- */
.hero::before, .page-hero::before{
  content: "ESP · FILMS — MMXXV · 25 YRS IN FRAMES · DELHI · DEHRADUN · MUMBAI";
  position: absolute; left: 16px; top: 0; bottom: 0; z-index: 2;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted-dark); opacity: 0.55; display: flex; align-items: center; pointer-events: none;
}
@media (max-width: 1100px){ .hero::before, .page-hero::before{ display: none; } }

/* --- crosshair "+" mark on every section-head --- */
.section-head{ position: relative; padding-left: 28px; }
.section-head::after{
  content: "+"; position: absolute; left: 0; top: 0; z-index: 1;
  font-family: 'Space Mono', monospace; color: var(--teal-bright); opacity: 0.6; font-size: 18px; line-height: 1;
}
.section-head > *{ position: relative; z-index: 2; }

/* --- big ghost numeral behind section-heads (data-ghost) --- */
.section-head[data-ghost]::before{
  content: attr(data-ghost); position: absolute; right: 0; top: -54px; z-index: 0;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(5rem, 12vw, 9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(47,212,203,0.14);
  pointer-events: none; letter-spacing: -0.03em;
}

/* --- scattered crosshair sparkles in dark sections --- */
.spark{ position: absolute; font-family: 'Space Mono', monospace; color: var(--teal-bright); opacity: 0.45; pointer-events: none; z-index: 1; font-size: 20px; }
.spark.o{ color: var(--orange); }

/* --- chevron device --- */
.chev{ color: var(--orange); letter-spacing: -0.08em; font-weight: 700; }

/* --- camera band: add framing caption + chevrons --- */
.camera-band .band-tag{ display: flex; gap: 14px; align-items: center; }
.camera-band .band-tag .chev{ color: var(--orange); }

/* ============================================================
   REFINE v4 — dial the decal back to SUBTLE (was too loud)
   ============================================================ */
/* camera band: contained & elegant (was full-bleed / giant crop) */
.camera-band{ background: var(--teal); padding: 56px 0; }
.camera-band img{ width: auto; max-width: 1000px; max-height: 440px; margin: 0 auto; display: block; }
.camera-band .band-tag{ position: static; justify-content: center; text-align: center; margin-top: 20px; }
@media (max-width: 640px){ .camera-band img{ max-width: 90%; } }

/* camera ghost watermark: present but quiet */
.hero::after{ opacity: 0.20; }
.page-hero::after{ opacity: 0.24; }
@media (max-width: 960px){ .hero::after, .page-hero::after{ opacity: 0.12; } }

/* decal density: quieter */
.hero h1, .page-hero h1{ text-shadow: 4px 5px 0 rgba(47,212,203,0.05); }
.section-head[data-ghost]::before{ -webkit-text-stroke: 1px rgba(47,212,203,0.07); font-size: clamp(3.6rem, 8vw, 6.5rem); top: -42px; }
.hero::before, .page-hero::before{ opacity: 0.38; }
.section-head::after{ opacity: 0.4; }

/* footer wordmark: smaller, softer sign-off */
.footer-wordmark{ max-width: 620px; opacity: 0.68; }

/* real detailed camera: match band bg to the render's teal (#00BEB5) */
.camera-band{ background: #00BEB5; }