/* ---------------------------------------------------------------------------
 * Site overrides for American Generator Solutions.
 *
 * The kit's own stylesheets (style.css, responsive.css, module-css/*) are kept
 * byte-identical to _theme/suntop-pack so they stay usable as the parity
 * reference. Every deviation this build needs lives here instead, with the
 * measurement that justifies it.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Brand palette (Step 02).
 *
 * The kit ships one accent variable, --suntop-base, and uses it 192 times: 88 as
 * `color`, 78 as a fill, 22 on borders. Because it is both text color AND fill
 * color, replacing it with a value from a different luminance class breaks every
 * contrast pair its designers set up - which is the BR-03 failure that already hit
 * this build once, when top-bar links rendered invisible on the bar behind them.
 *
 * So each variable is swapped for something in its OWN luminance class rather than
 * remapped by brand hierarchy:
 *
 *   --suntop-base   #F95E11 orange  ->  #B22234  (accent role, mid-dark saturated)
 *   --suntop-black  #111111 near-black -> #000066 (dark-surface role, very dark)
 *   --suntop-gray   unchanged - a neutral body-text color works under any brand,
 *                   and nothing requires changing it.
 *
 * #B22234 is the United States flag's standard red (Pantone 193C). The AGS logo
 * depicts a US flag, so the red has a real referent even though the flag in the
 * logo itself is rendered grayscale. Measured brand values, for the record: navy
 * #000066 (re-measured from two independent assets), storm slate #34485B and
 * near-white #F5F9FA from the video on the client's own site.
 * ------------------------------------------------------------------------- */
:root {
    --suntop-base: #B22234;
    --suntop-base-rgb: 178, 34, 52;
    --suntop-black: #000066;
    --suntop-black-rgb: 0, 0, 102;
}

/* The slim top band is the one place the kit fills a full-width surface with its
 * accent. For AGS the primary is navy and red is the emphasis color, so the band
 * takes the navy rather than the red - otherwise red becomes the dominant color in
 * the chrome and the hierarchy reads backwards. The nav band below it stays white,
 * as in the kit.
 *
 * The fill is on `__top`, not the kit's `__top-inner`: since 2026-08-13 the inner row
 * is capped at the container width (see the header-width block near the end of this
 * file), and painting the capped element would leave white shoulders either side of a
 * band that is meant to run edge to edge. `__top-inner` therefore has to give up the
 * kit's own accent fill (style.css:1370) as well. */
.main-header-one__top {
    background-color: var(--suntop-black);
}

.main-header-one__top-inner {
    background-color: transparent;
}

/* R13 - mobile click-to-call, left of the hamburger.
 * Hidden on desktop, where the full "Call Us Anytime" CTA already sits in the nav bar. */
.mobile-nav__phone {
    display: none;
}

/* One header layout for the whole hamburger range (operator, 2026-08-07: "at certain screen widths
 * the nav menu layout looks weird and bad").
 *
 * The desktop menu gives way to the hamburger at 1200px, but the kit only hides the desktop
 * right-hand group below 768 (responsive.css:1951). Between those two numbers the header tried to
 * show the hamburger AND the full phone CTA AND the estimate button at once. Measured before:
 *
 *     <=767   189px   logo + call icon + burger                        fine
 *      768    234px   right-hand group WRAPPED to a second row         broken
 *   850-991   170px   call icon AND full phone CTA AND button, crammed  redundant
 *  992-1199   150px   burger with no call icon, CTA + button still on   R13 gap
 *
 * Both halves of the group are desktop chrome, so they go for the whole hamburger range, and the
 * R13 click-to-call icon extends to meet it - the rule wants that icon wherever the hamburger is,
 * and 992-1199 had neither it nor the R3 sticky bar, so hiding the CTA without extending the icon
 * would have left that band with no click-to-call at all.
 *
 * The R3 sticky bar is deliberately NOT extended past its own 992px breakpoint: R3 specifies "below
 * the lg breakpoint", and widening a written standard is not this fix's call. Between 992 and 1199
 * the phone is still one tap away via the header icon, and Contact stays in the slim top bar. */
@media (max-width: 1199px) {
    .mobile-nav__phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-right: 4px;
        color: var(--suntop-black);
        font-size: 18px;
    }

    .main-header-one__bottom-right {
        display: none;
    }
}

/* R10 - the slim top bar must stay visible on mobile.
 * The kit's responsive.css hides `.main-header-one__top` in two breakpoints (max-width 767 and
 * 768-991), which satisfies the kit's design but not R10, whose whole point is that the secondary
 * nav remains reachable on a phone. site.css loads after responsive.css, so re-declaring display
 * inside the SAME two breakpoints wins on source order at equal specificity.
 *
 * The bar carries the secondary nav only (About Us, Contact) - the working-hours block is already
 * conditional on a CMS field this client has not filled - so two short items fit at 390px without
 * the 55px desktop min-height, which is released here. */
