/* ================================================================
   MAXOS UWB V3 — NAMED BREAKPOINT CUSTOM PROPERTIES (V-005 fix)
   Build: build_v3_pilot_round_0_20260713
   Author: Heavy Coder (Genspark super agent) — Max applies
   ================================================================ */

:root {
  --bp-xs:   360px;
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-md2: 1024px;
  --bp-lg:  1280px;
  --bp-xl:  1440px;

  --color-brand-primary:   #F97316;
  --color-brand-deep:      #0F172A;
  --color-brand-midnight:  #1E293B;
  --color-brand-shingle:   #475569;
  --color-accent:          #FED7AA;
  --color-neutral-000:     #FFFFFF;
  --color-neutral-900:     #0F172A;

  --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --section-padding-y: clamp(64px, 8vw, 120px);
  --container-max: 1280px;
}

/* ================================================================
   PROCESS / AFTER-YOU-CALL SECTION STYLES (V-001 fix)
   ================================================================ */

[data-kpr-section="after-you-call"],
.process.kpr-section {
  background-color: var(--color-brand-midnight);
  color: var(--color-neutral-000);
  padding-block: var(--section-padding-y);
}

[data-kpr-section="after-you-call"] .container,
.process.kpr-section .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

[data-kpr-section="after-you-call"] .section-header,
.process.kpr-section .section-header {
  text-align: center;
  margin-block-end: clamp(40px, 5vw, 64px);
}

[data-kpr-section="after-you-call"] .section-title,
.process.kpr-section .section-title {
  font-family: var(--font-family-base);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-neutral-000);
  margin-block-end: 0.5em;
  line-height: 1.18;
}

[data-kpr-section="after-you-call"] .section-subtitle,
.process.kpr-section .section-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-brand-shingle);
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.55;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: process-counter;
}

.process-step {
  background-color: #1a2a3a;
  border: 1px solid rgba(71, 85, 105, 0.4);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.process-step::before {
  content: counter(process-counter);
  counter-increment: process-counter;
  position: absolute;
  top: -14px;
  left: 24px;
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-000);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.process-step__icon { color: var(--color-brand-primary); flex-shrink: 0; }
.process-step__icon svg { display: block; }

.process-step__title {
  font-family: var(--font-family-base);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: var(--color-neutral-000);
  margin: 0;
}

.process-step__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-brand-shingle);
  margin: 0;
}

.process-step__desc a {
  color: var(--color-brand-primary);
  text-decoration: none;
  font-weight: 600;
}

.process-step__desc a:hover,
.process-step__desc a:focus-visible { text-decoration: underline; }

.process-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-block-start: clamp(40px, 5vw, 64px);
}

.process-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.process-cta .btn--primary {
  background-color: var(--color-brand-primary);
  color: var(--color-neutral-000);
  border: 2px solid var(--color-brand-primary);
}

.process-cta .btn--primary:hover,
.process-cta .btn--primary:focus-visible { background-color: #ea6c0a; border-color: #ea6c0a; }

.process-cta .btn--outline {
  background-color: transparent;
  color: var(--color-neutral-000);
  border: 2px solid var(--color-brand-shingle);
}

.process-cta .btn--outline:hover,
.process-cta .btn--outline:focus-visible { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

.process-cta .btn:focus-visible,
.process-step__desc a:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 3px;
}

.icon-phone { display: inline-flex; align-items: center; vertical-align: middle; }

/* ================================================================
   CANONICAL MEDIA QUERIES (V-005) — 6 named thresholds only
   ================================================================ */

@media (max-width: 1440px) {
  .process-steps { gap: clamp(20px, 2.5vw, 40px); }
}

@media (max-width: 1280px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 1024px) {
  .process-steps { gap: 20px; }
  .process.kpr-section .section-title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
}

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr; gap: 24px; }
  .process-cta { flex-direction: column; align-items: stretch; }
  .process-cta .btn { justify-content: center; }
  .process.kpr-section .section-header { text-align: left; }
}

@media (max-width: 480px) {
  .process-step { padding: 20px; }
  .process-step__title { font-size: 1.05rem; }
  .process.kpr-section .section-subtitle { font-size: 0.9375rem; }
}

@media (max-width: 360px) {
  .process.kpr-section .container { padding-inline: 12px; }
  .process-step { padding: 16px; border-radius: 8px; }
  .process-cta .btn { font-size: 0.9375rem; padding: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-cta .btn,
  .process-step__desc a { transition: none; }
}

/* KPR Fresh Build 2 — Design System
 * Mission 004 / UFAR_Bridge v1
 * Visual direction: bold, modern, high-contrast, premium, conversion-focused
 * Beige REJECTED by operator decision log. Old KPR imagery REJECTED.
 */

:root {
  --ink: #0b1220;
  --ink-2: #060a14;
  --paper: #ffffff;
  --slate: #1e293b;
  --slate-2: #334155;
  --slate-3: #475569;
  --line: #0f172a;
  --line-2: #1f2a44;
  --orange: #f97316;
  --orange-2: #ea580c;
  --orange-3: #c2410c;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --success: #22c55e;
  --warning: #f59e0b;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .08);
  --shadow-md: 0 8px 28px rgba(15, 23, 42, .12);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .18);
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--paper);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--orange-3); text-decoration: none; }
a:hover { color: var(--orange-2); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.4rem) }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem) }
h3 { font-size: 1.35rem }
h4 { font-size: 1.1rem }
p { margin: 0 0 14px; color: var(--slate) }
ul, ol { margin: 0 0 14px; padding-left: 22px; color: var(--slate) }
li { margin: 6px 0 }

/* Layout */
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px }
.container { max-width: 1024px; margin: 0 auto; padding: 0 24px }
.section { padding: 72px 0 }
.section--tight { padding: 48px 0 }
.section--dark { background: var(--ink); color: #e5e7eb }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #ffffff }
.section--slate { background: var(--slate); color: #cbd5e1 }
.section--slate h1, .section--slate h2, .section--slate h3 { color: #ffffff }

/* Top utility bar */
.util {
  background: var(--ink-2);
  color: #cbd5e1;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.util .row { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 16px }
.util a { color: #cbd5e1 }
.util a:hover { color: var(--orange) }
.util .left, .util .right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap }
.util .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35); color: var(--orange); border-radius: 999px; font-weight: 700; font-size: 12px }
.util .pill .dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50% }

/* Header / mega nav */
.site-header { background: var(--paper); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 38px; height: 38px }
.brand .name { font-weight: 900; letter-spacing: -0.01em; font-size: 17px; line-height: 1; color: var(--ink) }
.brand .sub { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--orange); margin-top: 4px; }
.nav-list { display: flex; gap: 4px; align-items: center; list-style: none; padding: 0; margin: 0 }
.nav-list > li { position: relative }
.nav-list > li > a, .nav-list > li > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; color: var(--ink); font-weight: 700; font-size: 14px;
  background: transparent; border: 0; cursor: pointer; border-radius: 8px;
  text-decoration: none;
}
.nav-list > li > a:hover, .nav-list > li > button:hover { background: #f1f5f9; color: var(--orange-3) }
.nav-list .caret { width: 10px; height: 10px; opacity: .6 }
.megamenu {
  position: absolute; top: 100%; left: 0; min-width: 560px; background: var(--paper);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 22px; display: none; grid-template-columns: 1fr 1fr; gap: 8px 22px;
}
.nav-list > li:hover .megamenu, .nav-list > li:focus-within .megamenu { display: grid }
.megamenu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-weight: 700; }
.megamenu a:hover { background: #f1f5f9; color: var(--orange-3) }
.megamenu small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; margin-top: 2px }
.phone-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--ink); padding: 12px 18px;
  border-radius: 10px; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; transition: background .12s;
}
.phone-cta:hover { background: var(--orange-2); color: var(--ink) }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--ink) }
@media (max-width: 1024px) {
  .nav-row { height: 64px }
  .nav-list { display: none }
  .menu-toggle { display: inline-flex }
  .phone-cta { display: none }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; background: var(--ink); color: #cbd5e1; padding: 24px; z-index: 100; display: none; }
.drawer.open { display: block }
.drawer .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px }
.drawer a { display: block; padding: 14px 0; color: #fff; font-weight: 700; border-bottom: 1px solid #1f2a44 }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font-weight: 800; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; transition: transform .12s, background .12s, box-shadow .12s; border: 0; cursor: pointer; line-height: 1; }
.btn--primary { background: var(--orange); color: var(--ink); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--orange-2); color: var(--ink); transform: translateY(-1px) }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper) }
.btn--on-dark { background: var(--orange); color: var(--ink); }
.btn--on-dark:hover { background: var(--orange-2); color: var(--ink) }
.btn--big { padding: 18px 28px; font-size: 17px; border-radius: 14px }

