/* ════════════════════════════════════════════════════════════════════════════
   ASSETGUARD-GRADE OVERLAY  ·  v1.0  ·  2026-04-25
   Adds AssetGuard-tier hero, motion, and form polish ON TOP of each marketing
   site's existing style.css. NON-DESTRUCTIVE — every selector is namespaced
   under .ag- or scoped to .ag-hero / .ag-form. Existing site styles are
   preserved.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ag-bg:           #060A10;
  --ag-surface:      #0C1220;
  --ag-surface-2:    #111928;
  --ag-border:       #1E2D45;
  --ag-text:         #E8EFF8;
  --ag-text-muted:   #6B80A0;
  --ag-text-dim:     #3D5070;
  --ag-accent:       #E87722;          /* SlabWorx orange — overridden per site below */
  --ag-accent-hover: #ff9940;
  --ag-grid-line:    rgba(59,130,246,0.06);
  --ag-font-display: 'Clash Display', system-ui, sans-serif;
  --ag-font-body:    'Satoshi', system-ui, sans-serif;
  --ag-r-sm: 6px;
  --ag-r-md: 10px;
  --ag-r-lg: 16px;
  --ag-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═════ HERO ═════ */
.ag-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vw, 8rem) 1.5rem;
  overflow: hidden;
  background: var(--ag-bg);
  color: var(--ag-text);
  font-family: var(--ag-font-body);
}
.ag-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.18;
  pointer-events: none;
}
.ag-hero__bg-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,119,34,0.07) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 40%, var(--ag-bg) 100%),
    linear-gradient(to right, var(--ag-bg) 0%, transparent 30%, transparent 70%, var(--ag-bg) 100%);
  pointer-events: none;
}
.ag-hero__grid {
  pointer-events: none;
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ag-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ag-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.ag-hero__scanline {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,119,34,0.4), transparent);
  animation: ag-scanline 5s linear infinite;
  pointer-events: none;
}
@keyframes ag-scanline { 0%{top:0;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%;opacity:0;} }

.ag-hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3.5rem;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .ag-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ag-hero__panel { max-width: 480px; margin: 0 auto; width: 100%; }
}

.ag-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  background: rgba(232,119,34,0.08);
  border: 1px solid rgba(232,119,34,0.25);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.5rem;
}
.ag-hero__eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--ag-accent);
  border-radius: 50%;
  animation: ag-pulse 2s ease-in-out infinite;
}
@keyframes ag-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.55;transform:scale(0.85);} }
.ag-hero__eyebrow-text {
  font-family: var(--ag-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-accent);
}
.ag-hero__h1 {
  font-family: var(--ag-font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.85rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ag-text);
  margin: 0 0 1.5rem;
}
.ag-hero__h1 em {
  font-style: normal;
  color: var(--ag-accent);
  display: block;
}
.ag-hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  color: var(--ag-text-muted);
  max-width: 540px;
  margin: 0 0 2rem;
}
.ag-hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 600px) {
  .ag-hero__actions { flex-direction: column; }
  .ag-hero__actions .ag-btn { width: 100%; justify-content: center; }
}
.ag-hero__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--ag-border);
  padding-top: 1.5rem;
}
.ag-hero__stat {
  flex: 1; min-width: 110px;
  padding: 0 1.5rem;
  border-right: 1px solid var(--ag-border);
}
.ag-hero__stat:first-child { padding-left: 0; }
.ag-hero__stat:last-child  { border-right: none; }
@media (max-width: 600px) {
  .ag-hero__stats { flex-wrap: wrap; }
  .ag-hero__stat { flex: 1 0 50%; padding: 0.75rem 1rem; border: none; }
}
.ag-hero__stat-val {
  font-family: var(--ag-font-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ag-accent);
  line-height: 1;
  margin-bottom: 0.3rem;
  display: block;
}
.ag-hero__stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-text-dim);
}

