/*
 * Home (2026) template - MSH Studios, 2026-09-28 (REQ-best-plumber-0006).
 * Loaded only by page-home-2026.php. Same visual language as the Services Landing
 * template (services-landing-template.css): Thunder headings, Onest body, the
 * yellow / red / slate / near-black tokens and the btn-lp buttons.
 * Every rule is scoped to this template's body class so nothing else on the site changes.
 */

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-BoldLC.woff2") format("woff2"),
        url("../fonts/Thunder-BoldLC.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-BoldLCItalic.woff2") format("woff2"),
        url("../fonts/Thunder-BoldLCItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-ExtraBoldLC.woff2") format("woff2"),
        url("../fonts/Thunder-ExtraBoldLC.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-SemiBoldLC.woff2") format("woff2"),
        url("../fonts/Thunder-SemiBoldLC.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.page-template-page-home-2026 {
    --font-heading: "Thunder", "Anybody", sans-serif;
    --font-content: "Onest", "Play", sans-serif;
    --white: #fff;
    --primary: #fedd68;
    --secondary: #ff1b0d;
    --helping: #3a484d;
    --dark: #121211;
    --h26-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --h26-focus: 0 0 0 3px var(--dark), 0 0 0 6px var(--primary);
    --h26-shadow: 0 2px 6px rgba(58, 72, 77, 0.10), 0 18px 40px rgba(58, 72, 77, 0.16);
    --h26-field-line: #7d8386; /* 3.8:1 on white, above the 3:1 non-text minimum */
}

/* The page has its own contact section, so the site-wide contact bar is hidden here
   (same as the Services Landing template). */
.page-template-page-home-2026 .postscript-contact {
    display: none;
}

.page-template-page-home-2026 .h26 {
    display: block;
    overflow-x: clip;
    font-family: var(--font-content);
}

.page-template-page-home-2026 .h26 h1,
.page-template-page-home-2026 .h26 h2,
.page-template-page-home-2026 .h26 h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-wrap: balance;
}

.page-template-page-home-2026 .h26 .h26-h2 {
    font-weight: 800;
    font-size: clamp(48px, 7vw, 85px);
    line-height: 0.94;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--dark);
    margin: 0 auto 24px;
    max-width: 980px;
}

.page-template-page-home-2026 .h26 .h26-h2--light {
    color: var(--white);
}

/* ---------- Buttons (mirrors the Services Landing btn-lp set) ---------- */
.page-template-page-home-2026 .h26-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.page-template-page-home-2026 .h26-buttons--center {
    justify-content: center;
}

.page-template-page-home-2026 .h26 .btn.btn-lp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 166px;
    min-height: 52px;
    padding: 14px 31px 14px 35px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-family: var(--font-content);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.25s var(--h26-ease), box-shadow 0.25s var(--h26-ease), background-color 0.25s var(--h26-ease);
}

.page-template-page-home-2026 .h26 .btn.btn-lp-phone {
    padding: 14px 22px;
}

.page-template-page-home-2026 .h26 .btn.btn-lp-normal::after,
.page-template-page-home-2026 .h26 .btn.btn-lp-phone::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.page-template-page-home-2026 .h26 .btn.btn-lp-normal::after {
    background-image: url(../img/ArrowRight.svg);
    margin-left: 6px;
    transition: transform 0.25s var(--h26-ease);
}

.page-template-page-home-2026 .h26 .btn.btn-lp-normal.btn-text-white::after {
    background-image: url(../img/ArrowWhite.svg);
}

.page-template-page-home-2026 .h26 .btn.btn-lp-phone::before {
    background-image: url(../img/call.svg);
    margin-right: 6px;
}

.page-template-page-home-2026 .h26 .btn.btn-lp-phone.btn-text-dark::before {
    background-image: url(../img/callDark.svg);
}

.page-template-page-home-2026 .h26 .btn.btn-fill-primary { background: var(--primary); }
.page-template-page-home-2026 .h26 .btn.btn-fill-secondary { background: var(--secondary); }
.page-template-page-home-2026 .h26 .btn.btn-fill-helping { background: var(--helping); }
.page-template-page-home-2026 .h26 .btn.btn-fill-dark { background: var(--dark); }
.page-template-page-home-2026 .h26 .btn.btn-fill-none {
    background: transparent;
    border-color: currentColor;
}