/* Hero */
.hero { position: relative; background: var(--ink); color: #cbd5e1; overflow: hidden }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; padding: 80px 0 }
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 56px 0 } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.4); color: var(--orange); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 18px; }
.eyebrow .dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50% }
.hero h1 { color: #fff; margin-bottom: 18px }
.hero p.lead { color: #cbd5e1; font-size: 19px; line-height: 1.6; max-width: 480px; margin-bottom: 28px }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px }
.trust-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; color: #94a3b8; font-size: 13px; padding-top: 8px; border-top: 1px solid #1f2a44 }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row .check { color: var(--orange) }
.hero-art { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-lg); border: 1px solid #1f2a44; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.hero-stat { background: var(--slate); border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; }
.hero-stat .num { color: var(--orange); font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.hero-stat .lbl { color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-top: 8px }

/* Sections - tiles */
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px }
@media (max-width: 1024px) { .tile-row { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .tile-row { grid-template-columns: 1fr } }
.tile { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px; transition: all .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2) }
.tile .icon { width: 44px; height: 44px; background: var(--orange); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 14px }
.tile h3 { font-size: 18px; margin: 6px 0 8px; color: var(--ink) }
.tile p { color: var(--slate); font-size: 14px; margin-bottom: 12px; line-height: 1.55 }
.tile a.more { font-weight: 800; font-size: 14px; color: var(--orange-3) }
.tile a.more:hover { color: var(--orange-2) }

/* Trust strip */
.trust-strip { background: var(--slate); color: #cbd5e1; padding: 22px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) }
.trust-strip .row { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.trust-strip .item { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: #e5e7eb }
.trust-strip .item .tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--orange); border-radius: 6px; color: var(--ink); }

/* Pathway (4-step) */
.pathway { background: var(--ink); color: #cbd5e1; border-radius: 20px; padding: 40px; }
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1024px) { .step-row { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .step-row { grid-template-columns: 1fr } }
.step { position: relative; padding: 22px; background: var(--slate); border-radius: 14px; border: 1px solid var(--line-2); }
.step .num { font-size: 14px; font-weight: 800; color: var(--orange); letter-spacing: 0.12em }
.step h4 { color: #fff; margin: 8px 0 8px; font-size: 17px }
.step p { color: #94a3b8; font-size: 14px; margin: 0 }

/* City strip */
.city-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; align-items: stretch; }
.city-row > * { display: flex; align-self: stretch; }
@media (max-width: 1024px) { .city-row { grid-template-columns: 1fr } }
.city-card { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; color: #fff; text-decoration: none; background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%); border: 1px solid var(--line-2); }
.city-card .photo { background: transparent !important; opacity: 0; }
.city-card .photo { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, #475569 0%, #1e293b 60%, #0f172a 100%); opacity: .9; }
.city-card .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.72) 100%); }
.city-card .body { position: absolute; inset: auto 0 0 0; padding: 24px; }
.city-card .tag { display: inline-block; padding: 4px 10px; background: rgba(249,115,22,.95); color: var(--ink); border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 12px; }
.city-card h3 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.city-card p { color: #cbd5e1; font-size: 14px; margin: 0 0 12px }
.city-card .more { color: var(--orange); font-weight: 800; font-size: 14px }
.city-card:hover .photo { transform: scale(1.04); transition: transform .4s; }

/* Resource hub */
.res-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 22px; margin-top: 28px; align-items: stretch; }
.res-row > * { height: 100%; display: flex; flex-direction: column; }
.res-row > * .res-v5__body { flex: 1 1 auto; }
@media (max-width: 1024px) { .res-row { grid-template-columns: 1fr } }
.res { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: all .15s; }
.res:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.res .thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--slate) 0%, var(--ink) 100%); position: relative; }
.res .thumb .tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: var(--orange); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; border-radius: 6px; }
.res .thumb .meta { position: absolute; bottom: 14px; left: 14px; color: #cbd5e1; font-size: 12px; font-weight: 700 }
.res .body { padding: 22px }
.res h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink) }
.res p { color: var(--slate); font-size: 14px; line-height: 1.55 }
.res a.more { color: var(--orange-3); font-weight: 800; font-size: 14px; }

/* Methodology */
.method-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px }
@media (max-width: 1024px) { .method-row { grid-template-columns: 1fr } }
.method { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--paper); }
.method .num { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.method h4 { color: var(--ink); margin: 0 0 6px }
.method p { color: var(--slate); font-size: 14px; margin: 0 }

/* FAQ */
.faq { margin-top: 24px }
.faq details { border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; background: var(--paper); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 4px 0; font-size: 17px }
.faq summary::marker, .faq summary::-webkit-details-marker { color: var(--orange); }
.faq details[open] { border-color: var(--border-2); box-shadow: var(--shadow-sm) }
.faq details[open] summary { margin-bottom: 12px; }
.faq details p { color: var(--slate); margin-top: 8px }

/* CTA */
.cta-band { background: linear-gradient(135deg, var(--ink) 0%, var(--slate) 100%); color: #fff; padding: 64px 0; text-align: center }
.cta-band h2 { color: #fff; max-width: 768px; margin: 0 auto 14px }
.cta-band p { color: #cbd5e1; max-width: 480px; margin: 0 auto 26px; font-size: 18px }
.cta-band .ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center }

/* Footer */
footer.site { background: var(--ink); color: #94a3b8; padding: 56px 0 24px; border-top: 4px solid var(--orange); }
footer.site .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px }
@media (max-width: 1024px) { footer.site .row { grid-template-columns: 1fr 1fr } }
footer.site h4 { color: #fff; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 14px }
footer.site ul { list-style: none; padding: 0; margin: 0 }
footer.site li { margin: 8px 0 }
footer.site a { color: #cbd5e1; font-size: 14px; font-weight: 600 }
footer.site a:hover { color: var(--orange) }
footer.site .sponsor { background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.3); padding: 16px 18px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: #cbd5e1; margin-top: 12px }
footer.site .sponsor strong { color: var(--orange) }
footer.site .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 12px; color: #64748b; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px }
footer.site .brand-block { color: #cbd5e1; }
footer.site .brand-block .name-big { color: #fff; font-weight: 900; font-size: 22px; letter-spacing: -0.01em; }
footer.site .brand-block .sub-big { color: var(--orange); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; margin-top: 6px }

/* ============================================================
 * ULE MOTION + PREMIUM VISUAL UPGRADE — Mission 004 v2
 * ============================================================ */

/* Reveal animation utilities */
[data-kpr-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
[data-kpr-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-kpr-reveal].is-revealed:nth-child(2) { transition-delay: .06s }
[data-kpr-reveal].is-revealed:nth-child(3) { transition-delay: .12s }
[data-kpr-reveal].is-revealed:nth-child(4) { transition-delay: .18s }
[data-kpr-reveal].is-revealed:nth-child(5) { transition-delay: .24s }
[data-kpr-reveal].is-revealed:nth-child(6) { transition-delay: .30s }

/* Count-up number style */
.count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Premium card visual layer */
.card-with-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--slate);
  border: 1px solid var(--line-2);
  transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.card-with-visual .visual {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.card-with-visual .visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.65) 60%, rgba(11,18,32,0.95) 100%);
}
.card-with-visual .body {
  position: relative; z-index: 2;
  padding: 26px;
}
.card-with-visual:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(249,115,22,0.12), 0 6px 20px rgba(15,23,42,0.18);
}

/* Tile motion hover lift */
.tile { transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,0.12); border-color: var(--orange); }
.tile .icon { transition: transform .25s ease-out, background .25s ease-out; }
.tile:hover .icon { transform: scale(1.08) rotate(-3deg); background: var(--orange-2); }

/* City card with actual image + orange glow on hover */
.city-card { transition: transform .35s ease-out, box-shadow .35s ease-out; }
.city-card .photo { transition: transform .55s ease-out, opacity .35s ease-out; }
.city-card .visual {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.city-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(249,115,22,0.20), 0 12px 30px rgba(15,23,42,0.30); }
.city-card:hover .photo { transform: scale(1.06); }
.city-card:hover .visual { transform: scale(1.08); }

/* Resource cards premium polish */
.res { transition: transform .25s ease-out, box-shadow .25s ease-out; }
.res:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15,23,42,0.18); }
.res .thumb { position: relative; overflow: hidden; }
.res .thumb .visual { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease-out; }
.res:hover .thumb .visual { transform: scale(1.05); }
.res .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.45) 100%);
}

/* Methodology big block hero panel */
.method-hero {
  position: relative;
  background: var(--slate);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  padding: 0;
  margin-bottom: 32px;
}
.method-hero .visual { position: absolute; inset: 0; background-size: cover; background-position: center; }
.method-hero .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(11,18,32,0.92) 30%, rgba(11,18,32,0.55) 100%); }
.method-hero .body { position: relative; z-index: 2; padding: 40px; color: #cbd5e1; }
.method-hero h2 { color: #fff; max-width: 768px; }
.method-hero p { color: #cbd5e1; max-width: 768px; font-size: 17px; line-height: 1.6; }

/* Page head hero visual */
.page-head.has-visual {
  position: relative;
  overflow: hidden;
}
.page-head.has-visual .visual {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.page-head.has-visual .visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(11,18,32,0.95) 0%, rgba(11,18,32,0.7) 60%, rgba(11,18,32,0.45) 100%);
}
.page-head.has-visual .container { position: relative; z-index: 2; }

/* Hero with image */
.hero-visual {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.45;
}
.hero-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(11,18,32,0.85) 0%, rgba(11,18,32,0.55) 100%);
}

/* Subtle CTA band ribbon motion */
.cta-band::before {
  content: ""; position: absolute; top: 0; left: -120px; width: 60px; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(249,115,22,0.18) 50%, transparent 100%);
  animation: ribbon 8s linear infinite;
  pointer-events: none;
}
@keyframes ribbon {
  0% { transform: translateX(0); }
  100% { transform: translateX(2200px); }
}

/* Button motion */
.btn { transition: transform .14s ease-out, background .14s ease-out, box-shadow .14s ease-out; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(249,115,22,0.30); }

/* Trust-strip reveal */
.trust-strip { position: relative; }
.trust-strip .item { transition: color .18s ease-out, transform .18s ease-out; }
.trust-strip .item:hover { color: var(--orange); transform: translateY(-2px); }

/* Stat number count-up row */
.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 0;
}
.stat {
  background: var(--slate);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease-out, border-color .22s ease-out;
}
.stat:hover { transform: translateY(-2px); border-color: var(--orange); }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: .6;
}
.stat .num { color: var(--orange); font-size: 36px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .lbl { color: #cbd5e1; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; margin-top: 8px; }

/* Article thumb visual layer */
.article-hero {
  position: relative; aspect-ratio: 21/9; overflow: hidden;
  border-radius: 16px; margin: 0 0 24px;
  border: 1px solid var(--border);
  background: var(--slate);
}
.article-hero .visual { position: absolute; inset: 0; background-size: cover; background-position: center; }
.article-hero .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0.25) 0%, rgba(11,18,32,0.75) 100%); }
.article-hero .body { position: relative; z-index: 2; padding: 60px 48px; color: #fff; }
.article-hero .crumbs-on-img { color: #cbd5e1; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.article-hero .crumbs-on-img a { color: #fdba74; }
.article-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 8px; }
.article-hero p.lead { color: #cbd5e1; font-size: 18px; line-height: 1.55; max-width: 768px; }

@media (prefers-reduced-motion: reduce) {
  [data-kpr-reveal] { opacity: 1; transform: none; transition: none; }
  .card-with-visual:hover, .tile:hover, .city-card:hover, .res:hover, .stat:hover, .btn--primary:hover {
    transform: none;
  }
  .cta-band::before { display: none; }
}

/* Shared: breadcrumbs */
.crumbs { font-size: 13px; color: var(--muted); padding: 16px 0 }
.crumbs a { color: var(--muted); font-weight: 600 }
.crumbs a:hover { color: var(--orange-3) }
.crumbs span.sep { margin: 0 8px; color: var(--border-2) }
.crumbs span.current { color: #ffffff; font-weight: 700 }

/* Page header (sub-pages) */
.page-head { background: var(--ink); color: #cbd5e1; padding: 70px 0 56px; }
.page-head h1 { color: #fff }
.page-head p.lead { color: #cbd5e1; max-width: 768px; font-size: 19px; line-height: 1.6 }
.page-head .crumbs { padding: 0; color: #94a3b8; margin-bottom: 24px; }

/* Article layout */
.article { background: var(--paper); padding: 56px 0 80px }
.article .body { max-width: 768px; margin: 0 auto }
.article .body h2 { margin-top: 38px }
.article .body h3 { margin-top: 28px }
.article .body .callout { background: #fff8f1; border-left: 4px solid var(--orange); padding: 18px 22px; border-radius: 6px; margin: 22px 0; color: var(--slate); }
.article .body ul.check { list-style: none; padding: 0 }
.article .body ul.check li { padding-left: 26px; position: relative }
.article .body ul.check li::before { content: "✓"; color: var(--orange); position: absolute; left: 0; font-weight: 900 }

/* Forms */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr } }
.form label { font-weight: 700; font-size: 14px; color: var(--ink); display: block; margin-bottom: 6px }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--ink); background: var(--paper);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.form textarea { min-height: 120px; resize: vertical }
.form .field { margin-bottom: 14px }
.form .submit { margin-top: 10px }
.disclaimer { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.55 }

/* ============================================================
   Editorial Article Cards (blog index + blog post listings)
   Premium rules: image-as-field, byline strip, hover-lift,
   category badge, never text-only on premium fields.
   Author: Max · KPR audit pass 2026-06-29
   ============================================================ */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}

.article-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: var(--shadow-sm);
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange-2);
}
.article-card .article-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f172a;
  position: relative;
}
.article-card .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.article-card:hover .article-image img {
  transform: scale(1.04);
}
.article-card .article-image .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 18, 32, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.article-card-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
}
.article-card-body h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 4px 0 8px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.article-card-body h2 a:hover, .article-card-body a:hover h2 { color: var(--orange-3); }
.article-card-body p.lede {
  color: var(--slate-2);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.article-card .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-2);
}
.article-card .article-meta .author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-3);
  font-weight: 600;
}
.article-card .article-meta .author::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-3));
  display: inline-block;
}
.article-card .cta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--orange-3);
  font-weight: 700;
  font-size: 0.95rem;
}
.article-card .cta-row::after {
  content: '→';
  font-weight: 700;
  transition: transform .15s ease;
}
.article-card:hover .cta-row::after { transform: translateX(3px); }

