/* ============================================================
   Digital Guard — Complete Design System
   Fonts:  Manrope (headings/nav/buttons) + Inter (body)
   Color:  Charcoal authority, Red accent, White/Off-white content
   Grid:   12-col desktop, 8-col tablet, 4-col mobile, max 1200px
   Spacing: 8-point base scale
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Brand Colors --- */
  --logo-red:         #ED1C24;   /* Logo red — logo and critical brand accents only */
  --red:              #C9252C;   /* Primary interface red — buttons, links, accents */
  --red-hover:        #A91E24;   /* Button hover */
  --red-active:       #8E181E;   /* Button active/pressed */
  --red-soft-bg:      #FBEAEC;   /* Soft red background for highlight areas */

  /* --- Charcoal & Neutrals --- */
  --charcoal:         #171A1D;   /* Deep authority sections, nav drawer, footer */
  --carbon:           #0B0D0F;   /* Darkest — near-black text on very dark BG */
  --steel:            #59636C;   /* Supporting text, borders, captions */
  --light-steel:      #E7EAED;   /* Borders, dividers, light backgrounds */
  --off-white:        #F7F8F8;   /* Alternate section backgrounds */
  --white:            #FFFFFF;   /* Primary content surface */

  /* --- Supporting Technical Blue --- */
  --tech-blue:        #315A73;
  --tech-blue-light:  #DDE8EE;

  /* --- Semantic Colors --- */
  --success:          #237A4B;
  --success-bg:       #E4F4EB;
  --warning:          #A96500;
  --warning-bg:       #FFF1D6;
  --error:            #B42318;
  --error-bg:         #FDE7E5;

  /* --- Text Colors --- */
  --text-heading:     #171A1D;   /* Charcoal for all headings */
  --text-body:        #3A4148;   /* Slightly softened body text */
  --text-support:     #59636C;   /* Steel gray for captions, labels */
  --text-muted:       #8A939B;   /* Muted supporting text */
  --text-on-dark:     #FFFFFF;
  --text-on-dark-dim: rgba(255,255,255,0.72);

  /* --- Typography --- */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter',   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Border Radius --- */
  --radius-sm:    4px;
  --radius:       6px;   /* Standard button/input radius */
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    16px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(23,26,29,0.06);
  --shadow-sm:  0 1px 4px rgba(23,26,29,0.08), 0 1px 2px rgba(23,26,29,0.06);
  --shadow-md:  0 4px 12px rgba(23,26,29,0.10), 0 2px 4px rgba(23,26,29,0.06);
  --shadow-lg:  0 8px 24px rgba(23,26,29,0.12), 0 4px 8px rgba(23,26,29,0.06);
  --shadow-xl:  0 16px 48px rgba(23,26,29,0.14);

  /* --- Spacing Scale (8pt base) --- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   40px;
  --sp-8:   48px;
  --sp-9:   64px;
  --sp-10:  80px;
  --sp-11:  96px;
  --sp-12: 120px;

  /* Section padding */
  --section-compact:   72px;
  --section-standard:  96px;
  --section-major:    120px;

  /* --- Layout --- */
  --container-max:    1200px;
  --container-wide:   1360px;
  --container-text:    760px;
  --container-faq:     900px;
  --container-form:    720px;
  --container-pad:      24px;  /* side padding */

  /* --- Transitions --- */
  --t-micro:   120ms ease;
  --t-hover:   180ms ease;
  --t-reveal:  360ms ease;
  --t-drawer:  280ms cubic-bezier(0.4,0,0.2,1);
  --t-accordion: 240ms ease;

  /* --- Header Heights --- */
  --utility-h:  38px;
  --header-h:   96px;
  --header-scrolled-h: 82px;
  --sticky-bar-h: 68px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Prevent horizontal overflow at any viewport */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--white);
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--red);
  text-decoration: none;
  transition: color var(--t-hover);
}

a:hover { color: var(--red-hover); }

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   ACCESSIBILITY UTILITIES
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  background: var(--charcoal);
  color: var(--white);
  padding: var(--sp-2) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  z-index: 9999;
  transition: top var(--t-micro);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: 1.12;
  font-weight: 700;
}

h1 { font-size: clamp(2.375rem, 5vw, 4rem);    line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9375rem, 3.5vw, 2.625rem); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1.2; }
h4 { font-size: clamp(1.125rem, 1.5vw, 1.4375rem); line-height: 1.3; }
h5 { font-size: 1.125rem; line-height: 1.4; }
h6 { font-size: 1rem; line-height: 1.5; }

p { line-height: 1.7; }

.text-intro {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--text-body);
}

.text-body-lg {
  font-size: 1.125rem;
  line-height: 1.7;
}

.text-support {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-support);
}

.text-fine {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Eyebrow / Section Label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.eyebrow--light {
  color: rgba(255,255,255,0.65);
}
.eyebrow--light::before {
  background: rgba(255,255,255,0.4);
}

/* ============================================================
   LAYOUT — CONTAINER & GRID
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container--wide  { max-width: var(--container-wide); }
.container--text  { max-width: var(--container-text); }
.container--faq   { max-width: var(--container-faq); }
.container--form  { max-width: var(--container-form); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0 var(--sp-6);
  height: 50px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform var(--t-micro), box-shadow var(--t-hover);
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
}

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Primary */
.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  background: var(--red-active);
  border-color: var(--red-active);
  transform: none;
  box-shadow: none;
}

/* Secondary (on light) */
.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-secondary:hover {
  background: var(--charcoal);
  color: var(--white);
  transform: translateY(-1px);
}

/* Secondary (on dark) */
.btn-secondary--dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-secondary--dark:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-1px);
}

/* Phone/Call button */
.btn-phone {
  background: transparent;
  color: var(--charcoal);
  border-color: transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  gap: var(--sp-2);
}
.btn-phone:hover { color: var(--red); }
.btn-phone svg { flex-shrink: 0; }

/* Small variant */
.btn-sm { height: 42px; font-size: 0.875rem; padding: 0 var(--sp-5); }

/* Large variant */
.btn-lg { height: 54px; font-size: 1rem; padding: 0 var(--sp-7); }

/* Full width */
.btn-full { width: 100%; }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility-bar {
  background: var(--charcoal);
  height: var(--utility-h);
  display: flex;
  align-items: center;
}

.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.utility-bar__left,
.utility-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.utility-bar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.8);
}

.utility-bar__item a {
  color: rgba(255,255,255,0.8);
  font-size: 0.8125rem;
  transition: color var(--t-micro);
}
.utility-bar__item a:hover { color: var(--white); }

.utility-bar__hours {
  font-size: 0.8125rem;
  /* Contrast fix: 0.85 opacity on charcoal = ~5.2:1 ratio (passes WCAG AA) */
  color: rgba(255,255,255,0.85);
}