@media (max-width: 991px) {
    .main-header-one__top {
        display: block;
    }

    .main-header-one__top-inner {
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .main-header-one__top .top-nav {
        gap: 18px;
        justify-content: center;
        margin: 0 auto;
    }
}

/* TF-04: vertical rhythm and heading scale in the CMS content column.
 *
 * The kit sets `p { margin: 0 }` and `h1-h6 { margin: 0 }` globally in style.css and then supplies
 * every gap through its own wrapper divs - `.services-details__content-text1 { margin-top: 44px }`,
 * `.title-box { margin-bottom: 25px }`, `.text1 { margin-bottom: 30px }`. CMS body copy is a flat
 * stream of h2/h3/p/ul with none of those wrappers, so it inherited the resets and none of the
 * spacing. Measured on /kohler-generators before this rule: every direct child of .cms-content had
 * margin-top 0 and margin-bottom 0, so paragraphs butted straight into each other and every heading
 * sat flush on the paragraph above it. The heading scale was flat for the same reason - Bootstrap's
 * h2 32px and h3 28px sit 4px apart where the kit's two levels are 48px and 26px.
 *
 * The sizes and gaps below are the kit's own, read off the elements that fill the same roles in the
 * same col-xl-8 column beside the same sidebar:
 *   h2     48px/58px 600, top 44px, bottom 25px  (service.css:400 title-box h2, :388 content-text1
 *                                                 margin-top, :394 title-box margin-bottom)
 *   h3     26px/36px 700, top 36px, bottom 20px  (service.css:442 content-text1-list-box h2,
 *                                                 :429 content-text2 margin-top)
 *   p, ul  bottom 30px                           (service.css:416 .text1)
 *   li+li  top 7px                               (service.css:461)
 * Adjacent margins collapse, so an h3 directly after an h2 gets 36px, not 25+36. The 767px
 * step-down to 35px/45px is the kit's own (responsive.css:1265).
 *
 * Child combinators throughout, deliberately: .cms-content also holds whole components - the
 * services content image, the contact-info cards, the FAQ accordion - and a descendant selector
 * would reach the paragraphs inside them and pull their internal spacing apart.
 *
 * Two parts of the kit's treatment are NOT copied. Its `text-transform: capitalize` suits one-word
 * template titles but Title-Cases every word of a prose heading ("Why Choose A Kohler Generator").
 * Its accent color on the sub-heading is left as the inherited navy, which is what these headings
 * already render and which measures 17.6:1 on the white content column; the accent would be 6.6:1,
 * passing but a change nobody asked for.
 *
 * `h2.lead` is excluded - it is the page's intro line, deliberately 20px/300, and the layouts give
 * it its own inline margin. First and last child margins are zeroed so the column's outer spacing
 * stays the layout's to set. */
.cms-content > h2:not(.lead) {
    font-size: 48px;
    line-height: 58px;
    font-weight: 600;
    margin-top: 44px;
    margin-bottom: 25px;
}

.cms-content > h3 {
    font-size: 26px;
    line-height: 36px;
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 20px;
}

/* h4 - the fourth level the heading-structure pass needs, where a worked example sits under an h3
 * option under an h2 lender (the Financing page). The kit never styles an h4 in body copy and
 * style.css:131 zeroes every heading margin, so without this one it renders at Bootstrap's default
 * size sitting flush on the paragraph above it. Continues the scale the two rules above set,
 * 48 -> 26 -> 20, with proportionate gaps. */
.cms-content > h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 14px;
}

.cms-content > p,
.cms-content > ul,
.cms-content > ol {
    margin-bottom: 30px;
}

/* Lists in CMS body copy get their markers back.
 *
 * style.css:138 resets `dl, ol, ul` to `list-style: none; padding: 0` site-wide, which is right for
 * the kit: every list it ships is a nav or a card grid drawing its own markers. CMS body copy is the
 * one place that reset is wrong - a bulleted list typed in the editor rendered as unmarked flush-left
 * lines indistinguishable from stacked paragraphs, and a numbered list lost its numbers altogether,
 * which silently breaks any ordered instructions an editor writes.
 *
 * Scoped to `.cms-content` and to DIRECT children, matching the child combinators the block above
 * uses for the same reason: whole kit components render inside this column (the FAQ accordion, the
 * contact cards) and their internal lists must keep the reset they were designed against.
 *
 * Explicit values rather than `revert`, which would also undo the padding reset inconsistently
 * across browsers. 20px is Bootstrap's own reboot indent and reads correctly against this column's
 * 18px body type. */
.cms-content > ul {
    list-style: disc outside;
    padding-left: 20px;
}

.cms-content > ol {
    list-style: decimal outside;
    padding-left: 20px;
}

.cms-content > ul > li + li,
.cms-content > ol > li + li {
    margin-top: 7px;
}

.cms-content > *:first-child {
    margin-top: 0;
}

.cms-content > *:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .cms-content > h2:not(.lead) {
        font-size: 35px;
        line-height: 45px;
    }
}

/* Links inside CMS body copy carry an underline.
 * The theme colors links with --suntop-base and nothing else, which fails WCAG 1.4.1: a reader who
 * cannot distinguish the accent from the body color has no cue that the text is a link. Caught by
 * axe (link-in-text-block) on the FAQ page's financing answer, and again on the service-area page's
 * "don't see your community" phone link, which sits in layout markup rather than CMS content.
 * Deliberately NOT global: nav, buttons and cards keep the theme's own treatment, so each run of
 * body copy is named instead. */
.cms-content p a,
.cms-content li a,
.service-area-fallback p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Contact info cards: the value line, styled without a heading tag.
 *
 * The kit marks each card's value as <h3> and styles `.contact-info__single h3`. On our contact
 * page the only H1 is the page title, so an H3 there is a level skip (1 -> 3) and fails SE-01 and
 * the build-time compliance gate. The verification protocol's own guidance is to convert
 * theme-decorative headings to non-heading elements and add a CSS rule where the theme styled them
 * by tag, so the value is a <div class="contact-info__value"> carrying the kit's exact h3 styling. */
.contact-info__single .contact-info__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    color: var(--suntop-black);
    font-family: var(--suntop-font);
}

.contact-info__single .contact-info__value a {
    color: var(--suntop-black);
}

.contact-info__single .contact-info__value a:hover {
    color: var(--suntop-base);
}

/* The kit's contact-info band is a full-width 3-column row on a page with no sidebar. Ours renders
 * inside default.php's col-xl-8 beside the R25 sidebar, as 2 cards - the email card is dropped
 * because R1 forbids an advertised email anywhere on the site. */
.contact-info--inline .contact-info__single {
    padding: 30px 24px 31px;
}

