/* ==========================================================================
   MCP Electrical Services — Design System
   Navy #1B3D6E / Orange #F26A21 / signature "circuit-break" divider motif
   Display+body: Montserrat (brand font). Technical/data face: JetBrains Mono
   ========================================================================== */

:root{
  --navy:        #1B3D6E;
  --navy-dark:   #12294D;
  --navy-tint:   #EEF2F8;
  --orange:      #F26A21;
  --orange-dark: #DA5C15;
  --orange-tint: #FDEEE3;
  --ink:         #1A2230;
  --muted:       #5B6577;
  --line:        #E3E7EE;
  --paper:       #FFFFFF;
  --cream:       #F7F8FA;
  --good:        #2E7D4F;
  --good-tint:   #E9F6EE;

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --container: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(18,30,60,.05), 0 8px 24px -12px rgba(18,30,60,.14);
  --shadow-lg: 0 20px 60px -20px rgba(18,30,60,.35);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--navy); line-height:1.15; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family: inherit; }

:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (max-width: 640px){ .container{ padding: 0 28px; } }
.section{ padding: 76px 0; }
.section-tight{ padding: 48px 0; }
@media (max-width:780px){
  .section{ padding: 52px 0; }
  .section-tight{ padding: 36px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background: var(--orange); display:inline-block; }

.h1{ font-size: clamp(34px, 5vw, 54px); font-weight: 800; }
.h2{ font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.h3{ font-size: 21px; font-weight: 700; }
.lede{ font-size: 18px; color: var(--muted); max-width: 620px; }
.body-copy{ color: var(--muted); font-size: 15.5px; }
.body-copy p + p{ margin-top: 12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: normal; max-width: 100%; text-align: center; line-height: 1.3;
}
.btn-primary{ background: var(--orange); color:#fff; box-shadow: 0 10px 24px -10px rgba(242,106,33,.55); }
.btn-primary:hover{ background: var(--orange-dark); transform: translateY(-1px); }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--navy-dark); transform: translateY(-1px); }
.btn-outline{ background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-outline:hover{ border-color: var(--navy); }
.btn-ghost-light{ background: rgba(255,255,255,.12); color:#fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background: rgba(255,255,255,.2); }
.btn-lg{ padding: 17px 34px; font-size: 16.5px; }
.btn-sm{ padding: 10px 18px; font-size: 13.5px; }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- Signature element: circuit-break divider ---------- */
.circuit-divider{
  width:100%; height:20px; margin: 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.circuit-divider svg{ width:100%; max-width:340px; height:20px; display:block; }
.circuit-divider.on-dark line, .circuit-divider.on-dark path{ stroke: rgba(255,255,255,.35); }
.circuit-divider path{ fill: var(--orange); }
.circuit-divider line{ stroke: var(--line); stroke-width:1.5; }

/* ---------- Header ---------- */
.topbar{
  background: var(--navy-dark); color:#CBD8ED; font-size: 12px;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:7px; padding-bottom:7px; gap:12px; }
.topbar a{ color:#fff; font-weight:600; }
.topbar .tb-left{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.topbar .tb-item{ display:flex; align-items:center; gap:6px; }
.topbar .tb-item svg{ width:12px; height:12px; opacity:.85; flex-shrink:0; }
@media (max-width: 680px){ .topbar .tb-hide-mobile{ display:none; } }
@media (max-width: 460px){
  .topbar{ font-size: 11px; }
  .topbar .container{ padding-top:6px; padding-bottom:6px; }
  .topbar .tb-loc-mobile{ display:none; }
}

header.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 20px; }
.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand svg{ width:32px; height:32px; }
.brand .word{ font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--navy); letter-spacing:.02em; line-height:1.1; }
.brand .word span{ display:block; font-size:8.5px; font-weight:600; letter-spacing:.16em; color:var(--orange); text-transform:uppercase; margin-top:1px; }
@media (max-width: 400px){
  .brand svg{ width:28px; height:28px; }
  .brand .word{ font-size:14px; }
  .brand .word span{ font-size:8px; }
}

nav.main-nav{ display:flex; align-items:center; gap:6px; }
nav.main-nav > ul{ display:flex; align-items:center; gap:2px; }
nav.main-nav a.nav-link{
  display:flex; align-items:center; gap:4px; padding: 10px 14px; border-radius: 8px;
  font-size: 14.5px; font-weight:600; color: var(--ink);
}
nav.main-nav a.nav-link:hover, nav.main-nav a.nav-link.active{ color: var(--navy); background: var(--navy-tint); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top: calc(100% + 8px); left:0; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 300px; padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(6px); transition: all .15s ease; z-index: 50;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:8px; }
.dropdown a:hover{ background: var(--navy-tint); }
.dropdown a b{ font-size:14px; color:var(--navy); font-weight:700; }
.dropdown a small{ font-size:12px; color:var(--muted); }

.nav-cta{ display:flex; align-items:center; gap:8px; }
.call-pill{
  display:flex; align-items:center; gap:8px; background: var(--navy); color:#fff;
  padding: 10px 16px; border-radius: 999px; font-weight:700; font-size:14px;
  font-family: var(--font-mono);
}
.call-pill svg{ width:15px; height:15px; }

.hamburger{ display:none; background:none; border:none; padding:6px; cursor:pointer; }
.hamburger svg{ width:24px; height:24px; color:var(--navy); }

@media (max-width: 980px){
  nav.main-nav{ display:none; }
  .nav-cta .call-pill span.long{ display:none; }
  .nav-cta .nav-quote-btn{ display:none; }
  .hamburger{ display:block; }
}
@media (max-width: 420px){
  .nav-cta{ gap:6px; }
  .nav-cta .call-pill{ padding: 9px 11px; }
}

/* Mobile full-screen menu */
.mobile-menu{
  position: fixed; inset:0; background:#fff; z-index: 900; padding: 20px; overflow-y:auto;
  transform: translateX(100%); transition: transform .25s ease;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu .mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; }
.mobile-menu a.mm-link{ display:block; padding: 16px 4px; font-size:19px; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); }
.mobile-menu .mm-sub a{ font-size:15.5px; font-weight:600; color:var(--ink); padding:12px 4px 12px 16px; border-bottom:1px solid var(--line); display:block; }
.mobile-menu .mm-actions{ margin-top: 24px; display:flex; flex-direction:column; gap:12px; }

/* Sticky mobile call/quote bar — full-width, edge-to-edge, no gaps */
.mobile-stickybar{
  position: fixed; bottom:0; left:0; right:0; z-index: 800; display:none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px rgba(18,30,60,.15);
}
.mobile-stickybar .row{ display:flex; }
.mobile-stickybar .btn{
  flex:1; padding: 18px 10px; font-size:15px; border-radius:0; box-shadow:none;
}
.mobile-stickybar .btn-primary{ background: var(--orange); }
.mobile-stickybar .btn-primary:hover{ background: var(--orange); }
.mobile-stickybar .btn-navy{ background: var(--navy); }
@media (max-width: 780px){ .mobile-stickybar{ display:block; } body{ padding-bottom: 62px; } }

/* ---------- Hero ---------- */
.hero{ position:relative; background: var(--navy); color:#fff; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center; padding: 60px 0 70px; }
@media (max-width: 940px){ .hero-grid{ grid-template-columns:1fr; padding: 36px 0 40px; gap:36px; } }
.hero h1{ color:#fff; }
.hero h1 .hl{ color: var(--orange); }
.hero .lede{ color:#C9D5E6; margin-top:16px; }
.hero-checklist{ display:flex; flex-direction:column; gap:11px; margin-top:26px; }
.hero-checklist li{ display:flex; align-items:center; gap:11px; font-size:16px; color:#fff; font-weight:600; }
.hero-checklist svg{ width:21px; height:21px; color:var(--orange); flex-shrink:0; }

.hero-badge-pill{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.25); padding:9px 20px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#fff; margin-bottom:22px;
}
.hero-badge-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }

.trust-badge-row{ display:none; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; max-width:440px; }
.tb-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:16px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.tb-card svg{ width:22px; height:22px; color:var(--orange); flex-shrink:0; }
.tb-card span{ font-size:11px; font-weight:700; color:#fff; line-height:1.3; letter-spacing:.01em; }

.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:22px; margin-top:34px; flex-wrap:wrap; }
.hero-trust .ht-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C9D5E6; }
.hero-trust svg{ width:19px; height:19px; color: var(--orange); flex-shrink:0; }
.hero-media{ position:relative; border-radius: 18px; overflow:hidden; box-shadow: var(--shadow-lg); }
.hero-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.hero-media-badge{
  position:absolute; left:18px; bottom:18px; background: rgba(18,41,77,.88); backdrop-filter: blur(6px);
  color:#fff; padding: 12px 16px; border-radius: 12px; font-size: 12.5px; display:flex; align-items:center; gap:10px;
}
.hero-media-badge b{ display:block; font-size:15px; font-family: var(--font-mono); }
.hero-circuit-bg{ position:absolute; inset:0; opacity:.10; pointer-events:none; }

@media (max-width: 640px){
  .hero-grid{ padding: 32px 0 36px; gap:34px; }
  .hero-badge-pill{ font-size:11px; padding:8px 16px; margin-bottom:18px; }
  .h1{ font-size: clamp(30px, 8.2vw, 38px); line-height:1.2; }
  .hero .lede{ font-size:15.5px; margin-top:16px; max-width:420px; }
  .hero-actions{ flex-direction:column; margin-top:26px; align-items:stretch; gap:12px; }
  .hero-actions .btn{ width:100%; padding:19px 20px; font-size:16.5px; border-radius:14px; }
  .trust-badge-row{ display:grid; grid-template-columns:repeat(3,1fr); max-width:none; margin-top:26px; }
  .hero-trust{ display:none; }
  .hero-media{ margin-top:6px; border-radius:16px; }
  .hero-media img{ aspect-ratio: 5/4; }
  .hero-media-badge{ left:14px; bottom:14px; padding:10px 13px; font-size:11.5px; }
  .hero-media-badge b{ font-size:13.5px; }
}

/* ---------- Trust bar ---------- */
.trustbar{ background: var(--navy-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trustbar .container{ display:flex; flex-wrap:wrap; gap: 26px 40px; padding: 22px 20px; justify-content:space-between; }
.trustbar .tb2-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color: var(--navy); }
.trustbar svg{ width:22px; height:22px; color:var(--orange); flex-shrink:0; }

/* ---------- Service cards ---------- */
.grid-services{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 940px){ .grid-services{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-services{ grid-template-columns: 1fr; } }
.grid-2col-results{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:32px auto 0; }
@media (max-width: 640px){ .grid-2col-results{ grid-template-columns:1fr; } }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 28px 24px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display:flex; flex-direction:column; height:100%;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card .sc-icon{
  width:52px; height:52px; border-radius: 12px; background: var(--orange-tint); color: var(--orange);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.service-card .sc-icon svg{ width:26px; height:26px; }
.sc-icon svg{ width:26px; height:26px; flex-shrink:0; }
.service-card h3{ margin-bottom:8px; font-size:18.5px; }
.service-card p{ color:var(--muted); font-size:14.5px; flex:1; }
.service-card .sc-link{ margin-top:16px; display:flex; align-items:center; gap:6px; color:var(--navy); font-weight:700; font-size:14px; }
.service-card .sc-link svg{ width:15px; height:15px; transition: transform .15s ease; }
.service-card:hover .sc-link svg{ transform: translateX(3px); }
.service-card.featured{ border: 2px solid var(--orange); position:relative; }
.service-card.featured .sc-badge{
  position:absolute; top:-12px; left:24px; background:var(--orange); color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}
.service-card.coming-soon{ position:relative; opacity:.92; }
.service-card.coming-soon .sc-badge{
  position:absolute; top:-12px; left:24px; background: var(--navy); color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}

/* ---------- Feature split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:32px; } }
.split img{ border-radius: var(--radius); box-shadow: var(--shadow); width:100%; height: 460px; object-fit:cover; }
.check-list{ margin-top: 22px; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; }
.check-list svg{ width:20px; height:20px; color:var(--good); flex-shrink:0; margin-top:1px; }

/* ---------- Stats strip ---------- */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media (max-width:780px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat{ text-align:center; padding: 20px 10px; }
.stat .num{ font-family: var(--font-mono); font-size: clamp(28px,4vw,38px); font-weight:700; color:var(--orange); }
.stat .lbl{ font-size:13px; color:var(--muted); margin-top:6px; font-weight:600; }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:36px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:26px; }
.testi-stars{ display:flex; gap:3px; color:var(--orange); margin-bottom:14px; }
.testi-stars svg{ width:16px; height:16px; }
.testi-card p{ font-size:14.5px; color: var(--ink); }
.testi-name{ margin-top:16px; font-weight:700; font-size:13.5px; color:var(--navy); }
.testi-loc{ font-size:12.5px; color:var(--muted); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--navy); color:#fff; border-radius: 20px; padding: 48px 40px; position:relative; overflow:hidden; }
.cta-band-grid{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; position:relative; z-index:2; }
@media (max-width:780px){ .cta-band{ padding: 34px 24px; } .cta-band-grid{ flex-direction:column; align-items:flex-start; } }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#C9D5E6; margin-top:8px; }
.cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Location chips ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip{ background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--navy); }
.chip:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- Form ---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.field .req{ color:var(--orange); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea{
  width:100%; padding: 12px 14px; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size:14.5px; color:var(--ink); background:#FCFCFD; transition: border-color .12s ease;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,106,33,.15); }
textarea{ min-height: 100px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.hint{ font-size:12px; color:var(--muted); margin-top:5px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{ position:relative; }
.radio-pill input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; }
.radio-pill span{ display:inline-block; padding:10px 16px; border:1.5px solid var(--line); border-radius:8px; font-size:13.5px; font-weight:600; background:#FCFCFD; transition:.15s; }
.radio-pill input:checked + span{ background:var(--navy); border-color:var(--navy); color:#fff; }
.form-success{ display:none; text-align:center; padding: 30px 10px; }
.form-success svg{ width:52px; height:52px; color:var(--good); margin: 0 auto 14px; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--navy-dark); color:#B9C7DF; }
.footer-top{ padding: 56px 0 36px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; }
.footer-top > div{ min-width:0; }
@media (max-width:880px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-top .fbrand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-top .fbrand svg{ width:34px; height:34px; }
.footer-top .fbrand .word{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:16px; }
.footer-top p{ font-size:13.5px; line-height:1.7; }
.footer-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; min-width:0; }
.footer-contact li > *:last-child{ min-width:0; overflow-wrap:break-word; }
.footer-contact svg{ width:17px; height:17px; color:var(--orange); flex-shrink:0; margin-top:2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding: 20px 0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; font-size:12.5px; }
.footer-bottom > span{ min-width:0; }
@media (max-width:640px){ .footer-bottom{ flex-direction:column; gap:8px; } }

/* ---------- Page header (interior pages) ---------- */
.page-hero{ background: var(--navy); color:#fff; padding: 46px 0 42px; position:relative; overflow:hidden; }
.breadcrumb{ font-size:12.5px; color:#9FB2D1; display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.breadcrumb a:hover{ color:#fff; }
.page-hero h1{ color:#fff; font-size: clamp(28px,4.2vw,42px); }
.page-hero .lede{ color:#C9D5E6; margin-top:10px; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-8{ margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap: 40px; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
.two-col-quote{ display:grid; grid-template-columns: 1.3fr .7fr; gap:40px; }
@media (max-width:860px){ .two-col-quote{ grid-template-columns:1fr; } }
.two-col-contact{ display:grid; grid-template-columns: .8fr 1.2fr; gap:48px; }
@media (max-width:860px){ .two-col-contact{ grid-template-columns:1fr; } }
/* Prevent classic CSS grid "blowout": grid items default to min-width:auto,
   which stops them shrinking below their content's natural width, causing
   horizontal overflow on small screens. Force children to shrink properly. */
.two-col > *, .two-col-quote > *, .two-col-contact > *, .split > *,
.grid-services > *, .grid-2col-results > *, .hero-grid > *, .stats > * { min-width: 0; }
.badge-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.badge{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--navy); }
.badge svg{ width:15px; height:15px; color:var(--orange); }
.price-note{ font-family: var(--font-mono); }
.section-cream{ background: var(--cream); }
.section-navy{ background: var(--navy); color:#fff; }
.section-navy h2{ color:#fff; }
.section-navy .lede{ color:#C9D5E6; }
.faq-item{ border-bottom:1px solid var(--line); padding: 18px 0; }
.faq-item summary{ font-weight:700; font-size:15.5px; cursor:pointer; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--orange); transition: transform .15s ease; }
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-a{ color:var(--muted); font-size:14.5px; margin-top:12px; max-width:760px; }

.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
@media (max-width:860px){ .process-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process-steps{ grid-template-columns:1fr; } }
.pstep{ position:relative; padding-top:8px; }
.pstep .pnum{ font-family:var(--font-mono); font-size:13px; color:var(--orange); font-weight:700; }
.pstep h3{ font-size:16.5px; margin-top:8px; }
.pstep p{ font-size:13.5px; color:var(--muted); margin-top:6px; }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-list li{ background:var(--navy-tint); color:var(--navy); font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; }