/* ============================================================================
   renewelectric — client-overrides.css (Run 40, conversion + re-skin)
   Approved direction: FULL-SITE dark re-skin per client blueprint/mockup
   (02-direction/reskin-direction.md, locked 2026-09-10).
   Auto-linked by wp-build-page.py AFTER captured CSS + static-overrides.css.

   2026-09-22 — INDUSTRIAL DARK pass (operator, from the dark homepage mockup).
   Four decisions, all explicit:
     · surfaces move from the source's blue-black (#101721/#000610) to NEUTRAL
       charcoal — #121212 body, pure black bands, #242424 cards/footer;
     · headings swap to a heavy grotesque (Archivo Black), uppercase;
     · buttons go from the site's 60px pills to ~3px, per the mockup. ⚠ This
       REVERSES the 2026-09-21 instruction "rounded like existing content" and
       the 60px measured off the client's live site — operator's call, recorded
       here because the next person WILL find the measurement and wonder;
     · body copy lightens to #d1d5db.
   Brand yellow stays #fcc624 — the source's own hex, and indistinguishable from
   the brief's #FFC629 (252,198,36 vs 255,198,41).

   Every value below still resolves from a token. Nothing is a literal.
   ========================================================================= */

:root {
  /* --- brand: unchanged, source-traceable ---------------------------------- */
  --ym-brand: #fcc624;
  --ym-brand-strong: #daa402;
  --ym-on-brand: #000000;       /* text on yellow (source socket pattern)      */

  /* --- surfaces: neutral industrial charcoal (mockup) ---------------------- */
  --ym-surface: #121212;        /* main body                                   */
  --ym-surface-deep: #000000;   /* pure black bands — why-choose, reviews, hero*/
  --ym-surface-raised: #242424; /* cards, distinct panels, footer              */
  --ym-hairline: #2f2f2f;       /* borders (derived one step off raised)       */

  /* --- ink ----------------------------------------------------------------- */
  --ym-ink: #ffffff;            /* headings                                    */
  --ym-ink-body: #d1d5db;       /* paragraph copy                              */
  --ym-ink-muted: #9aa0ab;      /* meta / fine print                           */

  /* --- type ---------------------------------------------------------------- */
  /* Archivo Black is the heavy grotesque; Josefin Sans (the site's own face)
     is the fallback, so a blocked webfont degrades to the previous design
     rather than to Helvetica. */
  /* Operator 2026-10-23: "i do not like the typography and button font, pick something better"
     → picked option A of three rendered pairings: Barlow Condensed (headings, buttons, labels)
     + Barlow (body). One family, so headings, buttons and copy read as one hand. Was Archivo
     Black + Josefin Sans (Karla before 2026-10-01). Barlow ships real weights, so nothing is
     faux-bold any more; the display weight is a token. */
  --ym-font-display: 'Barlow Condensed', 'Barlow', Helvetica, Arial, sans-serif;
  --ym-font-body: 'Barlow', Helvetica, Arial, sans-serif;
  --ym-font-ui: 'Barlow Condensed', 'Barlow', Helvetica, Arial, sans-serif;  /* buttons, nav CTA, labels, eyebrows */
  --ym-display-weight: 800;
  --ym-body-size: 18px;         /* operator 2026-10-01: main body copy 18px, normal weight (theme set 20px) */

  /* --- shape --------------------------------------------------------------- */
  --ym-radius-btn: 3px;
  --ym-radius-card: 4px;
  --ym-radius-img: 3px;

  /* spacing — operator 2026-10-01: equal section padding + breathing room */
  --ym-space-section: 50px;     /* every section, above AND below its content (source .content) */
  --ym-gap-eyebrow: 12px;       /* eyebrow label → its heading                  */
  --ym-gap-stack: 16px;         /* stacked heading lines                        */
  --ym-gap-heading: 24px;       /* heading → the copy / list it introduces      */
  --ym-gap-action: 32px;        /* above every button · under every yellow rule */
  --ym-hero-bar: 10px;          /* the source's full-width yellow bar under every hero */
  --ym-trustbar-pad: 14px;      /* the trust items' top/bottom padding inside that bar */
  --ym-container: 1800px;       /* the theme's content container (Avia: max-width 1800, 50px gutters; 85% under 768) */
  --ym-pattern-veil: .55;       /* dark veil over the CTA-band texture (2026-10-21 grit; was .94 over the power lines) */

  /* --- flip Enfold's light "main" palette to the dark scheme --- */
  --enfold-main-color-bg: var(--ym-surface);
  --enfold-main-color-bg2: var(--ym-surface-raised);
  --enfold-main-color-primary: var(--ym-brand);
  --enfold-main-color-secondary: var(--ym-brand-strong);
  --enfold-main-color-color: var(--ym-ink-body);
  --enfold-main-color-heading: var(--ym-ink);
  --enfold-main-color-meta: var(--ym-ink-body);
  --enfold-main-color-border: var(--ym-hairline);
  --enfold-main-color-iconlist: var(--ym-surface-raised);
  --enfold-main-color-button-border: var(--ym-brand-strong);
  --enfold-main-color-button-font: var(--ym-on-brand);

  /* --- alternate (was navy #002d54) → pure black band --- */
  --enfold-alternate-color-bg: var(--ym-surface-deep);
  --enfold-alternate-color-bg2: var(--ym-surface);
  --enfold-alternate-color-heading: var(--ym-ink);
  --enfold-alternate-color-meta: var(--ym-brand);
  --enfold-alternate-color-border: var(--ym-hairline);
  --enfold-alternate-color-iconlist: var(--ym-surface-raised);

  /* --- header / footer / socket: the source painted these #101721 directly,
         so they need their own overrides or they keep the old blue-black --- */
  --enfold-header-color-bg: var(--ym-surface);
  --enfold-header-color-color: var(--ym-ink-body);
  --enfold-header-color-heading: var(--ym-ink);
  --enfold-footer-color-bg: var(--ym-surface-raised);
  --enfold-footer-color-color: var(--ym-ink-body);
  --enfold-footer-color-heading: var(--ym-ink);
  --enfold-socket-color-bg: var(--ym-surface-deep);
  --enfold-socket-color-color: var(--ym-ink-muted);
}

/* Avia writes some surface colors as literals; re-state the flipped pair on the
   band wrappers so every section obeys the tokens. */
#top .main_color,
#top .main_color .site-background { background-color: var(--ym-surface); color: var(--ym-ink-body); }
#top .alternate_color { background-color: var(--ym-surface-deep); color: var(--ym-ink-body); }
#top .main_color h1, #top .main_color h2, #top .main_color h3,
#top .main_color h4, #top .main_color h5, #top .main_color h6 { color: var(--ym-ink); }
#top .alternate_color h1, #top .alternate_color h2, #top .alternate_color h3,
#top .alternate_color h4, #top .alternate_color h5, #top .alternate_color h6 { color: var(--ym-ink); }

/* Links inside dark content: brand yellow, AA 11:1 on both surfaces */
#top .main_color a:not(.avia-button),
#top .alternate_color a:not(.avia-button) { color: var(--ym-brand); }

/* Buttons: solid brand yellow with black label (source socket pattern),
   matching the mockup's CTA treatment. !important because Avia paints custom
   button colors from per-widget generated CSS that outranks a plain override. */
#top .avia-button,
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-subtle,
#top .avia-button.avia-color-custom {
  background-color: var(--ym-brand) !important;
  background-image: none !important;
  border-color: var(--ym-brand-strong) !important;
  color: var(--ym-on-brand) !important;
}
#top .avia-button:hover {
  background-color: var(--ym-brand-strong) !important;
  color: var(--ym-on-brand) !important;
}
#top .avia-button .avia_iconbox_title,
#top .avia-button .avia_button_icon { color: var(--ym-on-brand) !important; }

/* Hero phone button: outlined ghost over the video (mockup treatment) */
#top #av_section_1 .avia-button[href^="tel:"] {
  background-color: transparent !important;
  border: 1px solid var(--ym-ink) !important;
  color: var(--ym-ink) !important;
}
#top #av_section_1 .avia-button[href^="tel:"] .avia_iconbox_title,
#top #av_section_1 .avia-button[href^="tel:"] .avia_button_icon { color: var(--ym-ink) !important; }

/* Final CTA band (av_section_5): Avia paints a WHITE 0.9 color-overlay from
   per-widget CSS over the section's background photo — on the dark scheme that
   washes the band light and turns the white heading invisible. Re-tint dark. */
#top #av_section_5 .av-section-color-overlay {
  background-color: var(--ym-surface) !important;
  opacity: .88 !important;
}

/* Section-heading accent: short yellow underline (mockup treatment) */
#top .av-special-heading .special-heading-border { display: none; }
#top .main_color .av-special-heading-h2 .av-special-heading-tag::after,
#top .alternate_color .av-special-heading-h2 .av-special-heading-tag::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 12px;
  background: var(--ym-brand);
}
#top .modern-centered .av-special-heading-tag::after { margin-left: auto; margin-right: auto; }

/* ==================== HERO (home, av_section_1) ==================== */
/* Mockup: big two-line headline, yellow second line, division subline, 2 CTAs.
   Video background + dark overlay preserved from source. */
#top #av_section_1 .av-special-heading-h1 .av-special-heading-tag {
  color: var(--ym-ink);
  text-transform: uppercase;
  line-height: 1.04;
}
#top #av_section_1 .ym-hero-accent { color: var(--ym-brand); display: block; }
#top #av_section_1 .av-special-heading-h3 .av-special-heading-tag,
#top #av_section_1 .av-special-heading-h3 .av-special-heading-tag strong span {
  color: var(--ym-ink) !important;
}
/* hide the in-hero logo image (the header already carries the logo) */
#top #av_section_1 .avia-image-container { display: none; }

/* ==================== INDUSTRIAL DARK: type, shape, chrome ================
   Added 2026-09-22. Everything here is a RESTYLE — no copy, no structure, no
   content moves. Each rule says which part of the mockup it implements.
   ⚠ `!important` is load-bearing on this theme, not laziness: Enfold emits a
   per-widget stylesheet (`.av-<hash>` selectors, often `#top`-prefixed) for
   every element the customizer touched, and that beats a plain class rule.
   ========================================================================= */

/* --- headings: heavy grotesque, uppercase, white -------------------------- */
/* The mockup's headings are mass first, letterform second. Josefin Sans tops
   out at 700 and reads geometric-light at any size, so weight alone could not
   get there — the family had to change. */
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag,
#top .ym-card h3,
#top .ym-pillar h4 {
  font-family: var(--ym-font-display) !important;
  /* !important because Avia's per-widget CSS sets its own heading weight. (Under Archivo
     Black, one weight only, that was what stopped a faux double-bold; Barlow Condensed has
     a real 800.) */
  font-weight: var(--ym-display-weight) !important;
  /* Avia sets case on `.av-special-heading.<hash> .av-special-heading-tag`
     (1,2,0), which outranks the tag selectors above — h2 stayed sentence case
     until this was forced. */
  text-transform: uppercase !important;
  letter-spacing: .005em;
  line-height: 1.1;
  color: var(--ym-ink);
}
/* Archivo Black is wide; the source's h1 sizes were set for a narrower face,
   so the hero headline needs a touch less size to hold its line breaks. */