/* Sidebar section titles.
 *
 * `menu-siblings.php` originally marked its section titles as <h2> and every sibling link as <h3>,
 * which put 5 heading tags in the sidebar of every service page. R25 is explicit that no sidebar
 * element may use an H tag, so both were converted to <p class="sidebar-title"> and <span>.
 *
 * The operator reversed the TITLE half of that on 2026-08-13, during the SEO heading-structure pass:
 * "Services" and "Service Areas" are H2s again. That is a deliberate departure from R25, raised with
 * the operator at the time - two section titles are not the five-tag dilution the rule was written
 * against, and they are genuine sections of the page. The LINK labels stay spans: those were the H3s
 * that actually diluted the outline, one per city, and R25 still holds for them.
 *
 * The declarations below now duplicate the kit's own `.title-box h2` (service.css:209), which
 * applies again since the tag it is keyed to is back. They are kept rather than deleted so the
 * `.sidebar-title` class stays self-sufficient - the styling does not silently depend on which tag
 * the component happens to render this month. Note the h2 also takes the global heading color
 * (style.css:130, navy) where the <p> inherited body gray; that is the kit's intended treatment for
 * this panel. To hold the old gray, add `color: var(--suntop-gray);` here. */
.services-details__sidebar-services .title-box .sidebar-title {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
}

/* Contact page map band.
 * The embed Google hands you carries width="600" height="450"; google-map.php rebuilds the iframe
 * with this class instead so the map fills the band and scales down cleanly on a phone. */
.contact-map {
    display: block;
    line-height: 0;
}

.google-map__one {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 767px) {
    .google-map__one {
        height: 320px;
    }
}

/* Maintenance plan cards (CP-05), using the kit's pricing component.
 * The kit marks the plan name as <h2> and the price line as <h4>, which is a level skip (2 -> 4)
 * inside a page whose only H1 is the title. Both are styled non-headings here, carrying the kit's
 * exact type scale so the cards look identical. */
.pricing-one__single .table-header .category-box .plan-name {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
}

.pricing-one__single .table-header .pricing-box .plan-terms {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    margin: 0;
}

/* Page-header title color.
 *
 * The kit's page-header markup uses <h2> for the page title and styles it
 * `.page-header__inner h2 { color: var(--suntop-white) }`. Our build renders <h1> there
 * instead, because SE-01 requires exactly one H1 per page and the page title is it. No
 * `h1` rule exists in the kit, so the title fell back to the global heading color -
 * var(--suntop-black) - on a band whose background is ALSO var(--suntop-black). Measured
 * on /faq: h1 rgb(0,0,102) on rgb(0,0,102), a contrast ratio of 1.0.
 *
 * This predates the Step 02 palette swap (it was #111111 on #111111 before, equally
 * invisible) and affected every inner page. It stayed hidden until permalinks were
 * registered and an inner page could be rendered for the first time. */
.page-header__inner h1 {
    color: var(--suntop-white);
}

/* Logo sizing.
 * Measured 2026-08-06: the kit's logo renders at 130x27 inside a 100px nav band.
 * The AGS logo is a 419x303 lockup - aspect 1.38:1 against the kit wordmark's
 * 4.8:1 - so reproducing the kit's exact box would squash it. Constraining by
 * HEIGHT instead keeps the artwork undistorted and keeps the header at the kit's
 * 155px total. Without this the image renders at its natural 303px tall and
 * inflates the header to 447px (2.9x the reference).
 *
 * 64 -> 88px (operator, 2026-08-13: "the logo image is not well shown"). The
 * artwork is a stacked lockup, so the height cap sets the size of everything in
 * it, and at 64px the "AMERICAN GENERATOR SOLUTIONS" bar inside it rendered about
 * 6px tall - present but not readable, while the AGS monogram above it had room to
 * spare. The nav band is 100px (style.css:1758, 40px padding either side of a 20px
 * line), so 88px is the largest cap that still leaves the logo inside the band and
 * keeps the header at 155px. `width: 100%` from style.css:1566 is overridden below
 * it by `width: auto`, which is what stops the cap from stretching the image.
 *
 * The kit's own logo is also `width: 100%` of an inline-block anchor, so the anchor
 * needs `line-height: 0` or the img's baseline gap adds 5px under it. */
.main-header-one__logo a {
    line-height: 0;
}

.main-header-one__logo img {
    height: auto;
    max-height: 88px;
    width: auto;
}

/* The footer logo has more room than the header's, but unconstrained it also renders
 * at the artwork's natural 419x303 and dominates the first footer column. */
.footer-widget-one__about-logo img {
    height: auto;
    max-height: 110px;
    width: auto;
}

/* Top bar height.
 * Measured 2026-08-06: the kit's top band is 55px, set by its 35px social icons plus
 * padding. Ours carries text links only (28px), which collapsed the band to 48px and
 * shifted every element below it up by 7px. Pinning the min-height restores the kit's
 * 155px total header and puts the nav band back at y=55. */
.main-header-one__top-inner {
    min-height: 55px;
}

/* Top bar secondary nav.
 * The kit lays its top-bar items out inline (phone and email sit side by side at
 * y=17-20). `.top-nav` is a build-side class with no kit styling, so without this
 * its items stack vertically and push the bar to 76px tall. */
.main-header-one__top .top-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    /* margin-left:auto keeps the secondary nav right-aligned the way the kit puts its
     * phone and email, and holds that position whether or not the working-hours block
     * to its left is rendered (it is hidden when the CMS hours field is empty). */
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.main-header-one__top .top-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Top-bar links must be white on the band behind them.
 * Measured 2026-08-06: they were inheriting the theme link color, which was the
 * identical value as the bar behind them, so they rendered invisible while every DOM
 * signal reported them present, laid out and visibility:visible. The band is navy
 * now rather than the kit's orange, and the same trap applies at the new value. */
.main-header-one__top .top-nav a {
    color: #fff;
}

.main-header-one__top .top-nav a:hover,
.main-header-one__top .top-nav a:focus {
    color: #fff;
    text-decoration: underline;
}

