/* Staging-only global theme layer: premium matte black / antique gold. */
:root {
  --bg-main: #020202;
  --bg-secondary: #050505;
  --bg-panel: #0b0a07;
  --bg-card: #13110c;
  --bg-card-hover: #19160f;

  --text-primary: #f7f1e5;
  --text-secondary: #afa694;
  --text-muted: #7f7668;

  --gold-primary: #c99a35;
  --gold-bright: #e8be5a;
  --gold-soft: #9b7428;

  --blue-accent: rgba(232, 190, 90, 0.72);
  --blue-soft: rgba(201, 154, 53, 0.32);
  --blue-muted: rgba(155, 116, 40, 0.28);

  --border-gold: rgba(201, 154, 53, 0.3);
  --border-soft: rgba(247, 241, 229, 0.08);
  --border-blue: rgba(201, 154, 53, 0.2);

  --glow-gold: rgba(232, 190, 90, 0.2);
  --glow-blue: rgba(201, 154, 53, 0.08);

  /* Compatibility aliases used by existing pages. */
  --bg: var(--bg-main);
  --bg-2: var(--bg-secondary);
  --bg-primary: var(--bg-main);
  --surface: var(--bg-panel);
  --surface-2: var(--bg-card);
  --card-bg: rgba(19, 17, 12, 0.9);
  --card-bg-hover: rgba(25, 22, 15, 0.96);
  --panel: rgba(19, 17, 12, 0.88);
  --panel-strong: rgba(19, 17, 12, 0.96);
  --text: var(--text-primary);
  --soft: var(--text-secondary);
  --muted: var(--text-muted);
  --gold: var(--gold-primary);
  --accent: var(--gold-primary);
  --accent-deep: var(--gold-soft);
  --gold-muted: var(--gold-soft);
  --gold-glow: var(--glow-gold);
  --glow: var(--glow-gold);
  --border: var(--border-gold);
  --cyan: var(--blue-accent);
  --cyan-subtle: var(--glow-blue);
}

