/* ============================================================
   workwithbaco — GOTHAM EDITION
   Palette: void black, gunmetal, bat-signal yellow, storm blue
   ============================================================ */

:root {
  --black: #050505;
  --night: #0b0b0b;
  --gunmetal: #111111;
  --steel: #1a1a1a;
  --fog: #b7ab84;
  --ash: #e8e2cd;
  --white: #f7f3e6;
  --signal: #f5c518;
  --signal-dim: #b8940f;
  --storm: #c23b2e;
  --danger: #c23b2e;
  --font-display: "Bebas Neue", sans-serif;
  --font-serif: "Cinzel", serif;
  --font-body: "Oswald", sans-serif;
  --font-type: "Special Elite", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--ash);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--signal); color: var(--black); }

/* Subtle city texture over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 197, 24, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(194, 59, 46, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

section, footer, header { position: relative; z-index: 2; }

em { font-style: normal; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 3px;
  text-decoration: none;
  padding: 0.85rem 2.2rem;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.btn--signal {
  background: var(--signal);
  color: var(--black);
}
.btn--signal:hover {
  background: var(--white);
  box-shadow: 0 0 30px rgba(245, 197, 24, 0.45);
}

.btn--ghost {
  border-color: rgba(245, 197, 24, 0.45);
  color: var(--signal);
  background: rgba(245, 197, 24, 0.03);
}
.btn--ghost:hover {
  background: rgba(245, 197, 24, 0.12);
  box-shadow: 0 0 20px rgba(245, 197, 24, 0.2);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 4vw;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav.scrolled {
  background: rgba(5, 6, 7, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(245, 197, 24, 0.15);
  padding: 0.7rem 4vw;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--white);
}
.nav__logo em { color: var(--signal); }

.bat-icon { width: 48px; filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.5)); }

.nav__links { display: flex; gap: 2.2rem; }
.nav__links a {
  color: var(--fog);
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  transition: color 0.3s;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--signal);
  transition: width 0.3s;
}
.nav__links a:hover { color: var(--signal); }
.nav__links a:hover::after { width: 100%; }

.nav__cta { font-size: 0.85rem; padding: 0.6rem 1.5rem; }

.nav__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
.nav__burger span { width: 26px; height: 2px; background: var(--signal); display: block; transition: 0.3s; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(5, 6, 7, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  color: var(--ash);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 4px;
}
.mobile-menu a.btn--signal {
  color: var(--black);
  font-size: 1.3rem;
  margin-top: 1rem;
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 5vw 14rem;
  position: relative;
  overflow: hidden;
}

/* Bat signal in the sky */
.hero__signal {
  position: absolute;
  top: 0;
  right: 8%;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.signal-beam {
  width: 0;
  height: 38vh;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 38vh solid rgba(245, 197, 24, 0.05);
  filter: blur(2px);
  animation: beam-flicker 7s ease-in-out infinite;
}
.signal-circle {
  width: 150px;
  height: 150px;
  margin-top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.22), rgba(245, 197, 24, 0.05) 60%, transparent 75%);
  border: 2px solid rgba(245, 197, 24, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 80px rgba(245, 197, 24, 0.25);
  animation: signal-pulse 4s ease-in-out infinite;
}
.signal-circle img { width: 135px; }

@keyframes beam-flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.55; }
  52% { opacity: 1; }
  71% { opacity: 0.8; }
}
@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 80px rgba(245, 197, 24, 0.25); }
  50% { box-shadow: 0 0 120px rgba(245, 197, 24, 0.45); }
}

.hero__content { max-width: 900px; position: relative; }