/* Footer contact block text color.
 *
 * Our footer component marks these up as `.footer-widget-one__contact-item`, a class
 * the kit's footer.css never styles - it styles `.footer-widget-one__contact-text1`
 * and `-text2`. So the address and phone fell through to the body color #3C3C3C and
 * sat on the dark footer at 1.71:1 against the kit's near-black, failing WCAG AA the
 * whole time. Navy did not cause that; it exposed it (1.60:1).
 *
 * The phone link WAS passing at 5.97:1 as orange on near-black and dropped to 2.66:1
 * as red on navy, so that half is a genuine regression from the palette swap.
 *
 * Both are set to the kit's own footer-contact treatment, rgba(white, 0.8), measured
 * at 11.6:1 on navy. The hover deliberately does NOT follow the kit to
 * var(--suntop-base): red on navy is 2.66:1, the same failure being fixed here. */
.footer-widget-one__contact-item p,
.footer-widget-one__contact-item p a {
    color: rgba(var(--suntop-white-rgb), 0.8);
}

.footer-widget-one__contact-item p a:hover,
.footer-widget-one__contact-item p a:focus {
    color: var(--suntop-white);
}

/* The "View All ..." first entry in a dropdown (R28). The kit has no equivalent,
 * so it needs its own separator treatment to read as the parent's own page
 * rather than as a sibling of the child links. */
.main-menu__list .menu-all > a {
    font-weight: 600;
}

.main-menu__list .menu-all {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/* `.faq-one__form .title-box h3` used to sit here - it kept the homepage FAQ band's lead-form
 * title from rendering navy-on-navy at 1:1 contrast. The form column was removed from home.php on
 * 2026-08-13 (operator) and `.faq-one__form` appears on no other layout in this build, so the rule
 * went with it. If a lead form is ever put back in a dark box, that heading will need the same
 * treatment again: the kit only styles `.faq-one__form .title-box h2`, and any other tag falls
 * through to the global heading color, which is the same navy as the box behind it. */

/* Two-column mega menu for dropdowns over 12 items (R28). `_app_functions.php` has always
 * emitted the `mega-menu-list` class at the right threshold, but no rule ever matched it, so the
 * 15-item Service Area dropdown rendered as the kit's single 280px column: 808px tall, running
 * to y=963 in a 900px viewport, which put the last four cities below the fold with no way to
 * scroll to them. Two columns halves the height and fixes the overflow along with the rule.
 * `column-span` keeps "View All Service Areas" as a full-width first row rather than stranding
 * it at the top of the left column. */
.main-menu .main-menu__list > li > ul.mega-menu-list,
.stricky-header .main-menu__list > li > ul.mega-menu-list {
    /* `display: block` is load-bearing, not tidying. The kit's base dropdown rule sets
     * `display: flex`, and column-count has NO effect on a flex container - with it left as flex
     * the class matched, the width doubled to 560px, and the list still rendered as one 488px
     * column. Multi-column needs a block container. */
    display: block;
    min-width: 560px;
    column-count: 2;
    column-gap: 0;
}

.main-menu .main-menu__list > li > ul.mega-menu-list > li,
.stricky-header .main-menu__list > li > ul.mega-menu-list > li {
    break-inside: avoid;
}

.main-menu .main-menu__list > li > ul.mega-menu-list > li.menu-all,
.stricky-header .main-menu__list > li > ul.mega-menu-list > li.menu-all {
    column-span: all;
}

/* ==========================================================================
   Homepage bands (layouts/home.php)
   ========================================================================== */

/* The kit's hero headline is display type built for one word: .main-slider__title is 200px
 * uppercase, sized for "MODERN", and .main-slider__title-two is 66px outlined for "ROOFING
 * SOLLUTION". This build's H1 has to carry the search terms instead ("Standby Generator
 * Installation", 30 characters), which at 200px overruns the 1200px container roughly threefold.
 * Both tiers are scaled to fit that line, keeping the kit's two-tier structure and its size
 * ratio (200:66 = 3.0; 64:34 = 1.9 - closer together because the second line is now the longer
 * of the two). The outline is replaced with solid white: a 36-character line in 1px transparent
 * stroke measured below 3:1 against the hero photo and is unreadable at mobile sizes. */
/* The color is the same fix as the second tier below, and for the same reason. slider.css sets
 * this tier to var(--suntop-base), which worked as the kit's orange on its dark hero but not as
 * this build's red: measured against the actual hero photo it reads 2.62:1 at 1280 and 1.79:1 at
 * 390 (worst pixel 1.08:1), where 64px large text needs 3:1. White measures 16.20:1 on the same
 * pixels. This is the fifth accent-on-dark instance the palette swap produced. */
.main-slider__title {
    color: var(--suntop-white);
    font-size: 64px;
    line-height: 74px;
    letter-spacing: normal;
    text-transform: none;
}

.main-slider__title-two {
    color: var(--suntop-white);
    -webkit-text-stroke: 0;
    font-size: 34px;
    line-height: 44px;
    font-weight: 600;
    text-transform: none;
}

/* The second tier moved INSIDE the H1 on 2026-08-13, so it is a <span> now rather than the block
 * element every rule above was written against. Everything else survives the move untouched - the
 * rules are all keyed to the class, and both the size step-down below and the `--static` opacity
 * restore further down still match it as a descendant. Only the box needs restating: a span is
 * inline, so without this the geo line would run on after "Installation" on the same line, take
 * the H1's 74px line-height instead of its own 44px, and drop its 5px top margin. */
.main-slider__title .main-slider__title-two {
    display: block;
}

@media only screen and (max-width: 991px) {
    .main-slider__title {
        font-size: 42px;
        line-height: 52px;
    }

    .main-slider__title-two {
        font-size: 24px;
        line-height: 34px;
    }
}

/* The kit's hero content column runs the full container width and simply never reaches the
 * estimate panel, because its headline is one word. This build's headline is a sentence, so at
 * 1740px the content ran to x=1567 while the panel starts at x=1194 - a 373px overlap, with the
 * H1 and the intro paragraph passing behind the panel. Capping the column at 62% leaves a gutter
 * before the panel at every desktop width; below the xl breakpoint the panel drops into flow and
 * the column takes the full width again. */
.main-slider--static .main-slider__content {
    max-width: 62%;
}

@media only screen and (max-width: 1199px) {
    .main-slider--static .main-slider__content {
        max-width: 100%;
    }
}

/* The kit fades the hero text in from `.swiper-slide-active`, a class only Swiper adds. This hero
 * has one slide and therefore no carousel (script.js loops, which would clone the slide and give
 * the page three H1s), so the five gated elements need their resting state restored. */
.main-slider--static .main-slider__sub-title,
.main-slider--static .main-slider__title,
.main-slider--static .main-slider__title-two,
.main-slider--static .main-slider__text,
.main-slider--static .main-slider__btn {
    opacity: 1;
    transform: none;
}

/* The kit's hero panel holds a four-field form. This site's only form is the GoHighLevel embed,
 * which is out of scope to style and asks for 914px of height, so the panel keeps its size and
 * position but carries the phone (the primary CTA under R1) and a link to the contact page. */
.main-slider__form-text {
    margin-bottom: 22px;
}

.main-slider__form-phone {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.main-slider__form-phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--suntop-base);
    color: var(--suntop-white);
    margin-right: 14px;
    flex-shrink: 0;
}