html,
body {
  background:
    radial-gradient(circle at 82% 14%, rgba(111, 168, 200, 0.08), transparent 30%),
    radial-gradient(circle at 16% 32%, rgba(224, 183, 90, 0.08), transparent 26%),
    linear-gradient(180deg, #03070a 0%, #071018 45%, #03070a 100%) !important;
  color: var(--text-primary) !important;
}

body {
  font-family: Inter, Arial, sans-serif;
}

body::before,
.grain,
.film-grain,
.noise {
  opacity: 0.032 !important;
  mix-blend-mode: soft-light !important;
}

body::after,
.ember,
.ambient-glow,
.hero-glow,
.beam-glow {
  opacity: 0.14 !important;
}

main,
section,
.section,
.fc-section,
.hero,
.fc-hero,
.portfolio-hero,
.journal-hero,
.page,
.page-shell {
  background:
    radial-gradient(circle at 78% 12%, rgba(111, 168, 200, 0.055), transparent 34%),
    linear-gradient(180deg, #03070a 0%, #071018 48%, #03070a 100%) !important;
}

.hero::after,
.fc-hero::after,
.portfolio-hero::after,
.journal-hero::after,
.section::after,
.fc-section::after {
  background:
    radial-gradient(circle at center, transparent 46%, rgba(3, 7, 10, 0.34) 100%) !important;
  pointer-events: none;
}

.hero::before,
.portfolio-hero::before,
.journal-hero::before,
.section::before,
.fc-section::before {
  filter: saturate(0.78) brightness(0.72) hue-rotate(8deg) !important;
}

h1,
h2,
h3,
h4,
.headline,
.hero-title,
.section-title,
.fc-heading,
.journal-title,
.portfolio-title,
.page-title,
.display-title {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

p,
li,
.body,
.copy,
.lede,
.subtitle,
.section-copy,
.card-copy,
.journal-copy,
.portfolio-copy,
.description,
.supporting-copy {
  color: var(--text-secondary) !important;
  line-height: 1.66;
}

.muted,
.text-muted,
.meta,
.fc-meta,
.card-meta,
.portfolio-meta,
.caption,
.small-copy {
  color: var(--text-muted) !important;
}

.label,
.kicker,
.eyebrow,
.fc-label,
.fc-kicker,
.tag,
.fc-tag,
.card-number,
.fc-card-number,
.gold,
.accent,
.highlight,
.section-label,
.portfolio-label,
.journal-label,
.micro-label {
  color: var(--gold-bright) !important;
}

.outline,
.stroke,
.outline-text {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(224, 183, 90, 0.68) !important;
}

.blue,
.cyan,
.system-accent,
.workflow-accent,
.process-accent {
  color: var(--blue-accent) !important;
}

.nav,
.site-nav,
.fc-nav,
.topbar,
header {
  background: rgba(3, 7, 10, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(18px);
}

.nav a,
.site-nav a,
.fc-nav a,
.topbar a,
header a {
  color: var(--text-secondary) !important;
}

.nav a:hover,
.site-nav a:hover,
.fc-nav a:hover,
.topbar a:hover,
header a:hover,
.nav a.active,
.site-nav a.active,
.fc-nav a.active,
.topbar a.active,
header a.active {
  color: var(--gold-bright) !important;
  background: rgba(201, 151, 58, 0.075) !important;
}

.dropdown,
.dropdown-menu,
.portfolio-menu,
.nav-dropdown,
.menu-panel {
  background: rgba(7, 16, 24, 0.98) !important;
  border-color: rgba(201, 151, 58, 0.28) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(18px);
}

.dropdown a:hover,
.dropdown-menu a:hover,
.portfolio-menu a:hover,
.nav-dropdown a:hover,
.menu-panel a:hover {
  background: rgba(201, 151, 58, 0.11) !important;
  color: var(--text-primary) !important;
}

.card,
.fc-card,
.feature-card,
.portfolio-card,
.work-card,
.value-card,
.playbook-card,
.industry-card,
.journal-card,
.case-card,
.cta-block,
.fc-cta-block,
.panel,
.film-frame,
.reel-card,
.process-card,
.operations-card,
.format-card,
.pillar-card,
.method-card,
.insight-card,
.contact-card,
.media-card,
.stat-card {
  background:
    linear-gradient(180deg, rgba(16, 30, 40, 0.94), rgba(8, 15, 22, 0.98)) !important;
  border-color: rgba(201, 151, 58, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 18px 52px rgba(0, 0, 0, 0.28) !important;
}

.card:hover,
.fc-card:hover,
.feature-card:hover,
.portfolio-card:hover,
.work-card:hover,
.value-card:hover,
.playbook-card:hover,
.industry-card:hover,
.journal-card:hover,
.case-card:hover,
.cta-block:hover,
.panel:hover,
.format-card:hover,
.pillar-card:hover,
.method-card:hover,
.insight-card:hover {
  border-color: rgba(224, 183, 90, 0.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(224, 183, 90, 0.035),
    0 22px 58px rgba(0, 0, 0, 0.36),
    0 0 26px rgba(224, 183, 90, 0.08) !important;
}

.glare-card::before,
.portfolio-card::before,
.work-card::before,
.value-card::before,
.playbook-card::before,
.industry-card::before,
.format-card::before,
.pillar-card::before,
.method-card::before,
.insight-card::before {
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(224, 183, 90, 0.08),
    rgba(111, 168, 200, 0.035) 22%,
    transparent 56%
  ) !important;
}

.portfolio-card img,
.work-card img,
.journal-card img,
.case-card img,
.media-card img,
.feature-card img {
  filter: saturate(0.82) contrast(1.03) brightness(0.82) hue-rotate(7deg) !important;
}

.portfolio-card::after,
.work-card::after,
.journal-card::after,
.case-card::after,
.media-card::after {
  background:
    linear-gradient(to top, rgba(3, 7, 10, 0.84), rgba(3, 7, 10, 0.18)) !important;
}

.btn,
.button,
.fc-button,
.secondary-button,
button,
input[type="submit"] {
  color: var(--gold-bright) !important;
  background: rgba(7, 16, 24, 0.72) !important;
  border-color: rgba(201, 151, 58, 0.45) !important;
  box-shadow: none !important;
}

.primary-button,
.btn-primary,
.button-primary,
.cta-primary,
.hero-cta,
.start-button {
  color: var(--bg-main) !important;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-bright)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 22px rgba(224, 183, 90, 0.14) !important;
}

.btn:hover,
.button:hover,
.fc-button:hover,
.secondary-button:hover,
button:hover,
input[type="submit"]:hover {
  color: var(--bg-main) !important;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-bright)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(224, 183, 90, 0.18) !important;
}

.link,
.fc-link,
.read-link,
.card-link,
.text-link,
a.read-more {
  color: var(--gold-bright) !important;
}

.link:hover,
.fc-link:hover,
.read-link:hover,
.card-link:hover,
.text-link:hover,
a.read-more:hover {
  color: var(--text-primary) !important;
}

svg,
.icon,
.icon svg,
.card-icon,
.industry-icon {
  color: var(--gold-primary) !important;
  stroke: currentColor;
}

.process-card svg,
.workflow svg,
.timeline svg,
.system-card svg,
.connector,
.workflow-line,
.timeline-line {
  color: var(--blue-accent) !important;
  border-color: rgba(111, 168, 200, 0.45) !important;
  stroke: currentColor;
}

.process-step,
.timeline-step,
.workflow-step {
  border-color: rgba(111, 168, 200, 0.25) !important;
}

input,
textarea,
select {
  color: var(--text-primary) !important;
  background: rgba(11, 20, 28, 0.92) !important;
  border-color: rgba(201, 151, 58, 0.22) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(224, 183, 90, 0.55) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 183, 90, 0.09) !important;
}

.sound-toggle,
.sound-pill,
.floating-sound {
  background: rgba(7, 16, 24, 0.86) !important;
  border-color: rgba(201, 151, 58, 0.38) !important;
  color: var(--gold-bright) !important;
  box-shadow: none !important;
}

footer,
.footer,
.site-footer {
  background: #03070a !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-muted) !important;
}

footer a,
.footer a,
.site-footer a {
  color: var(--text-secondary) !important;
}

footer a:hover,
.footer a:hover,
.site-footer a:hover {
  color: var(--gold-bright) !important;
}

hr,
.separator,
.divider {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

img,
video {
  filter: saturate(0.86) contrast(1.03) brightness(0.9) hue-rotate(5deg);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .glare-card::before,
  .portfolio-card::before,
  .work-card::before,
  .value-card::before,
  .playbook-card::before,
  .industry-card::before,
  .format-card::before,
  .pillar-card::before,
  .method-card::before,
  .insight-card::before {
      display: none !important;
    }
  }

/* Final staging-wide image hover polish: subtle zoom with premium gold glow. */
@media (hover: hover) and (pointer: fine) {
  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      border-color 420ms ease,
      box-shadow 520ms ease,
      transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image))::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 45%),
        rgba(232, 190, 90, 0.18),
        rgba(201, 154, 53, 0.07) 26%,
        transparent 56%);
    mix-blend-mode: screen;
    transition: opacity 420ms ease;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)):hover {
    border-color: rgba(232, 190, 90, 0.42) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(201, 154, 53, 0.16),
      inset 0 0 0 1px rgba(232, 190, 90, 0.12) !important;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)):hover::after {
    opacity: 1;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ) :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: scale(1);
    transform-origin: center;
    transition:
      transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 850ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):hover :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: scale(1.035);
    filter: saturate(0.92) contrast(1.05) brightness(0.88) !important;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image))::after {
    display: none !important;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .operations-case,
    .card
  ) :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: none !important;
    transition: none !important;
  }
}

