/* ===================================================================
   Renew Mechanical — assets/css/style.css
   Single canonical stylesheet. Organised in three parts:
     Part 1 · CSS custom properties, reset, body, global layout
     Part 2 · Semantic component classes for refactored pages
     Part 3 · Utility carry-forward (for nav, footer, includes not yet
               refactored). Can be pruned as templates are updated.
   =================================================================== */


/* ═══════════════════════════════════════════════════════════════════
   PART 1 — FOUNDATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES ──────────────────────────────────────────── */
:root {
  --brand-blue:        #4A8FD4;
  --brand-blue-dark:   #2E6BAD;
  --brand-blue-light:  #D6E9F8;
  --brand-red:         #C62828;
  --brand-red-dark:    #8E1B1B;
  --brand-red-light:   #FCE8E8;
  --brand-charcoal:    #1E2530;
  --brand-offwhite:    #F7F8FA;
  --shadow-card:       0 4px 24px rgba(30,37,48,0.08);
  --font-sans:         Inter, system-ui, -apple-system, sans-serif;
}

/* ── RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  color: var(--brand-charcoal);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* ── ANIMATIONS ─────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════
   PART 2 — SEMANTIC COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
}
.btn--red {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  box-shadow: 0 4px 12px rgba(198,40,40,0.25);
}
.btn--red:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }

.btn--blue {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.btn--blue:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }

.btn--ghost-white {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.30);
}
.btn--ghost-white:hover { background: rgba(255,255,255,0.20); }

.btn--white {
  background: #fff;
  color: var(--brand-blue);
  border-color: #fff;
}
.btn--white:hover { background: #eff6ff; }

.btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.30);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.10); }

.btn svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }

/* ── SECTION HEADER (reusable) ──────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  margin-bottom: 0.5rem;
}
.section-header__title {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--brand-charcoal);
  margin-top: 0.5rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .section-header__title { font-size: 2.25rem; } }
.section-header__title--white { color: #fff; }
.section-header__sub {
  color: #6b7280;
  margin-top: 0.75rem;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625;
  font-size: 0.9375rem;
}

/* ── SITE HERO ──────────────────────────────────────────────────────── */
.site-hero {
  position: relative;
  background: var(--brand-charcoal);
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.site-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,37,48,0.85) 0%, rgba(46,107,173,0.70) 100%);
  z-index: 1;
}
.site-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234A8FD4' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.site-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
  padding: 5rem 1rem;
  width: 100%;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) { .site-hero__inner { grid-template-columns: 1fr 1fr; } }

.site-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(74,143,212,0.20);
  color: var(--brand-blue);
  border: 1px solid rgba(74,143,212,0.30);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}
.site-hero__badge-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--brand-blue);
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
  flex-shrink: 0;
}
.site-hero__heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.site-hero__heading .accent { color: var(--brand-blue); }
@media (min-width: 640px)  { .site-hero__heading { font-size: 3rem; } }
@media (min-width: 1024px) { .site-hero__heading { font-size: 3.75rem; } }

.site-hero__sub {
  color: #d1d5db;
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  max-width: 32rem;
}
.site-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-hero__card-wrap { display: none; }
@media (min-width: 768px) { .site-hero__card-wrap { display: block; } }

.site-hero__card {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 1rem;
  padding: 2rem;
}
.site-hero__card-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.site-hero__card-logo img {
  height: 3rem;
  filter: brightness(2) invert(1);
}
.site-hero__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.site-hero__stat {
  background: rgba(255,255,255,0.10);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}
