/* ============================================================
   Homepage 2026 v2 — CONSOLIDATED stylesheet
   = homepage-2026-v7.css + homepage-2026-type4.css merged into one.
   Loaded after homepage-2026.css. v2 page only (all rules are
   scoped to .page-template-homepage-new-v14-trk). This single file
   replaces ALL the old versioned files (v2-v7, type-type4) — delete
   those from the server to end stale-cache issues.
   ============================================================ */

/* ===== PART 1: section overrides (was homepage-2026-v7.css) ===== */
/* ============================================================
   Homepage 2026 v2 — redesign overrides
   Loaded ONLY on the /homepage-test2 template, AFTER homepage-2026.css.
   Source of truth: flatrate-phase2-cleanup.user.js (Tampermonkey v0.76).
   Clean, namespaced CSS. No !important (the TM script only needed those
   to beat v14 at runtime; on our own template scoped selectors win).
   ============================================================ */

/* ------------------------------------------------------------
   1. Hero red box ("magic square")
   - New brand red #F20500 (was old #C41A25)
   - Heading 44px bold white, subhead + body white, all left-aligned
   - Badge and box footprint unchanged (do not resize)
   ------------------------------------------------------------ */
.home-2026-hero .hero-square.fr-hero-redbox {
    background-color: #F20500;
    background: #F20500;
}

/* Beats style_rf.css's
   ".page-template-homepage-new-v14-trk .hero-square-container .hero-square h3"
   (that rule wins because we add the v14-trk alias class for the DNA form).
   Match its structural path + add the element+class to outrank it cleanly,
   no !important. */
.home-2026-hero .hero-square-container .hero-square h3.fr-hero-heading,
.page-template-homepage-new-v14-trk .hero-square-container .hero-square h3.fr-hero-heading {
    font-family: "Calibri", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-align: left;
    text-transform: none;
    margin: 40px 0 14px;   /* top gap above "NYC's most" to match approved TM (.magic-slogan margin-top:40px) */
}

.home-2026-hero .fr-hero-redbox .fr-hero-subhead {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-align: left;
}

.home-2026-hero .fr-hero-redbox .fr-hero-body {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-align: left;
}

