/*
 * Site Alive design: VOLTAGE - electric, loud and unforgettable (Claude's own design, 0.7.1).
 * A dark stage: the arrival surge (engine.css), live electricity in the hero, glowing condensed
 * type, buttons that spark, sections that switch on like faulty neon, a circuit grid underneath.
 * Colours come from the colour scheme (theme.css); everything is scoped to html.design-voltage.
 */
html.design-voltage { --glow: color-mix(in srgb, var(--c-primary) 55%, transparent); --h-track: .01em; }
html.design-voltage body.sa-site { background: var(--c-paper); background-image: linear-gradient(color-mix(in srgb, var(--c-primary) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 5%, transparent) 1px, transparent 1px); background-size: 64px 64px; background-attachment: fixed; }
html.design-voltage h1, html.design-voltage h2, html.design-voltage .sa-h { letter-spacing: var(--h-track); }
html.design-voltage .sa-h { font-size: calc(clamp(2.6rem, 4vw + 1rem, 5.6rem) * var(--h-scale)); line-height: .92; text-shadow: 0 0 30px color-mix(in srgb, var(--c-primary) 22%, transparent); }
html.design-voltage .sa-h .sa-accent, html.design-voltage .sa-accent { color: var(--c-primary); font-style: normal; text-shadow: 0 0 18px var(--glow); }
html.design-voltage h3 { letter-spacing: .02em; }
html.design-voltage ::selection { background: var(--c-primary); color: var(--c-dark); }

/* ---------- header: a thin glass bar that glows along its bottom edge ---------- */
html.design-voltage .sa-header { background: color-mix(in srgb, var(--c-paper) 78%, transparent); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 25%, transparent); box-shadow: 0 1px 24px -8px var(--glow); }
html.design-voltage .sa-header.is-over:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
html.design-voltage .sa-header .sa-header-in { min-height: 76px; }
html.design-voltage .sa-brand { font-family: var(--f-head); font-size: 1.7rem; letter-spacing: .08em; text-transform: uppercase; }
html.design-voltage .sa-menu > li > a { font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: .6rem .8rem; }
html.design-voltage .sa-menu > li > a::after { height: 2px; background: var(--c-primary); box-shadow: 0 0 10px var(--c-primary); border-radius: 0; }
html.design-voltage .sa-menu > li > a:hover { color: var(--c-primary); text-shadow: 0 0 12px var(--glow); }

/* ---------- buttons: square, electric outline, they spark when you point at them ---------- */
html.design-voltage .sa-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; padding: 1.05em 1.8em; position: relative; overflow: hidden; }
html.design-voltage .sa-btn.btn-primary { background: var(--c-primary); color: var(--c-dark); box-shadow: 0 0 24px -4px var(--c-primary); }
html.design-voltage .sa-btn.btn-primary:hover { background: #fff; box-shadow: 0 0 0 2px var(--c-primary), 0 0 40px var(--c-primary); transform: translateY(-1px); }
html.design-voltage .sa-btn:not(.btn-primary) { background: transparent; color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); }
html.design-voltage .sa-btn:not(.btn-primary):hover { border-color: var(--c-primary); color: var(--c-primary); box-shadow: inset 0 0 18px -6px var(--c-primary), 0 0 22px -8px var(--c-primary); }
html.design-voltage .sa-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
html.design-voltage .sa-btn:hover::after { left: 130%; transition: left .5s ease; }
html.design-voltage .sa-eyebrow { color: var(--c-primary); font-size: .76rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
html.design-voltage .sa-eyebrow::before { background: var(--c-primary); box-shadow: 0 0 8px var(--c-primary); }

/* ---------- sections switch on: a quick flicker as each one arrives ---------- */
html.design-voltage.sa-js[data-motion]:not([data-motion="off"]) .sa-main > .sa-sec:not(.hero-surge):not(.hero-impact) { opacity: 0; }
html.design-voltage.sa-js .sa-main > .sa-sec.sa-in { animation: vt-on .55s steps(1, end) forwards; }
@keyframes vt-on { 0% { opacity: .6; } 12% { opacity: .1; } 24% { opacity: .9; } 34% { opacity: .3; } 46%, 100% { opacity: 1; } }
html.design-voltage .tone-alt { background: color-mix(in srgb, var(--c-surface) 85%, transparent); }
html.design-voltage .tone-light { background: transparent; }
html.design-voltage .sa-card, html.design-voltage .sa-quote, html.design-voltage .sa-faq-item, html.design-voltage .sa-news-item { background: color-mix(in srgb, var(--c-surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent); border-radius: 0; box-shadow: none; }
html.design-voltage .sa-card:hover, html.design-voltage .sa-quote:hover { border-color: color-mix(in srgb, var(--c-primary) 60%, transparent); box-shadow: 0 0 34px -12px var(--c-primary); }
html.design-voltage .sa-stars, html.design-voltage .sa-star { color: var(--c-primary); }
html.design-voltage img { border-radius: 0; }
html.design-voltage .sa-split-media img, html.design-voltage .sa-gal-item img { filter: contrast(1.08) saturate(1.1); }
html.design-voltage .sa-split-media { position: relative; }
html.design-voltage .sa-split-media::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--c-primary); box-shadow: 0 0 20px -6px var(--c-primary); pointer-events: none; z-index: -1; }
html.design-voltage .sa-field input, html.design-voltage .sa-field textarea, html.design-voltage .sa-field select { border-radius: 0; background: color-mix(in srgb, var(--c-surface) 80%, transparent); border-color: color-mix(in srgb, var(--c-primary) 25%, transparent); }
html.design-voltage .sa-field input:focus, html.design-voltage .sa-field textarea:focus, html.design-voltage .sa-field select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent); }

/* ---------- footer: black, a live wire along the top ---------- */
html.design-voltage .sa-footer { background: #000; border-top: 1px solid var(--c-primary); box-shadow: 0 -1px 30px -6px var(--glow); }
html.design-voltage .sa-footer .sa-fh { font-family: var(--f-head); font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { html.design-voltage .sa-main > .sa-sec { opacity: 1 !important; animation: none !important; } html.design-voltage .sa-btn:hover::after { transition: none; } }