/* Shared premium image push-in.
   Applies the subtle Promos-style hover zoom across staging image cards only. */
@media (hover: hover) and (pointer: fine) {
  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      border-color 420ms ease,
      box-shadow 520ms ease,
      transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image))::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 45%),
        rgba(232, 190, 90, 0.2) 0%,
        rgba(201, 154, 53, 0.12) 18%,
        rgba(201, 154, 53, 0.04) 36%,
        transparent 62%),
      linear-gradient(135deg,
        rgba(232, 190, 90, 0.1),
        transparent 28%,
        transparent 72%,
        rgba(201, 154, 53, 0.08));
    mix-blend-mode: screen;
    transition: opacity 520ms ease;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ) :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: scale(1);
    transform-origin: center;
    transition:
      transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 850ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 850ms ease;
    will-change: transform;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ):hover :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: scale(1.035);
    filter: saturate(0.9) contrast(1.06) brightness(0.86) !important;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)):hover {
    border-color: rgba(232, 190, 90, 0.42) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.42),
      0 0 34px rgba(201, 154, 53, 0.16),
      inset 0 0 0 1px rgba(232, 190, 90, 0.12);
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ):has(:where(img, .card-image, .work-video-poster, .media-image, .project-image)):hover::after {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  ) :where(img, .card-image, .work-video-poster, .media-image, .project-image) {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  :where(
    .portfolio-card,
    .work-preview-card,
    .work-card,
    .journal-card,
    .case-card,
    .playbook-card,
    .fc-playbook-card,
    .value-card,
    .feature-card,
    .format-card,
    .pillar-card,
    .method-card,
    .insight-card,
    .image-panel,
    .media-card,
    .project-card,
    .card
  )::after {
    display: none !important;
  }
}