/* RIGHT-SIDE LIVE PANEL */
.ag-hero__panel {
  background: var(--ag-surface);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-r-lg);
  overflow: hidden;
  position: relative;
}
.ag-hero__panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ag-accent), #3B82F6, var(--ag-accent));
  background-size: 200% 100%;
  animation: ag-gradient-slide 3s linear infinite;
}
@keyframes ag-gradient-slide { 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
.ag-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ag-border);
}
.ag-panel__title {
  font-family: var(--ag-font-display);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ag-text-muted);
}
.ag-panel__status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #22C55E;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ag-panel__status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: ag-pulse 1.5s ease-in-out infinite;
}
.ag-panel__body { padding: 1rem 1rem 1.25rem; }
.ag-panel__map-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ag-text-dim);
  margin-bottom: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ag-panel__map {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 1.25rem;
}
.ag-panel__cell {
  aspect-ratio: 1;
  border-radius: 2px;
}
.ag-panel__cell.danger     { background: #ef4444; }
.ag-panel__cell.danger-dim { background: rgba(239,68,68,0.35); }
.ag-panel__cell.warn       { background: #F59E0B; }
.ag-panel__cell.warn-dim   { background: rgba(245,158,11,0.35); }
.ag-panel__cell.ok         { background: #22C55E; }
.ag-panel__cell.ok-dim     { background: rgba(34,197,94,0.25); }

.ag-panel__bars {
  display: flex; flex-direction: column; gap: 0.55rem;
  border-top: 1px solid var(--ag-border);
  padding-top: 0.85rem;
}
.ag-panel__bar {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.72rem;
}
.ag-panel__bar-label {
  color: var(--ag-text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.ag-panel__bar-track {
  background: rgba(255,255,255,0.05);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.ag-panel__bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 1.2s var(--ag-ease-out);
}
.ag-panel__bar-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  text-align: right;
}

/* ═════ BUTTONS ═════ */
.ag-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--ag-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.65rem;
  border-radius: var(--ag-r-sm);
  transition: all 0.2s var(--ag-ease-out);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.ag-btn--primary {
  background: var(--ag-accent);
  color: var(--ag-bg);
  border-color: var(--ag-accent);
}
.ag-btn--primary:hover {
  background: var(--ag-accent-hover);
  border-color: var(--ag-accent-hover);
  transform: translateY(-1px);
}
.ag-btn--ghost {
  background: transparent;
  color: var(--ag-text);
  border: 1.5px solid var(--ag-border);
}
.ag-btn--ghost:hover {
  border-color: var(--ag-text-muted);
  background: rgba(255,255,255,0.03);
  transform: translateY(-1px);
}
.ag-btn--lg { padding: 1rem 2rem; font-size: 0.9rem; }

/* ═════ FORM (AssetGuard-grade) ═════ */
.ag-form {
  background: var(--ag-bg);
  padding: clamp(4rem, 7vw, 6rem) 1.5rem;
  border-top: 1px solid rgba(232,119,34,0.12);
  color: var(--ag-text);
  font-family: var(--ag-font-body);
}
.ag-form__inner { max-width: 760px; margin: 0 auto; }
.ag-form__eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ag-accent);
  margin-bottom: 1rem;
}
.ag-form__eyebrow::before {
  content: ''; display: block; width: 2rem; height: 1px;
  background: var(--ag-accent);
}
.ag-form__title {
  font-family: var(--ag-font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--ag-text);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.ag-form__sub { color: rgba(232,239,248,0.6); font-size: 1rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 580px; }
.ag-form__gate {
  background: rgba(232,119,34,0.06);
  border-left: 3px solid var(--ag-accent);
  padding: 1rem 1.25rem;
  border-radius: 0 3px 3px 0;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: rgba(232,239,248,0.78);
  line-height: 1.6;
  display: none;
}
.ag-form__gate.is-active { display: block; }
.ag-form__grid { display: grid; gap: 1rem; }
.ag-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .ag-form__row { grid-template-columns: 1fr; } }
.ag-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.ag-form__field label {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(232,239,248,0.6);
  font-family: var(--ag-font-display);
}
.ag-form__field input,
.ag-form__field select,
.ag-form__field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(232,119,34,0.2);
  color: var(--ag-text);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  font-size: 0.95rem;
  font-family: var(--ag-font-body);
  width: 100%; box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ag-form__field input:focus,
.ag-form__field select:focus,
.ag-form__field textarea:focus {
  outline: none;
  border-color: var(--ag-accent);
  box-shadow: 0 0 0 3px rgba(232,119,34,0.12);
}
.ag-form__field textarea { resize: vertical; min-height: 110px; }
.ag-form__submit { width: 100%; margin-top: 0.75rem; }
.ag-form__deposit-note {
  font-size: 0.75rem;
  color: rgba(232,239,248,0.45);
  text-align: center; line-height: 1.5;
  margin-top: 1rem;
}

/* ═════ MOTION STACK ═════ */
[data-ag-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ag-ease-out), transform 0.7s var(--ag-ease-out);
  will-change: opacity, transform;
}
[data-ag-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  [data-ag-reveal] { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-ag-reveal], [data-ag-reveal].is-visible { opacity: 1; transform: none; transition: none; }
  .ag-hero__scanline, .ag-hero__panel::before, .ag-hero__eyebrow-dot, .ag-panel__status-dot { animation: none !important; }
}

/* Subtle SlabWorx logo pulse on page load (per UX brief) */
.ag-logo-pulse {
  animation: ag-logo-in 1.2s var(--ag-ease-out) both;
}
@keyframes ag-logo-in {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1.00); }
}

