/* ════════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER — additive polish on top of styles.css
   Pure visual upgrades, no functional changes. Respects
   prefers-reduced-motion throughout. CSP-safe: no inline anything.
   ════════════════════════════════════════════════════════════ */

/* ── Extended tokens ─────────────────────────────────────────── */
:root {
  --shadow-xs:        0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.22);
  --shadow-md:        0 10px 24px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.24);
  --shadow-lg:        0 22px 56px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.28);
  /* Halo shadows used by orange-tinted small surfaces (badges, arrow chips,
     small CTAs). Toned down from the v1 values (0.32 / 0.40) which created
     a bloom halo around every orange surface. */
  --shadow-orange-sm: 0 2px 8px rgba(232,112,8,0.22);
  --shadow-orange-md: 0 6px 18px rgba(232,112,8,0.28), 0 1px 4px rgba(232,112,8,0.14);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.50, 1);
  --ease-spring:      cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --orange-glow:      rgba(232,112,8,0.22);
  --orange-soft:      rgba(232,112,8,0.06);
  --orange-line:      rgba(232,112,8,0.28);
  --hairline:         rgba(255,255,255,0.06);
  --hairline-strong:  rgba(255,255,255,0.10);
}

/* ── Global polish: text rendering, selection, focus, scrollbar ── */
html { scroll-behavior: smooth; }
body {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232,112,8,0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(1,35,63,0.40), transparent 65%),
    #111111;
}
::selection { background: var(--orange); color: #fff; }
::-moz-selection { background: var(--orange); color: #fff; }

/* Refined scrollbar (Chromium / WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2c2c2c, #1f1f1f);
  border: 3px solid #0a0a0a; border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3a3a3a, #2a2a2a); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: #2c2c2c #0a0a0a; }

/* Refined focus ring everywhere */
:focus-visible { outline-offset: 3px; }

/* ── Subtle premium grain on dark sections ──
   Layered behind content; never on content itself. Skip on touch & RM. */
.hero,
.about-hero,
.industry-hero,
.compliance-hero,
.geo-hero,
.case-studies-hero,
.legal-hero,
.resources-hero,
.about-cta-band,
.industry-cta-band,
.compliance-cta-band,
.service-cta-band {
  background-image: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.012));
}

/* Article hero — lift from flat navy to the same dual-radial mesh
   used on CTA bands, plus balanced wrapping on the title so
   "Multi-Trade Maintenance Vendor" no longer fractures mid-word. */
.article-hero {
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(232,112,8,0.16) 0%, transparent 65%),
    radial-gradient(50% 80% at 100% 0%, rgba(1,90,140,0.32) 0%, transparent 60%),
    var(--bg2);
}
.article-hero-title { text-wrap: balance; }

/* ════════════════════════════════════════════════════════════
   NAVIGATION — glassmorphism + smoother link state
   ════════════════════════════════════════════════════════════ */
.nav {
  background: rgba(13, 13, 13, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.30);
}
@supports not (backdrop-filter: blur(14px)) {
  .nav { background: rgba(13, 13, 13, 0.96); }
}

/* Animated underline on nav links */
.nav-links a {
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.30s var(--ease-out-quart);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
}

/* Dropdown polish */
.nav-dropdown-menu {
  border-radius: 6px;
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.02);
  padding: 6px;
  background: rgba(20,20,20,0.96);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  transform-origin: top left;
  animation: dropdown-in 0.22s var(--ease-out-quart);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@media (prefers-reduced-motion: reduce) { .nav-dropdown-menu { animation: none; } }
.nav-dropdown-menu a {
  border-radius: 4px;
  padding: 10px 14px;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: linear-gradient(90deg, rgba(232,112,8,0.10), rgba(232,112,8,0.02));
  color: var(--white);
}

