/* ===========================================================
   Kaizn marketing site — shared component CSS
   Builds on tokens.css. Components prefixed `kz-` for system,
   `m-` for marketing-specific patterns.
   =========================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kz-surface);
  color: var(--kz-on-surface);
  font-family: var(--kz-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Prevent FOUC during theme init */
.theme-syncing * { transition: none !important; }

/* Skip link */
.m-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kz-navy-bg); color: white;
  padding: 12px 20px; font: 600 14px var(--kz-font-display);
  border-radius: 4px; z-index: 1000;
}
.m-skip:focus { left: 12px; top: 12px; }

/* ────────────────────────────────────────────────────────────
   Page container
   ──────────────────────────────────────────────────────────── */
.m-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .m-container { padding: 0 40px; }
}
.m-narrow { max-width: 760px; margin: 0 auto; }
.m-medium { max-width: 920px; margin: 0 auto; }

/* ────────────────────────────────────────────────────────────
   Header / nav
   ──────────────────────────────────────────────────────────── */
.m-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--kz-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.m-header.is-scrolled {
  box-shadow: var(--kz-shadow-sm);
  border-bottom-color: var(--kz-glass-border);
}
.m-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
  gap: 24px;
}
.m-wordmark { display: block; height: 28px; width: auto; }
.m-wordmark-dm { display: none; }
.dark .m-wordmark-lm { display: none; }
.dark .m-wordmark-dm { display: block; }

.m-nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .m-nav { display: flex; } }
.m-nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: transparent; border: none; cursor: pointer;
  font: 500 15px var(--kz-font-display);
  color: var(--kz-on-surface);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.m-nav-link:hover { background: var(--kz-surface-container); color: var(--kz-navy); opacity: 1; }
.m-nav-link.is-active { color: var(--kz-orange); font-weight: 700; }
.m-nav-link .material-symbols-outlined { font-size: 18px; transition: transform 0.2s; }
.m-nav-link[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }

.m-nav-actions { display: flex; align-items: center; gap: 8px; }
.m-theme-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--kz-on-surface-variant);
  border-radius: 4px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.m-theme-btn:hover { background: var(--kz-surface-container); color: var(--kz-navy); }
.m-theme-btn:active { transform: scale(0.96); }
.m-theme-btn .material-symbols-outlined { font-size: 22px; }
.m-theme-btn .icon-sun { display: none; }
.dark .m-theme-btn .icon-sun { display: inline-block; }
.dark .m-theme-btn .icon-moon { display: none; }

/* Header CTA — name is legacy; ALWAYS rounded rect (never pill). */
.m-cta-pill {
  display: inline-flex;
  padding: 9px 14px;
  background: var(--kz-cta-grad);
  color: white;
  font: 700 13px var(--kz-font-display);
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(184, 90, 40, 0.5);
}
.m-cta-pill:hover { color: white; opacity: 1; box-shadow: var(--kz-shadow-orange); transform: translateY(-1px); }
.m-cta-pill:active { transform: scale(0.98); }
.dark .m-cta-pill {
  background: var(--kz-cta-grad);
  box-shadow: 0 8px 20px -8px rgba(184, 90, 40, 0.6);
}
@media (min-width: 480px) {
  .m-cta-pill { padding: 10px 18px; font-size: 14px; }
}

.m-burger {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--kz-on-surface);
  border-radius: 4px; cursor: pointer;
}
.m-burger:hover { background: var(--kz-surface-container); }
.m-burger .material-symbols-outlined { font-size: 26px; }
@media (min-width: 1024px) { .m-burger { display: none; } }

/* Mega menu */
.m-mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 680px; max-width: calc(100vw - 32px);
  background: var(--kz-surface);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 12px;
  box-shadow: var(--kz-shadow-lg);
  padding: 20px;
  display: none;
}
.m-mega.is-open { display: block; }
.m-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.m-mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--kz-on-surface);
  font: 500 14px var(--kz-font-display);
  transition: background 0.15s;
}
.m-mega-item:hover { background: var(--kz-surface-container); color: var(--kz-navy); opacity: 1; }
.m-mega-item img {
  width: 28px; height: 28px;
  padding: 3px; background: var(--kz-cream-icon-bg);
  border-radius: 4px; object-fit: contain;
}
.m-mega-foot {
  display: flex; justify-content: space-between;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--kz-surface-highest);
  font: 600 13px var(--kz-font-display);
}
.m-mega-foot a {
  color: var(--kz-orange);
  text-decoration: none;
}
.m-mega-foot a:hover { text-decoration: underline; }

/* Mobile drawer */
.m-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh; width: min(360px, 100vw);
  background: var(--kz-surface);
  border-left: 1px solid var(--kz-surface-highest);
  box-shadow: var(--kz-shadow-lg);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.m-drawer.is-open { transform: translateX(0); }
.m-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.m-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.m-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--kz-surface-highest);
}
.m-drawer-nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.m-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  font: 600 17px var(--kz-font-display);
  color: var(--kz-on-surface);
  text-decoration: none;
  border-radius: 6px;
}
.m-drawer-link:hover { background: var(--kz-surface-container); }
.m-drawer-sub {
  display: none; flex-direction: column;
  padding: 4px 8px 8px 12px;
  max-height: 60vh; overflow-y: auto;
}
.m-drawer-sub.is-open { display: flex; }
.m-drawer-sub a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  color: var(--kz-on-surface);
  text-decoration: none;
  font: 500 15px var(--kz-font-display);
  border-radius: 6px;
}
.m-drawer-sub a:hover { background: var(--kz-surface-container); }
.m-drawer-sub a img {
  width: 24px; height: 24px;
  padding: 2px; background: var(--kz-cream-icon-bg);
  border-radius: 4px; object-fit: contain;
}
.m-drawer-foot { margin-top: auto; padding: 16px 20px 24px; border-top: 1px solid var(--kz-surface-highest); }

