/* ═══════════════════════════════════════════════════
   ICYVISION — BLACK & WHITE THEME OVERRIDE
   Replaces warm cream/parchment + ice blue with
   a clean, cold black & white palette.
   ═══════════════════════════════════════════════════ */

/* ── TOKEN OVERRIDES ─────────────────────────────── */
:root {
  --cream:    #f0f0f0;
  --cream-2:  #e4e4e4;
  --ice:      #ffffff;
  --ice-mid:  #cccccc;
  --ice-deep: #888888;
  --ice-glow: rgba(255,255,255,0.12);
  --frost:    rgba(255,255,255,0.05);
  --near-black: #080808;
  --black:      #040404;
}

body { background: var(--black); }
::selection { background: rgba(255,255,255,0.2); }

/* ── GRAIN ───────────────────────────────────────── */
.grain-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── NAV ─────────────────────────────────────────── */
.nav {
  background: rgba(4,4,4,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
}
.nav-menu-btn {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.8);
}
.nav-menu-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* ── LOADER ──────────────────────────────────────── */
#loader { background: var(--black); }
.loader-bar-fill { background: linear-gradient(90deg, #444, #fff); }

/* ── CURSOR ──────────────────────────────────────── */
#cursor { border-color: rgba(255,255,255,0.7); }
#cursor.hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* ── HERO ────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, #060606 0%, #0a0a0a 50%, #080808 100%);
}
.hero::before {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 1;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3) 50%, transparent);
  pointer-events: none;
  z-index: 10;
}
.hero-monogram { color: rgba(255,255,255,0.03); }
.hero-bg-text  { color: rgba(255,255,255,0.025); }
.hero-headline { color: #ffffff; }
.hero-sub      { color: rgba(255,255,255,0.5); }
.hero-overline .strike { color: rgba(255,255,255,0.4); }

.hero-stats-bar {
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}
.stat-num   { color: #fff; }
.stat-label { color: rgba(255,255,255,0.4); }
.stat-divider { background: rgba(255,255,255,0.1); }
.scroll-cue-ring  { border-color: rgba(255,255,255,0.4); }
.scroll-cue-label { color: rgba(255,255,255,0.4); }

/* ── HERO TICKER ─────────────────────────────────── */
.hct-label { color: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.15); }
.hct-name  { color: rgba(255,255,255,0.6); }
.hct-dot   { color: rgba(255,255,255,0.2); }

/* ── MARQUEE ──────────────────────────────────────── */
.marquee-section {
  background: #040404;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-reveal-text { color: rgba(255,255,255,0.12); }

/* ── WORK SECTION ─────────────────────────────────── */
.work-section  { background: #060606; }
.work-header   { border-bottom-color: rgba(255,255,255,0.08); }
.work-scroll-hint { color: rgba(255,255,255,0.3); }
.work-tape     { background: #060606; }
.work-tape-progress { background: rgba(255,255,255,0.06); }
.work-tape-progress-bar { background: linear-gradient(90deg, #555, #fff); }
.tape-stat-val { color: #fff; }
.tape-platform-badge {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

/* Work section pop */
.work-section.work-popped {
  box-shadow: 0 -20px 60px rgba(255,255,255,0.03), 0 40px 120px rgba(0,0,0,0.8);
}

/* ── SERVICES ─────────────────────────────────────── */
.services { background: #060606; }
.service-panel { border-top: 1px solid rgba(255,255,255,0.07); }
.service-num   { color: rgba(255,255,255,0.15); }
.service-title { color: #fff; }
.service-desc  { color: rgba(255,255,255,0.5); }
.service-glow  { background: radial-gradient(ellipse at center, rgba(255,255,255,0.06), transparent 70%); }
.service-ascii-block pre { color: rgba(255,255,255,0.25); }
.pill-cta {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
}
.pill-cta:hover { background: #fff; color: #000; border-color: #fff; }

/* ── STATEMENT ────────────────────────────────────── */
.statement-section {
  background: #040404;
}
.statement-section::before {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,0.03), transparent 70%);
}
.statement-eyebrow { color: rgba(255,255,255,0.3); }
.statement-text    { color: #fff; text-shadow: none; }

/* ── PROCESS ──────────────────────────────────────── */
.process-section.cream-section {
  background: #080808;
}
.process-section .section-header-row {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-left:  clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}
.process-section .section-header-row .eyebrow,
.process-section .section-counter {
  color: rgba(255,255,255,0.35) !important;
}
.process-steps {
  padding-left:  clamp(24px, 5vw, 72px);
  padding-right: clamp(24px, 5vw, 72px);
}
.process-step {
  border-right-color: rgba(255,255,255,0.08);
  padding-left: clamp(16px, 2vw, 32px);
}
.process-step:first-child {
  padding-left: 0 !important;
}
@media (max-width: 600px) {
  .process-step { border-bottom-color: rgba(255,255,255,0.08); }
}
.process-step-num   { color: rgba(255,255,255,0.25); }
.process-step-line  { background: rgba(255,255,255,0.15); }
.process-step-title { color: #fff; }
.process-step-desc  { color: rgba(255,255,255,0.45); }

/* ── GLOBAL ───────────────────────────────────────── */
.global-section {
  background: #060606;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.global-headline { color: #fff; }
.global-sub      { color: rgba(255,255,255,0.45); }
.globe-ring      { border-color: rgba(255,255,255,0.1); }
.globe-core {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  box-shadow: 0 0 30px rgba(255,255,255,0.2);
}
.globe-pin::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.6); }
.location-dot    { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.4); }
.location-item   { color: rgba(255,255,255,0.5); }

/* ── CONTACT ──────────────────────────────────────── */
.contact-section.cream-section {
  background: #080808;
}
.contact-headline { color: #fff; }
.contact-section .eyebrow { color: rgba(255,255,255,0.35) !important; }
.contact-detail-link { color: rgba(255,255,255,0.5); }
.contact-detail-link:hover { color: #fff; }
.form-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
.form-input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.form-input::placeholder { color: rgba(255,255,255,0.25); }
.form-submit { background: #fff; color: #000; }
.form-submit:hover { background: #e0e0e0; box-shadow: 0 0 30px rgba(255,255,255,0.15); }

/* ── FOOTER ───────────────────────────────────────── */
#footer { background: #020202; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-wordmark { color: rgba(255,255,255,0.03); }
.footer-logo     { color: rgba(255,255,255,0.6); }
.footer-tagline  { color: rgba(255,255,255,0.2); }
.footer-links a, .footer-copy { color: rgba(255,255,255,0.25); }
.footer-links a:hover { color: #fff; }

/* ── MENU ────────────────────────────────────────── */
.menu-overlay { background: #040404; }
.menu-link { color: rgba(255,255,255,0.8); }
.menu-link:hover { color: #fff; }
.menu-close { color: rgba(255,255,255,0.4); }

/* ── EYEBROW ─────────────────────────────────────── */
.eyebrow.light { color: rgba(255,255,255,0.35); }

/* ── AURORA (white tinted) ───────────────────────── */
.hero-content::after {
  background: radial-gradient(ellipse at 70% 30%,
    rgba(255,255,255,0.04) 0%,
    transparent 70%
  );
  animation: auroraFloat 12s ease-in-out infinite alternate;
}
@keyframes auroraFloat {
  0%   { transform: translate(0, 0)   scale(1);    opacity: 0.5; }
  50%  { transform: translate(-2%, 3%) scale(1.04); opacity: 0.8; }
  100% { transform: translate(2%, -2%) scale(0.98); opacity: 0.5; }
}

/* ── HERO OVERLINE — LA location tag ────────────── */
.overline-location {
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ── HERO OVERLINE — make visible on dark bg ─────── */
.hero-overline {
  color: rgba(255,255,255,0.45);
}
.strike {
  color: rgba(255,255,255,0.35);
  text-decoration-color: rgba(255,255,255,0.25);
}