/* Shared visual system for the Knox portfolio sites. Brand accents are selected by data-site. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
img, picture, video, iframe, svg, canvas { max-width: 100%; }
main, section, article, aside, header, footer, nav, form, fieldset, .grid-2, .grid-3, .grid-4 { min-width: 0; }
body[data-site] {
  --ink: #f4f7fb;
  --muted: #aeb9c9;
  --surface: #111a29;
  --surface-raised: #172235;
  --line: rgba(226, 235, 247, .12);
  --primary: #42d6c5;
  --accent: #82e5d6;
  --primary-glow: rgba(66, 214, 197, .18);
  --bg-dark: #0a111c;
  --bg-base: #0a111c;
  --bg-surface: #0a111c;
  --bg-card: rgba(17, 26, 41, .92);
  --card-bg: rgba(17, 26, 41, .92);
  --bg-glass: rgba(17, 26, 41, .78);
  --bg-glass-elevated: #172235;
  --bg-card-hover: #1b2a3e;
  --border-glass: rgba(226, 235, 247, .12);
  --border-glass-bright: color-mix(in srgb, var(--primary) 52%, transparent);
  --border-glow: color-mix(in srgb, var(--primary) 45%, transparent);
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --text-dim: #8998ac;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 78% 2%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 31rem),
    linear-gradient(180deg, #0c1420 0%, #0a111c 58%, #0b121d 100%) !important;
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body[data-site="cpavo.com"] { --primary:#54dfc4; --accent:#9af0dc; --primary-glow:rgba(84,223,196,.2); }
body[data-site="uhostapp.com"] { --primary:#b59aff; --accent:#d4c3ff; --primary-glow:rgba(181,154,255,.2); }
body[data-site="exteriorimagespainting.com"] { --primary:#8bc79c; --accent:#d7b47a; --primary-glow:rgba(139,199,156,.2); }
body[data-site="handyknox.com"] { --primary:#f1b96e; --accent:#f5d19b; --primary-glow:rgba(241,185,110,.2); }
body[data-site="n-xs.com"] { --primary:#84aaff; --accent:#bdd0ff; --primary-glow:rgba(132,170,255,.2); }
body[data-site="nxsecured.com"] { --primary:#f47c83; --accent:#ffb3a9; --primary-glow:rgba(244,124,131,.2); }
body[data-site="cashknox.com"] { --primary:#66d9a8; --accent:#f1ce70; --primary-glow:rgba(102,217,168,.2); }
body[data-site="knox-conn.com"] { --primary:#8ec8f3; --accent:#c0a8f6; --primary-glow:rgba(142,200,243,.2); }
body[data-site="knoxconn.com"] { --primary:#c1a0f6; --accent:#f2a4cf; --primary-glow:rgba(193,160,246,.2); }
body[data-site="knoxconn.net"] { --primary:#70c9e2; --accent:#91b9ff; --primary-glow:rgba(112,201,226,.2); }

body[data-site] a { color: var(--primary); text-decoration-thickness: .08em; text-underline-offset: .2em; }
body[data-site] a:hover { color: var(--accent); text-shadow: none; }
body[data-site] :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
body[data-site] h1, body[data-site] h2, body[data-site] h3, body[data-site] h4,
body[data-site] p, body[data-site] li, body[data-site] a, body[data-site] button,
body[data-site] td, body[data-site] th { overflow-wrap: anywhere; }
body[data-site] header.nav-header,
body[data-site] > header {
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px);
  background: rgba(10,17,28,.94) !important; border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
body[data-site] .nav-container { width: min(100%, 1320px); padding: .9rem clamp(1rem,3vw,2rem); gap: 1rem; }
body[data-site] .brand-logo, body[data-site] .logo-title { color: var(--ink); letter-spacing: -.035em; }
body[data-site] .brand-icon, body[data-site] .shield-badge, body[data-site] .logo-box {
  box-shadow: none; border-radius: 12px;
}
body[data-site] nav.nav-links a, body[data-site] .desktop-nav a, body[data-site] .nav-link {
  color: var(--muted); border-color: transparent; font-weight: 600; text-shadow: none;
}
body[data-site] nav.nav-links a:hover, body[data-site] nav.nav-links a.active,
body[data-site] .desktop-nav a:hover, body[data-site] .desktop-nav a.active,
body[data-site] .nav-link:hover, body[data-site] .nav-link.active {
  color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--line);
}
body[data-site] .btn, body[data-site] .btn-primary, body[data-site] .btn-cta,
body[data-site] .btn-neon, body[data-site] .btn-laser, body[data-site] .btn-nexus,
body[data-site] .btn-violet, body[data-site] .btn-submit {
  min-height: 46px; border-radius: 12px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: none; transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
body[data-site] .btn-primary, body[data-site] .btn-cta, body[data-site] .btn-neon,
body[data-site] .btn-laser, body[data-site] .btn-nexus, body[data-site] .btn-violet,
body[data-site] .btn-submit { color: #101820; background: var(--primary); border: 1px solid var(--primary); }
body[data-site] .btn-primary:hover, body[data-site] .btn-cta:hover,
body[data-site] .btn-neon:hover, body[data-site] .btn-laser:hover,
body[data-site] .btn-nexus:hover, body[data-site] .btn-violet:hover,
body[data-site] .btn-submit:hover { color:#101820; background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
body[data-site] .btn-secondary, body[data-site] .btn-glass { color:var(--ink); background:rgba(255,255,255,.045); border:1px solid var(--line); }

body[data-site] main { width: min(100%, 1360px); margin-inline: auto; padding-inline: clamp(1rem, 3.5vw, 3rem); }
body[data-site] .container { width: min(100%, 1280px); padding: clamp(2.25rem,5vw,4.5rem) clamp(1rem,3vw,2rem); }
body[data-site] .hero-section, body[data-site] .hero-wrap {
  max-width: 1120px; margin-inline: auto; padding: clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
  text-align: left;
}
body[data-site] .hero-section::before, body[data-site] .hero-wrap::before {
  content:""; display:block; width:52px; height:4px; margin:0 0 1.6rem;
  border-radius:9px; background:linear-gradient(90deg,var(--primary),var(--accent));
}
body[data-site] .hero-title {
  max-width: 980px; font-size: clamp(2.35rem,6.1vw,5.2rem); line-height:1.04;
  letter-spacing:-.055em; font-weight:760; margin:0 0 1.35rem;
  background:linear-gradient(100deg,#fff 10%,color-mix(in srgb,var(--primary) 82%,white) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body[data-site] .hero-subtitle, body[data-site] .hero-desc {
  max-width: 750px; margin:0 0 2rem; color:#b5c1d1; font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.75;
}
body[data-site] .hero-badge, body[data-site] .hero-pill, body[data-site] .hero-eyebrow {
  color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 28%,transparent); border-radius:999px;
  font-size:.76rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
}
body[data-site] .hero-stats, body[data-site] .stats-grid { justify-content:flex-start; gap:clamp(1.3rem,4vw,3rem); }
body[data-site] .stat-number, body[data-site] .stat-val { color:var(--ink); }
body[data-site] .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
body[data-site] .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
body[data-site] .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
body[data-site] .glass-card, body[data-site] .stat-card, body[data-site] .feature-card,
body[data-site] .kb-category-card, body[data-site] .kb-article-item {
  color:var(--ink); background:linear-gradient(145deg,rgba(24,36,54,.94),rgba(15,24,38,.94)) !important;
  border:1px solid var(--line) !important; border-radius:18px !important;
  box-shadow:0 14px 38px rgba(0,0,0,.16) !important; backdrop-filter:blur(10px);
  padding:clamp(1.2rem,2.5vw,2rem); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body[data-site] .glass-card:hover, body[data-site] .feature-card:hover,
body[data-site] .kb-category-card:hover, body[data-site] .kb-article-item:hover {
  transform:translateY(-3px); border-color:color-mix(in srgb,var(--primary) 42%,transparent) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.24) !important;
}
body[data-site] h1, body[data-site] h2, body[data-site] h3, body[data-site] h4 { color:var(--ink); letter-spacing:-.025em; line-height:1.2; }
body[data-site] p, body[data-site] li { color:inherit; }
body[data-site] .hero-subtitle, body[data-site] .hero-desc, body[data-site] .footer-copy { color:var(--muted); }
body[data-site] .form-group label, body[data-site] .form-label { color:#d2dbe7; font-weight:650; }
body[data-site] .form-control, body[data-site] input, body[data-site] select, body[data-site] textarea {
  max-width:100%; min-height:48px; color:var(--ink); background:#0d1725;
  border:1px solid rgba(226,235,247,.18); border-radius:11px; font:inherit;
}
body[data-site] textarea, body[data-site] textarea.form-control { min-height:120px; }
body[data-site] .form-control:focus, body[data-site] input:focus, body[data-site] select:focus, body[data-site] textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:0; background:#0d1725;
}
body[data-site] input::placeholder, body[data-site] textarea::placeholder { color:#8391a4; opacity:1; }
body[data-site] pre, body[data-site] code, body[data-site] .mono,
body[data-site] .terminal-box, body[data-site] .code-box { max-width:100%; overflow-wrap:anywhere; }
body[data-site] pre, body[data-site] .terminal-box, body[data-site] .code-box { overflow-x:auto; }
body[data-site] table { display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; }
body[data-site] th, body[data-site] td { min-width:0; }
body[data-site] .grid-2 > *, body[data-site] .grid-3 > *, body[data-site] .grid-4 > *,
body[data-site] .footer-grid > *, body[data-site] .footer-container > * { min-width:0; }
body[data-site] th { color:var(--primary); background:rgba(255,255,255,.045); }
body[data-site] td { border-color:var(--line); }
body[data-site] footer.page-footer, body[data-site] footer { border-top:1px solid var(--line); background:#090f18 !important; }
body[data-site] .footer-grid, body[data-site] .footer-container { gap:2rem; }
body[data-site] .alert { border-radius:14px; }
body[data-site] .mobile-menu-btn { min-width:44px; min-height:44px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:11px; }
body[data-site] .mobile-drawer { background:#0d1725; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 18px 40px rgba(0,0,0,.28); }
body[data-site] #mobileDrawer { max-width:100%; max-height:calc(100dvh - 76px); overflow-y:auto; overscroll-behavior:contain; background:#0d1725 !important; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow:0 18px 40px rgba(0,0,0,.28); }
body[data-site] #mobileDrawer a, body[data-site] .mobile-drawer a { display:flex; align-items:center; min-height:44px; padding:.55rem .65rem; border-radius:9px; }
body[data-site="nxsecured.com"] .mobile-drawer { top:76px; padding:1.1rem; }
body[data-site] #ambient-canvas { max-width:none; }

@media (max-width: 1280px) {
  body[data-site] header.nav-header .nav-container,
  body[data-site] header:not(.nav-header) .nav-container { flex-wrap:wrap; }
  body[data-site] header.nav-header .nav-links { order:3; width:100%; display:flex; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; gap:.35rem; padding:.15rem 0 .35rem; }
  body[data-site] header.nav-header .nav-links a { flex:0 0 auto; white-space:nowrap; }
  body[data-site] header.nav-header .nav-cta { order:2; margin-left:auto; }
  body[data-site] header:not(.nav-header) .nav-container > .nav-links { order:3; width:100%; display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; gap:.25rem; }
  body[data-site] header:not(.nav-header) .nav-container > .nav-links a { flex:0 0 auto; white-space:nowrap; }
  body[data-site] header:not(.nav-header) .nav-container > .nav-cta { order:2; margin-left:auto; }
  body[data-site="nxsecured.com"] > header { gap:.6rem; padding:.85rem 1rem; }
  body[data-site="nxsecured.com"] nav.desktop-nav { gap:.2rem; flex-wrap:wrap; justify-content:flex-end; }
  body[data-site="nxsecured.com"] nav.desktop-nav a { padding:.3rem .4rem; font-size:.78rem; }
}
@media (max-width: 1120px) {
  body[data-site] .grid-3, body[data-site] .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-site] .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  html { scroll-padding-top:9rem; }
  body[data-site] main { padding-inline:1rem; }
  body[data-site] header.nav-header .nav-links, body[data-site] header:not(.nav-header) .nav-container > .nav-links { padding:.15rem .1rem .4rem; }
  body[data-site] .container { padding:2.5rem 0; }
  body[data-site] .hero-section, body[data-site] .hero-wrap { padding:3rem 0 2.75rem; }
  body[data-site] .hero-title { font-size:clamp(2.1rem,11vw,3.3rem); }
  body[data-site] .hero-subtitle, body[data-site] .hero-desc { font-size:1rem; }
  body[data-site] .grid-2, body[data-site] .grid-3, body[data-site] .grid-4,
  body[data-site] .footer-grid { grid-template-columns:minmax(0,1fr); gap:.9rem; }
  body[data-site] .glass-card, body[data-site] .stat-card, body[data-site] .feature-card,
  body[data-site] .kb-category-card, body[data-site] .kb-article-item { padding:1.2rem; }
  body[data-site] .hero-actions { justify-content:flex-start; gap:.75rem; }
  body[data-site] .hero-actions .btn, body[data-site] .hero-actions a { width:100%; }
  body[data-site] .hero-stats, body[data-site] .stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  body[data-site] .nav-container { padding:.7rem 1rem; }
  body[data-site] .brand-logo { font-size:1.08rem; }
  body[data-site] .nav-cta { gap:.45rem; }
  body[data-site] .nav-cta .btn { padding:.55rem .8rem; font-size:.8rem; }
  body[data-site] .footer-bottom { align-items:flex-start; flex-direction:column; }
  body[data-site] .table-wrap, body[data-site] .table-responsive { max-width:100%; overflow-x:auto; }
  body[data-site] form .btn, body[data-site] form button { width:100%; min-height:50px; }
  body[data-site] .nav-container { gap:.55rem; }
  body[data-site] .brand-logo { max-width:calc(100vw - 100px); overflow-wrap:anywhere; }
  body[data-site] .brand-badge { display:none; }
  body[data-site] .glass-card-header { align-items:flex-start; flex-wrap:wrap; }
}
@media (max-width: 768px) {
  /* The four app-style sites have real drawers; retain those instead of hiding their menu trigger. */
  body[data-site="cashknox.com"] header:not(.nav-header) .nav-container > .nav-links,
  body[data-site="knox-conn.com"] header:not(.nav-header) .nav-container > .nav-links,
  body[data-site="knoxconn.com"] header:not(.nav-header) .nav-container > .nav-links,
  body[data-site="knoxconn.net"] header:not(.nav-header) .nav-container > .nav-links { display:none; }
  body[data-site="cashknox.com"] header:not(.nav-header) .nav-container > .nav-cta,
  body[data-site="knox-conn.com"] header:not(.nav-header) .nav-container > .nav-cta,
  body[data-site="knoxconn.com"] header:not(.nav-header) .nav-container > .nav-cta,
  body[data-site="knoxconn.net"] header:not(.nav-header) .nav-container > .nav-cta { display:none; }
  body[data-site="cashknox.com"] .mobile-menu-btn,
  body[data-site="knox-conn.com"] .mobile-menu-btn,
  body[data-site="knoxconn.com"] .mobile-menu-btn,
  body[data-site="knoxconn.net"] .mobile-menu-btn { display:block; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-site] *, body[data-site] *::before, body[data-site] *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}