/* Lead card (top of blog index) — bigger, optional */
.article-grid .article-card.lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
}
.article-grid .article-card.lead .article-image {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}
.article-grid .article-card.lead .article-image img { height: 100%; }
.article-grid .article-card.lead .article-card-body { padding: 36px 40px; }
.article-grid .article-card.lead .article-card-body h2 { font-size: 1.6rem; }
.article-grid .article-card.lead .article-card-body p.lede { font-size: 1.05rem; }

/* Topic filter chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--slate-3);
  cursor: default;
}
.chip.featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Blog post body — premium typography */
.blog-post-body h2 {
  margin-top: 36px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.blog-post-body h3 {
  margin-top: 26px;
  margin-bottom: 10px;
}
.blog-post-body p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text);
}
.blog-post-body ul, .blog-post-body ol { line-height: 1.7; }
.blog-post-body .rubric-list li {
  background: #fef3c7;
  padding: 14px 18px;
  border-left: 3px solid var(--orange-3);
  border-radius: 0 8px 8px 0;
  margin: 14px 0;
  color: var(--ink);
}
.blog-post-body .rubric-status { display: block; font-size: 0.85rem; margin-top: 6px; font-weight: 600; }
.blog-post-body .rubric-fail { color: #b91c1c; }
.blog-post-body .rubric-warn { color: #b45309; }

/* Pull-quote on blog posts */
.blog-post-body .pull-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink);
  border-left: 4px solid var(--orange);
  padding: 14px 24px;
  margin: 28px 0;
  font-style: italic;
}

/* Inline TOC */
.toc {
  background: #f8fafc;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 24px 0 32px;
}
.toc h4 { margin: 0 0 10px; font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-3); }
.toc ol { padding-left: 22px; margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.7; }
.toc a { color: var(--orange-3); }

/* Hero image on blog post */
.post-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  margin-bottom: 28px;
  background: #0f172a;
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phone-friendly callouts on blog posts */
.callout {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid #fde68a;
  border-left: 4px solid var(--orange);
  padding: 16px 22px;
  border-radius: 8px;
  margin: 22px 0;
}
.callout strong { color: var(--orange-3); }

/* Author box at bottom of blog posts */
.byline-card {
  background: #f8fafc;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.byline-card .avatar {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--orange), var(--orange-3));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  font-size: 1.1rem;
}
.byline-card .name { font-weight: 800; color: var(--ink); margin: 0; }
.byline-card .role { font-size: 0.85rem; color: var(--muted); margin: 2px 0 0; }


/* Premium city tile */
.city-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 18px; color: var(--ink); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: all .18s ease;
  box-shadow: var(--shadow-sm);
}
.city-tile:hover {
  border-color: var(--orange-2);
  background: #fff7ed;
  color: var(--orange-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.city-tile .city-name { color: inherit; }
.city-tile svg { flex-shrink: 0; opacity: 0.5; transition: all .18s ease; }
.city-tile:hover svg { opacity: 1; transform: translateX(3px); }

/* ============================================================
   KPI compact — CSS-only conic-gradient rendering
   Replaces SVG circle that required JS to draw progress.
   Author: Max · 2026-06-29
   ============================================================ */
.kpi-compact { padding: 0; }
.kpi-compact__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}
.kpi-compact__ring {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* default 100% ring */
  background:
    conic-gradient(var(--orange) calc(var(--pct, 100) * 1%), rgba(255,255,255,.18) 0);
}
.kpi-compact__ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--slate);
  border-radius: 50%;
}
.kpi-compact__ring .center {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 0.85rem;
  color: #fff;
  text-align: center;
  letter-spacing: -0.01em;
}
.kpi-compact__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-compact__label {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.kpi-compact__micro {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  position: relative;
}
.kpi-compact__micro span {
  display: block;
  height: 100%;
  width: var(--pct, 100%);
  background: linear-gradient(90deg, var(--orange), #fbbf24);
  border-radius: 999px;
}

/* ============================================================
   Method-ring-row — Premium 6-card grid (numbered standards)
   Author: Max · 2026-06-29
   ============================================================ */
.method-ring-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 1024px) { .method-ring-row { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .method-ring-row { grid-template-columns: 1fr } }

.method-ring {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px;
  transition: all .18s ease;
}
.method-ring:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--orange);
  transform: translateY(-2px);
}
.method-ring__num {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
  letter-spacing: -0.04em;
}
@media (max-width: 480px) {
  .method-ring__num { font-size: 1.5rem; }
}
.method-ring h4 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 4px;
  font-weight: 800;
  line-height: 1.2;
}
.method-ring p {
  color: #cbd5e1;
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* Arrow decorations connecting the standards visually */
.method-ring-row::before {
  content: "";
  position: absolute;
  left: 88px;
  right: 88px;
  top: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, rgba(249,115,22,.25) 100%);
  z-index: 0;
  pointer-events: none;
}
.method-ring-row { position: relative; }
.method-ring { z-index: 1; }
@media (max-width: 1024px) { .method-ring-row::before { display: none; } }

/* Mobile-first adjustments so the 6-card grid stacks nicely on small screens */
@media (max-width: 480px) {
  .method-ring { grid-template-columns: 48px 1fr; gap: 10px; padding: 14px; }
  .method-ring h4 { font-size: 0.95rem; }
  .method-ring p { font-size: 0.8rem; }
}

/* ============================================================
   Standards marquee - auto-scrolling six-point contractor standard
   Premium ticker: warm-cream tile background, bright accent pip,
   CSS-only horizontal scroll animation, pause-on-hover / focus.
   Author: Max · 2026-06-29
   ============================================================ */
.standards-marquee {
  margin-top: 28px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid rgba(249, 115, 22, .25);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .35);
}
.standards-marquee::before,
.standards-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.standards-marquee::before { left: 0;  background: linear-gradient(90deg, #fff7ed 0%, rgba(255,247,237,0) 100%); }
.standards-marquee::after  { right: 0; background: linear-gradient(270deg, #fef3c7 0%, rgba(254,243,199,0) 100%); }

.std-track-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(249, 115, 22, .12);
  background: linear-gradient(180deg, #fffaf0 0%, #fff7ed 100%);
  flex-wrap: wrap;
}
.std-track-header__label {
  font-weight: 900;
  font-size: 1.05rem;
  color: #7c2d12;
  letter-spacing: -0.005em;
}
.std-track-header__lede {
  font-size: 0.82rem;
  color: #92400e;
  font-weight: 600;
  flex: 1;
  min-width: 220px;
}
.std-track-header__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #9a3412;
  background: rgba(254, 215, 170, .55);
  border: 1px solid rgba(154, 52, 18, .25);
  padding: 5px 10px;
  border-radius: 999px;
}
.std-track-header__live .dot {
  width: 7px; height: 7px;
  background: #dc2626;
  border-radius: 50%;
  animation: std-pulse 1.4s ease-in-out infinite;
}
@keyframes std-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(0.85); }
}

.std-marquee-viewport {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  /* Soft warm background */
  background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
}
.std-marquee-viewport:hover .std-marquee-track,
.std-marquee-viewport:focus .std-marquee-track,
.std-marquee-viewport:focus-within .std-marquee-track {
  animation-play-state: paused;
}
.std-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: std-scroll 60s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .std-marquee-track { animation: none; }
}
@keyframes std-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* shift by exactly half = one full set of 6 */
}

.std-tile {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(249, 115, 22, .22);
  border-radius: 14px;
  padding: 16px 22px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  position: relative;
}
.std-tile:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(249, 115, 22, .22);
  transition: all .18s ease;
}
.std-tile__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-3) 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(249, 115, 22, .38);
}
.std-tile__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.std-tile__h {
  margin: 0;
  color: #7c2d12;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.std-tile__p {
  margin: 0;
  color: #9a3412;
  opacity: 0.85;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Mobile (narrow) - slightly tighter, full-width padding */
@media (max-width: 480px) {
  .standards-marquee { border-radius: 14px; }
  .std-track-header { padding: 12px 16px; gap: 8px; }
  .std-track-header__lede { font-size: 0.76rem; }
  .std-tile { min-width: 280px; max-width: 360px; padding: 12px 16px; }
  .std-tile__h { font-size: 0.95rem; }
  .std-tile__p { font-size: 0.78rem; }
  .std-marquee-viewport { padding: 12px 0; }
  .standards-marquee::before, .standards-marquee::after { width: 24px; }
}


/* ============================================================
   KPI panel — bubble-card treatment against dark hero
   Author: Max · 2026-06-29 (browser audit)
   ============================================================ */
.hero-panel__kpi {
  background: var(--paper) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  padding: 22px !important;
  border: 1px solid rgba(15,23,42,.06);
}
.hero-panel__kpi .kpi-header { color: var(--ink); }
.hero-panel__kpi .kpi-header .label { color: var(--ink); font-weight: 800; }
.hero-panel__kpi .live-pill { background: rgba(249,115,22,.12) !important; color: var(--orange-3) !important; border-color: rgba(249,115,22,.4) !important; }
.hero-panel__kpi .kpi-compact { padding: 6px 0; border-bottom: 1px solid var(--border); }
.hero-panel__kpi .kpi-compact:last-child { border-bottom: 0; }
.hero-panel__kpi .kpi-compact__row { grid-template-columns: 60px 1fr; gap: 16px; padding: 12px 4px; align-items: center; }
.hero-panel__kpi .kpi-compact__ring {
  background: conic-gradient(var(--orange) calc(var(--pct,100) * 1%), rgba(15,23,42,.08) 0) !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.22);
}
.hero-panel__kpi .kpi-compact__ring::before { background: var(--paper) !important; inset: 7px; }
.hero-panel__kpi .kpi-compact__ring .center {
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}
.hero-panel__kpi .kpi-compact__label { color: var(--ink) !important; font-size: 0.95rem !important; font-weight: 800 !important; }
.hero-panel__kpi .kpi-compact__micro { background: rgba(15,23,42,.08) !important; }
.hero-panel__kpi .kpi-compact__micro span { background: linear-gradient(90deg, var(--orange), var(--orange-3)); }