/* ------------------------------------------------------------
   2. Reviews + video-slider — Apple-style continuous gradient
   Reads as one block: pale blue at reviews header -> lightest at the
   seam -> soft pink into services. (TM v0.76 exact stops.)
   ------------------------------------------------------------ */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-reviews-section {
    background: linear-gradient(180deg, #EDF4FE 0%, #F2F3FB 100%);
}
.page-template-homepage-new-v14-trk .home-2026-wrapper .video-slider.v14 {
    background: linear-gradient(180deg, #F2F3FB 0%, #F0E2EE 100%);
}

/* ------------------------------------------------------------
   3. Refer-friends recolor -> light blue #EAF1FB
   Matches TM v0.76 exactly: color is driven by BREAKPOINT (both columns
   together), NOT per-column.
     Desktop (>=768): ALL refer text DARK (#1F1F1F), overlay TRANSPARENT.
     Mobile  (<=767): ALL refer text WHITE, overlay rgba(0,0,0,0.45) + shadow.
   Buttons keep white text on red fill at both breakpoints.
   v14's overlay/text rules use .v14 .container ... specificity, so we prefix
   with the body alias + match .v14, and !important the overlay (v14 sets it).
   ------------------------------------------------------------ */
.page-template-homepage-new-v14-trk .home-2026-wrapper .refer-friends-section.v14 {
    background: #EAF1FB;
    background-color: #EAF1FB;
}

/* DESKTOP (default, >=768): all refer text dark, overlay transparent.
   Selectors mirror v14's exact path (.v14 .container ... h2.refer-friends-title)
   so we outrank style_rf.css, plus the body-alias prefix. */
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col h2.refer-friends-title,
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col h2.refer-friends-title span,
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col .refer-friends-subtitle,
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content h2.refer-friends-title,
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content h2.refer-friends-title span,
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content .refer-friends-subtitle {
    color: #1F1F1F;
    -webkit-text-fill-color: #1F1F1F;
    text-shadow: none;
}
.page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col .overlay {
    background-color: transparent;
    background: transparent;
}

/* MOBILE (<=767): text over photo -> white text + dark overlay + shadow */
@media (max-width: 767px) {
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col h2.refer-friends-title,
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col h2.refer-friends-title span,
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col .refer-friends-subtitle,
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content h2.refer-friends-title,
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content h2.refer-friends-title span,
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .refer-friends-content .refer-friends-subtitle {
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        text-shadow: 0 1px 4px rgba(0,0,0,0.55);
    }
    .page-template-homepage-new-v14-trk .refer-friends-section.v14 .container .img-col .overlay {
        background-color: rgba(0,0,0,0.45);
        background: rgba(0,0,0,0.45);
    }
}

/* Buttons: white text on red fill, both breakpoints */
.page-template-homepage-new-v14-trk .home-2026-wrapper .refer-friends-section .refer-friend-btn,
.page-template-homepage-new-v14-trk .home-2026-wrapper .refer-friends-section .btn-red {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* ------------------------------------------------------------
   4. Why-FlatRate trio -> WHITE background (was #EAF1FB)
   parent-h2 + info-section + worth-section. Dark text.
   ------------------------------------------------------------ */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-parent-h2,
.page-template-homepage-new-v14-trk .home-2026-wrapper .info-section,
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-worth-section {
    background: #FFFFFF;
}

/* ------------------------------------------------------------
   5. Moving-services cards — mobile-only single-column
   Desktop (native): icon | centered copy | image (unchanged).
   Mobile (<=767): single column, centered text, icon hidden.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* v14 forces "display:grid !important; grid-template-columns:80px 1fr" on the
       card at <=768px — so it stayed a 2-col grid at mobile and the text sat in
       an offset cell. Beat it with !important + single-column. */
    .page-template-homepage-new-v14-trk .home-2026-wrapper #fr-services-section .fr-svc-card,
    section#fr-services-section .fr-svc-card {
        display: block !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .page-template-homepage-new-v14-trk .home-2026-wrapper #fr-services-section .fr-svc-icon-col {
        display: none;
    }
}

/* ------------------------------------------------------------
   6. Awards — merge featured + press into one 3-up grid
   3-up desktop, 2-up mobile. Hide the "Featured In" sublabel so it
   reads as one "Best Mover Awards" block. Remove the grey .pub-side
   right-border on the two award cards; keep the light-blue card border.
   NOTE: section is ACF-parked (toggle_awards). Toggle ON for the v2
   page to QA it. Content is locked; this is layout only.
   ------------------------------------------------------------ */
/* Hide the second sublabel so featured + press read as one block */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-sublabel-hidden {
    display: none;
}
/* Hide the badge/icon circles — TM v0.76 removes both (they overlapped the
   logo text on the narrower merged cards). Cards read as clean centered blocks. */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-featured-card .badge,
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-press-card .icon {
    display: none !important;
}
/* Both grids flow as 3-up (33.333%), 16px gap, continuous.
   !important here is NOT a shortcut: homepage-2026.css sets
   "body section#fr-awards-section .fr-aw-inner .fr-aw-press-grid { display:grid !important }"
   so plain specificity can't win. We match its !important to override cleanly. */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-featured-grid,
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-press-grid-merged {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: flex-start !important;
}
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-featured-card,
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-press-card {
    flex: 0 0 calc(33.333% - 11px) !important;
    width: calc(33.333% - 11px) !important;
    max-width: calc(33.333% - 11px) !important;
    min-width: 0;
    box-sizing: border-box;
}
/* Kill the leftover grey right-border divider on the two award cards.
   Keep the light-blue card border (#8FAADC) that wraps each card. */
.page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-featured-card .pub-side {
    border-right: none;
}

/* Publication name (Unpakt/Consumer Affairs featured mark + press .pub):
   TM v0.76 treatment — flex-centered, uppercase, full-width, min-height 40px so
   single-line (UNPAKT) and two-line (EAST SIDE FEED) names align and the red
   bars line up across all cards. This is what makes every card read the same,
   at every width (fixes the messy off-center names on mobile). */
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .fr-aw-featured-mark,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-press-card .pub {
    display: flex !important;
    flex-direction: column !important;   /* stack the <br> lines so each two-line name (CHELSEA/NEWS NY) centers as text; row-flex flattened the break */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    min-height: 40px !important;
    margin: 0 auto 6px auto !important;
    padding: 0 !important;               /* THE FIX: base theme sets padding-right:32px here, pushing centered names 16px left. Zero it on both breakpoints. Nothing else about the card changes. */
    line-height: 1.2 !important;
    border: none !important;
    box-sizing: border-box !important;
}
/* Force the featured-card .pub-side to stack as a COLUMN so the ::after red
   bar drops BELOW the name (base theme makes it flex-row => bar to the right). */
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .pub-side {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;               /* THE FIX (featured twin): base theme puts padding-right:22px here, shoving Unpakt/Consumer names 11px left */
    box-sizing: border-box !important;
}
/* Center all featured-card copy (base theme left-aligns it; press cards center). */
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .fr-aw-featured-claim,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .fr-aw-featured-claim h4,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .pub-attr,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .tagline {
    text-align: center !important;
    width: 100% !important;
}
/* Red accent bar under the featured-card names (press cards already have .accent). */
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-card .pub-side::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: #F20500;
    margin: 12px auto 10px auto;
}
@media (max-width: 767px) {
    .page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-featured-card,
    .page-template-homepage-new-v14-trk .home-2026-wrapper #fr-awards-section .fr-aw-press-card {
        flex: 0 0 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* ===== PART 2: typography + section backgrounds + CTA (was homepage-2026-type4.css) ===== */
/* ============================================================
   Homepage 2026 v2 — TYPOGRAPHY + SECTION SYSTEM (v2)
   Ported verbatim from approved TM v0.76. Prefixed with
   ".page-template-homepage-new-v14-trk #main-content" so every rule
   carries an ID and beats homepage-2026.css's "#section h2.class !important".
   "main ..." selectors map onto #main-content (the v2 <main>). v2 page only.
   ============================================================ */

    :root {
      --fr-red:           #F20500;
      --fr-red-soft:      #FCE4E4;
      --ink:              #1F1F1F;
      --ink-soft:         #595959;
      --rule:             #BFBFBF;
      --paper:            #FFFFFF;
      --paper-tint:       #F2F2F2;
      --note-blue:        #8FAADC;
      --note-blue-soft:   #EAF1FB;
      --fr-font:          "Calibri","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    }


    /* ---- Global font swap (scoped to main so the header/hero stays native) ---- */
    .page-template-homepage-new-v14-trk #main-content,
.page-template-homepage-new-v14-trk #main-content h1,
.page-template-homepage-new-v14-trk #main-content h2,
.page-template-homepage-new-v14-trk #main-content h3,
.page-template-homepage-new-v14-trk #main-content h4,
.page-template-homepage-new-v14-trk #main-content h5,
.page-template-homepage-new-v14-trk #main-content h6,
.page-template-homepage-new-v14-trk #main-content p,
.page-template-homepage-new-v14-trk #main-content span,
.page-template-homepage-new-v14-trk #main-content a,
.page-template-homepage-new-v14-trk #main-content li,
.page-template-homepage-new-v14-trk #main-content td,
.page-template-homepage-new-v14-trk #main-content th,
.page-template-homepage-new-v14-trk #main-content button,
.page-template-homepage-new-v14-trk #main-content input,
.page-template-homepage-new-v14-trk #main-content select,
.page-template-homepage-new-v14-trk #main-content textarea,
.page-template-homepage-new-v14-trk #main-content .btn,
.page-template-homepage-new-v14-trk #main-content .btn-default,
.page-template-homepage-new-v14-trk #main-content .read-more-link,
.page-template-homepage-new-v14-trk #main-content .card,
.page-template-homepage-new-v14-trk #main-content .ftb-num,
.page-template-homepage-new-v14-trk #main-content .ftb-label,
.page-template-homepage-new-v14-trk #main-content .fr-aw-title,
.page-template-homepage-new-v14-trk #main-content .fr-aw-sub,
.page-template-homepage-new-v14-trk #main-content .fr-aw-featured-mark,
.page-template-homepage-new-v14-trk #main-content .ig-post-likes,
.page-template-homepage-new-v14-trk #main-content .ig-post-caption,
.page-template-homepage-new-v14-trk #main-content .ig-post-date,
.page-template-homepage-new-v14-trk #main-content .ig-handle {
      font-family: var(--fr-font) !important;
    }


    /* ---- Color normalization (scoped to main) ---- */
    .page-template-homepage-new-v14-trk #main-content p,
.page-template-homepage-new-v14-trk #main-content li,
.page-template-homepage-new-v14-trk #main-content span { color: var(--ink-soft) !important; }

    .page-template-homepage-new-v14-trk #main-content h1,
.page-template-homepage-new-v14-trk #main-content h2,
.page-template-homepage-new-v14-trk #main-content h3,
.page-template-homepage-new-v14-trk #main-content h4,
.page-template-homepage-new-v14-trk #main-content h5,
.page-template-homepage-new-v14-trk #main-content h6,
.page-template-homepage-new-v14-trk #main-content .card-title,
.page-template-homepage-new-v14-trk #main-content strong,
.page-template-homepage-new-v14-trk #main-content b { color: var(--ink) !important; }


    /* All red CTAs unified to the new brand red (scoped to main; the hero form stays native) */
    .page-template-homepage-new-v14-trk #main-content .btn,
.page-template-homepage-new-v14-trk #main-content .btn-default,
.page-template-homepage-new-v14-trk #main-content button.btn,
.page-template-homepage-new-v14-trk #main-content input[type="submit"],
.page-template-homepage-new-v14-trk #main-content .next-btn,
.page-template-homepage-new-v14-trk #main-content #next-btn,
.page-template-homepage-new-v14-trk #main-content .read-more-link {
      background-color: var(--fr-red) !important;
      color: var(--paper) !important;
      border-color: var(--fr-red) !important;
    }


    /* Promo / award card red blocks */
    .page-template-homepage-new-v14-trk #main-content .card-promo,
.page-template-homepage-new-v14-trk #main-content .award-card { background-color: var(--fr-red) !important; }

    .page-template-homepage-new-v14-trk #main-content .card-promo *,
.page-template-homepage-new-v14-trk #main-content .award-card *,
.page-template-homepage-new-v14-trk #main-content .promo-card * { color: var(--paper) !important; }


    /* === FIX 2: offers section is on red bg — all text must be white === */
    .page-template-homepage-new-v14-trk #main-content #offers,
.page-template-homepage-new-v14-trk #main-content .offers-section,
.page-template-homepage-new-v14-trk #main-content section.offers-section,
.page-template-homepage-new-v14-trk #main-content section#offers {
      background-color: var(--fr-red) !important;
    }

    .page-template-homepage-new-v14-trk #main-content #offers,