#top .av-special-heading-h1 .av-special-heading-tag { letter-spacing: -.01em; }

/* --- links inside HEADINGS ------------------------------------------------
   `/contact/` puts the phone number in an `<h3>` wrapped in `a.av-heading-link`,
   which Avia paints the source navy `#002d54` from per-widget CSS. On the new
   charcoal that measured **1.34:1** — an invisible phone number on the contact
   page, i.e. a dead conversion path that looks fine in a screenshot because the
   glyphs are there, just not distinguishable. Brand yellow, like every other
   link on a dark surface.
   ⚠ The navy sits on a `<span>` INSIDE the anchor, not on the anchor — colouring
   only `a` left the number exactly as it was. Descendants have to be named. */
#top .av-special-heading-tag a, #top .av-special-heading-tag a *,
#top a.av-heading-link, #top a.av-heading-link *,
#top h1 a, #top h1 a *, #top h2 a, #top h2 a *,
#top h3 a, #top h3 a *, #top h4 a, #top h4 a * { color: var(--ym-brand) !important; }

/* --- body copy ------------------------------------------------------------ */
/* Deliberately NOT a `#top .main_color p { color: … }` rule. That was tried and
   it repainted the text inside the home's three BRAND-YELLOW service columns
   light gray on yellow — 1.08:1, invisible — because it outranked the per-widget
   colour Avia sets on them. `--ym-ink-body` already reaches every paragraph by
   INHERITANCE from `.main_color`/`.alternate_color`, so the token alone does the
   job and leaves anything painted on a brand fill alone. Nothing to add here;
   the note is the point. */

/* --- shape: the mockup's buttons are rectangles, not the site's 60px pills -
   ⚠ Reverses the 2026-09-21 "rounded like existing content" instruction, on
   the operator's explicit 2026-09-22 call. The 60px lives in the captured
   Avia merged stylesheet (`#top .avia-button{border-radius:60px}`), which is
   why every button selector has to be named again here. */
#top .avia-button,
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-subtle,
#top .avia-button.avia-color-custom,
#top input[type="submit"],
#top .ym-btn,
#wrap_all #header.header_color .av-menu-button-colored > a .avia-menu-text {
  border-radius: var(--ym-radius-btn) !important;
}
#top .ym-card,
#top .ym-gc__img img,
#top .av-masonry-entry .av-masonry-image-container,
#top .avia-image-container img,
#top .ym-ribbon { border-radius: var(--ym-radius-card) !important; }

/* --- buttons: primary solid yellow / secondary yellow outline ------------- */
/* Primary is already solid yellow with a black label (further up this file).
   The mockup's SECONDARY is a dark field with a yellow rule and yellow label —
   the hero phone CTA was a WHITE outline, which on the new charcoal reads as a
   third colour rather than as the brand. */
#top #av_section_1 .avia-button[href^="tel:"] {
  border-color: var(--ym-brand) !important;
  color: var(--ym-brand) !important;
}
#top #av_section_1 .avia-button[href^="tel:"] .avia_iconbox_title,
#top #av_section_1 .avia-button[href^="tel:"] .avia_button_icon {
  color: var(--ym-brand) !important;
}
#top #av_section_1 .avia-button[href^="tel:"]:hover {
  background-color: var(--ym-brand) !important;
  color: var(--ym-on-brand) !important;
}
#top #av_section_1 .avia-button[href^="tel:"]:hover .avia_iconbox_title,
#top #av_section_1 .avia-button[href^="tel:"]:hover .avia_button_icon {
  color: var(--ym-on-brand) !important;
}
/* every button label: bold, uppercase, tight — the mockup's CTA voice */
#top .avia-button, #top input[type="submit"], #top .ym-btn {
  font-family: var(--ym-font-ui) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- header: solid charcoal, white links, yellow CTA ---------------------- */
/* The source header is transparent over the hero. The mockup's is a solid bar
   that the hero photo runs UNDER, which is also what makes the white nav legible
   over a bright photo instead of depending on the image behind it. */
#top #header, #top #header.header_color,
#top #header_main, #top #header_main .container,
#top #header_meta {
  background-color: var(--ym-surface) !important;
  border-color: var(--ym-hairline) !important;
}
#top #header .av-main-nav > li > a,
#top #header .av-main-nav > li > a .avia-menu-text {
  color: var(--ym-ink) !important;
  font-family: var(--ym-font-body) !important;
  font-weight: 700;
  letter-spacing: .02em;
}
#top #header .av-main-nav > li > a:hover .avia-menu-text,
#top #header .av-main-nav > li.current-menu-item > a .avia-menu-text {
  color: var(--ym-brand) !important;
}
/* the header CTA pill → solid yellow block with a black label */
#wrap_all #header.header_color .av-menu-button-colored > a .avia-menu-text {
  background-color: var(--ym-brand) !important;
  color: var(--ym-on-brand) !important;
  font-weight: 700;
}

/* --- hero: dark gradient so white + yellow type pops ---------------------- */
/* The source overlays a flat tint. A bottom-weighted gradient keeps the photo
   readable at the top and gives the headline a dark field to sit on. */
#top #av_section_1 .av-section-color-overlay {
  /* A left-weighted gradient was tried first, straight off the mockup — but the
     mockup's hero copy is LEFT-aligned and ours is CENTRED (content stays put),
     so the dark end sat where there was no text. Vertical instead: the photo
     survives at the top, the headline gets a dark field, the CTAs get the
     darkest part. */
  background-image: linear-gradient(
      to bottom,
      rgba(0,0,0,.52) 0%, rgba(0,0,0,.68) 45%,
      rgba(0,0,0,.80) 78%, rgba(0,0,0,.86) 100%) !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* --- cards: raised charcoal, yellow accent, white title, gray body -------- */
#top .ym-card,
#top .flex_column.av-zero-column-padding .avia_textblock,
#top .iconbox.iconbox_top {
  background-color: var(--ym-surface-raised);
  border: 1px solid var(--ym-hairline);
}
/* The charcoal textblock (home "Why Choose", contact intro) painted its box with
   the copy flush against the edge — operator 2026-09-23: "no padding". Own rule,
   not on the shared selector above: #top .ym-card sets its own padding lower down
   at a lower specificity and would lose to a padding here. */
#top .flex_column.av-zero-column-padding .avia_textblock { padding: 28px 32px; }
#top .flex_column.av-zero-column-padding .avia_textblock p:last-child { margin-bottom: 0; }
@media only screen and (max-width: 767px) {
  #top .flex_column.av-zero-column-padding .avia_textblock { padding: 22px 22px; }
}
#top .ym-card p, #top .iconbox p { color: var(--ym-ink-body); }
#top .iconbox .iconbox_icon, #top .av_font_icon .av-icon-char { color: var(--ym-brand) !important; }

/* --- Trustindex reviews: the vendor ships WHITE cards ---------------------
   The widget was the largest light surface left on the site — white `.ti-inner`
   cards with black type, sitting on the pure-black reviews band. The brief is
   explicit that no primary light backgrounds survive, so the cards take the
   raised charcoal.
   Safe to override by class: the widget's stylesheet is served from OUR build
   (`data-css-url="/css/source/…trustindex…css"`, localized at capture), so these
   class names cannot drift under us the way a CDN-hosted widget's would.
   ⚠ Reviews are REAL Google reviews rendered by the vendor — restyling the
   container only. No review text, rating or count is ours to touch. */
#top .ti-widget .ti-inner {
  background-color: var(--ym-surface-raised) !important;
  /* the card's own `color` is black and every descendant inherits it — repainting
     the card without this leaves black type on charcoal */
  color: var(--ym-ink-body) !important;
  border: 1px solid var(--ym-hairline) !important;
  border-radius: var(--ym-radius-card) !important;
}
#top .ti-widget .ti-name,
#top .ti-widget .ti-review-header,
#top .ti-widget .ti-profile-details { color: var(--ym-ink) !important; }
#top .ti-widget .ti-review-content,
#top .ti-widget .ti-review-text,
#top .ti-widget .ti-inner p { color: var(--ym-ink-body) !important; }
#top .ti-widget .ti-date { color: var(--ym-ink-muted) !important; }
#top .ti-widget .ti-read-more a { color: var(--ym-brand) !important; }

/* --- trust / rating: yellow stars ---------------------------------------- */
#top .ti-star, #top .ti-stars svg, #top [class*="trustindex"] .ti-star,
#top .avia-rating-star.avia-rating-star-full,
#top .ym-stars { color: var(--ym-brand) !important; fill: var(--ym-brand) !important; }

/* --- footer ---------------------------------------------------------------
   This build has NO Enfold `#footer` / `#socket` — measured, both absent. The
   page simply ends with a map section and a code-block carrying the copyright
   line, so rules written against those ids would have been dead CSS that LOOKED
   like the footer was handled. The band colours come from the section tokens. */
#top .avia_codeblock_section p { color: var(--ym-ink-muted); }

/* --- the three service columns → dark cards (mockup's card treatment) ------
   These are the home's brand-YELLOW columns. The mockup's equivalent is a
   raised charcoal card with a yellow accent and white title, so they change
   surface — the yellow stays in the accents, not the field. Selected by
   section + column width, never by Avia's generated hash. */
#top #av_section_3 .flex_column.av_one_third {
  background-color: var(--ym-surface-raised) !important;
  border: 1px solid var(--ym-hairline);
  border-radius: var(--ym-radius-card) !important;
}
#top #av_section_3 .flex_column.av_one_third h1,
#top #av_section_3 .flex_column.av_one_third h2,
#top #av_section_3 .flex_column.av_one_third h3,
#top #av_section_3 .flex_column.av_one_third h4,
#top #av_section_3 .flex_column.av_one_third .av-special-heading-tag,
#top #av_section_3 .flex_column.av_one_third a:not(.avia-button) {
  color: var(--ym-ink) !important;   /* was the source's dark navy, unreadable on charcoal */
}
#top #av_section_3 .flex_column.av_one_third p { color: var(--ym-ink-body) !important; }
#top #av_section_3 .flex_column.av_one_third .av-icon-char,
#top #av_section_3 .flex_column.av_one_third .iconbox_icon { color: var(--ym-brand) !important; }

/* --- the emergency CTA panel: source navy #002d54 → raised charcoal --------
   Avia paints it from per-widget CSS, so it survived the colorset flip and sat
   on the new charcoal as an off-brand blue block. */
/* Pure black, not raised charcoal: measured, the band behind it is ALSO #242424,
   so a raised panel made the CTA disappear into its own section — the navy had
   been doing the separating. Black + a yellow rule reads as the mockup's final
   ask instead of as part of the list beside it. */