/* Mobile nav refinement */
.nav-mobile-menu {
  background: rgba(13,13,13,0.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: var(--shadow-lg);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS — unified ORANGE SYSTEM
   ────────────────────────────────────────────────────────────
   Goals (vs prior version):
   - Hover BRIGHTENS the orange (base styles.css had `:hover {
     background: var(--orange2) }` which is *darker* — that reset
     my gradient and made every hover go dim, the opposite of
     what users expect from a primary CTA).
   - Sheen sweep removed — read as a glitch flash, not polish.
   - Halo shadows toned down so big buttons (emergency CTA,
     "SEND REQUEST") don't bloom while small ones (nav CTA) stay
     subtle. Visual weight is now consistent across button sizes.
   - Active/pressed state visibly darker + 0.985 scale + 0.06s
     transition so the click feels responsive.
   - Same easing/duration on every orange surface so the page
     transitions like one system.
   ════════════════════════════════════════════════════════════ */

:root {
  --orange-base:         #e87008;
  --orange-hover:        #f4831c;  /* brighter than base — visible on hover */
  --orange-active:       #c25c04;  /* darker than base — pressed feedback */
  --orange-ring:         rgba(232,112,8,0.28);
  --orange-tint-1:       rgba(232,112,8,0.06);
  --orange-tint-2:       rgba(232,112,8,0.12);
  --orange-tint-3:       rgba(232,112,8,0.18);
  --orange-shadow-rest:  0 1px 2px rgba(0,0,0,0.22), 0 3px 10px rgba(232,112,8,0.16);
  --orange-shadow-hover: 0 1px 2px rgba(0,0,0,0.24), 0 6px 18px rgba(232,112,8,0.26);
  --orange-ease:         cubic-bezier(0.20, 0, 0.20, 1);
  --orange-dur:          0.18s;
  --orange-dur-fast:     0.08s;
}

.btn { position: relative; isolation: isolate; }

/* ── Primary FILLED orange CTAs — single source of truth ── */
.btn-orange,
.nav-cta:not(.nav-cta-quote),
.form-submit,
.emergency-btn,
.sidebar-cta-btn,
.sticky-cta-btn-primary,
.nav-mobile-cta:not(.nav-mobile-cta-quote) {
  background-color: var(--orange-base);
  background-image: linear-gradient(180deg, #f48519 0%, var(--orange-base) 55%, #d76608 100%);
  color: #fff;
  box-shadow: var(--orange-shadow-rest), inset 0 1px 0 rgba(255,255,255,0.14);
  transition:
    background-color var(--orange-dur) var(--orange-ease),
    background-image var(--orange-dur) var(--orange-ease),
    box-shadow var(--orange-dur) var(--orange-ease),
    transform var(--orange-dur) var(--orange-ease);
}
.btn-orange:hover,
.nav-cta:not(.nav-cta-quote):hover,
.form-submit:hover,
.emergency-btn:hover,
.sidebar-cta-btn:hover,
.sticky-cta-btn-primary:hover,
.nav-mobile-cta:not(.nav-mobile-cta-quote):hover {
  background-color: var(--orange-hover);
  background-image: linear-gradient(180deg, #ff9430 0%, var(--orange-hover) 55%, #e57610 100%);
  box-shadow: var(--orange-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.20);
  transform: translateY(-1px);
}
.btn-orange:active,
.nav-cta:not(.nav-cta-quote):active,
.form-submit:active,
.emergency-btn:active,
.sidebar-cta-btn:active,
.sticky-cta-btn-primary:active,
.nav-mobile-cta:not(.nav-mobile-cta-quote):active {
  background-color: var(--orange-active);
  background-image: linear-gradient(180deg, #d76608 0%, var(--orange-active) 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.16), inset 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(0) scale(0.985);
  transition-duration: var(--orange-dur-fast);
}

/* Sheen sweep removed entirely — was reading as a glitch flash. */
.btn-orange::before,
.nav-cta::before,
.form-submit::before,
.emergency-btn::before { content: none; }

/* ── Outline orange CTAs — transparent bg, orange text & border ── */
.nav-cta-quote,
.nav-mobile-cta-quote {
  background-color: transparent;
  background-image: none;
  color: var(--orange-base);
  border: 1px solid var(--orange-base);
  box-shadow: none;
  transition:
    background-color var(--orange-dur) var(--orange-ease),
    color var(--orange-dur) var(--orange-ease),
    border-color var(--orange-dur) var(--orange-ease),
    box-shadow var(--orange-dur) var(--orange-ease),
    transform var(--orange-dur) var(--orange-ease);
}
.nav-cta-quote:hover,
.nav-mobile-cta-quote:hover {
  background-color: var(--orange-tint-2);
  color: var(--orange-hover);
  border-color: var(--orange-hover);
  box-shadow: 0 0 0 1px var(--orange-ring), 0 4px 12px rgba(232,112,8,0.14);
  transform: translateY(-1px);
}
.nav-cta-quote:active,
.nav-mobile-cta-quote:active {
  background-color: var(--orange-tint-3);
  color: var(--orange-active);
  border-color: var(--orange-active);
  box-shadow: none;
  transform: translateY(0) scale(0.985);
  transition-duration: var(--orange-dur-fast);
}

/* ── White-on-dark outline button (hero secondary, etc.) — same timing ── */
.btn-outline {
  border-color: rgba(255,255,255,0.22);
  background-color: rgba(255,255,255,0.02);
  background-image: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    background-color var(--orange-dur) var(--orange-ease),
    border-color var(--orange-dur) var(--orange-ease),
    color var(--orange-dur) var(--orange-ease),
    transform var(--orange-dur) var(--orange-ease);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,0.60);
  background-color: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.btn-outline:active {
  background-color: rgba(255,255,255,0.10);
  transform: translateY(0) scale(0.985);
  transition-duration: var(--orange-dur-fast);
}

/* ── Sticky CTA SECONDARY (phone, outlined dark) — orange hint on hover ── */
.sticky-cta-btn-secondary {
  transition:
    background-color var(--orange-dur) var(--orange-ease),
    color var(--orange-dur) var(--orange-ease),
    border-color var(--orange-dur) var(--orange-ease);
}
.sticky-cta-btn-secondary:hover {
  border-color: var(--orange-base);
  color: var(--orange-hover);
  background-color: var(--orange-tint-1);
}

/* ── form-submit text doesn't expand its letter-spacing on hover ── */
.form-submit:hover { letter-spacing: 0.08em; }  /* match rest state — no shift */

/* ── Unified focus ring on every orange CTA ── */
.btn-orange:focus-visible,
.nav-cta:focus-visible,
.form-submit:focus-visible,
.emergency-btn:focus-visible,
.sidebar-cta-btn:focus-visible,
.sticky-cta-btn-primary:focus-visible,
.nav-cta-quote:focus-visible,
.nav-mobile-cta-quote:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--orange-base);
  outline-offset: 3px;
}

/* Reduced motion — strip transforms */
@media (prefers-reduced-motion: reduce) {
  .btn-orange, .nav-cta, .form-submit, .emergency-btn, .sidebar-cta-btn,
  .sticky-cta-btn-primary, .btn-outline, .nav-cta-quote, .nav-mobile-cta,
  .nav-mobile-cta-quote, .sticky-cta-btn-secondary {
    transition: background-color 0.10s ease, color 0.10s ease, border-color 0.10s ease;
    transform: none !important;
  }
}

/* Magnetic-CTA hook: JS sets --mx / --my (in px) on the element.
   Without JS, --mx and --my default to 0 (no movement). */
.btn-orange,
.nav-cta:not(.nav-cta-quote),
.form-submit,
.emergency-btn,
.hero-btns .btn {
  --mx: 0px; --my: 0px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-orange.is-magnetic,
  .nav-cta:not(.nav-cta-quote).is-magnetic,
  .form-submit.is-magnetic,
  .emergency-btn.is-magnetic,
  .hero-btns .btn.is-magnetic {
    transform: translate3d(var(--mx), var(--my), 0);
  }
}

/* ════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — softer
   ════════════════════════════════════════════════════════════ */
.announcement-bar {
  background: linear-gradient(90deg, var(--orange2) 0%, var(--orange) 50%, var(--orange2) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.30);
}

/* ════════════════════════════════════════════════════════════
   HERO — gradient mesh, accent on title, smoother sub
   ════════════════════════════════════════════════════════════ */
.hero {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(232,112,8,0.22) 0%, transparent 55%),
    radial-gradient(70% 60% at 95% 100%, rgba(1,90,140,0.45) 0%, transparent 60%),
    linear-gradient(135deg, #0a0a0a 0%, #01233f 100%);
}
.hero-video-overlay {
  background:
    radial-gradient(80% 60% at 18% 35%, rgba(232,112,8,0.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(10,10,10,0.78) 0%, rgba(1,35,63,0.62) 55%, rgba(1,35,63,0.82) 100%),
    radial-gradient(120% 90% at 12% 50%, rgba(0,0,0,0.55) 0%, transparent 60%);
}

/* Refined eyebrow with subtle dot */
.hero-eyebrow {
  background: linear-gradient(135deg, rgba(232,112,8,0.18) 0%, rgba(232,112,8,0.06) 100%);
  border-color: rgba(232,112,8,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(232,112,8,0.10);
  border-radius: 999px;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(232,112,8,0.20);
  margin-right: 4px;
  flex-shrink: 0;
}

/* Premium hero title — orange word gets a soft glow */
.hero-title {
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.40);
}
.hero-title span {
  background: linear-gradient(120deg, #ff9636 0%, var(--orange) 55%, #ff8c2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(232,112,8,0.30));
}

.hero-sub { letter-spacing: 0.005em; }

.hero-phone-link { transition: color 0.20s ease; }
.hero-phone-link:hover { text-shadow: 0 0 24px rgba(232,112,8,0.45); }

/* Refined glow blob */
.hero-glow {
  background: radial-gradient(circle, rgba(232,112,8,0.22) 0%, transparent 65%);
  filter: blur(6px);
  animation: hero-glow-pulse 8s ease-in-out infinite;
}
@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1.00; transform: translateY(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }

/* ════════════════════════════════════════════════════════════
   TRUST STRIP — subtle hover lift
   ════════════════════════════════════════════════════════════ */
.trust-strip {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent),
    #0d0d0d;
  border-top-color: var(--hairline);
  border-bottom-color: var(--hairline);
}
.trust-item {
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.20s ease;
}
.trust-item:hover { background: rgba(232,112,8,0.04); }
.trust-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.16), rgba(232,112,8,0.06));
  box-shadow: inset 0 0 0 1px rgba(232,112,8,0.20);
}

/* ════════════════════════════════════════════════════════════
   STATS BAR — premium number treatment
   ════════════════════════════════════════════════════════════ */
.stats-bar {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(232,112,8,0.10) 0%, transparent 65%),
    var(--navy);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.40);
}
.stat-num {
  background: linear-gradient(180deg, #ff9636 0%, var(--orange) 65%, #d96a06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 3px 12px rgba(232,112,8,0.22));
}
.stat { transition: transform 0.30s var(--ease-out-quart); }
.stat:hover { transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════
   SECTION HEADERS — orange accent line under title
   ════════════════════════════════════════════════════════════ */
.section-title {
  letter-spacing: -0.018em;
}
.section-header > .section-title::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--orange), rgba(232,112,8,0.0));
  margin: 18px auto 0;
  border-radius: 2px;
}
.why-text .why-title::after,
.about-mission-text h2::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--orange), rgba(232,112,8,0.0));
  margin: 16px 0 0;
  border-radius: 2px;
}