.page-template-page-home-2026 .h26 .btn.btn-text-white,
.page-template-page-home-2026 .h26 .btn.btn-text-white:hover,
.page-template-page-home-2026 .h26 .btn.btn-text-white:focus { color: var(--white); }

.page-template-page-home-2026 .h26 .btn.btn-text-dark,
.page-template-page-home-2026 .h26 .btn.btn-text-dark:hover,
.page-template-page-home-2026 .h26 .btn.btn-text-dark:focus { color: var(--dark); }

.page-template-page-home-2026 .h26 .btn.btn-lp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(58, 72, 77, 0.30);
}

.page-template-page-home-2026 .h26 .btn.btn-fill-none:hover {
    background: rgba(255, 255, 255, 0.12);
}

.page-template-page-home-2026 .h26 .btn.btn-fill-none.btn-text-dark:hover {
    background: rgba(18, 18, 17, 0.06);
}

.page-template-page-home-2026 .h26 .btn.btn-lp:active {
    transform: translateY(0);
    box-shadow: none;
}

.page-template-page-home-2026 .h26 .btn.btn-lp-normal:hover::after {
    transform: translateX(5px);
}

.page-template-page-home-2026 .h26 .btn.btn-lp-phone:hover::before {
    animation: h26-shake 0.5s ease;
}

/* Keyboard focus. The child theme sets a global ':focus-visible { outline: 2px solid #000 !important;
   outline-offset: 8px; box-shadow: none !important }', which is invisible on the dark sections.
   These win inside this template only: dark ring on the light sections, yellow ring on the dark ones. */
.page-template-page-home-2026 .h26 :focus-visible {
    outline: 3px solid var(--dark) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

.page-template-page-home-2026 .h26 .h26-hero :focus-visible,
.page-template-page-home-2026 .h26 .h26-why :focus-visible {
    outline-color: var(--primary) !important;
}

/* The review card inside the dark section is yellow, so its link keeps the dark ring. */
.page-template-page-home-2026 .h26 .h26-why .h26-review :focus-visible {
    outline-color: var(--dark) !important;
}

@keyframes h26-shake {
    0% { transform: rotate(10deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0); }
}

/* ---------- 1. Opening section ---------- */
.page-template-page-home-2026 .h26-hero {
    position: relative;
    background: var(--dark);
    color: var(--white);
    isolation: isolate;
}

.page-template-page-home-2026 .h26-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.page-template-page-home-2026 .h26-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 30% 100%;
}

/* Scrim: the text sits on the right over the trucks, so the shade is strongest on the right
   and clears to the left, where the team stands. */
.page-template-page-home-2026 .h26-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(270deg, rgba(18, 18, 17, 0.9) 0%, rgba(18, 18, 17, 0.85) 45%, rgba(18, 18, 17, 0.8) 64%, rgba(18, 18, 17, 0.4) 76%, rgba(18, 18, 17, 0.05) 90%),
        linear-gradient(180deg, rgba(18, 18, 17, 0.35) 0%, rgba(18, 18, 17, 0) 40%);
    pointer-events: none;
}

.page-template-page-home-2026 .h26-hero__inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-top: 40px;
    padding-bottom: 72px;
}

/* 700px fits all five service pills on one row, so the buttons stay in the first screen. */
.page-template-page-home-2026 .h26-hero__content {
    width: 100%;
    max-width: 700px;
}

.page-template-page-home-2026 .h26 .h26-hero__title {
    font-weight: 800;
    font-size: clamp(72px, 10vw, 108px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--white);
    margin: 0;
    text-shadow: 0 2px 24px rgba(18, 18, 17, 0.35);
}

.page-template-page-home-2026 .h26 .h26-hero__subline {
    display: inline-block;
    font-family: var(--font-content);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin: 14px 0 0;
    text-shadow: 0 1px 12px rgba(18, 18, 17, 0.6);
    padding-left: 14px;
    border-left: 4px solid var(--secondary);
}

.page-template-page-home-2026 .h26-hero__body {
    margin: 22px 0 0;
    max-width: 700px;
}

.page-template-page-home-2026 .h26 .h26-hero__body p {
    font-family: var(--font-content);
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 12px;
    text-shadow: 0 1px 12px rgba(18, 18, 17, 0.6);
}

.page-template-page-home-2026 .h26-hero__body p:last-child {
    margin-bottom: 0;
}

.page-template-page-home-2026 .h26-hero__links {
    margin: 24px 0 0;
}

.page-template-page-home-2026 .h26-hero__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-template-page-home-2026 .h26-hero__links li {
    margin: 0;
    padding: 0;
}