/* Body padding for fixed header */
.m-page { padding-top: 68px; min-height: 100vh; }

/* ────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font: 600 15px var(--kz-font-display);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer; border: none;
  transition: opacity 0.15s, transform 0.2s, box-shadow 0.2s, background 0.15s;
  white-space: nowrap;
}
/* `display: inline-flex` above otherwise overrides UA [hidden]. */
.m-btn[hidden], .m-form-back[hidden] { display: none !important; }
.m-btn:active { transform: scale(0.98); }
.m-btn .material-symbols-outlined { font-size: 18px; }
.m-btn-primary { background: var(--kz-navy-bg); color: var(--kz-on-navy); }
.m-btn-primary:hover { opacity: 0.92; color: var(--kz-on-navy); box-shadow: var(--kz-shadow-md); }
.m-btn-gradient { background: var(--kz-cta-grad); color: white; }
.m-btn-gradient:hover { box-shadow: var(--kz-shadow-orange); color: white; opacity: 1; }
/* CTA gradient is identical in both modes (white passes ≥4.8:1 across it). */
.dark .m-btn-gradient { background: var(--kz-cta-grad); color: white; }
.m-btn-green { background: linear-gradient(135deg, #1E5C2E, #4E8E5B); color: white; }
.m-btn-green:hover { box-shadow: var(--kz-shadow-green); color: white; opacity: 1; }
.m-btn-outline { background: transparent; color: var(--kz-navy); border: 1px solid var(--kz-navy); }
.m-btn-outline:hover { background: var(--kz-navy); color: var(--kz-on-navy-flip); opacity: 1; }
.m-btn-ghost { background: transparent; color: var(--kz-orange); padding: 14px 16px; }
.m-btn-ghost:hover { background: var(--kz-orange-glow); }
/* White button → text must stay dark in BOTH modes (--kz-navy flips light in dark mode). */
.m-btn-on-dark { background: white; color: var(--kz-navy-dark); }
.m-btn-on-dark:hover { opacity: 0.92; color: var(--kz-navy-dark); }
.m-btn-outline-on-dark { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.4); }
.m-btn-outline-on-dark:hover { background: rgba(255,255,255,0.08); color: white; opacity: 1; }
.m-btn-lg { padding: 16px 28px; font-size: 16px; }
.m-btn-sm { padding: 10px 14px; font-size: 13px; }
.m-btn-block { width: 100%; }

.m-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.m-btns-stack { display: flex; gap: 12px; flex-direction: column; align-items: stretch; }
@media (min-width: 480px) { .m-btns-stack { flex-direction: row; align-items: center; } }

/* ────────────────────────────────────────────────────────────
   Typography helpers (marketing scale)
   ──────────────────────────────────────────────────────────── */
.m-eyebrow {
  display: inline-block;
  font: 700 11px var(--kz-font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kz-orange);
  margin-bottom: 14px;
}
.m-eyebrow-on-dark { color: var(--kz-orange-light); }

.m-h1 {
  font: 800 clamp(2.25rem, 4.8vw + 0.5rem, 4.25rem) var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.m-h2 {
  font: 800 clamp(1.75rem, 2.8vw + 0.5rem, 2.75rem) var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.m-h3 {
  font: 700 1.375rem var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.m-h4 {
  font: 700 1.125rem var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.01em;
  margin: 0;
}
.m-lead {
  font: 1.125rem/1.55 var(--kz-font-body);
  color: var(--kz-on-surface-variant);
  text-wrap: pretty;
}
@media (min-width: 768px) { .m-lead { font-size: 1.25rem; } }
.m-body { font: 1rem/1.65 var(--kz-font-body); color: var(--kz-on-surface-variant); text-wrap: pretty; }
.m-meta { font: 0.875rem/1.5 var(--kz-font-body); color: var(--kz-on-surface-variant); }
.m-caption { font: 0.75rem/1.4 var(--kz-font-body); color: var(--kz-on-surface-variant); }

.m-accent { font-family: var(--kz-font-body); font-style: italic; font-weight: 400; color: var(--kz-orange); }
.m-on-dark { color: white !important; }
.m-on-dark p, .m-on-dark .m-lead, .m-on-dark .m-body, .m-on-dark .m-meta { color: var(--kz-on-navy-variant); }
.m-on-dark h1, .m-on-dark h2, .m-on-dark h3, .m-on-dark h4, .m-on-dark .m-h1, .m-on-dark .m-h2, .m-on-dark .m-h3, .m-on-dark .m-h4 { color: white; }

/* ────────────────────────────────────────────────────────────
   Section scaffolds
   ──────────────────────────────────────────────────────────── */
.m-section { padding: 72px 0; position: relative; }
@media (min-width: 768px) { .m-section { padding: 112px 0; } }
.m-section-sm { padding: 56px 0; }
.m-section-lg { padding: 96px 0; }
@media (min-width: 768px) { .m-section-lg { padding: 144px 0; } }
.m-section-dark { background: var(--kz-navy); color: white; }
.m-section-cream { background: var(--kz-surface); }
.m-section-low { background: var(--kz-surface-low); }
.m-section-container { background: var(--kz-surface-container); }
.dark .m-section-dark { background: var(--kz-surface-lowest); }

.m-section-head { text-align: center; margin-bottom: 56px; }
.m-section-head .m-eyebrow { display: inline-block; }
.m-section-head .m-lead { margin-top: 18px; }

.m-section-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.m-section-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: -2;
}
.m-section-bg::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
}
.m-bg-desert::before { background-image: url('imagery/desert-landscape-2-banner.webp'); }
.m-bg-river::before { background-image: url('imagery/utah-trail-at-dawn.webp'); }
.m-bg-horizon::before { background-image: url('imagery/compass-at-treeline.webp'); }
.m-bg-fade-dark::after {
  background: linear-gradient(180deg, rgba(2,36,72,0.5) 0%, rgba(2,36,72,0.85) 60%, var(--kz-navy) 100%);
}
.m-bg-fade-cream::after {
  background: linear-gradient(180deg, rgba(254,249,240,0.55) 0%, rgba(254,249,240,0.8) 60%, var(--kz-surface) 100%);
}
.m-bg-fade-navy85::after {
  background: linear-gradient(180deg, rgba(2,36,72,0.82) 0%, rgba(2,36,72,0.92) 100%);
}

/* ────────────────────────────────────────────────────────────
   Card primitives
   ──────────────────────────────────────────────────────────── */
.m-card {
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 12px;
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.15s;
}
.m-card-cream { background: var(--kz-cream-card); border-color: transparent; }
.m-card-navy { background: var(--kz-hero-gradient); color: white; border-color: transparent; }
.m-card-navy h3, .m-card-navy h4 { color: white; }
.m-card-navy p { color: var(--kz-on-navy-variant); }

.m-card-glass {
  background: var(--kz-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--kz-glass-border);
}
.m-card-interactive { cursor: pointer; }
.m-card-interactive:hover { transform: translateY(-3px); box-shadow: var(--kz-shadow-md); border-color: var(--kz-orange); }
.m-card-interactive:active { transform: scale(0.99); }
.m-card-featured { box-shadow: var(--kz-shadow-md); position: relative; }
.m-card-featured::before {
  content: 'Most popular';
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--kz-orange-solid);
  color: white;
  font: 700 10px var(--kz-font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────
   Grids
   ──────────────────────────────────────────────────────────── */
.m-grid { display: grid; gap: 20px; }
.m-grid-2 { grid-template-columns: 1fr; }
.m-grid-3 { grid-template-columns: 1fr; }
.m-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .m-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .m-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .m-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .m-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .m-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ────────────────────────────────────────────────────────────
   Icon chip
   ──────────────────────────────────────────────────────────── */
.m-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--kz-cream-icon-bg);
  border-radius: 6px;
  flex-shrink: 0;
}
.m-ic img { width: 38px; height: 38px; object-fit: contain; }
.m-ic-sm { width: 36px; height: 36px; }
.m-ic-sm img { width: 28px; height: 28px; }
.m-ic-lg { width: 64px; height: 64px; }
.m-ic-lg img { width: 50px; height: 50px; }

/* ────────────────────────────────────────────────────────────
   Pain-point card / use-case card / industry card
   ──────────────────────────────────────────────────────────── */
.m-pain {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--kz-glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--kz-glass-border);
  border-radius: 12px;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s;
}
.m-pain:hover { transform: translateY(-2px); border-color: var(--kz-orange); }
.m-pain h3 { color: white; }
.m-section-dark .m-pain { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
/* Pain card tag (link). Rounded rectangle (NOT a pill). Pushed to card bottom. */
.m-pain-tag {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 12px;
  background: var(--kz-orange-glow);
  color: var(--kz-orange);
  border-radius: 6px;
  font: 700 11px var(--kz-font-display);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.m-pain-tag:hover { background: var(--kz-orange-solid); color: white; opacity: 1; }

/* Green variant — for industry tags that should pop in green. */
.m-pain-tag-green {
  background: rgba(0, 43, 16, 0.10);
  color: #1E5C2E;
}
.dark .m-pain-tag-green {
  background: rgba(164, 210, 169, 0.16);
  color: #A4D2A9;
}
/* When sitting on a dark navy section (e.g. homepage pain cards), use light-green */
.m-section-dark .m-pain-tag-green {
  background: rgba(164, 210, 169, 0.18);
  color: #A4D2A9;
}
.m-pain-tag-green:hover { background: #1E5C2E; color: white; opacity: 1; }
.m-section-dark .m-pain-tag-green:hover { background: #4E8E5B; color: white; opacity: 1; }

/* Industry tile */
.m-tile {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s;
}
.m-tile:hover { transform: translateY(-2px); border-color: var(--kz-orange); box-shadow: var(--kz-shadow-sm); color: inherit; opacity: 1; }
.m-tile-label { font: 700 16px var(--kz-font-display); color: var(--kz-navy); }
.m-tile-teaser { font: 14px/1.5 var(--kz-font-body); color: var(--kz-on-surface-variant); }

/* Use case card */
.m-usecase {
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 12px;
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform 0.2s, border-color 0.15s, box-shadow 0.2s;
}
.m-usecase:hover { transform: translateY(-2px); border-color: var(--kz-orange); box-shadow: var(--kz-shadow-sm); }
.m-usecase-eyebrow { font: 700 11px var(--kz-font-display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--kz-orange); }
.m-usecase-replaces {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--kz-surface-highest);
}
.m-usecase-replaces .m-usecase-label {
  font: 700 10.5px var(--kz-font-display);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--kz-on-surface-variant);
  margin-bottom: 4px;
}
.m-usecase-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Tag chip — rounded rectangle (NOT pill). Used for taxonomy tags. */
.m-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--kz-surface-high);
  color: var(--kz-on-surface-variant);
  border-radius: 6px;
  font: 600 11px var(--kz-font-display);
  text-decoration: none;
}
.m-pill:hover { background: var(--kz-orange-solid); color: white; opacity: 1; }
.m-usecase-foot {
  font: 600 13px var(--kz-font-display);
  color: var(--kz-orange);
  text-decoration: none;
  margin-top: 4px;
}
.m-usecase-foot:hover { text-decoration: underline; }