.page-template-homepage-new-v14-trk #main-content #offers *,
.page-template-homepage-new-v14-trk #main-content .offers-section,
.page-template-homepage-new-v14-trk #main-content .offers-section * {
      color: var(--paper) !important;
    }


    /* === FIX 3: Additional Resources section — old red bg → new brand red === */
    .page-template-homepage-new-v14-trk #main-content .additional-resources-section,
.page-template-homepage-new-v14-trk #main-content section.additional-resources-section,
.page-template-homepage-new-v14-trk #main-content .additional-resources-section.v14 {
      background-color: var(--fr-red) !important;
    }

    .page-template-homepage-new-v14-trk #main-content .additional-resources-section * { color: var(--paper) !important; }


    /* === FIX 4: inside any red button, <strong>/<b> must inherit white (main only) === */
    .page-template-homepage-new-v14-trk #main-content .btn strong,
.page-template-homepage-new-v14-trk #main-content .btn b,
.page-template-homepage-new-v14-trk #main-content .btn span,
.page-template-homepage-new-v14-trk #main-content .btn-default strong,
.page-template-homepage-new-v14-trk #main-content .btn-default b,
.page-template-homepage-new-v14-trk #main-content .btn-default span,
.page-template-homepage-new-v14-trk #main-content a.btn strong,
.page-template-homepage-new-v14-trk #main-content a.btn b,
.page-template-homepage-new-v14-trk #main-content a.btn span {
      color: var(--paper) !important;
    }


    /* === FIX 5: CTA buttons sitting on red sections need a white border to be visible === */
    .page-template-homepage-new-v14-trk #main-content #offers .btn,
