/* Manrope, SIL Open Font License; see /assets/fonts/OFL-Manrope.txt. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/manrope-latin-variable.woff2') format('woff2')}

/* ============================================================
   YEG Commercial Cleaners — Greater Edmonton
   1:1 design-language clone of Slate (slatenyc.com).
   Tokens extracted from Slate's production stylesheet:
   navy #00004C, blue #0070C4/#1980CD, orange #FC9A50 buttons,
   Manrope Variable everywhere, 300px pill buttons, h1 5em/-2px.
   Original code and copy.
   ============================================================ */

:root {
  --font: 'Manrope', Arial, sans-serif;

  /* Slate colour system */
  --navy-500: #00004C;
  --navy-400: #1A1A5E;
  --navy-300: #A4A4C0;
  --navy-200: #E1E1EA;
  --navy-100: #F2F2F6;
  --blue-500: #0070C4;
  --blue-400: #1980CD;
  --blue-300: #BEE0F8;
  --blue-200: #CCE7FB;
  --blue-100: #F2F9FE;
  --orange-300: #FC9A50;
  --orange-200: #FDEEE2;
  --orange-100: #FEF6F1;
  --white: #FFFFFF;

  --rounded-s: .5em;
  --rounded-m: .75em;
  --rounded-l: 1em;
  --rounded-xl: 1.5em;
  --pill: 300px;
  --shadow: 0 20px 40px -10px rgba(0, 0, 0, .1);

  --max: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  color: var(--navy-500);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.split-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.skip-link {
  position: fixed;
  top: .75em;
  left: .75em;
  z-index: 200;
  padding: .75em 1em;
  border-radius: var(--rounded-s);
  background: var(--white);
  color: var(--navy-500);
  font-weight: 800;
  box-shadow: var(--shadow);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--blue-400); outline-offset: 2px; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2em;
}

/* ---------- Headings (Slate scale) ---------- */
h1 {
  font-size: 5em;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.1;
  max-width: 24ch;
  overflow-wrap: break-word;
}
h2 { font-size: 2.6em; font-weight: 700; letter-spacing: -1px; line-height: 1.15; }
h3 { font-size: 1.25em; font-weight: 700; line-height: 1.3; }

@media (max-width: 860px) {
  h1 { font-size: 2.9em; letter-spacing: -1px; }
  h2 { font-size: 1.9em; }
}

.lead { font-size: 1.15em; color: var(--navy-400); max-width: 40ch; }
.eyebrow {
  display: inline-block;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 1em;
}