.utility-bar__tag {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  /* Increased from 0.5 to 0.75 for improved readability */
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}

/* Flat class aliases for index.html utility bar structure */
.utility-bar-items {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.utility-bar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  /* Sufficient contrast: ~5.8:1 on charcoal background */
  color: rgba(255,255,255,0.9);
}

.utility-bar-item a {
  color: rgba(255,255,255,0.9);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color var(--t-micro);
}
.utility-bar-item a:hover { color: var(--white); }

.utility-bar-item svg { color: rgba(255,255,255,0.6); flex-shrink: 0; }

.utility-bar-hours {
  font-size: 0.8125rem;
  /* Accessible contrast: 0.85 opacity on charcoal = ~5.2:1 */
  color: rgba(255,255,255,0.85);
}



/* ============================================================
   SITE HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-hover), box-shadow var(--t-hover), height var(--t-hover);
}

.site-header.scrolled {
  border-bottom-color: var(--light-steel);
  box-shadow: 0 2px 12px rgba(23,26,29,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: var(--sp-6);
  transition: height var(--t-hover);
}

.site-header.scrolled .header-inner {
  height: var(--header-scrolled-h);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo img {
  height: 72px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  transition: height var(--t-hover);
}

.site-header.scrolled .site-logo img {
  height: 66px;
}

/* Logo fallback (text) */
.logo-fallback {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.logo-fallback__mark {
  width: 42px;
  height: 42px;
  background: var(--red);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.logo-fallback__text { display: flex; flex-direction: column; }
.logo-fallback__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--charcoal);
  line-height: 1.1;
}
.logo-fallback__sub {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--steel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Desktop Nav */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.primary-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-body);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--t-micro), background var(--t-micro);
  white-space: nowrap;
}

.primary-nav a:hover { color: var(--red); background: var(--red-soft-bg); }
.primary-nav a.active { color: var(--red); }

/* Dropdown nav */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown > a svg {
  transition: transform var(--t-micro);
}

.nav-dropdown:hover > a svg,
.nav-dropdown:focus-within > a svg {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-hover), visibility var(--t-hover), transform var(--t-hover);
  transform: translateX(-50%) translateY(-8px);
  z-index: 100;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu a {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  font-size: 0.875rem;
  color: var(--text-body);
  border-radius: 0;
}
.nav-dropdown__menu a:hover { background: var(--off-white); color: var(--red); }

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.header-phone {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}
.header-phone:hover { color: var(--red); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background var(--t-micro);
}
.hamburger:hover { background: var(--off-white); }

.hamburger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform var(--t-hover), opacity var(--t-hover);
}

.hamburger.open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Full-width on narrow mobile; capped at 400px on wider screens */
  width: 100vw;
  max-width: 400px;
  background: var(--charcoal);
  z-index: 600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Safe-area insets */
  padding-right: env(safe-area-inset-right, 0);
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,13,15,0.6);
  z-index: 590;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-drawer), visibility var(--t-drawer);
  backdrop-filter: blur(2px);
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.mobile-nav__logo img {
  height: 60px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.mobile-nav__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-sm);
  transition: color var(--t-micro), background var(--t-micro);
  flex-shrink: 0;
}
.mobile-nav__close:hover { color: var(--white); background: rgba(255,255,255,0.08); }

.mobile-nav__body {
  flex: 1;
  padding: var(--sp-4) 0;
}

.mobile-nav__links {
  list-style: none;
}

.mobile-nav__links li > a,
.mobile-nav__links li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--t-micro), background var(--t-micro);
  border-radius: 0;
  text-align: left;
}

.mobile-nav__links li > a:hover,
.mobile-nav__links li > button:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* Active nav link — accessible indicator: left border + weight + background */
.mobile-nav__links li > a.active,
.mobile-nav__links li > a[aria-current="page"] {
  color: var(--white);
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  border-left: 3px solid var(--logo-red);
  padding-left: calc(var(--sp-5) - 3px); /* compensate border */
}

/* Services accordion in mobile nav */
.mobile-nav__accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav__accordion-trigger svg {
  transition: transform var(--t-accordion);
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}
.mobile-nav__accordion-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav__accordion-body {
  display: none;
  padding: 0 0 var(--sp-2) var(--sp-4);
}
.mobile-nav__accordion-body.open { display: block; }

.mobile-nav__accordion-body a {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--t-micro);
}
.mobile-nav__accordion-body a:hover { color: var(--white); }

.mobile-nav__footer {
  padding: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.mobile-nav__contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--sp-3);
}
.mobile-nav__contact-item a {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.mobile-nav__contact-item a:hover { color: var(--white); }
.mobile-nav__contact-item span { font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

.mobile-nav__cta {
  margin-top: var(--sp-4);
}
.mobile-nav__cta .btn {
  width: 100%;
  height: 52px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  background: var(--white);
  padding: var(--sp-12) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
  /* Note: mobile padding is overridden in the ≤768px media query */
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(135deg, var(--off-white) 0%, var(--light-steel) 100%);
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.hero__content { max-width: 580px; }

.hero__eyebrow {
  margin-bottom: var(--sp-4);
}

.hero h1 {
  margin-bottom: var(--sp-5);
  color: var(--charcoal);
}

.hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: var(--sp-6);
  max-width: 520px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--text-support);
  margin-bottom: var(--sp-7);
}

.hero__trust::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Hero Visual */
.hero__visual {
  position: relative;
}

.hero__visual-card {
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  position: relative;
}

.hero__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.hero__stat {
  padding: var(--sp-5);
  background: var(--off-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--light-steel);
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.hero__stat-value span { color: var(--red); }

.hero__stat-label {
  font-size: 0.8125rem;
  color: var(--text-support);
  font-weight: 500;
  line-height: 1.3;
}

.hero__stat--wide {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--charcoal);
  border-color: var(--charcoal);
}
.hero__stat--wide .hero__stat-value { color: var(--white); font-size: 1.5rem; }
.hero__stat--wide .hero__stat-label { color: rgba(255,255,255,0.65); }

/* Hero badge/accent */
.hero__badge {
  position: absolute;
  top: calc(var(--sp-4) * -1);
  right: var(--sp-6);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
}

/* ============================================================
   HERO — FLAT CLASS ALIASES (index.html uses these)
   These map index.html's non-BEM class names to the same
   visual design as the BEM hero classes above.
   ============================================================ */

/* Hero content column */
.hero-content {
  max-width: 580px;
  position: relative;
  z-index: 1;
}

/* Hero eyebrow badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-4);
}

.hero-badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Hero subheadline */
.hero-sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: var(--sp-5);
  max-width: 520px;
}

/* Hero trust line */
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--text-support);
  margin-bottom: var(--sp-6);
}

/* Hero CTA action group — desktop: row, mobile: stacked */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* "or" divider between buttons */
.hero-divider {
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Phone call link in hero */
.hero-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-micro);
}
.hero-phone-cta:hover { color: var(--red); }
.hero-phone-cta svg { flex-shrink: 0; color: var(--red); }