.page-template-homepage-new-v14-trk #main-content #offers a.btn,
.page-template-homepage-new-v14-trk #main-content #offers .btn-default,
.page-template-homepage-new-v14-trk #main-content .offers-section .btn,
.page-template-homepage-new-v14-trk #main-content .offers-section a.btn,
.page-template-homepage-new-v14-trk #main-content .offers-section .btn-default,
.page-template-homepage-new-v14-trk #main-content .additional-resources-section .btn,
.page-template-homepage-new-v14-trk #main-content .additional-resources-section a.btn,
.page-template-homepage-new-v14-trk #main-content .additional-resources-section .btn-default {
      border: 2px solid var(--paper) !important;
    }


    /* === FIX 6: standardize ALL h2 headers (font/size/weight/color/transform) ===
       Uses h2.classname combos to beat v14 class-level !important rules. */
    .page-template-homepage-new-v14-trk #main-content h2,
.page-template-homepage-new-v14-trk #main-content h2.fr-rv-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-svc-heading,
.page-template-homepage-new-v14-trk #main-content h2.fr-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-aw-title,
.page-template-homepage-new-v14-trk #main-content h2.text-center,
.page-template-homepage-new-v14-trk #main-content h2.additional-resources-section-t,
.page-template-homepage-new-v14-trk #main-content h2.additional-resources-section-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-onsite-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-faq-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-refer-title,
.page-template-homepage-new-v14-trk #main-content h2.fr-reasons-title,
.page-template-homepage-new-v14-trk #main-content body .fr-rv-title,
.page-template-homepage-new-v14-trk #main-content body .fr-svc-heading,
.page-template-homepage-new-v14-trk #main-content body .fr-title,
.page-template-homepage-new-v14-trk #main-content body .fr-aw-title {
      font-family: var(--fr-font) !important;
      font-size: 36px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
      letter-spacing: -0.01em !important;
      color: var(--ink) !important;
      text-transform: none !important;
      font-style: normal !important;
    }


    /* keep H2 white when it sits on a red section */
    .page-template-homepage-new-v14-trk #main-content #offers h2,