/* Overline get a leading line */
.overline {
  display: inline-flex; align-items: center; gap: 10px;
}
.overline::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--orange);
  display: inline-block;
}
/* Reset for `.section-header > .overline` keeping it centered */
.section-header .overline { justify-content: center; }

/* ════════════════════════════════════════════════════════════
   CARD COMMON: cursor spotlight pattern (--mx / --my driven by JS)
   ════════════════════════════════════════════════════════════ */
.service-card,
.industry-card,
.cert-card,
.engagement-card,
.plan-card,
.article-card,
.service-tier-card,
.service-specialty-card,
.service-process-step,
.engagement-size-card,
.about-diff-card,
.compliance-info-card,
.compliance-ref-card,
.compliance-contact-card,
.geo-service-xlink,
.geo-highlight-card,
.industry-challenge-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-out-quart),
    border-color 0.25s ease,
    box-shadow 0.30s var(--ease-out-quart);
}

/* Spotlight glow tracks cursor on hover. Uses `mix-blend-mode: screen` so the
   orange glow brightens whatever's beneath instead of obscuring it — this lets
   the pseudo-element sit above ALL card content (including absolutely-positioned
   badges like `.service-card-badge`, `.plan-badge`, `.industry-card-arrow`,
   `.compliance-ref-step`) without breaking their layout. The card's
   `isolation: isolate` keeps the blend scoped to within each card. */
.service-card::before,
.industry-card::before,
.cert-card::before,
.engagement-card::before,
.plan-card::before,
.article-card::before,
.service-tier-card::before,
.service-specialty-card::before,
.service-process-step::before,
.engagement-size-card::before,
.about-diff-card::before,
.compliance-info-card::before,
.compliance-ref-card::before,
.compliance-contact-card::before,
.geo-service-xlink::before,
.geo-highlight-card::before,
.industry-challenge-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    240px circle at var(--mx) var(--my),
    rgba(232,112,8,0.22),
    transparent 60%);
  opacity: 0;
  transition: opacity 0.30s var(--ease-out-quart);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