/* Hero visual panel — desktop right column */
.hero-visual {
  position: relative;
}

.hero-visual-panel {
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
}

/* Stat cards grid in hero visual — legacy 3-column layout (kept for reference) */
.hero-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}

/* Single approved stat + service area list — current hero visual layout */
.hero-stat-single {
  text-align: center;
  padding: var(--sp-4) 0 var(--sp-2);
  border-bottom: 1px solid var(--light-steel);
  margin-bottom: var(--sp-5);
}

/* Service coverage area list in hero visual */

.hero-visual-area-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.hero-visual-area-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.hero-visual-area-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-body);
}

.hero-visual-area-list li svg {
  color: var(--red);
  flex-shrink: 0;
}



.stat-card {
  padding: var(--sp-5);
  background: var(--off-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--light-steel);
  text-align: center;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  background: var(--charcoal);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin: 0 auto var(--sp-3);
}

.stat-card-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.stat-card-value span { color: var(--red); }

.stat-card-label {
  font-size: 0.8125rem;
  color: var(--text-support);
  font-weight: 500;
  line-height: 1.3;
}

/* highlight span in hero h1 */
.highlight { color: var(--red); }

/* section-label used on index.html */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-3);
}
.section-label-light { color: rgba(255,255,255,0.65); }

/* section-header used on index.html */
.section-header {
  margin-bottom: var(--sp-8);
}
.section-header p {
  font-size: 1.0625rem;
  color: var(--text-body);
  max-width: 640px;
  margin: var(--sp-3) auto 0;
}



/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
  background: var(--charcoal);
  padding: var(--sp-7) 0;
  border-top: 3px solid var(--red);
}

.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.trust-item__icon {
  color: var(--red);
  flex-shrink: 0;
}

.trust-item__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--white);
  line-height: 1;
}

.trust-item__label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

/* ============================================================
   SECTION STRUCTURE
   ============================================================ */
.section {
  padding: var(--section-standard) 0;
}
.section--compact { padding: var(--section-compact) 0; }
.section--major   { padding: var(--section-major) 0; }
.section--alt     { background: var(--off-white); }
.section--dark    { background: var(--charcoal); }
.section--border-top { border-top: 1px solid var(--light-steel); }

.section__header {
  margin-bottom: var(--sp-9);
}
.section__header--center { text-align: center; }

.section__header .eyebrow { margin-bottom: var(--sp-3); }

.section__header h2 {
  margin-bottom: var(--sp-4);
}

.section__header p {
  font-size: 1.125rem;
  color: var(--text-support);
  max-width: 640px;
}

.section__header--center p { margin: 0 auto; }

/* Dark section overrides */
.section--dark .section__header h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}
.section--dark .section__header p,
.section--dark p {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   CARDS — SERVICE CARDS
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.service-card {
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
}

.service-card:hover {
  border-color: var(--steel);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-soft-bg);
  border-radius: var(--radius-md);
  color: var(--red);
  flex-shrink: 0;
}

.service-card__icon--blue {
  background: var(--tech-blue-light);
  color: var(--tech-blue);
}

.service-card h3 {
  font-size: 1.125rem;
  color: var(--charcoal);
  line-height: 1.3;
}

.service-card p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.65;
  flex: 1;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--red);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--t-micro), color var(--t-micro);
}
.service-card__link:hover { gap: var(--sp-3); color: var(--red-hover); }

/* ============================================================
   INDUSTRY CARDS
   ============================================================ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.industry-card {
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  transition: border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
  text-decoration: none;
  color: inherit;
}

.industry-card:hover {
  border-color: var(--steel);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.industry-card__icon {
  width: 40px;
  height: 40px;
  background: var(--off-white);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--steel);
  flex-shrink: 0;
  transition: background var(--t-hover), color var(--t-hover);
}

.industry-card:hover .industry-card__icon {
  background: var(--red-soft-bg);
  color: var(--red);
}

.industry-card__body { flex: 1; }

.industry-card h4 {
  font-size: 0.9375rem;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.industry-card p {
  font-size: 0.8125rem;
  color: var(--text-support);
  line-height: 1.5;
}

/* ============================================================
   WHY DIGITAL GUARD — DARK AUTHORITY SECTION
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-8);
}

.why-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.why-item__icon {
  width: 44px;
  height: 44px;
  background: rgba(201,37,44,0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-red);
  flex-shrink: 0;
}

.why-item h4 {
  font-size: 1.0625rem;
  color: var(--white);
  line-height: 1.3;
}

.why-item p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}

.process-grid::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 1px;
  background: var(--light-steel);
  z-index: 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-3);
  position: relative;
  z-index: 1;
}

.process-step__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--light-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--steel);
  flex-shrink: 0;
  transition: border-color var(--t-hover), color var(--t-hover), background var(--t-hover);
}

.process-step:hover .process-step__num,
.process-step--active .process-step__num {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft-bg);
}

.process-step h4 {
  font-size: 0.9375rem;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.process-step p {
  font-size: 0.8125rem;
  color: var(--text-support);
  line-height: 1.55;
}

/* ============================================================
   SERVICE AREA MAP & REGION CARDS
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.area-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background var(--t-hover), border-color var(--t-hover);
}

.area-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.area-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid rgba(255,255,255,0.3);
}

.area-card h3 {
  font-size: 1.125rem;
  color: var(--white);
  line-height: 1.2;
}

.area-card p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.areas-note {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--sp-5);
}
.areas-note a {
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  text-decoration: underline;
}
.areas-note a:hover { color: var(--white); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--light-steel);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--charcoal);
  text-align: left;
  background: transparent;
  transition: background var(--t-micro), color var(--t-micro);
}

.faq-question:hover { background: var(--off-white); }
.faq-question[aria-expanded="true"] { color: var(--red); background: var(--off-white); }

.faq-question__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--steel);
  transition: transform var(--t-accordion), color var(--t-accordion);
}
.faq-question[aria-expanded="true"] .faq-question__icon {
  transform: rotate(180deg);
  color: var(--red);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-accordion) ease-out;
}
.faq-answer.open { max-height: 400px; }

.faq-answer__inner {
  padding: 0 var(--sp-6) var(--sp-5);
}

.faq-answer__inner p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.7;
}

/* ============================================================
   CTA BANNER (dark)
   ============================================================ */
.cta-banner {
  background: var(--charcoal);
  padding: var(--section-compact) 0;
}

.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.cta-banner__content { flex: 1; }
.cta-banner__content .eyebrow { margin-bottom: var(--sp-3); }
.cta-banner__content h2 { color: var(--white); margin-bottom: var(--sp-4); }
.cta-banner__content p  { color: rgba(255,255,255,0.7); font-size: 1.0625rem; line-height: 1.65; }

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ============================================================
   MONITORING SECTION
   ============================================================ */