.site-hero__stat-number { font-size: 1.875rem; font-weight: 900; color: var(--brand-blue); }
.site-hero__stat-label  { color: rgba(255,255,255,0.70); font-size: 0.75rem; font-weight: 500; margin-top: 0.25rem; }
.site-hero__card-licenses {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.20);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.site-hero__license-label { font-size: 0.75rem; color: #9ca3af; }
.site-hero__license-text  { font-size: 0.75rem; color: #d1d5db; font-weight: 500; }

/* ── TRUST BAR ──────────────────────────────────────────────────────── */
.trust-bar {
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.trust-bar__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .trust-bar__inner { grid-template-columns: repeat(4, 1fr); } }
.trust-bar__item { display: flex; align-items: center; gap: 0.75rem; }
.trust-bar__icon { font-size: 1.875rem; }
.trust-bar__title { font-weight: 700; color: var(--brand-charcoal); font-size: 1rem; line-height: 1.25; }
.trust-bar__sub   { color: #6b7280; font-size: 0.875rem; }

/* ── ABOUT TEASER ───────────────────────────────────────────────────── */
.about-teaser {
  background: var(--brand-offwhite);
  padding: 5rem 0;
}
.about-teaser__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) { .about-teaser__inner { grid-template-columns: 1fr 1fr; } }
.about-teaser__eyebrow {
  display: block;
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.about-teaser__heading {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--brand-charcoal);
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .about-teaser__heading { font-size: 2.25rem; } }
.about-teaser__body { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
.about-teaser__licenses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.about-teaser__license-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(74,143,212,0.10);
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(74,143,212,0.20);
}
.about-teaser__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.about-teaser__img-main {
  grid-column: span 2;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 12rem;
}
.about-teaser__img-thumb {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 9rem;
}
.about-teaser__img-main img,
.about-teaser__img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── SERVICES SECTION ───────────────────────────────────────────────── */
.services-section { background: #fff; padding: 5rem 0; }
.services-section__inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.services-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── SERVICE CARD (semantic, supersedes utility version below) ───────── */
.service-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(30,37,48,0.14);
  border-color: rgba(74,143,212,0.30);
}
.service-card__icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.service-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-charcoal);
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}
.service-card:hover .service-card__title { color: var(--brand-blue); }
.service-card__desc  { color: #6b7280; font-size: 0.875rem; line-height: 1.625; margin-bottom: 1rem; }
.service-card__link  {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--brand-blue);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ── SOCIAL PROOF BANNER ────────────────────────────────────────────── */
.proof-banner {
  background: linear-gradient(to right, var(--brand-blue), var(--brand-blue-dark));
  padding: 3.5rem 0;
}
.proof-banner__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .proof-banner__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.proof-banner__number { font-size: 3rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 0.25rem; }
.proof-banner__label  { color: #bfdbfe; font-size: 1.125rem; font-weight: 600; }
.proof-banner__divider {
  display: none;
  width: 1px;
  height: 4rem;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
@media (min-width: 768px) { .proof-banner__divider { display: block; } }

/* ── FAQ SECTION (semantic, supersedes utility version below) ────────── */
.faq-section { background: #fff; padding: 5rem 0; }
.faq-section__inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }

.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.15s ease;
}
.faq-trigger:hover { background: var(--brand-offwhite); }
.faq-trigger__question {
  font-weight: 600;
  color: var(--brand-charcoal);
  font-size: 1rem;
}
.faq-icon {
  color: var(--brand-blue);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  display: inline-block;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-item.open .faq-icon   { transform: rotate(45deg); }
.faq-answer__text {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.625;
  padding-bottom: 1.25rem;
}

/* ── CTA SECTION ────────────────────────────────────────────────────── */
.cta-section { background: var(--brand-charcoal); padding: 5rem 0; text-align: center; }
.cta-section__inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.cta-section__eyebrow {
  display: block;
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.cta-section__heading {
  font-size: 1.875rem;
  font-weight: 900;
  color: #fff;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .cta-section__heading { font-size: 2.25rem; } }
.cta-section__body { color: #9ca3af; line-height: 1.625; margin-bottom: 2rem; }
.cta-section__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ── ABOUT PAGE ─────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  background: var(--brand-charcoal);
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: center;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,37,48,0.90) 0%, rgba(46,107,173,0.65) 100%);
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  padding: 5rem 1rem;
  width: 100%;
}
.about-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(74,143,212,0.20);
  color: var(--brand-blue);
  border: 1px solid rgba(74,143,212,0.30);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}
.about-hero__heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .about-hero__heading { font-size: 3rem; } }
.about-hero__sub {
  color: #d1d5db;
  font-size: 1.0625rem;
  line-height: 1.625;
  max-width: 38rem;
  margin: 0 auto;
}
.about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.about-hero__stat-number { font-size: 2rem; font-weight: 900; color: var(--brand-blue); }
.about-hero__stat-label  { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }

.about-origin { background: var(--brand-offwhite); padding: 5rem 0; }
.about-origin__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) { .about-origin__inner { grid-template-columns: 1fr 1fr; } }
.about-origin__eyebrow {
  display: block;
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.about-origin__heading {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--brand-charcoal);
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .about-origin__heading { font-size: 2.25rem; } }
.about-origin__body { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
.about-origin__pillars { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.about-origin__pillar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
}
.about-origin__pillar-icon  { font-size: 1.5rem; flex-shrink: 0; }
.about-origin__pillar-title { font-weight: 700; color: var(--brand-charcoal); font-size: 0.9375rem; margin-bottom: 0.25rem; }
.about-origin__pillar-desc  { color: #6b7280; font-size: 0.875rem; line-height: 1.5; }
.about-origin__image-wrap {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 22rem;
}
@media (min-width: 768px) { .about-origin__image-wrap { height: 28rem; } }
.about-origin__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kyle portrait — focus on face, add name strip */
.about-origin__image-wrap--kyle { position: relative; }
.about-origin__image-wrap--kyle img { object-position: center 15%; }
@media (min-width: 768px) { .about-origin__image-wrap--kyle img { object-position: top center; } }
.about-origin__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 1.5rem 1rem 0.75rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.about-licenses { background: #fff; padding: 5rem 0; }
.about-licenses__inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.about-licenses__grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 640px) { .about-licenses__grid { grid-template-columns: repeat(3, 1fr); } }
.about-licenses__card {
  background: var(--brand-offwhite);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid #e5e7eb;
  text-align: center;
}
.about-licenses__card-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(74,143,212,0.10);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
}
.about-licenses__card-number {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-blue);
  font-family: ui-monospace, monospace;
  margin-bottom: 0.5rem;
}
.about-licenses__card-name { font-size: 1rem; font-weight: 800; color: var(--brand-charcoal); margin-bottom: 0.5rem; }
.about-licenses__card-desc { font-size: 0.8125rem; color: #6b7280; line-height: 1.55; }

.about-timeline { background: var(--brand-offwhite); padding: 5rem 0; }
.about-timeline__inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.about-timeline__items { margin-top: 3rem; display: flex; flex-direction: column; gap: 0; }
.about-timeline__item {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}
.about-timeline__item:last-child { padding-bottom: 0; }
.about-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: rgba(74,143,212,0.20);
}
.about-timeline__dot {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background: var(--brand-blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--brand-blue);
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.about-timeline__year {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.about-timeline__title { font-size: 1rem; font-weight: 800; color: var(--brand-charcoal); margin-bottom: 0.375rem; }
.about-timeline__desc  { font-size: 0.875rem; color: #6b7280; line-height: 1.55; }

footer.bg-brand-charcoal { border-top: 1px solid rgba(255,255,255,0.12); }

.about-cta { background: var(--brand-charcoal); padding: 5rem 0; text-align: center; }
.about-cta__inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.about-cta__eyebrow {
  display: block;
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.about-cta__heading {
  font-size: 1.875rem;
  font-weight: 900;
  color: #fff;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .about-cta__heading { font-size: 2.25rem; } }
.about-cta__sub { color: #9ca3af; line-height: 1.625; margin-bottom: 2rem; }
.about-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ── CONTACT PAGE ───────────────────────────────────────────────────── */
.contact-hero {
  position: relative;
  background: var(--brand-charcoal);
  padding: 5rem 0;
  text-align: center;
  overflow: hidden;
}
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,37,48,0.90) 0%, rgba(46,107,173,0.65) 100%);
}
.contact-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(74,143,212,0.20);
  color: var(--brand-blue);
  border: 1px solid rgba(74,143,212,0.30);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}
.contact-hero__heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .contact-hero__heading { font-size: 3rem; } }
.contact-hero__sub { color: #d1d5db; font-size: 1.0625rem; line-height: 1.625; }

.contact-split { background: var(--brand-offwhite); padding: 5rem 0; }
.contact-split__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 768px) { .contact-split__inner { grid-template-columns: 1fr 1.5fr; } }

.contact-info-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid #e5e7eb;
}
.contact-info-card__heading {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-charcoal);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--brand-blue-light);
}
.contact-info-card__items { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-card__item  { display: flex; align-items: flex-start; gap: 0.875rem; }
.contact-info-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(74,143,212,0.10);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-blue);
}
.contact-info-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.contact-info-card__value { font-size: 0.9375rem; color: var(--brand-charcoal); font-weight: 600; }
.contact-info-card__value a { color: var(--brand-charcoal); transition: color 0.15s ease; }
.contact-info-card__value a:hover { color: var(--brand-blue); }
.contact-info-card__sub { font-size: 0.8125rem; color: #6b7280; margin-top: 0.125rem; }

.contact-info-card__emergency {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(198,40,40,0.06);
  border: 1px solid rgba(198,40,40,0.20);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact-info-card__emergency-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--brand-red);
  flex-shrink: 0;
  animation: pulse 2s ease infinite;
}
.contact-info-card__emergency-text { font-size: 0.8125rem; font-weight: 600; color: var(--brand-red); }