@media (hover: hover) {
  .service-card:hover::before,
  .industry-card:hover::before,
  .cert-card:hover::before,
  .engagement-card:hover::before,
  .plan-card:hover::before,
  .article-card:hover::before,
  .service-tier-card:hover::before,
  .service-specialty-card:hover::before,
  .service-process-step:hover::before,
  .engagement-size-card:hover::before,
  .about-diff-card:hover::before,
  .compliance-info-card:hover::before,
  .compliance-ref-card:hover::before,
  .compliance-contact-card:hover::before,
  .geo-service-xlink:hover::before,
  .geo-highlight-card:hover::before,
  .industry-challenge-card:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card::before, .industry-card::before, .cert-card::before, .engagement-card::before,
  .plan-card::before, .article-card::before, .service-tier-card::before,
  .service-specialty-card::before, .service-process-step::before, .engagement-size-card::before,
  .about-diff-card::before, .compliance-info-card::before, .compliance-ref-card::before,
  .compliance-contact-card::before, .geo-service-xlink::before, .geo-highlight-card::before,
  .industry-challenge-card::before { display: none; }
}

/* (Intentional gap — the previous `.card > * { position: relative; z-index: 1 }`
   rule was removed because it stripped `position: absolute` from
   `.service-card-badge`, `.plan-badge`, `.industry-card-arrow`,
   `.compliance-ref-step`, etc., making them fall out of their anchored
   corners into normal document flow. With the spotlight now using
   `mix-blend-mode: screen` above, no extra positioning is needed on children.) */

/* ════════════════════════════════════════════════════════════
   SERVICE CARDS — refined elevation, arrow, thumb
   ════════════════════════════════════════════════════════════ */
.service-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 40%),
    var(--bg2);
  border-color: var(--hairline-strong);
  border-radius: 6px;
  transition:
    transform 0.40s var(--ease-out-quart),
    border-color 0.25s ease,
    box-shadow 0.30s var(--ease-out-quart);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(232,112,8,0.20);
}

/* Service card thumbnail — slight contrast lift + premium image hover */
.service-card-thumb { border-radius: 6px 6px 0 0; }
.service-card-thumb::after {
  background: linear-gradient(180deg,
    rgba(1,35,63,0.10) 0%,
    rgba(1,35,63,0.00) 35%,
    rgba(1,35,63,0.55) 100%);
}
.service-card-thumb img { transition: transform 0.7s var(--ease-out-quart), filter 0.4s ease; filter: saturate(0.95); }
.service-card:hover .service-card-thumb img { transform: scale(1.08); filter: saturate(1.08); }

/* Card arrow expands on hover */
.service-card-arrow {
  border-radius: 50%;
  width: 38px; height: 38px;
  transition:
    color 0.20s ease,
    border-color 0.20s ease,
    background 0.20s ease,
    transform 0.30s var(--ease-out-quart);
}
.service-card:hover .service-card-arrow {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  transform: translateX(4px);
  box-shadow: var(--shadow-orange-sm);
}

/* Featured card: subtle inner glow */
.service-card-featured {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(232,112,8,0.09) 0%, transparent 70%),
    var(--bg2);
}

/* Service-card chips: refined */
.service-chip {
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border-color: var(--hairline-strong);
  transition: background 0.20s, border-color 0.20s, color 0.20s;
}
.service-card:hover .service-chip {
  background: rgba(232,112,8,0.10);
  border-color: rgba(232,112,8,0.40);
  color: rgba(255,255,255,0.92);
}

/* ════════════════════════════════════════════════════════════
   INDUSTRY / CERT / ENGAGEMENT CARDS — unified elevation
   ════════════════════════════════════════════════════════════ */
.industry-card,
.cert-card,
.engagement-card {
  border-radius: 6px;
  border-color: var(--hairline-strong);
}
.industry-card:hover,
.cert-card:hover,
.engagement-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(232,112,8,0.18);
  border-color: var(--orange);
}

.industry-icon,
.cert-icon,
.engagement-icon,
.about-diff-icon,
.contact-detail-icon,
.compliance-safety-icon,
.compliance-contact-icon,
.service-specialty-card-icon,
.engagement-size-icon,
.exit-modal-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.16), rgba(232,112,8,0.04));
  box-shadow: inset 0 0 0 1px rgba(232,112,8,0.20);
  transition: transform 0.30s var(--ease-out-quart), box-shadow 0.25s ease;
}
.service-card:hover .service-card-icon,
.industry-card:hover .industry-icon,
.cert-card:hover .cert-icon,
.engagement-card:hover .engagement-icon,
.about-diff-card:hover .about-diff-icon,
.engagement-size-card:hover .engagement-size-icon {
  transform: scale(1.08) rotate(-3deg);
}

.industry-card-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  transition: all 0.25s var(--ease-out-quart);
}
.industry-card:hover .industry-card-arrow {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════════════════
   WHY SECTION — refined "why-item" + features
   ════════════════════════════════════════════════════════════ */
.why-section {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(232,112,8,0.05) 0%, transparent 60%),
    var(--bg2);
}
.why-item {
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transition: transform 0.25s var(--ease-out-quart), background 0.20s ease;
}
.why-item:hover {
  transform: translateX(4px);
  background: linear-gradient(90deg, rgba(232,112,8,0.10), rgba(255,255,255,0.02));
}
.why-feat {
  border-radius: 6px;
  border-color: var(--hairline-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
    var(--bg3);
  transition: transform 0.30s var(--ease-out-quart), border-color 0.20s ease, box-shadow 0.25s ease;
}
.why-feat:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}
.why-feat-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.18), rgba(232,112,8,0.04));
  box-shadow: inset 0 0 0 1px rgba(232,112,8,0.22);
  transition: transform 0.30s var(--ease-out-quart);
}
.why-feat:hover .why-feat-icon { transform: scale(1.10); }

/* ════════════════════════════════════════════════════════════
   HOW IT WORKS — premium step cards with connector line
   ════════════════════════════════════════════════════════════ */