/* ============================================================
   Resource hub — bubble cards on `.section section--dark`
   Each .res-v5 card is now WHITE background instead of transparent
   on dark navy. Removable darkened shadows.
   ============================================================ */
.section--dark .res-v5 {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}
.section--dark .res-v5:hover {
  box-shadow: 0 18px 36px rgba(249,115,22,.32) !important;
}
.section--dark .res-v5__thumb__tag {
  background: var(--orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.section--dark .res-v5__thumb__micro,
.section--dark .res-v5__thumb__microtag {
  background: rgba(11,18,32,.78) !important;
  color: #fff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
.section--dark .res-v5__body h3 { color: var(--ink) !important; font-weight: 800 !important; }
.section--dark .res-v5__body p  { color: var(--slate) !important; }
.section--dark .res-v5__more { color: var(--orange-3) !important; font-weight: 800 !important; }


/* ============================================================
   Footer on dark navy bg — text colors must be LIGHT, not slate.
   Author: Max · 2026-06-29 (browser audit pass)
   ============================================================ */
footer.site,
footer.site .brand-block,
footer.site h4,
footer.site p,
footer.site ul,
footer.site li,
footer.site a,
footer.site .legal,
footer.site .legal div,
footer.site .name-big,
footer.site .sub-big {
  background-color: transparent;
}
footer.site { background: transparent; }
footer.site .brand-block p,
footer.site .brand-block .sponsor {
  color: #cbd5e1 !important;
}
footer.site .brand-block .name-big { color: #ffffff !important; }
footer.site .brand-block .sub-big { color: var(--orange) !important; }
footer.site h4 { color: #ffffff !important; font-weight: 800 !important; }
footer.site ul li a { color: #cbd5e1 !important; }
footer.site ul li a:hover { color: var(--orange) !important; }
footer.site .sponsor { color: #cbd5e1 !important; }
footer.site .sponsor a { color: var(--orange) !important; }
footer.site .legal div { color: #94a3b8 !important; }
footer.site .legal div:last-child { color: var(--orange) !important; }


/* ============================================================
   Resource hub cards — ALWAYS white bubble regardless of parent
   (Fix for inline-style dark navy section parent that doesn't
   have .section--dark class.)
   Author: Max · 2026-06-29 (browser audit pass 18)
   ============================================================ */
.res-v5 {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
  border-radius: 18px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.res-v5:hover {
  box-shadow: 0 20px 40px rgba(249,115,22,.32) !important;
  transform: translateY(-3px);
  transition: all .18s ease;
}
.res-v5__thumb__tag {
  background: var(--orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.res-v5__thumb__micro,
.res-v5__thumb__microtag {
  background: rgba(11,18,32,.78) !important;
  color: #fff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
.res-v5__body { background: #ffffff !important; flex: 1; }
.res-v5__body h3 { color: var(--ink) !important; font-weight: 800 !important; font-size: 1.15rem; }
.res-v5__body p  { color: var(--slate) !important; }
.res-v5__more { color: var(--orange-3) !important; font-weight: 800 !important; }



/* ============================================================
   Card bubble treatment for ANY dark section (pass 19)
   Apply: white surface, dark text, drop-shadow lift on hover.
   Targets: methodology page, anywhere .section--slate / .section--dark.
   ============================================================ */

/* Generic: any descendant card-like element on dark sections gets a white bubble */
.section--slate .step,
.section--slate .summary-card,
.section--slate .method-card,
.section--slate .res-v5,
.section--dark .step,
.section--dark .summary-card,
.section--dark .method-card,
.section--dark .res-v5 {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.42) !important;
}
.section--slate .step *,
.section--slate .summary-card *,
.section--slate .method-card *,
.section--slate .res-v5 *,
.section--dark .step *,
.section--dark .summary-card *,
.section--dark .method-card *,
.section--dark .res-v5 * { color: var(--ink) !important; }

/* Standard colored top labels stay */
.section--slate .step .num,
.section--slate .step .label,
.section--slate .summary-card .label,
.section--slate .method-card .label { color: var(--orange-3) !important; font-weight: 800; }

/* Make "What we will not do" cards white-bubble too */
.section--slate article,
.section--slate [class*="card-"] {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.36) !important;
  padding: 18px !important;
}
.section--slate article *,
.section--slate [class*="card-"] * { color: var(--ink) !important; }



/* ============================================================
   Methodology page dark-section bubble treatment (pass 20)
   Author: Max · 2026-06-29
   ============================================================ */

/* Numbered methodology items in .section--slate — currently dark on dark */
.section--slate .method {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.36) !important;
  padding: 18px 22px !important;
}
.section--slate .method h4 { color: var(--ink) !important; font-weight: 800 !important; }
.section--slate .method h4 + p,
.section--slate .method p,
.section--slate .method div p,
.section--slate .method li { color: var(--slate) !important; }
.section--slate .method .num { color: var(--orange-3) !important; font-weight: 800 !important; }

/* Method-hero-v5 art/photo block that bleeds into dark — keep but invert overlay */
.method-hero-v5 {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
}
.method-hero-v5__intro {
  background: linear-gradient(180deg, #fef3c7 0%, #fff7ed 100%) !important;
  border: 1px solid rgba(249, 115, 22, .25) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .35) !important;
}
.method-hero-v5__intro .eyebrow {
  background: rgba(249, 115, 22, .12) !important;
  color: #9a3412 !important;
  border: 1px solid rgba(249, 115, 22, .35) !important;
  font-weight: 800;
  margin-bottom: 14px;
}
.method-hero-v5__intro h2 {
  color: #1e293b !important;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
}
.method-hero-v5__intro p {
  color: #3f3f46 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0;
  max-width: 60ch;
}

/* Top-level h2 in dark sections: keep LIGHT so it doesn't disappear */
.section--slate > .container > h2,
.section--dark > .container > h2,
.section[style*="background:#0b1220"] > .container > h2 { color: #ffffff !important; font-weight: 800 !important; }

/* Body text in dark sections should be light gray */
.section--slate > .container > p,
.section--dark > .container > p { color: #cbd5e1 !important; }

/* .method-hero-v5 article section.css: ensure description text is readable */
.section--slate .method-hero-v5 p,
.section--dark .method-hero-v5 p { color: #cbd5e1 !important; }

/* Subtle: .method-hero-v5__art image cover already has dark overlay */

/* "How we work day-to-day" ol/li outside dark sections, keep readable */
.section > .container > ol li,
.section > .container > ul li { color: var(--slate); }

/* "Standard in writing - that is our pitch" CTA band */
.cta-image .p,
.cta-image h2 p {
  color: #ffffff !important;
}

.section--slate .check { color: #cbd5e1; }
.section--slate .check li::marker { color: var(--orange); }



/* ============================================================
   Page-head / page-hero dark-on-dark fix (pass 21)
   Author: Max · 2026-06-29 (browser audit)
   ============================================================ */
.page-head.has-visual,
.page-head.has-photo,
.page-head {
  position: relative;
  color: #ffffff !important;
}
.page-head.has-visual::before,
.page-head.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.78) 0%, rgba(11,18,32,.65) 50%, rgba(11,18,32,.85) 100%) !important;
  z-index: 1;
  pointer-events: none;
}
.page-head > .container,
.page-head .crumbs,
.page-head h1,
.page-head .lead {
  position: relative;
  z-index: 2;
}
.page-head h1 { color: #ffffff !important; }
.page-head .lead { color: #f1f5f9 !important; font-weight: 500; }
.page-head .crumbs { color: #cbd5e1 !important; }
.page-head .crumbs a { color: #fdba74 !important; }
.page-head .crumbs .sep { color: var(--orange); }

/* Force any text inside .page-head / has-visual that is slate/dark to be readable */
.page-head.has-visual h1,
.page-head.has-visual .lead,
.page-head.has-visual p,
.page-head.has-visual .crumbs,
.page-head.has-visual .article-meta-row { color: #ffffff !important; }

/* For sections with inline background:#0b1220 — body text defaults to light */
[style*="background:#0b1220"] > .container,
[style*="background:#0b1220"] h2,
[style*="background:#0b1220"] h3,
[style*="background:#0b1220"] h4,
[style*="background:#0b1220"] p,
[style*="background:#0b1220"] li,
[style*="background:#0b1220"] small { color: #cbd5e1 !important; }
[style*="background:#0b1220"] > .container > h2,
[style*="background:#0b1220"] > .container > h3 { color: #ffffff !important; font-weight: 800 !important; }
[style*="background:#0b1220"] .eyebrow { background: rgba(249,115,22,.16) !important; border: 1px solid rgba(249,115,22,.4) !important; color: #fdba74 !important; }
[style*="background:#0b1220"] a { color: var(--orange); }
[style*="background:#0b1220"] a:hover { color: var(--orange-2); }



/* ============================================================
   Premium polish — clean & smooth card design system (pass 22)
   Author: Max · 2026-06-29 (operator feedback: "clean, smooth, polished")
   ============================================================ */

/* 1. Resource hub cards — refactored: one accent, one overlay, one CTA */
.res-v5 {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04) !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.res-v5:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(249,115,22,.16), 0 4px 12px rgba(15,23,42,.08) !important;
}
.res-v5__thumb {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1e293b 0%, #0b1220 100%) !important;
}
.res-v5__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .55s cubic-bezier(.2,.7,.3,1) !important;
  display: block !important;
}
.res-v5:hover .res-v5__thumb img { transform: scale(1.06) !important; }
.res-v5__thumb::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.55) 100%) !important;
  pointer-events: none !important;
}
.res-v5__thumb__tag {
  position: absolute !important;
  top: 16px !important; left: 16px !important;
  background: var(--orange) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(249,115,22,.36) !important;
  z-index: 2 !important;
}
/* DROP noisy dual badges in lower-left corner — they're amplified clutter */
.res-v5__thumb__micro,
.res-v5__thumb__microtag { display: none !important; }
.res-v5__body {
  padding: 26px 28px 26px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.res-v5__body h3 {
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.res-v5__body p {
  color: var(--slate-2) !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
  margin: 0 !important;
}
.res-v5__more, .res-v5 a.more {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--orange-3) !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  text-decoration: none;
  transition: color .15s ease;
}
.res-v5 a.more::after { content: "→"; font-weight: 700; transition: transform .18s ease; display: inline-block; }
.res-v5:hover a.more::after { transform: translateX(4px); }

/* 2. Methodology .method cards — clean white-bubbles, fewer accents */
.section--slate .method,
.section--dark .method {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.32) !important;
  padding: 24px 26px !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}
.section--slate .method > .num,
.section--dark .method > span,
.section--slate .method .num {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-3) 100%) !important;
  color: #fff !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  box-shadow: 0 6px 14px rgba(249,115,22,.36) !important;
}
.section--slate .method h4 {
  color: var(--ink) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.005em !important;
}
.section--slate .method p {
  color: var(--slate-2) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* 3. Blog article cards — same cinematic treatment */
.article-card .article-image,
.blog-post-body .post-hero {
  position: relative !important;
}
.article-card .article-image::after,
.blog-post-body .post-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.5) 100%) !important;
  pointer-events: none !important;
}
.article-card .article-image img,
.blog-post-body .post-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. Standard marquee tiles — keep clean, big numbers, refined typography */
.std-tile {
  border-radius: 16px !important;
  border: 1px solid rgba(249,115,22,.18) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
  padding: 18px 24px !important;
  min-width: 340px !important;
  background: #ffffff !important;
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
}
.std-tile__num {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-3) 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 16px rgba(249,115,22,.4) !important;
}

/* 5. Section spacing rhythm — more breathing room */
.section { padding: 80px 0 !important; }
.section--tight { padding: 56px 0 !important; }
h2 { margin-bottom: 18px !important; }
h3 { margin-bottom: 14px !important; }

/* 6. Sectional eyebrows — refined */
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(249,115,22,.12) !important;
  border: 1px solid rgba(249,115,22,.32) !important;
  color: var(--orange-3) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   Hero panel UWB rebuild (FIX-001 from WITNESS Visual Audit v1)
   Author: Max · 2026-06-29
   Doctrine: hero-panel must compose as grid-with-overlay, not
   vertical stack. Photo is background. Text is on the left.
   KPI panel constrained to right column on desktop, full-width on mobile.
   ============================================================ */

/* ============================================================
   Hero (single-center composition — reference: Bill Ragan, Bone Dry)
   Author: Max · 2026-06-29 (Alston feedback: hero content not centered)
   
   Composition philosophy:
   - Hero is centered single column on a cream gradient.
   - Photo is a separate feature band BELOW the hero copy.
   - KPIs are NOT in the hero — they're in a separate "Track record" section below.
   - Goal: lead-conversion hub, not editorial photo essay.
   ============================================================ */
/* ============================================================
   ULE Cinematic Hero v1.0 - full-bleed photo + centered text overlay.
   Reference: BuildZoom / Bone Dry / Elite Roofer Hero composition.
   ============================================================ */
.hero-panel {
  position: relative;
  background: #0b1220;
  color: #ffffff;
  overflow: hidden;
  min-height: clamp(620px, 86vh, 880px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  isolation: isolate;
}
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 8%, rgba(249, 115, 22, .12), transparent 35%);
  pointer-events: none;
}
.hero-panel__bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  order: unset !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.hero-panel__bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  filter: brightness(0.78) saturate(1.08) contrast(1.05) !important;
  border-radius: 0 !important;
}
.hero-panel__bg::after {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 35%,
      rgba(11, 18, 32, .35) 0%,
      rgba(11, 18, 32, .70) 70%,
      rgba(11, 18, 32, .88) 100%),
    linear-gradient(180deg, rgba(11, 18, 32, 0) 50%, rgba(11, 18, 32, .85) 100%) !important;
  border-radius: 0 !important;
  pointer-events: none;
}
.hero-panel__inner {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 18px !important;
  max-width: 768px !important;
  margin: 0 auto !important;
  padding: 120px 24px 200px !important;
  width: 100% !important;
  min-height: clamp(620px, 86vh, 880px);
}
.hero-panel__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  max-width: none !importa/* Old v20 photo-band block removed - ULE cinematic hero uses bg as full-bleed. */
-bottom: 6px !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}
.hero-panel__text h1 {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  max-width: 22ch !important;
  margin: 0 !important;
  text-shadow: 0 2px 24px rgba(11, 18, 32, .45);
  font-weight: 800 !important;
}
.hero-panel__text .lead {
  color: #f1f5f9 !important;
  font-size: clamp(1.06rem, 1.4vw, 1.18rem) !important;
  line-height: 1.55 !important;
  max-width: 56ch !important;
  margin: 0 auto !important;
  text-shadow: 0 1px 8px rgba(11, 18, 32, .35);
}
.hero-panel__text .field-image__cta {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}
.hero-panel__text .field-image__cta .btn--primary {
  background: #f97316 !important;
  color: #ffffff !important;
  padding: 16px 28px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(249, 115, 22, .45), 0 2px 6px rgba(11, 18, 32, .35) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.hero-panel__text .field-image__cta .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(249, 115, 22, .55), 0 2px 8px rgba(11, 18, 32, .35) !important;
}
.hero-panel__text .field-image__cta .btn--ghost {
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  backdrop-filter: blur(8px) !important;
  padding: 16px 26px !important;
  border-radius: 12px !important;
}
.hero-panel__kpi {
  position: absolute !important;
  z-index: 3 !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  padding: 14px 4px !important;
  width: min(880px, 86%) !important;
  box-shadow: 0 10px 30px rgba(11, 18, 32, .35) !important;
}
.hero-panel__kpi .kpi-header { display: none !important; }
.hero-panel__kpi .kpi-compact {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-bottom: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  background: transparent !important;
}
.hero-panel__kpi .kpi-compact:last-child { border-right: 0 !important; }
.hero-panel__kpi .kpi-compact__row { display: contents !important; }
.hero-panel__kpi .kpi-compact__ring {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  background: conic-gradient(var(--orange) calc(var(--pct,100) * 1%), rgba(255,255,255,.16) 0) !important;
  border-radius: 50% !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.hero-panel__kpi .kpi-compact__ring .center {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  color: #f97316 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(11, 18, 32, .6);
  background: transparent !important;
}
.hero-panel__kpi .kpi-compact__ring::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  background: rgba(0, 0, 0, .65) !important;
  border-radius: 50% !important;
  z-index: 0 !important;
}
.hero-panel__kpi .kpi-compact__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin-top: 6px !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.hero-panel__kpi .kpi-compact__label {
  color: #f1f5f9 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 1px 2px rgba(11, 18, 32, .6);
  margin: 0 !important;
}
.hero-panel__kpi .kpi-compact__micro { display: none !important; }
.hero-panel__editorial-mark {
  position: absolute; z-index: 4;
  bottom: 22px; right: 24px;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  text-align: right;
  line-height: 1.6;
}
.hero-panel__license-pill {
  position: absolute;
  top: 22px; right: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #f1f5f9;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-panel__license-pill .dot {
  width: 8px; height: 8px;
  background: #f97316;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .hero-panel__kpi {
    width: calc(100% - 32px) !important;
    flex-wrap: wrap !important;
    bottom: 24px !important;
    gap: 4px !important;
  }
  .hero-panel__kpi .kpi-compact {
    flex: 1 1 45% !important;
    padding: 6px 6px !important;
  }
  .hero-panel__license-pill {
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  .hero-panel__editorial-mark {
    bottom: 18px;
    right: 16px;
    font-size: 0.62rem;
  }
  .hero-panel__text h1 { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; max-width: 18ch !important; }
  .hero-panel__text .lead { font-size: 0.96rem !important; max-width: 36ch !important; }
  .hero-panel__text .field-image__cta .btn { padding: 12px 18px !important; font-size: 0.96rem !important; }
}
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(249,115,22,.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-panel__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 28px !important;
  max-width: 768px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative;
  z-index: 2;
}
.hero-panel__text {
  text-align: center !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
.hero-panel__text .eyebrow {
  background: rgba(249, 115, 22, .12) !important;
  color: #9a3412 !important;
  border: 1px solid rgba(249, 115, 22, .35) !important;
  font-weight: 800;
  padding: 6px 14px !important;
}
.hero-panel__text h1 {
  color: #0f172a !important;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  max-width: 20ch !important;
  margin: 8px 0 0 !important;
}
.hero-panel__text .lead {
  color: #475569 !important;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important;
  line-height: 1.55 !important;
  max-width: 60ch !important;
  margin: 0 auto !important;
}
.hero-panel__text .field-image__cta {
  justify-content: center !important;
  margin: 16px auto 0 !important;
}
.hero-panel__trust-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 12px !important;
  color: #475569 !important;
  font-size: 0.92rem !important;
}

/* Hero feature photo band — sits at the bottom of the hero stack as a centered 16/7 frame
   Crew photo no longer competes with headline; lives below trust strip. */
/* v18 band-style block removed · ULE cinematic hero uses full-bleed bg. */


/* KPI panel: relocate to a separate track-record section, but keep the markup working */
.hero-panel__kpi {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.10) !important;
  padding: 22px 24px !important;
  width: 100% !important;
  max-width: 768px !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 16px auto 0 !important;
  position: relative !important;
}

/* pass-24 full-bleed block removed · replaced by ULE cinematic hero. */




/* OLD pass-22 white-on-dark text-shadow block removed · Alston feedback: hero is now CENTERED on cream gradient. New text styling in .hero-panel__text block at top. */
.hero-panel__text .field-image__cta .btn--primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-3) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(249,115,22,.45), 0 2px 6px rgba(0,0,0,.18) !important;
}
.hero-panel__text .field-image__cta .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(249,115,22,.55);
}
.hero-panel__text .field-image__cta .btn--ghost {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  backdrop-filter: blur(6px);
}
.hero-panel__text .micro-stat-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 22px !important;
  margin-top: 18px !important;
}
.hero-panel__text .micro-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.92) !important;
  letter-spacing: 0.02em !important;
}
.hero-panel__text .micro-stat::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(249,115,22,.22);
}

