/* Vance Electric — the page's own styles.
 *
 * The export wrote every one of these as an inline style attribute; this file
 * is the same declarations lifted into classes, values preserved. Where a
 * number here differs from the export it is because a value that looked shared
 * was not: the eyebrow's margin is 18px in nine places, 20px in the hero and
 * 16px on the service page, so those two get modifiers rather than the base
 * class getting whichever one was transcribed last.
 *
 * modernist.css loads first and owns the tokens, the type scale, .btn, .input,
 * .field, .nav, .table and .hr. Nothing below re-declares those; it only adds
 * what the export's inline styles added on top.
 */

/* ---------------------------------------------------------- scaffolding -- */

/* [hidden] is a UA declaration, so any author `display:` on the same element
   beats it and a hidden view renders anyway. None of the nine views currently
   carries one, but .view is a class other rules will want later, and this
   failure mode cost an afternoon on the HVAC demo. */
[hidden] { display: none !important; }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 16px; font-size: 14px;
}
.skip:focus { left: 8px; top: 8px; }

.noscript {
  max-width: 62ch; margin: 0 auto; padding: 32px clamp(20px, 5vw, 64px);
  font-size: 15px; line-height: 1.6;
}
.noscript p { margin: 0 0 12px; }

/* The export's root element. 76px of bottom padding is the fixed call bar's
   height; without it the footer's last line sits underneath it. */
.shell {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  padding-bottom: 76px;
}

/* One gutter, one measure, used by every section. The export repeated
   `max-width: 1240px; margin: 0 auto; padding: … clamp(20px, 5vw, 64px)` on
   fourteen elements; only the block padding ever varied, so that is all the
   section classes below set. */
.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

/* ------------------------------------------------------- emergency bar -- */

