/* Shared interaction palette. Same feedback for pointer and keyboard navigation. */
html[data-mode=light]{--action-bg:#20222a;--action-fg:#ffffff;--link-hover:#963318;--action-shadow:0 4px 0 #ff754b;--focus-ink:#963318}
html[data-mode=dark]{--action-bg:#ff754b;--action-fg:#15121b;--link-hover:#ff956f;--action-shadow:0 4px 0 #b94a2d;--focus-ink:#ff956f}
html[data-mode=party]{--action-bg:#ff57df;--action-fg:#151021;--link-hover:#c7ff00;--action-shadow:0 0 18px #ff57df66;--focus-ink:#c7ff00}
html[data-mode] body :is(a[href],button,summary){transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;text-underline-offset:.22em}
/* Plain links retain their surrounding surface. */
html[data-mode] body a[href]:is(:hover,:focus-visible){color:var(--link-hover)!important;text-decoration:underline;text-decoration-thickness:2px;opacity:1;transform:none}
/* Filled controls share one accessible color pair per mode. */
html[data-mode] body :is(button:not(.gallery-photo):not(.load-video),a.button,a.nav-cta,a.mobile-inquiry,a.skip,a.saas-secondary,a.route-inquiry,a.product-pill,summary):not(:disabled):is(:hover,:focus-visible){background:var(--action-bg)!important;color:var(--action-fg)!important;border-color:var(--action-bg)!important;box-shadow:var(--action-shadow)!important;text-decoration:none;transform:none;opacity:1}
html[data-mode] body :is(button,summary):not(:disabled):is(:hover,:focus-visible)>span{color:inherit!important}
/* Media and linked cards use an inset accent rather than hiding their imagery. */
html[data-mode] body :is(a.build-card,.build-card>a,a.bento-small,a.bento-large,a.bento-detail,.social-links>a,.social-watch>a,button.gallery-photo,button.load-video):is(:hover,:focus-visible){box-shadow:inset 0 0 0 3px var(--focus-ink),var(--action-shadow)!important;outline:2px solid var(--focus-ink);outline-offset:3px;transform:none;opacity:1;text-decoration:none}
html[data-mode] body :is(a[href],button,summary,input,select,textarea):focus-visible{outline:3px solid var(--focus-ink)!important;outline-offset:4px}
/* Footer identity stays a single color in every mode, including linked marks. */
html[data-mode] body footer a.footer-word:is(:hover,:focus-visible){color:var(--footer-ink)!important;text-decoration:none;outline:2px solid var(--focus-ink);outline-offset:8px}
@media(prefers-reduced-motion:reduce){html[data-mode] body :is(a[href],button,summary){transition:none}}

/* Quiet, flat interaction treatment for the two everyday modes. */
html:is([data-mode=light],[data-mode=dark]){--action-shadow:none}
html:is([data-mode=light],[data-mode=dark]) body :is(a[href],button,summary):hover{box-shadow:none!important;outline:none!important;text-decoration-thickness:1px}
html:is([data-mode=light],[data-mode=dark]) body :is(a[href],button,summary):focus-visible{box-shadow:none!important;outline:2px solid var(--focus-ink)!important;outline-offset:4px}
html:is([data-mode=light],[data-mode=dark]) body :is(a.build-card,.build-card>a,a.bento-small,a.bento-large,a.bento-detail,.social-links>a,.social-watch>a,button.gallery-photo,button.load-video):hover{filter:brightness(.96)}

/* One header shared by all public pages. */
html[data-mode] body .site-header{position:relative;inset:auto;z-index:40;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:24px;padding:18px 5vw;min-height:94px;background:var(--theme-bg);color:var(--theme-text);border-bottom:1px solid var(--theme-border)}
html[data-mode] .site-header .brand{display:block;width:145px;flex:0 0 145px;line-height:0;padding:0}
.original-logo{display:block;width:100%;aspect-ratio:882/367;background:#ff6518;mask:url('/assets/logo.png') center/contain no-repeat;-webkit-mask:url('/assets/logo.png') center/contain no-repeat}
html[data-mode=party] .original-logo{background:#c7ff00}
html[data-mode] .site-header #navigation{position:static;display:flex;flex-direction:row;align-items:center;gap:26px;margin-left:auto;padding:0;border:0;background:transparent;color:inherit;font-size:12px}
html[data-mode] .site-header .nav-cta{margin:0;box-shadow:none;font-weight:600}
html[data-mode] .site-header .experience-modes{margin:0;flex-shrink:0}
html[data-mode] .site-header .menu{display:none;color:inherit}
@media(max-width:1000px){html[data-mode] body .site-header{display:grid;grid-template-columns:1fr auto;gap:12px 20px;padding:16px 6vw;min-height:0}html[data-mode] .site-header .brand{width:125px}html[data-mode] .site-header .menu{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px}html[data-mode] .site-header .experience-modes{grid-column:1/-1;justify-self:start}html[data-mode] .site-header #navigation{display:none;grid-column:1/-1;grid-row:3;flex-direction:column;align-items:stretch;width:100%;gap:4px;margin:0;padding:12px 0 0}html[data-mode] .site-header #navigation.open{display:flex}html[data-mode] .site-header #navigation>a{padding:14px 0}html[data-mode] .site-header .nav-cta{justify-content:space-between}}

/* Shared heading weight across pages, components, and color modes. */
:root{--heading-weight:700}
html[data-mode] body :is(h1,h2,h3,h4,h5,h6){font-family:var(--display);font-weight:var(--heading-weight)!important}
html[data-mode] body :is(h1,h2,h3,h4,h5,h6) :is(span,em,strong,b,a){font-weight:inherit!important}
html[data-mode] body :is(.social-links strong,.social-watch strong,summary){font-weight:var(--heading-weight)}

/* One type family throughout the site, including legacy labels and controls. */
:root{--site-font:Arial,Helvetica,sans-serif;--display:var(--site-font)}
html[data-mode] body,html[data-mode] body *{font-family:var(--site-font)!important}

/* Match the hero accent to the primary button orange. */
html:is([data-mode=light],[data-mode=dark]) .saas-intro h1>span{color:#ff754b!important}

.party-lasers{position:fixed;inset:0;z-index:36;pointer-events:none;overflow:hidden;contain:strict;display:none}
html[data-mode=party] .party-lasers{display:block}
.party-lasers i{position:absolute;top:0;width:2px;height:55vh;transform-origin:top center;background:linear-gradient(transparent,currentColor 18%,#fff 50%,currentColor 82%,transparent);box-shadow:0 0 7px currentColor;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.party-lasers{display:none!important}}

/* Light glass treatment; readable opaque fallbacks remain in older browsers. */
html[data-mode=light]{--glass-panel:rgba(244,243,238,.86)}
html[data-mode=dark]{--glass-panel:rgba(32,34,40,.86)}
html[data-mode=party]{--glass-panel:rgba(21,16,33,.86)}
@supports(backdrop-filter:blur(10px)){
 html[data-mode] body .site-header,html[data-mode] .experience-modes,html[data-mode] .project-tray{background:var(--glass-panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 html[data-mode] .bold-photo-tabs{background:var(--glass-panel);color:var(--theme-text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
html[data-mode] .project-tray{color:var(--theme-text)}