/* Service / pricing card */
.m-svc {
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 14px;
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.m-svc:hover { transform: translateY(-3px); box-shadow: var(--kz-shadow-md); }
.m-svc-navy { background: var(--kz-hero-gradient); color: white; border-color: transparent; }
.m-svc-navy h3, .m-svc-navy .m-svc-price { color: white; }
.m-svc-navy p, .m-svc-navy .m-svc-meta { color: var(--kz-on-navy-variant); }
.m-svc-price { font: 800 2rem var(--kz-font-display); color: var(--kz-navy); letter-spacing: -0.02em; }
.m-svc-price-sub { font: 14px var(--kz-font-body); color: var(--kz-on-surface-variant); margin-top: 2px; }
.m-svc-navy .m-svc-price-sub { color: var(--kz-on-navy-variant); }

/* Value-stack table */
.m-value {
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 12px;
  overflow: hidden;
}
.m-value-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--kz-surface-highest);
  align-items: baseline;
}
.m-value-row:last-child { border-bottom: none; }
.m-value-row p { color: var(--kz-on-surface); }
.m-value-amt { font: 700 15px var(--kz-font-display); color: var(--kz-navy); white-space: nowrap; }
.m-value-total {
  background: var(--kz-surface-container);
  font-weight: 700;
}
.m-value-total p, .m-value-total .m-value-amt {
  font: 800 18px var(--kz-font-display);
  color: var(--kz-navy);
}