#top #av_section_6 .flex_column.av_two_fifth {
  background-color: var(--ym-surface-deep) !important;
  border-left: 4px solid var(--ym-brand) !important;
  border-radius: var(--ym-radius-card) !important;
}

/* --- icon discs: white → brand yellow with a black glyph ------------------- */
#top .iconlist_icon {
  background-color: var(--ym-brand) !important;
  color: var(--ym-on-brand) !important;
}

/* ==================== NEW COMPONENTS (agent-authored, token-only) ========= */

/* --- trust bar --- */
.ym-trustbar {
  background: var(--ym-surface-deep);
  border-top: 1px solid var(--ym-hairline);
  border-bottom: 1px solid var(--ym-hairline);
  padding: 26px 0;
}
.ym-trustbar__inner {
  max-width: 1310px;
  margin: 0 auto;
  padding: 0 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ym-trustbar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  color: var(--ym-ink);
  font-family: var(--ym-font-ui);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
a.ym-trustbar__item:hover { color: var(--ym-brand); }
.ym-trustbar__item svg { width: 30px; height: 30px; stroke: var(--ym-brand); flex: none; }
.ym-trustbar__sub {
  display: block;
  font-family: var(--ym-font-body);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ym-ink-body);
  margin-top: 3px;
}

/* --- division cards --- */
.ym-divisions {
  background: var(--ym-surface);
  padding: 70px 0 80px;
}
.ym-divisions__inner { max-width: 1310px; margin: 0 auto; padding: 0 50px; }
.ym-divisions__grid {
  display: grid;
  /* three divisions since 2026-10-21 (Industrial removed, client checklist) */
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.ym-card {
  background: var(--ym-surface-raised);
  border: 1px solid var(--ym-hairline);
  border-top: 3px solid var(--ym-brand);
  padding: 34px 28px 30px;
}
.ym-card__icon {
  width: 56px; height: 56px;
  border: 2px solid var(--ym-brand);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.ym-card__icon svg { width: 28px; height: 28px; stroke: var(--ym-brand); }
#top .ym-card h3 {
  font-size: 22px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.ym-card p {
  color: var(--ym-ink-body);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
/* Operator 2026-09-23: the 14px list read as fine print next to the site's 20px
   Karla body. 18px keeps every item on one line inside a 262px card at 1440; the
   marker hangs in its own gutter so a wrapped item aligns with its first line
   instead of under the arrow. */
.ym-card__list {
  margin: 16px 0 0; padding: 0;
  list-style: none;
  color: var(--ym-ink-body);
  font-size: 18px;
  line-height: 1.5;
}
.ym-card__list li { list-style: none; margin: 0 0 9px; padding: 0 0 0 20px; position: relative; }
.ym-card__list li:last-child { margin-bottom: 0; }
.ym-card__list li::before { content: "▸"; color: var(--ym-brand); position: absolute; left: 0; top: 0; }

/* --- featured-projects heading (above the masonry) --- */
.ym-projects-head { text-align: center; padding: 64px 20px 8px; background: var(--ym-surface); }
#top .ym-projects-head h2 {
  color: var(--ym-ink);
  text-transform: uppercase;
  margin: 0;
}
.ym-projects-head h2::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 12px auto 0;
  background: var(--ym-brand);
}
.ym-eyebrow {
  color: var(--ym-brand);
  font-family: var(--ym-font-ui);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 15px;
  margin: 0 0 6px;
}

/* --- why-choose pillars --- */
.ym-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.ym-pillar { text-align: center; padding: 10px 8px; }
.ym-pillar .ym-card__icon { margin: 0 auto 18px; }
.ym-pillar h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.ym-pillar p { color: var(--ym-ink-body); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* --- reviews band (real captured Google reviews; widget dead on live) --- */
.ym-reviews {
  max-width: 1310px;
  margin: 0 auto;
  padding: 56px 50px 64px;
  text-align: center;
}
#top .ym-reviews h2 { color: var(--ym-ink); text-transform: uppercase; margin: 0; }
.ym-reviews h2::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 12px auto 0;
  background: var(--ym-brand);
}
.ym-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
  text-align: left;
}
.ym-review {
  background: var(--ym-surface-raised);
  border: 1px solid var(--ym-hairline);
  padding: 28px 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ym-review__stars { color: var(--ym-brand); font-size: 18px; letter-spacing: 3px; }
.ym-review blockquote { margin: 14px 0 18px; padding: 0; border: 0; }
.ym-review blockquote p {
  color: var(--ym-ink-body);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  font-style: normal;
}
.ym-review figcaption {
  margin-top: auto;
  color: var(--ym-ink);
  font-family: var(--ym-font-ui);
  font-weight: 700;
}
.ym-review figcaption span {
  display: block;
  color: var(--ym-ink-body);
  font-family: var(--ym-font-body);
  font-weight: 400;
  font-size: 13px;
}

/* --- GC / contractor CTA band --- */
.ym-gc {
  background: var(--ym-surface-deep);
  border-top: 1px solid var(--ym-hairline);
  border-bottom: 1px solid var(--ym-hairline);
  padding: 70px 0;
}
.ym-gc__inner {
  max-width: 1310px; margin: 0 auto; padding: 0 50px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center;
}
#top .ym-gc h2 { color: var(--ym-ink); text-transform: uppercase; margin: 0 0 16px; }
.ym-gc p { color: var(--ym-ink-body); line-height: 1.7; margin: 0 0 26px; }
.ym-gc__img img { width: 100%; height: auto; display: block; border: 1px solid var(--ym-hairline); }
.ym-gc__note {
  display: block; margin-top: 14px;
  color: var(--ym-ink-body); font-size: 14px;
}
.ym-btn {
  display: inline-block;
  background: var(--ym-brand);
  color: var(--ym-on-brand) !important;
  border: 1px solid var(--ym-brand-strong);
  font-family: var(--ym-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15px;
  padding: 15px 30px 13px;
  text-decoration: none;
}
.ym-btn:hover { background: var(--ym-brand-strong); }

/* --- header CTA --- */
.ym-header-cta {
  display: inline-block;
  background: var(--ym-brand);
  color: var(--ym-on-brand) !important;
  font-family: var(--ym-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 11px 18px 9px;
  margin: 0 0 0 18px;
  align-self: center;
}
.ym-header-cta:hover { background: var(--ym-brand-strong); }
#header .av-main-nav > li.ym-header-cta-li > a { padding: 0; margin: 0; }

/* --- responsive --- */
@media only screen and (max-width: 989px) {
  .ym-trustbar__inner, .ym-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .ym-gc__inner { grid-template-columns: 1fr; }
  .ym-reviews__grid { grid-template-columns: 1fr; }
}
/* three cards never split 2 + 1: they stay three-up down to 768, then stack */
@media only screen and (max-width: 767px) {
  .ym-divisions__grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 479px) {
  .ym-trustbar__inner, .ym-divisions__grid, .ym-pillars__grid { grid-template-columns: 1fr; }
  .ym-trustbar__inner, .ym-divisions__inner, .ym-gc__inner { padding: 0 25px; }
  .ym-reviews { padding: 44px 25px 52px; }
  .ym-trustbar__item { justify-content: flex-start; }
}

/* Header CTA needs to outrank Enfold's #header nav anchor styles */
#top #header .ym-header-cta-li > a.ym-header-cta {
  background: var(--ym-brand) !important;
  color: var(--ym-on-brand) !important;
  padding: 11px 18px 9px !important;
  margin: 0 0 0 14px;
  line-height: 1 !important;
  border: 0;
}
#top #header .ym-header-cta-li > a.ym-header-cta:hover { background: var(--ym-brand-strong) !important; }

/* Certified-installer badge (Generac) is dark-on-transparent art — give it a
   light chip so it stays legible on the dark scheme (never CSS-filter a brand
   asset). */
/* 2026-10-21: matched by the BADGE file, not "generac": the client's own install photos
   (re-new-generac-*.jpg) were getting the badge's white mat. */
#top .main_color img[src*="generac-copy"],
#top .alternate_color img[src*="generac-copy"] {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 6px;
}

/* Final CTA band: the source textblock carries inline navy colors on its
   closing CTA line — unreadable on dark. Re-point at the brand. */
#top #av_section_5 .avia_textblock a,
#top #av_section_5 .avia_textblock a strong,
#top #av_section_5 .avia_textblock strong span { color: var(--ym-brand) !important; }

/* Header CTA: Enfold nav <li> anchors inherit the header's full-height
   line-box — pin the pill to the middle instead of a full-height slab. */
#top #header .ym-header-cta-li { display: flex; align-items: center; height: 100%; }
#top #header .ym-header-cta-li > a.ym-header-cta {
  display: inline-block;
  height: auto !important;
  line-height: 1 !important;
  border-radius: 3px;
}
@media only screen and (max-width: 989px) {
  /* burger layout: hide the desktop pill (the burger menu lists Contact) */
  #top #header .ym-header-cta-li { display: none; }
}

/* Mobile hero: 55px uppercase "CHATTANOOGA." overflows a 390px viewport */
@media only screen and (max-width: 767px) {
  #top #av_section_1 .av-special-heading-h1 .av-special-heading-tag { font-size: 34px; }
}

/* ==== 2026-09-11 revival additions ==================================== */
/* Avia paints WHITE 0.9 color-overlays over section background photos on the
   inner pages too (av_section_4 on /electrical-installation/, …) — on the dark
   scheme they wash the band light underneath white headings. Generalized from
   the av_section_5 rule above: every overlay re-tints dark. */
#top .av-section-color-overlay {
  background-color: var(--ym-surface) !important;
  opacity: .88 !important;
}

/* Header: the division nav (6 items + estimate pill) is wider than the source
   trio — without this the pill wraps under the logo onto the hero. Tighten
   item padding/tracking on desktop widths so the row stays single-line. */
#top #header .av-main-nav > li > a { padding: 0 11px; }
/* Operator 2026-09-23: "nav menu text too large". The captured theme CSS sets the nav
   at 24px and the CURRENT item at 28px (`#top #header .av-main-nav > li.current-menu-item
   > a`), which also outranked the 13px rule below on every page's own item. One size for
   every item — the yellow already marks the current page. */
#top #header .av-main-nav > li > a,
#top #header .av-main-nav > li.current-menu-item > a { font-size: 16px; }
@media only screen and (max-width: 1350px) {
  #top #header .av-main-nav > li > a,
  #top #header .av-main-nav > li.current-menu-item > a { padding: 0 7px; font-size: 14px; }
}

/* Form fields (contact page): Avia leaves inputs transparent with #222 ink and
   borders — invisible on dark. Raised surface + light ink + visible borders. */