.how-section {
  background:
    linear-gradient(180deg, var(--bg) 0%, #0c0c0c 100%);
}
.how-grid { position: relative; }
@media (min-width: 901px) {
  .how-grid::before {
    content: '';
    position: absolute;
    top: 50%; left: 4%; right: 4%;
    height: 1px;
    background: repeating-linear-gradient(
      90deg,
      var(--orange) 0 6px,
      transparent 6px 14px);
    opacity: 0.30;
    z-index: 0;
  }
}
.how-step {
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(232,112,8,0.08) 0%, transparent 60%),
    var(--navy);
  border-radius: 8px;
  border: 1px solid var(--hairline);
  position: relative;
  z-index: 1;
  transition: transform 0.30s var(--ease-out-quart), background 0.25s ease, box-shadow 0.25s ease;
}
.how-step:hover {
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(232,112,8,0.14) 0%, transparent 60%),
    var(--navy2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.how-num {
  background: linear-gradient(180deg, rgba(232,112,8,0.45), rgba(232,112,8,0.08));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.04em;
}
.how-arrow {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--bg), 0 4px 14px rgba(232,112,8,0.40);
}

/* ════════════════════════════════════════════════════════════
   PLANS — featured glow, refined badge
   ════════════════════════════════════════════════════════════ */
.plan-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 40%),
    var(--bg3);
  transition: transform 0.35s var(--ease-out-quart), border-color 0.25s ease, box-shadow 0.30s var(--ease-out-quart);
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.plan-card-featured {
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(232,112,8,0.12) 0%, transparent 65%),
    var(--bg3);
  box-shadow: 0 0 0 1px rgba(232,112,8,0.25), var(--shadow-md), 0 0 60px rgba(232,112,8,0.08);
}
.plan-card-featured:hover {
  box-shadow: 0 0 0 1px rgba(232,112,8,0.40), var(--shadow-lg), 0 0 80px rgba(232,112,8,0.14);
}
.plan-badge { box-shadow: var(--shadow-orange-sm); border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   ENGAGEMENT SIZES CARDS
   ════════════════════════════════════════════════════════════ */
.engagement-size-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: transform 0.35s var(--ease-out-quart), border-color 0.25s, box-shadow 0.30s var(--ease-out-quart);
}
.engagement-size-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.engagement-size-card-featured {
  box-shadow: 0 0 0 1px rgba(232,112,8,0.30), var(--shadow-md);
}
.engagement-size-badge { box-shadow: var(--shadow-orange-sm); border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   FAQ — smoother accordion, accent on open
   ════════════════════════════════════════════════════════════ */
.faq-list { gap: 10px; }
.faq-item {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 60%),
    var(--bg2);
  transition: border-color 0.25s ease, transform 0.20s ease, box-shadow 0.25s ease;
}
.faq-item:hover { border-color: rgba(232,112,8,0.30); }
.faq-item.open {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(232,112,8,0.15), var(--shadow-sm);
}
.faq-question { padding: 22px 26px; }
.faq-item.open .faq-answer { padding: 0 26px 22px; }

/* ════════════════════════════════════════════════════════════
   CONTACT FORM — glow focus, refined labels
   ════════════════════════════════════════════════════════════ */
.contact-section {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(232,112,8,0.04) 0%, transparent 65%),
    var(--bg2);
}
.form-input {
  background: var(--bg3);
  border-color: var(--hairline-strong);
  border-radius: 6px;
  transition:
    border-color 0.20s ease,
    box-shadow 0.25s ease,
    background 0.20s ease;
}
.form-input:hover { border-color: rgba(232,112,8,0.35); }
.form-input:focus {
  border-color: var(--orange);
  background: var(--bg3);
  box-shadow: 0 0 0 4px rgba(232,112,8,0.14), 0 2px 8px rgba(232,112,8,0.08);
}
.form-input.field-error {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.18);
}
.form-submit { border-radius: 4px; padding: 16px 36px; }
.form-submit:hover { letter-spacing: 0.10em; }

/* ════════════════════════════════════════════════════════════
   SERVICE DETAIL — hero polish, capability accent, tier polish
   ════════════════════════════════════════════════════════════ */
.service-hero { border-bottom: none; }
.service-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange) 25%,
    var(--orange) 75%,
    transparent 100%);
  z-index: 2;
}
.service-hero-overlay {
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(232,112,8,0.16) 0%, transparent 55%),
    linear-gradient(135deg, rgba(13,13,13,0.84) 0%, rgba(1,35,63,0.66) 50%, rgba(1,35,63,0.86) 100%);
}
.service-hero-title {
  letter-spacing: -0.018em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}

/* Sidebar polish */
.service-sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    var(--bg2);
  border-right-color: var(--hairline-strong);
}
.sidebar-links a {
  transition: color 0.18s ease, background 0.18s ease,
              border-left-color 0.18s ease, padding-left 0.20s var(--ease-out-quart);
}
.sidebar-links a:hover {
  padding-left: 32px;
  border-left-color: var(--orange);
}
.sidebar-cta {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-md);
}

/* Service content H2 — refined accent */
.service-content h2 {
  letter-spacing: -0.01em;
  border-left-width: 4px;
  position: relative;
}
.service-content h2::before {
  content: '';
  position: absolute; left: -4px; top: 0; bottom: 10px;
  width: 4px;
  background: linear-gradient(180deg, var(--orange), rgba(232,112,8,0));
  border-radius: 2px;
}

/* Service tier cards: premium polish */
.service-tier-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: transform 0.30s var(--ease-out-quart), border-color 0.20s ease, box-shadow 0.25s ease;
}
.service-tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-tier-card-featured {
  box-shadow: 0 0 0 1px rgba(232,112,8,0.30), var(--shadow-md);
}

/* Process step cards: numbered connectors */
.service-process-step {
  border-radius: 8px;
  border-color: var(--hairline-strong);
}
.service-process-step:hover { box-shadow: var(--shadow-md); }
.service-process-num {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 10px;
  background: rgba(232,112,8,0.10);
  border: 1px solid rgba(232,112,8,0.25);
  border-radius: 999px;
}