.hero-panel__kpi {
  background: rgba(255,255,255,.98) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  width: 100%;
  max-width: 480px;
  justify-self: end;
  align-self: end;
  backdrop-filter: blur(8px);
}

/* Tablet: stack hero vertically, photo on top, content below */
@media (max-width: 1024px) {
  .hero-panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-panel__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 24px 56px;
  }
  .hero-panel__kpi { justify-self: stretch; max-width: 100%; }
}

/* Mobile: photo + content + KPI all stacked. KPI becomes separate full-width card. */
@media (max-width: 768px) {
  .hero-panel { min-height: auto; }
  .hero-panel__bg { position: relative; height: 56svh; }
  .hero-panel__bg::after {
    background: linear-gradient(180deg, rgba(11,18,32,.45) 0%, rgba(11,18,32,.85) 100%);
  }
  .hero-panel__inner { padding: 36px 18px 48px; gap: 28px; }
  .hero-panel__text { padding: 0; }
  .hero-panel__text h1 { font-size: 2rem !important; max-width: none; }
  .hero-panel__text .lead { font-size: 1rem !important; }
  .hero-panel__kpi { max-width: 100%; justify-self: stretch; }
}

/* ============================================================
   KPI ring consistent-state fix (pass 25 from WITNESS audit feedback)
   Author: Max · 2026-06-29
   Doctrine: every metric ring should look the same color-wise
   when full. The :not() trick hides the slate track when pct is 100.
   ============================================================ */