#top .main_color input[type='text'],
#top .main_color input[type='email'],
#top .main_color input[type='tel'],
#top .main_color input[type='url'],
#top .main_color input[type='number'],
#top .main_color input[type='search'],
#top .main_color textarea,
#top .main_color select {
  background-color: var(--ym-surface-raised) !important;
  color: var(--ym-ink) !important;
  border-color: var(--ym-hairline) !important;
}
#top .main_color input::placeholder,
#top .main_color textarea::placeholder { color: #9aa0ab; opacity: 1; }
#top .main_color select { -webkit-text-fill-color: var(--ym-ink); }
#top .main_color input[type='submit'],
#top .main_color #submit,
#top .main_color .button {
  background-color: var(--ym-brand) !important;
  color: var(--ym-on-brand) !important;
  border-color: var(--ym-brand-strong) !important;
}
#top .main_color input[type='submit']:hover,
#top .main_color #submit:hover,
#top .main_color .button:hover {
  background-color: var(--ym-brand-strong) !important;
  color: var(--ym-on-brand) !important;
}

/* mobile: the uppercase headlines overflow 390px at Avia's sizes — clamp ------
   The hero h1 already needed this. The industrial-dark pass made it worse and
   wider: Archivo Black sets MUCH wider than Josefin Sans at the same px, and the
   source's sizes were chosen for the narrow face — measured at 390px, the h2
   "YOUR TRUSTED LOCAL PARTNER FOR RESIDENTIAL & COMMERCIAL ELECTRICAL NEEDS" ran
   off the right edge and clipped mid-word. Every heading level gets a ceiling. */
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag { overflow-wrap: break-word; }

@media only screen and (max-width: 767px) {
  #top #av_section_1 .av-special-heading-h1 .av-special-heading-tag,
  #top h1, #top .av-special-heading-h1 .av-special-heading-tag {
    font-size: 30px !important;
  }
  #top h2, #top .av-special-heading-h2 .av-special-heading-tag,
  #top .av-special-heading-h2 .av-special-heading-tag .heading-char {
    font-size: 25px !important;
  }
  #top h3, #top .av-special-heading-h3 .av-special-heading-tag,
  #top .av-special-heading-h3 .av-special-heading-tag strong span {
    font-size: 19px !important;
  }
  #top h4, #top h5, #top h6 { font-size: 17px !important; }
  #top .ym-card h3 { font-size: 18px !important; }
}

/* --- the SOURCE NAVY that outlived the restyle (service + division pages) --
   Found by probes/find-navy-masonry.mjs on 2026-09-22 AFTER the restyle read as
   done: `/` and `/contact/` were clean, but all seven service + division pages
   still painted #002d54 in two places, both from Avia's per-widget CSS:
     (a) the masonry gallery container
         `#top .av-masonry.av-<hash>{background-color:#002d54}` — navy gutters
         between the project photos;
     (b) the "Why Choose Us" one-fourth column
         `.flex_column.av-<hash>{border-radius:60px;background-color:#002d54}`
         — navy AND the 60px pill retired on 09-22.
   Structural selectors, no hashes. The gallery container goes transparent so the
   band's own surface shows through the gutters; the panel becomes the same
   raised-charcoal card as the home's service columns (same tokens, same radius).
   ⚠ Both rules are scoped OFF the home on purpose: the home's own masonry paints
   its own per-widget fill and its section 2 also has a one-fourth column after a
   three-fourth (the badge column) — the approved home must not move. /contact/
   has five one-fourths, none after a three-fourth: measured 0 collateral. */
#top:not(.home) .av-masonry { background-color: transparent !important; }
#top:not(.home) #av_section_2 .flex_column.av_one_fourth.el_after_av_three_fourth {
  background-color: var(--ym-surface-raised) !important;
  border: 1px solid var(--ym-hairline);
  border-radius: var(--ym-radius-card) !important;
}

/* --- /blog + /blog/<slug> (client request 2026-09-23) ----------------------
   Shim-rendered blog on the industrial-dark theme. Markup comes from
   08-blog/build-blog-page.py (chrome cloned from the thank-you page); the
   widget's `.ym-blog__*` / `.ym-post__*` classes carry no default styling, so
   everything is set here against the site tokens. Cards mirror the home's 5D
   division cards: charcoal, hairline, 4px, photo on top, yellow read-more. */
.ym-blog, .ym-post {
  background: var(--ym-surface);
  color: var(--ym-ink-body);
  font-family: var(--ym-font-body);
  font-size: 17px; line-height: 1.6;
  padding: 64px 0 80px;
}
.ym-blog *, .ym-blog *::before, .ym-blog *::after,
.ym-post *, .ym-post *::before, .ym-post *::after { box-sizing: border-box; }
.ym-blog__inner { max-width: 1310px; margin: 0 auto; padding: 0 50px; }
.ym-post__inner { max-width: 46em; margin: 0 auto; padding: 0 50px; }
.ym-blog__eyebrow, .ym-post__date {
  margin: 0 0 6px; text-align: center;
  font-family: var(--ym-font-ui);
  font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ym-brand);
}
#top .ym-blog__heading, #top .ym-post__title {
  font-family: var(--ym-font-display);
  font-weight: var(--ym-display-weight); text-transform: uppercase; letter-spacing: .01em;
  color: var(--ym-ink); line-height: 1.1;
  margin: 0 0 12px;
}
#top .ym-blog__heading { font-size: clamp(30px, 4vw, 46px); text-align: center; }
#top .ym-post__title { font-size: clamp(26px, 3.4vw, 40px); text-align: left; }
.ym-blog__intro { text-align: center; margin: 0 auto 44px; max-width: 46em; color: var(--ym-ink-body); }
.ym-blog__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.ym-blog__empty { grid-column: 1 / -1; text-align: center; color: var(--ym-ink-muted); margin: 24px 0; }
.ym-blog__card {
  min-width: 0; display: flex; flex-direction: column;
  background: var(--ym-surface-raised);
  border: 1px solid var(--ym-hairline);
  border-radius: var(--ym-radius-card);
  overflow: hidden;
}
.ym-blog__card-imglink { display: block; }
.ym-blog__card-img { display: block; width: 100%; height: 190px; object-fit: cover; }
.ym-blog__card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.ym-blog__card-date {
  margin: 0 0 8px;
  font-family: var(--ym-font-ui);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ym-ink-muted);
}
#top .ym-blog__card-title {
  font-family: var(--ym-font-display);
  font-weight: var(--ym-display-weight); text-transform: uppercase; letter-spacing: .01em;
  font-size: 19px; line-height: 1.25; margin: 0 0 10px;
}
#top .ym-blog__card-title a { color: var(--ym-ink) !important; text-decoration: none; }
#top .ym-blog__card-title a:hover { color: var(--ym-brand) !important; }
.ym-blog__card-excerpt { margin: 0 0 14px; font-size: 15.5px; color: var(--ym-ink-body); }
.ym-blog__card-more { margin: auto 0 0; padding-top: 6px; }
#top .ym-blog__card-more a, #top .ym-post__back a, #top .ym-post__body a {
  color: var(--ym-brand) !important;
  font-family: var(--ym-font-ui);
  font-weight: 700; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none;
}
#top .ym-blog__card-more a:hover, #top .ym-post__back a:hover { text-decoration: underline; }
@media only screen and (max-width: 989px) { .ym-blog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width: 767px) {
  .ym-blog, .ym-post { padding: 44px 0 56px; }
  .ym-blog__inner, .ym-post__inner { padding: 0 25px; }
  .ym-blog__list { grid-template-columns: 1fr; }
}

/* single post */
.ym-post__back { margin: 0 0 28px; }
.ym-post__date { text-align: left; margin: 0 0 22px; }
.ym-post__img { width: 100%; height: auto; display: block; border-radius: var(--ym-radius-img); margin: 0 0 26px; border: 1px solid var(--ym-hairline); }
.ym-post__body { font-size: 17px; }
.ym-post__body p { margin: 0 0 1.1em; color: var(--ym-ink-body); }
#top .ym-post__body h2, #top .ym-post__body h3, #top .ym-post__body h4 {
  font-family: var(--ym-font-display);
  font-weight: var(--ym-display-weight); text-transform: uppercase; letter-spacing: .01em;
  color: var(--ym-ink); line-height: 1.2; margin: 1.5em 0 .5em;
}
#top .ym-post__body h2 { font-size: 26px; }
#top .ym-post__body h3 { font-size: 21px; }
#top .ym-post__body h4 { font-size: 18px; }
#top .ym-post__body a {
  font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none;
  text-decoration: underline;
}
.ym-post__body img { max-width: 100%; height: auto; border-radius: var(--ym-radius-img); }
.ym-post__body ul, .ym-post__body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.ym-post__body li { margin: 0 0 .35em; }
.ym-post__body blockquote {
  margin: 1.4em 0; padding: 14px 22px;
  border-left: 4px solid var(--ym-brand);
  background: var(--ym-surface-raised);
  color: var(--ym-ink);
}
.ym-post__body figure { margin: 1.4em 0; }
.ym-post__body figcaption { font-size: 14px; color: var(--ym-ink-muted); margin-top: 6px; }
.ym-post__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; }
.ym-post__body th, .ym-post__body td { border: 1px solid var(--ym-hairline); padding: 8px 10px; text-align: left; }
.ym-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ==== 2026-10-01 operator: equal section padding + breathing room ==========
   "all sections on the site should have equal padding on the top and bottom.
   reference the source site for the correct pixels" + "several elements on the
   site … are packed closely together. things need a bit more breathing room."
   Decisions (operator, 2026-10-01): 50 / 50 truly equal · moderate spacing
   (eyebrow 12 · stacked headings 16 · heading → copy 24 · above a button and under
   a yellow rule 32) · dark masonry gutters · the 10px black strip removed.
   Measured on re-newelectric.com 2026-10-01: every Avia section's .content is
   50px top AND bottom; the bottoms only READ 55–72 because the last element's own
   margin (a <p>'s 17px, a button's 5px) stacked on top of the padding. Gaps here
   are minimums — a roomier gap that already exists is left alone. Checked by
   probes/measure-section-spacing.mjs + probes/breathing-room-check.mjs. */

/* --- 1. sections: 50 above and 50 below the VISIBLE content ----------------- */
/* the bottom-most element's own margin, down the last-child chain. Avia emits
   <style>/<br> as trailing siblings, and a stray `</p>` in the captured markup
   becomes an EMPTY <p> whose 17px margin would otherwise be "the last element" —
   hence the `of` filter, and the empty <p> itself zeroed. `.container` is not a
   direct child on photo sections (it sits inside .av-section-color-overlay-wrap). */
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) { margin-bottom: 0 !important; }
#top .avia-section .content p:empty { margin: 0 !important; }
/* …but not inside a button ROW: its buttons are inline-blocks on one baseline, and
   stripping Avia's 5px from only the last one dropped it 6px below its sibling
   (hero "(423) 680-2682" | "Get an Estimate"). Restore Avia's own value. */
#top #wrap_all .avia-buttonrow-wrap > .avia-button { margin-bottom: 5px !important; } /* 2 ids: outranks the chain above */
/* multi-column text (CSS columns): the LOWEST line is often in the first column, not
   the last child, so the chain misses it. Space its paragraphs from the top only —
   the gap between them is unchanged (17px either way), nothing trails the block. */