.page-template-homepage-new-v14-trk #main-content .offers-section h2,
.page-template-homepage-new-v14-trk #main-content .additional-resources-section h2,
.page-template-homepage-new-v14-trk #main-content .card-promo h2,
.page-template-homepage-new-v14-trk #main-content .award-card h2 {
      color: var(--paper) !important;
    }


    /* === FIX 7: downgrade specific h2s that should visually read as h3s === */
    .page-template-homepage-new-v14-trk #main-content h2.info-h2-title,
.page-template-homepage-new-v14-trk #main-content h2.info-h2-title.new-title,
.page-template-homepage-new-v14-trk #main-content h2.new-title {
      font-size: 28px !important;
      font-weight: 600 !important;
    }


    /* === FIX 13: hide the icons in the Local/Long-Distance services cards
       AND let the text column take full width + center — MOBILE ONLY.
       On desktop the native multi-column card layout is left alone. === */
    @media (max-width: 767px) {

      .page-template-homepage-new-v14-trk #main-content .fr-svc-icon-col,
.page-template-homepage-new-v14-trk #main-content .fr-svc-icon-circle { display: none !important; }

      .page-template-homepage-new-v14-trk #main-content .fr-svc-text-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        text-align: center !important;
        padding: 0 24px !important;
        /* the text-col is a flex column; center its items so the heading/copy
           actually center (text-align alone can't if items don't stretch) */
        align-items: center !important;
      }

      .page-template-homepage-new-v14-trk #main-content .fr-svc-text-col .fr-svc-title,
.page-template-homepage-new-v14-trk #main-content .fr-svc-text-col .fr-svc-desc,
.page-template-homepage-new-v14-trk #main-content .fr-svc-text-col .fr-svc-learn {
        text-align: center !important;
        width: 100% !important;      /* full width so centered text reads as centered */
        align-self: center !important;
      }

      .page-template-homepage-new-v14-trk #main-content .fr-svc-text-col .fr-svc-learn { display: inline-block !important; margin: 12px auto 0 !important; width: auto !important; }

    }


    /* === FIX 14: awards section — equalize card sizes and font weights === */
    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-card,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card {
      min-height: 220px !important;
      padding: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-self: stretch !important;
    }
    /* Cards stretch to a common row height so every box in a row is the same size. */
    .page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-featured-grid,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-press-grid,
.page-template-homepage-new-v14-trk #main-content #fr-awards-section .fr-aw-press-grid-merged {
      align-items: stretch !important;
    }

    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-claim h4,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card .award {
      font-size: 18px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      margin: 8px 0 !important;
      color: #595959 !important; /* match press .award grey (was near-black #1F1F1F on featured h4) */
    }

    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-mark,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card .pub {
      font-size: 16px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
    }

    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-card .pub-attr,
.page-template-homepage-new-v14-trk #main-content .fr-aw-featured-card .tagline,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card .tagline {
      font-size: 13px !important;
      font-weight: 400 !important;
      margin: 4px 0 !important;
    }


    /* === FIX 16: merge awards — hide ONLY the "Featured In" sublabel (JS does the surgical hide),
       keep "Best Mover Awards" visible. Force both grids to identical 2-per-row layout. === */
    .page-template-homepage-new-v14-trk #main-content .fr-aw-press-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important;
      margin-top: 16px !important;
    }

    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important;
    }

    /* Desktop: 3-up so cards are tighter and the section is shorter. Mobile stays 2-up. */
    @media (min-width: 768px) {

      .page-template-homepage-new-v14-trk #main-content .fr-aw-press-grid { grid-template-columns: repeat(3, 1fr) !important; }

      .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-grid { grid-template-columns: repeat(3, 1fr) !important; }

    }


    /* === FIX 18: award card borders — light blue accent (from brand --note-blue) === */
    .page-template-homepage-new-v14-trk #main-content .fr-aw-featured-card,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card {
      border: 1.5px solid #8FAADC !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(143, 170, 220, 0.2) inset !important;
      border-radius: 8px !important;
      background: #FFFFFF !important;
    }

    /* Keep red accent bars solid red (no gradient) */
    .page-template-homepage-new-v14-trk #main-content .fr-aw-press-card .accent,
