/* ===== BOLD MODE: acid green + black. Toggled by html.bold-mode ===== */
:root{--bold-green:#c6ff00;--bold-black:#000}

/* Toggle switch (visible in both modes) */
.bold-toggle{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1.5px solid #c6ff00;border-radius:100px;padding:8px 12px 8px 8px;color:#fff;font:800 11px/1 "DM Sans",Arial,sans-serif;letter-spacing:.1em;cursor:pointer;white-space:nowrap;transition:border-color .2s}
.bold-toggle:hover,.bold-toggle:focus-visible{border-color:#c6ff00;box-shadow:0 0 14px rgba(198,255,0,.35)}
.bold-toggle-track{position:relative;width:30px;height:16px;border-radius:100px;background:rgba(255,255,255,.22);transition:background .25s}
.bold-toggle-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .25s}
html.bold-mode .bold-toggle-track{background:rgba(198,255,0,.28)!important}
html.bold-mode .bold-toggle-knob{transform:translateX(14px);background:#c6ff00!important}
@media(max-width:720px){.bold-toggle{padding:6px 9px 6px 6px;font-size:9px;gap:6px;letter-spacing:.06em}}

/* Base: black and acid green alternate by section, so the green reads as the accent.
   Each block sets --fg (type/lines) and --bg (surface); children inherit. */
html.bold-mode{--g:#c6ff00;--k:#000;--green-filter:brightness(0) saturate(100%) invert(70%) sepia(85%) saturate(473%) hue-rotate(23deg) brightness(105%) contrast(122%)}
html.bold-mode,html.bold-mode body{background:#000!important;color:var(--g)!important;--fg:var(--g);--bg:var(--k)}
html.bold-mode body *{color:inherit!important;border-color:var(--fg)!important;text-shadow:none!important;box-shadow:none!important;background-color:transparent!important;background-image:none!important}
html.bold-mode ::selection{background:var(--g);color:#000}

/* Dark blocks: black surface, green type */
html.bold-mode .topline,html.bold-mode .client-reel,html.bold-mode .manifesto,html.bold-mode .work,html.bold-mode .process,html.bold-mode .reviews,html.bold-mode .team,html.bold-mode .contact,html.bold-mode footer,html.bold-mode #video-dialog,html.bold-mode .hero-video-dock{--fg:var(--g);--bg:var(--k);background-color:#000!important;color:var(--g)!important}
/* Green blocks: acid green surface, black type */
html.bold-mode .hero,html.bold-mode .ticker,html.bold-mode .break,html.bold-mode .services,html.bold-mode .faq,html.bold-mode .intro-screen{--fg:var(--k);--bg:var(--g);background-color:var(--g)!important;color:#000!important}

/* Header: translucent black glass over whatever scrolls beneath */
html.bold-mode body .header{--fg:var(--g);--bg:var(--k);background-color:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important;color:var(--g)!important;border-bottom:1px solid rgba(198,255,0,.35)!important}
html.bold-mode body .header nav.open{background-color:rgba(0,0,0,.92)!important}
html.bold-mode .header .bold-toggle{border-color:#c6ff00!important}
html.bold-mode body .bold-toggle{border:1.5px solid #c6ff00!important}

/* Filled elements flip the block's colors */
html.bold-mode body .navcta,html.bold-mode body .header .navcta,html.bold-mode body .button.dark,html.bold-mode body .hero .button.dark,html.bold-mode body .contact .button.dark,html.bold-mode body .contact form .button.dark,html.bold-mode body .mobilecta,html.bold-mode body .filter.active,html.bold-mode body .filter:hover,html.bold-mode body .project .project-arrow,html.bold-mode body .video-dialog-head button,html.bold-mode body #close-video,html.bold-mode body .hero-sticker,html.bold-mode body .hero-dock-close,html.bold-mode body .hero-video-audio,html.bold-mode body .hero-retry-play,html.bold-mode body .intro-skip:hover,html.bold-mode body .intro-skip:focus-visible,html.bold-mode body .button.outline:hover,html.bold-mode body .hero-secondary:hover{background:var(--fg)!important;color:var(--bg)!important}
html.bold-mode body .mobilecta{--fg:var(--g);--bg:var(--k)}
html.bold-mode .button,html.bold-mode .filter,html.bold-mode .hero-secondary{border:2px solid var(--fg)!important}

/* Outlined display words follow the block's type color */
html.bold-mode h1 em,html.bold-mode h2 em,html.bold-mode h2 i,html.bold-mode h2 span{-webkit-text-stroke-color:var(--fg)!important}

/* Cards and panels */
html.bold-mode .review,html.bold-mode .contact form,html.bold-mode .project{border:2px solid var(--fg)!important}
html.bold-mode .hero-feature.hero-video-slot{border:3px solid #000!important}
html.bold-mode .project{color:#fff!important}
html.bold-mode .hero-feature.hero-video-slot,html.bold-mode .hero-video-unit,html.bold-mode .hero-video-unit video{background-color:#000!important}
html.bold-mode .contact input::placeholder,html.bold-mode .contact textarea::placeholder{color:rgba(198,255,0,.5)!important}
html.bold-mode .contact select option{background:#000;color:var(--g)}

/* Logos keep their original colors in attention mode */
html.bold-mode .intro-logo{filter:brightness(0)!important}
html.bold-mode .intro-logo-fallback,html.bold-mode .intro-logo-fallback .blue{color:#000!important}

/* Particles and dots */
html.bold-mode .particle,html.bold-mode .pulse{background-color:var(--fg)!important}
/* Booking page: green page, black glass header and footer */
.header-right{display:flex;align-items:center;gap:18px}
html.bold-mode body:has(.calendar-frame){background:var(--g)!important;color:#000!important;--fg:var(--k);--bg:var(--g)}
html.bold-mode body:before{display:none!important}
html.bold-mode .footer{--fg:var(--g);--bg:var(--k);background-color:#000!important;color:var(--g)!important}
html.bold-mode .calendar-frame{border:3px solid #000!important;background-color:#fff!important}
html.bold-mode .calendar-frame iframe{background-color:#fff!important}
html.bold-mode body:has(.calendar-frame) .header{background-color:#000!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Attention mode: hollow, outlined INVISIBLE in the hero */
html.bold-mode body .hero h1 em{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:3px #000!important}
html.bold-mode body .hero h1 em .period{color:#000!important;-webkit-text-fill-color:#000!important;-webkit-text-stroke:0!important}
@media(max-width:720px){html.bold-mode body .hero h1 em{-webkit-text-stroke-width:1.5px!important}}