#top .avia-section .av_multi_colums > p { margin-bottom: 0 !important; }
/* side-by-side columns (an equal-height row): the TALLEST column sets the band's
   bottom, and it is not always the last one (Service Areas: the middle list column
   is taller than the emergency panel) — so every column's own end, too */
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)),
#top .avia-section .container > .content .flex_column_table > .flex_column > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) > :nth-last-child(1 of :not(style, script, br, p:empty)) { margin-bottom: 0 !important; }

/* the generated pages (blog list / post, thank-you, 404) sit outside Avia:
   same 50 / 50, and their last line's margin dropped */
#top .ym-blog, #top .ym-post { padding: var(--ym-space-section) 0; }
#top .ym-blog__inner > :last-child, #top .ym-blog__list > :last-child,
#top .ym-post__inner > :last-child, #top .ym-post__body > :last-child { margin-bottom: 0; }
#top .ym-util { padding: var(--ym-space-section) 24px; }
#top .ym-util > :last-child, #top .ym-util-body > :last-child { margin-bottom: 0; }
#top .ym-blog__eyebrow { margin-bottom: var(--ym-gap-eyebrow); }

/* inner-page title banners: the subtitle h2 kept the hidden border's 10px */
#top .avia-section .av-special-heading { padding-bottom: 0 !important; }

/* home: Featured Projects head (was 64 above) — and the yellow rule sits
   --ym-gap-action above the photos (the masonry's own 15px gutter is part of it) */
.ym-projects-head { padding: var(--ym-space-section) 20px calc(var(--ym-gap-action) - 15px); }
.ym-eyebrow { line-height: 1.3; margin-bottom: var(--ym-gap-eyebrow); }

/* home: the GC photo panel is its own band — 96 → 50 */
#top .ym-gc--overlay { padding-top: var(--ym-space-section); padding-bottom: var(--ym-space-section); }

/* home: the yellow ribbon shares the intro's #121212 surface, so its band takes
   the 50 ABOVE the pill and the intro's own 50 is the space below it */
/* (the ribbon is now the yellow trust bar under every hero — see the trust-bar block below) */

/* --- 2. the 10px black strip: empty Avia layout rows (under the hero, above
   Service Areas) — a spacer with nothing in it, painted socket-black ---------- */
#top .av-layout-grid-container:not(:has(.flex_cell_inner *)) { display: none; }

/* --- 3. masonry gutters: dark on every page, home included (the earlier rule
   above left the home's #e0e0e0; operator 2026-10-01: make them dark) -------- */
#top .av-masonry { background-color: transparent !important; }

/* --- 4. breathing room inside sections ------------------------------------
   !important on the heading margins: Avia's per-widget CSS writes
   `#top .av-special-heading.av-<hash> { margin: 0 }` (1,2,0) on every heading, and
   the old spacing came from a 10px padding we zero above. */
/* heading → the copy it introduces */
#top .av-special-heading { margin-bottom: var(--ym-gap-heading) !important; }
#top .av-special-heading .av-subheading_below { margin-top: var(--ym-gap-heading) !important; }
/* stacked heading lines ("Need emergency…" → "Call us now!", title → subtitle) */
#top .av-special-heading:has(+ .av-special-heading, + style + .av-special-heading) { margin-bottom: var(--ym-gap-stack) !important; }
#top .av-special-heading + .av-special-heading .av-special-heading-tag,
#top .av-special-heading + style + .av-special-heading .av-special-heading-tag { padding-top: 0 !important; }
/* under a yellow rule */
#top .main_color .av-special-heading-h2,
#top .alternate_color .av-special-heading-h2,
#top :is(.main_color, .alternate_color) .av-special-heading-h2:has(+ .av-special-heading, + style + .av-special-heading) { margin-bottom: var(--ym-gap-action) !important; }
#top .main_color .av-special-heading-h2 .av-subheading_below,
#top .alternate_color .av-special-heading-h2 .av-subheading_below { margin-top: var(--ym-gap-action) !important; }
/* above every button (single buttons and button rows) that follows content */
#top .av-special-heading:has(+ :is(.avia-button-wrap, .avia-buttonrow-wrap)),
#top .avia_textblock:has(+ :is(.avia-button-wrap, .avia-buttonrow-wrap)) { margin-bottom: 0 !important; }
#top :not(.avia-button-wrap, .avia-buttonrow-wrap) + :is(.avia-button-wrap, .avia-buttonrow-wrap) { margin-top: var(--ym-gap-action); }
/* the generated pages (blog list, thank-you, 404): title → lead */
#top .ym-blog__heading, #top .ym-util-hero h1 { margin-bottom: var(--ym-gap-heading); }

/* ==== 2026-10-01 operator: consistency pass ================================
   "everything should be consistent throughout the website so it looks like it was
   built at the same time by the same person." Decisions (operator, 2026-10-01):
   hero underline out + the source's yellow bar under every hero (home too) ·
   hero subtitle + section taglines in Karla, normal weight, normal case, smaller ·
   Service Areas lists the four divisions in small charcoal discs · "when to call"
   checklist: bolt icon, two columns, hanging indent · cards say "Explore <division>"
   · Why Choose / reviews row top-aligned, review widget unboxed · the GC band's
   button + content width match the rest of the site. Markup halves: ym_markup.py
   (checklist, divisions) and build-home-bands.mjs (card wording). */

/* --- heroes: no short underline; the source's 10px yellow bar under the hero.
   (On the source the bar is an empty Avia layout row painted yellow — the row we
   hid above. A border on the hero itself puts it under the HOME hero too, where
   the ribbon band, not that row, follows the hero.) ------------------------- */
#top #av_section_1 .av-special-heading-tag::after { content: none !important; display: none !important; }
#top #main:not(:has(.ym-band--ribbon)) #av_section_1 { border-bottom: var(--ym-hero-bar) solid var(--ym-brand) !important; } /* .avia-no-border-styling zeroes borders; a page WITH the trust bar uses that as its bar */

/* --- hero subtitle ("in Chattanooga, TN"; home "Residential ▪ Commercial …") -- */
#top #av_section_1 :is(.av-special-heading-h2, .av-special-heading-h3) .av-special-heading-tag {
  color: var(--ym-ink) !important;
  font-family: var(--ym-font-body) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
}

/* --- section taglines (an h4 sitting right above a section h2: "Professional ▪
   Timely ▪ Quality", "Honest ▪ Quality ▪ Comprehensive", "Safe ▪ Reliable …") -- */
#top .av-special-heading-h4:has(+ .av-special-heading-h2, + style + .av-special-heading-h2) .av-special-heading-tag {
  font-family: var(--ym-font-body) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: 22px !important;  /* operator 2026-10-01: "increase tagline sizes slightly" (was 20) */
  line-height: 1.4 !important;
  color: var(--ym-ink) !important;
}

@media only screen and (max-width: 767px) {
  #top #av_section_1 :is(.av-special-heading-h2, .av-special-heading-h3) .av-special-heading-tag { font-size: 19px !important; }
  #top .av-special-heading-h4:has(+ .av-special-heading-h2, + style + .av-special-heading-h2) .av-special-heading-tag { font-size: 19px !important; }
}

/* --- Service Areas: the four divisions, small charcoal discs, yellow line icons
   (markup: ym_markup.to_division_iconlist). The timeline connector is dropped. */
#top .avia-icon-list .iconlist_icon.ym-iconlist__disc {
  width: 36px; height: 36px; line-height: 36px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--ym-surface-deep) !important;
  color: var(--ym-brand) !important;
  border-radius: 50%;
}
#top .ym-iconlist__svg { width: 18px; height: 18px; display: block; margin: 0 !important; } /* Avia: svg margin-top 16px, sized for its 80px discs */
/* Avia's per-widget CSS paints `… svg { stroke:#000; fill:#000 }` inside the icon list —
   black on the black disc. The line icons are stroke-only, in the disc's yellow. */
#top .ym-iconlist__svg, #top .ym-iconlist__svg *,
#top .ym-checklist__icon, #top .ym-checklist__icon *,
#top .ym-svc__icon, #top .ym-svc__icon * { stroke: currentColor !important; fill: none !important; }
#top .avia-icon-list:has(.ym-iconlist__disc) .iconlist-timeline { display: none; }
#top .avia-icon-list:has(.ym-iconlist__disc) > li { min-height: 36px; padding-bottom: 0; margin-bottom: var(--ym-gap-heading); }
#top .avia-icon-list:has(.ym-iconlist__disc) > li:last-child { margin-bottom: 0; }
#top .avia-icon-list:has(.ym-iconlist__disc) .article-icon-entry { margin-left: 56px; min-height: 36px; display: flex; align-items: center; }
#top .avia-icon-list:has(.ym-iconlist__disc) .av_iconlist_title { margin: 0; padding: 0; line-height: 1.3; }

/* --- "when to call" checklist (markup: ym_markup.to_checklist) -------------- */
#top .avia_textblock.av_multi_colums:has(> .ym-checklist) { column-count: 1 !important; columns: auto !important; }
#top .ym-checklist {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 40px;
}
#top .ym-checklist li {
  break-inside: avoid;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; padding: 0;
  list-style: none;
}
#top .ym-checklist__icon {
  flex: none; width: 1em; height: 1em;
  margin-top: .3em;             /* centres the 1em icon on the first 1.6em line */
  color: var(--ym-brand);
}
@media only screen and (max-width: 767px) { #top .ym-checklist { columns: 1; } }

/* --- Why Choose + reviews: one row, tops aligned, the widget not boxed ------- */
#top .flex_column_table:has(.ti-widget) > .flex_column { vertical-align: top; }
#top .flex_column.av-zero-column-padding .avia_textblock:has(.ti-widget) {
  background-color: transparent; border: 0; padding: 0;
}

/* --- GC band: content width + button match the rest of the site ------------
   Every Avia section's content is the 1310px container less 50px gutters; the GC
   panel ran an 840px column with a 62ch paragraph. The site's buttons are
   .avia-button (Karla 20/700, 1.2px tracking, 10px 25px); .ym-btn was 15px. */
#top .ym-gc--overlay .ym-gc__inner { max-width: 1310px; margin: 0 auto; padding: 0 50px; box-sizing: border-box; }
#top .ym-gc--overlay p { max-width: none; }
#top .ym-btn {
  font-size: 20px; font-weight: 700; letter-spacing: 1.2px; line-height: 26px;
  padding: 10px 25px; border-radius: var(--ym-radius-btn);
}
@media only screen and (max-width: 767px) { #top .ym-gc--overlay .ym-gc__inner { padding: 0 25px; } }

/* ==== 2026-10-01 operator: the trust items live IN the yellow hero bar =========
   "put these items in the yellow hero bar we just added back, slight padding on top
   and bottom" — on every hero (operator's pick). The 4C ribbon (seat_trust_bar() in
   inject-fixes) becomes the full-width bar itself: no rounded pill, no dark frame. */
#top .ym-band--ribbon {
  background: var(--ym-brand);
  padding: var(--ym-trustbar-pad) 0;
  clear: both;                  /* the hero floats */
}
#top .ym-band--ribbon .ym-ribbon { padding: 0; background: transparent; border-radius: 0 !important; }
#top .ym-band--ribbon .ym-ribbon__inner {
  background: transparent; border-radius: 0;
  max-width: 1310px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  #top .ym-band--ribbon .ym-ribbon__inner { padding: 0 25px; gap: 8px 22px; }
}