.hero__tag {
  font-family: var(--font-type);
  color: var(--storm);
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 0.95;
  color: var(--white);
  text-transform: uppercase;
}
.hero__title .line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero__title .line:nth-child(1) { animation-delay: 0.15s; }
.hero__title .line:nth-child(2) { animation-delay: 0.35s; }
.hero__title .line:nth-child(3) { animation-delay: 0.6s; }
.line--gold {
  color: var(--signal);
  text-shadow: 0 0 40px rgba(245, 197, 24, 0.35);
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero__sub {
  margin: 2rem auto 0;
  max-width: 560px;
  color: var(--fog);
  font-size: 1.05rem;
}
.hero__sub em { color: var(--signal); }

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Skyline */
.skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220'><path fill='%23080808' stroke='rgba(245,197,24,0.18)' stroke-width='1' d='M0 220 L0 140 L40 140 L40 100 L70 100 L70 150 L110 150 L110 60 L125 60 L125 45 L140 45 L140 60 L155 60 L155 150 L200 150 L200 110 L240 110 L240 170 L280 170 L280 80 L300 80 L300 65 L330 65 L330 80 L350 80 L350 170 L400 170 L400 130 L450 130 L450 90 L465 90 L465 70 L480 70 L480 90 L495 90 L495 160 L540 160 L540 120 L580 120 L580 175 L620 175 L620 40 L640 40 L640 20 L655 20 L655 8 L665 8 L665 20 L680 20 L680 40 L700 40 L700 175 L750 175 L750 135 L790 135 L790 165 L830 165 L830 95 L850 95 L850 75 L880 75 L880 95 L900 95 L900 165 L950 165 L950 125 L990 125 L990 170 L1030 170 L1030 55 L1050 55 L1050 35 L1070 35 L1070 55 L1090 55 L1090 170 L1140 170 L1140 115 L1180 115 L1180 160 L1220 160 L1220 85 L1245 85 L1245 65 L1270 65 L1270 85 L1290 85 L1290 155 L1340 155 L1340 120 L1380 120 L1380 140 L1440 140 L1440 220 Z'/></svg>");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 1440px 220px;
}

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--fog);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 3;
}
.scroll-hint span {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--signal), transparent);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============ SECTIONS ============ */
.section { padding: 7rem 6vw; max-width: 1300px; margin: 0 auto; }

.section__head { text-align: center; max-width: 760px; margin: 0 auto 4rem; }

.section__kicker {
  font-family: var(--font-type);
  color: var(--signal-dim);
  font-size: 0.8rem;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: var(--white);
  line-height: 1.05;
  text-transform: uppercase;
}
.section__title em { color: var(--signal); }

.section__desc { margin-top: 1.4rem; color: var(--fog); }

.section__link {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--signal);
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border-bottom: 1px solid rgba(245, 197, 24, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.3s, letter-spacing 0.3s;
}
.section__link:hover { border-color: var(--signal); letter-spacing: 3.5px; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ CASE FILES ============ */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Bento layout: 1st case featured wide (2+1 top row, 3 bottom row) */
.case:first-child {
  grid-column: span 2;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(245, 197, 24, 0.07), transparent 60%),
    linear-gradient(160deg, var(--gunmetal), var(--night));
}
.case:first-child .case__name { font-size: 2.5rem; }
.case:first-child .case__brief { max-width: 560px; }

.case {
  background: linear-gradient(160deg, var(--gunmetal), var(--night));
  border: 1px solid rgba(245, 197, 24, 0.12);
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.case:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 197, 24, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 197, 24, 0.06);
}

.case__stamp {
  font-family: var(--font-type);
  color: var(--danger);
  border: 1.5px solid var(--danger);
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  transform: rotate(-2deg);
  margin-bottom: 1.4rem;
  opacity: 0.85;
}

.case__type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--storm);
  margin-bottom: 0.4rem;
}

.case__name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}

.case__brief { font-size: 0.95rem; color: var(--fog); }
.case__brief b { color: var(--ash); font-weight: 500; }

.case__verdict {
  display: block;
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--signal);
}