.monitoring-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.monitoring-visual {
  background: var(--off-white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-xl);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.monitoring-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-md);
}

.monitoring-feature__icon {
  width: 40px;
  height: 40px;
  background: var(--tech-blue-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tech-blue);
  flex-shrink: 0;
}

.monitoring-feature h4 {
  font-size: 0.9375rem;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.monitoring-feature p {
  font-size: 0.8125rem;
  color: var(--text-support);
  line-height: 1.5;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-section { background: var(--off-white); }

.form-wrapper {
  max-width: var(--container-form);
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-xl);
  padding: var(--sp-9);
  box-shadow: var(--shadow-md);
}

.form-header {
  margin-bottom: var(--sp-7);
}
.form-header .eyebrow { margin-bottom: var(--sp-3); }
.form-header h2 { margin-bottom: var(--sp-3); font-size: 2rem; }
.form-header p  { font-size: 1rem; color: var(--text-support); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-group--full { grid-column: span 2; }

.form-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--charcoal);
}
.form-label .req {
  color: var(--red);
  margin-left: 2px;
  font-size: 0.9em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-4);
  background: var(--white);
  border: 1.5px solid var(--light-steel);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;       /* 16px to prevent iOS zoom */
  color: var(--text-heading);
  transition: border-color var(--t-micro), box-shadow var(--t-micro);
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(201,37,44,0.12);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(180,35,24,0.10);
}

.form-select {
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359636C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  cursor: pointer;
}

.form-textarea {
  min-height: 128px;
  padding: var(--sp-3) var(--sp-4);
  resize: vertical;
  line-height: 1.6;
}

.field-error {
  font-size: 0.8125rem;
  color: var(--error);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--text-body);
  cursor: pointer;
  line-height: 1.55;
}
.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--light-steel);
  border-radius: 3px;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
}
.form-consent a { color: var(--red); font-weight: 600; }

.form-submit-row {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-disclaimer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.form-disclaimer a { color: var(--text-support); text-decoration: underline; }

/* Form success state */
.form-success {
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.form-success__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--success);
  margin-bottom: var(--sp-2);
}
.form-success__body {
  font-size: 0.9375rem;
  color: #1a5c38;
  line-height: 1.65;
}
.form-success__body a { color: var(--success); font-weight: 600; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--charcoal);
  padding: var(--section-standard) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201,37,44,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 { color: var(--white); margin-bottom: var(--sp-4); max-width: 640px; margin-left: auto; margin-right: auto; }
.final-cta p  { color: rgba(255,255,255,0.7); font-size: 1.0625rem; max-width: 560px; margin: 0 auto var(--sp-7); }

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--charcoal);
  border-top: 3px solid rgba(201,37,44,0.6);
  padding: var(--section-compact) 0 var(--sp-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--sp-6);
}

/* Footer logo — ensure it doesn't disappear into dark background */
.footer-logo-wrap {
  display: inline-block;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.footer-logo-wrap img {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

.footer-brand p {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-3);
}
.footer-contact-item a {
  color: rgba(255,255,255,0.8);
  transition: color var(--t-micro);
}
.footer-contact-item a:hover { color: var(--white); }
.footer-contact-item span { color: rgba(255,255,255,0.5); font-size: 0.8125rem; }

.footer-col h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--sp-4);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }

.footer-col a {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--t-micro);
}
.footer-col a:hover { color: var(--white); }

.footer-col .footer-cta {
  margin-top: var(--sp-4);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

.footer-legal {
  display: flex;
  gap: var(--sp-5);
}
.footer-legal a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--t-micro);
}
.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   SOLYNX FOOTER ATTRIBUTION
   ============================================================ */
.solynx-footer-credit {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.72;
  transition: opacity 180ms ease;
}
.solynx-footer-credit:hover { opacity: 1; }
.solynx-footer-credit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  flex-wrap: wrap;
}
.solynx-footer-credit a:hover,
.solynx-footer-credit a:focus-visible {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.solynx-footer-credit__logo {
  width: 18px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .solynx-footer-credit { font-size: 0.72rem; text-align: center; padding-inline: 1rem; }
  .solynx-footer-credit__logo { width: 16px; }
}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: var(--charcoal);
  border-top: 2px solid rgba(201,37,44,0.5);
  height: var(--sticky-bar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform var(--t-hover);
}

.sticky-cta-bar.visible { transform: translateY(0); }
.sticky-cta-bar.hidden  { transform: translateY(100%); }

.sticky-cta-bar__call {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--t-micro);
}
.sticky-cta-bar__call:hover { background: rgba(255,255,255,0.14); color: var(--white); }

.sticky-cta-bar__service {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--t-micro);
}
.sticky-cta-bar__service:hover { background: var(--red-hover); color: var(--white); }

/* Display control */
.sticky-cta-bar { display: none; } /* show via JS after hero */

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--charcoal);
  padding: var(--sp-10) 0 var(--sp-9);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,37,44,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero .eyebrow { margin-bottom: var(--sp-4); }
.page-hero h1 { color: var(--white); margin-bottom: var(--sp-5); max-width: 700px; }
.page-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 600px;
  margin-bottom: var(--sp-7);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}
.breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.breadcrumb__sep { color: rgba(255,255,255,0.3); font-size: 0.75rem; }

/* ============================================================
   CONTENT SPLIT (image + text)
   ============================================================ */
.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.content-split--reverse .content-split__visual { order: 2; }
.content-split--reverse .content-split__body   { order: 1; }

.content-split__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

.content-split__visual img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.content-split__body .eyebrow { margin-bottom: var(--sp-3); }
.content-split__body h2 { margin-bottom: var(--sp-4); }
.content-split__body p  { margin-bottom: var(--sp-4); font-size: 1.0625rem; color: var(--text-support); line-height: 1.7; }
.content-split__body .btn { margin-top: var(--sp-2); }

/* Capability list */
.capability-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

.capability-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.capability-item__check {
  width: 22px;
  height: 22px;
  background: var(--red-soft-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

.capability-item p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* ============================================================
   TESTIMONIALS (placeholder — unpopulated)
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.testimonial-card__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--light-steel);
  padding-top: var(--sp-4);
}
.testimonial-card__name  { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; color: var(--charcoal); }
.testimonial-card__title { font-size: 0.8125rem; color: var(--text-support); }

/* ============================================================
   INLINE NOTIFICATION / ALERT STRIP
   ============================================================ */