.main-slider__form-phone-text {
    display: flex;
    flex-direction: column;
}

.main-slider__form-phone-label {
    font-size: 14px;
    line-height: 20px;
    color: var(--suntop-gray);
}

.main-slider__form-phone-number {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--suntop-black);
}

/* The phone block is the panel's last element since the "Request a Free Quote" button was removed
 * (home.php, 2026-08-13). Its 22px bottom margin was the gap to that button; against the panel's own
 * 50px bottom padding it became 72px of empty white under a card that is now three elements tall.
 * Scoped to :last-child so the gap comes back on its own if anything is ever added below it.
 *
 * The `.main-slider__form .button-box .thm-btn` rule that used to sit here - full-width, centred -
 * styled only that button. `.main-slider__form` exists on no other layout, so it went with it. */
.main-slider__form-phone:last-child {
    margin-bottom: 0;
}

/* Theme-decorative headings converted to non-headings so the page outline stays meaningful
 * (SE-01, R25). Each rule reproduces the kit's own treatment for the tag it replaces, so nothing
 * moves visually. */
.features-one__single .text-box .features-one__label {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
}

.about-one__content-text2-single .title-box .about-one__feature-title {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
}

/* Also repairs the About page, which uses this class already: the kit styles the reviewer name
 * as .testimonial-one__single-author-info h2, so converting it to a <p> left it at body size. */
.testimonial-one__single-author-info .testimonial-one__author-name {
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 4px;
}

/* Card and item titles demoted from the kit's H2 to H3, because they sit beneath their band's own
 * H2 and are real content rather than decoration. The kit styles them by tag, so each needs its
 * rule restated at the new level. */
.highlight-one__single-content h3 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.highlight-one__single-content h3 a {
    color: var(--suntop-black);
}

.highlight-one__single-content h3 a:hover {
    color: var(--suntop-base);
}

.services-one__tab .tabs-button-box .tab-btn-item .text-box h3 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}

.services-one__tab .tabs-button-box .tab-btn-item.active-btn .text-box h3 {
    color: var(--suntop-white);
}

.services-one__tab .tabs-button-box .tab-btn-item .text-box h3 span {
    position: relative;
    display: inline-block;
    font-weight: 600;
    margin-right: 43px;
}

/* Same demotion for the homepage FAQ accordion, including the +/- icon the kit hangs off the
 * title's ::before. */
.faq-one-accrodion .accrodion-title h3 {
    position: relative;
    color: var(--suntop-black);
    font-size: 24px;
    line-height: 34px;
    font-weight: 500;
    padding-right: 50px;
    margin: 0;
    font-family: var(--suntop-font);
    transition: all 500ms ease;
}

.faq-one-accrodion .accrodion.active .accrodion-title h3 {
    color: var(--suntop-white);
}

.faq-one-accrodion .accrodion-title h3 span {
    position: relative;
    display: inline-block;
    margin-right: 50px;
}

.faq-one-accrodion .accrodion-title h3::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--suntop-white);
    font-size: 15px;
    line-height: 15px;
    font-weight: 400;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--suntop-black);
    border-radius: 50%;
    transition: all 500ms ease;
    text-align: center;
    content: "\e90c";
    font-family: 'icomoon' !important;
}

.faq-one-accrodion .accrodion.active .accrodion-title h3::before {
    content: "\e900";
    color: var(--suntop-black);
    background: var(--suntop-white);
    font-weight: 700;
}

.faq-one__btn {
    margin-top: 45px;
}

/* The service-area band has no counterpart in the kit - the kit's homepage names no locations at
 * all - so it is styled here rather than mirrored. CP-02 requires the homepage to link every city
 * it names to that city's own page, which needs somewhere to put them. */
.service-area-home {
    position: relative;
    display: block;
    padding: 120px 0;
}

.service-area-home__text p {
    margin-bottom: 20px;
}

.service-area-home__btn {
    margin-top: 10px;
}

.service-area-home__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-area-home__list li {
    display: flex;
    align-items: center;
}

.service-area-home__list li i {
    color: var(--suntop-base);
    margin-right: 10px;
    font-size: 14px;
}

.service-area-home__list li a {
    color: var(--suntop-black);
    font-weight: 500;
}

.service-area-home__list li a:hover,
.service-area-home__list li a:focus {
    color: var(--suntop-base);
}

@media only screen and (max-width: 767px) {
    .service-area-home {
        padding: 80px 0;
    }

    .service-area-home__list {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 35px;
    }
}

/* ---------------------------------------------------------------------------
 * Financing band (home.php, added 2026-08-17).
 *
 * The second band this build ADDED rather than ported, so it follows service-area-home above and
 * lives here in full instead of in a module-css file that mirrors the kit. The kit's own `brand-one`
 * was considered and rejected: it is a bare five-across logo strip on hardcoded
 * `float: left; width: 20%` with no title structure, so reusing it meant overriding its grid and
 * bolting a sec-title on anyway.
 *
 * 120px/0 is the site's standard band rhythm (highlight.css, counter.css, testimonial.css all use
 * it), so this stacks against the CTA above and the service-area band below exactly as every other
 * pair on the page does. */