/* ============ CREED / PHILOSOPHY ============ */
.creed {
  padding: 8rem 6vw;
  background:
    linear-gradient(rgba(5, 6, 7, 0.9), rgba(5, 6, 7, 0.9)),
    radial-gradient(ellipse at center, rgba(245, 197, 24, 0.18), transparent 70%);
  text-align: center;
}
.creed__inner { max-width: 850px; margin: 0 auto; }
.creed__bat {
  width: 100px;
  opacity: 0.95;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 12px rgba(245, 197, 24, 0.5));
}
.creed blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  color: var(--white);
  line-height: 1.55;
  font-weight: 600;
}
.creed blockquote span { color: var(--signal); }
.creed cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-type);
  font-style: normal;
  color: var(--fog);
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* ============ ORIGIN ============ */
.origin__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
}
.origin__text p { margin-bottom: 1.3rem; color: var(--fog); }
.origin__text p b { color: var(--ash); font-weight: 500; }
.origin__text .section__title { margin-bottom: 1.8rem; }
.origin__text .btn { margin-top: 1rem; }

.origin__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.ostat {
  background: var(--gunmetal);
  border: 1px solid rgba(245, 197, 24, 0.12);
  border-top: 2px solid var(--signal);
  padding: 2rem 1.4rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.ostat:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
.ostat .stat__num, .ostat b {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--signal);
}
.ostat p {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--fog);
  margin-top: 0.4rem;
}

/* ============ ARSENAL ============ */
.arsenal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem;
}
.weapon {
  background: var(--night);
  border: 1px solid rgba(245, 197, 24, 0.1);
  padding: 2rem 1.8rem;
  position: relative;
  transition: border-color 0.3s, background 0.3s;
}
.weapon::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--signal), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.weapon:hover { border-color: rgba(245, 197, 24, 0.3); background: var(--gunmetal); }
.weapon:hover::before { transform: scaleX(1); }

.weapon__icon { color: var(--signal); font-size: 1.1rem; }
.weapon h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 1.5px;
  color: var(--white);
  margin: 0.7rem 0 0.6rem;
}
.weapon p { font-size: 0.88rem; color: var(--fog); }

/* ============ ARCHIVES ============ */
.archives__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.vault {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background:
    linear-gradient(160deg, rgba(26, 26, 26, 0.9), rgba(8, 8, 8, 0.95)),
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(245, 197, 24, 0.02) 14px, rgba(245, 197, 24, 0.02) 16px);
  border: 1px solid rgba(245, 197, 24, 0.15);
  padding: 2.5rem;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.vault:hover {
  border-color: rgba(245, 197, 24, 0.45);
}
.vault__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--signal-dim);
  margin-bottom: 1.4rem;
}
.vault h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  letter-spacing: 1.5px;
  margin-bottom: 0.7rem;
}
.vault p { color: var(--fog); font-size: 0.95rem; }
.vault__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 2rem;
}
.vault__foot b { color: var(--ash); font-weight: 500; letter-spacing: 1px; }
.vault__open {
  color: var(--signal);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: letter-spacing 0.3s;
}
.vault:hover .vault__open { letter-spacing: 3.5px; }

/* ============ CONTRACTS ============ */
.contracts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}
.plan {
  background: var(--night);
  border: 1px solid rgba(245, 197, 24, 0.14);
  padding: 2.6rem 2.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.plan:hover { transform: translateY(-6px); }
.plan--featured {
  border-color: rgba(245, 197, 24, 0.55);
  background: linear-gradient(170deg, rgba(245, 197, 24, 0.06), var(--night) 40%);
  box-shadow: 0 0 50px rgba(245, 197, 24, 0.07);
}
.plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--signal);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 3px;
  padding: 0.25rem 1.2rem;
}
.plan__tier {
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--signal-dim);
  margin-bottom: 0.5rem;
}
.plan h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 1.5px;
  color: var(--white);
}
.plan__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--signal);
  margin: 1rem 0;
  line-height: 1;
}
.plan__price span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--fog);
  margin-top: 0.4rem;
}
.plan__desc { font-size: 0.9rem; color: var(--fog); margin-bottom: 1.4rem; }
.plan ul { list-style: none; margin-bottom: 1.4rem; flex-grow: 1; }
.plan li {
  padding: 0.45rem 0;
  font-size: 0.92rem;
  border-bottom: 1px dashed rgba(245, 197, 24, 0.12);
}
.plan li::before { content: "▸ "; color: var(--signal); }
.plan__note {
  font-size: 0.78rem;
  color: var(--storm);
  margin-bottom: 1.6rem;
  font-style: italic;
}
.plan .btn { text-align: center; }