/* ═════ PER-SITE ACCENT OVERRIDES ═════
   Each site sets an accent via [data-ag-brand]. This keeps the AssetGuard
   visual standard while honoring each brand's color identity.
*/
[data-ag-brand="cca"]  { --ag-accent: #1F4E8C; --ag-accent-hover: #2a64b0; } /* Concrete Assessments — diagnostic blue */
[data-ag-brand="ncr"]  { --ag-accent: #B22234; --ag-accent-hover: #d62b3f; } /* National Concrete Repair — civic red */
[data-ag-brand="uscr"] { --ag-accent: #B22234; --ag-accent-hover: #d62b3f; } /* US Concrete Repair — civic red */
[data-ag-brand="swvt"] { --ag-accent: #E87722; --ag-accent-hover: #ff9940; } /* SlabWorx VT — orange */
[data-ag-brand="vcr"]  { --ag-accent: #00703C; --ag-accent-hover: #008a4a; } /* VCR — Vermont evergreen */

/* ─── Hero brand mark (additive v3) ─── */
.ag-hero__brand-mark {
  display: block;
  height: 72px; width: auto;
  margin: 0 0 18px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55))
          drop-shadow(0 0 0 1px rgba(255,255,255,0.06));
  animation: agBrandPulse 4s ease-in-out infinite;
}
@keyframes agBrandPulse {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55)); }
  50%      { transform: scale(1.025) translateY(-1px); filter: drop-shadow(0 12px 28px rgba(240,128,48,0.32)); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-hero__brand-mark { animation: none; }
}

/* ─── Hero brand mark — overflow safety + horizontal lockup support (additive v4) ─── */
.ag-hero__brand-mark {
  max-width: 220px; /* hard cap so horizontal lockups don't overflow on mobile */
  object-fit: contain;
}
/* Horizontal lockups (SlabWorx, possibly VCR ribbon variants): smaller height, larger width budget */
[data-ag-brand="swvt"] .ag-hero__brand-mark {
  height: 56px;
  max-width: 240px;
}
@media (max-width: 640px) {
  .ag-hero__brand-mark { height: 56px; max-width: 75vw; }
  [data-ag-brand="swvt"] .ag-hero__brand-mark { height: 44px; max-width: 70vw; }
}

/* ─── Eyebrow safe-wrap on narrow screens ─── */
@media (max-width: 640px) {
  .ag-hero__eyebrow {
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .ag-hero__eyebrow-text {
    white-space: normal;
    line-height: 1.35;
  }
  .ag-hero__inner { padding-left: 18px; padding-right: 18px; }
}

/* ─── Hero content overflow safety v5 ─── */
.ag-hero__content {
  min-width: 0; /* critical for grid item to allow children to wrap */
  max-width: 100%;
}
.ag-hero__content > * {
  max-width: 100%;
}
.ag-hero__h1 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 640px) {
  .ag-hero__eyebrow-text { font-size: 0.66rem; letter-spacing: 0.10em; }
}

/* ─── Global mobile overflow hard-stop (safety net) ─── */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body * { max-width: 100%; box-sizing: border-box; }
  img, svg, video, iframe { max-width: 100% !important; height: auto; }
  /* Allow grids to collapse if any leftover 2-col blocks exist */
  [class*="-grid"], [class*="grid-"] { grid-template-columns: 1fr !important; }
  /* Section padding sanity */
  section { padding-left: clamp(16px, 4vw, 24px); padding-right: clamp(16px, 4vw, 24px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN + UX CORRECTION OVERRIDE  ·  v2.0  ·  2026-04-25
   Universal high-end visual overlay applied across all 5 main domains.
   Reference standard: assetguard.slabworxvt.com  ·  investor.slabworxvt.com
   Visual / UX / branding only — no backend or DOM-structural changes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. UNIFY NAV: kill duplicate menus, single header on all viewports ─── */
.site-header,
.global-nav,
.legacy-nav,
nav.legacy {
  position: relative;
}
/* Hide any duplicate visible-on-mobile inline pill links inside top bar */
@media (max-width: 768px) {
  .site-header .phone-pill,
  .site-header .nav-pill-phone,
  .site-header .nav-pill-assetguard,
  .site-header [data-nav-pill],
  header [data-nav-pill] { display: none !important; }
  /* Move them into the hamburger drawer instead */
  .nav-drawer .phone-pill,
  .nav-drawer .nav-pill-phone,
  .nav-drawer .nav-pill-assetguard,
  .nav-drawer [data-nav-pill] {
    display: flex !important;
    margin: 0.5rem 0;
    width: 100%;
    justify-content: center;
  }
  /* Belt-and-suspenders: if a second nav exists, hide the duplicate one */
  body > nav ~ nav,
  body header ~ header { display: none !important; }
}
/* Brand-mark in nav: consistent sizing, no glow bleed */
.site-header .brand-mark,
.site-header .logo,
.site-header img[src*="emblem"],
.site-header img[src*="logo"] {
  height: 36px !important;
  width: auto !important;
  max-width: 200px !important;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
@media (max-width: 480px) {
  .site-header .brand-mark,
  .site-header .logo,
  .site-header img[src*="emblem"],
  .site-header img[src*="logo"] {
    height: 32px !important;
    max-width: 160px !important;
  }
}

/* ─── 2. HERO: dark navy intact, eyebrow inside hero, single primary CTA ─── */
.ag-hero,
.hero,
section.hero,
[data-hero] {
  background: var(--ag-bg, #060A10) !important;
  color: var(--ag-text, #E8EFF8);
}
/* Eyebrow pill — must sit inside the hero, never orphaned on white */
.ag-hero .ag-eyebrow,
.ag-hero .eyebrow,
.hero .eyebrow,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(232,119,34,0.10);
  border: 1px solid rgba(232,119,34,0.35);
  border-radius: 999px;
  font-family: var(--ag-font-display, 'Clash Display', system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-accent, #E87722);
  margin-bottom: 1.25rem;
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 1.4;
}
.ag-hero .ag-eyebrow::before,
.ag-hero .eyebrow::before,
.hero .eyebrow::before,
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ag-accent, #E87722);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232,119,34,0.6);
}
/* Single primary CTA hierarchy — lock secondary buttons to ghost style */
.ag-hero .btn-primary,
.hero .btn-primary,
.cta-row > a:first-child,
.cta-row > button:first-child {
  background: var(--ag-accent, #E87722) !important;
  color: #060A10 !important;
  border: 1px solid var(--ag-accent, #E87722) !important;
  font-weight: 600;
}
.ag-hero .btn-primary:hover,
.hero .btn-primary:hover,
.cta-row > a:first-child:hover {
  background: var(--ag-accent-hover, #ff9940) !important;
  transform: translateY(-1px);
}
.ag-hero .btn-secondary,
.hero .btn-secondary,
.cta-row > a:nth-child(n+2),
.cta-row > button:nth-child(n+2) {
  background: transparent !important;
  color: var(--ag-text, #E8EFF8) !important;
  border: 1px solid rgba(232,235,224,0.25) !important;
  font-weight: 500;
}

/* ─── 3. AUTHORITY ITEMS: contained pill grid, never orphaned text ─── */
.authority-grid,
.ag-authority-grid,
[data-authority-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(12,18,32,0.6);
  border: 1px solid rgba(232,119,34,0.18);
  border-radius: 10px;
}
.authority-grid > *,
.ag-authority-grid > *,
[data-authority-grid] > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.6rem 0.5rem;
  font-family: var(--ag-font-display, 'Clash Display', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-accent, #E87722);
  background: rgba(232,119,34,0.06);
  border: 1px solid rgba(232,119,34,0.2);
  border-radius: 6px;
  line-height: 1.3;
  min-height: 48px;
  justify-content: center;
}
@media (max-width: 480px) {
  .authority-grid,
  .ag-authority-grid,
  [data-authority-grid] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
  }
}

/* ─── 4. LOSS-AVERSION BAND: contained card, no clip at fold ─── */
.loss-band,
.ag-loss-band,
[data-loss-band] {
  position: relative;
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(232,119,34,0.06));
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 12px;
  max-width: 100%;
  overflow: visible;
}
.loss-band::before,
.ag-loss-band::before,
[data-loss-band]::before {
  content: '⚠';
  position: absolute;
  top: -14px; left: 1.5rem;
  background: rgba(239,68,68,0.95);
  color: #060A10;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
}
.loss-band__label,
.ag-loss-band__label {
  font-family: var(--ag-font-display, 'Clash Display', system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239,68,68,0.85);
  margin-bottom: 0.5rem;
}
.loss-band h3,
.ag-loss-band h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--ag-text, #E8EFF8);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}
.loss-band p,
.ag-loss-band p {
  font-size: 0.9rem;
  color: var(--ag-text-muted, #6B80A0);
  line-height: 1.6;
}

/* ─── 5. PANELS / CARDS: AssetGuard-grade treatment ─── */
.ag-card,
.brand-card,
[data-card] {
  background: var(--ag-surface, #0C1220);
  border: 1px solid var(--ag-border, #1E2D45);
  border-radius: 10px;
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
.ag-card:hover,
.brand-card:hover,
[data-card]:hover {
  border-color: rgba(232,119,34,0.4);
  transform: translateY(-2px);
}

/* ─── 6. BADGES: clean uppercase pills ─── */
.ag-badge,
.section-badge,
[data-badge] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--ag-font-display, 'Clash Display', system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ag-accent, #E87722);
  background: rgba(232,119,34,0.08);
  border: 1px solid rgba(232,119,34,0.3);
  border-radius: 4px;
}

/* ─── 7. SITE-SPECIFIC ACCENT TUNING (palette swap on body class) ─── */
body.site-vcr {
  --ag-accent: #22A65E;     /* Vermont forest green for VCR rapid-response */
  --ag-accent-hover: #28C26F;
}
body.site-vcr .ag-eyebrow,
body.site-vcr .eyebrow,
body.site-vcr .hero-eyebrow {
  background: rgba(34,166,94,0.1);
  border-color: rgba(34,166,94,0.4);
  color: #22A65E;
}
body.site-vcr .ag-eyebrow::before,
body.site-vcr .eyebrow::before,
body.site-vcr .hero-eyebrow::before {
  background: #22A65E;
  box-shadow: 0 0 8px rgba(34,166,94,0.6);
}
body.site-vcr .authority-grid > *,
body.site-vcr .ag-authority-grid > *,
body.site-vcr [data-authority-grid] > * {
  color: #22A65E;
  background: rgba(34,166,94,0.06);
  border-color: rgba(34,166,94,0.25);
}
body.site-vcr .ag-badge,
body.site-vcr .section-badge,
body.site-vcr [data-badge] {
  color: #22A65E;
  background: rgba(34,166,94,0.08);
  border-color: rgba(34,166,94,0.35);
}
body.site-vcr .ag-hero .btn-primary,
body.site-vcr .hero .btn-primary {
  background: #22A65E !important;
  border-color: #22A65E !important;
  color: #060A10 !important;
}
body.site-vcr .ag-hero .btn-primary:hover {
  background: #28C26F !important;
}

/* ─── 8. NEVER allow hero to invert to white ─── */
body main > section:first-of-type,
body main > .ag-hero,
body .ag-hero {
  background-color: var(--ag-bg, #060A10) !important;
}

/* ─── 9. Mobile typography safety (no orphan eyebrows on white) ─── */
@media (max-width: 640px) {
  .ag-hero,
  .hero,
  section.hero {
    padding-top: clamp(5rem, 12vw, 7rem) !important;
    padding-bottom: clamp(3rem, 8vw, 5rem) !important;
  }
  .ag-hero h1,
  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.1 !important;
  }
}

/* ─── 10. NAV: shrink-on-scroll ─── */
.site-header,
header.global-nav,
.sw-nav {
  transition:
    background-color 250ms ease,
    backdrop-filter 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}
.site-header.is-scrolled,
header.global-nav.is-scrolled,
.sw-nav.is-scrolled {
  background-color: rgba(6, 10, 16, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(232, 119, 34, 0.18) !important;
}