.financing-one {
    position: relative;
    display: block;
    padding: 120px 0;
}

.financing-one__text p + p {
    margin-top: 20px;
}

.financing-one__btn {
    margin-top: 30px;
}

/* The logo row.
 *
 * The two lockups are very different shapes: NEIF is 1000x380 (2.6:1 - a starburst mark beside a
 * wordmark, over two lines of small type), Service Finance is 540x70 (7.7:1 - a slim wordmark).
 * A single shared max-height would render Service Finance about 460px wide against NEIF's 158px;
 * a single shared max-width would leave Service Finance a third of NEIF's height. Neither reads as
 * a balanced pair, so each logo is capped on its own axis, with the two values chosen to give them
 * comparable optical MASS rather than comparable numbers.
 *
 * Flex rather than the kit's float grid, so the cells stay aligned to each other's midline whatever
 * the rendered heights come out to be, and so the row reflows to one column on a phone by itself.
 * The border and white fill echo brand-one's treatment, which is what gives two logos on a white
 * page something to sit inside. */
.financing-one__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 50px;
    margin: 0;
    padding: 40px 30px;
    list-style: none;
    border: 1px solid #bfbfbf;
    background: var(--suntop-white);
}

.financing-one__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.financing-one__logo--service-finance img {
    max-height: 46px;
}

.financing-one__logo--neif img {
    max-height: 88px;
}

/* The credit-approval qualifier, sitting directly under the lender marks. The band names two
 * lenders without naming a rate, and this is the line that keeps that honest. */
.financing-one__note {
    margin-top: 18px;
    font-size: 15px;
    line-height: 24px;
    color: var(--suntop-gray);
    text-align: center;
}

/* col-xl-6, so the two columns stack below 1200 and the logo panel needs its own top gap. */
@media only screen and (max-width: 1199px) {
    .financing-one__logos {
        margin-top: 45px;
    }
}

@media only screen and (max-width: 767px) {
    .financing-one {
        padding: 80px 0;
    }

    .financing-one__logos {
        padding: 30px 20px;
    }
}

/* The kit puts the counter numbers in the accent color on the counter band's dark fill, which
 * worked when that pair was orange on near-black. After the Step 02 palette swap it is red on
 * navy, which axe flags as a serious contrast failure - the same pairing that was fixed in the
 * footer for the phone number. White clears it on the same background at 11.6:1. */
.counter-one .counter-one__counter-text .count-box h2,
.counter-one .counter-one__counter-text .count-box .count-text,
.counter-one .counter-one__counter-text .count-box .plus {
    color: var(--suntop-white);
}

/* The marquee items are divs rather than the kit's <li>, because the marquee plugin re-wraps them
 * at runtime and <li> elements outside a list fail two axe rules. The kit puts its items on one
 * line with `.sliding-text-one__list li { float: left; margin-right: 35px }`, and that rule was
 * lost in the conversion - so the four items stacked vertically, measured 88px apart, making the
 * band 427px tall instead of the kit's 163px. This restores the kit's own treatment at the new
 * element. Applies to the About page as well, which carries the same band. */
.sliding-text-one__item {
    position: relative;
    display: block;
    float: left;
    margin-right: 35px;
}

/* The CTA band's supporting line was invisible: `.page-cta__text` is a build-side class the kit
 * never styles - the kit's cta-one band carries only a title - so it fell through to the body
 * color #3C3C3C and sat on the band's near-black overlay #111827 at 1.61:1. White measures
 * 17.74:1 on the same fill. This is the same root cause as the footer contact text fixed in Step
 * 02: a class the theme has no rule for, on a dark surface. Affects the About page and all five
 * service pages as well as the homepage, since they all include page-cta.php.
 *
 * axe reports no violation here because the band's background is an image, which it cannot sample
 * - the failure is only visible in a pixel read. */
.page-cta .page-cta__text {
    color: var(--suntop-white);
}

/* Offer-page trust badges: the FOURTH instance of the same red-on-navy pairing.
 *
 * The ported landing.css puts .lp-counter__number in the accent on the counter band's dark fill,
 * which worked as PSE's orange on their surface. After this build's Step 02 palette swap it is
 * #B22234 on #000066, measured at 2.66:1 where text needs 4.5. White is 17.62:1 on the same fill.
 *
 * The other three were the footer contact text (Step 02), the homepage counter numbers and the
 * page-cta supporting line. The pattern is consistent enough to be worth stating: anywhere the kit
 * or a ported stylesheet uses --suntop-base as TEXT on a --suntop-black surface, this swap has
 * broken it, because the two new values sit far closer in luminance than the two old ones did. */
.lp-counter .lp-counter__number {
    color: var(--suntop-white);
}