/* ---------- Buttons (Slate: orange pill, navy text) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1em 1.5em;
  font-family: var(--font);
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  border: none;
  border-radius: var(--pill);
  background-color: var(--orange-300);
  color: var(--navy-500);
  cursor: pointer;
  transition: color .2s, background-color .2s, transform .2s;
  min-height: 44px;
  text-align: center;
  white-space: normal;
}
.btn:hover { transform: scale(1.05); }
.btn-navy { background-color: var(--navy-500); color: var(--white); }
.btn-white { background-color: var(--white); color: var(--navy-500); }
.btn-outline { background: transparent; border: 1.5px solid var(--navy-200); color: var(--navy-500); }
.btn-outline:hover { border-color: var(--blue-400); color: var(--blue-500); }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-100);
}
.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 2em;
}
.navbar .container { max-width: 1440px; }
.left-navbar-content { display: flex; align-items: center; gap: 2.5em; }
.brand-link {
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--navy-500);
}
.brand-dot { color: var(--blue-400); }
.nav-menu-links { display: flex; gap: 1.6em; }
.nav-menu-links a {
  font-size: .92em;
  font-weight: 600;
  color: var(--navy-400);
  white-space: nowrap;
  transition: color .2s;
}
.nav-menu-links a:hover { color: var(--blue-500); }
.action-buttons { display: flex; align-items: center; gap: 1.4em; }
.phone-link { font-weight: 700; font-size: .92em; color: var(--navy-500); white-space: nowrap; }
.phone-link:hover { color: var(--blue-500); }
.login-link { font-weight: 600; font-size: .92em; color: var(--navy-400); white-space: nowrap; }
.login-link:hover { color: var(--blue-500); }
.nav-toggle, .mobile-nav-link { display: none; }

@media (max-width: 1280px) {
  .navbar-content { position: relative; gap: 1em; }
  .left-navbar-content { gap: 1em; }
  .nav-menu-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 92px);
    padding: .75em;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--navy-100);
    border-radius: 0 0 var(--rounded-l) var(--rounded-l);
    box-shadow: var(--shadow);
  }
  .navbar.nav-open .nav-menu-links { display: flex; }
  .nav-menu-links a { padding: .8em .9em; border-radius: var(--rounded-s); }
  .nav-menu-links a:hover { background: var(--blue-100); }
  .phone-link, .login-link { display: none; }
  .nav-menu-links .mobile-nav-link { display: block; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .7em .9em;
    border: 1px solid var(--navy-200);
    border-radius: var(--pill);
    background: var(--white);
    color: var(--navy-500);
    font: inherit;
    font-size: .88em;
    font-weight: 700;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 2px; }
  .action-buttons { gap: .65em; }
}

/* ---------- Hero (Slate: blue→navy radial banner, white text) ---------- */
.hero-section {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--blue-500), var(--navy-500) 50%);
  color: var(--white);
  padding-top: 10em;
  padding-bottom: 5em;
  position: relative;
  overflow: hidden;
}
.hero-section h1 { color: var(--white); }
.hero-section .lead { color: rgba(255, 255, 255, .8); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 5em;
  align-items: center;
  margin-top: 3em;
}
.hero-actions { display: flex; gap: 1em; margin-top: 2em; flex-wrap: wrap; }
.hero-image-wrapper { position: relative; }
.hero-image {
  aspect-ratio: 1;
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow);
  object-fit: cover;
  width: 100%;
}
/* People cluster above hero copy */
.people { display: flex; align-items: center; gap: .9em; margin-bottom: 1.5em; }
.people .faces { display: flex; }
.people .faces i {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--blue-300);
  margin-left: -.7em;
}
.people .faces i:first-child { margin-left: 0; }
.people .bold-text { font-weight: 700; color: var(--white); font-size: .95em; }
/* Floating cards over the hero image */
.floating-card {
  position: absolute;
  top: 1.5em;
  left: -2em;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  color: var(--navy-500);
  font-weight: 700;
  font-size: .92em;
  padding: 1em 1.4em;
  border-radius: var(--rounded-m);
  box-shadow: var(--shadow);
  max-width: 16em;
}
.floating-card.bottom-floating-card { top: auto; left: auto; bottom: 1.5em; right: -2em; }
/* Stats counters inside the hero (white) */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2em;
  padding-top: 4em;
  margin-top: 4em;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.stat { min-width: 0; }
.stat .num {
  font-size: 4em;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--white);
}
.stat .num em { font-style: normal; color: var(--orange-300); }
.stat .cap { margin-top: .8em; font-size: .92em; color: rgba(255, 255, 255, .72); max-width: 26ch; }
/* Light interior-page hero (Slate .internal-hero-section) */
.internal-hero-section { color: var(--navy-500); background: none; }