/* ==== 2026-10-01 operator: Josefin Sans everywhere Karla was ====================
   The captured Avia CSS names Karla in exactly two places — `body.karla` and
   --enfold-font-family-body — and the generated pages take theirs from
   07-SEO/seo.config.json (also switched). The Google Fonts request now asks for real
   Josefin 400/700 + italics (it used to load 400 only, so every bold was faux). */
:root { --enfold-font-family-body: var(--ym-font-body); }
body#top.karla, #top input, #top textarea, #top select, #top button { font-family: var(--ym-font-body); }

/* ==== 2026-10-01 operator: services section, option B ===========================
   Two-column list, bolt + white title + grey text, hairline between rows — the same
   voice as the "when to call" checklist (markup: ym_markup.to_service_list). */
#top .avia_textblock.av_multi_colums:has(> .ym-svc) { column-count: 1 !important; columns: auto !important; }
#top .ym-svc {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px;
}
#top .ym-svc li {
  list-style: none; margin: 0; padding: 22px 0;
  display: flex; gap: 16px; text-align: left;
  border-top: 1px solid var(--ym-hairline);
}
#top .ym-svc__icon { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--ym-brand); }
#top .ym-svc h3 {
  margin: 0 0 8px; text-align: left;
  font-family: var(--ym-font-display); font-weight: var(--ym-display-weight); text-transform: uppercase; letter-spacing: .01em;
  color: var(--ym-ink); font-size: 19px; line-height: 1.25;
}
#top .ym-svc p { margin: 0; text-align: left; color: var(--ym-ink-body); font-size: 18px; line-height: 1.6; }
#top .ym-also { text-align: center; margin: var(--ym-gap-action) 0 0; color: var(--ym-ink-body); font-size: 18px; }
#top .ym-also b {
  color: var(--ym-ink); letter-spacing: .04em; text-transform: uppercase; font-size: 15px; margin-right: 12px;
}
#top .ym-also a { color: var(--ym-brand); }
@media only screen and (max-width: 767px) { #top .ym-svc { grid-template-columns: 1fr; } }

/* ==== 2026-10-01 operator: blog gets the same hero as every page ================
   Cloned from /contact/ by 08-blog/build-blog-page.py; the photo is the client's own
   fleet shot (also behind the home GC band), at its full 1280px original. */
/* One hero geometry for every inner page. The originals get these from per-page Avia CSS
   (title padding-top 20, headings margin-top 0); contact's added subtitle and the blog's
   cloned hero do not load that CSS, so they came out 34px taller / 16px shorter. */
#top #av_section_1:not(.av-section-with-video-bg) .av-special-heading { margin-top: 0 !important; }
#top #av_section_1:not(.av-section-with-video-bg) .av-special-heading-h1 .av-special-heading-tag { padding-top: 20px !important; }

#top #av_section_1.ym-hero--blog {
  background-image: url("/assets/images/d0db65086c24400ba65037af57974c65-large.jpg");
  background-position: 50% 55%; background-size: cover; background-repeat: no-repeat;
}

/* ==== 2026-10-01 operator: "bump the main body typography down to 18px with a normal weight"
   The theme sets `body { font-size: 20px }` (Avia font setting) and every paragraph and list
   inherits it; line-height is 1.65em of that, so it follows (33 → 29.7px). */
body#top { font-size: var(--ym-body-size); font-weight: 400; }
/* the same size + rhythm wherever body copy sits: the service-page "Why Choose Us" ▸ list
   (an Avia subheading at 20px per widget), card lists, service descriptions, the GC copy */
#top .av-special-heading-h3 .av-subheading_below,
#top .av-special-heading-h3 .av-subheading_below p { font-size: var(--ym-body-size) !important; line-height: 1.65 !important; }
#top .ym-card__list li, #top .ym-svc p, #top .ym-gc p, #top .ym-checklist li { font-size: var(--ym-body-size); line-height: 1.65; }
#top .ym-util .ym-util-sub, #top .ym-blog__empty { font-size: var(--ym-body-size); line-height: 1.65; }

/* ==== 2026-10-01 operator: the source's subtle power-line art on some sections ===
   "source had a subtle electrical system background on some sections … add it at a low
   opacity … to break up the monotony." Same sections as the source (the closing CTA band
   on the home + every service page; inject-fixes tags them ym-pattern), white-line
   variant, seen through the existing 0.88 dark overlay → ~12% white lines. */
/* 2026-10-21 (client: "Move from powerline motif"): the power lines are retired; the same
   CTA bands now carry the in-house grit texture (make-grit-texture.py), tiled. */
#top .avia-section.ym-pattern {
  background-color: var(--ym-surface) !important;
  background-image: url("/assets/images/ym-grit.png") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: 0 0 !important;
}

/* ==== 2026-10-01 operator: "expand blog post width to 66%" (was a 46em ≈ 780px column).
   Desktop: 66% of the page; phones keep the full width (66% of 390 is a 257px column). */
#top .ym-post__inner { max-width: none; width: 66%; box-sizing: border-box; }
@media only screen and (max-width: 767px) { #top .ym-post__inner { width: 100%; } }

/* ==== 2026-10-01 operator: consistent casing. The contact page's financing h4 mixed title
   and sentence case; the headline stays "Now Offering Financing!" and the pre-qualify
   sentence is now a body line beneath it (markup: inject-fixes.py FIN_NEW). */
#top .ym-financing-note { font-size: var(--ym-body-size); line-height: 1.65; margin: 0 0 1.5em; text-align: left; }
#top .ym-financing-note a { color: var(--ym-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ==== 2026-10-01 operator: "fit to the same width and gutters as the rest of the site" =====
   Every band we added (trust bar, GC panel, blog grid, division cards, trust/review strips)
   was capped at 1310px; the theme's container is 1800px with 50px gutters, and 85% with no
   padding under 768px. At 1440 the two coincide — on a wider screen ours sat ~245px inside.
   One rule, the theme's numbers, so every band edge lines up at every width. */
#top .ym-band--ribbon .ym-ribbon__inner,
#top .ym-gc--overlay .ym-gc__inner,
#top .ym-gc__inner,
#top .ym-blog__inner,
#top .ym-divisions__inner,
#top .ym-trustbar__inner,
#top .ym-reviews {
  width: 100%; max-width: var(--ym-container); margin-left: auto; margin-right: auto;
  padding-left: 50px; padding-right: 50px; box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  #top .ym-band--ribbon .ym-ribbon__inner,
  #top .ym-gc--overlay .ym-gc__inner,
  #top .ym-gc__inner,
  #top .ym-blog__inner,
  #top .ym-divisions__inner,
  #top .ym-trustbar__inner,
  #top .ym-reviews { width: 85%; max-width: 85%; padding-left: 0; padding-right: 0; }
}

/* operator 2026-10-01: "lower the opacity of the powerline background" (~12% → ~6%) */
#top .avia-section.ym-pattern .av-section-color-overlay { opacity: var(--ym-pattern-veil) !important; }
/* the GC photo panel added its own 40px side padding on top of the container gutter */
#top .ym-gc--overlay { padding-left: 0; padding-right: 0; }
#top .ym-band--gc { clear: both; } /* the Avia sections float; without the clear the overflow-hidden panel is squeezed beside them */

/* ==== 2026-10-21 client checklist: "Use the Chattanooga skyline at dusk/night behind the
   homepage headline; keep text readable" (operator: licensed stock, texture on the hero +
   bands only). Replaces the power-line hero photo. The ten town pages carry the same
   skyline, so every "Electrician in <town>" page opens on the city. The grit tile rides on
   top of the photo; the hero's existing dark overlay sits over both, so the text contrast
   is the overlay's, not the photo's. Licence: 01-input/audit/stock-photos/CREDITS.md. */
#top #av_section_1.av-l01hlvyk-feb6a1bd329bf81bb94ca88beb151552,
#top #av_section_1[class*="ym-hero--electrician-"] {
  background-image: url("/assets/images/stock-hero-chattanooga-skyline.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 50% 58% !important;
}

/* ==== 2026-10-23 operator: "remove grunge overlay from heros and apply grayscale to the hero
   images" + "make sure content is vertically and horizontally aligned to the center".
   GRAYSCALE: the photo's luminosity blended over a black backdrop is the photo in greys.
   It is not a CSS filter, so the headline, buttons and brand yellow above it keep their colour,
   and every hero (home, divisions, services, towns, contact, blog) gets it from one rule.
   CENTRE: the header is transparent and FIXED over the top of the hero. Inner heroes already
   push their content down by its height (Avia's container padding), so they centre in the
   VISIBLE part; the home hero is a min-height table cell with no such offset, so it centred in
   the whole box and sat ~100px high under the header. Same offset, desktop only (under 990px
   the header is not over the hero). ⚠ Inner heroes are av-minimum-height TOO (-10vw), and they
   already have the offset, so the rule keys on the home's -55 class only. */
:root { --ym-header-h: 95px; }   /* the fixed header's height at the top of the page (measured) */
#top #av_section_1 {
  background-color: var(--ym-surface-deep) !important;
  background-blend-mode: luminosity !important;
}
@media only screen and (min-width: 990px) {
  #top #av_section_1.av-minimum-height-55 > .av-section-color-overlay-wrap > .container > .content {
    padding-top: calc(var(--ym-space-section) + var(--ym-header-h));
  }
}


/* ==== 2026-10-23 operator (contractor band screenshot): "more padding on the top and bottom.
   use black overlay." Was the section's 50px and the design page's navy-tinted gradient
   (rgba(0,6,16)→rgba(16,23,33)). Black at the same strength keeps the copy's contrast. */
:root {
  --ym-gc-pad: 100px;                     /* contractor band, above + below its copy */
  --ym-gc-veil: rgba(0, 0, 0, .8);        /* black overlay over the fleet photo */
}
#top .ym-gc--overlay { padding-top: var(--ym-gc-pad); padding-bottom: var(--ym-gc-pad); }
#top .ym-gc--overlay::before { background: var(--ym-gc-veil); }
@media only screen and (max-width: 767px) { :root { --ym-gc-pad: 64px; } }

/* Avia sets the heading "&" (span.special_amp) in its own decorative face; under the 2026-10-23
   type it rendered as a stray generic sans. The ampersand belongs to the heading's face. */
#top .special_amp { font-family: inherit !important; font-weight: inherit !important; font-style: normal !important; }