/* ── SERVICES HUB PAGE ──────────────────────────────────────────────── */
.services-hub-hero {
  position: relative;
  background: var(--brand-charcoal);
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.services-hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,37,48,0.88) 0%, rgba(46,107,173,0.68) 100%);
}
.services-hub-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  padding: 5rem 1rem;
  width: 100%;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) { .services-hub-hero__inner { grid-template-columns: 1fr 1fr; } }

.services-hub-hero__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  margin-bottom: 0.75rem;
}
.services-hub-hero__heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .services-hub-hero__heading { font-size: 2.75rem; } }
.services-hub-hero__sub { color: #d1d5db; font-size: 1rem; line-height: 1.625; margin-bottom: 1.75rem; }
.services-hub-hero__card {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 1rem;
  padding: 1.75rem;
  display: none;
}
@media (min-width: 768px) { .services-hub-hero__card { display: block; } }
.services-hub-hero__card-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.services-hub-hero__checklist { display: flex; flex-direction: column; gap: 0.75rem; }
.services-hub-hero__check-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: #d1d5db;
  font-weight: 500;
}
.services-hub-hero__check-icon { color: var(--brand-blue); flex-shrink: 0; }

.services-categories { background: var(--brand-offwhite); padding: 5rem 0; }
.services-categories__inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.services-categories__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .services-categories__grid { grid-template-columns: repeat(3, 1fr); } }

.services-category-panel {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.services-category-panel:hover {
  border-color: rgba(74,143,212,0.30);
  transform: translateY(-3px);
}
.services-category-panel__icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.services-category-panel__title { font-size: 1.25rem; font-weight: 900; color: var(--brand-charcoal); margin-bottom: 0.75rem; }
.services-category-panel__desc  { color: #6b7280; font-size: 0.875rem; line-height: 1.625; margin-bottom: 1.25rem; flex: 1; }
.services-category-panel__list  { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.services-category-panel__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}
.services-category-panel__list-item::before { content: '→'; color: var(--brand-blue); font-weight: 700; flex-shrink: 0; }


/* ── LOCATION HUB & SPOKES ──────────────────────────────────────────── */
.locations-hub {
  padding: 5rem 1.5rem;
  background: var(--brand-offwhite);
}
.locations-hub__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.locations-hub__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .locations-hub__layout { grid-template-columns: 1fr; }
}
.locations-hub__hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.locations-hub__hub-card:hover { background: var(--brand-blue-dark); transform: translateY(-2px); }
.locations-hub__hub-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  width: fit-content;
}
.locations-hub__hub-name {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}
.locations-hub__hub-zips { font-size: 0.8rem; opacity: 0.8; }
.locations-hub__hub-link { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 700; }