.contracts__custom {
  margin-top: 3.5rem;
  text-align: center;
  border: 1px dashed rgba(245, 197, 24, 0.3);
  padding: 3rem 2rem;
  background: rgba(245, 197, 24, 0.02);
}
.contracts__custom h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 0.7rem;
}
.contracts__custom p { color: var(--fog); max-width: 560px; margin: 0 auto 1.8rem; }

.contracts__longterm {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-type);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--storm);
  opacity: 0.85;
}

/* ============ SIGNAL / CONTACT ============ */
.signal {
  position: relative;
  padding: 13rem 6vw;
  overflow: hidden;
  background: linear-gradient(180deg, var(--black), #100e08 50%, var(--black));
}
.cave {
  position: absolute;
  left: 0;
  right: 0;
  height: 130px;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 1440px 130px;
}
.cave--top {
  top: -1px;
  background-position: top left;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130'><path fill='%23050505' d='M0 0 L1440 0 L1440 22 L1395 30 L1370 95 L1345 32 L1290 40 L1265 75 L1235 35 L1170 45 L1150 118 L1125 42 L1060 33 L1030 70 L1000 30 L935 42 L910 100 L885 38 L820 30 L795 62 L760 28 L700 40 L678 125 L650 42 L590 32 L565 78 L535 30 L470 42 L445 92 L418 36 L355 28 L330 65 L300 30 L240 40 L215 108 L190 38 L130 30 L105 72 L75 28 L30 36 L0 22 Z'/></svg>");
}
.cave--bottom {
  bottom: -1px;
  background-position: bottom left;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130'><path fill='%23050505' d='M0 130 L1440 130 L1440 108 L1395 100 L1370 35 L1345 98 L1290 90 L1265 55 L1235 95 L1170 85 L1150 12 L1125 88 L1060 97 L1030 60 L1000 100 L935 88 L910 30 L885 92 L820 100 L795 68 L760 102 L700 90 L678 5 L650 88 L590 98 L565 52 L535 100 L470 88 L445 38 L418 94 L355 102 L330 65 L300 100 L240 90 L215 22 L190 92 L130 100 L105 58 L75 102 L30 94 L0 108 Z'/></svg>");
}
.signal__watermark {
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 620px;
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(-8deg);
}
.signal__grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
}
.signal__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--white);
  margin: 1.5rem 0;
}
.signal__title span,
.signal__title .orbit-text {
  color: var(--signal);
  text-shadow: 0 0 40px rgba(245, 197, 24, 0.35);
  -webkit-text-stroke: 0;
}
.signal__title em {
  font-style: normal;
  color: inherit;
}

/* Bats orbiting the "Unforgettable." text forever */
.orbit-wrap {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.orbit-text {
  position: relative;
  z-index: 1;
}
.orbit {
  position: absolute;
  inset: -0.6em -0.4em;
  transform: scaleY(0.4); /* flattens the circular orbit into an ellipse */
  pointer-events: none;
  z-index: 5;
}
.orbit-bat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 24px);
  animation: orbit-spin var(--dur, 8s) linear var(--delay, 0s) infinite;
}
.orbit-bat--rev { animation-direction: reverse; }
.orbit-bat i {
  display: block;
  transform: scaleY(2.5); /* undo the ellipse squish so bats keep their shape */
}
.orbit-bat svg {
  width: 100%;
  display: block;
  fill: var(--signal);
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(245, 197, 24, 0.4));
  animation: bat-flap 0.3s ease-in-out infinite;
  transform-origin: 50% 35%;
}
@keyframes orbit-spin {
  from { transform: rotate(0turn) translateX(var(--rx, 3em)) rotate(0turn); }
  to { transform: rotate(1turn) translateX(var(--rx, 3em)) rotate(-1turn); }
}
.signal__lead { color: var(--fog); max-width: 480px; margin-bottom: 2.5rem; }