.info-strip {
  background: var(--tech-blue-light);
  border-left: 4px solid var(--tech-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: #1f3a4a;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --section-compact:  56px;
    --section-standard: 72px;
    --section-major:    88px;
    --header-h: 88px;
  }

  .primary-nav,
  .header-phone { display: none; }

  .hamburger { display: flex; }

  .hero .container {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .hero__visual,
  .hero-visual { display: none; }

  .hero h1 { font-size: clamp(2.25rem, 5vw, 3rem); }

  .service-grid { grid-template-columns: repeat(2, 1fr); }

  .industry-grid { grid-template-columns: repeat(2, 1fr); }

  .why-grid { grid-template-columns: repeat(2, 1fr); }

  .process-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }

  .process-grid::before { display: none; }

  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  .monitoring-split { grid-template-columns: 1fr; }

  .content-split { grid-template-columns: 1fr; }
  .content-split--reverse .content-split__visual { order: 1; }
  .content-split--reverse .content-split__body   { order: 2; }

  .trust-strip .container { grid-template-columns: repeat(2, 1fr); }

  .cta-banner__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }

  .header-cta .header-phone { display: none; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-compact:  48px;
    --section-standard: 64px;
    --section-major:    72px;
    --header-h: 76px;
    --utility-h: 0px; /* hide utility bar on mobile */
  }

  .utility-bar { display: none; }

  .sticky-cta-bar { display: flex; }

  /* Base body padding — overridden by the sticky-call-bar media query below */
  body { padding-bottom: var(--sticky-bar-h); }

  h1 { font-size: clamp(2rem, 8vw, 2.625rem); line-height: 1.08; }
  h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  h3 { font-size: clamp(1.125rem, 4vw, 1.375rem); }
  h4 { font-size: 1.0625rem; }

  /* Hero: reduced top/bottom padding on mobile */
  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  .hero::before { display: none; }

  /* Ensure hero content uses full width */
  .hero-content { max-width: 100%; }
  .hero-sub { max-width: 100%; }

  /* BEM hero actions */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Flat hero actions (index.html) — stacked, full-width, 52px minimum height */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
  /* Hide "or" divider on mobile — phone CTA becomes its own full-width link */
  .hero-divider { display: none; }
  /* Phone call link becomes full-width button-style on mobile */
  .hero-phone-cta {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--charcoal);
    border-radius: var(--radius);
    padding: 0 var(--sp-6);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
  }

  /* Service grids: 1 column on mobile */
  .service-grid { grid-template-columns: 1fr; }

  .industry-grid { grid-template-columns: 1fr; }

  /* Why grid: 1 column on mobile */
  .why-grid { grid-template-columns: 1fr; }

  /* Why item: reset negative margin that causes overflow on small screens */
  .why-item {
    margin: 0;
    padding: var(--sp-3);
  }

  .process-grid {
    grid-template-columns: 1fr;
    position: relative;
    padding-left: var(--sp-7);
  }

  /* Vertical timeline */
  .process-grid::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--light-steel);
  }

  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 var(--sp-5);
  }

  .areas-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: span 1; }

  .form-wrapper { padding: var(--sp-4); border-radius: var(--radius-lg); }

  .footer-bottom { flex-direction: column; text-align: center; gap: var(--sp-3); }

  .final-cta__actions { flex-direction: column; align-items: center; }
  .final-cta__actions .btn { width: 100%; max-width: 320px; }

  .cta-banner__actions .btn { width: 100%; }

  .content-split__visual img { height: 240px; }

  /* Capability showcase ("In the Field") — force 1 column on mobile */
  .capability-showcase__body {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .capability-showcase__image {
    aspect-ratio: 16 / 9;
    max-height: 240px;
    width: 100%;
  }
  .capability-showcase__header { margin-bottom: var(--sp-5); }

  /* Monitoring authority section — force 1 column on mobile */
  .monitoring-authority__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Monitoring page visual hero — force 1 column on mobile */
  .monitoring-hero-visual__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Monitoring split section */
  .monitoring-split { gap: var(--sp-5); }

  /* Trust strip: 2 column on mobile for compactness */
  .trust-strip .container { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

  /* Testimonial single column */
  .testimonial-grid { grid-template-columns: 1fr; }

  .section__header { margin-bottom: var(--sp-5); }

  /* Contact page: reduce dead zone between hero and form */
  .page-hero { padding: var(--sp-7) 0 var(--sp-5); }
  .form-section { padding-top: var(--sp-5) !important; }

  /* Hero media wrap: full width on mobile */
  .hero-media-wrap {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 600px)
   Full single-column enforcement for all grid and split layouts.
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --container-pad: 16px;
    --section-compact:  40px;
    --section-standard: 56px;
    --section-major:    64px;
    /* Compact header: target 72–78px total height */
    --header-h: 72px;
  }

  /* Header: logo and button scale down for narrow viewports */
  .site-logo img {
    height: 44px;
    max-width: 150px;
  }

  /* Compress mobile header CTA button */
  .header-cta .btn {
    height: 38px;
    font-size: 0.8125rem;
    padding: 0 12px;
    min-width: 0;
  }

  /* Hamburger stays 44×44px minimum — do not reduce */
  .hamburger {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Hero: tighter on small phones */
  .hero { padding: var(--sp-5) 0 var(--sp-5); }

  /* Hero trust line: smaller text */
  .hero-trust { font-size: 0.8125rem; }

  /* Service cards: tighter padding on small screens */
  .service-card { padding: var(--sp-4) var(--sp-4); }
  .services-grid { gap: var(--sp-3); }
  .service-grid { gap: var(--sp-3); }

  /* Capability callouts: tighter padding */
  .capability-callout { padding: var(--sp-3); }

  /* Form wrapper: minimal padding */
  .form-wrapper { padding: var(--sp-4) var(--sp-3); }

  /* Page hero (inner pages) */
  .page-hero { padding: var(--sp-6) 0 var(--sp-4); }

  /* On 320px, make mobile nav truly full-width */
  .mobile-nav { max-width: 100vw; }

  /* Trust strip: single column on very small screens */
  .trust-strip .container { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

  /* Hero h1 explicit cap at small viewports */
  h1 { font-size: clamp(1.875rem, 9vw, 2.25rem); }

  /* Ensure section headers don't create orphan words */
  .section-header p,
  .section__header p { max-width: 100%; }

  /* Monitoring features list: tighter spacing */
  .monitoring-authority__features { margin-bottom: var(--sp-4); gap: var(--sp-3); }

  /* Why item: no negative margins on small phones */
  .why-item {
    margin: 0;
    padding: var(--sp-2);
  }

  /* Areas grid already 1-col from 768px, ensure gap is tight */
  .areas-grid { gap: var(--sp-3); }

  /* Ensure images never overflow */
  img, picture, .hero-media-frame,
  .capability-showcase__image,
  .monitoring-signal__image {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================
   FLAT CLASS ALIASES — INDEX.HTML COMPONENT NAMES
   Maps index.html flat class names to equivalent BEM styles
   ============================================================ */

/* Services grid aliases */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

/* Mobile-first: 1 column wins. 768px rule overrides 1024px rule below. */
@media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }

@media (min-width: 769px) and (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

.service-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); flex-shrink: 0;
}
.icon-red   { background: var(--red-soft-bg); color: var(--red); }
.icon-blue  { background: var(--tech-blue-light); color: var(--tech-blue); }
.icon-navy  { background: #DDE5EE; color: #1E3A5F; }
.icon-teal  { background: #D6F0F0; color: #1A7F7F; }
.icon-slate { background: #E8EAED; color: #495057; }
.icon-indigo{ background: #E8E6F7; color: #4B3FAC; }

.service-card-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem;
  color: var(--red); margin-top: var(--sp-4);
  transition: gap var(--t-micro), color var(--t-micro);
}
.service-card-link:hover { gap: var(--sp-3); color: var(--red-hover); }

/* Hero inspection link — mobile text link beneath primary CTA group */
.hero-inspection-link {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-support);
  margin-top: var(--sp-3);
  line-height: 1.5;
}
.hero-inspection-link a {
  color: var(--red);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-micro);
}
.hero-inspection-link a:hover { color: var(--red-hover); }

/* Why Digital Guard aliases */
.why-section { background: var(--charcoal); }
.why-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(201,37,44,0.15); color: var(--logo-red);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); flex-shrink: 0;
}
.why-text h4 { color: var(--white); margin-bottom: var(--sp-2); }
.why-text p { color: rgba(255,255,255,0.65); font-size: 0.9375rem; }

/* Areas section aliases */
.areas-section { background: var(--charcoal); }
.area-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}