/* Pull quote */
.m-pullquote {
  font: 800 clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem) var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}
.m-on-dark .m-pullquote, .m-section-dark .m-pullquote { color: white; }
.m-pullquote-cap {
  font: 14px var(--kz-font-body);
  color: var(--kz-on-surface-variant);
  text-align: center;
  margin-top: 18px;
  font-style: italic;
}
.m-section-dark .m-pullquote-cap { color: var(--kz-on-navy-variant); }

/* Stat row */
.m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 768px) { .m-stats { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.m-stat { text-align: center; }
.m-stat-num {
  font: 800 clamp(2rem, 4vw, 3rem) var(--kz-font-display);
  color: var(--kz-orange);
  letter-spacing: -0.02em;
  line-height: 1;
}
.m-stat-label { font: 600 14px var(--kz-font-display); color: var(--kz-on-surface); margin-top: 8px; }
.m-section-dark .m-stat-num { color: var(--kz-orange-light); }
.m-section-dark .m-stat-label { color: white; }

/* Step / numbered list cards */
.m-step {
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 12px;
  padding: 28px;
  position: relative;
}
.m-step-num {
  display: inline-block;
  font: 800 14px var(--kz-font-display);
  letter-spacing: 0.15em;
  color: var(--kz-orange);
  margin-bottom: 12px;
}
.m-section-dark .m-step { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }

/* FAQ accordion */
.m-faq {
  border-top: 1px solid var(--kz-surface-highest);
}
.m-faq-item {
  border-bottom: 1px solid var(--kz-surface-highest);
}
.m-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 8px;
  text-align: left;
  background: transparent; border: none; cursor: pointer;
  font: 700 18px var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.012em;
}
.m-section-dark .m-faq-q { color: white; }
.m-faq-q .material-symbols-outlined { font-size: 22px; transition: transform 0.2s; color: var(--kz-orange); }
.m-faq-item.is-open .m-faq-q .material-symbols-outlined { transform: rotate(45deg); }
.m-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.m-faq-item.is-open .m-faq-a { grid-template-rows: 1fr; }
.m-faq-a > div {
  overflow: hidden;
  padding: 0 8px;
}
.m-faq-item.is-open .m-faq-a > div { padding: 0 8px 24px; }
.m-faq-a p { font: 1rem/1.6 var(--kz-font-body); }
.m-section-dark .m-faq-a p { color: var(--kz-on-navy-variant); }
.m-section-dark .m-faq { border-color: rgba(255,255,255,0.12); }
.m-section-dark .m-faq-item { border-color: rgba(255,255,255,0.12); }

/* Callout / quote box */
.m-callout {
  background: var(--kz-surface-container);
  border-left: 4px solid var(--kz-orange);
  border-radius: 0 8px 8px 0;
  padding: 22px 26px;
}
.m-callout-italic { font: italic 1.0625rem/1.55 var(--kz-font-body); color: var(--kz-on-surface); }
.m-section-dark .m-callout {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--kz-orange-light);
}
.m-section-dark .m-callout-italic { color: white; }

/* Process-flow / diagram nodes */
.m-flow {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
@media (min-width: 768px) {
  .m-flow { flex-direction: row; align-items: center; gap: 0; }
}
.m-flow-node {
  flex: 1;
  padding: 18px 22px;
  background: var(--kz-glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--kz-glass-border);
  border-radius: 10px;
  font: 700 14px var(--kz-font-display);
  color: var(--kz-navy);
  text-align: center;
}
.m-section-dark .m-flow-node { color: white; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.m-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--kz-orange);
  padding: 0 8px;
  font-size: 24px;
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  .m-flow-arrow { transform: none; }
}

/* Code preview block */
.m-code {
  background: var(--kz-navy-dark);
  color: #e8e8e8;
  border-radius: 8px;
  padding: 18px 22px;
  font: 13px/1.55 var(--kz-font-mono);
  white-space: pre;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.06);
}
.m-code-line-pass { color: var(--kz-green-light); }
.m-code-line-meta { color: var(--kz-orange-light); }
.m-code-line-dim { color: rgba(255,255,255,0.55); }

/* Bars */
.m-bar {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}
.m-bar-label { font: 700 13px var(--kz-font-display); color: var(--kz-navy); }
.m-bar-track {
  height: 8px; background: var(--kz-surface-highest);
  border-radius: 999px; overflow: hidden;
}
.m-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kz-orange), var(--kz-orange-light));
  border-radius: 999px;
}
.m-bar-pct { font: 700 13px var(--kz-font-display); color: var(--kz-orange); text-align: right; }
.m-section-dark .m-bar-label { color: white; }
.m-section-dark .m-bar-track { background: rgba(255,255,255,0.08); }