/* Header stayed on one row between 1320px and 1435px, which includes 1366x768.
 *
 * The kit hides `.main-header-one__btn-box` below 1320px (responsive.css:1871) and shows it from
 * 1320 up. Our right-hand group is wider than the kit's: the kit puts a search and a cart icon
 * there, this build puts the phone CTA plus "Get a Free Estimate" (R1 makes the phone the primary
 * CTA and there is no e-commerce). So the button became visible 116px before there was room for it,
 * and `.main-menu__wrapper-inner` is `flex-wrap: wrap` - it wrapped the whole right group onto a
 * second row and the header went 155px -> 250px. Measured on / with the estimate button visible:
 *   children  89 logo + 671 nav + 566 right          = 1326px
 *   available viewport - 55px padding each side      = viewport - 110
 *   so a single row needed a 1436px viewport; the wrap ran 1320-1435 inclusive.
 *
 * Two bands, because no amount of reasonable compaction reaches 1320:
 *
 * 1320-1344 keeps the button hidden, which is the kit's own mechanism with its threshold moved up
 * to where the row can actually hold the button. Nothing is unreachable - the phone CTA stays, and
 * /contact-us is in both the main nav and the slim top bar.
 *
 * 1345-1439 shows the button and buys the 1326px back down to 1284px by tightening the three
 * places with slack: the row's side padding 55 -> 26 (58px), the button's own padding 35 -> 20
 * (30px), and the gap between phone and button 25 -> 14 (11px). The top bar's padding moves with
 * the row's so the logo and the top-bar content keep the same left edge. Measured slack after:
 * +9px at 1345, +30px at 1366, +103px at 1439.
 *
 * 1440px and up is untouched - `.container` widens to 1440 there (style.css:184) and the kit's own
 * 55px gutters fit. Header height re-measured at 155px across 1200, 1280, 1319, 1320, 1339, 1340,
 * 1345, 1366, 1400, 1435, 1439, 1440, 1600 and 1920.
 *
 * REVISED 2026-08-13, when the header rows were capped at the container width (see the block
 * further down). The old split was 1200-1344 hide / 1345-1439 compact-and-show, and the second half
 * only worked because the row could spend the full viewport minus 2x26px of gutter. Inside the
 * container the row has 1140 - 30 = 1110px to 1439px, and the group with the button measures ~1326,
 * so no amount of compaction reaches it - the compaction query is gone and the hide simply runs to
 * 1439. Nothing becomes unreachable: the phone CTA stays, and /contact-us is in both the main nav
 * and the slim top bar. From 1440 up the container is 1440 wide, the row has 1410, and the button
 * comes back. */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .main-header-one__btn-box {
        display: none;
    }
}

/* Homepage About band: the second feature label was squeezed to one word per line.
 *
 * The kit's `about-one__content-text2` is a flex row of two badges, each an 80px icon box plus a
 * label, with a 70px gap between them (about.css:145, :159, :163). Inside Bootstrap's xl container
 * the column is 478px, which leaves 478 - 80 - 80 - 70 = 248px of label width to share. The kit's
 * own labels are short enough for that; ours are not. Measured at 1366px before this rule:
 *   "Educational, / Not Pushy"        130px wide, 2 lines - the <br> is honoured
 *   "The Owner / Does Your Quote"      78px wide, 5 lines - one word per line
 * It is correct from 1440px up, where the container widens and the column becomes 628px, so the
 * band reads fine on a large monitor and breaks on a 1366x768 laptop.
 *
 * Letting the row wrap gives the second badge its natural 176px and the two lines the <br> asks
 * for, at the cost of 30px of band height (190 -> 220). The alternative measured alongside it -
 * tightening the gap to 24px and the icon boxes to 60px - only got to 3 lines and shrank an element
 * the kit sizes deliberately, so it was rejected rather than left untried.
 *
 * Shortening the copy would also fit, but "the owner does your quote" is one of this client's real
 * differentiators, so that is a content decision rather than a defect fix. */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .about-one__content-text2 {
        flex-wrap: wrap;
    }

    .about-one__content-text2-single + .about-one__content-text2-single {
        margin-left: 0;
    }
}

/* Footer contact block: separate the labels from the values and space the groups (operator,
 * 2026-08-07, matching the Powers Guaranteed treatment).
 *
 * Measured before: all three groups sat at margin 0 with a 0px gap between them, and the label and
 * its value were typographically identical - rgba(white, 0.8), weight 400, 18px, label margin-bottom
 * 0 - so "Headquarters" and the street address read as one run-on block.
 *
 * The reference gives the label weight and full opacity, drops the value back, and puts real air
 * between groups. Icons deliberately stay WHITE rather than taking the accent the reference uses:
 * this build's accent on the navy footer measures 2.66:1, below even the 3:1 a non-text UI element
 * needs, and accent-on-dark is the pairing that has already broken six times here. */
.footer-widget-one__contact-item + .footer-widget-one__contact-item {
    margin-top: 22px;
}