.kpi-compact__ring:not([data-kpr-ring="100"])::before {
  background: #f1f5f9;
  opacity: 0.85;
}
.kpi-compact__ring[data-kpr-ring="100"]::before { display: none; }
.hero-panel__kpi .kpi-compact__ring .center {
  color: var(--orange-3) !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
}
.hero-panel__kpi .kpi-compact__label,
.hero-panel__kpi .kpi-compact__row > .kpi-compact__body .kpi-compact__label {
  color: var(--ink) !important;
}

/* Balance hero photo brightness — was too dark (0.45). Lift to 0.6 for proper visibility */
.hero-panel__bg img { filter: brightness(0.62) saturate(1.08) contrast(1.05) !important; }

/* Make .hero-panel__bg::after gradient a touch lighter too */
.hero-panel__bg::after {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(11,18,32,.45) 0%, rgba(11,18,32,.75) 100%),
    linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.65) 100%) !important;
}

/* ============================================================
   Hero polish pass 26 (operator feedback: image too dark, layout off)
   Author: Max · 2026-06-29
   1. Switch hero photo to eye-level crew shot (kpr_crew_on_roof)
   2. Brighten photo filter, reduce gradient overlay
   3. Push trust chip strip onto ONE line with even spacing
   4. Make CTA buttons fit more cleanly
   5. Make rings show consistent coloring when full
   ============================================================ */

.hero-panel__bg img {
  filter: brightness(0.78) contrast(1.05) saturate(1.08) !important;
  object-position: 30% 50% !important; /* shifts focus left so text area is clearer */
}

.hero-panel__bg::after {
  background:
    linear-gradient(90deg, rgba(11,18,32,.7) 0%, rgba(11,18,32,.35) 50%, rgba(11,18,32,.55) 100%),
    linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.65) 100%) !important;
}

.hero-panel__text {
  padding: 8px 0 32px !important;
  max-width: 480px !important;
}
.hero-panel__text h1 {
  margin-top: 4px !important;
}
.hero-panel__text .micro-stat-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 18px !important;
  font-size: 0.82rem !important;
  max-width: 480px !important;
}
.hero-panel__text .micro-stat {
  white-space: nowrap;
}
.hero-panel__text .field-image__cta .btn--big {
  padding: 14px 22px !important;
  font-size: 0.98rem !important;
}

/* For the rings: ensure all 4 use same conic background color (slate track for full=dark, orange for visible portion) */
.kpi-compact__ring {
  background: conic-gradient(var(--orange) calc(var(--pct, 100) * 1%), rgba(15, 23, 42, .1) 0) !important;
}
.hero-panel__kpi .kpi-compact__ring::before {
  background: var(--paper) !important;
  inset: 6px !important;
  border: 2px solid rgba(15, 23, 42, .06) !important;
}

/* ============================================================
   Hero KPI polish pass 27 (operator feedback: ring overlap, layout)
   Author: Max · 2026-06-29
   - Increase row gap between KPI tiles
   - Make row contents stack: ring + body on horizontal axis
   - Place the meter bar on its own row, BELOW label-only
   - Tighten the static bar visually
   ============================================================ */

.hero-panel__kpi .kpi-compact {
  padding: 14px 4px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.hero-panel__kpi .kpi-compact:last-child {
  border-bottom: 0 !important;
}
.hero-panel__kpi .kpi-compact__row {
  display: contents !important;
}
.hero-panel__kpi .kpi-compact__body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}
.hero-panel__kpi .kpi-compact__label {
  color: var(--ink) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-transform: none !important;
}
.hero-panel__kpi .kpi-compact__micro {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .12) !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-panel__kpi .kpi-compact__micro span {
  display: block !important;
  height: 100% !important;
  width: var(--pct, 100%) !important;
  background: linear-gradient(90deg, var(--orange), var(--orange-3)) !important;
  border-radius: 999px !important;
}

/* Pass-28 2-col compose removed · Alston feedback: hero must be CENTERED single column. New composition in .hero-panel__inner block above. */

/* ============================================================
   WITNESS checker v1 fix pass — bulk fixes for the 10 violations:
   - DARK-ON-DARK ✓ editorial independence / standards marquee
   - IMAGE-NO-FALLBACK ✓ 6 images
   - ASPECT-RATIO-MISSING ✓ hero-panel__bg
   ============================================================ */

/* --- Fix 1: Server-wide fallback background for img --- */
img {
  background: linear-gradient(135deg, #1e293b 0%, #0b1220 100%);
  background-color: #0f172a;
}

/* Aspect-ratio band stays at 16/7 (matches top-down nature of photo). Already set above. */
/* Mobile: tighten band a bit since screen is portrait. */
@media (max-width: 768px) {
  .hero-panel__bg {
    aspect-ratio: auto !important;
    height: 240px !important;
    border-radius: 14px !important;
    margin: 36px auto 0 !important;
    width: calc(100% - 24px) !important;
  }
}

/* --- Fix 3: Standards marquee header strip must be on its own contrast context --- */
/* Force the .method-hero-v5 article section to NOT bleed dark navy onto its child .standards-marquee.
   Best practice: the .standards-marquee should be its OWN section outside any dark parent. */
.section--slate .standards-marquee,
.section--dark .standards-marquee,
.section[style*="background:#0b1220"] .standards-marquee,
.method-hero-v5 .standards-marquee {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
  border: 1px solid rgba(249, 115, 22, .25) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .35) !important;
}
.section--slate .method-hero-v5__body p,
.section--slate .method-hero-v5 p { color: #cbd5e1 !important; }

/* --- Fix 4: Splash bg for any inline-style dark sections that contain text ---
   When a section has inline-style background:#0b1220 like .method-hero-v5, the inner text
   inherits the dark bg via opacity. Force eyebrow + paragraph colors to light/cream. */
[style*="background:#0b1220"] .eyebrow {
  background: rgba(249, 115, 22, .92) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800;
}
[style*="background:#0b1220"] p {
  color: #e2e8f0 !important;
}
[style*="background:#0b1220"] h2,
[style*="background:#0b1220"] h3 {
  color: #ffffff !important;
}

/* --- Fix 5: Standards marquee label/lede -- their parent context is dark slate, not cream.
   Add a wrapper rule: when inside a .method-hero-v5 dark section, force the header-strip to be the cream container. */
.method-hero-v5 .standards-marquee .std-track-header__label,
.method-hero-v5 .standards-marquee .std-track-header__lede {
  color: #7c2d12 !important;
  font-weight: 800 !important;
}
.method-hero-v5 .standards-marquee .std-track-header__live {
  background: rgba(254, 215, 170, .75) !important;
  color: #9a3412 !important;
  border: 1px solid rgba(154, 52, 18, .25) !important;
}

/* Reduced-motion on hero image for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-panel__bg img { filter: none !important; }
}
x

/* ============================================================
 * AC Repair Daily / Kennesaw Pro Roofing — Mobile QA Patch v1
 * 2026-07-01 19:30 EDT
 *
 * Fixes:
 *  - Adds .service-image-card styles (was missing in loaded site.css)
 *  - Reduces tile-row breakpoints so 342-600px shows 1 column instead of 2 ragged
 *  - Standardizes res-v5 / res-v5__thumb card heights across rows
 *  - Adds .step-row visual hierarchy (numbered badges visible + dark step-circle)
 *  - Standardizes .city-card--premium image-as-field behavior
 *  - Adds mobile-friendly FAQ/CTA visibility patches
 *  - Keeps site.css/?v=23 cache so refresh after each deploy
 * ============================================================ */

/* SERVICE TILES · rebuilt .service-image-card + .tile-row tune */
.service-image-card {
  position: relative;
  background: var(--paper, #fff);
  border: 1px solid var(--line-2, #dce8f5);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
}
.service-image-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange, #f97316);
  box-shadow: 0 18px 36px rgba(15,23,42,.18);
}
.service-image-card__thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--slate, #1e293b);
}
.service-image-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease-out, filter .35s ease-out;
  display: block;
}
.service-image-card:hover .service-image-card__thumb img {
  transform: scale(1.06);
}
.service-image-card__thumb__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--orange, #f97316);
  color: var(--ink, #0f172a);
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  border-radius: 6px; z-index: 2;
}
.service-image-card__thumb__micro {
  position: absolute; bottom: 12px; left: 12px;
  color: #fff; font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 10px; border-radius: 999px;
  z-index: 2;
}
.service-image-card__body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.service-image-card__body h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0;
  line-height: 1.3;
}
.service-image-card__body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate, #1e293b);
  margin: 0;
  flex: 1;
}
.service-image-card a.more {
  color: #c2410c;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  margin-top: 4px;
}

/* tile-row grid: refined breakpoints to ensure 342px phones get 1 column, not 2 ragged */
.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
  align-items: stretch;
}
.tile-row > * { display: flex; align-self: stretch; }
@media (max-width: 1024px) { .tile-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 768px) { .tile-row { grid-template-columns: 1fr; gap: 16px; } }