/* Footer */
.m-footer {
  background: var(--kz-navy);
  color: white;
  padding: 80px 0 32px;
  margin-top: 0;
}
.dark .m-footer { background: var(--kz-surface-lowest); border-top: 1px solid var(--kz-surface-highest); }
.m-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .m-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 56px; }
}
.m-footer h4,
.m-footer .m-footer-head {
  color: white;
  font: 700 13px var(--kz-font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}
.m-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.m-footer-links a {
  color: var(--kz-on-navy-variant);
  text-decoration: none;
  font: 500 15px var(--kz-font-display);
}
.m-footer-links a:hover { color: white; opacity: 1; }
.m-footer-tagline { font: 1.0625rem/1.5 var(--kz-font-body); color: var(--kz-on-navy-variant); max-width: 320px; margin-top: 18px; }
.m-footer-sub { font: 13px var(--kz-font-body); color: rgba(255,255,255,0.5); margin-top: 6px; font-style: italic; }
.m-footer-wordmark { height: 32px; }
.m-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font: 13px var(--kz-font-body); color: rgba(255,255,255,0.5);
}
.m-footer-bottom-links { display: flex; gap: 24px; }
.m-footer-bottom-links a { color: rgba(255,255,255,0.5); text-decoration: none; }
.m-footer-bottom-links a:hover { color: white; }

/* Newsletter */
.m-newsletter { margin-top: 22px; }
.m-newsletter-label { font: 600 14px var(--kz-font-display); color: white; margin-bottom: 10px; }
.m-newsletter-form {
  display: flex; gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  padding: 4px;
  transition: border-color 0.15s;
}
.m-newsletter-form:focus-within { border-color: var(--kz-orange-light); }
.m-newsletter-form input {
  flex: 1; min-width: 0;
  background: transparent; border: none;
  color: white;
  font: 15px var(--kz-font-body);
  padding: 10px 14px;
}
.m-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.m-newsletter-form input:focus { outline: none; }
.m-newsletter-form button {
  padding: 8px 16px;
  background: white;
  color: var(--kz-navy-dark);
  border: none;
  border-radius: 3px;
  font: 700 14px var(--kz-font-display);
  cursor: pointer;
}
.m-newsletter-form button:hover { background: var(--kz-cream-card); }

/* ── kz-reveal: click-to-show contact button ─────────────────
   Replaces itself with a real tel:/mailto: link on click.
   Reads as a quiet inline action — link-colored text + phone
   glyph (Material Symbols is loaded on every page via tokens.css).
   Contrast: --kz-orange (#A8501F) on --kz-surface (#FAF9F5) = 5.2:1 ✓
   Dark: --kz-orange (#E8844A) on --kz-surface (#101D2C) = 6.3:1 ✓
   Footer context: button sits on navy (.m-footer) — uses white-ish
   tint to match the surrounding muted link color.
   ────────────────────────────────────────────────────────────── */