.footer-widget-one__contact-item p.footer-title {
    color: var(--suntop-white);
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-widget-one__contact-item p.footer-title a {
    color: var(--suntop-white);
    font-weight: 700;
}

.footer-widget-one__contact-item p.footer-title i {
    margin-right: 9px;
}

.footer-widget-one__contact-item p:not(.footer-title),
.footer-widget-one__contact-item p:not(.footer-title) a {
    color: rgba(var(--suntop-white-rgb), 0.7);
}

/* Contact page: the two info cards had 120px above and 90px below (operator: "extreme").
 *
 * `.contact-info` carries `padding: 120px 0 90px` (contact.css:7), which is right for the kit's
 * standalone contact page where that band is the full-width top of the page. Ours renders INSIDE
 * default.php's content column between the intro line and the page prose, where the same padding
 * put roughly 160px of white above the cards and 134px below. The `--inline` modifier this build
 * already uses for the 2-card variant is the right place to correct it. Measured after: 64px above
 * (24 here plus the intro line's own 40) and 74px below (30 here plus the next h2's 44). */
.contact-info--inline {
    padding: 24px 0 30px;
}

/* About page: the owner-story band had no padding at all, so the marquee above ran straight into
 * "Who you are actually hiring" and the last paragraph ran straight into the CTA band below.
 *
 * This band replaces the kit's `team-one`, and the kit has no `.team-one` padding rule - the kit's
 * spacing came from the photo-grid markup that was removed. 80px matches `cta-one` (cta.css:7),
 * the band immediately below it, so the page keeps one rhythm rather than gaining a bespoke gap. */
.team-one.owner-story {
    padding: 80px 0 80px;
}

/* The same zero-margin problem TF-04 fixed in the CMS content column, in this band's prose: the
 * kit's `p { margin: 0 }` reset applies here too and this band supplies no wrapper spacing, so its
 * four paragraphs ran together as one block. 30px matches the content column's paragraph rhythm. */
.team-one.owner-story p + p {
    margin-top: 30px;
}

/* Contact page: make the two info cards equal height.
 *
 * Between 1200 and 1439px the content column is narrow enough that the shop address wraps to two
 * lines, so that card grew to 250px against the phone card's 218px and the two sat with mismatched
 * bottoms. Above 1439 both fit on one line and the problem disappears - the same narrow-desktop band
 * as the header wrap and the About badge.
 *
 * The Bootstrap row is already `display: flex` and its two columns already measure equal height; it
 * is the card INSIDE that was only as tall as its own content. Filling the column is enough, so this
 * needs no fixed height and no media query. */
.contact-info--inline .contact-info__single {
    height: 100%;
}

/* ---------------------------------------------------------------------------
 * Header width matched to `.container` (operator, 2026-08-13).
 *
 * Both header rows were full-bleed with a flat `padding: 0 55px`, while every band below them sits
 * in a `.container`. On a 1920px monitor that put the logo 55px from the viewport edge and the hero
 * copy 240px in - the header sat visibly outside the page's own column and the logo read as
 * floating in the corner rather than aligned to anything.
 *
 * These reproduce Bootstrap's `.container` breakpoints (bootstrap.min.css) plus this build's own
 * 1440 step (style.css:184) and the kit's 15px gutter (style.css:175), so the logo's left edge and
 * the estimate button's right edge line up with the hero, the About band and the footer at every
 * width. The rows are matched to `.container` rather than wrapped in one because both are flex
 * containers the kit sizes and spaces directly.
 *
 * The navy fill moves UP to `.main-header-one__top`, which stays full-bleed: the slim bar is a
 * full-width band with its CONTENT in the column, and constraining the painted element would have
 * left white shoulders either side of it. That swap is at the top of this file, with the palette
 * rule it belongs to. */
.main-header-one__top-inner,
.main-menu__wrapper-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 576px) {
    .main-header-one__top-inner,
    .main-menu__wrapper-inner {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .main-header-one__top-inner,
    .main-menu__wrapper-inner {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .main-header-one__top-inner,
    .main-menu__wrapper-inner {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .main-header-one__top-inner,
    .main-menu__wrapper-inner {
        max-width: 1140px;
    }
}

@media (min-width: 1440px) {
    .main-header-one__top-inner,
    .main-menu__wrapper-inner {
        max-width: 1440px;
    }
}

/* ---------------------------------------------------------------------------
 * Header phone CTA.
 *
 * `.nav-phone` and its three children were markup with no stylesheet behind them anywhere in the
 * build - the label and the number rendered as one inline run beside the icon, at the same size and
 * weight, so the number had no more presence than the words in front of it.
 *
 * The treatment is the hero panel's own phone block (`.main-slider__form-phone-*` above), which is
 * the same component in a different surface: small gray label over a bold navy number. */
.nav-phone {
    display: flex;
    align-items: center;
}

.nav-phone__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--suntop-base);
    color: var(--suntop-white);
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 15px;
}

.nav-phone__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* Smaller than the number and dropped back in weight, so it reads as a label rather than as the
 * first half of the phone number. */
.nav-phone__label {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--suntop-gray);
}

.nav-phone__number {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    color: var(--suntop-black);
}

.nav-phone:hover .nav-phone__number,
.nav-phone:focus .nav-phone__number {
    color: var(--suntop-base);
}

/* ---------------------------------------------------------------------------
 * Theme decoration demoted out of the heading outline (SE, operator 2026-08-13).
 *
 * Same pattern as the `.features-one__label` group above: the kit reaches for <h2> wherever it wants
 * large type, which puts panel labels and odometer digits into the document outline as section
 * headings with no section under them. Each rule below reproduces the kit's own rule for the tag it
 * replaces, keyed to the class instead, so nothing moves visually. */

/* Was `.main-slider__form .title-box h2` (slider.css:264). */
.main-slider__form .title-box .main-slider__form-title {
    display: block;
    color: var(--suntop-black);
    font-size: 32px;
    line-height: 42px;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 3px;
    text-align: center;
}

/* Was `.about-one__counter .count-box h2` (about.css:77). */
.about-one__counter .count-box .count-text {
    color: transparent;
    -webkit-text-stroke: 1px var(--suntop-black);
    font-size: 100px;
    line-height: 1em;
    font-weight: 500;
}

/* Was `.about-two__experience-box .count-box h2` (about.css:285) - the "Years in Business" badge on
 * the About page photo.
 *
 * This one needs more than a straight copy of the h2 rule, because the sibling `+` is a bare <span>
 * and the kit styles it as `.about-two__experience-box .count-box span` (about.css:292) - a selector
 * that now matches the digit too. That rule is nearly the same treatment (white, 30px, 700), so most
 * of it is harmless, but it omits the h2's `line-height: 40px` and adds `top: -1px`, which together
 * would drop the digit a pixel out of line with the `+` beside it. Restating both settles it; three
 * classes outrank the kit's two-classes-plus-element, so this wins without !important. */
.about-two__experience-box .count-box .count-text {
    color: var(--suntop-white);
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    top: 0;
}

/* Was `.counter-one__counter-text .count-box h2` (counter.css:123). The color is overridden to white
 * by the contrast fix further up, which now names `.count-text` alongside the h2. */
.counter-one__counter-text .count-box .count-text {
    color: var(--suntop-base);
    font-size: 64px;
    line-height: 74px;
    font-weight: 700;
    margin-bottom: 2px;
}

/* responsive.css:55 steps the same figures down between 1200 and 1439; it is keyed to the h2, so the
 * span needs the matching declaration inside the matching query or the numbers stay 64px and the two
 * counter columns fall out of alignment on a 1366px laptop. */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .counter-one__counter-text .count-box .count-text {
        font-size: 61px;
        line-height: 71px;
    }
}

/* ---------------------------------------------------------------------------
 * Service-area list: the town names are H3s under the band's H2 (see home.php), but they are a
 * two-column index of links, not headings to be read as headings. Inheriting every type property
 * from the <li> leaves the h3 contributing structure and nothing else, so the visible treatment
 * stays where it already was - `.service-area-home__list li a` above, which supplies the weight 500
 * and the navy-to-red hover. Without this the browser default takes over and the towns render at
 * 28px bold with 8px of margin under each. */
.service-area-home__list li h3 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}