.page-template-homepage-new-v14-trk #main-content .fr-fake-accent {
      background: #F20500 !important;
    }


    /* === FIX 19: center the awards section header + intro paragraph === */
    .page-template-homepage-new-v14-trk #main-content h2.fr-aw-title,
.page-template-homepage-new-v14-trk #main-content .fr-aw-title { text-align: center !important; }

    .page-template-homepage-new-v14-trk #main-content .fr-aw-intro,
.page-template-homepage-new-v14-trk #main-content .fr-aw-section p:first-of-type { text-align: center !important; }


    /* === FIX 20: services card borders (Local Moving / Long Distance / etc) === */
    .page-template-homepage-new-v14-trk #main-content .fr-svc-card {
      border: 1.5px solid #BFBFBF !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    }


    /* === FIX 21: blog section fixes — fix headline size, remove italic from intro === */
    .page-template-homepage-new-v14-trk #main-content .blog-section a,
.page-template-homepage-new-v14-trk #main-content .blog-section.v14 a,
.page-template-homepage-new-v14-trk #main-content .blog-section h2,
.page-template-homepage-new-v14-trk #main-content .blog-section h3 {
      font-size: 24px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      text-decoration: none !important;
      font-family: "Calibri","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif !important;
      letter-spacing: -0.01em !important;
    }

    .page-template-homepage-new-v14-trk #main-content .blog-section em,
.page-template-homepage-new-v14-trk #main-content .blog-section i,
.page-template-homepage-new-v14-trk #main-content .blog-section p em,
.page-template-homepage-new-v14-trk #main-content .blog-section p i,
.page-template-homepage-new-v14-trk #main-content .blog-section.v14 em,
.page-template-homepage-new-v14-trk #main-content .blog-section.v14 i { font-style: normal !important; }


    /* === FIX 22: communities section paragraph — un-bold === */
    .page-template-homepage-new-v14-trk #main-content .community-section p,
.page-template-homepage-new-v14-trk #main-content .community-section p strong,
.page-template-homepage-new-v14-trk #main-content .community-section p b {
      font-weight: 500 !important;
    }


    /* === FIX 23: Refer Friends — DESKTOP dark text on the light-blue panel.
       On mobile the text is over the photo, so JS sets it white instead (this rule is
       desktop-only so it doesn't fight that). Clears the v14 hollow/outlined look. === */
    @media (min-width: 768px) {

      .page-template-homepage-new-v14-trk #main-content [class*="refer-friends"],
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"],
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] h1,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] h2,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] h3,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] p,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] span,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] strong,
.page-template-homepage-new-v14-trk #main-content [class*="refer-friend"] em {
        color: #1F1F1F !important;
        -webkit-text-stroke: 0 !important;
        -webkit-text-stroke-width: 0 !important;
        -webkit-text-fill-color: #1F1F1F !important;
        text-stroke: 0 !important;
        opacity: 1 !important;
        text-shadow: none !important;
      }

    }


    /* === FIX 10: section backgrounds — EXACT per-section map from TM v0.76
       (applySectionTints). NOT a nth-of-type rotation — the TM assigns specific
       colors/gradients to specific section IDs. This matches it verbatim. === */
    .page-template-homepage-new-v14-trk #main-content #cards,
    .page-template-homepage-new-v14-trk #main-content #ftb-section,
    .page-template-homepage-new-v14-trk #main-content #fr-services-section,
    .page-template-homepage-new-v14-trk #main-content #fr-awards-section,
    .page-template-homepage-new-v14-trk #main-content #fr-parent-h2,
    .page-template-homepage-new-v14-trk #main-content #fr-worth-section,
    .page-template-homepage-new-v14-trk #main-content .info-section {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
    }
    .page-template-homepage-new-v14-trk #main-content #fr-reviews-section {
        background: linear-gradient(180deg, #EDF4FE 0%, #F2F3FB 100%) !important;
    }
    .page-template-homepage-new-v14-trk #main-content #fr-incl-section {
        background: linear-gradient(180deg, #EAF1FB 0%, #FFFFFF 100%) !important;
    }
    .page-template-homepage-new-v14-trk #main-content .refer-friends-section {
        background: #EAF1FB !important;
    }
    .page-template-homepage-new-v14-trk #main-content .video-slider {
        background: linear-gradient(180deg, #F2F3FB 0%, #F0E2EE 100%) !important;
    }
    .page-template-homepage-new-v14-trk #main-content .app-section,
    .page-template-homepage-new-v14-trk #main-content .app-section-mobile {
        background: #F7F7F7 !important;
        background-color: #F7F7F7 !important;
    }
    /* Red sections (offers, additional-resources) keep their red from FIX 2/3 above. */

    /* === FIX 8: cap blog-post titles shown on the homepage blog section === */
    .page-template-homepage-new-v14-trk #main-content .blog-section h2,