.kz-reveal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: var(--kz-orange);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  line-height: inherit;
  vertical-align: baseline;
  transition: color 0.15s, border-color 0.15s;
}
.kz-reveal::before {
  /* Material Symbols "call" glyph — present when font is loaded */
  font-family: 'Material Symbols Outlined';
  font-size: 0.95em;
  font-weight: 300;
  line-height: 1;
  vertical-align: -0.1em;
  letter-spacing: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
button.kz-reveal[data-kind="tel"]::before   { content: 'call'; }
button.kz-reveal[data-kind="email"]::before { content: 'mail'; }
.kz-reveal:hover {
  /* --kz-navy flips per mode (dark ink in light, light in dark) so the hover
     state passes ≥14:1 on cream and on the dark surface alike. --kz-orange-light
     would fail (2.4:1) on the cream surface. */
  color: var(--kz-navy);
  border-bottom-color: transparent;
}
.kz-reveal:focus-visible {
  outline: 2px solid var(--kz-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
/* In the footer (navy dark background), match surrounding link tone.
   0.62 alpha keeps the reveal button ≥4.5:1 over the footer photo backdrop. */
.m-footer .kz-reveal,
.m-footer-bottom .kz-reveal {
  color: rgba(255, 255, 255, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.m-footer .kz-reveal:hover,
.m-footer-bottom .kz-reveal:hover {
  color: white;
  border-bottom-color: transparent;
}
/* On-dark sections (navy background): use light orange */
.m-section-dark .kz-reveal {
  color: var(--kz-orange-light);
}
.m-section-dark .kz-reveal:hover {
  color: white;
}
/* After reveal: the link that replaces the button */
.kz-reveal-link {
  color: var(--kz-orange);
  font-weight: 700;
  text-decoration: none;
}
.kz-reveal-link:hover { text-decoration: underline; color: var(--kz-navy); }
.m-footer .kz-reveal-link,
.m-footer-bottom .kz-reveal-link { color: rgba(255, 255, 255, 0.85); font-weight: 400; }
.m-footer .kz-reveal-link:hover,
.m-footer-bottom .kz-reveal-link:hover { color: white; }
.m-section-dark .kz-reveal-link { color: var(--kz-orange-light); font-weight: 700; }
.m-section-dark .kz-reveal-link:hover { color: white; }

/* Reveal on scroll */
.m-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.m-reveal.is-revealed {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Form (Discover / Jumpstart) */
.m-form-shell {
  background: var(--kz-glass-bg);
  backdrop-filter: blur(24px);
  border: 1px solid var(--kz-glass-border);
  border-radius: 16px;
  box-shadow: var(--kz-shadow-md);
  padding: 32px 24px;
}
@media (min-width: 640px) { .m-form-shell { padding: 44px 48px; } }
.m-form-step-meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 700 12px var(--kz-font-display);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--kz-on-surface-variant);
  margin-bottom: 8px;
}
.m-form-progress {
  height: 4px;
  background: var(--kz-surface-highest);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 24px;
}
.m-form-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kz-orange), var(--kz-orange-light));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.m-form-q {
  font: 800 clamp(1.5rem, 2vw + 0.5rem, 2rem) var(--kz-font-display);
  color: var(--kz-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 8px 0 8px;
  text-wrap: balance;
}
.m-form-helper { font: 0.9375rem/1.5 var(--kz-font-body); color: var(--kz-on-surface-variant); margin-bottom: 20px; }
.m-input, .m-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 6px;
  font: 16px var(--kz-font-body);
  color: var(--kz-on-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.m-input:focus, .m-textarea:focus { outline: none; border-color: var(--kz-orange); box-shadow: 0 0 0 3px var(--kz-orange-glow); }
.m-textarea { resize: vertical; min-height: 140px; font-family: var(--kz-font-body); }
.m-input-row { display: flex; flex-direction: column; gap: 6px; }
.m-input-error { font: 13px var(--kz-font-body); color: var(--kz-red); }
.m-char-count { font: 12px var(--kz-font-display); color: var(--kz-on-surface-variant); text-align: right; }
.m-form-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; gap: 16px;
}
.m-form-back {
  background: transparent; border: none; cursor: pointer;
  font: 600 14px var(--kz-font-display);
  color: var(--kz-on-surface-variant);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 0;
}
.m-form-back:hover { color: var(--kz-navy); }

.m-choice-list { display: grid; gap: 10px; }
.m-choice {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: left;
  font-family: inherit;
}
.m-choice:hover { border-color: var(--kz-orange); background: var(--kz-surface); }
.m-choice.is-selected { border-color: var(--kz-orange); background: var(--kz-orange-glow); }
.m-choice-badge {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kz-surface-container);
  border-radius: 999px;
  font: 700 14px var(--kz-font-display);
  color: var(--kz-on-surface-variant);
}
.m-choice.is-selected .m-choice-badge { background: var(--kz-orange-solid); color: white; }
.m-choice-body { flex: 1; }
.m-choice-title { font: 700 15px var(--kz-font-display); color: var(--kz-navy); }
.m-choice-meta { font: 14px/1.45 var(--kz-font-body); color: var(--kz-on-surface-variant); margin-top: 2px; }

.m-pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Tool/tag toggle button — rounded rectangle (NOT pill). */
.m-pill-check {
  padding: 8px 14px;
  background: var(--kz-surface-lowest);
  border: 1px solid var(--kz-surface-highest);
  border-radius: 6px;
  font: 600 14px var(--kz-font-display);
  color: var(--kz-on-surface);
  cursor: pointer;
  transition: all 0.15s;
}
.m-pill-check.is-on { background: var(--kz-orange-solid); color: white; border-color: var(--kz-orange-solid); }
.m-pill-group-label {
  font: 700 11px var(--kz-font-display);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--kz-on-surface-variant);
  margin-top: 20px;
}

.m-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Carousel */
.m-carousel { position: relative; }
.m-carousel-track {
  display: flex;
  gap: 0;
  overflow: hidden;
}
.m-carousel-slide {
  flex: 0 0 100%;
  transition: opacity 0.5s;
}
.m-carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.m-carousel-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--kz-surface-highest);
  background: var(--kz-surface-lowest);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--kz-navy);
}
.m-carousel-btn:hover { background: var(--kz-orange-solid); color: white; border-color: var(--kz-orange-solid); }
.m-carousel-dots { display: flex; gap: 8px; align-items: center; }
.m-carousel-dot {
  width: 8px; height: 8px;
  border: none;
  background: var(--kz-surface-highest);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: width 0.2s, background 0.2s;
}
.m-carousel-dot.is-active { width: 28px; background: var(--kz-orange); }

/* Expandable text */
.m-expandable { position: relative; }
.m-expandable-toggle {
  margin-top: 18px;
  background: transparent; border: none; cursor: pointer;
  font: 700 14px var(--kz-font-display);
  color: var(--kz-orange);
  display: inline-flex; align-items: center; gap: 4px;
}
.m-expandable-toggle:hover { text-decoration: underline; }
.m-expandable-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.m-expandable.is-open .m-expandable-content { grid-template-rows: 1fr; }
.m-expandable-content > div { overflow: hidden; }

/* Two-col split (image + text) */
.m-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .m-split { grid-template-columns: 5fr 7fr; gap: 72px; }
}
.m-split-portrait {
  position: relative;
  max-width: 380px;
}
.m-split-portrait-frame {
  position: relative;
  z-index: 2;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--kz-surface-container);
}
.m-split-portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.m-split-portrait::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 2px solid var(--kz-orange);
  border-radius: 14px;
  z-index: 1;
}

/* Section divider */
.m-divider { height: 1px; background: var(--kz-surface-highest); margin: 64px 0; }
.m-section-dark .m-divider { background: rgba(255,255,255,0.1); }

/* Misc */
.m-text-center { text-align: center; }
.m-mt-1 { margin-top: 8px; }
.m-mt-2 { margin-top: 16px; }
.m-mt-3 { margin-top: 24px; }
.m-mt-4 { margin-top: 32px; }
.m-mt-5 { margin-top: 48px; }
.m-mb-1 { margin-bottom: 8px; }
.m-mb-2 { margin-bottom: 16px; }
.m-mb-3 { margin-bottom: 24px; }
.m-mb-4 { margin-bottom: 32px; }
.m-mb-5 { margin-bottom: 48px; }
.m-gap-2 { gap: 16px; }
.m-gap-3 { gap: 24px; }
.m-flex { display: flex; }
.m-flex-col { display: flex; flex-direction: column; }
.m-items-center { align-items: center; }
.m-justify-between { justify-content: space-between; }
.m-flex-wrap { flex-wrap: wrap; }
.m-wide { max-width: 1100px; margin: 0 auto; }