.locations-hub__spokes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.locations-hub__spoke-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.locations-hub__spoke-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.locations-hub__spoke-name { font-weight: 700; font-size: 0.95rem; }
.locations-hub__spoke-zip { font-size: 0.75rem; color: #6b7280; }
.locations-hub__spoke-arrow { color: var(--brand-blue); font-weight: 700; flex-shrink: 0; }

/* ── BLOG PREVIEW ───────────────────────────────────────────────────── */
.blog-preview {
  padding: 5rem 1.5rem;
  background: #fff;
}
.blog-preview__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.blog-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--brand-offwhite);
  border-radius: 1rem;
  padding: 1.75rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.blog-card__category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.blog-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand-charcoal);
}
.blog-card__excerpt {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.6;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #9ca3af;
}
.blog-card__meta-sep { opacity: 0.5; }
.blog-preview__footer {
  margin-top: 2rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   PART 3 — UTILITY CARRY-FORWARD
   Classes still used by nav, footer, location pages, knowledge center,
   reviews-widget.php, trust-story.php, and other non-refactored
   templates. Pruned progressively as each template is refactored.
   ═══════════════════════════════════════════════════════════════════ */

/* Legacy component hook — keep hover overlay for location/service heroes */
.hero-overlay {
  background: linear-gradient(135deg, rgba(30,37,48,0.85) 0%, rgba(46,107,173,0.70) 100%);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { display: block; }
.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.group:hover .group-hover\:text-brand-blue { color: var(--brand-blue); }

/* ── FONT ────────────────────────────────────────────────────────────── */
.font-sans    { font-family: Inter, system-ui, sans-serif; }
.font-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.font-light   { font-weight: 300; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── TEXT SIZE ───────────────────────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-8xl  { font-size: 6rem;     line-height: 1; }

/* ── TEXT ALIGNMENT / DECORATION / TRANSFORM ─────────────────────────── */
.text-left        { text-align: left; }
.text-center      { text-align: center; }
.text-right       { text-align: right; }
.uppercase        { text-transform: uppercase; }
.italic           { font-style: italic; }
.whitespace-nowrap{ white-space: nowrap; }
.select-none      { user-select: none; }

/* ── LINE HEIGHT & LETTER SPACING ────────────────────────────────────── */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider  { letter-spacing: 0.05em; }

/* ── TEXT COLORS ─────────────────────────────────────────────────────── */
.text-white          { color: #fff; }
.text-brand-blue     { color: var(--brand-blue); }
.text-brand-red      { color: var(--brand-red); }
.text-brand-charcoal { color: var(--brand-charcoal); }
.text-gray-300       { color: #d1d5db; }
.text-gray-400       { color: #9ca3af; }
.text-gray-500       { color: #6b7280; }
.text-gray-600       { color: #4b5563; }
.text-blue-100       { color: #dbeafe; }
.text-blue-200       { color: #bfdbfe; }
.text-yellow-400     { color: #facc15; }
.text-yellow-500     { color: #eab308; }
.text-green-700      { color: #15803d; }
.text-white\/70      { color: rgba(255,255,255,0.70); }
.text-brand-blue\/10 { color: rgba(74,143,212,0.10); }

/* ── BACKGROUND COLORS ───────────────────────────────────────────────── */
.bg-white           { background-color: #fff; }
.bg-brand-blue      { background-color: var(--brand-blue); }
.bg-brand-blue-dark { background-color: var(--brand-blue-dark); }
.bg-brand-red       { background-color: var(--brand-red); }
.bg-brand-red-dark  { background-color: var(--brand-red-dark); }
.bg-brand-charcoal  { background-color: var(--brand-charcoal); }
.bg-brand-offwhite  { background-color: var(--brand-offwhite); }
.bg-blue-50         { background-color: #eff6ff; }
.bg-green-50        { background-color: #f0fdf4; }
.bg-brand-blue\/5   { background-color: rgba(74,143,212,0.05); }
.bg-brand-blue\/10  { background-color: rgba(74,143,212,0.10); }
.bg-brand-blue\/20  { background-color: rgba(74,143,212,0.20); }
.bg-brand-red\/5    { background-color: rgba(198,40,40,0.05); }
.bg-brand-red\/10   { background-color: rgba(198,40,40,0.10); }
.bg-white\/10       { background-color: rgba(255,255,255,0.10); }
.bg-white\/20       { background-color: rgba(255,255,255,0.20); }

/* ── GRADIENT ────────────────────────────────────────────────────────── */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}
.from-brand-blue    { --tw-gradient-from: var(--brand-blue); }
.to-brand-blue-dark { --tw-gradient-to: var(--brand-blue-dark); }

/* ── BORDER COLORS ───────────────────────────────────────────────────── */
.border-white          { border-color: #fff; }
.border-brand-blue     { border-color: var(--brand-blue); }
.border-brand-red      { border-color: var(--brand-red); }
.border-green-500      { border-color: #22c55e; }
.border-gray-100       { border-color: #f3f4f6; }
.border-gray-200       { border-color: #e5e7eb; }
.border-green-200      { border-color: #bbf7d0; }
.border-brand-blue\/10 { border-color: rgba(74,143,212,0.10); }
.border-brand-blue\/20 { border-color: rgba(74,143,212,0.20); }
.border-brand-blue\/30 { border-color: rgba(74,143,212,0.30); }
.border-brand-red\/20  { border-color: rgba(198,40,40,0.20); }
.border-brand-red\/60  { border-color: rgba(198,40,40,0.60); }
.border-white\/10      { border-color: rgba(255,255,255,0.10); }
.border-white\/20      { border-color: rgba(255,255,255,0.20); }
.border-white\/30      { border-color: rgba(255,255,255,0.30); }

/* ── BORDER WIDTH ────────────────────────────────────────────────────── */
.border   { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t-4{ border-top-width: 4px; border-top-style: solid; }
.border-l-4{ border-left-width: 4px; border-left-style: solid; }

/* ── BORDER RADIUS ───────────────────────────────────────────────────── */
.rounded-md  { border-radius: 0.375rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* ── SHADOWS ─────────────────────────────────────────────────────────── */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04); }

/* ── DISPLAY ─────────────────────────────────────────────────────────── */
.hidden      { display: none; }
.block       { display: block; }
.inline      { display: inline; }
.inline-flex { display: inline-flex; }
.flex        { display: flex; }
.grid        { display: grid; }
.table-cell  { display: table-cell; }

/* ── POSITION ────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }

/* ── INSET / Z-INDEX ─────────────────────────────────────────────────── */
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.top-full { top: 100%; }
.left-0   { left: 0; }
.left-5   { left: 1.25rem; }
.bottom-0 { bottom: 0; }
.z-0      { z-index: 0; }
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-50     { z-index: 50; }
.z-\[900\] { z-index: 900; }

/* ── OVERFLOW ────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── FLEX PROPERTIES ─────────────────────────────────────────────────── */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; }
.shrink-0       { flex-shrink: 0; }
.min-w-0        { min-width: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.self-start     { align-self: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }

/* ── GAP ─────────────────────────────────────────────────────────────── */
.gap-0\.5  { gap: 0.125rem; }
.gap-1     { gap: 0.25rem; }
.gap-1\.5  { gap: 0.375rem; }
.gap-2     { gap: 0.5rem; }
.gap-3     { gap: 0.75rem; }
.gap-4     { gap: 1rem; }
.gap-6     { gap: 1.5rem; }
.gap-8     { gap: 2rem; }
.gap-10    { gap: 2.5rem; }
.gap-12    { gap: 3rem; }
.gap-y-1   { row-gap: 0.25rem; }

/* ── GRID COLUMNS ────────────────────────────────────────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2  { grid-column: span 2 / span 2; }

/* ── WIDTHS ──────────────────────────────────────────────────────────── */
.w-auto  { width: auto; }
.w-full  { width: 100%; }
.w-px    { width: 1px; }
.w-0\.5  { width: 0.125rem; }
.w-1\.5  { width: 0.375rem; }
.w-3     { width: 0.75rem; }
.w-3\.5  { width: 0.875rem; }
.w-4     { width: 1rem; }
.w-5     { width: 1.25rem; }
.w-6     { width: 1.5rem; }
.w-8     { width: 2rem; }
.w-9     { width: 2.25rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-48    { width: 12rem; }

/* ── HEIGHTS ─────────────────────────────────────────────────────────── */
.h-full  { height: 100%; }
.h-1\.5  { height: 0.375rem; }
.h-3     { height: 0.75rem; }
.h-3\.5  { height: 0.875rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-6     { height: 1.5rem; }
.h-8     { height: 2rem; }
.h-9     { height: 2.25rem; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-16    { height: 4rem; }
.h-36    { height: 9rem; }
.h-48    { height: 12rem; }

/* ── MAX WIDTHS ──────────────────────────────────────────────────────── */
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-none { max-width: none; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ── MIN HEIGHTS ─────────────────────────────────────────────────────── */
.min-h-\[420px\] { min-height: 420px; }
.min-h-\[520px\] { min-height: 520px; }
.min-h-\[540px\] { min-height: 540px; }
.min-h-\[580px\] { min-height: 580px; }

/* ── PADDING ─────────────────────────────────────────────────────────── */
.p-2     { padding: 0.5rem; }
.p-4     { padding: 1rem; }
.p-6     { padding: 1.5rem; }
.p-7     { padding: 1.75rem; }
.p-8     { padding: 2rem; }
.px-2\.5 { padding-left: 0.625rem;  padding-right: 0.625rem; }
.px-3    { padding-left: 0.75rem;   padding-right: 0.75rem; }
.px-4    { padding-left: 1rem;      padding-right: 1rem; }
.px-5    { padding-left: 1.25rem;   padding-right: 1.25rem; }
.px-6    { padding-left: 1.5rem;    padding-right: 1.5rem; }
.px-7    { padding-left: 1.75rem;   padding-right: 1.75rem; }
.py-1    { padding-top: 0.25rem;    padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem;   padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem;     padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem;   padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;    padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem;   padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem;       padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem;    padding-bottom: 1.25rem; }
.py-6    { padding-top: 1.5rem;     padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem;       padding-bottom: 2rem; }
.py-10   { padding-top: 2.5rem;     padding-bottom: 2.5rem; }
.py-12   { padding-top: 3rem;       padding-bottom: 3rem; }
.py-14   { padding-top: 3.5rem;     padding-bottom: 3.5rem; }
.py-16   { padding-top: 4rem;       padding-bottom: 4rem; }
.py-20   { padding-top: 5rem;       padding-bottom: 5rem; }
.pb-0    { padding-bottom: 0; }
.pb-4    { padding-bottom: 1rem; }
.pb-5    { padding-bottom: 1.25rem; }
.pb-8    { padding-bottom: 2rem; }
.pt-2    { padding-top: 0.5rem; }
.pt-3    { padding-top: 0.75rem; }
.pt-4    { padding-top: 1rem; }
.pt-5    { padding-top: 1.25rem; }
.pl-6    { padding-left: 1.5rem; }

/* ── MARGIN ──────────────────────────────────────────────────────────── */
.mb-1    { margin-bottom: 0.25rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-14   { margin-bottom: 3.5rem; }
.mb-16   { margin-bottom: 4rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-auto { margin-top: auto; }
.my-1    { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.-mt-4   { margin-top: -1rem; }
.last\:mb-0:last-child { margin-bottom: 0; }

/* ── SPACE-Y ─────────────────────────────────────────────────────────── */
.space-y-2    > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3    > * + * { margin-top: 0.75rem; }

/* ── OBJECT FIT ──────────────────────────────────────────────────────── */
.object-cover { object-fit: cover; }

/* ── FILTERS & OPACITY ───────────────────────────────────────────────── */
.opacity-10         { opacity: 0.1; }
.brightness-200     { filter: brightness(2); }
.invert             { filter: invert(1); }
.brightness-200.invert { filter: brightness(2) invert(1); }
.backdrop-blur-sm   { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ── TRANSITIONS ─────────────────────────────────────────────────────── */
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── HOVER STATES ────────────────────────────────────────────────────── */
.hover\:text-brand-blue:hover       { color: var(--brand-blue); }
.hover\:text-brand-red:hover        { color: var(--brand-red); }
.hover\:text-white:hover            { color: #fff; }
.hover\:text-gray-300:hover         { color: #d1d5db; }
.hover\:bg-brand-blue:hover         { background-color: var(--brand-blue); }
.hover\:bg-brand-blue-dark:hover    { background-color: var(--brand-blue-dark); }
.hover\:bg-brand-red-dark:hover     { background-color: var(--brand-red-dark); }
.hover\:bg-brand-offwhite:hover     { background-color: var(--brand-offwhite); }
.hover\:bg-blue-50:hover            { background-color: #eff6ff; }
.hover\:bg-white\/10:hover          { background-color: rgba(255,255,255,0.10); }
.hover\:bg-white\/20:hover          { background-color: rgba(255,255,255,0.20); }
.hover\:border-brand-blue\/30:hover { border-color: rgba(74,143,212,0.30); }
.hover\:text-brand-blue-dark:hover  { color: var(--brand-blue-dark); }

/* ── PROSE (article pages) ───────────────────────────────────────────── */
.prose { color: #4b5563; }
.prose h2 {
  font-size: 1.5rem; font-weight: 900; color: var(--brand-charcoal);
  margin-top: 2.5rem; margin-bottom: 1rem; scroll-margin-top: 1.5rem;
}
.prose h3 {
  font-size: 1.125rem; font-weight: 900; color: var(--brand-charcoal);
  margin-top: 1.75rem; margin-bottom: 0.75rem;
}
.prose p   { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
.prose a   { color: var(--brand-blue); }
.prose a:hover { text-decoration: underline; }
.prose strong  { color: var(--brand-charcoal); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.5rem; color: #4b5563; }
.prose ul  { list-style-type: disc; }
.prose ol  { list-style-type: decimal; }
.prose li  { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose blockquote {
  border-left: 4px solid var(--brand-blue);
  background: rgba(74,143,212,0.05);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 0.25rem 1.5rem; margin: 1.5rem 0;
}
.prose code {
  background: var(--brand-offwhite); padding: 0.125rem 0.375rem;
  border-radius: 0.25rem; color: var(--brand-red);
  font-family: ui-monospace, monospace; font-size: 0.875rem;
}
.prose-lg { font-size: 1.125rem; line-height: 1.75; }

/* ── LEGAL PAGES ─────────────────────────────────────────────────────── */
.legal-content h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--brand-charcoal);
  margin-top: 2.5rem; margin-bottom: 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb;
}
.legal-content p  { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; }
.legal-content ul { list-style-type: disc; list-style-position: inside; color: #4b5563; margin-bottom: 1rem; }
.legal-content ul li { margin-bottom: 0.5rem; }
.legal-content strong { color: var(--brand-charcoal); }

/* ── RESPONSIVE: sm (≥640px) ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:text-sm      { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-4xl     { font-size: 2.25rem;  line-height: 2.5rem; }
  .sm\:text-5xl     { font-size: 3rem;     line-height: 1; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:inline-flex  { display: inline-flex; }
  .sm\:flex         { display: flex; }
  .sm\:table-cell   { display: table-cell; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:gap-6        { gap: 1.5rem; }
  .sm\:p-12         { padding: 3rem; }
  .sm\:py-16        { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ── RESPONSIVE: md (≥768px) ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:block        { display: block; }
  .md\:hidden       { display: none; }
  .md\:flex         { display: flex; }
  .md\:inline       { display: inline; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-row     { flex-direction: row; }
  .md\:text-left    { text-align: left; }
}

/* ── RESPONSIVE: lg (≥1024px) ────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:inline-flex  { display: inline-flex; }
  .lg\:block        { display: block; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:text-6xl     { font-size: 3.75rem; line-height: 1; }
}

/* ── LEAD FORM COMPONENT ─────────────────────────────────────────────── */
.lead-form-section { background: var(--brand-offwhite); padding: 5rem 1rem; }
.lead-form-section .section-inner { max-width: 72rem; margin: 0 auto; display: grid; gap: 3rem; align-items: start; }
@media (min-width: 768px) { .lead-form-section .section-inner { grid-template-columns: 1fr 1fr; } }
.lead-form-pitch .eyebrow-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-blue); margin-bottom: 0.75rem;
}
.lead-form-pitch h2 { font-size: 2rem; font-weight: 900; color: var(--brand-charcoal); line-height: 1.2; margin-bottom: 1rem; }
@media (min-width: 640px) { .lead-form-pitch h2 { font-size: 2.25rem; } }
.lead-form-pitch p      { color: #4b5563; line-height: 1.625; margin-bottom: 1rem; font-size: 0.9375rem; }
.lead-form-pitch strong { color: var(--brand-charcoal); }
.lead-form-trust { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.lead-form-trust-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: #4b5563; font-weight: 500; }
.lead-form-wrap {
  background: #fff; border-radius: 1rem; padding: 2rem;
  box-shadow: var(--shadow-card); border: 1px solid #e5e7eb;
}
.lead-form-wrap h3 {
  font-size: 1.125rem; font-weight: 800; color: var(--brand-charcoal);
  margin-bottom: 1.25rem; padding-bottom: 0.875rem; border-bottom: 2px solid var(--brand-blue-light);
}
.form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-grid { display: flex; flex-direction: column; gap: 1rem; }
.form-grid-row { display: grid; gap: 1rem; }
@media (min-width: 480px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label { font-size: 0.8125rem; font-weight: 600; color: var(--brand-charcoal); letter-spacing: 0.01em; }
.form-label .required { color: var(--brand-red); margin-left: 0.1rem; }
.form-control {
  width: 100%; padding: 0.625rem 0.875rem;
  border: 1.5px solid #d1d5db; border-radius: 0.5rem;
  font-size: 0.9375rem; font-family: Inter, system-ui, sans-serif;
  color: var(--brand-charcoal); background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.form-control::placeholder { color: #9ca3af; }
.form-control:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(74,143,212,0.15); }
.form-control.is-invalid { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(198,40,40,0.10); }
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  background-size: 1.25rem; padding-right: 2.5rem; cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 5rem; }
.form-submit-btn {
  width: 100%; padding: 0.875rem 1.5rem;
  background: var(--brand-red); color: #fff; font-weight: 700; font-size: 1rem;
  font-family: Inter, system-ui, sans-serif; border-radius: 0.75rem;
  border: none; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem;
}
.form-submit-btn:hover:not(:disabled)  { background: var(--brand-red-dark); }
.form-submit-btn:active:not(:disabled) { transform: translateY(1px); }
.form-submit-btn:disabled              { opacity: 0.65; cursor: not-allowed; }
.btn-spinner {
  width: 1.125rem; height: 1.125rem;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
}
.form-submit-btn.loading .btn-spinner { display: block; }
.form-submit-btn.loading .btn-text   { display: none; }
.form-feedback {
  display: none; padding: 0.75rem 1rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500; margin-top: 0.75rem;
  align-items: flex-start; gap: 0.5rem;
}
.form-feedback.show    { display: flex; }
.form-feedback.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.form-feedback.error   { background: #fef2f2; border: 1px solid rgba(198,40,40,0.20); color: var(--brand-red); }
.form-success-state      { display: none; text-align: center; padding: 2.5rem 1rem; }
.form-success-state.show { display: block; }
.form-success-icon {
  width: 4rem; height: 4rem; background: #f0fdf4; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}

/* ── PORTFOLIO GALLERY ───────────────────────────────────────────────── */
.portfolio-hero { background: var(--brand-charcoal); position: relative; overflow: hidden; padding: 5rem 1rem; text-align: center; }
.portfolio-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,37,48,0.92) 0%, rgba(46,107,173,0.65) 100%); }
.portfolio-hero-content { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; }
.portfolio-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(74,143,212,0.20); color: var(--brand-blue); border: 1px solid rgba(74,143,212,0.30); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.375rem 0.875rem; border-radius: 9999px; margin-bottom: 1.5rem; }
.portfolio-hero h1 { font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1.25rem; font-family: Inter, system-ui, sans-serif; }
@media (min-width: 640px) { .portfolio-hero h1 { font-size: 3.25rem; } }
.portfolio-hero p { color: #d1d5db; font-size: 1.0625rem; line-height: 1.625; }
.portfolio-section { background: var(--brand-offwhite); padding: 5rem 1rem; }
.portfolio-section-inner { max-width: 72rem; margin: 0 auto; }
.portfolio-section-header { text-align: center; margin-bottom: 3rem; }
.portfolio-section-header .eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-blue); display: block; margin-bottom: 0.5rem; }
.portfolio-section-header h2 { font-size: 2rem; font-weight: 900; color: var(--brand-charcoal); margin-bottom: 0.75rem; font-family: Inter, system-ui, sans-serif; }
.portfolio-section-header p { color: #6b7280; max-width: 40rem; margin: 0 auto; line-height: 1.625; }
.portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
.portfolio-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid #e5e7eb; }
.portfolio-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30,37,48,0.14); }
.portfolio-card-img-wrap { position: relative; overflow: hidden; height: 280px; }
@media (min-width: 768px) { .portfolio-card-img-wrap { height: 320px; } }
.portfolio-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.portfolio-card:hover .portfolio-card-img-wrap img { transform: scale(1.05); }
.portfolio-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,37,48,0.87) 0%, transparent 55%); opacity: 0; transition: opacity 0.25s ease; display: flex; align-items: flex-end; padding: 1.5rem; }
.portfolio-card:hover .portfolio-card-overlay { opacity: 1; }
.portfolio-card-overlay-text { color: #fff; font-size: 0.875rem; line-height: 1.55; margin: 0; }
.portfolio-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.portfolio-card-tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-blue); background: rgba(74,143,212,0.10); border: 1px solid rgba(74,143,212,0.20); padding: 0.25rem 0.625rem; border-radius: 9999px; margin-bottom: 0.625rem; }
.portfolio-card-title { font-size: 1.0625rem; font-weight: 800; color: var(--brand-charcoal); margin-bottom: 0.5rem; line-height: 1.3; font-family: Inter, system-ui, sans-serif; }
.portfolio-card-desc  { font-size: 0.875rem; color: #6b7280; line-height: 1.6; }
.portfolio-card-meta  { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid #f3f4f6; font-size: 0.8125rem; color: var(--brand-blue); font-weight: 600; }

/* ── KNOWLEDGE CENTER ────────────────────────────────────────────────── */
.kc-eyebrow { display: inline-flex; align-items: center; background: rgba(74,143,212,0.18); color: var(--brand-blue); border: 1px solid rgba(74,143,212,0.30); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.375rem 0.875rem; border-radius: 9999px; margin-bottom: 1.25rem; }
.kc-hero { background: var(--brand-charcoal); position: relative; overflow: hidden; padding: 5rem 1rem; text-align: center; }
.kc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(30,37,48,0.93) 0%, rgba(46,107,173,0.68) 100%); }
.kc-hero-content { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; }
.kc-hero h1 { font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1rem; font-family: Inter, system-ui, sans-serif; }
@media (min-width: 640px) { .kc-hero h1 { font-size: 3rem; } }
.kc-hero p { color: #d1d5db; font-size: 1.0625rem; line-height: 1.625; max-width: 38rem; margin: 0 auto; }
.kc-listing { background: var(--brand-offwhite); padding: 5rem 1rem; }
.kc-listing-inner { max-width: 72rem; margin: 0 auto; }
.kc-listing-header { text-align: center; margin-bottom: 3rem; }
.kc-listing-header h2 { font-size: 1.875rem; font-weight: 900; color: var(--brand-charcoal); margin-bottom: 0.625rem; font-family: Inter, system-ui, sans-serif; }
.kc-listing-header p { color: #6b7280; max-width: 38rem; margin: 0 auto; line-height: 1.625; }
.kc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .kc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kc-grid { grid-template-columns: repeat(3, 1fr); } }
.kc-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid #e5e7eb; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.kc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(30,37,48,0.13); border-color: rgba(74,143,212,0.30); }
.kc-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.kc-card-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-blue); background: rgba(74,143,212,0.10); border: 1px solid rgba(74,143,212,0.20); padding: 0.25rem 0.625rem; border-radius: 9999px; margin-bottom: 0.75rem; }
.kc-card-title { font-size: 1.0625rem; font-weight: 800; color: var(--brand-charcoal); line-height: 1.3; margin-bottom: 0.625rem; font-family: Inter, system-ui, sans-serif; }
.kc-card-title a { color: inherit; }
.kc-card-title a:hover { color: var(--brand-blue); }
.kc-card-excerpt { font-size: 0.875rem; color: #6b7280; line-height: 1.6; flex: 1; margin-bottom: 1.25rem; }
.kc-card-meta { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.875rem; border-top: 1px solid #f3f4f6; font-size: 0.8125rem; }
.kc-card-date      { color: #9ca3af; font-weight: 500; }
.kc-card-sep       { color: #d1d5db; }
.kc-card-read-time { color: #9ca3af; font-weight: 500; }
.kc-card-cta       { margin-left: auto; color: var(--brand-blue); font-weight: 700; font-size: 0.8125rem; }
.kc-card-cta:hover { text-decoration: underline; }
.kc-empty { text-align: center; padding: 4rem 1rem; color: #6b7280; font-size: 1rem; }
.kc-breadcrumb { background: var(--brand-offwhite); border-bottom: 1px solid #e5e7eb; }
.kc-breadcrumb-inner { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem; }
.kc-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; font-size: 0.75rem; color: #9ca3af; list-style: none; }
.kc-breadcrumb a { color: #9ca3af; font-weight: 500; transition: color 0.15s ease; }
.kc-breadcrumb a:hover { color: var(--brand-blue); }
.kc-breadcrumb .bc-sep { color: #d1d5db; }
.kc-breadcrumb .bc-current { color: var(--brand-charcoal); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; display: inline-block; vertical-align: bottom; }
.kc-art-header { background: #fff; border-bottom: 1px solid #f3f4f6; padding: 3rem 1rem; }
@media (min-width: 640px) { .kc-art-header { padding: 4rem 1rem; } }
.kc-art-header-inner { max-width: 56rem; margin: 0 auto; }
.kc-art-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.kc-art-category { display: inline-flex; align-items: center; background: rgba(74,143,212,0.10); color: var(--brand-blue); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.25rem 0.75rem; border-radius: 9999px; }
.kc-art-date, .kc-art-readtime { color: #9ca3af; font-size: 0.75rem; font-weight: 500; }
.kc-art-dot { color: #d1d5db; font-size: 0.75rem; }
.kc-art-title { font-size: 2rem; font-weight: 900; color: var(--brand-charcoal); line-height: 1.2; margin-bottom: 1.25rem; font-family: Inter, system-ui, sans-serif; }
@media (min-width: 640px)  { .kc-art-title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .kc-art-title { font-size: 2.875rem; } }
.kc-art-excerpt { color: #6b7280; font-size: 1.0625rem; line-height: 1.65; max-width: 44rem; margin-bottom: 1.75rem; }
.kc-art-author-row { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid #f3f4f6; }
.kc-art-author-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-blue); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; }
.kc-art-author-name { font-size: 0.875rem; font-weight: 600; color: var(--brand-charcoal); }
.kc-art-author-sub  { font-size: 0.75rem; color: #9ca3af; }
.kc-art-call-btn { display: none; align-items: center; gap: 0.375rem; background: var(--brand-red); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 0.5rem; margin-left: auto; transition: background 0.15s ease; }
.kc-art-call-btn:hover { background: var(--brand-red-dark); }
@media (min-width: 640px) { .kc-art-call-btn { display: inline-flex; } }
.kc-art-hero-img-wrap { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem; }
.kc-art-hero-img-wrap img { width: 100%; border-radius: 1rem; object-fit: cover; max-height: 26rem; box-shadow: var(--shadow-card); }
.kc-art-layout { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .kc-art-layout { flex-direction: row; gap: 3.5rem; align-items: flex-start; } }
.kc-art-sidebar { display: none; width: 16rem; flex-shrink: 0; }
@media (min-width: 1024px) { .kc-art-sidebar { display: block; position: sticky; top: 1.5rem; } }
.kc-toc-box { background: var(--brand-offwhite); border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.kc-toc-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; margin-bottom: 1rem; }
.kc-toc-list { list-style: none; }
.kc-toc-list li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.625rem; }
.kc-toc-num { color: var(--brand-blue); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 0.1rem; }
.kc-toc-list a { font-size: 0.875rem; color: #4b5563; line-height: 1.4; transition: color 0.15s ease; }
.kc-toc-list a:hover { color: var(--brand-blue); }
.kc-sidebar-cta { background: var(--brand-charcoal); border-radius: 1rem; padding: 1.5rem; color: #fff; }
.kc-sidebar-cta p:first-child  { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.kc-sidebar-cta p:last-of-type { font-size: 0.75rem; color: #9ca3af; margin-bottom: 1rem; }
.kc-sidebar-call-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--brand-red); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.625rem 1rem; border-radius: 0.5rem; transition: background 0.15s ease; }
.kc-sidebar-call-btn:hover { background: var(--brand-red-dark); }
.kc-toc-mobile { border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; background: var(--brand-offwhite); margin-bottom: 0; }
@media (min-width: 1024px) { .kc-toc-mobile { display: none; } }
.kc-art-content { flex: 1; min-width: 0; }
.kc-cta-band { background: rgba(74,143,212,0.06); border-top: 1px solid rgba(74,143,212,0.18); border-bottom: 1px solid rgba(74,143,212,0.18); padding: 2.5rem 1rem; margin: 0; }
.kc-cta-band-inner { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 640px) { .kc-cta-band-inner { flex-direction: row; align-items: center; } }
.kc-cta-band-copy { flex: 1; }
.kc-cta-band-copy strong { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--brand-charcoal); margin-bottom: 0.25rem; }
.kc-cta-band-copy span { font-size: 0.875rem; color: #6b7280; }
.kc-cta-band-btns { display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }
.kc-cta-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-red); color: #fff; font-weight: 700; font-size: 0.875rem; padding: 0.75rem 1.25rem; border-radius: 0.75rem; transition: background 0.15s ease; }
.kc-cta-btn-primary:hover { background: var(--brand-red-dark); }
.kc-cta-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--brand-blue); color: var(--brand-blue); font-weight: 700; font-size: 0.875rem; padding: 0.75rem 1.25rem; border-radius: 0.75rem; transition: background 0.15s ease, color 0.15s ease; }
.kc-cta-btn-secondary:hover { background: var(--brand-blue); color: #fff; }
.kc-faq-section { background: #fff; padding: 4rem 1rem; }
.kc-faq-inner { max-width: 48rem; margin: 0 auto; }
.kc-faq-header { text-align: center; margin-bottom: 2.5rem; }
.kc-faq-eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-blue); display: block; margin-bottom: 0.5rem; }
.kc-faq-header h2 { font-size: 1.75rem; font-weight: 900; color: var(--brand-charcoal); font-family: Inter, system-ui, sans-serif; }
@media (min-width: 640px) { .kc-faq-header h2 { font-size: 2rem; } }
.kc-related { background: var(--brand-offwhite); padding: 4rem 1rem; }
.kc-related-inner { max-width: 72rem; margin: 0 auto; }
.kc-related h2 { font-size: 1.25rem; font-weight: 900; color: var(--brand-charcoal); margin-bottom: 2rem; font-family: Inter, system-ui, sans-serif; }
.kc-related-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px)  { .kc-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kc-related-grid { grid-template-columns: repeat(3, 1fr); } }
.kc-related-card { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-card); border: 1px solid #f3f4f6; display: block; transition: border-color 0.15s ease; }
.kc-related-card:hover { border-color: rgba(74,143,212,0.30); }
.kc-related-card h3 { font-size: 1rem; font-weight: 700; color: var(--brand-charcoal); line-height: 1.35; margin-bottom: 0.5rem; font-family: Inter, system-ui, sans-serif; transition: color 0.15s ease; }
.kc-related-card:hover h3 { color: var(--brand-blue); }
.kc-related-card p    { font-size: 0.875rem; color: #6b7280; line-height: 1.55; margin-bottom: 1rem; }
.kc-related-card span { font-size: 0.875rem; font-weight: 700; color: var(--brand-blue); }
.kc-bottom-cta { background: var(--brand-charcoal); padding: 4rem 1rem; text-align: center; }
.kc-bottom-cta-inner { max-width: 48rem; margin: 0 auto; }
.kc-bottom-cta h2 { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 0.75rem; font-family: Inter, system-ui, sans-serif; }
@media (min-width: 640px) { .kc-bottom-cta h2 { font-size: 2rem; } }
.kc-bottom-cta h2 span { color: var(--brand-blue); }
.kc-bottom-cta p { color: #9ca3af; font-size: 0.9375rem; line-height: 1.625; margin-bottom: 2rem; }
.kc-bottom-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.kc-bottom-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-red); color: #fff; font-weight: 700; font-size: 1rem; padding: 0.875rem 1.5rem; border-radius: 0.75rem; transition: background 0.15s ease; }
.kc-bottom-btn-primary:hover { background: var(--brand-red-dark); }
.kc-bottom-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; border: 2px solid rgba(255,255,255,0.25); color: #fff; font-weight: 700; font-size: 1rem; padding: 0.875rem 1.5rem; border-radius: 0.75rem; transition: background 0.15s ease; }
.kc-bottom-btn-secondary:hover { background: rgba(255,255,255,0.10); }