.topline {
  background: var(--color-text); color: var(--color-bg);
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
}
.topline__inner {
  max-width: 1240px; margin: 0 auto; padding: 11px clamp(20px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  align-items: center; justify-content: space-between;
}
.topline__right { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.topline__hours { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.topline__emerg { color: var(--color-accent-300); letter-spacing: 0.08em; }

/* ------------------------------------------------------------- the nav -- */

/* .nav in modernist.css supplies the flex row, the 2px underline and the link
   sizing. This adds the export's inline half: sticky, and a gutter that grows
   past the 1240px measure so the brand lines up with the hero below it. */
.rail {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-bg);
  flex-wrap: wrap; row-gap: 6px;
  padding-inline: max(clamp(20px, 5vw, 64px), calc((100% - 1240px) / 2 + clamp(20px, 5vw, 64px)));
}
/* .rail qualifies this on purpose. modernist.css has `.nav a { font-size: 14px }`
   at (0,1,1) and a bare .rail__brand is (0,1,0), so the brand came out at 14px
   -- 168px wide in the export, 124px here -- while everything else about it
   looked right. The export wrote it inline, which beat both. */
.rail .rail__brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; letter-spacing: -0.02em;
  color: var(--color-text); text-transform: uppercase;
  margin-right: 14px;
}
.rail__call { margin-left: auto; }

/* ------------------------------------------------------------ the home -- */

.hero {
  padding-top: clamp(34px, 5vw, 74px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: end;
}

/* The eyebrow is a <span style="display: block"> in the export, so blockifying
   it here is faithful rather than a liberty -- unlike the standalone labels in
   the other two demos, where the same move cost 6px a heading. */
.eyebrow {
  display: block;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 18px;
}
.eyebrow--20 { margin-bottom: 20px; }
.eyebrow--16 { margin-bottom: 16px; }

.h-hero {
  font-size: clamp(40px, 6.2vw, 80px); line-height: 1.04; letter-spacing: -0.025em;
  margin: 0 0 0 -0.055em;
}
.h-hero > span { display: block; }
.h-hero__accent { color: var(--color-accent); }

.hero__lede { font-size: 17px; line-height: 1.65; max-width: 48ch; margin: 28px 0 0; }

.btnrow { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__btns { margin-top: 32px; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px;
  font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
/* Inline on purpose. The export does not blockify this one and a <span> in a
   line box of its own would push the row's baseline. */
.stars { color: var(--color-accent); }

.hero__figure { margin: 0; }
/* The export carried object-position: 50% 18% here, to pull a portrait's face
   into a 4:5 window out of a taller frame. Both photographs are cut to 4:5
   before they ship now, so cover crops nothing and the declaration would be
   inert -- it is left out rather than left in to be believed. */
.hero__figure img,
.about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.promises { margin-top: clamp(40px, 5vw, 72px); }
.promises__rule { margin: 0; }
.promises__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.promise { padding: 28px 0; }
.promise__t {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: 1.2; margin: 0 0 10px;
}
.promise__b {
  font-size: 14.5px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.band { padding-top: clamp(40px, 5vw, 68px); }
.h-section {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 34px -0.045em; max-width: 24ch;
}

/* 2px of divider showing through a 2px gap is the whole border treatment: the
   cards paint themselves --color-bg and the grid's background is what draws
   the rules between them. */
.featured {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 2px;
  background: var(--color-divider);
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.fcard {
  display: block; background: var(--color-bg);
  padding: 26px clamp(18px, 2vw, 26px) 28px;
  color: var(--color-text);
}
.fcard:hover { background: var(--color-neutral-100); }
.fcard__num {
  display: block; font-family: var(--font-heading);
  font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 18px;
}
.fcard__name {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 12px;
}
.fcard__blurb {
  display: block; font-size: 14.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); margin-bottom: 18px;
}
.fcard__price {
  display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.band__btns { margin-top: 26px; }

.split {
  padding-top: clamp(44px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
/* order:2 puts the photograph second in the source and second on a narrow
   screen, but the copy is what a reader wants first either way -- the grid
   reverses nothing, it just stops the figure claiming column one. */
.split__figure { margin: 0; order: 2; }
.h-band {
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 20px -0.04em;
}
.split .body { font-size: 16px; line-height: 1.68; margin: 0 0 16px; max-width: 46ch; }
.split .body--last { margin-bottom: 24px; }

.quotes { margin-top: clamp(44px, 6vw, 80px); }
.quotes__rule { margin: 0 0 30px; }
.quotes__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.quote { margin: 0; }
.quote__stars {
  display: block; color: var(--color-accent);
  font-size: 15px; letter-spacing: 0.1em; margin-bottom: 14px;
}
.quote__text {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; margin: 0 0 16px;
}
/* figcaption in modernist.css is 11px with a 4px top margin. The export
   overrode the size and the colour and left the margin alone, so this does
   too -- the 4px is part of how the export looks. */
.quote__who {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.quotes__btns { margin-top: 30px; }

.alarm {
  background: var(--color-accent); color: var(--color-bg);
  margin-top: clamp(48px, 6vw, 84px);
}
.alarm__inner { padding-block: clamp(40px, 5vw, 76px); }
.alarm__h {
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.02em;
  margin: 0 0 0 -0.055em;
}
.alarm__h > span { display: block; }
.alarm__p { font-size: 17px; line-height: 1.6; max-width: 44ch; margin: 22px 0 0; }
.alarm__btns { margin-top: 30px; }
.btn-onaccent { color: var(--color-bg); border-color: var(--color-bg); }

/* ---------------------------------------------------- the inner pages -- */

.page { padding-top: clamp(34px, 4vw, 60px); }
.detailpage { padding-top: clamp(28px, 3vw, 44px); }

.h-page {
  font-size: clamp(34px, 5vw, 62px); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 22px -0.05em;
}
.h-page--20 { max-width: 20ch; }
.h-page--22 { max-width: 22ch; }
.h-page--about { margin-bottom: 32px; }
.h-page--gap { margin-bottom: 40px; }

.page__lede { font-size: 16.5px; line-height: 1.65; max-width: 52ch; margin: 0 0 40px; }
.page__lede--54 { max-width: 54ch; margin-bottom: 36px; }

.hr--flush { margin: 0; }
.hr--areas { margin: 0 0 4px; }
.hr--contact { margin: 0 0 22px; }

/* services -------------------------------------------------------------- */

.srow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px clamp(16px, 3vw, 40px);
  padding: 24px 0; border-bottom: 2px solid var(--color-divider);
  color: var(--color-text);
}
.srow:hover { background: var(--color-neutral-100); }
.srow__num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; color: var(--color-accent);
}
.srow__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px clamp(16px, 3vw, 40px); align-items: baseline;
}
.srow__lead { display: block; }
.srow__name {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 23px; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 8px;
}
.srow__price {
  display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.srow__blurb {
  display: block; font-size: 15px; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* one service ----------------------------------------------------------- */

.back {
  display: inline-block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 26px;
}
.detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.h-detail {
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 20px -0.05em;
}
.detail__body { font-size: 17px; line-height: 1.65; max-width: 48ch; margin: 0 0 28px; }
.detail__side { border-top: 2px solid var(--color-divider); padding-top: 24px; }
.price-big {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1;
  color: var(--color-accent); margin: 0 0 6px -0.04em;
}
.detail__k {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 66%, transparent); margin: 0 0 24px;
}
.detail__incl-h {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; margin: 0 0 14px;
}
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.incl__item {
  display: grid; grid-template-columns: 10px 1fr; gap: 14px; align-items: start;
  font-size: 15px; line-height: 1.55;
}
.bullet { width: 10px; height: 10px; background: var(--color-accent); margin-top: 6px; }
.banner { margin: clamp(36px, 4vw, 60px) 0 0; }

/* pricing --------------------------------------------------------------- */

.td-price { color: var(--color-accent-700); white-space: nowrap; }
.td-dur { color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.pricenotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 52px);
}
.note__t {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; margin: 0 0 10px;
}
.note__b {
  font-size: 15px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* areas ----------------------------------------------------------------- */

.areas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px;
  background: var(--color-divider);
}
.area {
  background: var(--color-bg); padding: 18px 4px;
  display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: start;
  font-size: 15.5px; line-height: 1.4;
}
/* 5px, not the 6px the service list uses. A one-instance value on the shared
   .bullet class would move both. */
.area .bullet { margin-top: 5px; }

/* about ----------------------------------------------------------------- */

.about {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.about__figure { margin: 0; }
.about .body {
  font-size: 16px; line-height: 1.68; margin: 0 0 18px; max-width: 48ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
/* Same specificity as the rule above, so the opening paragraph's size and full
   text colour only survive because this is declared second. Moving it up is a
   silent no-op, which is how it goes unnoticed. */
.about .body--lead { font-size: 17px; color: var(--color-text); }
.about .body--gap { margin-bottom: 30px; }
.stats {
  border-top: 2px solid var(--color-divider);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px; padding-top: 24px;
}
.stat__n {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 34px; color: var(--color-accent); margin: 0 0 6px -0.04em;
}
.stat__k {
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* reviews --------------------------------------------------------------- */

.review {
  margin: 0; padding: 30px 0; border-bottom: 2px solid var(--color-divider);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px clamp(24px, 4vw, 56px); align-items: start;
}
.review__cap {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.review__stars { display: block; color: var(--color-accent); letter-spacing: 0.1em; margin-bottom: 10px; }
.review__who { display: block; color: var(--color-text); margin-bottom: 4px; }
.review__job { display: block; }
/* Spans two tracks so the quote runs wide whatever auto-fit decides; on a
   narrow screen there is only one track and the span is harmless. */
.review__text { grid-column: span 2; font-size: 16.5px; line-height: 1.65; margin: 0; max-width: 62ch; }

/* faq ------------------------------------------------------------------- */

.qa {
  padding: 26px 0; border-bottom: 2px solid var(--color-divider);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px clamp(24px, 4vw, 56px); align-items: start;
}
.qa__q {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; margin: 0;
}
.qa__a {
  font-size: 15.5px; line-height: 1.65; margin: 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent); max-width: 56ch;
}

/* contact --------------------------------------------------------------- */

.contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 72px); align-items: start; padding-bottom: 20px;
}
.contact__lede { font-size: 16.5px; line-height: 1.65; max-width: 44ch; margin: 0 0 28px; }
.contact__phone {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; margin: 0 0 8px;
}
.contact__phone a { color: var(--color-text); }
.contact__meta {
  font-size: 15px; line-height: 1.7; margin: 0 0 20px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.contact__lic {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.sentbox { border: 2px solid var(--color-divider); padding: clamp(24px, 3vw, 40px); }
.sentbox__h {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 1.2; margin: 0 0 12px;
}
.sentbox__p {
  font-size: 15.5px; line-height: 1.65; margin: 0 0 22px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.form { border: 2px solid var(--color-divider); padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; }
.formnote {
  font-size: 12.5px; line-height: 1.5; margin: 0;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* ------------------------------------------------------------- footer -- */

.sitefoot { border-top: 2px solid var(--color-divider); margin-top: clamp(48px, 6vw, 84px); }
.sitefoot__grid {
  padding-block: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.sitefoot__name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 12px;
}
.sitefoot__body {
  font-size: 14.5px; line-height: 1.7; margin: 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}
.sitefoot__k {
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.sitefoot__links { display: grid; gap: 8px; font-size: 14.5px; }
/* No line-height. The export sets none here, so the line box is the body's
   1.55; adding 1.6 was a quiet 0.6px a line that the diff caught. */
.sitefoot__fine {
  padding-bottom: clamp(28px, 3vw, 40px);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* ---------------------------------------------------------- call bar --- */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-text); color: var(--color-bg);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px clamp(16px, 4vw, 40px);
}
.mobilebar__copy { font-size: 13.5px; line-height: 1.35; }
.mobilebar__dim { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.mobilebar__btn { flex: 0 0 auto; }