.page-template-page-home-2026 .h26-hero__links li::before {
    content: none;
}

.page-template-page-home-2026 .h26 .h26-hero__links a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(18, 18, 17, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-content);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: var(--white);
    text-decoration: none;
    transition: background-color 0.25s var(--h26-ease), color 0.25s var(--h26-ease), border-color 0.25s var(--h26-ease);
}

.page-template-page-home-2026 .h26 .h26-hero__links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--dark);
}

.page-template-page-home-2026 .h26-hero .h26-buttons {
    margin-top: 26px;
}

/* ---------- 2. Service area ---------- */
.page-template-page-home-2026 .h26-area {
    position: relative;
    padding: 110px 0 100px;
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(254, 221, 104, 0.45), rgba(254, 221, 104, 0) 70%),
        radial-gradient(700px 380px at 0% 100%, rgba(255, 27, 13, 0.07), rgba(255, 27, 13, 0) 70%),
        linear-gradient(180deg, #fffdf5 0%, #fff 100%);
}

.page-template-page-home-2026 .h26-area__inner {
    max-width: 1180px;
}

.page-template-page-home-2026 .h26-area__head {
    text-align: center;
    margin-bottom: 40px;
}

.page-template-page-home-2026 .h26-area__body {
    max-width: 700px;
    margin: 0 auto;
}

.page-template-page-home-2026 .h26 .h26-area__body p {
    font-family: var(--font-content);
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: #494948;
    margin: 0;
    text-wrap: pretty;
}

.page-template-page-home-2026 .h26-area__map {
    position: relative;
    height: 460px;
    border-radius: 24px;
    overflow: hidden;
    background: #e9e6da;
    border: 6px solid var(--white);
    box-shadow: var(--h26-shadow);
}

.page-template-page-home-2026 .h26 .h26-map {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #e9e6da;
    font-family: var(--font-content);
}

/* No-JS / no-Leaflet note, replaced by the map once it builds. */
.page-template-page-home-2026 .h26 .h26-map__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--dark);
}

.page-template-page-home-2026 .h26 .h26-map__pin {
    background: none;
    border: 0;
}

.page-template-page-home-2026 .h26 .h26-map__pin svg {
    display: block;
    filter: drop-shadow(0 2px 3px rgba(18, 18, 17, 0.35));
}

.page-template-page-home-2026 .h26 .leaflet-tooltip.h26-map__label {
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--dark);
    color: var(--white);
    font-family: var(--font-content);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(18, 18, 17, 0.25);
}

.page-template-page-home-2026 .h26 .leaflet-tooltip-top.h26-map__label::before {
    border-top-color: var(--dark);
}

.page-template-page-home-2026 .h26 .leaflet-tooltip-bottom.h26-map__label::before {
    border-bottom-color: var(--dark);
}

.page-template-page-home-2026 .h26 .leaflet-control-attribution {
    font-family: var(--font-content);
    font-size: 11px;
}

.page-template-page-home-2026 .h26 .leaflet-control-zoom a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: var(--dark);
}

.page-template-page-home-2026 .h26 .leaflet-container a.leaflet-popup-close-button,
.page-template-page-home-2026 .h26 .leaflet-control-attribution a {
    color: #1f5f8b;
}

.page-template-page-home-2026 .h26 .h26-area__cities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.page-template-page-home-2026 .h26 .h26-area__city {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 18px 16px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid rgba(18, 18, 17, 0.08);
    border-top: 4px solid var(--secondary);
    box-shadow: 0 1px 2px rgba(58, 72, 77, 0.08), 0 8px 20px rgba(58, 72, 77, 0.08);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--dark);
}

.page-template-page-home-2026 .h26-area__city::before {
    content: none;
}

.page-template-page-home-2026 .h26-area__pin {
    flex: none;
    width: 26px;
    height: 26px;
    fill: var(--secondary);
}

.page-template-page-home-2026 .h26-area .h26-buttons {
    margin-top: 64px;
}

/* ---------- 3. Reviews / Why us ---------- */
.page-template-page-home-2026 .h26-why {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(800px 500px at 100% 0%, rgba(254, 221, 104, 0.14), rgba(254, 221, 104, 0) 70%),
        radial-gradient(700px 500px at 0% 100%, rgba(18, 18, 17, 0.45), rgba(18, 18, 17, 0) 70%),
        var(--helping);
    color: var(--white);
}

