html { scroll-behavior: smooth; overflow-y: scroll; }
body { font-family: 'IBM Plex Sans', sans-serif; }
.font-display { font-family: 'Archivo Black', sans-serif; }
.font-mono-sb { font-family: 'IBM Plex Mono', monospace; }
.chrome-text {
  background: linear-gradient(180deg, #f4f4f4 0%, #c9c9c9 45%, #8e8e8e 55%, #e7e7e7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.font-bangers { font-family: 'Bangers', cursive; }

/* Halftone dot background: always-on via .wild-halftone, or wild-mode-only on any .page-hero */
.wild-halftone,
html.mode-wild .page-hero {
  position: relative;
  z-index: 0;
}
.wild-halftone::before, .wild-halftone::after,
html.mode-wild .page-hero::before, html.mode-wild .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 59, 71, 0.55) 1.8px, transparent 1.8px);
  background-size: 14px 14px;
}
.wild-halftone::before, html.mode-wild .page-hero::before { animation: dots-twinkle-a 2.4s ease-in-out infinite; }
.wild-halftone::after, html.mode-wild .page-hero::after { background-position: 7px 7px; animation: dots-twinkle-b 3.2s ease-in-out infinite; }
@keyframes dots-twinkle-a { 0%, 100% { opacity: .8; } 50% { opacity: .1; } }
@keyframes dots-twinkle-b { 0%, 100% { opacity: .1; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .wild-halftone::before, .wild-halftone::after,
  html.mode-wild .page-hero::before, html.mode-wild .page-hero::after { animation: none; opacity: .4; }
}

/* Light wild-mode reskin, driven by the Corporate/Wild toggle in the nav on every page */
html.mode-wild .page-title {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.5px;
  text-shadow: 3px 3px 0 #ff3b47, 6px 6px 0 #000;
}
html.mode-wild .page-eyebrow { color: #ffd200; }
/* Active nav state (yellow text + underline, or just yellow text for the
   Build With Us CTA) is set directly in nav.php's $activeClass/$ctaActiveClass
   now, the same in both modes — no mode-specific override needed here. */

/* Corporate/Wild Side mode toggle button + logo swap, shared by every page's nav */
html.mode-wild [data-mode-logo="wild"] { display: flex; }
html.mode-wild [data-mode-logo="corporate"] { display: none; }
html:not(.mode-wild) #btn-wild .fire-text {
  display: inline-block;
  background: linear-gradient(90deg, #8a8a8d 0%, #c97a3d 50%, #8a8a8d 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fire-text-shift 8s ease-in-out infinite;
}
@keyframes fire-text-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.mode-wild) #btn-wild .fire-text { animation: none; }
}

/* Cookie consent banner, themed to match the dark/red ShoutyBit palette */
#cc-main {
  --cc-font-family: 'IBM Plex Sans', sans-serif;
  --cc-bg: #17181a;
  --cc-primary-color: #f2f1ee;
  --cc-secondary-color: #b8b7b3;
  --cc-btn-primary-bg: #ff3b47;
  --cc-btn-primary-color: #0c0c0d;
  --cc-btn-primary-hover-bg: #ff5b65;
  --cc-btn-primary-hover-color: #0c0c0d;
  --cc-btn-secondary-bg: #0c0c0d;
  --cc-btn-secondary-color: #f2f1ee;
  --cc-btn-secondary-hover-bg: #2a2a2d;
  --cc-btn-secondary-hover-color: #f2f1ee;
  --cc-toggle-on-bg: #ff3b47;
  --cc-toggle-off-bg: #3a3a3d;
  --cc-toggle-on-knob-bg: #0c0c0d;
  --cc-toggle-off-knob-bg: #f2f1ee;
  --cc-separator-border-color: #2a2a2d;
  --cc-cookie-category-block-bg: #0c0c0d;
  --cc-cookie-category-block-hover-bg: #1e1e21;
  --cc-overlay-bg: rgba(12, 12, 13, .7);
  --cc-modal-border-radius: 10px;
  --cc-btn-border-radius: 6px;
  border: 1px solid #2a2a2d;
  box-shadow: 4px 4px 0 #000;
}
#cc-main .cm__title, #cc-main .pm__title { font-family: 'Archivo Black', sans-serif; }
#cc-main .cm__btn, #cc-main .pm__btn {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
/* Reject all reads as the outlined secondary action, matching the site's CTA pairing */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
  background: transparent;
  color: #f2f1ee;
  border: 1px solid #ff3b47;
}
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
  background: rgba(255, 59, 71, .12);
}