/* ==========================================================================
   Monicken Electric — site stylesheet
   Visual direction modelled on electrician-minneapolis.com (Edison Electric):
   near-black ground, sky-cyan accent, yellow pill CTAs, heavy uppercase
   Poppins headings with a script accent, and angled slash dividers between
   sections. Mobile-first. Breakpoints at 640 / 900 / 1100.
   ========================================================================== */

:root {
  --ink:        #0a0a0a;
  --ink-2:      #101010;
  --ink-3:      #1d1d1d;
  --band:       #3d3d3d;   /* the grey wedge in the slash dividers */
  --slate:      #6f6f6f;
  --slate-lt:   #9a9a9a;
  --line:       #e2e2e2;
  --line-soft:  #efefef;
  --paper:      #ffffff;
  --paper-2:    #f4f4f4;
  --paper-3:    #ebebeb;

  --cyan:       #2199e8;
  --cyan-dk:    #1a7cbd;
  --cyan-lt:    #e9f5fd;
  --yellow:     #fbef69;
  --yellow-dk:  #ece049;
  --red:        #d8332a;
  --green:      #14804a;

  --radius:     8px;
  --radius-lg:  12px;
  --pill:       45px;
  --shadow:     0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.07);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.08), 0 18px 46px rgba(0,0,0,.14);

  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Poppins", system-ui, sans-serif;
  --script: "Pacifico", "Brush Script MT", cursive;

  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a3a;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 900;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 700; }
h4 { font-size: .95rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* The cyan half of a two-tone headline, and the Pacifico accent phrase. */
.hl { color: var(--cyan); }
.script {
  font-family: var(--script); font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--cyan);
  /* Pacifico has tall ascenders; ease the line box so caps above it don't collide.
     No inline-block or side padding — that opens a visible gap before a
     following comma. */
  line-height: 1.3;
}

a { color: var(--cyan-dk); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--cyan); }

img, svg { max-width: 100%; }
/* Safety net: an icon dropped inline without a wrapper class sizes to the
   text around it rather than ballooning to the SVG's intrinsic size.
   Component rules below are later in the cascade and win where they apply. */
svg:not([class]) { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .container { padding: 0 28px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--head); font-weight: 600; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.25;
  padding: .95em 1.9em; border-radius: var(--pill);
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn-amber { background: var(--yellow); color: var(--ink-2); }
.btn-amber:hover { background: var(--yellow-dk); color: var(--ink-2); }

.btn-primary { background: var(--cyan); color: #fff; }
.btn-primary:hover { background: var(--cyan-dk); color: #fff; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); color: #fff; }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-ghost-light { background: transparent; border-color: #fff; color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }

.btn-lg { font-size: 1rem; padding: 1.05em 2.2em; }
.btn-block { display: flex; width: 100%; }

/* -------------------------------------------------------------- topbar --- */
.topbar { background: var(--ink); color: #b6b6b6; font-size: .82rem; line-height: 1.4; }
.topbar .container { display: flex; align-items: center; gap: 1.6rem; min-height: 38px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: .45em; }
.topbar-item svg { width: 14px; height: 14px; flex: none; color: var(--cyan); }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--yellow); }
.topbar-phone { margin-left: auto; }
@media (max-width: 899px) {
  .topbar .container { justify-content: center; gap: .9rem; }
  .topbar-hours { display: none; }
  .topbar-phone { margin-left: 0; }
}
@media (max-width: 560px) { .topbar-area { display: none; } }

/* -------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 3px solid var(--cyan);
}
.site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 76px; }

.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.logo-mark { width: 42px; height: 42px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-top {
  font-family: var(--head); font-weight: 900; font-size: 1.25rem;
  color: var(--ink); letter-spacing: -.02em; text-transform: uppercase;
}
.logo-sub {
  font-family: var(--head); font-weight: 600; font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--cyan);
  margin-top: .3em;
}
.site-footer .logo-top { color: #fff; }
.site-footer .logo-sub { color: var(--cyan); }

.nav { display: none; align-items: center; gap: .1rem; margin-left: 1.2rem; }
@media (min-width: 1100px) { .nav { display: flex; } }
.nav > a, .nav-drop > button {
  font-family: var(--head); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-2); text-decoration: none;
  padding: .6rem .62rem; border-radius: var(--radius);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3em;
}
.nav > a:hover, .nav-drop > button:hover { color: var(--cyan); }
.nav-drop > button svg { width: 12px; height: 12px; transition: transform .18s; }
.nav-drop { position: relative; }
.nav-drop[data-open] > button { color: var(--cyan); }
.nav-drop[data-open] > button svg { transform: rotate(180deg); }

.drop-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 320px; background: #fff;
  border-top: 3px solid var(--cyan);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: .55rem;
  display: none; flex-direction: column;
}
.nav-drop[data-open] .drop-panel { display: flex; }
.drop-panel a {
  padding: .5rem .7rem; border-radius: 5px;
  font-size: .85rem; color: var(--ink-2); text-decoration: none; font-weight: 500;
}
.drop-panel a:hover { background: var(--cyan); color: #fff; }
.drop-panel-2col { min-width: 580px; display: none; }
.nav-drop[data-open] .drop-panel-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .4rem; }
.drop-all {
  grid-column: 1 / -1;
  margin-top: .35rem; border-top: 1px solid var(--line-soft); padding-top: .6rem !important;
  font-weight: 700 !important; color: var(--cyan-dk) !important; font-size: .82rem !important;
  text-transform: uppercase;
}

/* Big "CALL NOW" block, the loudest thing in the reference header. */
.header-phone { display: none; margin-left: auto; text-decoration: none; text-align: right; }
@media (min-width: 900px) { .header-phone { display: block; } }
.hp-label {
  display: block; font-family: var(--head); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2);
}
.hp-num {
  display: flex; align-items: center; gap: .35rem; justify-content: flex-end;
  font-family: var(--head); font-weight: 900; font-size: 1.5rem;
  color: var(--cyan); letter-spacing: -.02em; line-height: 1.15;
}
.hp-num svg { width: 20px; height: 20px; flex: none; }
.header-cta { display: none; flex: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; margin-left: auto; } }
@media (min-width: 900px) { .header-cta { margin-left: 1.2rem; } }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 2px solid var(--ink); background: #fff;
  border-radius: var(--radius); cursor: pointer; color: var(--ink); flex: none;
}
@media (min-width: 640px) { .nav-toggle { margin-left: .6rem; } }
@media (min-width: 1100px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }

/* ------------------------------------------------------- mobile drawer --- */
.menu-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 78;
}
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 90vw);
  background: #fff; z-index: 80; overflow-y: auto;
  transform: translateX(100%); transition: transform .26s ease;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
body.menu-open .mobile-menu { transform: none; }
.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 3px solid var(--cyan);
}
.mm-close {
  width: 42px; height: 42px; border: 2px solid var(--ink); background: #fff;
  border-radius: var(--radius); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-close svg { width: 20px; height: 20px; }
.mm-actions { display: grid; gap: .6rem; padding: 1.1rem; }
.mm-nav { padding: 0 1.1rem 1rem; display: flex; flex-direction: column; }
.mm-nav > a, .mm-group > summary {
  font-family: var(--head); font-weight: 600; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: .8rem .2rem; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2.2px solid var(--cyan); border-bottom: 2.2px solid var(--cyan);
  transform: rotate(45deg); transition: transform .2s; margin-right: 4px;
}
.mm-group[open] > summary::after { transform: rotate(-135deg); }
.mm-sub-list { display: flex; flex-direction: column; padding: .3rem 0 .6rem .7rem; }
.mm-sub-list a {
  padding: .5rem .2rem; font-size: .86rem; color: var(--slate);
  text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
.mm-sub-list a:hover { color: var(--cyan); }
.mm-foot {
  margin-top: auto; padding: 1.1rem; background: var(--ink); color: #a8a8a8;
  font-size: .82rem; display: flex; flex-direction: column; gap: .2rem;
}
.mm-foot a { color: var(--cyan); font-family: var(--head); font-weight: 900; font-size: 1.3rem; text-decoration: none; }

/* -------------------------------------------------- slash divider band --- */
/* The signature motif: an angled grey/cyan ribbon between sections.
   preserveAspectRatio="none" lets one viewBox stretch to any width. */
.slash { display: block; width: 100%; height: 46px; }
@media (min-width: 700px) { .slash { height: 74px; } }
@media (min-width: 1100px) { .slash { height: 104px; } }

/* ---------------------------------------------------------------- hero --- */
.hero { background: var(--ink); color: #fff; position: relative; }
.hero .container { position: relative; z-index: 1; padding-top: 3.2rem; padding-bottom: 3.2rem; }
@media (min-width: 900px) { .hero .container { padding-top: 4.6rem; padding-bottom: 4.6rem; } }
.hero h1 { color: #fff; max-width: 17ch; }
.hero-home h1 { max-width: 20ch; }
.hero-lede { font-size: 1.02rem; color: #b6b6b6; max-width: 60ch; margin-bottom: 1.9rem; }
@media (min-width: 900px) { .hero-lede { font-size: 1.08rem; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--head); font-weight: 700; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--yellow); flex: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem;
  margin-top: 2.6rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.trust-item { display: flex; align-items: flex-start; gap: .65rem; max-width: 250px; }
.trust-item svg { width: 22px; height: 22px; color: var(--cyan); flex: none; margin-top: 2px; }
.trust-item b {
  display: block; font-family: var(--head); font-size: .84rem; color: #fff;
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: .1em;
}
.trust-item span { font-size: .8rem; color: #9a9a9a; line-height: 1.5; }

/* === CRITICAL END ===
   build.js inlines everything above this marker into each page's <head> so
   the header and hero paint without waiting on a stylesheet request, then
   loads this full file asynchronously for everything below the fold. Keep
   above-the-fold rules above the marker. */

/* -------------------------------------------------------------- layout --- */
.section { padding: 3.4rem 0; }
@media (min-width: 900px) { .section { padding: 4.6rem 0; } }
.section-tight { padding: 2.6rem 0; }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--ink); color: #b6b6b6; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: var(--cyan); }

.section-head { max-width: 64ch; margin-bottom: 2.4rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--slate); font-size: 1rem; margin-bottom: 0; }
.section-dark .section-head p { color: #9a9a9a; }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr .95fr; gap: 3.4rem; } }

/* Grid and flex items default to min-width:auto, which refuses to shrink below
   their content's min-content width. That is how a single wide descendant
   (a table, a long unbroken string) silently widens its whole column and blows
   out the page on a phone. Letting these shrink is also what allows the
   overflow-x containers below to actually scroll instead of overflowing. */
.split > *, .grid > *, .steps > *, .cta-inner > *, .footer-grid > *,
.sidebar, .prose, .faq-list, .form-grid, .form-row-2 > * { min-width: 0; }

/* Long tokens — URLs, emails, phone strings — must not set the min-content
   width of their container either. */
body { overflow-wrap: break-word; }

/* --------------------------------------------------------------- cards --- */
/* Reference pattern: pale card, white circular icon badge straddling a solid
   cyan footer that carries the label. */
.card {
  background: var(--paper-2); border: 0;
  border-radius: var(--radius-lg); padding: 1.5rem; overflow: hidden;
}
.card-link {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: 0; text-align: center;
  transition: transform .16s, box-shadow .16s;
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }

.card-link .card-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 1.6rem auto .9rem; flex: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}
.card-link .card-icon svg { width: 38px; height: 38px; stroke-width: 1.7; }
.card-link h3 {
  font-size: .95rem; margin: 0 1.1rem .4rem; color: var(--ink);
  text-transform: uppercase; font-weight: 700; letter-spacing: .01em;
}
.card-link p { font-size: .85rem; color: var(--slate); margin: 0 1.1rem 1.2rem; line-height: 1.55; }
.card-link .card-more {
  margin-top: auto; background: var(--cyan); color: #fff;
  font-family: var(--head); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .85rem .8rem;
  display: flex; align-items: center; justify-content: center; gap: .45em;
  transition: background-color .16s;
}
.card-link:hover .card-more { background: var(--cyan-dk); }
.card-more svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .16s; }
.card-link:hover .card-more svg { transform: translateX(3px); }
.card-badge {
  display: inline-block; margin: 0 1.1rem .9rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cyan-dk); background: var(--cyan-lt); padding: .3em .7em; border-radius: var(--pill);
}

/* Plain (non-link) card, used on the warranty promises grid. */
.card:not(.card-link) { text-align: left; }
.card:not(.card-link) .card-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cyan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card:not(.card-link) .card-icon svg { width: 22px; height: 22px; stroke-width: 2.4; }
.card:not(.card-link) h3 { font-size: 1rem; margin-bottom: .45rem; }
.card:not(.card-link) p { font-size: .88rem; color: var(--slate); margin-bottom: 0; }

/* ------------------------------------------------------------- content --- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; font-size: 1.1rem; }
.prose p { color: #4a4a4a; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: .7rem; color: #4a4a4a; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--yellow);
  border: 1.5px solid var(--ink); transform: rotate(45deg);
}
.prose ul.check li::before {
  content: ""; left: 1px; top: .42em;
  width: 12px; height: 7px; background: none; border: 0; border-radius: 0;
  border-left: 2.6px solid var(--cyan); border-bottom: 2.6px solid var(--cyan);
  transform: rotate(-45deg);
}
.lede { font-size: 1.06rem; color: #3a3a3a; }

.callout {
  border: 1px solid var(--line);
  background: var(--paper-2); padding: 1.15rem 1.35rem;
  border-radius: var(--radius); margin: 1.8rem 0;
  font-size: .94rem;
}
.callout strong { color: var(--ink); }
.callout-alert { border-color: #f0c8c5; background: #fdf1f0; }
.callout-alert strong { color: #a8221b; }

/* --------------------------------------------------------------- aside --- */
.sidebar { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .sidebar { position: sticky; top: 100px; } }

.side-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; background: #fff; }
.side-card h3 { font-size: 1rem; }
.side-card p { font-size: .88rem; color: var(--slate); }
.side-card-dark { background: var(--ink); border-color: var(--ink); color: #a8a8a8; }
.side-card-dark h3 { color: #fff; }
.side-card-dark p { color: #9a9a9a; }

.side-phone {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--head); font-weight: 900; font-size: 1.5rem;
  color: var(--cyan); text-decoration: none; letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.side-card-dark .side-phone { color: var(--yellow); }
.side-phone svg { width: 22px; height: 22px; flex: none; }

.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { border-bottom: 1px solid var(--line-soft); margin: 0; }
.side-list li:last-child { border-bottom: 0; }
.side-list a { display: block; padding: .6rem 0; font-size: .88rem; color: var(--ink-2); text-decoration: none; }
.side-list a:hover { color: var(--cyan); }

/* ------------------------------------------------------------ warranty --- */
.warranty-band { background: var(--paper-2); }
.warranty-seal {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--ink); color: #fff;
  border-radius: var(--pill); padding: .9rem 1.5rem;
  margin-bottom: 1.3rem;
}
.warranty-seal svg { width: 32px; height: 32px; color: var(--yellow); flex: none; }
.warranty-seal b {
  display: block; font-family: var(--head); font-size: .95rem; color: #fff;
  text-transform: uppercase; letter-spacing: .02em;
}
.warranty-seal span { display: block; font-size: .76rem; color: #a8a8a8; text-transform: none; }

.warranty-tiers { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .warranty-tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem; background: #fff; display: flex; flex-direction: column;
}
.tier-feature { background: var(--ink); border-color: var(--ink); }
.tier-years {
  font-family: var(--head); font-weight: 900; font-size: 3.2rem;
  color: var(--cyan); line-height: 1; letter-spacing: -.04em; margin-bottom: .3rem;
}
.tier-feature .tier-years { color: var(--yellow); }
.tier h3 { font-size: 1rem; margin-bottom: .7rem; }
.tier p { font-size: .88rem; color: var(--slate); }
.tier ul { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .84rem; }
.tier ul li { padding-left: 1.35rem; position: relative; color: #4a4a4a; margin-bottom: .45rem; }
.tier ul li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 6px;
  border-left: 2.4px solid var(--cyan); border-bottom: 2.4px solid var(--cyan);
  transform: rotate(-45deg);
}
/* Reversed-out tier — must follow the base .tier rules above, since these
   tie on specificity and the later declaration wins. */
.tier-feature h3 { color: #fff; }
.tier-feature p { color: #c4c4c4; }
.tier-feature ul li { color: #dedede; }
.tier-feature ul li::before { border-color: var(--yellow); }

/* ---------------------------------------------------------- area lists --- */
.ring-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin: 2.8rem 0 1.1rem; padding-bottom: .7rem;
  border-bottom: 3px solid var(--cyan);
}
.ring-head h3 { margin: 0; font-size: 1.15rem; font-weight: 900; }
.ring-head span { font-size: .84rem; color: var(--slate); }

.area-grid { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-chip {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .8rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; background: #fff;
  transition: border-color .15s, background-color .15s, color .15s;
}
.area-chip:hover { border-color: var(--cyan); background: var(--cyan); }
.area-chip b {
  font-family: var(--head); font-size: .88rem; color: var(--ink);
  font-weight: 700; letter-spacing: 0; text-transform: uppercase;
}
.area-chip span { font-size: .74rem; color: var(--slate); }
.area-chip:hover b, .area-chip:hover span { color: #fff; }

.nearby { display: flex; flex-wrap: wrap; gap: .5rem; }
.nearby a {
  padding: .45rem .95rem; border: 1px solid var(--line); border-radius: var(--pill);
  font-size: .82rem; text-decoration: none; color: var(--ink-2); background: #fff;
  font-weight: 500;
}
.nearby a:hover { border-color: var(--cyan); background: var(--cyan); color: #fff; }

/* ----------------------------------------------------------------- faq --- */
.faq-list { max-width: 78ch; }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--head); font-weight: 700; font-size: .98rem;
  color: var(--ink); position: relative;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.45rem;
  width: 11px; height: 11px;
  border-right: 2.6px solid var(--cyan); border-bottom: 2.6px solid var(--cyan);
  transform: rotate(45deg); transition: transform .2s;
}
.faq[open] > summary::after { transform: rotate(-135deg); }
.faq[open] > summary { color: var(--cyan); }
.faq-body { padding: 0 2.5rem 1.3rem 0; color: var(--slate); font-size: .92rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- misc --- */
.crumbs { font-size: .8rem; color: var(--slate); padding: .9rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li::after { content: "/"; margin-left: .4rem; color: var(--line); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); text-decoration: underline; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b {
  display: block; font-family: var(--head); font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.7rem); color: var(--cyan);
  letter-spacing: -.03em; line-height: 1;
}
.section-dark .stat b { color: var(--yellow); }
.stat span { font-size: .82rem; color: var(--slate); }
.section-dark .stat span { color: #9a9a9a; }

.steps { counter-reset: step; display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--cyan); color: #fff;
  font-family: var(--head); font-weight: 900; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: .98rem; margin-bottom: .4rem; }
.step p { font-size: .88rem; color: var(--slate); margin: 0; }

.cta-band { background: var(--ink); color: #fff; }
.cta-band .container { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b6b6b6; max-width: 58ch; }
.cta-inner { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.5fr auto; gap: 2.6rem; } }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------- form --- */
.form-panel { background: var(--paper-2); border-radius: var(--radius-lg); padding: 1.6rem; }
@media (min-width: 640px) { .form-panel { padding: 2.2rem; } }
.form-panel h2 { color: var(--cyan); }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.field label {
  display: block; font-family: var(--head); font-weight: 600;
  font-size: .82rem; margin-bottom: .35rem; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink-2);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-lt);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: .78rem; color: var(--slate); margin-top: .3rem; }
.form-note { font-size: .8rem; color: var(--slate); }
.form-status { font-size: .9rem; padding: .85rem 1rem; border-radius: var(--radius); display: none; }
.form-status[data-state="ok"] { display: block; background: #e7f5ee; color: var(--green); }
.form-status[data-state="err"] { display: block; background: #fdf1f0; color: var(--red); }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: #8d8d8d; font-size: .86rem; }
.site-footer .container { padding-top: 3.2rem; padding-bottom: 1.6rem; }
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer h4 {
  color: #fff; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--cyan); display: inline-block;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #8d8d8d; text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }
.footer-about p { max-width: 40ch; margin: 1rem 0; }
.footer-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--head); font-weight: 900; font-size: 1.45rem;
  color: var(--cyan) !important; letter-spacing: -.02em; margin-bottom: .5rem;
}
.footer-phone svg { width: 20px; height: 20px; color: var(--yellow); }
.footer-cols-wide { column-count: 2; column-gap: 1.2rem; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  font-size: .78rem; color: #6f6f6f;
}
.footer-bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }

/* --------------------------------------------------------- sticky call --- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
@media (min-width: 900px) { .mobile-cta { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 58px; } }
.mobile-cta a {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.05rem .5rem; font-family: var(--head); font-weight: 700;
  font-size: .86rem; text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
}
.mobile-cta svg { width: 17px; height: 17px; }
.mcta-call { background: var(--cyan); color: #fff; }
.mcta-quote { background: var(--yellow); color: var(--ink); }

/* --------------------------------------------------------------- table --- */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
/* No min-width: the only table on the site is two columns and reads fine
   wrapped on a phone. A horizontal scroll here would be worse UX than a
   wrapped cell, and a min-width wide enough to matter is what broke the
   mobile layout in the first place. .table-wrap stays as a safety net. */
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
@media (min-width: 640px) { table { min-width: 480px; } }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { th, td { padding: .8rem .9rem; } }
th {
  font-family: var(--head); font-weight: 700; color: #fff; background: var(--ink);
  text-transform: uppercase; font-size: .76rem; letter-spacing: .05em;
}
td { color: var(--slate); }
td strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   Mobile refinements
   Everything above is mobile-first; these are the small-screen-only
   corrections that only make sense once the layout is stacked.
   ========================================================================== */
@media (max-width: 559px) {
  /* Stacked buttons that size to their text leave a ragged left column and
     small tap targets. Full width reads deliberate and is easier to hit. */
  .hero-actions, .cta-actions { display: grid; gap: .65rem; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }

  /* Give the hero a little less vertical run so the first real content is
     not pushed a full screen down. */
  .hero .container { padding-top: 2.4rem; padding-bottom: 2.4rem; }
  .hero-lede { font-size: .98rem; margin-bottom: 1.5rem; }

  .section { padding: 2.8rem 0; }
  .section-head { margin-bottom: 1.8rem; }
}

/* Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the practical
   floor on a phone, and the drawer's city list is 50 links deep. */
@media (pointer: coarse), (max-width: 899px) {
  .mm-sub-list a { padding: .72rem .2rem; min-height: 44px; display: flex; align-items: center; }
  .side-list a   { padding: .8rem 0;      min-height: 44px; display: flex; align-items: center; }
  .nearby a      { padding: .62rem 1.05rem; }
  .crumbs a      { padding: .2rem 0; display: inline-block; }
}

/* ==========================================================================
   Design refinements
   ========================================================================== */

/* The hero was a flat black slab. A soft angled cyan wash on the trailing
   edge carries the same diagonal energy as the slash dividers without
   competing with the headline. Hidden on phones, where the text occupies
   the full width and any wash would sit behind it. */
.hero { overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46%;
  background: linear-gradient(135deg, rgba(33,153,232,.28), rgba(33,153,232,0) 64%);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none; z-index: 0;
}
@media (max-width: 899px) { .hero::after { display: none; } }

/* Cards read crisper with a hairline edge than as flat grey blocks, and the
   cyan edge on hover ties the affordance to the footer bar. */
.card { border: 1px solid var(--line); }
.card-link { transition: transform .16s, box-shadow .16s, border-color .16s; }
.card-link:hover { border-color: var(--cyan); }
.card-link .card-icon { box-shadow: 0 0 0 1px var(--line), 0 2px 10px rgba(0,0,0,.07); }
.card-link:hover .card-icon { box-shadow: 0 0 0 2px var(--cyan), 0 2px 12px rgba(33,153,232,.22); }

/* Section headings get the same yellow tick the eyebrow uses, so a section
   without an eyebrow still reads as part of the system. */
.section-head > h2::after {
  content: ""; display: block; width: 54px; height: 4px;
  background: var(--yellow); margin-top: .85rem; border-radius: 2px;
}
.section-head.center > h2::after { margin-left: auto; margin-right: auto; }

/* Stat figures sit tighter to their labels and gain a rule, so the row reads
   as data rather than as four loose headings. */
.stat { border-top: 3px solid var(--cyan); padding-top: .9rem; }
.section-dark .stat { border-top-color: var(--yellow); }

/* The panel sits 4px below the trigger. That gap is not part of .nav-drop's
   box, so crossing it fired mouseleave and closed the menu before the pointer
   ever reached a link. This bridges the dead zone with an invisible strip so
   the hover region is continuous from trigger to panel. */
.nav-drop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 10px; display: none;
}
.nav-drop[data-open]::after { display: block; }

/* ---------------------------------------------------------- answer card --- */
/* The direct-answer block at the top of service and city pages. Visually a
   quiet summary panel; structurally the passage that answer engines quote. */
.answer-wrap { padding-top: 2.2rem; padding-bottom: 0; }
.answer-card {
  border: 1px solid var(--line); border-left: 5px solid var(--cyan);
  background: var(--paper-2); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.answer {
  font-size: 1.02rem; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 1.1rem; font-weight: 500;
}
.facts {
  display: grid; gap: .5rem 1.6rem; margin: 0;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { display: flex; gap: .5rem; align-items: baseline; font-size: .87rem; }
.facts dt {
  font-family: var(--head); font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em; font-size: .72rem;
  flex: none; min-width: 8.5em;
}
.facts dd { margin: 0; color: var(--slate); }