/* Specialty card hover refinement */
.service-specialty-card { border-radius: 8px; }
.service-specialty-card:hover { box-shadow: var(--shadow-md); }
.service-specialty-card-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.16), rgba(232,112,8,0.04));
  box-shadow: inset 0 0 0 1px rgba(232,112,8,0.20);
  transition: transform 0.30s var(--ease-out-quart);
}
.service-specialty-card:hover .service-specialty-card-icon { transform: rotate(-6deg) scale(1.08); }

/* Service trust strip refinement */
.service-trust-strip {
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(232,112,8,0.06), rgba(232,112,8,0.02));
}

/* Industry/location chips on service detail */
.service-industry-chip,
.service-location-chip,
.service-related-card {
  border-radius: 6px;
  border-color: var(--hairline-strong);
  transition: all 0.25s var(--ease-out-quart);
}
.service-industry-chip:hover,
.service-location-chip:hover,
.service-related-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

/* Mid-CTA polish */
.service-mid-cta {
  border-radius: 8px;
  border-color: var(--hairline-strong);
}
.service-mid-cta-phone {
  background:
    radial-gradient(80% 100% at 0% 50%, rgba(232,112,8,0.10) 0%, transparent 60%),
    var(--bg2);
}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — stat box, diff cards
   ════════════════════════════════════════════════════════════ */
.about-hero-overlay {
  background:
    radial-gradient(60% 60% at 25% 30%, rgba(232,112,8,0.14) 0%, transparent 55%),
    linear-gradient(135deg, rgba(13,13,13,0.84) 0%, rgba(1,35,63,0.60) 50%, rgba(1,35,63,0.80) 100%);
}
.about-hero h1, .about-hero h2 {
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.40);
}
.about-stats-box {
  border-radius: 8px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.about-stat {
  background: rgba(255,255,255,0.03);
  transition: background 0.25s ease;
}
.about-stat:hover { background: rgba(255,255,255,0.06); }
.about-stat-num {
  background: linear-gradient(180deg, #ff9636 0%, var(--orange) 65%, #d96a06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 3px 12px rgba(232,112,8,0.22));
}
.about-diff-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: transform 0.30s var(--ease-out-quart), border-color 0.25s ease, box-shadow 0.25s ease;
}
.about-diff-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}

/* Coverage map polish */
.coverage-tile-group:hover .coverage-tile {
  filter: drop-shadow(0 0 6px rgba(232,112,8,0.55));
}
.coverage-tile-active { filter: drop-shadow(0 0 8px rgba(232,112,8,0.30)); }

/* ════════════════════════════════════════════════════════════
   COMPLIANCE PAGE — refined info cards
   ════════════════════════════════════════════════════════════ */
.compliance-info-card,
.compliance-ref-card,
.compliance-contact-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: transform 0.30s var(--ease-out-quart), border-color 0.25s ease, box-shadow 0.25s ease;
}
.compliance-info-card:hover,
.compliance-contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}
.compliance-quickstats-grid {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.compliance-stat-num {
  background: linear-gradient(180deg, #ff9636 0%, var(--orange) 65%, #d96a06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.license-table { border-radius: 8px; overflow: hidden; }
.license-table tbody tr { transition: background 0.18s ease; }
.license-table tbody tr:hover { background: rgba(232,112,8,0.05); }
.on-request-chip {
  background: linear-gradient(135deg, rgba(232,112,8,0.14), rgba(232,112,8,0.04));
}
.license-request-card { border-radius: 8px; box-shadow: var(--shadow-sm); }
.license-request-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.20), rgba(232,112,8,0.06));
  box-shadow: inset 0 0 0 1px rgba(232,112,8,0.30);
}

/* ════════════════════════════════════════════════════════════
   ARTICLES — refined card, reading bar glow
   ════════════════════════════════════════════════════════════ */
.article-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.article-card-footer { background: rgba(232,112,8,0.04); }
.article-sidebar-card,
.article-sidebar-cta { border-radius: 8px; border-color: var(--hairline-strong); }
.article-sidebar-link { transition: color 0.18s ease, padding-left 0.20s var(--ease-out-quart); }
.article-sidebar-link:hover { padding-left: 6px; color: var(--orange); }

#reading-progress {
  background: linear-gradient(90deg, var(--orange) 0%, #ff9636 100%);
  box-shadow: 0 0 12px rgba(232,112,8,0.50);
  height: 3px;
}

/* ════════════════════════════════════════════════════════════
   GEO + INDUSTRY HEROES — refined
   ════════════════════════════════════════════════════════════ */
.geo-hero, .industry-hero {
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(1,90,140,0.40) 0%, transparent 60%),
    linear-gradient(135deg, #0a0a0a 0%, var(--navy) 100%);
}
.geo-hero-title, .industry-hero-title {
  letter-spacing: -0.018em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.40);
}
.geo-highlight-card,
.industry-challenge-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: transform 0.30s var(--ease-out-quart), border-color 0.25s ease, box-shadow 0.25s ease;
}
.geo-highlight-card:hover,
.industry-challenge-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.geo-service-xlink {
  border-radius: 8px;
  border-color: var(--hairline-strong);
}
.geo-service-xlink:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ════════════════════════════════════════════════════════════
   CTA BANDS — premium gradient mesh
   ════════════════════════════════════════════════════════════ */
.about-cta-band,
.industry-cta-band,
.compliance-cta-band,
.geo-cta-band,
.case-studies-cta,
.service-cta-band,
.industry-cta-band {
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(232,112,8,0.18) 0%, transparent 65%),
    radial-gradient(50% 80% at 100% 0%, rgba(1,90,140,0.35) 0%, transparent 60%),
    var(--navy);
}
.about-cta-title,
.case-studies-cta-title { letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,0.40); }

/* ════════════════════════════════════════════════════════════
   ENGAGEMENTS (anonymized projects) — premium polish
   ════════════════════════════════════════════════════════════ */