.page-template-page-home-2026 .h26-why__inner {
    max-width: 1240px;
}

.page-template-page-home-2026 .h26-why .h26-h2 {
    margin-bottom: 48px;
}

.page-template-page-home-2026 .h26-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 28px;
    align-items: start;
}

.page-template-page-home-2026 .h26-why__grid--no-review {
    grid-template-columns: minmax(0, 1fr);
}

.page-template-page-home-2026 .h26 .h26-review {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 36px 34px 30px;
    border-radius: 24px;
    background: linear-gradient(107.51deg, var(--primary) 35.2%, var(--secondary) 268.93%);
    color: var(--dark);
    box-shadow: 0 16px 40px rgba(18, 18, 17, 0.3);
}

.page-template-page-home-2026 .h26-review::after {
    content: "";
    position: absolute;
    right: 26px;
    top: 26px;
    width: 94px;
    height: 74px;
    background: url(../img/quotes.svg) no-repeat center / contain;
    filter: brightness(0);
    opacity: 0.12;
    pointer-events: none;
}

.page-template-page-home-2026 .h26 .h26-review__stars {
    display: block;
    width: 116px !important;
    max-width: none;
    height: 20px !important;
    margin-bottom: 18px;
}

.page-template-page-home-2026 .h26 .h26-review__title {
    position: relative;
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--dark);
    margin: 0 0 16px;
    max-width: 85%;
}

.page-template-page-home-2026 .h26 .h26-review__text {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-style: normal;
}

.page-template-page-home-2026 .h26 .h26-review__text::before,
.page-template-page-home-2026 .h26 .h26-review__text::after {
    content: none;
}

.page-template-page-home-2026 .h26 .h26-review__text p {
    font-family: var(--font-content);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin: 0;
}

.page-template-page-home-2026 .h26 .h26-review__by {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(18, 18, 17, 0.14);
    font-family: var(--font-content);
    font-weight: 600;
    font-size: 16px;
}

.page-template-page-home-2026 .h26 .h26-review__by a,
.page-template-page-home-2026 .h26 .h26-review__by span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.page-template-page-home-2026 .h26 .h26-review__by span {
    text-decoration: none;
}

.page-template-page-home-2026 .h26 .h26-review__by a:hover {
    text-decoration-thickness: 2px;
    color: #000;
}

/* Two balanced columns, each card sized to its own text (a 2x2 grid stretched the short
   Fast Response card to the height of Transparent Pricing). */
.page-template-page-home-2026 .h26 .h26-diffs {
    display: block;
    columns: 2;
    column-gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.page-template-page-home-2026 .h26 .h26-diff {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 20px;
    padding: 26px 24px;
    break-inside: avoid;
    border-radius: 20px;
    background: var(--white);
    color: var(--dark);
    box-shadow: 0 12px 30px rgba(18, 18, 17, 0.22);
}

.page-template-page-home-2026 .h26-diff::before {
    content: none;
}

/* Veteran-owned gets the dark card with the red edge, so the section's one brand-specific point stands out. */
.page-template-page-home-2026 .h26 .h26-diff--flag {
    background: var(--dark);
    color: var(--white);
    border-left: 6px solid var(--secondary);
}

.page-template-page-home-2026 .h26 .h26-diff--flag .h26-diff__title {
    color: var(--primary);
}

.page-template-page-home-2026 .h26 .h26-diff--flag .h26-diff__text {
    color: #e6e6e3;
}

.page-template-page-home-2026 .h26-diff__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary);
}

.page-template-page-home-2026 .h26-diff__icon svg {
    width: 30px;
    height: 30px;
    fill: var(--dark);
}

.page-template-page-home-2026 .h26 .h26-diff__title {
    font-weight: 800;
    font-size: 34px;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: var(--dark);
    margin: 0 0 8px;
}

.page-template-page-home-2026 .h26 .h26-diff__text {
    font-family: var(--font-content);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #494948;
    margin: 0;
}

.page-template-page-home-2026 .h26-why .h26-buttons {
    margin-top: 44px; /* + the last card's 20px bottom margin = 64px */
}

/* ---------- 4. Contact ---------- */
.page-template-page-home-2026 #contact-form {
    scroll-margin-top: 170px;
}

.page-template-page-home-2026 .h26-contact {
    padding: 100px 0 72px;
    position: relative;
    background:
        radial-gradient(700px 400px at 0% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(254, 221, 104, 0.35) 100%),
        #fff8dc;
}