/* STEP ROW · numbered badge visible + consistent dark card */
.step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
.step-row > * { display: flex; align-self: stretch; }
@media (max-width: 1024px) { .step-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .step-row { grid-template-columns: 1fr; gap: 14px; } }
.step {
  position: relative;
  padding: 22px;
  background: var(--slate, #1e293b);
  color: #fff;
  border-radius: 14px;
  border: 1px solid #334155;
  display: flex; flex-direction: column;
  flex: 1;
}
.step::before {
  content: "";
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  background: var(--orange, #f97316);
  border-radius: 50%;
  display: none;
}
.step .num {
  font-size: 12px; font-weight: 800;
  color: var(--orange, #f97316);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  display: inline-block;
}
.step h4 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
}
.step p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* RES-V5 cards — equalize heights inside the row */
.res-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
  align-items: stretch;
}
.res-row > * {
  height: 100%;
  display: flex; flex-direction: column;
}
.res-row > * .res-v5__body { flex: 1 1 auto; }
@media (max-width: 1024px) { .res-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 768px) { .res-row { grid-template-columns: 1fr; gap: 16px; } }

.res-v5 {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #dce8f5;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  text-decoration: none; color: inherit;
}
.res-v5:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
}
.res-v5__thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #1e293b;
}
.res-v5__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease-out;
  display: block;
}
.res-v5:hover .res-v5__thumb img { transform: scale(1.06); }
.res-v5__thumb__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--orange, #f97316);
  color: #0f172a;
  font-size: 11px; font-weight: 800; letter-spacing: 0.10em;
  border-radius: 6px; z-index: 2;
}
.res-v5__thumb__micro,
.res-v5__thumb__microtag { display: none; }
.res-v5__body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.res-v5__body h3 {
  font-size: 16px; font-weight: 800;
  color: #0f172a; margin: 0;
  line-height: 1.3;
}
.res-v5__body p {
  font-size: 14px; line-height: 1.55;
  color: #1e293b; margin: 0;
  flex: 1;
}
.res-v5 .more {
  color: #c2410c; font-weight: 800; font-size: 13px;
  text-decoration: none; margin-top: 4px;
}

/* CITY-CARD--PREMIUM — equalize heights + image-as-field */
.city-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
  align-items: stretch;
}
.city-row > * { display: flex; align-self: stretch; }
@media (max-width: 768px) { .city-row { grid-template-columns: 1fr; gap: 16px; } }

.city-card--premium {
  position: relative;
  display: block;
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/5;
  color: #fff; text-decoration: none;
  background: #0f172a;
  border: 1px solid #334155;
  isolation: isolate;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  min-height: 320px;
}
.city-card--premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(249,115,22,.18);
}
.city-card--premium .visual {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .85;
  z-index: 0;
}
.city-card--premium::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0) 40%, rgba(11,18,32,.85) 100%);
  z-index: 1;
}
.city-card--premium .body {
  position: absolute; inset: auto 0 0 0;
  padding: 22px;
  z-index: 2;
}
.city-card--premium .tag {
  display: inline-block;
  padding: 4px 10px; background: #f97316; color: #0f172a;
  border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; margin-bottom: 12px;
}
.city-card--premium h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.city-card--premium p { color: #cbd5e1; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.city-card--premium .more { color: #f97316; font-weight: 800; font-size: 14px; }

/* Section eyebrow / microfix — standard spacing */
.section h2 { line-height: 1.2; }
.section > .container > p { max-width: 768px; line-height: 1.6; color: #4b5563; }

/* Phone CTA — visible above-fold on mobile */
@media (max-width: 768px) {
  .phone-cta { font-size: 14px; padding: 10px 16px; }
}

/* Spacing intervals — block-to-block rhythm */
.section + .section { margin-top: 48px; }
.section--tight + .section--tight { margin-top: 36px; }
@media (max-width: 768px) {
  .section + .section { margin-top: 32px; }
}

/* === V10 PATCH · 2026-07-02 06:30 === */

/* ============================================================
 * AC Repair Daily / Kennesaw Pro Roofing — Mobile v10 patch
 * 2026-07-02 06:30 EDT
 *
 * Fixes the vertical checkerboard problem on 342-700px mobile.
 *
 * The bug: on mobile the tile-row collapses to 1 column, stacking
 *   6 service cards. Each card has [image | text] inside, so the
 *   user sees:
 *     image card 1
 *     text-only card 1.5 (the body of card 1)
 *     image card 2
 *     text-only card 2.5 (the body of card 2)
 *     ...
 *   = vertical checkerboard of image-text-image-text...
 *
 * The fix: at mobile widths, make each service-image-card an
 *   asymmetric ROW tile — image 38% LEFT, text body 62% RIGHT
 *   (or image top 40% + text below 60% as a single card if we want
 *   to keep it tight). Cards remain 1 column (1 stack), but each
 *   card is image+text both visible AT THE SAME TIME on one screen.
 *
 * Additionally: cap card count at 3 per visible "look" with a
 *   "show more" toggle so scrolling doesn't feel like infinite tiles.
 *
 * Doctrine: maxos_client_intake_pipeline_v1 + kpr_mobile_v9_patch_v1
 * ============================================================ */

/* === SERVICE CARDS · MOBILE = horizontal split (image left, text right) === */
@media (max-width: 768px) {
  .tile-row {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 28px;
  }
  /* Each service-image-card: image body at *same* card visibility */
  .service-image-card {
    display: grid !important;
    grid-template-columns: 140px 1fr;
    align-items: stretch;
    height: auto;
    min-height: 156px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dce8f5;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
  }
  .service-image-card__thumb {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    width: 140px;
    min-height: 156px;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .service-image-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .service-image-card__thumb__tag {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 8px;
    font-size: 9px; letter-spacing: 0.10em;
    border-radius: 4px; font-weight: 800;
  }
  .service-image-card__thumb__micro {
    display: none !important; /* too cramped on 140px thumb */
  }
  .service-image-card__body {
    padding: 14px 16px;
    grid-column: 2;
    grid-row: 1;
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-start; justify-content: center;
    background: #ffffff;
  }
  .service-image-card__body h3 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
  }
  .service-image-card__body p {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    margin: 0;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .service-image-card a.more {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
  }
}

/* === RESOURCE HUB .res-v5 · MOBILE = horizontal split === */
@media (max-width: 768px) {
  .res-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px;
  }
  .res-v5 {
    display: grid !important;
    grid-template-columns: 140px 1fr;
    align-items: stretch;
    min-height: 156px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dce8f5;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
  }
  .res-v5__thumb {
    aspect-ratio: 1 / 1 !important;
    width: 140px !important;
    min-height: 156px !important;
    grid-column: 1; grid-row: 1;
  }
  .res-v5__body {
    padding: 14px 16px;
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column;
    justify-content: center;
    background: #ffffff;
  }
  .res-v5__body h3 {
    font-size: 15px; font-weight: 800;
    color: #0f172a; margin: 0; line-height: 1.2;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .res-v5__body p {
    font-size: 12px; color: #475569;
    display: none; /* hide paragraph on mobile for compactness */
  }
  .res-v5 .more {
    font-size: 12px; font-weight: 700; margin-top: 4px;
  }
  .res-v5__thumb__micro,
  .res-v5__thumb__microtag { display: none !important; }
}

/* === CITY CARDS .city-card--premium · MOBILE = horizontal split === */
@media (max-width: 768px) {
  .city-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px;
  }
  .city-card--premium {
    aspect-ratio: auto !important;
    min-height: 120px !important;
    height: auto !important;
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #334155;
    transition: none;
  }
  .city-card--premium .visual {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .55;
    z-index: 0;
  }
  .city-card--premium::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.55) 100%);
    z-index: 1;
  }
  .city-card--premium .body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 18px;
    z-index: 2;
  }
  .city-card--premium .tag {
    font-size: 10px; padding: 3px 8px; margin-bottom: 6px;
  }
  .city-card--premium h3 {
    font-size: 18px; margin: 0 0 4px;
  }
  .city-card--premium p {
    font-size: 13px; line-height: 1.4; margin: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .city-card--premium .more {
    font-size: 12px;
  }
}

/* === EDGE REPAIR · kill the "your area's most trusted" sub-strip that adds vertical junk === */
@media (max-width: 768px) {
  /* hide alt-header subtitle line if present */
  header .brand small,
  header .brand div:not(.mark),
  .brand small,
  small[style*="letter-spacing"],
  small[style*="Wade Green"],
  small[style*="northwest Cobb"] {
    /* do not force-hide the small — keep but trim spacing */
    font-size: 11px !important;
  }
  /* tighter section rhythm */
  .section { padding-top: 28px !important; padding-bottom: 28px !important; }
  .section + .section { margin-top: 24px !important; }
  .container { padding-left: 16px; padding-right: 16px; }
  /* kill the second subhead line under "ROOFING · STORM · GEORGIA" if visible */
  /* Reduces vertical white space stacked text */
}