/* Final staging-wide restore: original cinematic black / ember-gold scheme.
   Keep this block last so it wins over the temporary grey/gold trials. */
:root {
  --bg-main: #030201;
  --bg-secondary: #050302;
  --bg-panel: rgba(8, 5, 2, 0.78);
  --bg-card: rgba(12, 8, 4, 0.86);
  --bg-card-hover: rgba(22, 14, 6, 0.94);

  --text-primary: #f7efe3;
  --text-secondary: #b8a891;
  --text-muted: #8f806d;

  --gold-primary: #f59e0b;
  --gold-bright: #ffbd4a;
  --gold-soft: #b45309;

  --blue-accent: rgba(80, 190, 210, 0.34);
  --blue-soft: rgba(80, 190, 210, 0.12);
  --blue-muted: rgba(80, 190, 210, 0.09);

  --border-gold: rgba(245, 158, 11, 0.45);
  --border-soft: rgba(247, 239, 227, 0.08);
  --border-blue: rgba(80, 190, 210, 0.18);

  --glow-gold: rgba(245, 120, 20, 0.35);
  --glow-blue: rgba(80, 190, 210, 0.10);

  --bg: var(--bg-main);
  --bg-2: var(--bg-secondary);
  --bg-primary: var(--bg-main);
  --surface: var(--bg-panel);
  --surface-2: var(--bg-card);
  --card-bg: var(--bg-card);
  --card-bg-hover: var(--bg-card-hover);
  --panel: var(--bg-panel);
  --panel-strong: rgba(10, 6, 2, 0.96);
  --text: var(--text-primary);
  --soft: var(--text-secondary);
  --muted: var(--text-muted);
  --gold: var(--gold-primary);
  --accent: var(--gold-primary);
  --accent-deep: var(--gold-soft);
  --gold-muted: var(--gold-soft);
  --gold-glow: var(--glow-gold);
  --glow: var(--glow-gold);
  --border: var(--border-gold);
  --cyan: var(--blue-accent);
  --cyan-subtle: var(--glow-blue);
}

html,
body {
  background:
    radial-gradient(circle at 18% 32%, rgba(245, 120, 20, 0.10), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(80, 190, 210, 0.045), transparent 30%),
    linear-gradient(180deg, #030201 0%, #050302 48%, #030201 100%) !important;
  color: var(--text-primary) !important;
}

main,
section,
.section,
.fc-section,
.hero,
.fc-hero,
.portfolio-hero,
.journal-hero,
.page,
.page-shell {
  background:
    radial-gradient(circle at 20% 28%, rgba(245, 120, 20, 0.075), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(80, 190, 210, 0.04), transparent 34%),
    linear-gradient(180deg, rgba(3, 2, 1, 0.99), rgba(6, 3, 1, 0.99)) !important;
}

h1,
h2,
h3,
h4,
.headline,
.hero-title,
.section-title,
.fc-heading,
.journal-title,
.portfolio-title,
.page-title,
.display-title {
  color: var(--text-primary) !important;
}

p,
li,
.body,
.copy,
.lede,
.subtitle,
.section-copy,
.card-copy,
.journal-copy,
.portfolio-copy,
.description,
.supporting-copy {
  color: var(--text-secondary) !important;
}

.label,
.kicker,
.eyebrow,
.fc-label,
.fc-kicker,
.tag,
.fc-tag,
.card-number,
.fc-card-number,
.gold,
.accent,
.highlight,
.section-label,
.portfolio-label,
.journal-label,
.micro-label {
  color: var(--gold-primary) !important;
}

.nav,
.site-nav,
.fc-nav,
.topbar,
header {
  background: rgba(3, 2, 1, 0.86) !important;
  border-color: rgba(245, 158, 11, 0.12) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36) !important;
}