.page-template-page-home-2026 .h26-contact__inner {
    max-width: 1240px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 546px);
    grid-template-areas:
        "info form"
        "faq form";
    grid-template-rows: auto 1fr;
    column-gap: 72px;
    row-gap: 24px;
    align-items: start;
}

.page-template-page-home-2026 .h26-contact__info {
    grid-area: info;
}

.page-template-page-home-2026 .h26 .h26-contact__title {
    font-weight: 700;
    font-size: clamp(56px, 8vw, 112px);
    line-height: 0.9;
    text-align: left;
    margin: 0 0 20px;
}

.page-template-page-home-2026 .h26 .h26-contact__subline p {
    font-family: var(--font-content);
    font-size: 19px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--dark);
    margin: 0;
}

.page-template-page-home-2026 .h26 .h26-contact__subline a {
    color: var(--dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.page-template-page-home-2026 .h26 .h26-contact__subline a:hover {
    color: var(--secondary);
}

.page-template-page-home-2026 .h26-contact__info .h26-buttons {
    margin-top: 28px;
}

.page-template-page-home-2026 .h26-contact__form {
    grid-area: form;
    background: var(--white);
    border-radius: 24px;
    padding: 34px 32px 30px;
    box-shadow: var(--h26-shadow);
}

.page-template-page-home-2026 .h26-contact__faq {
    grid-area: faq;
    text-align: left;
}

.page-template-page-home-2026 .h26 .h26-contact__faq p {
    font-family: var(--font-content);
    font-size: 17px;
    line-height: 1.5;
    color: var(--dark);
    margin: 0;
}

.page-template-page-home-2026 .h26 .h26-contact__faq a {
    display: inline-block;
    padding: 12px 0;
    color: var(--dark);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.page-template-page-home-2026 .h26 .h26-contact__faq a:hover {
    color: var(--secondary);
}

/* Short form (CF7 markup: .new-landing-form, .cf-text, .btn-lp) */
.page-template-page-home-2026 .h26-contact__form .wpcf7 form > p:empty {
    display: none;
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .row {
    row-gap: 18px;
}

.page-template-page-home-2026 .h26-contact__form .h26-field {
    display: block;
    margin: 0;
}

.page-template-page-home-2026 .h26-contact__form .h26-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form input.cf-text,
.page-template-page-home-2026 .h26-contact__form .new-landing-form select.cf-text,
.page-template-page-home-2026 .h26-contact__form .new-landing-form textarea.cf-text {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 4px;
    border: none;
    border-bottom: 1px solid var(--h26-field-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-content);
    font-weight: 400;
    font-size: 16px;
    color: var(--dark);
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form textarea.cf-text {
    height: 110px;
    max-height: 160px;
    resize: vertical;
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text::placeholder {
    color: #5f5f5d;
    opacity: 1;
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text:focus,
.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text:focus-visible {
    outline: none !important;
    border-bottom: 2px solid var(--dark);
}

/* The parent theme turns every <select> into a select2 box; match it to the other fields. */
.page-template-page-home-2026 .h26-contact__form .select2-container {
    width: 100% !important;
}

.page-template-page-home-2026 .h26-contact__form .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 52px;
    margin: 0;
    padding: 0 4px;
    border: none !important;
    border-bottom: 1px solid var(--h26-field-line) !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-template-page-home-2026 .h26-contact__form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    font-family: var(--font-content);
    font-size: 16px;
    line-height: 1.3;
    color: #5f5f5d;
}

.page-template-page-home-2026 .h26-contact__form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
}

.page-template-page-home-2026 .h26-contact__form .select2-container--focus .select2-selection--single,
.page-template-page-home-2026 .h26-contact__form .select2-container--open .select2-selection--single {
    border-bottom: 2px solid var(--dark) !important;
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .btn.btn-lp {
    width: 100%;
    margin-top: 34px;
    justify-content: center;
    cursor: pointer;
}

/* Error state: keep the underline design. The red line carries the signal (3.9:1, non-text);
   the message is dark text (AA) after a red icon, 16px. */
.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text.wpcf7-not-valid,
.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text[aria-invalid="true"] {
    border: none !important;
    border-bottom: 2px solid var(--secondary) !important;
    background: transparent;
}

.page-template-page-home-2026 .h26-contact__form .wpcf7-not-valid + .select2-container .select2-selection--single,
.page-template-page-home-2026 .h26-contact__form select[aria-invalid="true"] + .select2-container .select2-selection--single {
    /* The parent theme boxes invalid fields in red on all four sides (!important). */
    border: none !important;
    border-bottom: 2px solid var(--secondary) !important;
}

.page-template-page-home-2026 .h26-contact__form .wpcf7-not-valid-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--font-content);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dark);
}

.page-template-page-home-2026 .h26-contact__form .wpcf7-not-valid-tip::before {
    content: "!";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.page-template-page-home-2026 .h26-contact__form .wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--helping);
    border-left: 6px solid var(--helping);
    border-width: 1px 1px 1px 6px !important; /* the parent theme forces 4px */
    border-radius: 12px;
    text-align: left;
    background: #f4f6f6;
    font-family: var(--font-content);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--dark);
}

.page-template-page-home-2026 .h26-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.page-template-page-home-2026 .h26-contact__form .wpcf7 form.unaccepted .wpcf7-response-output,
.page-template-page-home-2026 .h26-contact__form .wpcf7 form.payment-required .wpcf7-response-output,
.page-template-page-home-2026 .h26-contact__form .wpcf7 form.failed .wpcf7-response-output,
.page-template-page-home-2026 .h26-contact__form .wpcf7 form.aborted .wpcf7-response-output,
.page-template-page-home-2026 .h26-contact__form .wpcf7 form.spam .wpcf7-response-output {
    border-color: var(--secondary);
    background: #fff5f4;
}

.page-template-page-home-2026 .h26-contact__form .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--helping);
    border-left-color: var(--primary);
    background: #fffbea;
}