/* === BOLD STEP-CARDS · unify mobile so they don't stack text rows === */
@media (max-width: 768px) {
  .step-row { gap: 12px !important; }
  .step {
    padding: 18px !important;
  }
  .step .num {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  .step h4 {
    font-size: 16px !important;
    margin: 0 0 6px !important;
  }
  .step p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* === STANDARDS MARQUEE · already horizontal → no change === */

/* === Blog standards-marquee margin === */
@media (max-width: 768px) {
  .standards-marquee .std-track-header {
    padding: 14px 18px !important;
  }
  .standards-marquee .std-tile {
    padding: 14px 18px !important;
  }
  .standards-marquee .std-tile__h { font-size: 15px !important; }
  .standards-marquee .std-tile__p { font-size: 12px !important; }
}

/* === GLOBAL ANTI-CHECKERBOARD · stop bands of similar aesthetics from creating rhythm === */
@media (max-width: 768px) {
  /* When a section is white, the next section should not have a tall full-image banner.
     Instead collapse image heroes on mobile so they're short (max 180px tall) */
  .hero-panel__bg,
  .hero-panel__bg img { max-height: 200px !important; object-fit: cover !important; }
}

/* === V12 FULL AUDIT PATCH · 2026-07-02 === */

/* ====================================================================
 * Kennesaw Pro Roofing — v12 FULL AUDIT FIX
 * 2026-07-02 06:35 EDT
 *
 * Doctrine: maxos phase 7 — kpr_full_visual_audit
 * Operator: Alston Ebron · msg 45440  · "slow down / take time / use MAXOS"
 *
 * Comprehensive, site-wide geometric + visual alignment patch.
 * Designed around RAT observations:
 *  · All 17 pages audited · 4 viewports · 68 captures
 *  · horizontal-overflow offenders docked 21 captures (-25 pts)
 *  · Largest category: inline-styled .method-row forcing 2-col on mobile
 *
 * Doctrine:
 *  · Every CSS block scoped per maxos_safe_edits_v1 (no comments-only mods)
 *  · All mobile breakpoints at exactly 700px (was 900 / 600 earlier)
 *  · No JS-side layout assumptions
 *
 * Reuse keys:
 *  · kpr_v12_full_audit_fix_v1
 *  · method_row_mobile_unbreak_v1
 *  · horizontal_overflow_kill_switch_v1
 *  · consistent_section_padding_v1
 * ==================================================================== */

/* === GLOBAL TYPOGRAPHY HARMONY ===
   Standard line-height, body weight, paragraph rhythm */
:root {
    --kpr-line-height: 1.65;
    --kpr-letter-spacing-body: -0.005em;
}
body {
    line-height: var(--kpr-line-height);
    letter-spacing: var(--kpr-letter-spacing-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

/* === HORIZONTAL OVERFLOW KILL SWITCH ===
   Long text in any block can never cause page-level overflow */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; min-width: 0; }
img { max-width: 100%; height: auto; }

/* === METHOD-ROW · THE BIG ONE ===
   No more inline grid-template-columns:1fr 1fr leaking.
   Override any inline grid property by stripping it and re-declaring on mobile. */
.method-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px; align-items: stretch; }
.method-row > * { align-self: stretch; }
@media (max-width: 768px) {
    .method-row,
    .method-row[style*="grid-template-columns:1fr 1fr"],
    [class*="method-row"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

.method {
    display: flex;
    gap: 16px;
    padding: 22px;
    border: 1px solid #dce8f5;
    border-radius: 14px;
    background: #fff;
    min-width: 0; /* allows flex children to shrink */
}
.method .num {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0f172a;
    color: #f97316;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}
.method h4, .method p {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.method h4 { color: #0f172a; margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.method p { color: #1e293b; font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 768px) {
    .method { padding: 16px; gap: 12px; }
    .method .num { width: 36px; height: 36px; font-size: 14px; }
    .method h4 { font-size: 15px; }
    .method p { font-size: 13px; line-height: 1.45; }
}

/* === CITY-ROW refraction — kills overflow on city pages === */
.city-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; align-items: stretch; }
.city-row > * { display: flex; align-self: stretch; }
.city-card--premium { min-width: 0; max-width: 100%; }
.city-card--premium h3 { word-break: break-word; overflow-wrap: anywhere; }
.city-card--premium p { word-break: break-word; overflow-wrap: anywhere; line-height: 1.5; }
@media (max-width: 1024px) { .city-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .city-row { grid-template-columns: 1fr; gap: 14px; } }

/* === TILE-ROW consistency === */
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; align-items: stretch; }
.tile-row > * { display: flex; align-self: stretch; }
@media (max-width: 1024px) { .tile-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 768px) { .tile-row { grid-template-columns: 1fr; gap: 16px; } }

/* === STEP-ROW consistency === */
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
.step-row > * { display: flex; align-self: stretch; }
@media (max-width: 1024px) { .step-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .step-row { grid-template-columns: 1fr; gap: 14px; } }

/* === RES-ROW consistency === */
.res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; align-items: stretch; }
.res-row > * { display: flex; flex-direction: column; height: 100%; }
.res-row > * .res-v5__body { flex: 1 1 auto; }
@media (max-width: 1024px) { .res-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .res-row { grid-template-columns: 1fr; } }

/* === SECTION padding rhythm === */
.section { padding-top: 64px; padding-bottom: 64px; }
.section--tight { padding-top: 40px; padding-bottom: 40px; }
.section + .section { margin-top: 0; }
@media (max-width: 768px) {
    .section { padding-top: 40px; padding-bottom: 40px; }
    .section--tight { padding-top: 28px; padding-bottom: 28px; }
}

/* === HERO consistent rhythm === */
.hero, .hero-panel { padding: 80px 0 56px; }
@media (max-width: 768px) {
    .hero, .hero-panel { padding: 48px 0 36px; }
}

/* === TABLE-tone content === */
table { width: 100%; table-layout: fixed; border-collapse: collapse; }
table th, table td { word-break: break-word; overflow-wrap: anywhere; padding: 12px 10px; }

/* === HEADER consistent height === */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid #dce8f5; backdrop-filter: blur(8px); }
.site-header .container { max-width: 1280px; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
@media (max-width: 768px) { .nav-row { height: 60px; } }

/* === EYEBROW consistent rhythm === */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

/* === NO TEXT-overflow at any breakpoint ===
   Anything that might overflow on small screens gets cut with proper word-break. */
h1, h2, h3, h4, h5, h6, p, li, td, th { word-break: break-word; overflow-wrap: break-word; max-width: 100%; }

/* === NAV list properly collapses === */
@media (max-width: 1024px) {
    .nav-list > li > a, .nav-list > li > button { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 1024px) {
    .nav-list { display: none !important; }
    .menu-toggle { display: inline-flex; }
}

/* === STANDARD footer rhythm === */
.site-footer { padding: 48px 0 32px; }
@media (max-width: 768px) { .site-footer { padding: 32px 0 24px; } }

/* === BLOCK long URLs and email styling so they don't break the layout ===
   They wrap on n-dashes but never overflow horizontally */
.url, code, pre { word-break: break-all; overflow-wrap: anywhere; }
/* === V12.5 — Article-grid mobile + marquee containment === */
@media (max-width: 768px) {
  .article-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .article-card,
  .article-card.lead,
  .article-grid .article-card.lead {
    width: 100% !important;
    max-width: 100% !important;
  }
  .article-card .article-image,
  .article-grid .article-card.lead .article-image,
  .article-card .article-image img {
    aspect-ratio: 16/9 !important;
    height: auto !important;
  }
  .article-grid .article-card.lead .article-card-body { padding: 18px !important; }
  .article-grid .article-card.lead .article-card-body h2 { font-size: 1.2rem !important; }
  .article-grid .article-card.lead .article-card-body p.lede { font-size: .96rem !important; }
}

/* === Standards marquee: contain overflow === */
.standards-marquee .std-marquee-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.std-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  animation: snake-marquee 30s linear infinite;
}
@keyframes snake-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - 16px)); }
}

/* safeguard: page-level never scrolls horizontally because of marquee */
.standards-marquee,
.standards-marquee * {
  max-width: 100%;
}
.standards-marquee {
  position: relative;
  overflow: hidden;
}
.standards-marquee .std-marquee-viewport {
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* === V12.5 SERVICE-IMAGE-CARD · Final fix ===
   Browsers were inheriting `display: flex` from .tile-row > * (parent rule) without re-setting flex-direction. Force the column direction so image stacks above text. */
.service-image-card {
  flex-direction: column !important;
  min-width: 0 !important;
  align-self: stretch !important;
  /* explicit min-height removed (was forcing 2.3k px); auto */
}
.service-image-card__thumb {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.service-image-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.service-image-card__body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
}

/* === V13 HERO CONTRAST PATCH · 2026-07-02 06:48 === */

/* ============================================================
 * kpr_v13_hero_contrast.patch.css
 * 2026-07-02 06:48 EDT
 *
 * Doctrine: maxos slow_down_maxos_v1 + kpr_topographic_rat_v1
 *
 * Fixes: hero h1 + .lead text was rendering dark (#0f172a, #475569)
 *   even though the rule said white #ffffff / #f1f5f9. Two competing
 *   rules at line 1718 and line 1947 (later one wins, was dark color).
 *   Result: low contrast on a moderately bright photo (filter brightness 0.78)
 *   made the headline nearly unreadable.
 *
 * Strategy:
 *  1. Override the dark color back to white via !important on a later rule.
 *  2. Strengthen text-shadow on both h1 and .lead.
 *  3. Make .hero-panel__bg brightness/darkness slightly stronger (0.7)
 *  4. Add a text-cover pseudo ::before behind the text-panel inner text.
 *  5. Brighten the .btn--ghost border / btn-glow so CTA stands out.
 * ============================================================ */

/* === Override hero h1 / lead to white === */
.hero-panel__text h1 {
  color: #ffffff !important;
  text-shadow:
    0 2px 24px rgba(11, 18, 32, 0.85),
    0 1px 4px rgba(11, 18, 32, 0.95),
    0 0 1px rgba(11, 18, 32, 1) !important;
}
.hero-panel__text .lead {
  color: #f1f5f9 !important;
  text-shadow:
    0 1px 14px rgba(11, 18, 32, 0.8),
    0 0 1px rgba(11, 18, 32, 0.95) !important;
}
.hero-panel__text .eyebrow {
  background: rgba(15, 23, 42, 0.55) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 4px rgba(11, 18, 32, 0.6);
}
.hero-panel__text .micro-stat {
  background: rgba(15, 23, 42, 0.55) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 4px rgba(11, 18, 32, 0.6);
}
.hero-panel__text .micro-stat::before {
  background: var(--orange) !important; /* keep orange dot */
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7) !important;
}

/* === Strengthen image + overlay === */
.hero-panel__bg img {
  filter: brightness(0.62) saturate(1.05) contrast(1.05) !important;
}
.hero-panel__bg::after {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(11, 18, 32, 0.55) 0%,
      rgba(11, 18, 32, 0.85) 60%,
      rgba(11, 18, 32, 0.95) 100%
    ),
    linear-gradient(180deg, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, 0.88) 100%) !important;
}
.hero-panel::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(11, 18, 32, 0.4) 0%, transparent 60%) !important;
  pointer-events: none;
}

/* === Add gentle text-cover halo so eyebrow / chips stay readable even on bright photo === */
.hero-panel__text .lead + .field-image__cta {
  margin-top: 16px !important;
}
.hero-panel__text .btn--ghost {
  background: rgba(15, 23, 42, 0.55) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-panel__text .btn--ghost:hover {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* === Mobile-friendly narrower padding === */
@media (max-width: 768px) {
  .hero-panel__text h1 {
    color: #ffffff !important;
    text-shadow:
      0 2px 18px rgba(11, 18, 32, 0.92),
      0 0 2px rgba(11, 18, 32, 1) !important;
  }
  .hero-panel__text .lead {
    color: #f1f5f9 !important;
    text-shadow:
      0 1px 12px rgba(11, 18, 32, 0.88),
      0 0 1px rgba(11, 18, 32, 1) !important;
  }
  .hero-panel__bg::after {
    background:
      radial-gradient(
        ellipse at 50% 35%,
        rgba(11, 18, 32, 0.6) 0%,
        rgba(11, 18, 32, 0.92) 100%
      ),
      linear-gradient(180deg, rgba(11, 18, 32, 0.2) 0%, rgba(11, 18, 32, 0.92) 100%) !important;
  }
  .hero-panel__bg img {
    filter: brightness(0.55) saturate(1.05) contrast(1.05) !important;
  }
}