.page-template-homepage-new-v14-trk #main-content .blog-section h3,
.page-template-homepage-new-v14-trk #main-content .blog-section h2 a,
.page-template-homepage-new-v14-trk #main-content .blog-section h3 a,
.page-template-homepage-new-v14-trk #main-content .fr-blog-section h2,
.page-template-homepage-new-v14-trk #main-content .fr-blog-section h3,
.page-template-homepage-new-v14-trk #main-content [class*="blog"] .post-title,
.page-template-homepage-new-v14-trk #main-content [class*="blog"] .entry-title,
.page-template-homepage-new-v14-trk #main-content .news-card h2,
.page-template-homepage-new-v14-trk #main-content .news-card h3 {
      font-size: 22px !important;
      font-weight: 600 !important;
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
    }


    /* === FIX 9: unified section paragraph size (Apple-like) — main only === */
    .page-template-homepage-new-v14-trk #main-content section p,
.page-template-homepage-new-v14-trk #main-content > section p {
      font-size: 19px !important;
      line-height: 1.42 !important; letter-spacing: 0.012em !important;
      font-weight: 500 !important;
    }

    /* keep fine print / meta / captions small */
    .page-template-homepage-new-v14-trk #main-content small,
.page-template-homepage-new-v14-trk #main-content .small,
.page-template-homepage-new-v14-trk #main-content .review-meta,
.page-template-homepage-new-v14-trk #main-content .ig-post-likes,
.page-template-homepage-new-v14-trk #main-content .ig-post-date,
.page-template-homepage-new-v14-trk #main-content .ig-handle,
.page-template-homepage-new-v14-trk #main-content .review-stars,
.page-template-homepage-new-v14-trk #main-content .fr-rv-platform-name,
.page-template-homepage-new-v14-trk #main-content .fr-rv-platform-count,
.page-template-homepage-new-v14-trk #main-content .disclaimer,
.page-template-homepage-new-v14-trk #main-content .fine-print,
.page-template-homepage-new-v14-trk #main-content .fr-aw-press-card .tagline,
.page-template-homepage-new-v14-trk #main-content .fr-aw-featured-card .tagline,
.page-template-homepage-new-v14-trk #main-content .pub-attr {
      font-size: 13px !important;
    }


    /* ---- Mobile type scale (main only) ---- */
    @media (max-width: 767px) {

      .page-template-homepage-new-v14-trk #main-content h2,
.page-template-homepage-new-v14-trk #main-content .fr-aw-title { font-size: 30px !important; line-height: 1.2  !important; font-weight: 600 !important; }

      .page-template-homepage-new-v14-trk #main-content h3,
.page-template-homepage-new-v14-trk #main-content .card-title { font-size: 19px !important; line-height: 1.3  !important; font-weight: 600 !important; }

      /* "Why FlatRate Is Worth It" is an <h3 id=fr-w-title> but reads as an H2 (36px desktop).
         The generic h3 rule above shrinks it to 19px on mobile; the ID here beats that so it
         matches the other H2 titles (30px) on mobile too. */
      .page-template-homepage-new-v14-trk #main-content #fr-w-title,
.page-template-homepage-new-v14-trk #main-content h3.fr-w-title { font-size: 30px !important; line-height: 1.2 !important; font-weight: 600 !important; }

      /* Service card titles (Local Moving, Long Distance, etc.) render lighter on real iOS
         (San Francisco font renders 600 as a thin semibold), so they don't read as titles.
         Bump to 700 on mobile only — desktop (Calibri 600) already looks right. */
      .page-template-homepage-new-v14-trk #main-content .fr-svc-title { font-weight: 700 !important; }

      .page-template-homepage-new-v14-trk #main-content p,
.page-template-homepage-new-v14-trk #main-content li { font-size: 16px !important; line-height: 1.42 !important; letter-spacing: 0.012em !important; }

      .page-template-homepage-new-v14-trk #main-content section p,
.page-template-homepage-new-v14-trk #main-content > section p { font-size: 19px !important; }

      .page-template-homepage-new-v14-trk #main-content h2.info-h2-title,
.page-template-homepage-new-v14-trk #main-content h2.new-title { font-size: 24px !important; }

      .page-template-homepage-new-v14-trk #main-content .blog-section h2,
.page-template-homepage-new-v14-trk #main-content .blog-section h3,
.page-template-homepage-new-v14-trk #main-content .news-card h2,
.page-template-homepage-new-v14-trk #main-content .news-card h3 { font-size: 19px !important; }

      .page-template-homepage-new-v14-trk #main-content .btn,
.page-template-homepage-new-v14-trk #main-content .btn-default,
.page-template-homepage-new-v14-trk #main-content button { font-size: 15px !important; font-weight: 500 !important; }

      .page-template-homepage-new-v14-trk #main-content small,
.page-template-homepage-new-v14-trk #main-content .small,
.page-template-homepage-new-v14-trk #main-content .review-meta,
.page-template-homepage-new-v14-trk #main-content .ig-post-likes,
.page-template-homepage-new-v14-trk #main-content .ig-post-date,
.page-template-homepage-new-v14-trk #main-content .review-stars { font-size: 13px !important; }

    }


    @media (min-width: 768px) {

      .page-template-homepage-new-v14-trk #main-content h2 { font-weight: 600 !important; }

      .page-template-homepage-new-v14-trk #main-content h3,
.page-template-homepage-new-v14-trk #main-content .card-title { font-weight: 600 !important; }

      .page-template-homepage-new-v14-trk #main-content p { line-height: 1.6 !important; }

    }