/* select2 appends its open list to <body>, outside the form, so it is scoped to the page instead. */
.page-template-page-home-2026 .select2-container--open .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--h26-field-line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--h26-shadow);
    font-family: var(--font-content);
}

.page-template-page-home-2026 .select2-container--open .select2-dropdown--below {
    margin-top: 6px;
}

.page-template-page-home-2026 .select2-container--open .select2-dropdown--above {
    margin-top: -6px;
}

.page-template-page-home-2026 .select2-container--default .select2-results > .select2-results__options {
    max-height: 360px;
    padding: 6px 0;
}

.page-template-page-home-2026 .select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 16px;
    font-family: var(--font-content);
    font-size: 16px;
    line-height: 1.3;
    color: var(--dark);
}

.page-template-page-home-2026 .select2-container--default .select2-results__option[aria-selected="true"],
.page-template-page-home-2026 .select2-container--default .select2-results__option--selected {
    background: #fff6d1;
    color: var(--dark);
    font-weight: 600;
}

.page-template-page-home-2026 .select2-container--default .select2-results__option--highlighted[aria-selected],
.page-template-page-home-2026 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--primary);
    color: var(--dark);
}

.page-template-page-home-2026 .h26-contact__form .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
    .page-template-page-home-2026 .h26-hero__inner {
        padding-top: 56px;
        padding-bottom: 96px;
    }
}

@media (max-width: 1199px) {
    /* Same specificity as the base rule (it has .h26), or these never apply. */
    .page-template-page-home-2026 .h26 .h26-area__cities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-template-page-home-2026 .h26-why__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-template-page-home-2026 .h26 .h26-review {
        box-shadow: 0 12px 28px rgba(18, 18, 17, 0.25);
    }

    .page-template-page-home-2026 .h26 .h26-review__text p {
        max-width: 30em; /* about 70 characters a line when the card is full width */
    }

    .page-template-page-home-2026 .h26-contact__inner {
        column-gap: 40px;
    }
}

@media (max-width: 991px) {
    .page-template-page-home-2026 .h26-contact__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "info"
            "form"
            "faq";
        grid-template-rows: auto;
        max-width: 720px;
    }

    .page-template-page-home-2026 #contact-form {
        scroll-margin-top: 40px;
    }
}