.dropdown,
.dropdown-menu,
.portfolio-menu,
.nav-dropdown,
.menu-panel,
.sub-menu {
  background: rgba(5, 3, 2, 0.98) !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
}

.card,
.fc-card,
.feature-card,
.portfolio-card,
.work-card,
.value-card,
.pillar-card,
.playbook-card,
.industry-card,
.format-card,
.journal-card,
.case-card,
.method-card,
.insight-card,
.system-card,
.timeline-card,
.cta-block,
.fc-cta-block,
.panel,
.film-frame,
.film-card,
.reel-card,
.process-card,
.contact-card,
.glass-card {
  background:
    linear-gradient(180deg, rgba(12, 8, 4, 0.92), rgba(5, 3, 2, 0.98)) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: var(--text-primary) !important;
  box-shadow:
    inset 0 1px 0 rgba(247, 239, 227, 0.04),
    0 22px 58px rgba(0, 0, 0, 0.44) !important;
}

.card:hover,
.fc-card:hover,
.feature-card:hover,
.portfolio-card:hover,
.work-card:hover,
.value-card:hover,
.pillar-card:hover,
.playbook-card:hover,
.industry-card:hover,
.format-card:hover,
.journal-card:hover,
.case-card:hover,
.method-card:hover,
.insight-card:hover,
.system-card:hover,
.timeline-card:hover,
.cta-block:hover,
.panel:hover {
  border-color: rgba(255, 189, 74, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(247, 239, 227, 0.055),
    0 24px 64px rgba(0, 0, 0, 0.50),
    0 0 34px rgba(245, 120, 20, 0.12) !important;
}

.glare-card::before,
.portfolio-card::before,
.work-card::before,
.value-card::before,
.playbook-card::before,
.industry-card::before,
.format-card::before,
.pillar-card::before,
.method-card::before,
.insight-card::before,
.cta-block::before {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 189, 74, 0.095),
      rgba(245, 120, 20, 0.04) 30%,
      transparent 62%
    ) !important;
}

.btn,
.button,
button,
.cta,
.primary-cta,
.secondary-cta,
.outline-button,
.nav-cta,
.contact-button {
  background: rgba(8, 5, 2, 0.78) !important;
  border-color: rgba(245, 158, 11, 0.54) !important;
  color: var(--text-primary) !important;
}

.btn:hover,
.button:hover,
button:hover,
.cta:hover,
.primary-cta:hover,
.secondary-cta:hover,
.outline-button:hover,
.nav-cta:hover,
.contact-button:hover {
  background: linear-gradient(135deg, #b45309, #f59e0b) !important;
  border-color: rgba(255, 189, 74, 0.78) !important;
  color: #030201 !important;
  box-shadow: 0 0 28px rgba(245, 120, 20, 0.22) !important;
}

.process-step,
.timeline-step,
.workflow-step,
.chip,
.tag,
.pill,
.badge {
  background: rgba(8, 5, 2, 0.84) !important;
  border-color: rgba(245, 158, 11, 0.26) !important;
  color: var(--text-secondary) !important;
}

.sound-toggle,
.sound-pill,
.floating-sound {
  background: rgba(3, 2, 1, 0.92) !important;
  border-color: rgba(245, 158, 11, 0.46) !important;
  color: var(--gold-bright) !important;
}

footer,
.footer,
.site-footer {
  background: #030201 !important;
  border-color: rgba(245, 158, 11, 0.16) !important;
}

img,
video {
  filter: saturate(0.94) contrast(1.04) brightness(0.86) !important;
}

.image-overlay,
.media-overlay,
.portfolio-card .overlay,
.work-card .overlay,
.journal-card .overlay,
.case-card .overlay {
  background:
    linear-gradient(180deg, rgba(3, 2, 1, 0.12), rgba(3, 2, 1, 0.74)) !important;
}

/* Final staging override: premium matte black / antique gold across the review site. */
html,
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 190, 90, 0.045), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(201, 154, 53, 0.03), transparent 32%),
    linear-gradient(180deg, #020202 0%, #050505 48%, #020202 100%) !important;
  color: #f7f1e5 !important;
}

body::before,
.grain,
.film-grain,
.noise,
.texture-overlay {
  opacity: 0.018 !important;
  mix-blend-mode: soft-light !important;
}