@media (max-width: 860px) {
  .hero-section { padding-top: 5em; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5em; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floating-card { left: 1em; }
  .floating-card.bottom-floating-card { right: 1em; }
}

/* ---------- Sections ---------- */
.section { padding: 10em 0 4em; position: relative; }
.section-tight { padding: 5em 0; }
.section-soft { background: var(--blue-100); padding-bottom: 10em; }
.section-blue { background: var(--blue-100); padding-bottom: 10em; }
.section-navy { background: var(--navy-500); color: var(--white); padding-bottom: 10em; }
.section-navy .lead { color: rgba(255, 255, 255, .72); }
.section-head { max-width: 46em; margin-bottom: 3.5em; }
.section-head .lead { margin-top: 1em; }
.bottom-pad { padding-bottom: 10em; }

@media (max-width: 860px) {
  .section { padding: 5em 0 3em; }
  .section-tight { padding: 3.5em 0; }
  .section-soft, .section-navy, .section-blue, .bottom-pad { padding-bottom: 5em; }
}

/* ---------- Brand wall ---------- */
.brands-section .container > p {
  text-align: center;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-300);
  margin-bottom: 2.5em;
}
.brand-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1em;
}
.brand-slot {
  height: 76px;
  border: 1px dashed var(--navy-200);
  border-radius: var(--rounded-m);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-300);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .5px;
}
@media (max-width: 860px) { .brand-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Illustrated industry rail ---------- */
.industry-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
}
.industry-section-head .section-head { margin-bottom: 0; }
.industry-controls { display: flex; gap: .65em; flex: 0 0 auto; }
.industry-control {
  width: 3em;
  height: 3em;
  border: 1px solid var(--navy-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-500);
  font: inherit;
  font-size: 1.2em;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.industry-control:hover { border-color: var(--blue-400); background: var(--blue-100); transform: translateY(-2px); }
.industry-control:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.industry-grid {
  display: flex;
  gap: 1.5em;
  margin-top: 3.5em;
  padding: .25em .1em 1.5em;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--blue-300) var(--navy-100);
  scrollbar-width: thin;
}
.industry-link {
  display: block;
  flex: 0 0 clamp(16rem, 28vw, 21rem);
  border: 1px solid var(--navy-200);
  border-radius: var(--rounded-l);
  font-weight: 700;
  background: var(--white);
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.industry-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.industry-link-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 5.1em;
  padding: 1.15em 1.25em;
}
.industry-link-body::after { content: "→"; color: var(--blue-400); font-size: 1.15em; }
.industry-link h3 { font-size: 1.05em; }
.industry-link:hover {
  border-color: var(--blue-400);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
@media (max-width: 620px) {
  .industry-section-head { align-items: flex-start; }
  .industry-section-head .btn { display: none; }
  .industry-controls { display: none; }
  .industry-grid { margin-top: 2.25em; margin-right: -2em; }
  .industry-link { flex-basis: min(78vw, 18rem); }
}

/* ---------- Split feature blocks (Local / Technology / Insurance) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
  align-items: center;
}
.split .split-img {
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow);
}
.split ul { margin-top: 1.4em; list-style: none; }
.split li {
  padding: .55em 0 .55em 1.9em;
  position: relative;
  color: var(--navy-400);
}
.split li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue-400);
  font-weight: 800;
}
.section-navy .split li { color: rgba(255,255,255,.75); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2em; } }

/* ---------- Location chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.8em; }
.chip {
  padding: .6em 1.2em;
  border: 1px solid var(--navy-200);
  border-radius: var(--pill);
  background: var(--white);
  font-weight: 600;
  font-size: .88em;
  transition: border-color .2s, color .2s;
}
.chip:hover { border-color: var(--blue-400); color: var(--blue-500); }

/* ---------- Feature card pair (Technology / Insurance) ---------- */
.feature-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin-top: 5em;
}
.feature-card {
  background: var(--white);
  border: 1px solid var(--navy-100);
  border-radius: var(--rounded-xl);
  overflow: hidden;
}
.feature-card .feature-img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.feature-card .feature-body { padding: 2em; }
.feature-card .feature-body p { margin-top: .7em; color: var(--navy-400); }
@media (max-width: 860px) { .feature-pair { grid-template-columns: 1fr; } }