/* Sticky call bar alias (index.html uses sticky-call-bar, CSS has sticky-cta-bar) */
/* CRITICAL: display:none at all widths by default. Only shown on mobile via media query. */
.sticky-call-bar {
  display: none; /* hidden on desktop and tablet — never shown above 767px */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: var(--charcoal);
  border-top: 2px solid rgba(201,37,44,0.5);
  height: var(--sticky-bar-h);
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform var(--t-hover);
}

/* Only flex on mobile — strictly <=767px */
@media (max-width: 767px) {
  .sticky-call-bar {
    display: flex;
  }

  /* Prevent sticky bar from covering last page content.
     Extra 24px clearance so cards/text are never hidden behind bar.
     Safe-area handles notched iPhone bottom inset. */
  body:not(.nav-open) {
    padding-bottom: calc(var(--sticky-bar-h) + 24px + env(safe-area-inset-bottom, 0));
  }

  /* Sticky bar itself must also respect safe-area */
  .sticky-call-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
    height: auto;
    min-height: var(--sticky-bar-h);
  }
}

.sticky-call-bar.visible { transform: translateY(0); }
.sticky-call-bar.hidden  { transform: translateY(100%); }

/* When mobile nav is open, hide the bar to prevent overlap */
body.nav-open .sticky-call-bar { transform: translateY(100%); }

/* Two-action children */
.sticky-call-bar__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: 1;
  height: 48px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--white);
  text-decoration: none;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  transition: background var(--t-micro);
}
.sticky-call-bar__call:hover { background: rgba(255,255,255,0.16); }

.sticky-call-bar__service {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: 1;
  height: 48px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--white);
  text-decoration: none;
  background: var(--red);
  border-radius: var(--radius);
  transition: background var(--t-micro);
}
.sticky-call-bar__service:hover { background: var(--red-hover); }

/* CTA Banner aliases */
.cta-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8);
}
.cta-banner-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .cta-banner-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
}

@media (max-width: 768px) {
  .cta-banner-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .cta-banner-actions .btn { width: 100%; }
}

/* Final CTA aliases */
.final-cta-actions {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
}
.final-cta-phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem;
  color: var(--charcoal); text-decoration: none;
  transition: color var(--t-micro);
}
.final-cta-phone:hover { color: var(--red); }

@media (max-width: 768px) {
  .final-cta-actions { flex-direction: column; align-items: center; }
  .final-cta-actions .btn { width: 100%; max-width: 320px; }
}

/* Footer aliases */
.footer-brand-desc { color: rgba(255,255,255,0.6); font-size: 0.9375rem; margin-top: var(--sp-3); line-height: 1.65; }
.footer-hours { color: rgba(255,255,255,0.5); font-size: 0.8125rem; margin-top: var(--sp-2); }
.footer-copyright { color: rgba(255,255,255,0.45); font-size: 0.8125rem; }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}

@media (max-width: 768px) {
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: var(--sp-3); }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.hidden       { display: none !important; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   SCROLL REVEAL — PROGRESSIVE ENHANCEMENT

   SAFE PATTERN:
   - All .reveal and .reveal-child elements are ALWAYS visible
   - Animations are ENHANCEMENTS only — never visibility dependencies
   - No content is hidden unless it has already received .in-view
   - A defensive revealAll() in JS forces all content visible after 2s
   - Motion IIFE only adds animation; removing it never hides content
   - This approach is safe for: screenshots, BG tabs, no-JS, slow JS,
     reduced motion, restored scroll position, IntersectionObserver failure
   ============================================================ */

/* Content is visible by default — always */
.reveal,
.reveal-child,
.process-node {
  opacity: 1;
  transform: none;
}

/* Animate in — only when motion is explicitly enabled AND element has been
   intersected. Using will-change only on the transition, not the hidden state. */
.motion-enabled .reveal.animating {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 380ms ease-out, transform 380ms ease-out;
  will-change: opacity, transform;
}

.motion-enabled .reveal.animating.in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.motion-enabled .reveal-child.animating {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 360ms ease-out, transform 360ms ease-out;
  will-change: opacity, transform;
}

.motion-enabled .reveal-child.animating.in-view {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.motion-enabled .process-node.animating {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 360ms ease-out, transform 360ms ease-out;
}

.motion-enabled .process-node.animating.in-view {
  opacity: 1;
  transform: none;
}

/* Reduced motion: ensure nothing is ever hidden */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-child,
  .process-node,
  .motion-enabled .reveal.animating,
  .motion-enabled .reveal-child.animating,
  .motion-enabled .process-node.animating {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .utility-bar, .site-header, .mobile-nav, .mobile-nav-overlay,
  .sticky-cta-bar, .final-cta, .hero__visual { display: none !important; }

  body { font-size: 11pt; }
  h1 { font-size: 22pt; }
  h2 { font-size: 18pt; }
}

/* ============================================================
   VISUAL UPGRADE — HERO ENTRANCE ANIMATIONS
   ============================================================ */
@keyframes dg-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero entrance — applied via JS class .motion-enabled on html.
   Uses animation-fill-mode: none (not 'both') so content is NEVER hidden
   before the animation starts. The animation enhances visible content only.
   All hero content is visible without JS or motion class.
   No animation exceeds 450ms. Scan line runs once. No loops on content. */
.motion-enabled .hero-badge {
  animation: dg-fade-up 380ms ease-out;
  animation-delay: 0ms;
}

.motion-enabled .hero .hero-content h1 {
  animation: dg-fade-up 400ms ease-out;
  animation-delay: 60ms;
}

.motion-enabled .hero-sub {
  animation: dg-fade-up 380ms ease-out;
  animation-delay: 120ms;
}

.motion-enabled .hero-trust {
  animation: dg-fade-up 380ms ease-out;
  animation-delay: 160ms;
}

/* Hero actions: max 200ms delay so primary CTA is not blocked */
.motion-enabled .hero-actions {
  animation: dg-fade-up 380ms ease-out;
  animation-delay: 200ms;
}

.motion-enabled .hero-media-frame {
  animation: dg-fade-in 440ms ease-out;
  animation-delay: 80ms;
}

/* Phone CTA always immediately clickable — never hidden, never delayed */
.hero-phone-cta,
#hero-phone-cta {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Reduced motion: no animations, full visibility */
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .hero-badge,
  .motion-enabled .hero .hero-content h1,
  .motion-enabled .hero-sub,
  .motion-enabled .hero-trust,
  .motion-enabled .hero-actions,
  .motion-enabled .hero-media-frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   VISUAL UPGRADE — HERO MEDIA FRAME
   ============================================================ */
.hero-media-wrap {
  position: relative;
}

.hero-media-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 64px rgba(11,13,15,0.5), 0 4px 16px rgba(11,13,15,0.3);
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
}

.hero-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Boost contrast on abstract/AI-generated images — never faint */
  filter: brightness(1.15) contrast(1.08);
}