/* ============================================================
   CTA button fixes (v2)
   1. Refer-friends button text must stay WHITE (the section recolor
      was turning it dark). TM kept buttons white on both breakpoints.
   2. Footer-belt "Get FREE Quote" button: v14 fixes its height at 47px
      but 20px text + padding overflows to 58px. Fit the text: white,
      one line, sized to the box. (TM never styled this button; this is
      a pre-existing v14 conflict exposed here.)
   ============================================================ */
.page-template-homepage-new-v14-trk #main-content .refer-friends-section .refer-friend-btn,
.page-template-homepage-new-v14-trk #main-content .refer-friends-section a.btn,
.page-template-homepage-new-v14-trk #main-content .refer-friends-section .btn-red {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* Footer belt is inside <footer> (shared), NOT #main-content — scope to the
   page-template class only, so this stays limited to the v2 page's footer. */
.page-template-homepage-new-v14-trk .perfect-move-belt .perfect-move-belt-button,
.page-template-homepage-new-v14-trk .footer-belt .perfect-move-belt-button,
.page-template-homepage-new-v14-trk .perfect-move-belt a.btn-red,
.page-template-homepage-new-v14-trk .footer-belt a.btn-red {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 47px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   Dev QA round 2 (v2 page) — Lumina findings 1, 2, 4
   ============================================================ */
/* #1 — add breathing room above "Reasons to Move with Us"; it was butting
   directly against the red offers section above it. */
.page-template-homepage-new-v14-trk #main-content #reasons-why-new-sec {
    margin-top: 48px !important;
}
/* #2 — red promo "Get a Free Quote Within Minutes!" button: the arrow-circle is a
   fixed background graphic whose red clashes with the button/section red. Per Dev,
   remove it (can't recolor a bg image). Reclaim the right padding it reserved. */
.page-template-homepage-new-v14-trk #main-content .offers-section .btn.arrow-right-md {
    background-image: none !important;
    padding-right: 24px !important;
}
/* #4 — How We Move CTA arrow was #595959 grey on a red button (WCAG contrast fail).
   Make it white to match the button label. */
.page-template-homepage-new-v14-trk #main-content .fr-hwm-cta-btn span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Keep the v2 app section clear of the preceding content on mobile. */
@media (max-width: 767px) {
    body.page-template-homepage-new-v14-trk-2026v2 #main-content section.app-section.v14 {
        padding-top: 350px !important;
        padding-bottom: 0 !important;
    }

    body.page-template-homepage-new-v14-trk-2026v2 #main-content section.app-section-mobile.gray-sec.v14 {
        padding-top: 100px !important;
    }

    body.page-template-homepage-new-v14-trk-2026v2 #main-content #fr-incl-section .fr-elite {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    body.page-template-homepage-new-v14-trk-2026v2 #main-content #fr-incl-section .fr-elite a {
        display: inline-flex !important;
        width: max-content;
        max-width: 100%;
        margin-left: 0 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    body.page-template-homepage-new-v14-trk-2026v2 #main-content .refer-friends-section.v14 .refer-friend-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }
}