/* ---------- Case study cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1080px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .card-grid, .card-grid.cols-3, .card-grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--navy-100);
  border-radius: var(--rounded-l);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .card-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.card .card-body { display: flex; flex: 1; flex-direction: column; padding: 1.6em; }
.card .card-body h3 { margin: .5em 0 .4em; }
.card .card-body p { color: var(--navy-400); font-size: .95em; }
.card-link { display: inline-flex; margin-top: auto; padding-top: 1em; font-weight: 700; font-size: .9em; color: var(--blue-500); }
.case-tag {
  font-size: .72em;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue-500);
}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 2em;
  padding: 2.2em 0;
  border-top: 1px solid var(--navy-100);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--blue-400);
  line-height: 1;
}
.step h3 { margin-bottom: .3em; }
.step p { color: var(--navy-400); max-width: 44em; }
.section-navy .step { border-top-color: rgba(255,255,255,.14); }
.section-navy .step p { color: rgba(255,255,255,.7); }

/* ---------- Resources / articles ---------- */
.article-card .card-body .meta { font-size: .8em; color: var(--navy-400); font-weight: 600; margin-top: .8em; }

/* ---------- Association strip ---------- */
.association-section { padding: 4em 0; border-top: 1px solid var(--navy-100); }
.association-row { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; }
.association-slot {
  padding: .9em 1.8em;
  border: 1px dashed var(--navy-200);
  border-radius: var(--pill);
  color: var(--navy-300);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ---------- Footer ---------- */
.footer-section {
  background: var(--navy-500);
  color: rgba(255, 255, 255, .7);
  padding: 6em 0 2.5em;
  font-size: .92em;
}
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  padding-bottom: 4em;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-cta h2 { color: var(--white); font-size: 2.4em; max-width: 20ch; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3em;
  padding: 3.5em 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h3 {
  color: var(--white);
  font-size: .8em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: .7em; }
.footer-grid a:hover { color: var(--white); }
.footer-brand { color: var(--white); font-size: 1.4em; font-weight: 800; }
.footer-brand span { color: var(--orange-300); }
.footer-grid p { margin-top: 1em; max-width: 26em; }
.footer-base {
  padding-top: 2em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  font-size: .85em;
  color: rgba(255,255,255,.5);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Modal (Slate's "Where would you like to start?") ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(0, 0, 76, .55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: 3em;
  max-width: 34em;
  width: 100%;
  max-height: calc(100dvh - 3em);
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow);
}
.modal-title { font-size: 1.5em; margin-bottom: 1.4em; padding-right: 1.5em; }
.modal-close {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: 1px solid var(--navy-200);
  background: var(--white);
  font-size: 1.1em;
  cursor: pointer;
  color: var(--navy-500);
}
.modal-close:hover { border-color: var(--blue-400); color: var(--blue-500); }
.modal-option {
  display: block;
  padding: 1.4em 1.6em;
  border: 1px solid var(--navy-200);
  border-radius: var(--rounded-m);
  margin-bottom: 1em;
  transition: border-color .2s, transform .2s;
}
.modal-option:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.modal-option strong { display: block; font-size: 1.05em; margin-bottom: .3em; }
.modal-option strong::after { content: " →"; color: var(--blue-400); }
.modal-option span { font-size: .9em; color: var(--navy-400); }
.modal-back {
  display: inline-block;
  margin-top: .5em;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: .88em;
  font-weight: 600;
  color: var(--navy-400);
  cursor: pointer;
}
.modal-back:hover { color: var(--blue-500); }
@media (max-width: 640px) { .modal-card { padding: 2em 1.5em; } }

/* ---------- Image slots (pre-generation placeholders) ---------- */
.img-slot {
  background: repeating-linear-gradient(45deg, var(--blue-100), var(--blue-100) 12px, var(--blue-200) 12px, var(--blue-200) 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-400);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 1.2em;
}

/* ---------- Pricing ---------- */
.price-hero-card {
  background: var(--navy-500);
  color: var(--white);
  border-radius: var(--rounded-xl);
  padding: 4em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3em;
  align-items: center;
}
.price-hero-card h2 { color: var(--white); }
.price-hero-card p { margin-top: 1em; color: rgba(255,255,255,.72); max-width: 34em; }
.price-hero-card .rate {
  font-size: 5em;
  font-weight: 800;
  letter-spacing: -3px;
  color: var(--orange-300);
  line-height: 1;
}
.price-hero-card .rate small { display: block; font-size: .22em; letter-spacing: 0; color: rgba(255,255,255,.7); font-weight: 600; margin-top: .4em; }
@media (max-width: 860px) { .price-hero-card { grid-template-columns: 1fr; padding: 2.5em 1.8em; } .price-hero-card .rate { font-size: 3.4em; } }

.program-card { display: flex; flex-direction: column; }
.program-card .amount { font-size: 2em; font-weight: 800; letter-spacing: -1px; margin: .8em 0 .2em; }
.program-card .per { color: var(--navy-400); font-size: .9em; margin-bottom: 1em; }
.program-card ul { list-style: none; flex: 1; }
.program-card li { padding: .5em 0 .5em 1.7em; position: relative; font-size: .93em; color: var(--navy-400); }
.program-card li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-400); font-weight: 800; }