/* Bottom gradient overlay — readability for badge */
.hero-media-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(11,13,15,0.72) 0%, transparent 100%);
  pointer-events: none;
}

/* Trust badge — 30+ overlay inside frame */
.hero-media-badge {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(11,13,15,0.76);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
}

.hero-media-badge__icon {
  width: 38px;
  height: 38px;
  background: var(--red);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.hero-media-badge__text strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  line-height: 1;
}

.hero-media-badge__text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  line-height: 1.3;
}

/* Status strip — decorative service labels */
.hero-media-status {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.hero-media-status__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(11,13,15,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px var(--sp-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.hero-media-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* Inspection scan line — runs once, CSS only */
@keyframes dg-scan {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

.hero-media-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(49,90,115,0.8) 20%,
    rgba(49,90,115,1) 50%,
    rgba(49,90,115,0.8) 80%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
  animation: dg-scan 1800ms ease-in-out 600ms forwards;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-scan { display: none; }
}

/* Mobile: show hero media below CTA group on small screens */
@media (max-width: 1024px) {
  .hero-media-wrap {
    /* Show on mobile/tablet below copy — not hidden */
    display: block;
    margin-top: var(--sp-6);
    /* Constrain so it doesn't extend page on narrow screens */
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-media-frame {
    /* Cap aspect ratio so image doesn't create blank space */
    aspect-ratio: 16 / 9;
    max-height: 260px;
  }

  /* Status pills take up too much space on mobile — hide on small screens */
  .hero-media-status { display: none; }
}

@media (max-width: 768px) {
  .hero-media-wrap {
    margin-top: var(--sp-5);
    max-width: 100%;
  }

  .hero-media-frame {
    max-height: 220px;
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   VISUAL UPGRADE — CAPABILITY SHOWCASE
   ============================================================ */
.capability-showcase {
  background: var(--off-white);
  padding: var(--section-standard) 0;
  position: relative;
}

/* Subtle technical dot grid pattern */
.capability-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(23,26,29,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.capability-showcase .container { position: relative; z-index: 1; }

.capability-showcase__header {
  text-align: center;
  margin-bottom: var(--sp-9);
}

.capability-showcase__header .eyebrow { margin-bottom: var(--sp-3); }

.capability-showcase__header h2 {
  max-width: 680px;
  margin: 0 auto var(--sp-4);
}

.capability-showcase__header p {
  font-size: 1.0625rem;
  color: var(--text-support);
  max-width: 560px;
  margin: 0 auto;
}

.capability-showcase__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.capability-showcase__image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
}

.capability-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 300ms ease-out;
}

@media (hover: hover) {
  .capability-showcase__image:hover img {
    transform: scale(1.02);
  }
}

.capability-showcase__callouts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.capability-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--light-steel);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
  cursor: default;
}

.capability-callout:hover {
  border-color: rgba(201,37,44,0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.capability-callout__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--red-soft-bg);
  color: var(--red);
}

.capability-callout__text h4 {
  font-size: 1rem;
  color: var(--charcoal);
  margin-bottom: var(--sp-1);
  line-height: 1.3;
}

.capability-callout__text p {
  font-size: 0.875rem;
  color: var(--text-support);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .capability-showcase__body {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

@media (max-width: 768px) {
  .capability-showcase__header { margin-bottom: var(--sp-7); }
  .capability-callout { padding: var(--sp-4); }
}

/* ============================================================
   VISUAL UPGRADE — 6-STAGE INSPECTION PROCESS TIMELINE
   ============================================================ */
.process-timeline {
  position: relative;
  padding: var(--section-standard) 0;
}

/* Horizontal connecting line — desktop */
.process-timeline__track {
  position: relative;
}

.process-timeline__line {
  position: absolute;
  top: 24px;
  left: calc(8.333% + 24px);
  right: calc(8.333% + 24px);
  height: 1px;
  background: var(--light-steel);
  z-index: 0;
}

/* Animated red progress line */
.process-timeline__line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--red);
  transition: width 900ms ease-out;
}

.process-timeline__track.in-view .process-timeline__line::after {
  width: 100%;
}

.process-timeline__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}

.process-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--sp-2);
  /* Default: visible without JS */
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease-out, transform 360ms ease-out;
}

/* Hidden pre-reveal — only under motion-enabled */
.motion-enabled .process-node {
  opacity: 0;
  transform: translateY(14px);
}

.motion-enabled .process-node.in-view { opacity: 1; transform: none; }

.process-node__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--light-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--steel);
  margin-bottom: var(--sp-4);
  transition: border-color var(--t-hover), color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover);
  position: relative;
  z-index: 1;
}

.process-node:hover .process-node__circle {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-soft-bg);
  box-shadow: 0 0 0 4px rgba(201,37,44,0.1);
}

.process-node h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.process-node p {
  font-size: 0.75rem;
  color: var(--text-support);
  line-height: 1.5;
}