.engagement-card {
  border-radius: 8px;
}
.engagement-icon {
  background: linear-gradient(135deg, rgba(232,112,8,0.16), rgba(232,112,8,0.04));
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════
   CASE STUDIES
   ════════════════════════════════════════════════════════════ */
.cs-card {
  border-radius: 8px;
  border-color: var(--hairline-strong);
  transition: border-color 0.25s ease, box-shadow 0.30s var(--ease-out-quart), transform 0.30s var(--ease-out-quart);
}
.cs-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cs-card-header {
  background:
    radial-gradient(60% 100% at 0% 100%, rgba(232,112,8,0.20) 0%, transparent 65%),
    var(--navy);
}
.cs-metric {
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cs-metric-num {
  background: linear-gradient(180deg, #ff9636 0%, var(--orange) 65%, #d96a06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ════════════════════════════════════════════════════════════
   STICKY CTAs — premium feel
   ════════════════════════════════════════════════════════════ */
.emergency-btn {
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.back-to-top {
  background: linear-gradient(180deg, #0d3856, var(--navy));
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-md);
  transition: background 0.20s, transform 0.25s var(--ease-out-quart), box-shadow 0.25s ease;
}
.back-to-top:hover {
  background: linear-gradient(180deg, #0f4365, var(--navy2));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(232,112,8,0.30);
}
.sticky-cta {
  border-radius: 999px;
  border-color: rgba(232,112,8,0.40);
  background: rgba(20,20,20,0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04);
}
.sticky-cta-btn { border-radius: 999px; }

/* ════════════════════════════════════════════════════════════
   MARQUEE — softer logo card treatment (kept white for brand fidelity)
   ════════════════════════════════════════════════════════════ */
.logo-item {
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.30s var(--ease-out-quart), box-shadow 0.25s ease;
}
.logo-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ════════════════════════════════════════════════════════════
   FOOTER — subtle gradient depth, refined link hover
   ════════════════════════════════════════════════════════════ */
footer {
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(232,112,8,0.04) 0%, transparent 60%),
    radial-gradient(60% 60% at 0% 0%, rgba(1,90,140,0.12) 0%, transparent 55%),
    #0a0a0a;
  border-top-color: var(--hairline-strong);
}
.footer-col a {
  position: relative;
  transition: color 0.18s ease, padding-left 0.20s var(--ease-out-quart);
}
.footer-col a:hover { padding-left: 8px; color: var(--white); }
.footer-col a::before {
  content: '→';
  position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  font-weight: 700;
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.18s ease, left 0.20s var(--ease-out-quart);
}
.footer-col a:hover::before { opacity: 1; left: -10px; }
.footer-brand { letter-spacing: -0.01em; }
.footer-social-link { transition: color 0.18s ease, transform 0.20s var(--ease-out-quart); }
.footer-social-link:hover { transform: translateY(-2px); color: var(--orange); }

/* ════════════════════════════════════════════════════════════
   COMPARISON TABLE — refined hover
   ════════════════════════════════════════════════════════════ */
.services-compare,
.plans-compare {
  border-radius: 8px;
  overflow: hidden;
}
.services-compare tbody tr,
.plans-compare tbody tr { transition: background 0.20s ease; }

/* ════════════════════════════════════════════════════════════
   QUOTE / EXIT MODAL — refined edge treatment
   ════════════════════════════════════════════════════════════ */
.quote-modal-box {
  border-radius: 10px;
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.03);
}
.quote-modal-backdrop { background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.exit-modal-box { border-radius: 10px; }
.exit-modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.quote-step-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.quote-step-item.active .quote-step-dot {
  box-shadow: 0 0 0 4px rgba(232,112,8,0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.quote-service-option span {
  border-radius: 6px;
  transition: all 0.20s ease;
}
.quote-service-option input[type="radio"]:checked + span {
  box-shadow: 0 0 0 1px rgba(232,112,8,0.35), 0 4px 14px rgba(232,112,8,0.12);
}

/* ════════════════════════════════════════════════════════════
   ARTICLES — gradient text on hero title
   ════════════════════════════════════════════════════════════ */
.article-hero { background: linear-gradient(180deg, var(--bg2) 0%, #161616 100%); border-bottom-color: var(--hairline-strong); }
.article-hero-title { letter-spacing: -0.018em; }
.resources-hero {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(232,112,8,0.12) 0%, transparent 60%),
    var(--navy);
}
.resources-hero h1, .resources-hero h2 { letter-spacing: -0.018em; }
.legal-hero {
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(232,112,8,0.08) 0%, transparent 60%),
    var(--navy);
}
.legal-hero h1, .legal-hero h2 { letter-spacing: -0.018em; }
.case-studies-hero {
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(232,112,8,0.14) 0%, transparent 55%),
    linear-gradient(135deg, #0a0a0a 0%, var(--navy) 100%);
}

/* ════════════════════════════════════════════════════════════
   BREADCRUMB — better spacing
   ════════════════════════════════════════════════════════════ */
.breadcrumb { padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.30); display: inline-flex; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ════════════════════════════════════════════════════════════
   ORANGE SYSTEM — PART 2: secondary surfaces
   ────────────────────────────────────────────────────────────
   Smaller orange surfaces that aren't primary CTAs but still
   need consistent hover/state behavior: badges, dots, step
   indicators, featured-card glows, arrow chips, icon circles.

   All use the same `--orange-*` tokens declared near the top of
   this file so a single brand-color tweak propagates everywhere.
   ════════════════════════════════════════════════════════════ */

/* ── Orange pill badges (MOST COMMON, MOST REQUESTED, etc.) ── */
.plan-badge,
.engagement-size-badge,
.service-tier-badge,
.service-card-badge:not(.service-card-badge-emergency):not(.service-card-badge-program) {
  background: var(--orange-base);
  color: #fff;
  box-shadow: var(--shadow-orange-sm);
}

/* ── Restore overflow: visible on cards whose featured pill sits ABOVE the
   card body (top: -11px / -13px). The common spotlight rule sets
   `overflow: hidden`, which was clipping the top half of the MOST COMMON
   badge on plans, engagement-size cards, and service tiers. The spotlight
   `::before` is `inset: 0` so it stays bounded by the parent regardless. ── */
.plan-card,
.engagement-size-card,
.service-tier-card {
  overflow: visible;
}

/* ── Featured card outer glow — visible-but-restrained, no bloom ── */
.plan-card-featured {
  border-color: var(--orange-base);
  box-shadow:
    0 0 0 1px var(--orange-ring),
    0 12px 28px rgba(0,0,0,0.45),
    0 0 24px rgba(232,112,8,0.10);
}
.plan-card-featured:hover {
  box-shadow:
    0 0 0 1px rgba(232,112,8,0.42),
    0 16px 36px rgba(0,0,0,0.55),
    0 0 32px rgba(232,112,8,0.14);
}
.engagement-size-card-featured {
  border-color: var(--orange-base);
  box-shadow:
    0 0 0 1px var(--orange-ring),
    var(--shadow-md);
}
.engagement-size-card-featured:hover {
  box-shadow:
    0 0 0 1px rgba(232,112,8,0.42),
    var(--shadow-lg);
}
.service-tier-card-featured {
  border-color: var(--orange-base);
  box-shadow:
    0 0 0 1px var(--orange-ring),
    var(--shadow-md);
}
.service-tier-card-featured:hover {
  box-shadow:
    0 0 0 1px rgba(232,112,8,0.42),
    var(--shadow-md);
}

/* ── Active step indicator (quote modal "1/2/3/4") — unified halo ── */
.quote-step-item.active .quote-step-dot {
  background: var(--orange-base);
  border-color: var(--orange-base);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(232,112,8,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}
.quote-step-item.done .quote-step-dot {
  background: var(--orange-tint-2);
  border-color: var(--orange-base);
  color: var(--orange-base);
  box-shadow: none;
}

/* ── Service-card meta dot — consistent halo with active step ── */
.service-card-meta-dot,
.engagement-size-meta-dot {
  box-shadow: 0 0 0 3px rgba(232,112,8,0.16);
}

/* ── Hover ARROW chips on cards — consistent orange fill ── */
.service-card:hover .service-card-arrow,
.industry-card:hover .industry-card-arrow {
  background: var(--orange-base);
  color: #fff;
  border-color: var(--orange-base);
  box-shadow: var(--shadow-orange-sm);
}

/* ── Icon CIRCLES (used across cards, modals, hero, contact) ── */
/* All icon circles use the same orange-tint background + thin orange ring so
   the page reads as one system, not several variations. */
.industry-icon,
.cert-icon,
.engagement-icon,
.about-diff-icon,
.contact-detail-icon,
.compliance-safety-icon,
.compliance-contact-icon,
.service-specialty-card-icon,
.engagement-size-icon,
.exit-modal-icon,
.why-feat-icon,
.trust-icon,
.license-request-icon {
  background-color: var(--orange-tint-2);
  background-image: linear-gradient(135deg, var(--orange-tint-3), var(--orange-tint-1));
  color: var(--orange-base);
  box-shadow: inset 0 0 0 1px var(--orange-ring);
}

/* ── Eyebrow chips on hero variants — consistent orange-tint pill ── */
.hero-eyebrow,
.compliance-hero-eyebrow,
.industry-hero-eyebrow,
.geo-hero-eyebrow {
  background-color: var(--orange-tint-2);
  background-image: linear-gradient(135deg, var(--orange-tint-3), var(--orange-tint-1));
  border-color: var(--orange-ring);
  color: var(--orange-base);
}

/* ── Quote modal radio-pill selected state — orange ring not heavy shadow ── */
.quote-service-option input[type="radio"]:checked + span {
  border-color: var(--orange-base);
  background-color: var(--orange-tint-2);
  color: #fff;
  box-shadow: 0 0 0 1px var(--orange-ring);
}

/* ── FAQ open state — unified orange treatment ── */
.faq-item.open {
  border-color: var(--orange-base);
  box-shadow: 0 0 0 1px var(--orange-ring), var(--shadow-sm);
}
.faq-item.open .faq-question { color: var(--orange-base); }
.faq-item.open .faq-icon { color: var(--orange-base); }

/* ── Sidebar links: orange left-border active state ── */
.sidebar-links a.active {
  background: var(--orange-base);
  border-left-color: var(--orange-base);
  color: #fff;
}
.sidebar-links a:hover { border-left-color: var(--orange-base); }

/* ── Article reading-progress bar — single solid orange ── */
#reading-progress {
  background: var(--orange-base);
  box-shadow: 0 0 10px rgba(232,112,8,0.40);
}

/* ── Form required asterisks — consistent shade ── */
.form-req { color: var(--orange-base); }

/* ── License-request icon, exit-modal icon — refined ── */
.exit-modal-icon {
  border-color: var(--orange-ring);
}

/* ── Back-to-top hover orange hint ── */
.back-to-top:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px var(--orange-ring);
}

/* ── Quote modal close, exit modal close: subtle orange focus ── */
.quote-modal-close:focus-visible,
.exit-modal-close:focus-visible,
.announcement-close:focus-visible {
  outline: 2px solid var(--orange-base);
  outline-offset: 2px;
}

/* ── Selection color: brand orange ── */
::selection { background: var(--orange-base); color: #fff; }
::-moz-selection { background: var(--orange-base); color: #fff; }

/* ════════════════════════════════════════════════════════════
   PRINT — strip backgrounds and shadows
   ════════════════════════════════════════════════════════════ */
@media print {
  .nav, .announcement-bar, .emergency-cta, .back-to-top, .sticky-cta,
  .quote-modal, .exit-modal, .hero-video, .hero-video-overlay { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .about-hero, .industry-hero, .compliance-hero, .geo-hero,
  .case-studies-hero, .legal-hero, .resources-hero,
  .about-cta-band, .industry-cta-band, .compliance-cta-band, .service-cta-band {
    background: #fff !important; color: #000 !important;
  }
}