@media (max-width: 991px) {
    /* On phones and tablets the photo sits under the text instead of behind it, so the copy is on a solid dark field. */
    .page-template-page-home-2026 .h26-hero {
        display: flex;
        flex-direction: column-reverse;
    }

    .page-template-page-home-2026 .h26-hero__media {
        position: relative;
        inset: auto;
        z-index: 0;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    /* Crop in on the team and trucks, and tone the bright sky down under the text block. */
    .page-template-page-home-2026 .h26-hero__img {
        object-position: 25% 95%;
        transform: scale(1.12);
        transform-origin: 25% 95%;
    }

    .page-template-page-home-2026 .h26-hero__media::after {
        background: linear-gradient(180deg, var(--dark) 0%, rgba(18, 18, 17, 0.55) 25%, rgba(18, 18, 17, 0) 50%);
    }

    .page-template-page-home-2026 .h26-hero__inner {
        display: block;
        padding-top: 56px;
        padding-bottom: 32px;
    }

    .page-template-page-home-2026 .h26-hero__content {
        max-width: 720px;
    }

}

@media (max-width: 767px) {
    .page-template-page-home-2026 .h26-hero__media {
        aspect-ratio: 4 / 3;
    }

    /* 16px side gutter on phones (the theme container gives 12px). */
    .page-template-page-home-2026 .h26 .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .page-template-page-home-2026 .h26 .h26-hero__title {
        font-size: 76px;
    }

    .page-template-page-home-2026 .h26 .h26-hero__body p {
        font-size: 16px;
    }

    .page-template-page-home-2026 .h26-hero .h26-buttons .btn.btn-lp {
        flex: 1 1 100%;
    }

    .page-template-page-home-2026 .h26-area,
    .page-template-page-home-2026 .h26-why,
    .page-template-page-home-2026 .h26-contact {
        padding: 64px 0;
    }

    .page-template-page-home-2026 .h26-area__map {
        height: 320px;
        border-width: 4px;
        border-radius: 18px;
    }

    .page-template-page-home-2026 .h26 .h26-area__city {
        font-size: 28px;
        padding: 14px 10px;
    }

    .page-template-page-home-2026 .h26-area .h26-buttons {
        margin-top: 48px;
    }

    .page-template-page-home-2026 .h26-why .h26-buttons {
        margin-top: 34px; /* + 14px card margin = 48px */
    }

    .page-template-page-home-2026 .h26-area .h26-buttons .btn.btn-lp,
    .page-template-page-home-2026 .h26-why .h26-buttons .btn.btn-lp,
    .page-template-page-home-2026 .h26-contact__info .h26-buttons .btn.btn-lp {
        flex: 1 1 100%;
    }

    .page-template-page-home-2026 .h26 .h26-diffs {
        columns: 1;
    }

    .page-template-page-home-2026 .h26 .h26-diff {
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 14px;
        padding: 20px 18px;
    }

    .page-template-page-home-2026 .h26-diff__icon {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .page-template-page-home-2026 .h26 .h26-diff__title {
        font-size: 30px;
    }

    .page-template-page-home-2026 .h26 .h26-review {
        padding: 28px 22px 22px;
    }

    .page-template-page-home-2026 .h26 .h26-review__title {
        font-size: 36px;
    }

    .page-template-page-home-2026 .h26 .h26-review__text p {
        font-size: 18px;
    }

    .page-template-page-home-2026 .h26-review::after {
        width: 64px;
        height: 50px;
        right: 18px;
        top: 18px;
    }

    .page-template-page-home-2026 .h26-contact__form {
        padding: 26px 20px 22px;
    }

    .page-template-page-home-2026 #contact-form {
        scroll-margin-top: 0;
    }
}

@media (max-width: 400px) {
    .page-template-page-home-2026 .h26 .h26-area__cities {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-template-page-home-2026 .h26 .btn.btn-lp,
    .page-template-page-home-2026 .h26 .btn.btn-lp-normal::after,
    .page-template-page-home-2026 .h26 .h26-hero__links a {
        transition: none;
    }

    .page-template-page-home-2026 .h26 .btn.btn-lp-phone:hover::before {
        animation: none;
    }
}

/* Contact form polish (design review iteration 2). */
.page-template-page-home-2026 .select2-container--default .select2-results__options > .select2-results__option:first-child {
    display: none; /* the "Service Needed..." label row has an empty value */
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .cf-text:focus-visible {
    outline: 3px solid var(--dark) !important;
    outline-offset: 3px !important;
}

.page-template-page-home-2026 .h26-contact__form .cf-text,
.page-template-page-home-2026 .h26-contact__form .select2-selection {
    scroll-margin-top: 200px;
}

/* QA r20260928-02: on desktop the form sits on the left, clear of the site's chat panel that opens on the right;
   focused fields and anchor jumps land below the 230px sticky header. */
@media (min-width: 992px) {
    .page-template-page-home-2026 .h26-contact__inner {
        grid-template-columns: minmax(0, 546px) minmax(0, 1fr);
        grid-template-areas:
            "form info"
            "form faq";
    }
    html:has(body.page-template-page-home-2026) {
        scroll-padding-top: 260px;
    }
    .page-template-page-home-2026 .h26-contact__form .cf-text,
    .page-template-page-home-2026 .h26-contact__form .select2-selection {
        scroll-margin-top: 260px;
    }
}

/* QA r20260928-03 DL-0012: below 992px the 151px mobile sticky bar covers the top of the screen. */
@media (max-width: 991.98px) {
    html:has(body.page-template-page-home-2026) {
        scroll-padding-top: 175px;
    }
    .page-template-page-home-2026 .h26 a,
    .page-template-page-home-2026 .h26 button,
    .page-template-page-home-2026 .h26-contact__form .cf-text,
    .page-template-page-home-2026 .h26-contact__form .select2-selection {
        scroll-margin-top: 175px;
    }
}

/* Design review it4/it5: brand line art in Service Gold behind the headline (the service pages' tile-section
   artwork, recoloured through a mask), and a gentle entrance. Content is visible by default; the reveal only
   runs once JS marks the page ready and motion is allowed. */
.page-template-page-home-2026 .h26-contact__info {
    position: relative;
    isolation: isolate;
}

.page-template-page-home-2026 .h26-contact__info::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -90px -140px -60px -120px;
    background: url("../img/h26-lines.png?v=2") center / contain no-repeat;
    opacity: 0.7;
    /* The artwork file fades to transparent on all four edges, so no stroke ends in a straight cut at any size. */
    pointer-events: none;
}

@media (max-width: 767px) {
    .page-template-page-home-2026 .h26-contact__info::before {
        inset: -40px -16px -20px -16px;
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .h26-js .page-template-page-home-2026 .h26-contact .h26-reveal,
    .page-template-page-home-2026.h26-js .h26-contact .h26-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .page-template-page-home-2026.h26-js .h26-contact .h26-reveal.is-in {
        opacity: 1;
        transform: none;
    }
    .page-template-page-home-2026.h26-js .h26-contact .h26-contact__form.h26-reveal {
        transition-delay: 0.12s;
    }
}

.page-template-page-home-2026 .h26-contact__form .new-landing-form .btn.btn-lp:hover {
    background-color: #f5cf4a;
}

/* ---------- Opening section, photo beside the text (2026-10-06) ----------
   Stephen and Abe asked for a larger, more prominent team photo. The current team photo spreads
   across the whole frame, so text over it covered most of the team. From 992px the photo gets its
   own unshaded column on the left and the text sits beside it on the dark ground. */
@media (min-width: 992px) {
    .page-template-page-home-2026 .h26-hero--photo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 600px) max(30px, calc((100vw - 1140px) / 2));
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__media {
        position: relative;
        inset: auto;
        z-index: 0;
        grid-column: 1;
        grid-row: 1;
        min-height: 100%;
        overflow: hidden;
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__img {
        position: absolute;
        inset: 0;
        object-position: 50% 85%;
    }

    /* A short fade into the dark ground where the photo meets the text column. */
    .page-template-page-home-2026 .h26-hero--photo .h26-hero__media::after {
        background: linear-gradient(90deg, rgba(18, 18, 17, 0) 93%, var(--dark) 100%);
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__inner {
        grid-column: 2;
        grid-row: 1;
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
        padding-left: 48px;
        padding-right: 0;
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__content {
        max-width: none;
    }
}

/* Laptop heights: a smaller title, slightly smaller body text and less top space keep the
   buttons in the first screen down to 1280x800 (the site header alone is 230px tall). */
@media (min-width: 992px) and (max-width: 1599px) {
    .page-template-page-home-2026 .h26 .h26-hero--photo .h26-hero__title {
        font-size: 80px;
    }

    .page-template-page-home-2026 .h26 .h26-hero--photo .h26-hero__body p {
        font-size: 16px;
        line-height: 1.55;
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__inner {
        padding-top: 24px;
    }

    /* Narrower photo column: keep the fade off the right-most face. */
    .page-template-page-home-2026 .h26-hero--photo .h26-hero__media::after {
        background: linear-gradient(90deg, rgba(18, 18, 17, 0) 97%, var(--dark) 100%);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .page-template-page-home-2026 .h26-hero--photo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px) 24px;
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__img {
        object-position: 30% 85%;
    }

    .page-template-page-home-2026 .h26-hero--photo .h26-hero__inner {
        padding-left: 40px;
    }
}