/* ==== 2026-10-23 type swap, sizing. Barlow Condensed sets much narrower and shorter than
   Archivo Black at the same px, and every heading/button/label size on the site (Avia
   per-widget px + our own) was tuned for Archivo, so the new type read undersized.
   `font-size-adjust` scales the condensed face to a target x-height in ONE place per role,
   instead of re-tuning ~60 sizes. ~1.2x on headings, ~1.12x on buttons and labels. */
:root {
  --ym-display-adjust: .6;   /* headings: x-height as a fraction of font-size */
  --ym-ui-adjust: .55;       /* buttons, nav CTA, trust bar, eyebrows */
}
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag, #top .ym-quote p, #top .ym-steps__num { font-size-adjust: var(--ym-display-adjust); }
#top .avia-button, #top .ym-btn, #top input[type="submit"], #top .ym-header-cta,
#top .ym-trustbar__item, #top .ym-eyebrow, #top .ym-card__more, #top .ym-also b,
#top #wrap_all #header .av-menu-button-colored > a .avia-menu-text { font-size-adjust: var(--ym-ui-adjust); }
/* the hero tagline and body-face subtitles are Barlow (not condensed): no adjust */
#top .av-thin-font .av-special-heading-tag, #top .ym-hero-sub .av-special-heading-tag,
#top #av_section_1 .av-special-heading-h2 .av-special-heading-tag { font-size-adjust: none; }

/* ==== home bands — GENERATED by 01-input/audit/build-home-bands.mjs ====
   Do not hand-edit. Sliced from 01-input/audit/design-options-source/index.html (what the
   client approved) and appended to client-overrides.css by inject-fixes.py on every run.
   Approved 2026-09-22: 4C ribbon · 5D photo cards · 9B GC panel · 11C wording. */

:root {
/* Corner radius — MEASURED off the rendered source, not guessed from theme CSS:
     every .avia-button renders 60px (pill), the home service columns (429x327) and
     the "Why Choose Us" panel (295x494) render 60px, source image containers 3px,
     icon badges 500px/50%. Enfold's stylesheet DEFAULTS say 3px/2px/0 — the client's
     customizer overrides them, so the defaults would have shipped the wrong shape. */
  /* 2026-09-22 industrial-dark pass: the site moved from 60px pills to the
     mockup's rectangles, so these follow. The 60px values were MEASURED off the
     client's live site on 09-21 and were correct then — this is an operator
     decision to diverge from them, not a correction. */
  --ym-radius-card: 4px;    /* colored panels / cards                */
  --ym-radius-pill: 3px;    /* buttons                               */
  --ym-radius-img: 3px;     /* bare images in source image containers */

  /* --- flip Enfold's light "main" palette to the dark scheme --- */
  --ym-radius-card: 4px;    /* colored panels / cards                */
  --ym-radius-pill: 3px;    /* buttons                               */
  --ym-radius-img: 3px;     /* bare images in source image containers */
}

/* The base .ym-card / .ym-trustbar / .ym-gc rules above ship WITHOUT a radius (they
   predate the measured-radius pass), so the shape is applied here. */
.ym-card { border-radius: var(--ym-radius-card); overflow: hidden; }
.ym-btn { border-radius: var(--ym-radius-pill); }
.ym-gc__img img { border-radius: var(--ym-radius-card); }

/* ---- cascade collisions the DESIGN PAGE could not show --------------------
   The design page renders these components outside the theme's cascade. Dropped into
   a real page, Enfold's own link rule wins:
     #top .main_color a:not(.avia-button) { color: var(--ym-brand) }   (1,2,1)
   beats  #top .ym-ribbon__item                                          (1,1,0)
   so the Wisetack "Financing Available" link rendered #fcc624 ON #fcc624 — invisible,
   contrast 1.0:1, and it is a live conversion path. Anything that is an <a> inside a
   brand-colored band needs this. */
#top .ym-ribbon__item,
#top .main_color a.ym-ribbon__item,
#top .alternate_color a.ym-ribbon__item { color: var(--ym-on-brand) !important; }
#top a.ym-ribbon__item svg { stroke: var(--ym-on-brand) !important; }
#top a.ym-ribbon__item:hover { color: var(--ym-on-brand) !important; text-decoration: underline; }

/* bands that wrap an inserted component */
.ym-band { background: var(--ym-surface); }
.ym-band--ribbon { padding: 6px 0 2px; }
.ym-band--gc { background: var(--ym-surface-deep); padding: 46px 0; }
.ym-band--cta { background: var(--ym-surface-deep); }
.ym-divisions__wrap { margin-top: 10px; }

/* ==================== VARIANT TREATMENTS (2026-09-16 review round) =========
   Layout-only variants per open band; colors stay on the shipped token theme. */

/* Trust bar — variant B: stat cards */
.ym-trustbar--cards { background: var(--ym-surface); border: 0; padding: 34px 0; }
.ym-trustbar--cards .ym-trustbar__inner { gap: 26px; }
.ym-trustcard {
  background: var(--ym-surface-raised);
  border: 1px solid var(--ym-hairline);
  border-top: 3px solid var(--ym-brand);
  padding: 26px 20px 22px;
  text-align: center;
  color: var(--ym-ink);
  font-family: var(--ym-font-ui);
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; display: block;
  border-radius: var(--ym-radius-card);
}
.ym-trustcard svg { width: 34px; height: 34px; stroke: var(--ym-brand); margin: 0 auto 12px; display: block; }
.ym-trustcard .ym-trustbar__sub { margin-top: 5px; }
a.ym-trustcard:hover { border-color: var(--ym-brand); }

/* Trust bar — variant C: brand-yellow ribbon */
.ym-ribbon { background: transparent; padding: 22px 0; }
.ym-ribbon__inner {
  max-width: 1310px; margin: 0 auto; padding: 16px 44px;
  background: var(--ym-brand);
  border-radius: var(--ym-radius-pill);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 34px;
}
#top .ym-ribbon__item, .ym-ribbon__item {
  display: flex; align-items: center; gap: 9px;
  color: var(--ym-on-brand);
  font-family: var(--ym-font-ui);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none;
}
.ym-ribbon__item svg { width: 20px; height: 20px; stroke: var(--ym-on-brand); flex: none; }
a.ym-ribbon__item:hover { text-decoration: underline; }

/* Division cards — clickable cards (division pages exist now) */
a.ym-card { display: block; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.ym-card:hover { border-color: var(--ym-brand); transform: translateY(-3px); }
.ym-card__more {
  display: inline-block; margin-top: 16px;
  color: var(--ym-brand);
  font-family: var(--ym-font-ui);
  font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em;
}

/* Division cards — variant B: 2×2 feature cards */
.ym-divisions__grid--duo { grid-template-columns: repeat(2, 1fr); }
.ym-card--duo { display: flex; gap: 22px; align-items: flex-start; padding: 32px 30px; }
.ym-card--duo .ym-card__icon { flex: none; margin: 0; }
#top .ym-card--duo h3 { margin-top: 4px; }

/* Division cards — variant C: directory rows */
.ym-divrows { display: grid; margin-top: 0; border: 1px solid var(--ym-hairline);
  border-radius: var(--ym-radius-card); overflow: hidden; }
.ym-divrow {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center;
  padding: 22px 28px;
  background: var(--ym-surface-raised);
  border-bottom: 1px solid var(--ym-hairline);
  text-decoration: none;
}
.ym-divrow:last-child { border-bottom: 0; }
.ym-divrow:hover { background: var(--ym-surface); }
.ym-divrow .ym-card__icon { width: 48px; height: 48px; margin: 0; }
.ym-divrow .ym-card__icon svg { width: 24px; height: 24px; }
#top .ym-divrow h3 { margin: 0 0 4px; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; color: var(--ym-ink); }
.ym-divrow p { margin: 0; color: var(--ym-ink-body); font-size: 14.5px; }
.ym-divrow__arrow { color: var(--ym-brand); font-size: 22px; }

/* ---- Final CTA band (11C, 2026-09-21 copy) ---- */
.ym-finalcta { background: var(--ym-surface-deep); padding: 64px 0; }
.ym-finalcta__inner { max-width: 1310px; margin: 0 auto; padding: 0 50px; text-align: center; }
#top .ym-finalcta h2 {
  color: var(--ym-ink); text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 12px; font-size: 30px;
}
.ym-finalcta__sub { color: var(--ym-ink-body); margin: 0 0 26px; font-size: 15px; }
.ym-finalcta__btns { margin: 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ym-finalcta__btns .ym-cta-ghost { margin-left: 0; }
@media only screen and (max-width: 767px) {
  #top .ym-finalcta h2 { font-size: 23px; }
}

/* ---- Division cards with PHOTOS (2026-09-21 round) ----
   Every photo is a real client job shot from the capture. Card + button radius is
   the measured 60px, so a photo card reads as the same object as the home's
   existing yellow service columns. */
a.ym-card--photo, .ym-card--photo {
  padding: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--ym-hairline);   /* the PHOTO is the top edge; a yellow
                                                 border reads as an arc above it */
}
.ym-card__shot { display: block; width: 100%; height: 190px; object-fit: cover; }
.ym-card--photo .ym-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
/* pin the CTA to the bottom so all four line up despite different list lengths */
.ym-card--photo .ym-card__more { margin-top: auto; padding-top: 16px; }
#top .ym-card--photo h3 { margin: 0 0 8px; }

/* 5E — big photo cards, text over the image */
.ym-divisions__grid--hero { grid-template-columns: repeat(2, 1fr); gap: 26px; }
a.ym-card--hero, .ym-card--hero {
  /* The anchor selector is required: a.ym-card{display:block} outranks a bare
     .ym-card--hero, which silently left the text at the TOP of the card — over the
     brightest part of every photo — while the scrim was built for the bottom. */
  position: relative; padding: 0; min-height: 320px; display: flex;
  align-items: flex-end; border-top: 1px solid var(--ym-hairline);
  background-size: cover; background-position: center;
}
.ym-card--hero::before {
  content: ""; position: absolute; inset: 0;
  /* Strong enough for the BRIGHTEST photo in the set (the white panel), not just the
     dark ones — measured with probes/measure-contrast.mjs, worst pixel, not the DOM. */
  background: linear-gradient(rgba(0,6,16,0) 0%, rgba(0,6,16,.12) 30%, rgba(0,6,16,.62) 55%, rgba(0,6,16,.90) 78%, rgba(0,6,16,.95) 100%);
}
.ym-card--hero .ym-card__body { position: relative; padding: 28px 30px 30px; width: 100%; }
.ym-card--hero .ym-card__more { margin-top: 10px; }

/* 5F — photo rows */
.ym-divrow--photo { grid-template-columns: 148px 1fr auto; gap: 24px; padding: 18px 26px 18px 18px; }
.ym-divrow--photo img {
  width: 148px; height: 96px; object-fit: cover; display: block;
  border-radius: calc(var(--ym-radius-card) / 2);
}

@media only screen and (max-width: 989px) {
  .ym-divisions__grid--hero { grid-template-columns: 1fr; }
  .ym-divrow--photo { grid-template-columns: 96px 1fr auto; padding: 14px 18px 14px 14px; }
  .ym-divrow--photo img { width: 96px; height: 72px; }
}