body::after,
.vignette,
.page-vignette,
.hero-vignette {
  background:
    radial-gradient(circle at center, transparent 46%, rgba(0, 0, 0, 0.46) 100%),
    linear-gradient(180deg, rgba(2, 2, 2, 0.12), rgba(2, 2, 2, 0.28)) !important;
  opacity: 1 !important;
}

main,
section,
.section,
.fc-section,
.page,
.page-shell,
.portfolio-page,
.journal-page,
.case-page,
.contact-page,
.hero,
.fc-hero,
.portfolio-hero,
.journal-hero,
.case-hero {
  background:
    radial-gradient(circle at 15% 8%, rgba(201, 154, 53, 0.035), transparent 30%),
    linear-gradient(180deg, #020202 0%, #050505 54%, #020202 100%) !important;
}

.hero::before,
.fc-hero::before,
.portfolio-hero::before,
.journal-hero::before,
.case-hero::before {
  background:
    linear-gradient(90deg, rgba(2, 2, 2, 0.46), rgba(2, 2, 2, 0.72)),
    radial-gradient(circle at 34% 52%, rgba(201, 154, 53, 0.12), transparent 36%) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.title,
.section-title,
.hero-title,
.card-title,
.work-title,
.journal-title,
.case-title {
  color: #f7f1e5 !important;
  text-shadow: none !important;
}

p,
li,
dd,
blockquote,
.copy,
.body-copy,
.lede,
.intro-copy,
.section-copy,
.card-copy,
.description,
.excerpt,
.meta-copy {
  color: #afa694 !important;
  line-height: 1.68 !important;
}

small,
.muted,
.meta,
.eyebrow,
.label,
.section-label,
.kicker,
.overline,
.tag,
.chip,
.number,
.stat-label {
  color: #c99a35 !important;
}

.highlight,
.gold,
.accent,
.text-gold,
.headline-accent,
.outline-word,
.hero-title strong,
.section-title strong,
.card-title strong {
  color: #e8be5a !important;
  -webkit-text-stroke-color: rgba(232, 190, 90, 0.82) !important;
}

a,
.nav-link,
.site-nav a,
.menu a {
  color: #d8d0bf !important;
}

a:hover,
.nav-link:hover,
.site-nav a:hover,
.menu a:hover,
.nav-link.active,
.site-nav a.active {
  color: #e8be5a !important;
}

header,
.site-header,
.topbar,
.nav,
.navbar,
.fc-nav {
  background: rgba(2, 2, 2, 0.94) !important;
  border-bottom: 1px solid rgba(201, 154, 53, 0.16) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
}

.dropdown,
.dropdown-menu,
.portfolio-menu,
.nav-dropdown,
.sub-menu {
  background: rgba(5, 5, 5, 0.98) !important;
  border: 1px solid rgba(201, 154, 53, 0.28) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(18px) !important;
}

.dropdown a,
.dropdown-menu a,
.portfolio-menu a,
.nav-dropdown a,
.sub-menu a {
  background: rgba(5, 5, 5, 0.96) !important;
  color: #d8d0bf !important;
  border-color: rgba(201, 154, 53, 0.12) !important;
}

.dropdown a:hover,
.dropdown-menu a:hover,
.portfolio-menu a:hover,
.nav-dropdown a:hover,
.sub-menu a:hover {
  background: rgba(19, 17, 12, 0.98) !important;
  color: #e8be5a !important;
}

.card,
.panel,
.feature-card,
.value-card,
.pillar-card,
.playbook-card,
.industry-card,
.format-card,
.portfolio-card,
.work-card,
.journal-card,
.case-card,
.method-card,
.insight-card,
.system-card,
.timeline-card,
.cta-block,
.contact-card,
.glass-card,
.film-card,
.reel-card {
  background:
    linear-gradient(180deg, rgba(19, 17, 12, 0.94), rgba(8, 7, 5, 0.98)) !important;
  border: 1px solid rgba(201, 154, 53, 0.22) !important;
  color: #f7f1e5 !important;
  box-shadow:
    inset 0 1px 0 rgba(247, 241, 229, 0.035),
    0 18px 46px rgba(0, 0, 0, 0.34) !important;
}

.card:hover,
.panel:hover,
.feature-card:hover,
.value-card:hover,
.pillar-card:hover,
.playbook-card:hover,
.industry-card:hover,
.format-card:hover,
.portfolio-card:hover,
.work-card:hover,
.journal-card:hover,
.case-card:hover,
.method-card:hover,
.insight-card:hover,
.system-card:hover,
.timeline-card:hover,
.cta-block:hover {
  border-color: rgba(232, 190, 90, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(247, 241, 229, 0.05),
    0 22px 58px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(201, 154, 53, 0.08) !important;
}

.glare-card::before,
.portfolio-card::before,
.work-card::before,
.value-card::before,
.playbook-card::before,
.industry-card::before,
.format-card::before,
.pillar-card::before,
.method-card::before,
.insight-card::before,
.cta-block::before {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(232, 190, 90, 0.075),
      rgba(201, 154, 53, 0.03) 26%,
      transparent 58%
    ) !important;
  opacity: 0;
  transition: opacity 180ms ease !important;
  pointer-events: none !important;
}

.glare-card:hover::before,
.portfolio-card:hover::before,
.work-card:hover::before,
.value-card:hover::before,
.playbook-card:hover::before,
.industry-card:hover::before,
.format-card:hover::before,
.pillar-card:hover::before,
.method-card:hover::before,
.insight-card:hover::before,
.cta-block:hover::before {
  opacity: 1 !important;
}

.btn,
.button,
button,
.cta,
.primary-cta,
.secondary-cta,
.outline-button,
.nav-cta,
.contact-button {
  border-color: rgba(201, 154, 53, 0.48) !important;
  color: #f7f1e5 !important;
  background: rgba(5, 5, 5, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(201, 154, 53, 0.08) inset !important;
}

.btn:hover,
.button:hover,
button:hover,
.cta:hover,
.primary-cta:hover,
.secondary-cta:hover,
.outline-button:hover,
.nav-cta:hover,
.contact-button:hover {
  border-color: rgba(232, 190, 90, 0.72) !important;
  color: #020202 !important;
  background: linear-gradient(135deg, #c99a35, #e8be5a) !important;
  box-shadow: 0 0 26px rgba(201, 154, 53, 0.16) !important;
}

input,
textarea,
select {
  background: rgba(19, 17, 12, 0.92) !important;
  border-color: rgba(201, 154, 53, 0.26) !important;
  color: #f7f1e5 !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(175, 166, 148, 0.62) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(232, 190, 90, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(201, 154, 53, 0.11) !important;
}

svg,
.icon,
.icon svg,
.card-icon,
.industry-icon,
.process-card svg,
.workflow svg,
.timeline svg,
.system-card svg,
.connector,
.workflow-line,
.timeline-line {
  color: #c99a35 !important;
  border-color: rgba(201, 154, 53, 0.28) !important;
  stroke: currentColor !important;
}

.process-step,
.timeline-step,
.workflow-step,
.chip,
.tag,
.pill,
.badge {
  background: rgba(19, 17, 12, 0.9) !important;
  border-color: rgba(201, 154, 53, 0.24) !important;
  color: #d8d0bf !important;
}

.sound-toggle,
.sound-pill,
.floating-sound {
  background: rgba(5, 5, 5, 0.9) !important;
  border-color: rgba(201, 154, 53, 0.42) !important;
  color: #e8be5a !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important;
}

footer,
.footer,
.site-footer {
  background: #020202 !important;
  border-color: rgba(201, 154, 53, 0.14) !important;
  color: #7f7668 !important;
}

footer a,
.footer a,
.site-footer a {
  color: #afa694 !important;
}

footer a:hover,
.footer a:hover,
.site-footer a:hover {
  color: #e8be5a !important;
}

hr,
.separator,
.divider {
  border-color: rgba(201, 154, 53, 0.14) !important;
}

img,
video {
  filter: saturate(0.84) contrast(1.04) brightness(0.82) !important;
}

.image-overlay,
.media-overlay,
.portfolio-card .overlay,
.work-card .overlay,
.journal-card .overlay,
.case-card .overlay {
  background: linear-gradient(180deg, rgba(2, 2, 2, 0.18), rgba(2, 2, 2, 0.72)) !important;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .glare-card::before,
  .portfolio-card::before,
  .work-card::before,
  .value-card::before,
  .playbook-card::before,
  .industry-card::before,
  .format-card::before,
  .pillar-card::before,
  .method-card::before,
  .insight-card::before,
  .cta-block::before {
    display: none !important;
  }
}