/* ────────────────────────────────────────────────────────────
   Dark-section text legibility (fixes dark-on-dark)
   ──────────────────────────────────────────────────────────── */
.m-section-dark p,
.m-section-dark .m-body,
.m-section-dark .m-lead,
.m-section-dark .m-meta { color: var(--kz-on-navy-variant); }
.m-section-dark .m-pain p,
.m-section-dark .m-pain .m-body { color: rgba(255,255,255,0.78); }
.m-section-dark .m-pain h3,
.m-section-dark .m-pain .m-h3 { color: white; }
.m-section-dark .m-step p { color: rgba(255,255,255,0.78); }

/* ────────────────────────────────────────────────────────────
   Glass effect — pervasive across all on-dark cards
   A cobalt-navy translucent fill (NOT white-on-dark) so the
   underlying section image doesn't bleed through the card and
   tint it orange. Heavy blur softens whatever IS behind, and
   the inset top highlight gives a lifted-glass edge.
   ──────────────────────────────────────────────────────────── */
.m-section-dark .m-pain,
.m-section-dark .m-step,
.m-section-dark .ind-hiw-step,
.m-section-dark .m-flow-node,
.m-section-dark .svc-card,
.m-section-dark .addon-card,
.m-section-dark .build-card,
.m-section-dark .verify-card,
.m-section-dark .verify-flow,
.m-section-dark .agent-card,
.m-section-dark .col-card,
.m-section-dark .stat-card,
.m-section-dark .uc-card,
.m-section-dark .price-tile,
.pain-section .m-pain,
.services-section .svc-card,
.services-section .addon-card,
.build-section .build-card {
  background: rgba(18, 22, 28, 0.42) !important;
  border-color: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.10);
}
/* Hover: brighter cobalt */
.m-section-dark .m-pain:hover,
.m-section-dark .svc-card:hover,
.m-section-dark .addon-card:hover,
.m-section-dark .build-card:hover,
.m-section-dark .uc-card:hover,
.pain-section .m-pain:hover,
.services-section .svc-card:hover,
.services-section .addon-card:hover,
.build-section .build-card:hover {
  background: rgba(32, 36, 44, 0.52) !important;
}
/* Featured service card — keeps its orange gradient, still gets blur for consistency */
.m-section-dark .svc-card-featured,
.services-section .svc-card-featured {
  background: linear-gradient(155deg, rgba(184,90,40,0.20), rgba(184,90,40,0.08)) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.m-section-dark .svc-card-featured:hover,
.services-section .svc-card-featured:hover {
  background: linear-gradient(155deg, rgba(184,90,40,0.26), rgba(184,90,40,0.10)) !important;
}

/* Footer photographic backdrop ───────────────────────────── */
.m-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.m-footer::before {
  content: '';
  position: absolute; inset: 0;
  background: url('imagery/Dark Angular Terrain.webp') center/cover;
  opacity: 0.18;
  z-index: -2;
}
.m-footer::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 75% 20%, rgba(184,90,40,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 15% 100%, rgba(40,80,135,0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(2,36,72,0.55) 0%, rgba(2,36,72,0.72) 100%);
  z-index: -1;
}
.dark .m-footer::before { opacity: 0.15; }
.dark .m-footer::after {
  background:
    radial-gradient(ellipse 55% 60% at 75% 20%, rgba(184,90,40,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 15% 100%, rgba(40,80,135,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(11,21,32,0.72) 0%, rgba(11,21,32,0.88) 100%);
}

/* Footer images path is relative to site.css (in /assets) */

/* ════════════════════════════════════════════════════════════════════
   LIGHT-MODE conversion for dark sections (site-wide)
   In DARK mode these stay exactly as designed. In LIGHT mode every
   .m-section-dark section (and the industry image heroes) becomes a
   warm, airy light surface with white cards — matching the Services
   page and the light home page. Scoped to html:not(.dark) so dark mode
   is untouched. The footer (.m-footer) is intentionally excluded.
   ════════════════════════════════════════════════════════════════════ */

/* Section shell: warm off-white + a whisper of brand glow */
html:not(.dark) .m-section-dark {
  background:
    radial-gradient(ellipse 55% 50% at 88% 8%, rgba(184,90,40,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 8% 96%, rgba(40,80,135,0.05) 0%, transparent 55%),
    var(--kz-surface-low);
  color: var(--kz-on-surface);
}
html:not(.dark) .m-section-dark.m-on-dark { color: var(--kz-on-surface) !important; }

/* Headings → ink (beats .m-on-dark { color:#fff !important }) */
html:not(.dark) .m-section-dark h1,
html:not(.dark) .m-section-dark h2,
html:not(.dark) .m-section-dark h3,
html:not(.dark) .m-section-dark h4,
html:not(.dark) .m-section-dark .m-h1,
html:not(.dark) .m-section-dark .m-h2,
html:not(.dark) .m-section-dark .m-h3,
html:not(.dark) .m-section-dark .m-h4,
html:not(.dark) .m-section-dark .m-on-dark,
html:not(.dark) .ind-hero h1,
html:not(.dark) .ind-hero .m-h1 { color: var(--kz-navy) !important; }

/* Body copy → muted ink (beats inline rgba-white + .m-section-dark p) */
html:not(.dark) .m-section-dark p,
html:not(.dark) .m-section-dark .m-lead,
html:not(.dark) .m-section-dark .m-body,
html:not(.dark) .m-section-dark .m-meta,
html:not(.dark) .ind-hero p,
html:not(.dark) .ind-hero .m-lead { color: var(--kz-on-surface-variant) !important; }

/* Eyebrows on dark → brand orange */
html:not(.dark) .m-section-dark .m-eyebrow-on-dark,
html:not(.dark) .ind-hero .m-eyebrow-on-dark { color: var(--kz-orange) !important; }

/* On-dark buttons → light-mode equivalents */
html:not(.dark) .m-section-dark .m-btn-on-dark,
html:not(.dark) .ind-hero .m-btn-on-dark {
  background: var(--kz-cta-grad) !important;
  color: #fff !important;
}
html:not(.dark) .m-section-dark .m-btn-outline-on-dark,
html:not(.dark) .ind-hero .m-btn-outline-on-dark {
  color: var(--kz-navy) !important;
  border-color: var(--kz-navy) !important;
}
html:not(.dark) .m-section-dark .m-btn-outline-on-dark:hover,
html:not(.dark) .ind-hero .m-btn-outline-on-dark:hover {
  background: var(--kz-navy) !important; color: #fff !important; opacity: 1;
}

/* Cards → white, hairline border, soft shadow */
html:not(.dark) .m-section-dark .m-pain,
html:not(.dark) .m-section-dark .m-step,
html:not(.dark) .m-section-dark .m-card,
html:not(.dark) .m-section-dark .ind-hiw-step,
html:not(.dark) .m-section-dark .m-flow-node,
html:not(.dark) .m-section-dark .svc-card,
html:not(.dark) .m-section-dark .addon-card,
html:not(.dark) .m-section-dark .build-card,
html:not(.dark) .m-section-dark .verify-card,
html:not(.dark) .m-section-dark .verify-flow,
html:not(.dark) .m-section-dark .agent-card,
html:not(.dark) .m-section-dark .col-card,
html:not(.dark) .m-section-dark .stat-card,
html:not(.dark) .m-section-dark .uc-card,
html:not(.dark) .m-section-dark .price-tile {
  background: var(--kz-surface-lowest) !important;
  border-color: var(--kz-surface-highest) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--kz-shadow-sm) !important;
}

/* Verification flow box → ink text + light chips in light mode */
html:not(.dark) .m-section-dark .verify-flow-text { color: var(--kz-navy) !important; }
html:not(.dark) .m-section-dark .verify-flow-text .branch { color: var(--kz-on-surface-variant) !important; }
html:not(.dark) .m-section-dark .verify-flow-text .branch span {
  background: var(--kz-surface) !important;
  border: 1px solid var(--kz-surface-highest) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--kz-shadow-sm) !important;
}

/* Card text → ink + accents */
html:not(.dark) .m-section-dark .m-pain h3,
html:not(.dark) .m-section-dark .m-pain .m-h3,
html:not(.dark) .m-section-dark .m-step h3,
html:not(.dark) .m-section-dark .m-card h3,
html:not(.dark) .m-section-dark .m-card h4,
html:not(.dark) .m-section-dark .ind-hiw-step h3,
html:not(.dark) .m-section-dark .uc-card h3,
html:not(.dark) .m-section-dark .col-card h3 { color: var(--kz-navy) !important; }

html:not(.dark) .m-section-dark .m-card p,
html:not(.dark) .m-section-dark .m-card .m-body,
html:not(.dark) .m-section-dark .ind-hiw-step p,
html:not(.dark) .m-section-dark .uc-card p { color: var(--kz-on-surface-variant) !important; }

/* Stats, callouts, flow, pullquote, faq, divider → light-mode */
html:not(.dark) .m-section-dark .m-stat-num { color: var(--kz-orange) !important; }
html:not(.dark) .m-section-dark .m-stat-label,
html:not(.dark) .m-section-dark .m-bar-label,
html:not(.dark) .m-section-dark .m-flow-node,
html:not(.dark) .m-section-dark .m-pullquote,
html:not(.dark) .m-section-dark .m-callout-italic { color: var(--kz-navy) !important; }
html:not(.dark) .m-section-dark .m-callout { background: var(--kz-surface-lowest) !important; }
html:not(.dark) .m-section-dark .m-faq-q { color: var(--kz-navy) !important; }
html:not(.dark) .m-section-dark .m-faq-a p { color: var(--kz-on-surface-variant) !important; }
html:not(.dark) .m-section-dark .m-faq,
html:not(.dark) .m-section-dark .m-faq-item { border-color: var(--kz-surface-highest) !important; }
html:not(.dark) .m-section-dark .m-divider { background: var(--kz-surface-highest) !important; }
html:not(.dark) .m-section-dark .m-pain-tag-green {
  background: rgba(0,43,16,0.10) !important; color: #1E5C2E !important;
}

/* Reveal buttons inside a converted (now light) dark section → brand orange.
   In dark mode these keep --kz-orange-light (7:1 on the dark fill); in light
   mode the section is a cream surface, so orange-light (2.4:1) would fail —
   force --kz-orange (≈5:1) for both the button and the post-reveal link. */
html:not(.dark) .m-section-dark .kz-reveal,
html:not(.dark) .m-section-dark .kz-reveal-link {
  color: var(--kz-orange) !important;
}
html:not(.dark) .m-section-dark .kz-reveal:hover,
html:not(.dark) .m-section-dark .kz-reveal-link:hover {
  color: var(--kz-navy) !important;
}

/* Industry image heroes → cream wash over the photo (light hero) */
html:not(.dark) .ind-hero { color: var(--kz-on-surface); }
html:not(.dark) .ind-hero.has-image::after {
  background: linear-gradient(180deg, rgba(254,249,240,0.84) 0%, rgba(254,249,240,0.90) 70%, var(--kz-surface) 100%) !important;
}
html:not(.dark) .ind-hero.gradient-only { background: var(--kz-surface-low) !important; }