.checklist-2col {
  columns: 2;
  column-gap: 3em;
  list-style: none;
}
.checklist-2col li {
  break-inside: avoid;
  padding: .55em 0 .55em 1.9em;
  position: relative;
  color: var(--navy-400);
}
.checklist-2col li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-400); font-weight: 800; }
@media (max-width: 640px) { .checklist-2col { columns: 1; } }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--navy-200); padding: 1.5em 0; }
.faq details:last-child { border-bottom: 1px solid var(--navy-200); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::after { content: "+"; color: var(--blue-400); font-size: 1.4em; font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .8em; color: var(--navy-400); max-width: 46em; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 6em 0 5em; }
.page-hero h1 { font-size: clamp(2.35rem, 5vw, 3.2rem) !important; }
.page-hero .lead { margin-top: 1.4em; }
.page-hero .hero-actions { margin-top: 2.2em; }

/* ---------- Quote wizard ---------- */
.wizard-wrap { background: var(--navy-100); padding: 6em 0; }
.wizard-shell {
  max-width: 44em;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: 3em;
  box-shadow: var(--shadow);
}
.wizard-progress { display: flex; gap: .4em; margin-bottom: 2.2em; }
.wizard-progress i { flex: 1; height: .35em; border-radius: var(--pill); background: var(--navy-100); }
.wizard-progress i.done { background: var(--blue-400); }
.w-step { display: none; }
.w-step.active { display: block; }
.w-step h2 { font-size: 1.6em; margin-bottom: .3em; }
.w-step .hint { color: var(--navy-400); font-size: .92em; margin-bottom: 1.6em; }
.field { margin-bottom: 1.2em; }
.field label { display: block; font-weight: 700; font-size: .88em; margin-bottom: .5em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .9em 1em;
  border: 1.5px solid var(--navy-200);
  border-radius: var(--rounded-s);
  font-family: var(--font);
  font-size: .95em;
  color: var(--navy-500);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-400); }