/* Vertical mobile timeline */
@media (max-width: 1024px) {
  .process-timeline__track { overflow: visible; }
  .process-timeline__line { display: none; }

  .process-timeline__steps {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }

  /* Vertical connecting line */
  .process-timeline__steps::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--light-steel);
    z-index: 0;
  }

  .process-node {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }

  .process-node__circle {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .process-node__text { flex: 1; padding-top: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .process-node {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .process-timeline__line::after {
    width: 100%;
    transition: none;
  }
}

/* ============================================================
   VISUAL UPGRADE — MONITORING AUTHORITY SECTION (homepage)
   ============================================================ */
.monitoring-authority {
  background: var(--charcoal);
  padding: var(--section-standard) 0;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--red);
}

/* Subtle blue tech accent — background detail */
.monitoring-authority::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49,90,115,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.monitoring-authority .container { position: relative; z-index: 1; }

.monitoring-authority__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.monitoring-authority__content .eyebrow { margin-bottom: var(--sp-4); }

.monitoring-authority__content h2 {
  color: var(--white);
  margin-bottom: var(--sp-5);
}

.monitoring-authority__content p {
  color: rgba(255,255,255,0.72);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

.monitoring-authority__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.monitoring-authority__feature {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.8);
}

.monitoring-authority__feature svg {
  color: var(--tech-blue);
  flex-shrink: 0;
}

.monitoring-authority__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Phone CTA color override inside dark monitoring section */
.monitoring-authority .hero-phone-cta {
  color: rgba(255, 255, 255, 0.85);
}
.monitoring-authority .hero-phone-cta:hover {
  color: #fff;
}
.monitoring-authority .hero-phone-cta svg {
  color: var(--red);
}

/* Monitoring visual panel — signal path */
.monitoring-authority__visual {
  position: relative;
}

.monitoring-signal {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--sp-7);
  position: relative;
  overflow: hidden;
}

.monitoring-signal__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--charcoal);
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(255,255,255,0.08);
}

.monitoring-signal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Signal path SVG line */
.monitoring-signal__path {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: space-between;
  padding: var(--sp-2) 0;
}

.signal-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.signal-node__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tech-blue);
  border: 2px solid rgba(49,90,115,0.4);
  position: relative;
}

.signal-node__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(49,90,115,0.3);
}

.signal-node__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
  white-space: nowrap;
}

.signal-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--tech-blue) 0%, rgba(49,90,115,0.3) 100%);
  position: relative;
  margin-top: -18px;
}

/* Animated signal pulse */
@keyframes dg-signal-pulse {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.signal-line::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0%;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: var(--tech-blue);
  opacity: 0;
}

.monitoring-authority__visual.in-view .signal-line::after {
  animation: dg-signal-pulse 2200ms ease-in-out 400ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .monitoring-authority__visual .signal-line::after { display: none; }
}

@media (max-width: 1024px) {
  .monitoring-authority__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

/* ============================================================
   VISUAL UPGRADE — PHONE-FIRST CONVERSION SECTION
   ============================================================ */
.phone-conversion {
  background: var(--charcoal);
  padding: var(--section-compact) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.phone-conversion .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
}

.phone-conversion h2 {
  color: var(--white);
  max-width: 720px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.phone-conversion p {
  color: rgba(255,255,255,0.65);
  font-size: 1.0625rem;
  max-width: 560px;
  line-height: 1.7;
}

.phone-conversion__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2);
}

.btn-phone-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  font-size: 1.1875rem;
  height: 60px;
  padding: 0 var(--sp-8);
  gap: var(--sp-3);
  font-weight: 800;
}

.btn-phone-primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,37,44,0.35);
}

.btn-phone-primary svg {
  transition: transform var(--t-micro);
}

.btn-phone-primary:hover svg {
  transform: translateX(2px);
}

.phone-conversion__trust {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  margin-top: var(--sp-1);
}

@media (max-width: 768px) {
  .phone-conversion__actions { flex-direction: column; align-items: stretch; }
  .btn-phone-primary { width: 100%; }
  .phone-conversion__actions .btn { width: 100%; }
}

/* ============================================================
   VISUAL UPGRADE — MICROINTERACTIONS
   ============================================================ */

/* Service card hover lift */
.service-card {
  transition:
    transform var(--t-hover),
    box-shadow var(--t-hover),
    border-color var(--t-hover);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(201,37,44,0.2);
}

/* Service card CTA arrow movement */
.service-card-link svg {
  transition: transform var(--t-micro);
}

.service-card:hover .service-card-link svg {
  transform: translateX(4px);
}

/* Primary button arrow movement */
.btn-primary svg,
.btn-phone-primary svg {
  transition: transform var(--t-micro);
}

.btn-primary:hover svg {
  transform: translateX(2px);
}

/* Phone link hover — icon shift */
.hero-phone-cta svg,
.footer-contact-item svg {
  transition: transform var(--t-micro);
}

.hero-phone-cta:hover svg {
  transform: translateX(2px);
}

/* Image scale — desktop hover only */
@media (hover: hover) and (pointer: fine) {
  .service-card__image img,
  .page-image img {
    transition: transform 300ms ease-out;
  }

  .service-card:hover .service-card__image img,
  .page-image:hover img {
    transform: scale(1.02);
  }
}

/* Area card lift */
.area-card {
  transition:
    background var(--t-hover),
    border-color var(--t-hover),
    transform var(--t-hover);
}

.area-card:hover {
  transform: translateY(-2px);
}

/* Why item hover accent */
.why-item {
  transition: background var(--t-hover);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: calc(var(--sp-4) * -1);
}

.why-item:hover {
  background: rgba(255,255,255,0.04);
}

/* Process node hover — already handled above */

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .area-card,
  .why-item,
  .capability-callout,
  .service-card-link svg,
  .btn-primary svg,
  .btn-phone-primary svg,
  .hero-phone-cta svg,
  .hero-media-frame img,
  .capability-showcase__image img {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   VISUAL UPGRADE — SECTION RHYTHM IMPROVEMENTS
   ============================================================ */

/* Red top-border on key dark sections for rhythm */
.areas-section {
  border-top: 3px solid var(--red);
}

/* Services section divider */
.section#services {
  border-top: 1px solid var(--light-steel);
}

/* Why section — already charcoal, add top divider */
.why-section {
  border-top: 3px solid var(--red);
}

/* ============================================================
   MONITORING PAGE — VISUAL AUTHORITY SECTION
   ============================================================ */
.monitoring-hero-visual {
  background: var(--charcoal);
  padding: var(--section-standard) 0;
  border-top: 3px solid var(--red);
  position: relative;
  overflow: hidden;
}

.monitoring-hero-visual::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49,90,115,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.monitoring-hero-visual .container { position: relative; z-index: 1; }

.monitoring-hero-visual__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}

.monitoring-hero-visual__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-xl);
  background: var(--charcoal);
}

.monitoring-hero-visual__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.monitoring-hero-visual__content .eyebrow { margin-bottom: var(--sp-4); }

.monitoring-hero-visual__content h2 {
  color: var(--white);
  margin-bottom: var(--sp-5);
}

.monitoring-hero-visual__content p {
  color: rgba(255,255,255,0.7);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}

.monitoring-hero-visual__cta {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .monitoring-hero-visual__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}