.signal__cards {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.contact-line {
  display: block;
  text-decoration: none;
}
.contact-line__label {
  display: block;
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--storm);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.contact-line__value {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  letter-spacing: 2px;
  line-height: 1.1;
  color: var(--white);
  transition: color 0.35s;
}
.contact-line__value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-line:hover .contact-line__value {
  color: var(--signal);
  text-shadow: 0 0 30px rgba(245, 197, 24, 0.35);
}
.contact-line:hover .contact-line__value::after { transform: scaleX(1); }

/* ============ BAT INTRO FLOCK ============ */
#batIntro {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  background: #000;
  transition: opacity 0.7s ease;
}
#batIntro.done {
  opacity: 0;
  pointer-events: none;
}
#batCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.intro-lock { overflow: hidden; }
body.intro-lock .hero__title .line { animation-play-state: paused; }

@keyframes bat-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}

/* ============ MUSIC TOGGLE ============ */
.music-toggle {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(245, 197, 24, 0.5);
  background: rgba(8, 8, 8, 0.9);
  color: var(--signal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.music-toggle:hover {
  background: rgba(245, 197, 24, 0.1);
  box-shadow: 0 0 24px rgba(245, 197, 24, 0.3);
}
.music-toggle svg {
  width: 24px;
  height: 24px;
}
.music-toggle .icon-sound-off { display: none; }
.music-toggle.is-muted .icon-sound-on { display: none; }
.music-toggle.is-muted .icon-sound-off { display: block; }
.music-toggle.is-muted {
  color: var(--fog);
  border-color: rgba(245, 197, 24, 0.2);
  box-shadow: none;
}
.music-toggle.is-playing {
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.25);
}
.music-toggle.is-playing .wave-1 {
  animation: wave-fade 1.6s ease-in-out infinite;
}
.music-toggle.is-playing .wave-2 {
  animation: wave-fade 1.6s ease-in-out 0.3s infinite;
}
@keyframes wave-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ============ FOOTER ============ */
.footer {
  text-align: center;
  padding: 4rem 6vw 3rem;
  border-top: 1px solid rgba(245, 197, 24, 0.1);
}
.footer .bat-icon { width: 64px; margin-bottom: 0.8rem; }
.footer p {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--fog);
}
.footer__quote {
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  color: var(--ash) !important;
  font-size: 1rem !important;
  margin: 1rem auto;
  max-width: 500px;
}
.footer__quote em { color: var(--signal); font-style: italic; }
.footer__copy { margin-top: 1rem; color: var(--storm) !important; font-size: 0.7rem !important; }
.footer__credit {
  margin-top: 1rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 2px !important;
  color: rgba(183, 171, 132, 0.75) !important;
  text-transform: none !important;
}
.footer__credit a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 197, 24, 0.4);
  transition: color 0.25s, border-color 0.25s;
}
.footer__credit a:hover {
  color: var(--white);
  border-color: var(--signal);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .cases { grid-template-columns: repeat(2, 1fr); }
  .case:first-child { grid-column: span 2; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .origin__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__signal { right: 2%; left: auto; transform: scale(0.6); transform-origin: top right; }
  .section { padding: 5rem 6vw; }
  .signal { padding: 6rem 6vw; }
  .signal__grid { grid-template-columns: 1fr; gap: 3rem; }
  .signal__watermark { width: 420px; right: -20%; }
}

@media (max-width: 640px) {
  .cases { grid-template-columns: 1fr; }
  .case:first-child { grid-column: span 1; }
  .case:first-child .case__name { font-size: 1.9rem; }
  .hero__tag {
    font-size: 0.6rem;
    letter-spacing: 1px;
    white-space: nowrap;
  }
}