/* GC band — variant B: full-bleed photo with dark overlay */
.ym-gc--overlay {
  position: relative; padding: 96px 40px; border: 0;
  background-size: cover; background-position: center;
  border-radius: var(--ym-radius-card); overflow: hidden;
  margin: 0 auto; max-width: 1310px;
}
.ym-gc--overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,6,16,.82), rgba(16,23,33,.88));
}
.ym-gc--overlay .ym-gc__inner {
  position: relative; display: block; text-align: center; max-width: 840px;
}
.ym-gc--overlay p { margin-left: auto; margin-right: auto; max-width: 62ch; }

/* GC band — variant C: slim strip */
.ym-gc--strip { padding: 30px 0; }
.ym-gc--strip .ym-gc__inner {
  display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between;
}
#top .ym-gc--strip h2 { font-size: 21px; margin: 0; }
.ym-gc--strip p { margin: 4px 0 0; font-size: 14.5px; }

/* Final CTA — ghost phone button for the dual-CTA variant */
.ym-cta-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--ym-ink);
  color: var(--ym-ink) !important;
  font-family: var(--ym-font-ui);
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 15px;
  padding: 15px 30px 13px; text-decoration: none; margin-left: 12px;
  border-radius: var(--ym-radius-pill);
}
.ym-cta-ghost:hover { border-color: var(--ym-brand); color: var(--ym-brand) !important; }

@media only screen and (max-width: 989px) {
  .ym-divisions__grid--duo { grid-template-columns: 1fr; }
  .ym-divrow { grid-template-columns: 48px 1fr auto; padding: 18px 20px; }
}

/* ---- shipped adjustments — learned on the REAL home, not the design page ------
   Operator 2026-09-23 ("fullwidth section not filling fully"): the 9B panel was a
   1310px rounded card inside a 46px-padded band, so at 1440 it sat in a black frame.
   It now fills the band edge to edge. Kept here, after the variant slice, so the
   design page the client approved stays byte-identical. */
.ym-band--gc { padding: 0; }
.ym-gc--overlay { max-width: none; margin: 0; border-radius: 0; }

/* ==== 2026-10-21 revision: content sections (ym_sections.py) =======================
   Master: 01-input/audit/sections.css. inject-fixes.py appends it to the deployed
   client-overrides.css, after the home-band components, so one stylesheet ships.
   Client checklist 2026-10-14: generator process + options + FAQs, real install photos,
   the company story, the team. Every value is a token from client-overrides.css :root.
   Each band sits on the theme container (1800 + 50px gutters; 85% under 768), like
   every other band we added, and clears the floated Avia sections above it. */

:root {
  --ym-sec-gap: 30px;           /* gap between cards / photos inside a section */
}

#top .ym-sec { clear: both; color: var(--ym-ink-body); }
#top .ym-sec--surface { background-color: var(--ym-surface); }
#top .ym-sec--deep { background-color: var(--ym-surface-deep); }
#top .ym-sec--raised { background-color: var(--ym-surface-raised); }
#top .ym-sec__inner {
  max-width: var(--ym-container); margin: 0 auto; box-sizing: border-box;
  padding: var(--ym-space-section) 50px;
}
@media only screen and (max-width: 767px) {
  #top .ym-sec__inner { width: 85%; padding-left: 0; padding-right: 0; }
}

/* heading block: eyebrow → h2 with the yellow rule → optional lede (centred) */
#top .ym-sec__head { text-align: center; max-width: 900px; margin: 0 auto var(--ym-gap-action); }
#top .ym-sec__head h2, #top .ym-sec__head h1 { color: var(--ym-ink); text-transform: uppercase; margin: 0; }
#top .ym-sec__head h2::after, #top .ym-sec__head h1::after {
  content: ""; display: block; width: 64px; height: 3px; margin: var(--ym-gap-eyebrow) auto 0;
  background: var(--ym-brand);
}
#top .ym-sec__lede { margin: var(--ym-gap-heading) 0 0; font-size: var(--ym-body-size); line-height: 1.65; }
#top .ym-sec h3 { color: var(--ym-ink); text-transform: uppercase; font-size: 22px; letter-spacing: .03em; margin: 0 0 10px; }
#top .ym-sec p { font-size: var(--ym-body-size); line-height: 1.65; }

/* grunge texture. 2026-10-21: bands only. Operator 2026-10-23: "use better grunge texture at
   a lower opacity throughout the site" and none on the heroes. One in-house tile
   (make-grit-texture.py: worn concrete, ~3/255 average, strength baked into the file) on every
   section SURFACE: each Avia section, our bands, the footer and socket. Never the hero
   (#av_section_1), never the yellow trust bar, never a card (cards paint their own background).
   Measured 2026-10-23: no section below the hero carries a photo of its own, so this layer
   replaces nothing. */
#top #main .container_wrap:not(#av_section_1),
#top .ym-band:not(.ym-band--ribbon),
#top .footer-page-content,
#top #socket {
  background-image: url("/assets/images/ym-grit.png");
  background-repeat: repeat;
}

/* actions row */
#top .ym-sec__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: var(--ym-gap-action); }
#top .ym-btn--ghost { background: transparent; color: var(--ym-brand) !important; border-color: var(--ym-brand); }
#top .ym-btn--ghost:hover { background: var(--ym-brand); color: var(--ym-on-brand) !important; }

/* photo row: the client's own job photos, cropped to one height */
#top .ym-photos { display: grid; gap: var(--ym-sec-gap); grid-template-columns: repeat(3, 1fr); }
#top .ym-photos--2 { grid-template-columns: repeat(2, 1fr); }
#top .ym-photos--4 { grid-template-columns: repeat(4, 1fr); }
#top .ym-photos__item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ym-hairline); border-radius: var(--ym-radius-img); }
#top .ym-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* options: two side-by-side choices */
#top .ym-options { display: grid; gap: var(--ym-sec-gap); grid-template-columns: repeat(2, 1fr); }
#top .ym-option {
  background: var(--ym-surface-raised); border: 1px solid var(--ym-hairline);
  border-top: 3px solid var(--ym-brand); border-radius: var(--ym-radius-card); padding: 34px 30px 30px;
}
#top .ym-option p { margin: 0; }

/* numbered steps */
#top .ym-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ym-sec-gap); grid-template-columns: repeat(4, 1fr); counter-reset: none; }
#top .ym-steps__item { list-style: none; margin: 0; padding: 0; }
#top .ym-steps__num {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border: 2px solid var(--ym-brand); border-radius: 50%; color: var(--ym-brand);
  font-family: var(--ym-font-display); font-weight: var(--ym-display-weight); font-size: 22px; margin-bottom: 18px;
}
#top .ym-steps__item p { margin: 0; }

/* FAQ: native details/summary, one hairline between questions */
#top .ym-faq { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--ym-hairline); }
#top .ym-faq__item { border-bottom: 1px solid var(--ym-hairline); }
#top .ym-faq__item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 22px 0;
}
#top .ym-faq__item summary::-webkit-details-marker { display: none; }
#top .ym-faq__item summary::after { content: "+"; color: var(--ym-brand); font-family: var(--ym-font-display); font-size: 26px; line-height: 1; flex: none; }
#top .ym-faq__item[open] summary::after { content: "−"; }
#top .ym-faq__item summary h3 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; font-family: var(--ym-font-body); font-weight: 700; }
#top .ym-faq__item summary:focus-visible { outline: 2px solid var(--ym-brand); outline-offset: 4px; }
#top .ym-faq__a p { margin: 0 0 22px; }

/* story: copy + one photo */
#top .ym-story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
#top .ym-story__text h2 { color: var(--ym-ink); text-transform: uppercase; margin: 0 0 var(--ym-gap-heading); }
#top .ym-story__text p { margin: 0 0 var(--ym-gap-stack); }
#top .ym-story__text .ym-checklist { margin-top: var(--ym-gap-heading); }
#top .ym-story__text .ym-sec__actions { justify-content: flex-start; }
#top .ym-story__text p:last-child { margin-bottom: 0; }
#top .ym-story__img { margin: 0; }
#top .ym-story__img img { width: 100%; height: auto; display: block; border-radius: var(--ym-radius-img); border: 1px solid var(--ym-hairline); }
#top .ym-story__img figcaption, #top .ym-credit { color: var(--ym-ink-muted); font-size: 14px; margin-top: 8px; }
#top .ym-story--flip-wrap .ym-story__img { order: -1; }

/* pull quote */
#top .ym-quote { margin: 0 auto; max-width: 1000px; text-align: center; border: 0; padding: 0; }
#top .ym-quote p { font-family: var(--ym-font-display); font-weight: var(--ym-display-weight); color: var(--ym-ink); text-transform: uppercase; font-size: 30px; line-height: 1.3; margin: 0; }
#top .ym-quote cite { display: block; margin-top: var(--ym-gap-heading); color: var(--ym-brand); font-style: normal; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }

/* a customer review reads as a person talking: body face, sentence case */
#top .ym-quote--review .ym-quote p { font-family: var(--ym-font-body); text-transform: none; font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.5; }

/* team cards */
#top .ym-team { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ym-sec-gap); }
#top .ym-team__card { list-style: none; margin: 0; width: 280px; text-align: center; }
#top .ym-team__pic { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ym-radius-card); border: 1px solid var(--ym-hairline); background: var(--ym-surface-raised); margin-bottom: 16px; }
#top .ym-team__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
#top .ym-team__silhouette {
  display: block; width: 100%; height: 100%;
  /* a neutral head-and-shoulders shape, drawn in the hairline grey */
  background:
    radial-gradient(circle at 50% 38%, var(--ym-hairline) 0 17%, transparent 17.5%),
    radial-gradient(ellipse 42% 30% at 50% 92%, var(--ym-hairline) 0 99%, transparent 100%);
}
#top .ym-team__card h3 { margin: 0; }
#top .ym-team__credit { text-align: center; margin-top: var(--ym-gap-heading); }
#top .ym-team__role { margin: 4px 0 0; color: var(--ym-brand); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }

/* magazine feature: preview image that links to the full article */
#top .ym-feature { display: block; border: 1px solid var(--ym-hairline); border-radius: var(--ym-radius-card); overflow: hidden; }
#top .ym-feature img { width: 100%; height: auto; display: block; }

@media only screen and (max-width: 989px) {
  #top .ym-steps { grid-template-columns: repeat(2, 1fr); }
  #top .ym-photos--4 { grid-template-columns: repeat(2, 1fr); }
  #top .ym-story { grid-template-columns: 1fr; gap: 30px; }
  #top .ym-story--flip-wrap .ym-story__img { order: 0; }
}
@media only screen and (max-width: 767px) {
  #top .ym-photos, #top .ym-photos--2, #top .ym-photos--4, #top .ym-options, #top .ym-steps { grid-template-columns: 1fr; }
  #top .ym-quote p { font-size: 22px; }
  #top .ym-sec h3 { font-size: 19px; }
}