.pill-row { display: flex; flex-wrap: wrap; gap: .6em; }
.pill-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pill-fieldset legend { display: block; margin-bottom: .55em; font-weight: 600; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.pill-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pill-row label {
  padding: .7em 1.3em;
  border: 1.5px solid var(--navy-200);
  border-radius: var(--pill);
  font-weight: 600;
  font-size: .9em;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.pill-row input:checked + label { border-color: var(--blue-400); background: var(--blue-100); color: var(--blue-500); }
.pill-row input:focus-visible + label { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.w-nav { display: flex; justify-content: space-between; margin-top: 2em; }
.w-summary { background: var(--blue-100); border-radius: var(--rounded-m); padding: 1.6em; font-size: .92em; }
.w-summary dt { font-weight: 700; }
.w-summary dd { margin: 0 0 .7em; color: var(--navy-400); }
.form-status { min-height: 1.5em; margin-top: 1em; color: var(--navy-400); font-weight: 700; }
.form-status:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.w-success { text-align: center; padding: 2.5em 0; }
.w-success .check {
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  background: var(--blue-400);
  color: var(--white);
  font-size: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
}
@media (max-width: 640px) { .wizard-shell { padding: 2em 1.4em; } }

/* ---------- Team avatars ---------- */
.avatar { aspect-ratio: 1; border-radius: var(--rounded-m); margin-bottom: 1em; }

/* ---------- CTA banner ---------- */
.cta-banner { text-align: center; padding: 8em 0; }
.cta-banner .lead { margin: 1.2em auto 2em; }

/* ---------- Dark navbar (sits on the gradient hero, Slate homepage) ---------- */
.navbar-dark {
  background: var(--navy-500);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.navbar-dark .brand-link { color: var(--white); }
.navbar-dark .nav-menu-links a { color: rgba(255, 255, 255, .75); }
.navbar-dark .nav-menu-links a:hover { color: var(--white); }
.navbar-dark .phone-link { color: var(--white); }
.navbar-dark .login-link { color: rgba(255, 255, 255, .75); }
.navbar-dark .login-link:hover { color: var(--white); }
@media (max-width: 1280px) {
  .navbar-dark .nav-menu-links { background: var(--navy-500); border-color: rgba(255,255,255,.14); }
  .navbar-dark .nav-menu-links a:hover { background: rgba(255,255,255,.1); }
  .navbar-dark .nav-toggle { border-color: rgba(255,255,255,.3); }
}

/* ---------- Light-blue content bands (Slate .primary-100-bg) ---------- */
.section-blueband {
  background: var(--blue-100);
  padding: 8em 0;
}
.band-block + .band-block { margin-top: 7em; }
@media (max-width: 860px) {
  .section-blueband { padding: 5em 0; }
  .band-block + .band-block { margin-top: 4em; }
}

/* ---------- Brands & association strips (Slate exact) ---------- */
.brands-section {
  padding-top: 5em;
  padding-bottom: 5em;
  border-bottom: 1px solid var(--navy-200);
}

/* ---------- Light-background stat band (about page) ---------- */
.hero-stats-light { border-top-color: var(--navy-100); }
.hero-stats-light .num { color: var(--navy-500); }
.hero-stats-light .num em { color: var(--blue-400); }
.hero-stats-light .cap { color: var(--navy-400); }

/* ---------- Pricing calculator quote wizard ---------- */
.wizard-hero { max-width: 44em; margin: 0 auto 3em; }
.wizard-hero .lead { margin-top: 1em; max-width: none; }
.estimate-card {
  background: var(--navy-500);
  color: var(--white);
  border-radius: var(--rounded-l);
  padding: 2em;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}
.estimate-label { font-size: .85em; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 700; }
.estimate-range { font-size: 2.4em; font-weight: 800; letter-spacing: -1px; color: var(--orange-300); margin: .2em 0; }
.estimate-sub { color: rgba(255,255,255,.75); font-size: .95em; }
.estimate-details { font-size: .88em; color: rgba(255,255,255,.8); display: flex; flex-direction: column; gap: .6em; }
.estimate-details strong { color: var(--white); }
.calc-method {
  max-width: 44em;
  margin: 2.5em auto 0;
  font-size: .82em;
  color: var(--navy-400);
  text-align: center;
}
@media (max-width: 640px) { .estimate-card { grid-template-columns: 1fr; } }

@media (max-width: 520px) {
  .hero-stats { gap: 1.5em 1em; }
  .stat .num { font-size: clamp(2.5em, 14vw, 3.35em); }
  .container { padding-inline: 1.5em; }
  .industry-grid { margin-right: -1.5em; }
}

@media (max-width: 360px) {
  .navbar-content { gap: .5em; }
  .action-buttons { gap: .45em; }
  .action-buttons > .btn { padding-inline: 1em; font-size: .9em; }
  .nav-toggle { padding-inline: .7em; }
  .page-hero { padding: 2.5em 0 3em; }
  .page-hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.25rem) !important; }
  .page-hero .lead { font-size: .95em; line-height: 1.4; margin-top: .9em; }
  .page-hero .hero-actions { margin-top: 1.25em; }
  .modal-overlay { padding: 1em; }
  .modal-card { max-height: calc(100dvh - 2em); padding: 2em 1.25em; }
}