/* sh-theme.css — extracted from theme/02-CSS.html on 2026-08-10.
   1 <style> blocks concatenated in source order.

   ⚠ NO LONGER BYTE-IDENTICAL TO THE SOURCE. Three deliberate divergences, all
   marked in place — search "DIVERGENCE FROM theme/02-CSS.html":

     1. the USP :nth-child alternation, which cannot work under Elementor's
        wrappers
     2. the areas-grid tile hover colour, once the tile became an <a>
     3. the gap between stacked featured-post cards, once there could be more
        than one of them

   Regenerating from the theme file will silently undo all three. */

/* Webfont @import removed 2026-08-01 (Stylizer token move, per Robbie).
   The brand's font @import now leads client/theme/tokens.css (or
   theme/Default-Tokens.css when no brand is committed),
   which page.php inlines in its own <style> immediately BEFORE this
   file. This theme declares no brand tokens and loads no brand fonts. */
/* ============================================
   STRONKHAMMER THEME v0.8.3 — DIESEL TEST EDITION
   Prefix: sh- (StronkHammer)
   Scope: .sh-page — zero bleed into Elementor
   Includes all sections from:
     - Dynamic Home Improvements (v001)
     - Wehr There LLC templates (v1/v2/v3)
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
   Override these per client in the <style> block
   at the top of your HTML file.
   ============================================ */
.sh-page {
    /* === BRAND COLORS — Yellowstone Roofing ===
       Derived 2026-06-11 from Western Montana Roofing's live site
       (charcoal sections, crimson CTAs/dividers, white surfaces) —
       same owners, identical look & feel intended. Confirm exact hex
       against the final Yellowstone logo before launch. */
    /* Brand colour + font tokens removed 2026-08-01 (Stylizer token move,
       per Robbie). They are declared on .sh-page by the brand-token
       stylesheet page.php inlines just before this file. Only the SYSTEM
       tokens below are theme property and stay here. */

    /* === SYSTEM TOKENS === */
    --sh-radius:        8px;
    --sh-radius-lg:     14px;
    --sh-shadow:        0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
    --sh-shadow-lg:     0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.10);
    --sh-transition:    0.3s ease;
    --sh-container:     1200px;
}

/* ============================================
   STRUCTURAL HEADER METRICS — ported 2026-08-13

   From engine/page.php:970-972, the flat file's :root block. The port took
   the theme layer (this file, from 02-CSS.html) but not the engine layer, so
   these two never arrived and the header fell through to the fallbacks
   written at line 2360-2361 — a 120px bar and a 110px logo against the
   original's 92 and 64.

   ⚠ :root, NOT .sh-page. The block above is scoped to .sh-page and the
   header renders outside it by design — see the HEADER LOGO note in
   sp-elementor-fix.css. Declared on .sh-page these would be invisible to
   .sh-header, which is the mistake this comment exists to prevent.

   WHY THE GAP WAS INVISIBLE UNTIL NOW. Nothing read the logo token before
   2026-08-11: `.sh-header-logo img` (0,1,1) lost the tie to Elementor's
   `.elementor img { height: auto; max-width: 100% }` and the image was
   sized by max-width in the flex track instead. The sp-elementor-fix rule
   settled that tie, the theme rule started winning, and it immediately
   read a token that was not there.

   THE TWO MOVE TOGETHER. .sh-header-inner sets `height`, not min-height, so
   the bar is a fixed 120px whatever it contains. Correcting only the logo
   would give 64px in a 120px bar — a small logo in a tall stripe, which is
   the complaint that predates the 08-11 change. The original's proportion
   is 64 in 92; keep the ratio, not just the number.

   These are structural, not brand: page.php keeps them in the engine rather
   than the Stylizer's token file, so they are theme defaults for every
   client, not a Yellowstone tuning. A client who needs different ones
   overrides them in the tailored CSS, which prints after this file.
   ============================================ */
:root {
    --sh-header-bar-height:   92px;
    --sh-header-logo-height:  64px;
}

/* Stylizer helper rules removed 2026-08-01 (token move, per Robbie): the
   :root header/usp-rotator tokens, the legacy --charcoal/--crimson/--gold
   alias layer, the .rt-* gradient patches and the header-font override all
   moved into the brand-token stylesheet page.php inlines before this file.
   The aliases are still CONSUMED below (~59 times in the rt-* rules) —
   they are just no longer DECLARED here. */

/* ============================================
   BASE RESET & TYPOGRAPHY
   ============================================ */
.sh-page {
    font-family: var(--sh-font-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--sh-gray-dark) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sh-page *,
.sh-page *::before,
.sh-page *::after {
    box-sizing: border-box;
}

.sh-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sh-page a {
    color: inherit;
    text-decoration: none;
    transition: color var(--sh-transition);
}

.sh-page a:hover {
    color: var(--sh-accent-bright) !important;
}

/* Engine cascade fix 2026-05-27 — .sh-page a { color: inherit } above has
   specificity 0,1,1 and beats the byte-locked StronkREVIEWS engine's
   .stronk-grid__cta { color: #fff } (specificity 0,1,0). Result: the
   engine's "Leave Us a Review" CTA was rendering near-black text on its
   Google-blue background instead of white. Engine block is byte-locked,
   so the override has to live here. Surgical — only re-asserts white on
   the engine CTA (default + hover); also prevents the .sh-page a:hover
   :important from flipping it to accent-bright on hover. */
.sh-page a.stronk-grid__cta,
.sh-page a.stronk-grid__cta:hover { color: #fff !important; }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.sh-container {
    max-width: var(--sh-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sh-section     { padding: 5rem 0; }
.sh-section-sm  { padding: 3rem 0; }
.sh-section-xs  { padding: 1.5rem 0; }

.sh-text-center { text-align: center; }
.sh-text-left   { text-align: left; }

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
.sh-page h1,
.sh-page h2,
.sh-page h3,
.sh-page h4 {
    font-family: var(--sh-font-heading) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--sh-primary) !important;
    text-transform: uppercase !important;
    margin: 0 0 1rem 0;
}

.sh-title-xl {
    font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}

.sh-title-lg  { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; }
.sh-title-md  { font-size: clamp(1.5rem, 3vw, 2.5rem) !important; }
.sh-title-sm  { font-size: clamp(1.5rem, 3vw, 2.25rem) !important; font-weight: 700 !important; }  /* widened 2026-05-16 (Session B fold) — absorbs ~35 inline clamp overrides on h2.sh-title-sm */

.sh-eyebrow {
    font-family: var(--sh-font-button) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--sh-accent-bright) !important;
    margin-bottom: 0.75rem;
    display: block;
}

/* Compound reinforcement (Session B fold, 2026-05-16) — absorbs ~94 inline
   style="display:block" overrides on `.sh-eyebrow.sh-text-center` spans.
   Base `.sh-eyebrow` already sets display:block; this compound rule wins
   source-order ties against any descendant override (e.g., .sh-post-hero
   .sh-eyebrow { display: inline-block; } — moved to P-blog-post.css (project root)
   on 2026-06-08). Verified no .sh-post-hero .sh-eyebrow.sh-text-center
   combinations exist in tree. */
.sh-eyebrow.sh-text-center { display: block; }

.sh-text {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: var(--sh-gray-dark) !important;
    margin-bottom: 1rem;
}

.sh-text:last-child { margin-bottom: 0; }

.sh-text-lg {
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
}

.sh-text-sm {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
}

/* ============================================
   BACKGROUND HELPERS
   ============================================ */
.sh-bg-white       { background-color: var(--sh-white) !important; }
.sh-bg-warm        { background-color: var(--sh-surface-warm) !important; }
.sh-bg-cool        { background-color: var(--sh-surface-cool) !important; }
.sh-bg-dark        { background: linear-gradient(180deg, var(--sh-primary-dark) 0%, var(--sh-primary) 100%) !important; }
.sh-bg-accent      { background-color: var(--sh-accent) !important; }

/* ============================================
   BUTTONS
   ============================================ */
.sh-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 2rem !important;
    font-family: var(--sh-font-button) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    border-radius: var(--sh-radius) !important;
    cursor: pointer !important;
    transition: all var(--sh-transition) !important;
    text-decoration: none !important;
}

.sh-btn svg { width: 18px; height: 18px; }

/* Primary */
.sh-btn-primary {
    background: var(--sh-accent) !important;
    color: var(--sh-white) !important;
    box-shadow: 0 4px 14px rgba(151,29,19,0.35) !important;
}

.sh-page .sh-btn-primary:hover,
.sh-page a.sh-btn-primary:hover {
    background: var(--sh-primary) !important;
    color: var(--sh-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(42,66,111,0.35) !important;
    text-decoration: none !important;
}

/* Secondary */
.sh-btn-secondary {
    background: var(--sh-white) !important;
    color: var(--sh-primary) !important;
    border: 2px solid var(--sh-primary) !important;
}

.sh-page .sh-btn-secondary:hover,
.sh-page a.sh-btn-secondary:hover {
    background: var(--sh-accent) !important;
    color: var(--sh-white) !important;
    border-color: var(--sh-accent) !important;
    text-decoration: none !important;
}

/* Outline Light (for dark backgrounds) */
.sh-btn-outline-light {
    background: transparent !important;
    color: var(--sh-white) !important;
    border: 2px solid rgba(255,255,255,0.6) !important;
}

.sh-page .sh-btn-outline-light:hover,
.sh-page a.sh-btn-outline-light:hover {
    background: var(--sh-white) !important;
    color: var(--sh-accent) !important;
    border-color: var(--sh-white) !important;
    text-decoration: none !important;
}

/* Ghost / Link style */
.sh-btn-ghost {
    background: transparent !important;
    color: var(--sh-primary) !important;
    border: none !important;
    padding: 0.5rem 0 !important;
    text-decoration: underline !important;
    letter-spacing: 0 !important;
}

.sh-page .sh-btn-ghost:hover { color: var(--sh-accent) !important; }

/* ============================================
   ══════════════════════════════════════════
   SECTION: HERO (White / Brand)
   Used for: What's the Dynamic Difference, blog
   headers, service page heroes
   ══════════════════════════════════════════
   ============================================ */
.sh-hero {
    /* REVERSED 2026-06-11 per Stevie — fullbleed is now the adopted look.
       The 2026-05-28 "deliberate shorthand" (background: white !important)
       that killed .sh-hero-fullbleed's gradient + photo bg is replaced with
       a plain longhand default: non-fullbleed heroes stay a clean white
       panel, and .sh-hero-fullbleed (higher specificity) paints its
       gradient + photo again. Hero slots in images/ now hold real client
       photos from client-assets/ (see client-assets-inventory.md);
       placeholder originals backed up in images/_placeholder-backup/. */
    background-color: var(--sh-white);
    padding: 4rem 0 3.5rem;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--sh-border);
}

/* Decorative glow — primary top-right */
.sh-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -100px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42,66,111,0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* Decorative glow — accent bottom-right */
.sh-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 120px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,54,49,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.sh-hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}

.sh-hero-logo {
    margin-bottom: 1.75rem;
}

/* Hero-scoped breathing room for the StronkREVIEWS pill (variant 4).
   Engine variants stay engine-owned; this only adds external spacing when
   the pill sits at the top of a hero, above .sh-eyebrow / h1. */
.sh-hero .stronk-avg {
    margin-bottom: 1.25rem;
}

.sh-hero-logo img {
    height: 64px;
    width: auto;
}

.sh-hero h1 {
    color: var(--sh-primary) !important;
    font-size: clamp(2rem, 5vw, 3.25rem) !important;
    margin-bottom: 1rem;
    line-height: 1.1 !important;
}

.sh-hero h1 span,
.sh-hero-title-accent {
    color: var(--sh-accent-bright) !important;
}

.sh-hero p {
    color: var(--sh-gray) !important;
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    max-width: 620px;
    margin-bottom: 2rem;
}

.sh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Hero Google Badge */
.sh-hero-badge {
    background: var(--sh-surface-warm) !important;
    border: 2px solid var(--sh-border) !important;
    border-radius: var(--sh-radius-lg);
    padding: 2rem 2.5rem;
    text-align: center;
    min-width: 220px;
    flex-shrink: 0;
}

.sh-hero-badge-google-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sh-hero-badge-google-row svg { width: 22px; height: 22px; flex-shrink: 0; }

.sh-hero-badge-google-label {
    font-family: var(--sh-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--sh-gray) !important;
}

.sh-hero-badge-stars {
    color: var(--sh-star);
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.sh-hero-badge strong {
    display: block;
    font-size: 1.5rem;
    color: var(--sh-primary) !important;
    font-family: var(--sh-font-heading);
    font-weight: 900;
}

.sh-hero-badge p {
    color: var(--sh-gray) !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
    font-weight: 600;
}



/* ============================================
   SERVICE AREA STRIP
   ============================================ */
.sh-areas-strip {
    background: var(--sh-primary) !important;
    padding: 1.25rem 0;
}

.sh-areas-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

.sh-areas-strip-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--sh-white) !important;
}

.sh-area-pill {
    font-family: var(--sh-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--sh-white) !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sh-area-pill svg {
    width: 13px; height: 13px;
    color: rgba(255,255,255,0.7) !important;
    flex-shrink: 0;
}

/* Mobile fix 2026-05-27 — B1 service-area strip had no mobile override.
   At ≤768 the "SERVING:" label sat inline with the pills and the 2rem
   column gap spread pills into a wide 2-up grid that orphaned the last
   city on its own row. Push the label onto its own row above the pills,
   tighten the column gap, and trim vertical padding so the banner reads
   as a compact strip instead of a chunky slab. */
@media (max-width: 768px) {
    .sh-areas-strip { padding: 1rem 0; }
    .sh-areas-strip-inner { gap: 0.5rem 1rem; }
    .sh-areas-strip-label { flex-basis: 100%; text-align: center; }
}

/* ============================================
   INTRO SECTION — 2-col: text + logo/image
   ============================================ */
.sh-intro {
    background: var(--sh-white) !important;
}

.sh-intro-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sh-intro-content h2 { margin-bottom: 1.5rem; }
.sh-intro-content p  { margin-bottom: 1.25rem; }
.sh-intro-content p:last-of-type { margin-bottom: 2rem; }

.sh-intro-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh-intro-image img {
    width: 100%;
    max-width: 400px;
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-lg);
}

/* ============================================
   FEATURE BANNER — Dark bg, 2-col
   ============================================ */
.sh-feature-banner {
    background: linear-gradient(180deg, var(--sh-primary-dark) 0%, var(--sh-primary) 100%) !important;
    color: var(--sh-white) !important;
}

.sh-feature-banner-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sh-feature-banner h2 {
    color: var(--sh-white) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    margin-bottom: 1.5rem;
}

.sh-feature-banner p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
    margin-bottom: 2rem;
}

.sh-feature-banner .sh-eyebrow {
    color: var(--sh-accent-bright) !important;
}

/* Feature-banner "warm" variant — eyebrow reads white instead of accent-red.
   Scoped to .sh-bg-warm feature banners (only P-service-area's annual-
   inspection banner today); home's default feature banner keeps accent-red.
   Mobile/finalize fix 2026-06-08. */
.sh-feature-banner.sh-bg-warm .sh-eyebrow {
    color: var(--sh-white) !important;
}

.sh-feature-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.sh-feature-icon-box {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--sh-radius);
    padding: 1.75rem;
    text-align: center;
    transition: all var(--sh-transition);
}

.sh-feature-icon-box:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-3px);
}

.sh-feature-icon-box svg {
    width: 40px; height: 40px;
    color: var(--sh-white) !important;
    margin-bottom: 0.75rem;
}

.sh-feature-icon-box span {
    display: block;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--sh-white) !important;
    line-height: 1.3;
}

/* ============================================
   USP INTRO — PILL NAV
   ============================================ */
.sh-usp-intro {
    background: var(--sh-white) !important;
    padding: 4rem 0 3rem;
    text-align: center;
}

.sh-usp-intro h2 { margin-bottom: 1rem; }

.sh-usp-intro-text {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    color: var(--sh-gray) !important;
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
}

.sh-usp-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.sh-usp-pill {
    font-family: var(--sh-font-button) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    border: 2px solid var(--sh-primary) !important;
    color: var(--sh-primary) !important;
    background: transparent !important;
    transition: all var(--sh-transition);
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
}

.sh-page .sh-usp-pill:hover,
.sh-page a.sh-usp-pill:hover {
    background: var(--sh-accent) !important;
    color: var(--sh-white) !important;
    border-color: var(--sh-accent) !important;
    text-decoration: none !important;
}

/* ============================================
   USP ALTERNATING SECTIONS
   ============================================ */
.sh-usp-section {
    padding: 5rem 0;
}

/* ⚠ DIVERGENCE FROM theme/02-CSS.html — 2026-08-17, per Robbie.
   The source alternates by DOM position:

       .sh-usp-section:nth-child(even) { background: var(--sh-surface-warm) !important; }
       .sh-usp-section:nth-child(odd)  { background: var(--sh-white)        !important; }

   Under Elementor every widget is the only child of its own container, so
   EVERY section matches :nth-child(odd) and none can ever match (even). Those
   two rules cannot do their job here; what they could still do is fight the
   thing that does, and :nth-child(odd) at (0,2,0) did exactly that.

   So the default is stated once, unconditionally, at (0,1,0). The even case is
   reproduced in sp-elementor-fix.css by counting the CONTAINERS, which are
   siblings where the section is not — same counting as the source, which
   counted position among all children of .sh-page. */
.sh-usp-section {
    background: var(--sh-white) !important;
}

.sh-usp-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* The flip that went with it, removed for the same reason — reproduced in
   sp-elementor-fix.css against the container. */

/* USP Tag (numbered label) */
.sh-usp-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sh-primary) !important;
    color: var(--sh-white) !important;
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.sh-usp-tag svg { width: 14px; height: 14px; }

.sh-usp-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    margin-bottom: 1.25rem;
}

.sh-usp-content p {
    font-size: 1.0625rem !important;
    line-height: 1.85 !important;
    color: var(--sh-gray) !important;
    margin-bottom: 1.5rem;
}

.sh-usp-content p:last-of-type { margin-bottom: 0; }

/* ============================================
   GOOGLE REVIEW CARD
   ============================================ */
.sh-review-card {
    background: var(--sh-white) !important;
    border-radius: var(--sh-radius-lg);
    padding: 1.5rem 1.75rem;
    border: 1px solid #E8EAED !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06) !important;
    margin-top: 1.5rem;
}

.sh-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.sh-review-header-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sh-review-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--sh-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white) !important;
    font-family: var(--sh-font-heading) !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    flex-shrink: 0;
}

.sh-review-name {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--sh-gray-dark) !important;
    font-family: var(--sh-font-body) !important;
    line-height: 1.2;
}

.sh-review-source {
    font-size: 0.75rem !important;
    color: var(--sh-gray-mid) !important;
    font-family: var(--sh-font-body) !important;
}

/* Google G SVG */
.sh-google-g {
    flex-shrink: 0;
    width: 22px; height: 22px;
}

.sh-review-stars {
    color: var(--sh-star);
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sh-review-stars span {
    font-size: 0.75rem !important;
    color: var(--sh-gray-mid) !important;
    font-family: var(--sh-font-body) !important;
    font-weight: 500 !important;
    margin-left: 0.25rem;
}

.sh-review-text {
    font-family: var(--sh-font-accent) !important;
    font-size: 0.9375rem !important;
    line-height: 1.75 !important;
    color: #3C4043 !important;
    font-style: italic;
    margin: 0 !important;
}

/* Profile pill */
.sh-review-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    background: #4285F4 !important;
    border: 1.5px solid #4285F4 !important;
    color: #ffffff !important;
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: all var(--sh-transition);
}

.sh-page .sh-review-profile-pill:hover,
.sh-page a.sh-review-profile-pill:hover {
    background: #2a6fdb !important;
    border-color: #2a6fdb !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.sh-review-profile-pill svg { width: 13px; height: 13px; color: #fff !important; }

/* ============================================
   USP MEDIA MODULE — GOOGLE MAP
   ============================================ */
.sh-usp-map-wrap {
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow-lg);
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 320px;
}

.sh-usp-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================
   USP MEDIA MODULE — BEFORE / AFTER SLIDER
   ============================================ */
.sh-ba-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sh-ba-card {
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow-lg);
    background: var(--sh-white) !important;
}

.sh-ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}

.sh-ba-slider img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ⚠ THE OVERLAY IS ANCHORED RIGHT, SO THE AFTER STATE IS ON THE RIGHT —
   2026-09-10, per Robbie: "if the convention is before on left and after on
   right, then make both widgets do that."

   It was left-anchored, which put the after image on the LEFT and made this
   slider the mirror of every other one — Elementor's own Image Comparison,
   TwentyTwenty, Juxtapose. Left to right reads as progress through time, so a
   reversed slider is read wrong before it is noticed to be reversed.

   ⚠ THE JS OWNS THE OTHER HALF OF THIS. baPosition() sets the wrap's width to
   ( 100 - pct ) because the wrap now grows leftward from the right edge. The
   two must change together: a right-anchored wrap with the old width maths
   reveals the after image from the wrong end and the handle stops matching the
   seam.

   ⚠ AND THE SOURCE THEME IS NOT THE AUTHORITY HERE. theme/ is old StronkPRESS,
   which the plugin does not use — per Robbie. "Port the logic, do not improve
   it" governed the transcription; it does not bind a layout decision made
   after it. */
.sh-ba-after-wrap {
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* ⚠ left: auto IS LOAD-BEARING, NOT TIDINESS. `.sh-ba-slider img` sets
   `left: 0` and matches this image too — same specificity, so only source
   order separates them and `right` alone would lose to an inherited `left`
   once a width is also set. Pinned right, the after image stays registered
   against the slider's right edge as the wrap narrows. */
.sh-ba-after-wrap img {
    position: absolute;
    top: 0; left: auto; right: 0;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.sh-ba-handle {
    position: absolute;
    top: 0; left: 50%;
    width: 4px; height: 100%;
    background: var(--sh-white);
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.sh-ba-handle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: var(--sh-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sh-ba-handle::before {
    content: '◀ ▶';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    font-size: 0.625rem;
    color: var(--sh-primary);
    letter-spacing: 2px;
    white-space: nowrap;
}

.sh-ba-label {
    position: absolute;
    bottom: 12px;
    padding: 0.25rem 0.75rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    z-index: 4;
}

/* Each label over its own half — before left, after right. */
.sh-ba-label-before { left: 12px; }
.sh-ba-label-after  { right: 12px; }

.sh-ba-note {
    font-size: 0.875rem !important;
    color: var(--sh-gray) !important;
    font-style: italic;
    line-height: 1.6;
    padding: 0.75rem 1rem;
    background: var(--sh-surface-warm) !important;
    border-left: 3px solid var(--sh-accent-bright) !important;
    border-radius: 0 var(--sh-radius) var(--sh-radius) 0;
}

/* ============================================
   USP MEDIA MODULE — SINGLE IMAGE
   ============================================ */
.sh-usp-single-img {
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow-lg);
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-primary-dark) 100%) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.sh-usp-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--sh-radius-lg);
}

/* Placeholder state for single image */
.sh-usp-single-img .sh-placeholder-icon {
    width: 64px; height: 64px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--sh-white) !important;
    flex-shrink: 0;
}

.sh-usp-single-img .sh-placeholder-icon svg { width: 30px; height: 30px; }
/* Lucide-icon sibling rule (Session B fold, 2026-05-16) — absorbs inline
   style="width:30px;height:30px;color:#ffffff" on <i data-lucide> elements
   inside .sh-placeholder-icon. Mirrors the svg rule above. */
.sh-placeholder-icon i { width: 30px; height: 30px; color: var(--sh-white); }

.sh-placeholder-tag {
    font-family: var(--sh-font-button) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--sh-white) !important;  /* Session B fold 2026-05-16 — was var(--sh-accent-bright); 100% of P-file usages overrode to white inline, so canonical is corrected to match actual usage */
    margin-bottom: 0.5rem;
}

.sh-placeholder-title {
    font-family: var(--sh-font-heading) !important;
    font-size: 1.375rem !important;
    font-weight: 900 !important;
    color: var(--sh-white) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem;
}

.sh-placeholder-sub {
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.65) !important;
    font-family: var(--sh-font-body) !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* ============================================
   USP MEDIA MODULE — MOSAIC GALLERY + LIGHTBOX
   ============================================ */
.sh-usp-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.625rem;
    align-items: stretch;
}

.sh-mosaic-item {
    border-radius: var(--sh-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-primary-dark) 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-mosaic-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--sh-transition);
    display: block;
}

.sh-mosaic-item:hover img { transform: scale(1.05); }

.sh-mosaic-item-1 { grid-column: 1; grid-row: 1 / 3; min-height: 100%; }
.sh-mosaic-item-2,
.sh-mosaic-item-3,
.sh-mosaic-item-4,
.sh-mosaic-item-5 { aspect-ratio: 4 / 3; }
.sh-mosaic-item-6 { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 16 / 6; }
.sh-mosaic-item-7 { grid-column: 3; grid-row: 3; aspect-ratio: 4 / 3; }

.sh-mosaic-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background var(--sh-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-mosaic-item:hover .sh-mosaic-overlay {
    background: rgba(42,66,111,0.35);
}

.sh-mosaic-zoom {
    opacity: 0;
    transition: opacity var(--sh-transition);
    color: white;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-mosaic-item:hover .sh-mosaic-zoom { opacity: 1; }
.sh-mosaic-zoom svg { width: 18px; height: 18px; }

.sh-mosaic-ph-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: center;
    padding: 0.5rem;
}

/* ============================================================
   C5 MOSAIC MODIFIERS — Scalable + Uniform variants
   Phase C archetype promotion 2026-05-16
   Apply on the same element as .sh-usp-mosaic. Override the
   canonical 3-col fixed layout with auto-fill responsive
   columns; numbered .sh-mosaic-item-N classes are NOT used —
   layout role is decided by nth-child position (scalable) or
   uniform aspect-ratio (uniform).
   Consumers: P-about-gallery (#usp-team-at-work — scalable),
              P-our-work (#usp-completed-projects — scalable;
                          #usp-detail-work — uniform),
              P-photo-gallery (#usp-recent-jobs — scalable;
                          #usp-detail-work — uniform).
   Note: the "full-width gallery" layout-collapse pattern that
   used to live page-local on each consumer (.sh-usp-section
   .sh-usp-inner { grid-template-columns: 1fr; }) is now
   canonical too — see the C5 SECTION MODIFIER sub-banner
   immediately below (.sh-usp-section--fullwidth, 2026-05-17).
   ============================================================ */
.sh-page .sh-usp-mosaic.sh-usp-mosaic--scalable {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 160px;
    grid-auto-flow: dense;
}
.sh-page .sh-usp-mosaic.sh-usp-mosaic--scalable .sh-mosaic-item:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
}
.sh-page .sh-usp-mosaic.sh-usp-mosaic--scalable .sh-mosaic-item:nth-child(5n+3) {
    grid-column: span 2;
}
.sh-page .sh-usp-mosaic.sh-usp-mosaic--uniform {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sh-page .sh-usp-mosaic.sh-usp-mosaic--uniform .sh-mosaic-item {
    aspect-ratio: 4 / 3;
}

/* ============================================================
   C5 SECTION MODIFIER — .sh-usp-section--fullwidth — Gallery-fullwidth layout
   Phase C archetype promotion 2026-05-17
   Apply on the same element as .sh-usp-section. Collapses the
   canonical 2-col .sh-usp-inner grid to single-column so the
   gallery section's mosaic fills the full container width.
   Independent of the C5 MOSAIC MODIFIERS above — those control
   the mosaic's internal grid; this modifier controls the parent
   section's layout.
   Consumers: P-about-gallery (#usp-team-at-work),
              P-our-work     (#usp-completed-projects,
                              #usp-detail-work),
              P-photo-gallery (#usp-recent-jobs,
                              #usp-detail-work).
   ============================================================ */
.sh-page .sh-usp-section.sh-usp-section--fullwidth .sh-usp-inner {
    grid-template-columns: 1fr;
}

/* Mosaic lightbox */
.sh-mosaic-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.93);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
}

.sh-mosaic-lightbox.sh-active { display: flex; }

.sh-mosaic-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    cursor: default;
}

.sh-mosaic-lb-close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sh-transition);
}

.sh-mosaic-lb-close:hover { background: rgba(255,255,255,0.3); }

.sh-mosaic-lb-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sh-transition);
}

.sh-mosaic-lb-nav:hover { background: rgba(255,255,255,0.3); }
.sh-mosaic-lb-prev { left: 1.5rem; }
.sh-mosaic-lb-next { right: 1.5rem; }

/* ============================================
   USP MEDIA MODULE — SOCIAL IMAGE SLIDER
   ============================================ */
.sh-social-slider-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--sh-radius-lg);
}

.sh-social-slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

/* 3 visible at once on desktop */
.sh-social-slide {
    flex: 0 0 calc(33.333% - 0.5rem);
    margin-right: 0.75rem;
    cursor: pointer;
}

.sh-social-slide img {
    width: 400px;
    height: 400px;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-lg);
    display: block;
    transition: transform var(--sh-transition);
}

.sh-social-slide:hover img { transform: scale(1.02); }

.sh-social-slider-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-right: 0.25rem;
}

.sh-social-slider-btn {
    background: none !important;
    border: none !important;
    color: var(--sh-primary) !important;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color var(--sh-transition);
    display: flex;
    align-items: center;
}

.sh-social-slider-btn:hover { color: var(--sh-accent) !important; }
.sh-social-slider-btn svg { width: 22px; height: 22px; }

/* ============================================
   USP MEDIA MODULE — VIDEO EMBED
   ============================================ */
.sh-usp-video-wrap {
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow-lg);
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sh-gray-dark) !important;
    position: relative;
}

.sh-usp-video-wrap iframe,
.sh-usp-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* Video placeholder state */
.sh-video-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--sh-primary-dark) 0%, var(--sh-primary) 100%) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.sh-video-play-btn {
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    cursor: pointer;
    transition: all var(--sh-transition);
    color: var(--sh-white) !important;
}

.sh-video-play-btn:hover {
    background: var(--sh-accent) !important;
    border-color: var(--sh-accent) !important;
    transform: scale(1.08);
}

.sh-video-play-btn svg { width: 32px; height: 32px; }

.sh-video-placeholder p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

/* ============================================
   PROCESS STEPS — 3×2 icon card grid
   ============================================ */
.sh-process {
    background: var(--sh-surface-warm) !important;
}

.sh-process h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.sh-process-subtext {
    text-align: center;
    color: var(--sh-gray) !important;
    font-size: 1.0625rem !important;
    margin-bottom: 3rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.sh-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* ============================================================
   D2 MODIFIER — .sh-process--4card — 4-col emergency variant
   Phase C archetype promotion 2026-05-16
   Apply on the same element as .sh-process-grid. Overrides the
   canonical 3-col grid to 4-col at desktop, with explicit
   1024/768 mirrors so the compound-class specificity doesn't
   strand the canonical responsive cascade. Consumer: P-emergency
   #emergency-process. Closes todo-data.php emergency-process-4col.
   ============================================================ */
.sh-page .sh-process-grid.sh-process--4card {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
    .sh-page .sh-process-grid.sh-process--4card {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .sh-page .sh-process-grid.sh-process--4card {
        grid-template-columns: 1fr;
    }
}

.sh-process-card {
    background: var(--sh-white) !important;
    padding: 2.5rem 2rem;
    border-radius: var(--sh-radius-lg);
    text-align: center;
    box-shadow: var(--sh-shadow);
    transition: all var(--sh-transition);
    position: relative;
    border-top: 3px solid transparent;
}

.sh-process-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-shadow-lg);
    border-top-color: var(--sh-accent);
}

.sh-process-icon {
    width: 80px; height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--sh-surface-warm) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-accent) !important;
    border: 2px solid var(--sh-border) !important;
}

.sh-process-icon svg { width: 36px; height: 36px; }

.sh-process-card h3 {
    font-size: 1.0625rem !important;
    margin-bottom: 0.75rem;
}

.sh-process-card p {
    font-size: 0.9375rem !important;
    color: var(--sh-gray) !important;
    margin: 0;
    line-height: 1.7;
}

.sh-process-cta {
    text-align: center;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   ACCORDION / TAB SECTION
   ============================================ */
.sh-accordion-section h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.sh-accordion-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}

.sh-accordion-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sh-accordion-tab {
    padding: 1rem 1.25rem;
    background: var(--sh-white) !important;
    border: 1px solid var(--sh-border) !important;
    border-radius: var(--sh-radius);
    cursor: pointer;
    transition: all var(--sh-transition);
    font-family: var(--sh-font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: left;
    color: var(--sh-gray-dark) !important;
}

.sh-accordion-tab:hover { background: var(--sh-surface-warm) !important; }

.sh-accordion-tab.sh-active {
    background: var(--sh-primary) !important;
    color: var(--sh-white) !important;
    border-color: var(--sh-primary) !important;
}

.sh-accordion-content {
    background: var(--sh-off-white) !important;
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sh-border) !important;
}

.sh-accordion-panel {
    display: none;
    padding: 2rem;
}

.sh-accordion-panel.sh-active { display: block; }

.sh-accordion-panel h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem;
    text-transform: none !important;
}

.sh-accordion-panel p {
    color: var(--sh-gray) !important;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.sh-accordion-panel p:last-child { margin-bottom: 0; }

.sh-accordion-panel a {
    color: var(--sh-accent-bright) !important;
    font-weight: 600;
    text-decoration: underline;
}

.sh-accordion-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ============================================
   FAQ — EXPAND/COLLAPSE
   ============================================ */
.sh-faq {
    background: var(--sh-white) !important;
}

.sh-faq h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.sh-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.sh-faq-item {
    border: 1px solid var(--sh-border) !important;
    border-radius: var(--sh-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.sh-faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none !important;
    border: none !important;
    text-align: left;
    font-family: var(--sh-font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--sh-primary) !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: background var(--sh-transition);
}

.sh-faq-question:hover { background: var(--sh-surface-warm) !important; }

.sh-faq-item.sh-active .sh-faq-question {
    background: var(--sh-surface-warm) !important;
}

.sh-faq-question svg {
    flex-shrink: 0;
    width: 20px; height: 20px;
    transition: transform var(--sh-transition);
    color: var(--sh-accent-bright) !important;
}

.sh-faq-item.sh-active .sh-faq-question svg {
    transform: rotate(180deg);
}

.sh-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.sh-faq-item.sh-active .sh-faq-answer { max-height: 600px; }

/* Deliberate divergence from 02-CSS.html; the original had the same fault.
   Top padding was 0, so the answer sat flush against the open question's
   shaded bar. The padding now owns the spacing outright and the <p> margin is
   zeroed, so top and bottom match at 1.25rem — same as the question's own
   vertical padding. Every FAQ answer in the theme is a single <p>, so there
   is no paragraph gap to preserve. Affects nothing but the FAQ answer. */
.sh-faq-answer-content {
    padding: 1.25rem 1.5rem;
    color: var(--sh-gray-dark) !important;
    line-height: 1.8;
    font-size: 0.9375rem;
}

.sh-faq-answer-content p { margin: 0; }

.sh-faq-answer-content a {
    color: var(--sh-accent-bright) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================
   TESTIMONIAL — Full-width dark quote block
   ============================================ */
.sh-testimonial {
    background: linear-gradient(180deg, var(--sh-primary-dark) 0%, var(--sh-primary) 100%) !important;
    color: var(--sh-white) !important;
    text-align: center;
}

.sh-testimonial-inner {
    max-width: 800px;
    margin: 0 auto;
}

.sh-testimonial-quote-icon {
    font-size: 5rem;
    color: rgba(255,255,255,0.25) !important;
    line-height: 1;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
}

.sh-testimonial-text {
    font-size: 1.5rem !important;
    font-style: italic;
    line-height: 1.65;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.95) !important;
    font-family: var(--sh-font-accent) !important;
}

.sh-testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.sh-testimonial-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white) !important;
    font-family: var(--sh-font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.125rem !important;
}

.sh-testimonial-name {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: var(--sh-white) !important;
}

.sh-testimonial-role {
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.65) !important;
}

.sh-testimonial-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 1.5rem;
    color: var(--sh-star) !important;
}

.sh-testimonial-stars svg {
    width: 24px; height: 24px;
    fill: currentColor;
}

/* ============================================
   RELATED SERVICES CARDS — 3-col icon cards
   ============================================ */
.sh-services {
    background: var(--sh-surface-warm) !important;
}

.sh-services h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.sh-services-subtext {
    text-align: center;
    color: var(--sh-gray) !important;
    font-size: 1.0625rem !important;
    margin-bottom: 3rem;
}

.sh-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sh-service-card {
    background: var(--sh-white) !important;
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
    transition: all var(--sh-transition);
    text-align: center;
    padding: 2.5rem 2rem;
    border-bottom: 3px solid transparent;
}

.sh-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-shadow-lg);
    border-bottom-color: var(--sh-accent);
}

.sh-service-card-icon {
    width: 80px; height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--sh-surface-warm) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-primary) !important;
}

.sh-service-card-icon svg { width: 40px; height: 40px; }

.sh-service-card h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.875rem;
}

.sh-service-card p {
    color: var(--sh-gray) !important;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem !important;
    line-height: 1.7;
}

.sh-service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sh-accent-bright) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--sh-font-button) !important;
}

.sh-service-card-link svg {
    width: 16px; height: 16px;
    transition: transform var(--sh-transition);
}

.sh-service-card:hover .sh-service-card-link svg { transform: translateX(4px); }

/* ============================================
   TRUST SIGNALS / CHECKLIST — 2-col icon+text
   ============================================ */
.sh-trust {
    background: var(--sh-surface-warm) !important;
}

.sh-trust h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.sh-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 4rem;
}

.sh-trust-item {
    display: flex;
    gap: 1.25rem;
}

.sh-trust-icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    background: var(--sh-accent) !important;
    border-radius: var(--sh-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white) !important;
}

.sh-trust-icon svg { width: 26px; height: 26px; }

.sh-trust-item h3 {
    font-size: 1.0625rem !important;
    margin-bottom: 0.375rem;
}

.sh-trust-item p {
    font-size: 0.9375rem !important;
    color: var(--sh-gray) !important;
    margin: 0;
    line-height: 1.7;
}

.sh-trust-item a {
    color: var(--sh-accent-bright) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================
   AREAS SERVED — pill grid
   ============================================ */
.sh-areas {
    background: var(--sh-white) !important;
}

.sh-areas h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.sh-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.sh-area-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--sh-surface-warm) !important;
    border-radius: var(--sh-radius);
    transition: all var(--sh-transition);
    border: 1px solid var(--sh-border) !important;
}

.sh-area-item:hover {
    background: var(--sh-primary) !important;
    color: var(--sh-white) !important;
    border-color: var(--sh-primary) !important;
}

.sh-area-item svg {
    width: 18px; height: 18px;
    color: var(--sh-accent-bright) !important;
    flex-shrink: 0;
}

.sh-area-item:hover svg { color: rgba(255,255,255,0.7) !important; }

.sh-area-item span { font-weight: 500 !important; font-size: 0.9375rem !important; }

/* ⚠ DIVERGENCE FROM theme/02-CSS.html — 2026-08-19, per Robbie.

   The areas-grid tile is now a whole-tile link when its city on StronkPRESS →
   Service Areas carries a Link. theme/ only ever emitted a <div>, so it has no
   rule for this and none of what follows is in the source file.

   ONE RULE IS ENOUGH, AND ONLY BECAUSE OF A CASCADE COLLISION. `.sh-page a`
   above already gives every anchor `color: inherit` and no underline, so a
   linked tile looks identical to an unlinked one at rest. The hover does NOT
   survive on its own:

       .sh-page a:hover     { color: var(--sh-accent-bright) !important; }  0,2,1
       .sh-area-item:hover  { color: var(--sh-white) !important; }          0,2,0

   Both !important, and the anchor rule is the more specific — so hovering a
   linked tile painted the label accent-orange on the primary-blue fill while
   an unlinked tile beside it went white. Same shape as the StronkREVIEWS cta
   fix at the top of this file, and fixed the same way: out-specify it.

   ⚠ THE ICON NEEDS NO COUNTERPART. `.sh-area-item:hover svg` is 0,2,1 and
   nothing competes with it, so the pin already turns white on both. */
.sh-page a.sh-area-item:hover { color: var(--sh-white) !important; }

/* ============================================
   WHY CHOOSE US — 2-col: checklist + image
   ============================================ */
.sh-why-choose {
    background: var(--sh-white) !important;
}

.sh-why-choose-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.sh-why-choose-content h2 { margin-bottom: 1.5rem; }
.sh-why-choose-content > p { margin-bottom: 2rem; }

.sh-why-choose-list {
    list-style: none !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
}

.sh-why-choose-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sh-why-choose-check {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: var(--sh-accent) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white) !important;
    margin-top: 0.125rem;
}

.sh-why-choose-check svg { width: 16px; height: 16px; }

.sh-why-choose-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh-why-choose-image img {
    width: 100%;
    max-width: 420px;
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-lg);
}

/* ============================================
   FINAL CTA — numbered 3-step + buttons
   ============================================ */
.sh-cta {
    background: var(--sh-white) !important;
    text-align: center;
}

.sh-cta h2 { margin-bottom: 1rem; }

.sh-cta-subtext {
    max-width: 600px;
    margin: 0 auto 3rem;
    color: var(--sh-gray) !important;
    font-size: 1.0625rem !important;
    line-height: 1.8;
}

.sh-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.sh-cta-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--sh-white) !important;
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow);
    position: relative;
    border-top: 4px solid var(--sh-accent) !important;
}

.sh-cta-number {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 38px;
    background: var(--sh-accent) !important;
    color: var(--sh-white) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    font-family: var(--sh-font-heading) !important;
}

.sh-cta-icon {
    width: 60px; height: 60px;
    margin: 1rem auto 1.25rem;
    background: var(--sh-surface-warm) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-primary) !important;
}

.sh-cta-icon svg { width: 26px; height: 26px; }

.sh-cta-card h3 {
    font-size: 1.0625rem !important;
    margin-bottom: 0.5rem;
}

.sh-cta-card p {
    font-size: 0.9375rem !important;
    color: var(--sh-gray) !important;
    margin: 0;
    line-height: 1.7;
}

.sh-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE — 1024px (Tablet)
   ============================================ */
@media (max-width: 1024px) {
    .sh-hero-inner,
    .sh-intro-inner,
    .sh-feature-banner-inner,
    .sh-why-choose-inner,
    .sh-usp-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .sh-hero-badge { min-width: auto; }

    .sh-process-grid,
    .sh-services-grid,
    .sh-cta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sh-accordion-wrapper {
        grid-template-columns: 1fr;
    }

    .sh-accordion-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sh-accordion-tab {
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
    }

    .sh-areas-grid { grid-template-columns: repeat(2, 1fr); }
    .sh-trust-grid  { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE — 768px (Mobile)
   ============================================ */
@media (max-width: 768px) {
    .sh-section { padding: 3.5rem 0; }
    .sh-usp-section { padding: 3.5rem 0; }

    .sh-process-grid,
    .sh-services-grid,
    .sh-cta-grid { grid-template-columns: 1fr; }

    .sh-feature-icons { grid-template-columns: repeat(2, 1fr); }

    .sh-hero { padding: 3rem 0 2.5rem; }

    .sh-testimonial-text { font-size: 1.25rem !important; }

    .sh-areas-grid { grid-template-columns: 1fr; }

    .sh-accordion-tab { flex: 1 1 100%; }

    .sh-cta-buttons { flex-direction: column; align-items: center; }
    .sh-cta-buttons .sh-btn { width: 100%; max-width: 320px; }

    .sh-usp-nav { gap: 0.5rem; }

    /* Slider: one image per slide on mobile */
    .sh-social-slide {
        flex: 0 0 100%;
        margin-right: 0;
    }
    .sh-social-slide img { width: 100%; height: auto; }

    /* Single image USP: drop fixed aspect ratio */
    .sh-usp-single-img {
        aspect-ratio: unset !important;
        min-height: 280px;
    }
}

/* ============================================
   PRINT SAFETY
   ============================================ */
@media print {
    .sh-feature-banner, .sh-testimonial {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================
   SERIES CARD GRID
   Used for multi-part content series index
   ============================================ */
.sh-series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .sh-series-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sh-series-grid {
        grid-template-columns: 1fr;
    }

    .sh-series-grid .sh-process-card {
        text-align: left;
    }

    .sh-series-grid .sh-process-icon {
        margin: 0 0 1.25rem 0;
    }

    .sh-series-grid .sh-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   A2. FEATURED POST HERO — extracted 2026-06-08
   Moved to P-blog-post.css (project root). Loaded by P-blog-post.html only.
   ============================================================ */

/* ============================================================
   E1. SERIES NAV — extracted 2026-06-08
   Moved to P-blog-post.css (project root). Loaded by P-blog-post.html only.
   ============================================================ */

/* ============================================
   F1. FEATURED POST CARD — sh-fp prefix
   Accent-bar card for hub/index pages.
   Shows a featured article with category pill,
   read time, headline, description, topic pills,
   and a CTA button.
   ============================================ */
.sh-fp-card {
    background: var(--sh-white) !important;
    border-radius: var(--sh-radius-lg);
    border-top: 4px solid var(--sh-accent) !important;
    box-shadow: var(--sh-shadow-lg);
    padding: 2.5rem 3rem 2rem;
    position: relative;
}

/* ⚠ DIVERGENCE FROM theme/02-CSS.html — 2026-08-30, per Robbie.

   theme/P-blog.html has exactly ONE .sh-fp-card on the page, so the source has
   no rule for two of them and the second sat flush against the first. SH
   Featured Posts renders one per published post marked Featured, which is what
   Robbie asked for — "I'd like to be able to have multiple featured posts" —
   so the arrangement is new here and so is the rule for it.

   SH_Featured_Posts' own docblock already flagged this as the first thing to
   look at: ".sh-fp-card IS RENDERED ONCE IN THE SOURCE. Repeating it is a real
   divergence from theme/P-blog.html." This is that divergence, made visible in
   CSS rather than left to be discovered by looking at the page.

   ⚠ ADJACENT SIBLING, NOT margin-bottom ON EVERY CARD. The common case is one
   featured post, and a blanket margin would push the next section down by 2rem
   on every blog index on every site — changing the page for everybody to fix a
   case most of them do not have. `+` costs nothing when there is one card and
   is exactly right when there are two.

   2rem is the theme's own card-to-card rhythm, taken from .sh-services-grid's
   gap rather than picked. No media query: that gap is not reduced on mobile
   either, so matching it means matching it everywhere. */
.sh-fp-card + .sh-fp-card {
    margin-top: 2rem;
}

.sh-fp-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--sh-accent-bright) !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.sh-fp-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sh-accent-bright) !important;
    flex-shrink: 0;
}

.sh-fp-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sh-fp-category {
    font-family: var(--sh-font-button) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--sh-white) !important;
    background: var(--sh-primary) !important;
    padding: 0.3rem 0.85rem;
    border-radius: 100px;
    display: inline-block;
}

.sh-fp-readtime {
    font-family: var(--sh-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--sh-gray-light) !important;
    font-weight: 500 !important;
}

.sh-fp-card h2 {
    font-family: var(--sh-font-heading) !important;
    font-weight: 900 !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
    color: var(--sh-primary) !important;
    text-transform: uppercase !important;
    margin: 0 0 1rem 0;
}

.sh-fp-card h2 span {
    color: var(--sh-accent-bright) !important;
}

.sh-fp-desc {
    font-family: var(--sh-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: var(--sh-gray) !important;
    max-width: 700px;
    margin-bottom: 1.75rem;
}

.sh-fp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.sh-fp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sh-fp-pill {
    font-family: var(--sh-font-button) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.375rem 0.9rem;
    border-radius: 100px;
    border: 1.5px solid var(--sh-border) !important;
    color: var(--sh-gray-dark) !important;
    background: transparent !important;
    display: inline-block;
}

.sh-fp-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--sh-font-button) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: var(--sh-accent) !important;
    color: var(--sh-white) !important;
    border-radius: var(--sh-radius);
    text-decoration: none !important;
    transition: all var(--sh-transition) !important;
    flex-shrink: 0;
}

.sh-page .sh-fp-readmore:hover,
.sh-page a.sh-fp-readmore:hover {
    background: var(--sh-primary) !important;
    color: var(--sh-white) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.sh-fp-readmore svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .sh-fp-card {
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .sh-fp-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .sh-fp-readmore {
        width: 100%;
        justify-content: center;
    }
}


/* ════════════════════════════════════════════════════════════════════
   SHmrTC2 ADDITION — Site header + USP rotator component CSS.
   Migrated from inline style block in _validation-deploy/04-header.html.
   CSS variables (--sh-header-*, --sh-usp-rotator-*) keep their defaults;
   per-client overrides still work via :root {} block in the priority-5
   Custom Code entry.
   ════════════════════════════════════════════════════════════════════ */

  /* ═══ USP rotator (top strip) ═══════════════════════════════════ */
  .sh-usp-rotator-bar {
    --sh-usp-rotator-bg-local:      var(--sh-usp-rotator-bg, #f7f3ec);
    --sh-usp-rotator-border-local:  var(--sh-usp-rotator-border, #d4c4a0);
    --sh-usp-rotator-text-local:    var(--sh-usp-rotator-text, #8a8070);
    --sh-usp-rotator-accent-local:  var(--sh-usp-rotator-accent, #267a6e);
    --sh-usp-rotator-dot-local:     var(--sh-usp-rotator-dot, #2d8a7c);

    background: var(--sh-usp-rotator-bg-local);
    border-bottom: 1px solid var(--sh-usp-rotator-border-local);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .sh-usp-rotator-bar * { box-sizing: border-box; }
  .sh-usp-rotator-track { position: relative; width: 100%; height: 40px; }
  .sh-usp-rotator-item {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    font-family: var(--sh-header-font, 'Inter'), system-ui, -apple-system, sans-serif; /* SPR PATCH 2026-08-11 */
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--sh-usp-rotator-text-local);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
  }
  .sh-usp-rotator-item.is-active { opacity: 1; pointer-events: auto; }
  .sh-usp-rotator-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--sh-usp-rotator-dot-local);
    flex-shrink: 0;
  }
  /* SPR PATCH 2026-08-12 — one flex item per line, not one per segment.
     The `gap` above separates the dot from the text, but bare segments were
     each becoming their own flex item, so the gap also opened up between a
     bold word and the word after it — an 8px hole that appeared only once
     something was styled. The wrapper keeps the whole line as a single item, so
     inter-segment spacing is an ordinary word space again. */
  .sh-usp-rotator-line { display: block; min-width: 0; }
  /* SPR PATCH 2026-08-12 — em means italic.
     Was: `color: var(--sh-usp-rotator-accent-local); font-style: normal;`
     The theme used <em> as an accent-colour marker and explicitly cancelled the
     italic, which is why the widget's Italic switch appeared to change colour.
     The SH Site Header widget now sets colour per segment from the same five
     brand tokens — and --sh-usp-rotator-accent is one of them — so <em> as a
     second, hidden route to that one colour was redundant AND it occupied the
     only element the markup has for real italics. */
  .sh-usp-rotator-item em { font-style: italic; color: inherit; }
  @media (max-width: 480px) {
    .sh-usp-rotator-item { font-size: 0.7rem; letter-spacing: 0.1em; }
  }

  /* ═══ Header bar ═══════════════════════════════════════════════ */
  .sh-header {
    --sh-header-ink-deep-local:    var(--sh-header-ink-deep, #111411);
    --sh-header-ink-lifted-local:  var(--sh-header-ink-lifted, #2a2f2a);
    --sh-header-accent-local:      var(--sh-header-accent, #3aaa9a);
    --sh-header-accent-dark-local: var(--sh-header-accent-dark, #267a6e);
    --sh-header-accent-pale-local: var(--sh-header-accent-pale, #c8ebe6);
    --sh-header-text-local:        var(--sh-header-text, #b8b0a0);
    --sh-header-text-mute-local:   var(--sh-header-text-mute, #8a8070);
    --sh-header-bar-height-local:  var(--sh-header-bar-height, 120px);
    --sh-header-logo-height-local: var(--sh-header-logo-height, 110px);

    background: var(--sh-header-ink-deep-local);
    border-bottom: 2px solid var(--sh-header-accent-dark-local);
    position: sticky; top: 0; z-index: 1000;
    font-family: var(--sh-header-font, 'Inter'), system-ui, -apple-system, sans-serif; /* SPR PATCH 2026-08-11 */
  }
  .sh-header * { box-sizing: border-box; }
  .sh-header-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
    height: var(--sh-header-bar-height-local);
    display: flex; align-items: center; gap: 2rem;
  }

  /* Logo */
  .sh-header-logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
  .sh-header-logo img { height: var(--sh-header-logo-height-local); width: auto; display: block; }

  /* Desktop nav */
  .sh-header-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .sh-header-nav-item { position: relative; list-style: none; }
  .sh-header-nav-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sh-header-text-local);
    text-decoration: none; border-radius: 6px;
    transition: all 0.2s ease; white-space: nowrap;
  }
  .sh-header-nav-link:hover, .sh-header-nav-link.is-active {
    background: var(--sh-header-ink-lifted-local);
    color: var(--sh-header-accent-local);
  }
  .sh-header-nav-link svg { width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.2s ease; }

  /* Dropdown */
  .sh-header-dropdown {
    position: absolute; top: calc(100% + 8px); left: 50%;
    background: var(--sh-header-ink-lifted-local);
    border: 1px solid rgba(58, 170, 154, 0.2);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 210px; padding: 0.5rem;
    list-style: none; margin: 0;
    opacity: 0; visibility: hidden;
    transform: translateX(-50%) translateY(-6px);
    transition: all 0.2s ease;
    z-index: 200;
  }
  .sh-header-nav-item:hover .sh-header-dropdown,
  .sh-header-nav-item:focus-within .sh-header-dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .sh-header-nav-item:hover > .sh-header-nav-link svg { transform: rotate(180deg); }
  .sh-header-dropdown::before {
    content: ''; position: absolute; top: -5px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: var(--sh-header-ink-lifted-local);
    border-left: 1px solid rgba(58, 170, 154, 0.2);
    border-top: 1px solid rgba(58, 170, 154, 0.2);
  }
  .sh-header-dropdown li { list-style: none; }
  .sh-header-dropdown-link {
    display: block; padding: 0.625rem 0.875rem;
    font-size: 0.8125rem; color: var(--sh-header-text-local);
    text-decoration: none; border-radius: 6px;
    transition: all 0.2s ease; font-weight: 500; line-height: 1.3;
  }
  .sh-header-dropdown-link:hover { background: rgba(58, 170, 154, 0.1); color: var(--sh-header-accent-local); }

  /* Right side: badge + CTA */
  .sh-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; }
  .sh-header-badge { display: flex; align-items: center; }
  .sh-header-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.625rem 1.25rem;
    background: var(--sh-header-accent-local);
    /* Fix 2026-05-27 — header CTA reads white-on-accent regardless of
       brand color pairing. Previously used --sh-header-ink-deep-local
       which produced blue-on-red against StronkHAMMER's red accent. */
    color: #fff;
    font-family: var(--sh-header-font, 'Inter'), system-ui, -apple-system, sans-serif; /* SPR PATCH 2026-08-11 */
    font-size: 0.8125rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    border-radius: 6px; text-decoration: none;
    transition: all 0.2s ease; white-space: nowrap;
  }
  .sh-header-cta:hover {
    background: var(--sh-header-accent-pale-local);
    /* Fix 2026-05-27 — keep white text on hover so the swap is bg-only;
       avoids red-on-dark-blue when accent-pale resolves to a deep tone. */
    color: #fff;
    transform: translateY(-1px);
  }

  /* Mobile hamburger */
  .sh-header-hamburger {
    display: none; flex-direction: column; gap: 5px;
    padding: 0.5rem; background: none; border: none; cursor: pointer; margin-left: auto;
  }
  .sh-header-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--sh-header-text-local); border-radius: 2px;
    transition: all 0.25s ease;
  }
  .sh-header-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .sh-header-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .sh-header-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile menu */
  .sh-header-mobile-menu {
    display: none;
    background: var(--sh-header-ink-deep-local);
    border-top: 1px solid rgba(58, 170, 154, 0.2);
    /* Mobile fix 2026-05-27 — padding was 1rem 1.5rem 1.5rem at base,
       which sits OUTSIDE max-height and produced a ~40px empty dark-blue
       stripe under the header when the menu was closed. Zero padding in
       the collapsed state, restore it on .is-open. */
    padding: 0 1.5rem;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .sh-header-mobile-menu.is-open { max-height: 600px; padding: 1rem 1.5rem 1.5rem; }
  .sh-header-mobile-link {
    display: block; padding: 0.75rem 0;
    font-size: 0.9375rem; font-weight: 600;
    color: var(--sh-header-text-local); text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .sh-header-mobile-link:last-child { border-bottom: none; }
  .sh-header-mobile-link:hover { color: var(--sh-header-accent-local); }
  .sh-header-mobile-sub {
    padding: 0.375rem 0 0.375rem 1rem;
    display: block; font-size: 0.875rem; font-weight: 400;
    color: var(--sh-header-text-mute-local); text-decoration: none;
    letter-spacing: 0.03em; text-transform: none; border-bottom: none;
  }
  .sh-header-mobile-sub:hover { color: var(--sh-header-accent-local); }
  .sh-header-mobile-cta {
    display: block; margin-top: 1.25rem; padding: 0.875rem;
    background: var(--sh-header-accent-local);
    /* Fix 2026-05-27 — matches .sh-header-cta correction: white text on
       accent bg regardless of brand color pairing. */
    color: #fff;
    text-align: center; font-weight: 700; font-size: 0.875rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    border-radius: 6px; text-decoration: none;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .sh-header-nav { display: none; }
    .sh-header-badge { display: none; }
    .sh-header-cta { display: none; }
    .sh-header-hamburger { display: flex; }
    .sh-header-mobile-menu { display: block; }
    /* Mobile fix 2026-05-27 — header bar + logo were 120px/110px at every
       viewport; with desktop nav/badge/CTA hidden the bar has nothing to
       fill the height, so the logo floats in an empty dark-blue stripe.
       Collapse both so the mobile header reads like a typical service-site
       header (compact bar, logo left, hamburger right). */
    .sh-header {
      --sh-header-bar-height-local:  72px;
      --sh-header-logo-height-local: 48px;
    }
    .sh-header-inner { padding: 0 1rem; gap: 1rem; }
  }

/* ════════════════════════════════════════════════════════════════════
   SHmrTC2 ADDITION — Site footer component CSS.
   Migrated from inline style block in _validation-deploy/05-footer.html.
   ════════════════════════════════════════════════════════════════════ */

  .sh-page .sh-site-footer { background: var(--sh-surface-dark) !important; color: var(--sh-white) !important; font-family: var(--sh-font-body) !important; }
  .sh-page .sh-site-footer-cta { background: var(--sh-white) !important; border-top: 4px solid var(--sh-accent) !important; padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
  .sh-page .sh-site-footer-body { padding: 3rem 0; }
  .sh-page .sh-site-footer-grid { display: grid; grid-template-columns: 1fr 1.5fr 1.4fr; gap: 3rem; }
  .sh-page .sh-site-footer-col { color: var(--sh-white) !important; }
  .sh-page .sh-site-footer-heading { font-family: var(--sh-font-heading) !important; font-weight: 800 !important; font-size: 1.15rem !important; text-transform: uppercase !important; letter-spacing: 0.04em; color: var(--sh-white) !important; margin: 0 0 1rem 0 !important; line-height: 1.2 !important; }
  .sh-page .sh-site-footer-heading-mt { margin-top: 2rem !important; }
  .sh-page .sh-site-footer-list { list-style: disc !important; padding-left: 1.25rem !important; margin: 0 !important; }
  .sh-page .sh-site-footer-list li { margin: 0.4rem 0 !important; color: var(--sh-white) !important; font-size: 0.9375rem !important; line-height: 1.55; }
  .sh-page .sh-site-footer-list li::marker { color: var(--sh-accent-bright); }
  .sh-page .sh-site-footer-list a { color: var(--sh-white) !important; text-decoration: none !important; transition: color var(--sh-transition); }
  .sh-page .sh-site-footer-list a:hover { color: var(--sh-accent-bright) !important; text-decoration: underline !important; }
  .sh-page .sh-site-footer-sub2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .sh-page .sh-site-footer-sublabel { font-family: var(--sh-font-button) !important; font-weight: 700 !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--sh-white) !important; margin: 1.25rem 0 0.5rem; }
  .sh-page .sh-site-footer-social-row { margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .sh-page .sh-site-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: var(--sh-radius); transition: background var(--sh-transition); }
  .sh-page .sh-site-footer-social:hover { background: rgba(255,255,255,0.16); }
  .sh-page .sh-site-footer-social svg { width: 22px; height: 22px; }
  .sh-page .sh-site-footer-map { background: var(--sh-white); border-radius: var(--sh-radius); overflow: hidden; box-shadow: var(--sh-shadow); line-height: 0; }
  .sh-page .sh-site-footer-map iframe { width: 100%; height: 280px; border: 0; display: block; }
  .sh-page .sh-site-footer-bottom { background: var(--sh-surface-dark) !important; color: var(--sh-white) !important; text-align: center; padding: 1.25rem 1rem; font-size: 0.9375rem !important; border-top: 1px solid rgba(255,255,255,0.12); } /* 2026-07-01: hairline tokenized off old red (was rgba(151,29,19)) */
  /* 2026-07-01 — Site Navigation: full-width multi-column list beneath the 3-col row. */
  .sh-page .sh-site-footer-nav { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); }
  .sh-page .sh-site-footer-list--cols { columns: 4 200px; column-gap: 2rem; list-style: none !important; padding-left: 0 !important; }
  .sh-page .sh-site-footer-list--cols li { break-inside: avoid; }
  .sh-page .sh-btn-dark { background: var(--sh-surface-dark) !important; color: var(--sh-white) !important; }
  .sh-page .sh-btn-dark:hover, .sh-page a.sh-btn-dark:hover { background: var(--sh-primary) !important; color: var(--sh-white) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.30) !important; text-decoration: none !important; }
  @media (max-width: 1024px) {
    .sh-page .sh-site-footer-grid { grid-template-columns: 1fr 1fr; }
    .sh-page .sh-site-footer-col:nth-child(3) { grid-column: 1 / -1; }
  }
  @media (max-width: 768px) {
    .sh-page .sh-site-footer-body { padding: 2rem 0; }
    .sh-page .sh-site-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sh-page .sh-site-footer-sub2 { grid-template-columns: 1fr; }
    .sh-page .sh-site-footer-cta { padding: 1.25rem 1rem; }
    .sh-page .sh-site-footer-cta .sh-btn { width: 100%; max-width: 320px; }
  }

/* ============================================================
   A3. HERO FULL-BLEED — A1 modifier — gradient overlay + photo background + white text
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-hero.sh-hero-fullbleed {
    background-image:
      linear-gradient(135deg, rgba(17,20,17,0.72) 0%, rgba(17,20,17,0.55) 100%),
      url("images/hero-home.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--sh-white);
}
.sh-page .sh-hero.sh-hero-fullbleed .sh-eyebrow { color: rgba(255,255,255,0.78); }
.sh-page .sh-hero.sh-hero-fullbleed h1 { color: var(--sh-white); }
.sh-page .sh-hero.sh-hero-fullbleed h1 span { color: var(--sh-accent); }
.sh-page .sh-hero.sh-hero-fullbleed p { color: rgba(255,255,255,0.92); }

/* ============================================================
   B4. FORM CARD — Estimate request — Canonical CSS (3 variants: full / scheduling / compressed)
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-form-card {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 1.75rem;
    box-shadow: var(--sh-shadow);
    border: 1px solid rgba(0,0,0,0.06);
}
.sh-page .sh-form-card-eyebrow {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sh-accent);
    margin-bottom: 0.5rem;
}
.sh-page .sh-form-card-title {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    line-height: 1.15;
    color: var(--sh-primary);
    margin: 0 0 0.75rem;
}
.sh-page .sh-form-card-sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--sh-gray);
    margin: 0 0 1.25rem;
}
.sh-page .sh-form-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.sh-page .sh-form-card-row { margin-bottom: 0.75rem; }
.sh-page .sh-form-card-row input,
.sh-page .sh-form-card-row select,
.sh-page .sh-form-card-row textarea,
.sh-page .sh-form-card-grid input,
.sh-page .sh-form-card-grid select {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: calc(var(--sh-radius) * 0.66);
    font: inherit;
    font-size: 0.9375rem;
    background: var(--sh-white);
    color: var(--sh-gray-dark);
}
.sh-page .sh-form-card-row textarea { min-height: 88px; resize: vertical; }
.sh-page .sh-form-card-note {
    font-size: 0.8125rem;
    color: var(--sh-gray);
    margin: 0.75rem 0 0;
    text-align: center;
}
.sh-page .sh-form-card .sh-btn { width: 100%; justify-content: center; }
@media (max-width: 600px) {
    .sh-page .sh-form-card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   B4 CONTAINER — .sh-form-card-container wrapper utility
   Phase C archetype promotion 2026-05-16
   Apply as a wrapper <div> around <aside class="sh-form-card">
   when the form-card is NOT already constrained by a 2-col split
   layout (B5 sh-b-split on P-home B-right; B6 sh-contact-split on
   P-contact-us). Centers and constrains to 640px. Replaces the
   page-local retains formerly carried in P-careers (form-card
   variant centered-narrow wrapper) and P-emergency (#callback-form
   .sh-form-card width override).
   Consumers: P-careers (#apply form-card), P-emergency
              (#callback-form form-card).
   Note: P-home J-section #1 and #2 currently express the same
   pattern as inline-style wrappers (style="max-width:640px;
   margin:0 auto;") — those are inline-style residuals banked per
   the Session-2026-05-16 form-card wrapper kickoff out-of-scope.
   Eligible candidates for the next inline-style sweep, with this
   canonical class to land on.
   ============================================================ */
.sh-page .sh-form-card-container {
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================================
   P-CAREERS OVERRIDES — folded up 2026-06-08 (CSS-locality directive)
   Two careers-page overrides previously living in P-careers.html
   page-local <style> block. Scoped via the #apply id (P-careers D9
   CTA section id; not used elsewhere) so they only fire on the
   careers page — identical behavior to the original page-local rules.
   First rule: gives the "tell us about yourself" textarea more
   breathing room than canonical 88px (UX retain).
   Second rule: widens the CTA subtext to match the 640px form-card
   width and tightens bottom margin so subtext doesn't float far
   from the form below it. Promoted 2026-05-17 from an inline
   style="" on the <p>; folded up here 2026-06-08.
   ============================================================ */
.sh-page #apply .sh-form-card-row textarea { min-height: 120px; }
.sh-page #apply .sh-cta-subtext { max-width: 640px; margin: 0 auto 2rem; }

/* ============================================================
   A4. THANKS HERO — Confirmation/notification hero — Centered icon + eyebrow + h1 + sub + back-to-home
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-thanks-hero {
    padding: 5rem 0 4rem;
    background: var(--sh-surface-cool);
    text-align: center;
}
.sh-page .sh-thanks-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sh-page .sh-thanks-hero-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--sh-accent);
    color: var(--sh-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-thanks-hero-icon i {
    width: 44px;
    height: 44px;
}
.sh-page .sh-thanks-hero .sh-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--sh-accent);
}
.sh-page .sh-thanks-hero h1 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--sh-primary);
    margin: 0 0 1rem;
}
.sh-page .sh-thanks-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--sh-gray);
    margin: 0 0 1.75rem;
    max-width: 560px;
}
.sh-page .sh-thanks-hero .sh-btn { align-self: center; }

/* ============================================================
   D10. WHILE YOU WAIT — 3-card soft-link strip — Pre-rename canonical CSS (rename executed below)
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-thanks-while-you-wait-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .sh-page .sh-thanks-while-you-wait-grid { grid-template-columns: repeat(3, 1fr); }
}
.sh-page .sh-thanks-while-you-wait-card {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 1.5rem;
    box-shadow: var(--sh-shadow);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.sh-page .sh-thanks-while-you-wait-card h3 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--sh-primary);
    margin: 0 0 0.5rem;
}
.sh-page .sh-thanks-while-you-wait-card p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--sh-gray);
    margin: 0 0 1rem;
    flex: 1;
}
.sh-page .sh-thanks-while-you-wait-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--sh-font-button);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sh-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: flex-start;
}
.sh-page .sh-thanks-while-you-wait-link i {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}
.sh-page .sh-thanks-while-you-wait-link:hover i { transform: translateX(3px); }

/* ============================================================
   A3.emergency. HERO FULL-BLEED — Emergency tint — Modifier-on-modifier (stacks on A3); warm/red gradient
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-hero.sh-hero-fullbleed.sh-hero-emergency {
    background-image:
      linear-gradient(135deg, rgba(17,20,17,0.78) 0%, rgba(151,29,19,0.72) 60%, rgba(151,29,19,0.85) 100%),
      url("images/hero-rooftop-emergency.jpg");
}
/* 2026-06-16 · issue-20260615-134348 / issue-20260616-081108 — p-emergency hero:
   the hero treatment is being TESTED in client/theme/custom-tailored-styles.css (the client
   sandbox) per owner, NOT in this main stylesheet. The original A3.emergency red
   rule above is the untouched theme default; the sandbox override wins at runtime
   because it loads after 02-CSS. When a treatment is signed off it graduates back
   here and the sandbox copy is removed. (Earlier dark/white gradient experiments
   that briefly lived here have been moved out so 02-CSS stays pristine.) */

/* ============================================================
   B5. LAYOUT — 2-col split (form-card right) — Generic 2-col wrapper; collapses at narrow widths
   Phase B fold-back 2026-05-15
   ============================================================ */
/* B section wrapper: 2-col, D1 left + form-card right */
.sh-page .sh-b-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 960px) {
    .sh-page .sh-b-split { grid-template-columns: 1.35fr 1fr; align-items: start; }
    .sh-page .sh-b-split .sh-why-choose-inner { grid-template-columns: 1fr; }
    .sh-page .sh-b-split .sh-why-choose-image { display: none; }
}

/* ============================================================
   C9. TRUST LOGOS — Grayscale logo strip — Horizontal flex-wrap, color-on-hover
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-trust-logos {
    padding: 2.25rem 0;
    background: var(--sh-surface-cool);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sh-page .sh-trust-logos-label {
    text-align: center;
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sh-gray);
    margin-bottom: 1.25rem;
}
.sh-page .sh-trust-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.25rem 3rem;
    opacity: 0.85;
}
.sh-page .sh-trust-logos-row img {
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter 200ms ease, opacity 200ms ease;
}
.sh-page .sh-trust-logos-row img:hover { filter: grayscale(0); }

/* ============================================================
   C10. CONTACT INFO CREDS — 5-logo credential grid — Square cells, grayscale-on-rest hover-to-color
   Phase C archetype promotion 2026-05-16
   Consumers: P-contact-us (inside sh-contact-info-row, with card chrome),
              P-thank-you (inside sh-thanks-intro-split hero column, no chrome).
   The .sh-thanks-intro-split .sh-contact-info-creds compound-context
   override lives page-local in P-thank-you — it's a deliberate hero-context
   spacing variant, retained as a documented page-local override.
   ============================================================ */
.sh-page .sh-contact-info-creds {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.sh-page .sh-contact-info-creds-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: calc(var(--sh-radius) * 0.5);
    aspect-ratio: 1 / 1;
}
.sh-page .sh-contact-info-creds-item img {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    display: block;
    filter: grayscale(100%);
    opacity: 0.78;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.sh-page .sh-contact-info-creds-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================================
   D11. SERVICE AREAS — 2-col map + city list — Map left, eyebrow/lede/2-col list/CTA right
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-area-list-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 960px) {
    .sh-page .sh-area-list-inner { grid-template-columns: 1fr 1fr; }
}
.sh-page .sh-area-list-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-area-list-cities {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.5rem;
    columns: 2;
    column-gap: 1.5rem;
}
.sh-page .sh-area-list-cities li {
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sh-gray-dark);
    font-weight: 500;
    break-inside: avoid;
}
.sh-page .sh-area-list-cities li i { color: var(--sh-accent); width: 16px; height: 16px; }
@media (max-width: 600px) { .sh-page .sh-area-list-cities { columns: 1; } }

/* ============================================================
   D12. FAQ + IMAGE — D4 variant — 2-col: image left, FAQ accordion right (reuses D4 sh-faq classes)
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-faq-image-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 960px) {
    .sh-page .sh-faq-image-inner { grid-template-columns: 1fr 1.15fr; }
}
.sh-page .sh-faq-image-side img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-faq-image-side .sh-eyebrow { display: block; margin-bottom: 0.5rem; }

/* ============================================================
   D13. INSPECTION PROCESS — 4-col numbered process grid — Auto-fit 220px min; numbered steps with h3 + bullets
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-inspection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.sh-page .sh-inspection-card {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 1.5rem;
    box-shadow: var(--sh-shadow);
    border-top: 4px solid var(--sh-accent);
}
.sh-page .sh-inspection-step {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--sh-accent);
    margin-bottom: 0.25rem;
}
.sh-page .sh-inspection-card h3 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--sh-primary);
    margin: 0 0 0.875rem;
}
.sh-page .sh-inspection-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sh-page .sh-inspection-card li {
    padding: 0.375rem 0 0.375rem 1.25rem;
    position: relative;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--sh-gray-dark);
}
.sh-page .sh-inspection-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    background: var(--sh-accent);
    border-radius: 50%;
}

/* ============================================================
   B6. LAYOUT — Contact 2-col split — Form-card left, info-card right; stacks at narrow widths
   Phase B fold-back 2026-05-15
   ============================================================
   Mobile stacks form-card first (primary CTA), info-card second. */
.sh-page .sh-contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 960px) {
    .sh-page .sh-contact-split { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   D14. CONTACT INFO CARD — Phone/email/address/hours/map — Right-column rows + embedded map
   Phase B fold-back 2026-05-15
   ============================================================
   Lives in the right column at ≥960px, stacks below form-card on mobile. */
.sh-page .sh-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sh-page .sh-contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--sh-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: calc(var(--sh-radius) * 0.66);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-contact-info-row > i {
    flex-shrink: 0;
    color: var(--sh-accent);
    margin-top: 0.125rem;
}
.sh-page .sh-contact-info-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.sh-page .sh-contact-info-label {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--sh-gray);
}
.sh-page .sh-contact-info-value {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--sh-gray-dark);
    margin: 0;
}
.sh-page .sh-contact-info-value a {
    color: var(--sh-primary);
    text-decoration: none;
    font-weight: 600;
}
.sh-page .sh-contact-info-value a:hover { text-decoration: underline; }
.sh-page .sh-contact-info-hours {
    width: 100%;
    border-collapse: collapse;
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}
.sh-page .sh-contact-info-hours td {
    padding: 0.25rem 0;
    color: var(--sh-gray-dark);
    vertical-align: top;
}
.sh-page .sh-contact-info-hours td:first-child {
    font-weight: 600;
    padding-right: 1rem;
    white-space: nowrap;
}
.sh-page .sh-contact-info-map {
    border-radius: var(--sh-radius);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
    border: 1px solid rgba(0,0,0,0.06);
    aspect-ratio: 16 / 10;
}
.sh-page .sh-contact-info-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================================
   D14b. CONTACT MAP SECTION — Full-container-width map below the
   contact-split (P-contact-us pattern). Folded up 2026-06-08
   from P-contact-us.html page-local <style> block per CSS-locality
   directive. Scoped via the .sh-contact-map-section class (only
   present where the override should apply) so canonical D14 in-card
   maps elsewhere keep their 16/10 ratio. The map is wider here
   (21/9) because it spans the combined form+info column width;
   narrow viewports return to 16/10 to avoid going letterbox.
   Consumer: P-contact-us.
   ============================================================ */
.sh-page .sh-contact-map-section { padding-top: 0; }
.sh-page .sh-contact-map-section .sh-contact-info-map { aspect-ratio: 21 / 9; }
@media (max-width: 600px) {
    .sh-page .sh-contact-map-section .sh-contact-info-map { aspect-ratio: 16 / 10; }
}

/* ============================================================
   D15. WHAT HAPPENS NEXT — 3-step numbered strip — Big numeric badges + h3 + paragraphs
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-thanks-next-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .sh-page .sh-thanks-next-grid { grid-template-columns: repeat(3, 1fr); }
}
.sh-page .sh-thanks-next-card {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: var(--sh-shadow);
    border-top: 4px solid var(--sh-accent);
    position: relative;
}
.sh-page .sh-thanks-next-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sh-accent);
    color: var(--sh-white);
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
}
.sh-page .sh-thanks-next-card h3 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: 1.1875rem;
    color: var(--sh-primary);
    margin: 0 0 0.5rem;
}
.sh-page .sh-thanks-next-card p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--sh-gray);
    margin: 0;
}

/* ============================================================
   D15b. THANKS INTRO SPLIT — 2-col layout INSIDE sh-thanks-hero
   combining the confirmation hero (LEFT) with the 3-step "what
   happens next" timeline (RIGHT). Folded up 2026-06-08 from
   P-thank-you.html page-local <style> block per CSS-locality
   directive ("all CSS lives in the main styles file"). Every rule
   here is scoped via the .sh-thanks-intro-split ancestor class
   (only present on P-thank-you) so canonical A4 / D15 behavior
   elsewhere is unchanged — identical compound-context override
   pattern as before, CSS just lives in the canonical sheet now.
   Stacks under 960px in source order: hero first, then steps.
   Tightens the top of the page so the video section reads as the
   next beat instead of fighting for screen real estate.
   Consumer: P-thank-you.
   ============================================================ */
.sh-page .sh-thanks-intro-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 960px) {
    .sh-page .sh-thanks-intro-split {
        grid-template-columns: 1.05fr 1fr;
        gap: 3.5rem;
    }
}

/* Hero column overrides inside the split — left-align, lose the
   centered/max-width constraint so the column drives layout. */
.sh-page .sh-thanks-intro-split .sh-thanks-hero-inner {
    max-width: none;
    align-items: flex-start;
    text-align: left;
    margin: 0;
}
.sh-page .sh-thanks-intro-split .sh-thanks-hero-sub {
    margin-left: 0;
    margin-right: 0;
}
.sh-page .sh-thanks-intro-split .sh-thanks-hero .sh-btn {
    align-self: flex-start;
}

/* Right-column header (eyebrow + h2) — left-aligned override. */
.sh-page .sh-thanks-intro-split .sh-thanks-next-side .sh-eyebrow {
    text-align: left;
}
.sh-page .sh-thanks-intro-split .sh-thanks-next-side h2 {
    text-align: left;
    margin: 0 0 1.25rem;
}

/* Step cards inside the split — vertical stack with a number-left
   /content-right card layout. Keeps the existing card markup; just
   restyles the cards via grid so the h3+p flow into column 2. */
.sh-page .sh-thanks-intro-split .sh-thanks-next-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 0;
}
.sh-page .sh-thanks-intro-split .sh-thanks-next-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    border-top: 0;
    border-left: 4px solid var(--sh-accent);
}
.sh-page .sh-thanks-intro-split .sh-thanks-next-number {
    margin-bottom: 0;
}
.sh-page .sh-thanks-intro-split .sh-thanks-next-card h3,
.sh-page .sh-thanks-intro-split .sh-thanks-next-card p {
    grid-column: 2;
}
.sh-page .sh-thanks-intro-split .sh-thanks-next-card h3 {
    font-size: 1.0625rem;
    margin: 0 0 0.35rem;
}

/* Compound-context override: hero-column spacing for the trust-creds
   row differs from the in-card placement on P-contact-us. */
.sh-page .sh-thanks-intro-split .sh-contact-info-creds {
    width: 100%;
    margin: 1.25rem 0 1.75rem;
}

/* ============================================================
   D16. THANKS CALLBACK — Pre-footer phone-only block — Phone icon + h2 + body + hours table + phone link
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-thanks-callback {
    padding: 3.5rem 0;
    background: var(--sh-primary);
    color: var(--sh-white);
    text-align: center;
}
.sh-page .sh-thanks-callback-inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sh-page .sh-thanks-callback-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: var(--sh-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.sh-page .sh-thanks-callback-icon i { width: 26px; height: 26px; }
.sh-page .sh-thanks-callback h2 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    /* !important 2026-05-28 — same cascade fight as D18: .sh-page h2 at L122 carries
       !important and would otherwise drag this h2 back to navy against the navy bg. */
    color: var(--sh-white) !important;
    margin: 0 0 0.5rem;
}
.sh-page .sh-thanks-callback-phone {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: 1.625rem;
    color: var(--sh-white);
    text-decoration: none;
    margin: 0 0 0.5rem;
    display: inline-block;
}
.sh-page .sh-thanks-callback-phone:hover { color: var(--sh-accent); }
.sh-page .sh-thanks-callback-hours {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.5rem;
}

/* ============================================================
   D17. BOOK A TIME — Feature card — Eyebrow + h2 + body + Calendly CTA (anchor id='book-now')
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-scheduling-book {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 2.5rem 2rem;
    box-shadow: var(--sh-shadow);
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.sh-page .sh-scheduling-book-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--sh-accent);
    color: var(--sh-white);
    margin: 0 auto 1.25rem;
}
.sh-page .sh-scheduling-book-icon i { width: 40px; height: 40px; }
.sh-page .sh-scheduling-book-eyebrow {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sh-accent);
    margin-bottom: 0.5rem;
    display: block;
}
.sh-page .sh-scheduling-book h2 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    color: var(--sh-primary);
    margin: 0 0 0.75rem;
}
.sh-page .sh-scheduling-book p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--sh-gray);
    margin: 0 0 1.5rem;
}
.sh-page .sh-scheduling-book .sh-btn { font-size: 1.0625rem; padding: 1rem 1.75rem; }

/* ============================================================
   D18. EMERGENCY PHONE STRIP — Page-local phone-first CTA — Large icon + h2 + body + phone-link + hours line
   Phase B fold-back 2026-05-15
   ============================================================
   Big phone-call ribbon that sits between B1 and the process grid.
   This is the page's primary conversion bar — visually loud, single
   button, no competing fields.

   Bug fix 2026-05-28 — D18 was rendering white-bg with navy h2 text on
   desktop (Stevie screenshot, P-emergency). Root cause: the divider
   line above had a comment-end token tacked onto the equals run, which
   closed the banner comment prematurely; the three description lines
   that followed became raw text in the stylesheet, the CSS parser
   errored, and recovery ate the entire D18 rule block — so the
   background var(--sh-primary) never applied. Fix: merged the two
   halves into one continuous comment by removing the premature
   comment-end token on the divider line.

   MAINTAINER WARNING: do not write the literal asterisk-slash sequence
   anywhere inside a CSS comment body — including inside parens,
   quotes, or backticks. The CSS parser ignores quoting and will close
   the comment at the first occurrence. Same trap as the HTML
   bracket-dash-dash-bracket sequence noted in carry-forward #2.
   ============================================================ */
.sh-page .sh-emergency-phone-strip {
    /* Palette flip 2026-05-28 — Stevie wants this section to read as part of
       the page's white-panel flow, NOT as a contrasting navy island. Bg flipped
       from var(--sh-primary) to var(--sh-white). Text colors below also flip:
       h2 lets the canonical .sh-page h2 navy rule win (no override needed);
       p switches from rgba-white to var(--sh-gray) like every other white-bg
       body copy. Red icon circle and accent eyebrow stay — they pop on white. */
    background: var(--sh-white);
    padding: 3rem 0;
    text-align: center;
}
.sh-page .sh-emergency-phone-strip-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto;
}
.sh-page .sh-emergency-phone-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sh-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white);
    box-shadow: 0 8px 24px rgba(151,29,19,0.35);
}
.sh-page .sh-emergency-phone-icon i {
    width: 36px;
    height: 36px;
}
.sh-page .sh-emergency-phone-eyebrow {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sh-accent);
}
.sh-page .sh-emergency-phone-strip h2 {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    line-height: 1.15;
    /* Color intentionally omitted 2026-05-28 — section is now white-bg, so we
       LET the canonical .sh-page h2 { color: var(--sh-primary) !important } at
       L122 win and paint navy on white like every other section heading. */
    margin: 0;
}
.sh-page .sh-emergency-phone-strip h2 a {
    color: var(--sh-accent);
    text-decoration: none;
}
.sh-page .sh-emergency-phone-strip p {
    font-size: 1rem;
    line-height: 1.55;
    /* Body color flipped 2026-05-28 — was rgba-white for navy-bg; section is
       now white-bg so use the canonical body-gray. */
    color: var(--sh-gray);
    margin: 0;
}
.sh-page .sh-emergency-phone-strip .sh-btn {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    padding: 1rem 2rem;
}

/* Mobile fix 2026-05-27 — on phone the section was leaving a huge dead
   stripe between the h2 and the CALL NOW button. The body <p> was
   rendering invisible against the rendered bg (its color is rgba-white
   per the canonical rule, but the cascade lands on a lighter bg in the
   harness), so it consumed ~150-200px of vertical space without showing
   anything. On mobile this section's job is a single conversion: phone
   number + button. Hide the body copy at ≤768 and tighten padding so the
   strip reads as a tight CTA bar. The h2 already carries the message
   ("Call (555) 123-4567 — we answer storm Saturdays"). */
@media (max-width: 768px) {
    .sh-page .sh-emergency-phone-strip { padding: 2rem 0; }
    .sh-page .sh-emergency-phone-strip-inner { gap: 0.75rem; }
    .sh-page .sh-emergency-phone-strip p { display: none; }
}

/* ============================================================
   CALLBACK-FORM SECTION BACKGROUND — P-emergency #callback-form
   Folded up from P-emergency.html on 2026-06-08 per CSS-locality directive
   ("all CSS lives in the main styles file"). Keeps the secondary
   callback form visually de-emphasized vs. the emergency-phone-strip
   directly above it. The #callback-form scope is intentional —
   this background only applies on P-emergency, where #callback-form
   is the section id used by the emergency callback CTA.
   ============================================================ */
.sh-page #callback-form {
    background: var(--sh-surface-cool);
}

/* Historical note (2026-05-16 form-card wrapper micro-session — honest correction §1):
   The `.sh-page #callback-form .sh-form-card { max-width: 640px; margin: 0 auto; }`
   rule formerly sat here as a Phase B fold-back leftover and was deleted because it
   was superseded by B4 CONTAINER (.sh-form-card-container) promoted that session,
   with P-emergency markup updated to use the wrapper class. Original rules also
   carried a missing closing `}` between the form-card-width rule and the U1
   banner — incidental syntax bug fixed by that deletion. */

/* ============================================================
   P-FINANCING EMBED SLOT — Partner-embed placeholder styling
   Folded up from P-financing.html on 2026-06-08 per CSS-locality directive
   ("all CSS lives in the main styles file"). Styles the dashed-border
   placeholder where a third-party financing partner's embed code drops
   in. Live deploys replace .sh-financing-embed-slot contents; the wrapper
   stays for layout. The page is a pure deflection — we don't author
   financing terms, the partner does — so the styling is intentionally
   minimal: a centered, bordered card with embed instructions.
   Consumer: P-financing.
   ============================================================ */
.sh-page .sh-financing-embed-wrap {
    max-width: 880px;
    margin: 0 auto;
}
.sh-page .sh-financing-embed-slot {
    background: var(--sh-white);
    border: 2px dashed rgba(0, 0, 0, 0.18);
    border-radius: var(--sh-radius);
    padding: 2.5rem 1.75rem;
    text-align: center;
    color: var(--sh-gray);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-financing-embed-slot-label {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sh-accent);
    margin-bottom: 0.75rem;
    display: block;
}
.sh-page .sh-financing-embed-slot-title {
    font-family: var(--sh-font-heading);
    font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.375rem);
    color: var(--sh-primary);
    margin: 0 0 0.75rem;
}
.sh-page .sh-financing-embed-slot p {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 auto 0.5rem;
    max-width: 560px;
}
.sh-page .sh-financing-embed-slot code {
    background: rgba(0, 0, 0, 0.04);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--sh-gray-dark);
}

/* ============================================================
   GBP CARD MOCKUP — P-reviews-grid Google Business Profile preview
   Folded up from P-reviews-grid.html on 2026-06-08 per CSS-locality directive
   ("all CSS lives in the main styles file"). Hand-built static mockup of
   Google's Business Profile knowledge-panel card (photo + map mini,
   business name, rating, type, four action chips, description, address,
   phone, hours, footer links). Lives in the right column of B2 sh-intro
   on the reviews page. Data values are hardcoded from business.* in
   01-JSON.html.

   DELIBERATELY NON-THEME — these rules mimic Google's actual UI palette
   (#dadce0 borders, #1a73e8 links, #5f6368 muted text, #fbbc04 stars,
   Roboto family) on purpose. Do NOT swap in --sh-* tokens; the mockup
   would stop reading as "a Google card." This island of non-theme
   styling is intentional and scoped to .gbp-card* selectors only —
   no .sh-page prefix, no theme-token references in rule bodies.

   Tracked as open todo `g-gbp-card` in todo-data.php for future
   globalization (Phase B: G-gbp-card.html partial + business.gbp* JSON
   fields + optional StronkREVIEWS engine variant). The CSS-fold to this
   sheet is independent of that work — the todo's engine/partial subtasks
   remain open.

   Consumer: P-reviews-grid.
   ============================================================ */
.gbp-card {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.10);
    font-family: 'Roboto', -apple-system, system-ui, sans-serif;
    color: #202124;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    overflow: hidden;
}
.gbp-card__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #dadce0;
    height: 180px;
    position: relative;
}
.gbp-card__photo,
.gbp-card__map {
    position: relative;
    overflow: hidden;
    background: #f1f3f4;
}
.gbp-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gbp-card__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.gbp-card__media-caption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}
.gbp-card__expand {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #202124;
}
.gbp-card__expand svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}
.gbp-card__body {
    padding: 16px 20px 4px;
}
.gbp-card__name {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #202124;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.gbp-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.gbp-card__rating-num {
    font-weight: 500;
    color: #202124;
}
.gbp-card__rating-stars {
    color: #fbbc04;
    letter-spacing: 1px;
    font-size: 13px;
}
.gbp-card__rating-count {
    color: #1a73e8;
    text-decoration: none;
}
.gbp-card__rating-count:hover {
    text-decoration: underline;
}
.gbp-card__type {
    font-size: 14px;
    color: #5f6368;
    margin: 4px 0 14px;
    line-height: 1.4;
}
.gbp-card__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 16px 14px;
}
.gbp-card__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border: 1px solid #dadce0;
    border-radius: 22px;
    background: #fff;
    color: #1a73e8;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: center;
    line-height: 1;
}
.gbp-card__action:hover {
    background: #f1f7ff;
    color: #1a73e8;
}
.gbp-card__action svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}
.gbp-card__divider {
    height: 1px;
    background: #e8eaed;
    margin: 0 20px;
}
.gbp-card__details {
    padding: 14px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gbp-card__description {
    font-size: 14px;
    color: #202124;
    line-height: 1.45;
    margin: 0;
}
.gbp-card__detail {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 14px;
    color: #202124;
    line-height: 1.4;
}
.gbp-card__detail svg {
    width: 18px;
    height: 18px;
    color: #5f6368;
    stroke-width: 2;
    margin-top: 1px;
}
.gbp-card__detail strong {
    font-weight: 500;
}
.gbp-card__phone-link {
    color: #1a73e8;
    text-decoration: none;
}
.gbp-card__phone-link:hover {
    text-decoration: underline;
}
.gbp-card__hours-open {
    color: #137333;
    font-weight: 500;
}
.gbp-card__hours-caret {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-left: 2px;
}
/* Stack the GBP card under the intro content on narrower viewports. */
@media (max-width: 768px) {
    .gbp-card {
        margin-top: 1.5rem;
    }
}

/* ============================================================
   U1. CALLBACK INTRO — Small section-intro wrapper — Centered eyebrow + h2 + paragraph; max-width 640px
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-callback-intro {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.sh-page .sh-callback-intro .sh-eyebrow { display: block; margin-bottom: 0.5rem; }
.sh-page .sh-callback-intro h2 {
    margin: 0 0 0.5rem;
}
.sh-page .sh-callback-intro p {
    color: var(--sh-gray);
    margin: 0;
}

/* ============================================================
   D19. REVIEW TIPS — 4-card 'what to mention' mini-grid — 4 cards with icons + tip text
   Phase B fold-back 2026-05-15
   ============================================================ */
.sh-page .sh-review-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.sh-page .sh-review-tip-card {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--sh-shadow);
    border-top: 4px solid var(--sh-accent);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sh-page .sh-review-tip-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(58,170,154,0.12);
    color: var(--sh-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sh-page .sh-review-tip-icon i {
    width: 22px;
    height: 22px;
}
.sh-page .sh-review-tip-card p {
    font-family: var(--sh-font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--sh-gray-dark);
    margin: 0;
}

/* ============================================================
   V1. VIDEO EMBED — Responsive 16:9 iframe wrapper — Centered inner, optional sub-caption, framed video
   Promoted on 2026-05-26 (kickoff Session 1) from a page-local pair of about-prefixed and
   thanks-prefixed video blocks living in P-about-us and P-thank-you — byte-identical with
   documented naming-only divergence; consolidated under the generic .sh-video-embed-* prefix.
   Markup in both consumer files updated to match.
   ============================================================ */
.sh-page .sh-video-embed-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.sh-page .sh-video-embed-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--sh-gray);
    margin: 0.5rem auto 1.75rem;
    max-width: 640px;
}
.sh-page .sh-video-embed-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--sh-radius);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
    background: #000;
    border: 1px solid rgba(0,0,0,0.06);
}
.sh-page .sh-video-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================================
   S1. SPLASH PAGE — Self-contained design system — Gradient hero + animated icon + dust motes + credibility row + dual CTA
   Phase B fold-back 2026-05-15
   ============================================================ */
/* Splash-specific only — everything else inherited from theme */

/* Negative margin bleed — kills the Elementor section/column padding gap
   above, below, and on the sides. Adjust if your section padding differs. */
.sh-page.sh-splash-page {
    margin: -10px -10px -10px -10px;
}

@media (max-width: 1024px) {
    .sh-page.sh-splash-page { margin: -10px 0; }
}

.sh-page .sh-splash {
    background: linear-gradient(135deg, var(--sh-surface-warm) 0%, var(--sh-surface-cool) 100%);
    padding: 5rem 1.5rem;
    text-align: center;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.sh-page .sh-splash::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 180%;
    background: linear-gradient(135deg, rgba(42,66,111,0.04) 0%, rgba(151,29,19,0.04) 100%);
    transform: rotate(15deg);
    pointer-events: none;
}

.sh-page .sh-splash-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Animated hard-hat icon */
.sh-page .sh-splash-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.75rem;
    background: var(--sh-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-white);
    box-shadow: 0 10px 25px -5px rgba(151,29,19,0.35);
    position: relative;
    animation: sh-splash-shake 2.6s ease-in-out infinite;
}

.sh-page .sh-splash-icon svg { width: 44px; height: 44px; }

@keyframes sh-splash-shake {
    0%, 92%, 100% { transform: rotate(0deg); }
    94% { transform: rotate(-6deg); }
    96% { transform: rotate(5deg); }
    98% { transform: rotate(-3deg); }
}

/* Floating dust motes */
.sh-page .sh-splash-dust {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--sh-gray);
    border-radius: 50%;
    opacity: 0;
    animation: sh-splash-dust-rise 3s ease-out infinite;
}
.sh-page .sh-splash-dust:nth-child(1) { left: 30%; animation-delay: 0s; }
.sh-page .sh-splash-dust:nth-child(2) { left: 50%; animation-delay: 0.6s; width: 4px; height: 4px; }
.sh-page .sh-splash-dust:nth-child(3) { left: 65%; animation-delay: 1.2s; }
.sh-page .sh-splash-dust:nth-child(4) { left: 42%; animation-delay: 1.8s; width: 5px; height: 5px; }

@keyframes sh-splash-dust-rise {
    0%   { bottom: 0;     opacity: 0.6; transform: translateX(0); }
    100% { bottom: 110px; opacity: 0;   transform: translateX(15px); }
}

.sh-page .sh-splash-eyebrow {
    font-family: var(--sh-font-button);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sh-accent);
    margin-bottom: 1rem;
}

.sh-page .sh-splash h1 {
    font-family: var(--sh-font-heading);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    color: var(--sh-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

.sh-page .sh-splash h1 span {
    color: var(--sh-accent);
    display: inline-block;
}

.sh-page .sh-splash-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--sh-gray);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.sh-page .sh-splash-lead strong { color: var(--sh-gray-dark); }

/* Credibility badges */
.sh-page .sh-splash-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.sh-page .sh-splash-badge {
    background: var(--sh-white);
    border-radius: var(--sh-radius);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    box-shadow: var(--sh-shadow);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sh-gray-dark);
}

.sh-page .sh-splash-badge svg {
    width: 20px; height: 20px;
    color: var(--sh-accent);
    flex-shrink: 0;
}

.sh-page .sh-splash-badge.sh-splash-stars svg {
    color: var(--sh-star);
    fill: var(--sh-star);
    width: 16px; height: 16px;
}

.sh-page .sh-splash-stars-row {
    display: inline-flex;
    gap: 1px;
    margin-right: 0.25rem;
}

.sh-page .sh-splash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.sh-page .sh-splash-note {
    margin-top: 2.5rem;
    font-size: 0.875rem;
    color: var(--sh-gray);
    font-style: italic;
}

@media (max-width: 600px) {
    .sh-page .sh-splash         { padding: 3rem 1rem; }
    .sh-page .sh-splash-actions { flex-direction: column; align-items: stretch; }
    .sh-page .sh-splash-actions .sh-btn { width: 100%; }
    .sh-page .sh-splash-badge   { font-size: 0.875rem; padding: 0.75rem 1rem; }
}

/* ============================================================
   K1. POST (Long-form blog post archetype family) — extracted 2026-06-08
   The full 109-rule K1 family (K1.1 reading-progress, K1.2 sticky TOC,
   K1.3 TL;DR + stat strip, K1.5/9 figure wrapper, K1.6 cost cards,
   K1.7 pros/cons, K1.8 pullquote, K1.10 callouts, K1.11 before/after
   figure modifier, K1.12 decision matrix, K1.13 author cards + responsive)
   was originally promoted from P-blog-post.html on 2026-05-17 and lived
   here until 2026-06-08, when it was extracted to P-blog-post.css
   per the dedicated-stylesheet-per-page directive. Blog-post no longer
   participates in the canonical sheet — it self-loads its own CSS via
   a stylesheet link at the top of the page template. NOTE 2026-06-12:
   that file lives at PROJECT ROOT (not theme/ — theme/ is HTTP-denied
   by its .htaccess, so a linked stylesheet cannot live there).
   ============================================================ */

/* ============================================================
   RT. YELLOWSTONE BRAND ELEMENTS — rt-* component family
   Yellowstone brand-element fold-back 2026-06-12
   Folded in VERBATIM from the signed-off home-v2 render-test
   stylesheet (rt sheet at project root; that file stays in place
   untouched until the relocation phase). Element catalog + markup
   recipes: measurements/brand-elements-spec.md.
   All NEW element styling uses the rt- prefix only and never
   restyles sh-* classes. Mobile-first: base ≈390px, min-width
   queries promote to desktop.
   Consumers: theme/source/index.html (home rebuild 2026-06-12);
   header skin sub-section at the end of this banner section.
   ============================================================ */

/* rt-* design-token aliases (--charcoal/--crimson/--gold/--surface/...) are
   CONSUMED below but declared elsewhere: since 2026-08-01 they live in the
   brand-token stylesheet page.php inlines immediately BEFORE this file —
   client/theme/tokens.css, or theme/Default-Tokens.css
   when no brand is committed. They are declared there on ':root, .sh-page',
   derived from the brand --sh-* tokens, which is what gives the :root copy
   the header/footer rt-* chrome needs (topbar, nav dropdowns, mobile menu).
   (Until 2026-08-01 they were written into "STYLIZER REGION B" near the top
   of this file; that region is gone.)
   REMOVED 2026-07-01: the hardcoded ':root{}' copy that used to live here held
   the old Yellowstone render-test palette (#2E3033/#C3272E/#E0B252/...). Being
   later in source order, it silently overrode the Stylizer's layer and forced
   the header/topbar/rt chrome to the stale colors.
   DO NOT re-add a hardcoded copy here. The reason is now stronger, not weaker:
   the brand-token file is emitted BEFORE this one, so anything declared here
   wins over it — a copy here would override every committed brand forever. */

/* ---------- shared button + eyebrow ---------- */
.rt-btn{display:block;width:100%;text-align:center;background:var(--crimson);
  font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:14px 26px;border-radius:6px;text-decoration:none;margin:0 0 10px}
.sh-page .rt-btn,.sh-page .rt-btn:hover{color:#fff !important}
.rt-btn:hover{background:var(--crimson-d)}
.rt-btn--ghost{background:transparent;border:2px solid #fff}
.rt-btn--ghost:hover{background:rgba(255,255,255,.14)}
.rt-btn .lucide{width:16px;height:16px;vertical-align:-3px;margin-right:6px;display:inline-block}
@media(min-width:600px){
  .rt-btn{display:inline-block;width:auto;margin:0 12px 0 0}
}
.rt-eyebrow{display:inline-block;color:var(--crimson);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}
.rt-eyebrow--gold{color:var(--gold)}
.rt-center{display:block;text-align:center}

/* ---------- hero (photo bg + lead-form split) ---------- */
.rt-hero{position:relative;background:var(--charcoal-d);overflow:hidden}
.rt-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rt-hero__shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,29,31,.82) 0%,rgba(27,29,31,.62) 100%)}
.rt-hero__wrap{position:relative}
.rt-hero__grid{display:grid;grid-template-columns:1fr;gap:30px;padding:44px 0 52px}
.rt-hero__inner{color:var(--white);max-width:620px}
.sh-page .rt-hero h1{color:#fff !important;font-size:30px;line-height:1.12;margin:10px 0 14px}
.sh-page .rt-hero h1 em{color:var(--gold) !important;font-style:normal}
.rt-hero__inner p{color:rgba(255,255,255,.88);font-size:16px;margin-bottom:22px}
.rt-hero__actions{margin-top:4px}
@media(min-width:700px){
  .rt-hero__shade{background:linear-gradient(90deg,rgba(27,29,31,.85) 0%,rgba(27,29,31,.6) 55%,rgba(27,29,31,.3) 100%)}
  .sh-page .rt-hero h1{font-size:40px}
}
@media(min-width:960px){
  .rt-hero__grid{grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding:72px 0}
}

/* ---------- trust badge strip ---------- */
.rt-badges{background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:20px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px;
  justify-items:center;align-items:start}
.rt-badge{text-align:center;width:100%;max-width:120px}
.rt-badge img{height:64px;width:64px;object-fit:contain;display:block;margin:0 auto}
.rt-badge small{display:block;font-size:10px;color:var(--gray);margin-top:6px}
.rt-badge__missing{height:64px;width:64px;margin:0 auto;border:2px dashed var(--crimson);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--crimson);font-size:9px;font-weight:700;text-align:center;padding:6px}
@media(min-width:700px){
  .rt-badges{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;padding:28px}
  .rt-badge{width:120px}
  .rt-badge img,.rt-badge__missing{height:88px;width:88px}
  .rt-badge__missing{font-size:10px;padding:8px}
}

/* ---------- 4-point value props strip ---------- */
.rt-vprops{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rt-vprop{background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:18px 12px;text-align:center}
.rt-vprop .lucide{width:28px;height:28px;color:var(--crimson);margin:0 auto 8px;display:block}
.rt-vprop b{display:block;font-size:13px;color:var(--charcoal-d);text-transform:uppercase;
  letter-spacing:.03em;line-height:1.3}
.rt-vprop small{display:block;font-size:11px;color:var(--gray);margin-top:4px}
@media(min-width:960px){
  .rt-vprops{grid-template-columns:repeat(4,1fr);gap:18px}
  .rt-vprop{padding:24px 16px}
  .rt-vprop b{font-size:14px}
}

/* ---------- about block (text + visual stack) ---------- */
.rt-about{display:grid;grid-template-columns:1fr;gap:32px}
.rt-about__stack{display:flex;flex-direction:column;gap:16px}
.rt-about__logo{background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:22px 26px}
.rt-about__logo img{display:block;width:100%;max-width:280px;height:64px;object-fit:contain;margin:0 auto}
.rt-about__badges{background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:16px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.rt-about__badges img{height:64px;width:64px;object-fit:contain}
@media(min-width:960px){
  .rt-about{grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
}

/* ---------- topo texture cards ---------- */
.rt-topo{position:relative;border-radius:14px;overflow:hidden;background:var(--charcoal);margin-bottom:18px}
.rt-topo .rt-topo__svg{position:absolute;inset:0;width:100%;height:100%}
.rt-topo__inner{position:relative;padding:28px 22px;max-width:560px}
.sh-page .rt-topo h3{color:#fff !important;font-size:22px;margin:10px 0 8px}
.rt-topo p{color:rgba(255,255,255,.8);font-size:14px;margin-bottom:18px}
.rt-topo--light{background:#EBEBE8;border:1px solid var(--border)}
.sh-page .rt-topo--light h3{color:var(--charcoal-d) !important}
.rt-topo--light p{color:var(--gray)}
.rt-about__call{margin-bottom:0}
@media(min-width:700px){
  .rt-topo__inner{padding:44px 48px}
  .sh-page .rt-topo h3{font-size:26px}
  .rt-topo--light .rt-topo__inner{padding:34px 48px}
}

/* ---------- subtle section gradients (2026-06-11) ----------
   background-image layers under the utility's background-color
   !important, so the cool sections get a faint top/bottom shade
   without fighting specificity */
.sh-page .sh-bg-cool{
  background-image:linear-gradient(180deg,rgba(46,48,51,.04) 0%,rgba(46,48,51,0) 22%,rgba(46,48,51,0) 72%,rgba(46,48,51,.05) 100%)}

/* ---------- crimson double rules — RETIRED 2026-06-11 per Stevie
   (read as "thick white bars" between sections); markup removed from
   home-v2. Rule kept for reference, unused. ---------- */
.rt-rules{display:none}

/* ---------- dark topo band (project gallery) ----------
   2026-06-11 — angled clip-path edges removed per Stevie ("kind of
   weird"); band is straight-edged with a subtle charcoal gradient.
   Section's inline --topo-bg must be transparent for the gradient to
   show through the planted topo svg. */
.rt-band{position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--sh-primary) 0%,var(--sh-primary) 45%,var(--sh-primary-dark) 100%); /* tokenized 2026-07-01 (was hardcoded Yellowstone charcoals) */
  padding:58px 0 66px}
.rt-band .rt-topo__svg{position:absolute;inset:0;width:100%;height:100%}
.rt-band__inner{position:relative}
.rt-band__head{text-align:center;margin-bottom:26px}
.rt-band__head .rt-peak{margin:0 auto 4px}
.sh-page .rt-band h2{color:#fff !important;font-size:26px;margin:8px 0 0}
.rt-band__sub{color:rgba(255,255,255,.78);font-size:14px;max-width:560px;margin:10px auto 0;text-align:center}
@media(min-width:960px){
  .rt-band{padding:84px 0 92px}
  .sh-page .rt-band h2{font-size:34px}
}

/* ---------- roof-peak accent mark ---------- */
.rt-peak{margin-bottom:4px;color:#fff}
.rt-topo--light .rt-peak{color:var(--charcoal-d)}

/* ---------- gallery / generic photo cards ---------- */
.rt-grid{display:grid;gap:14px;grid-template-columns:1fr}
.rt-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.rt-card__ph{position:relative;aspect-ratio:4/3;background:var(--surface)}
.rt-card__ph--wide{aspect-ratio:16/9}
.rt-card__ph--sq{aspect-ratio:1/1}
.rt-card__ph img{width:100%;height:100%;object-fit:cover;display:block}
.rt-card__tag{position:absolute;top:10px;left:10px;background:var(--charcoal);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px}
.rt-card__tag--alert{background:var(--crimson)}
.rt-card__meta{padding:10px 12px 12px}
.rt-card__meta b{font-size:13px;display:block;color:var(--charcoal-d)}
.rt-card__meta p{font-size:12.5px;color:var(--gray);margin:6px 0 8px}
.sh-page .rt-card__meta a{color:var(--crimson);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
/* gallery: 2-up mobile, 3-up desktop */
.rt-grid--gal{grid-template-columns:repeat(2,1fr);gap:10px}
.rt-grid--gal .rt-card__meta{padding:8px 10px 10px}
.rt-grid--gal .rt-card__meta b{font-size:11.5px}
.rt-grid--gal .rt-card__tag{font-size:9px;padding:3px 7px}
@media(min-width:600px){.rt-grid--3,.rt-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .rt-grid{gap:18px}
  .rt-grid--3{grid-template-columns:repeat(3,1fr)}
  .rt-grid--4{grid-template-columns:repeat(4,1fr)}
  .rt-grid--gal{grid-template-columns:repeat(3,1fr);gap:18px}
  .rt-grid--gal .rt-card__meta b{font-size:13px}
}

/* ---------- charcoal section for hanger/mailer row ---------- */
.rt-dark-sec{background:linear-gradient(170deg,var(--sh-primary-dark) 0%,var(--sh-primary) 100%);padding:56px 0} /* tokenized 2026-07-01 to brand --sh-primary(-dark) (was hardcoded Yellowstone charcoal+tan); Stylizer Region B also !important-patches this at runtime */
.rt-dark-sec__head{text-align:center;margin-bottom:30px}
.sh-page .rt-dark-sec h2{color:#fff !important;font-size:24px;margin:8px 0 0}
.rt-dark-sec__sub{color:rgba(255,255,255,.75);font-size:14px;max-width:560px;margin:10px auto 0;text-align:center}
@media(min-width:960px){
  .rt-dark-sec{padding:80px 0}
  .sh-page .rt-dark-sec h2{font-size:32px}
}

/* ---------- door-hanger "5 SIGNS" panel ---------- */
.rt-hanger-row{display:flex;flex-direction:column;align-items:center;gap:26px}
.rt-hanger{position:relative;width:300px;max-width:100%;border-radius:18px;background:var(--charcoal);
  padding:74px 22px 22px;box-shadow:0 12px 30px rgba(27,29,31,.25);overflow:hidden;
  /* 2026-06-11 — knob is a REAL punched hole: mask cuts through the card
     bg + topo so the section behind shows (circle matches knob: 44px at
     top:16px → center 50% / 38px) */
  -webkit-mask:radial-gradient(circle 22px at 50% 38px,transparent 21.5px,#000 22.5px);
  mask:radial-gradient(circle 22px at 50% 38px,transparent 21.5px,#000 22.5px)}
.rt-hanger--ink{background:var(--charcoal-d)}
.rt-hanger .rt-topo__svg{position:absolute;inset:0;width:100%;height:100%}
/* knob ring: transparent center (hole shows through), subtle 1px inset
   shadow shifted right for die-cut depth */
.rt-hanger__knob{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:44px;height:44px;
  border-radius:50%;background:transparent;
  box-shadow:inset 1px 0 2px rgba(0,0,0,.55),inset -1px 0 1px rgba(255,255,255,.05);z-index:2}
.rt-hanger__head{position:relative;display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px}
.rt-hanger__five{font-size:64px;font-weight:900;color:var(--crimson);line-height:1}
.rt-hanger__title{color:#fff;font-weight:900;font-size:26px;letter-spacing:.04em}
.rt-hanger__title small{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.75);
  text-transform:uppercase;letter-spacing:.08em}
.rt-hanger__signs{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rt-hanger__signs li{display:flex;align-items:center;gap:12px;background:#3A3D42;
  border-left:4px solid var(--crimson);color:#fff;font-size:13px;font-weight:600;
  padding:10px 12px;border-radius:0 8px 8px 0} /* solid bg 2026-06-11 — translucent stubs let the topo read as sitting on top */
.rt-hanger__signs li span{background:var(--crimson);color:#fff;font-weight:900;width:26px;height:26px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rt-hanger__foot{position:relative;color:rgba(255,255,255,.85);font-size:12px;text-align:center;margin-top:16px}
.rt-hanger__foot b{color:var(--gold)}
@media(min-width:700px){.rt-hanger-row{flex-direction:row;justify-content:center;flex-wrap:wrap;align-items:stretch}}

/* ---------- red-border "Roofing Done Right" mailer card ---------- */
.rt-mailer{position:relative;background:var(--charcoal);border:3px solid var(--crimson);
  border-radius:12px;padding:20px 16px;z-index:1}
.rt-mailer__logo{background:var(--white);border-radius:8px;padding:6px 14px;margin:0 auto 14px;max-width:230px}
.rt-mailer__logo img{height:40px;width:100%;object-fit:contain;display:block}
.rt-mailer__kicker{color:rgba(255,255,255,.85);font-size:12.5px;text-align:center}
.rt-mailer__tag{color:#fff;font-weight:900;font-size:21px;text-align:center;margin:4px 0 14px}
.rt-mailer__bullets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.rt-mailer__bullets li{color:#fff;font-size:13px;font-weight:600;padding-left:22px;position:relative}
.rt-mailer__bullets li::before{content:'\2713';position:absolute;left:0;color:var(--gold);font-weight:900}
.rt-mailer__bullets em{color:rgba(255,255,255,.6);font-style:normal;font-size:11px}
.rt-mailer__cta{display:block;width:100%;text-align:center;margin:0} /* stays block at all widths */
@media(min-width:600px){.rt-btn.rt-mailer__cta{display:block;width:100%;margin:0}}

/* ---------- Golden Pledge feature (warm/tan light-topo band) ----------
   gradient shows through the topo svg only if the section's inline
   --topo-bg is transparent */
.rt-gp{position:relative;overflow:hidden;padding:54px 0;
  background:linear-gradient(160deg,#FAF5EA 0%,#F6F0E2 45%,#EFE6CF 100%)}
.rt-gp .rt-topo__svg{position:absolute;inset:0;width:100%;height:100%}
.rt-gp__inner{position:relative;display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.rt-gp__badge{width:180px;max-width:60%;margin:0 auto;display:block}
.sh-page .rt-gp h2{font-size:24px;margin:8px 0 12px}
.rt-gp__copy p{font-size:14.5px;color:var(--gray);margin-bottom:14px}
.rt-gp__list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.rt-gp__list li{font-size:14px;font-weight:600;color:var(--charcoal-d);padding-left:24px;position:relative}
.rt-gp__list li::before{content:'\2713';position:absolute;left:0;color:var(--gold);font-weight:900}
.rt-gp__list em{color:var(--gray);font-style:normal;font-size:12px}
@media(min-width:960px){
  .rt-gp{padding:84px 0}
  .rt-gp__inner{grid-template-columns:240px 1fr;gap:56px}
  .rt-gp__badge{width:240px;max-width:100%}
  .sh-page .rt-gp h2{font-size:30px}
}

/* ---------- services grid cards ---------- */
.rt-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.rt-svc{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.rt-svc__ph{aspect-ratio:16/9;background:var(--surface)}
.rt-svc__ph img{width:100%;height:100%;object-fit:cover;display:block}
.rt-svc__bar{background:var(--crimson);color:#fff;font-weight:700;font-size:12px;text-align:center;padding:9px 6px}
@media(min-width:900px){
  .rt-svc-grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .rt-svc__bar{font-size:13px}
}

/* ---------- red CTA band ---------- */
.rt-redcta{background:linear-gradient(150deg,var(--sh-accent-bright) 0%,var(--sh-accent) 40%,var(--sh-accent-dark) 100%);padding:46px 0;text-align:center} /* tokenized 2026-07-01 (was hardcoded Yellowstone reds); mirrors the Stylizer Region B !important patch */
.sh-page .rt-redcta h2{color:#fff !important;font-size:22px;max-width:760px;margin:0 auto 22px}
.rt-redcta__fine{color:rgba(255,255,255,.75);font-size:11.5px;max-width:520px;margin:16px auto 0}
.rt-redcta .rt-btn--ghost:hover{background:rgba(255,255,255,.16)}
@media(min-width:960px){
  .rt-redcta{padding:64px 0}
  .sh-page .rt-redcta h2{font-size:30px}
}

/* ---------- red CTA band: context-aware buttons ----------
   2026-06-12 — issue-20260612-144342-p-services
   The stock primary .rt-btn is solid crimson (--crimson), which is the
   same hue as the .rt-redcta gradient, so on the fold-back pages that
   pair a primary + ghost button inside the band (services etc.) the
   primary rendered nearly invisible — it read as a bare text link and
   made the whole section look unstyled. Owner direction: don't touch
   the band background; make the BUTTON account for the background it
   sits on. Inside .rt-redcta only, the primary inverts: white fill,
   crimson text. The :not(.rt-btn--ghost) guard leaves the ghost
   (white outline) exactly as designed, and the .rt-redcta scope leaves
   every other rt-btn context (rt-hero, rt-dark-sec/rt-about call card,
   rt-mailer, rt-gp, light sections) untouched. The .sh-page rule
   exists to out-specify the global
   `.sh-page .rt-btn{color:#fff !important}` text lock.              */
.rt-redcta .rt-btn:not(.rt-btn--ghost){background:#fff;color:var(--crimson)}
.rt-redcta .rt-btn:not(.rt-btn--ghost):hover{background:rgba(255,255,255,.86)}
.sh-page .rt-redcta .rt-btn:not(.rt-btn--ghost),
.sh-page .rt-redcta .rt-btn:not(.rt-btn--ghost):hover{color:var(--crimson) !important}
/* Same issue, secondary nit: rt-eyebrow was designed for rt-hero where
   the following heading carries a 10px top margin; .rt-redcta h2 has
   margin-top 0, so the gold eyebrow sat flush against the headline.
   Restore the hero-pattern breathing room when an eyebrow leads. */
.sh-page .rt-redcta .rt-eyebrow + h2{margin-top:10px}

/* ---------- service areas (city list + map) ---------- */
.rt-areas{display:grid;grid-template-columns:1fr;gap:30px}
.rt-areas__cities{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:10px}
.rt-areas__cities li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--charcoal-d)}
.rt-areas__cities .lucide{width:16px;height:16px;color:var(--crimson);flex-shrink:0}
.rt-areas__counties{font-size:12.5px;color:var(--gray);margin:0 0 20px}
.rt-areas__map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--surface)}
.rt-areas__map iframe{display:block;width:100%;height:300px;border:0}
@media(min-width:960px){
  .rt-areas{grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
  .rt-areas__map iframe{height:380px}
}

/* ------------------------------------------------------------
   SUB-SECTION: WMR-ECHO HEADER SKIN — component CSS
   Yellowstone brand-element fold-back 2026-06-12
   Promoted from sub-blocks 5 & 6 of the render-test harness
   header-unify <style> block (home-v2-render-test.html). These
   are COMPONENT styles (topbar CTA cluster, rotator overflow /
   mobile fixes, light dropdown + mobile-menu surfaces, topo-on-
   dropdowns hosting), not harness token rebinds — the token
   rebinds (sub-blocks 1–4) stay harness-side in index.php (WP:
   the priority-5 Custom Code :root entry).
   ------------------------------------------------------------ */

  /* 5. RENDER-TEST 2026-06-11 — WMR-echo header. The main bar is now
        white, so neutralize the dark-bar assumptions that aren't
        tokenized, and turn the USP rotator strip into a WMR-style black
        utility topbar with a FREE ESTIMATES phone CTA on the right. */

  /* Dropdown panel: teal-tinted borders + heavy shadow read wrong on a
     light panel. */
  .sh-header-dropdown,
  .sh-header-dropdown::before {
    border-color: rgba(0,0,0,0.08) !important;
  }
  .sh-header-dropdown { box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important; }
  .sh-header-dropdown-link:hover { background: rgba(195,39,46,0.07) !important; }

  /* Mobile menu: white bg now — flip the white hairlines to dark. */
  .sh-header-mobile-menu { border-top-color: rgba(0,0,0,0.08) !important; }
  .sh-header-mobile-link { border-bottom-color: rgba(0,0,0,0.08) !important; }

  /* Main-bar CTA moves to the topbar (WMR pattern) — hide here. */
  .sh-header-cta { display: none !important; }

  /* Topbar layout: rotator track left/center, CTA cluster right. */
  .sh-usp-rotator-bar { justify-content: space-between; padding: 0 1.5rem; gap: 1rem; height: 44px; }
  .sh-usp-rotator-track { flex: 1; min-width: 0; height: 44px; }
  .sh-topbar-cta { display: flex; align-items: center; gap: 0.875rem; flex-shrink: 0; }
  .sh-topbar-tag {
    font-family: var(--sh-header-font, 'Inter'), system-ui, sans-serif; /* SPR PATCH 2026-08-11 */
    font-style: italic; font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #fff; white-space: nowrap;
  }
  .sh-topbar-phone {
    display: inline-flex; align-items: center;
    background: var(--sh-accent); color: #fff;
    font-family: var(--sh-header-font, 'Inter'), system-ui, sans-serif; /* SPR PATCH 2026-08-11 */
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em;
    padding: 0.45rem 1rem; border-radius: 4px;
    text-decoration: none; white-space: nowrap;
    transition: background 0.2s ease;
  }
  .sh-topbar-phone:hover { background: var(--sh-accent-dark); }

  /* SPR PATCH 2026-08-13 — ICON SIZING FOR THE HEADER LINKS.
     These three are anchors, not .sh-btn, so the sitewide
     `.sh-btn svg { width:18px; height:18px }` never reached them. The source
     put no icon in any of them, so the gap went unnoticed until the widgets
     gained an icon control — at which point Lucide's untouched 24px SVG
     rendered next to 0.75rem type and sat flush against it.

     Sized in em rather than to .sh-btn's fixed 18px: the top bar is 12px text
     and an 18px icon looks pasted on, while the mobile CTA is 14px.

     NO :has() — `gap` only ever applies BETWEEN flex items, so on a label-only
     link it does nothing at all. The plain rule is inert in the default case
     and needs no support caveat; 02-CSS.html has zero :has() and this is not
     the place to introduce the first one.

     .sh-header-mobile-cta is display:block in the source, so it gets flex here
     — centred, matching the text-align:center it already sets. */
  .sh-topbar-phone svg,
  .sh-header-cta svg,
  .sh-header-mobile-cta svg {
    width: 1em; height: 1em; flex-shrink: 0;
  }
  .sh-topbar-phone,
  .sh-header-cta { gap: 0.45rem; }
  .sh-header-mobile-cta {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  }

  /* MOBILE FIX 2026-06-11 — rotator items are absolutely positioned and
     nowrap, so on narrow viewports they spilled over the phone CTA.
     Clip the track; below 640px drop the rotator entirely and center a
     static "Free Estimates!" + phone cluster (WMR pattern). */
  .sh-usp-rotator-track { overflow: hidden; }
  @media (max-width: 640px) {
    .sh-usp-rotator-track { display: none; }
    .sh-usp-rotator-bar { justify-content: center; padding: 0 1rem; }
  }

  /* MOBILE FIX 2026-06-11 — open menu was capped at max-height:600px,
     which clips the services sub-list + CTA on phones. */
  .sh-header-mobile-menu.is-open {
    max-height: 80vh;
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
  }

  /* 6. RENDER-TEST 2026-06-11 — topo texture inside nav dropdowns and
        the mobile menu panel (planted by the topo planter JS via the
        rt-topo-host--light class; svg sits behind the links). */
  .sh-header-dropdown,
  .sh-header-mobile-menu {
    --topo-bg: transparent;
    --topo-line: #E2DFD7;
    --topo-stroke-w: 2.2;
  }
  /* dropdown is already position:absolute; only the menu panel needs
     a positioning context added */
  .sh-header-mobile-menu { position: relative; }
  .sh-header-dropdown .rt-topo__svg,
  .sh-header-mobile-menu .rt-topo__svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border-radius: inherit;
    pointer-events: none;
  }
  .sh-header-dropdown li,
  .sh-header-mobile-menu > a { position: relative; z-index: 1; }

/* DESIGN-ISSUE FIX 2026-06-12 — issue-20260612-172610-p-thank-you
   P-thank-you confirmation hero: owner drawing moves the eyebrow + h1
   block up beside the badge (badge left, eyebrow/heading right,
   vertically in line) instead of stacked below it. (A same-day
   flex-start + row-on-mobile refinement was tried and REVERTED per
   Stevie — center alignment with mobile stack-back is the keeper.)
   New headrow classes used ONLY in P-thank-you.html
   markup — the shared A4 base (.sh-thanks-hero, also consumed by
   P-404 / P-review-thank-you) is untouched. */
.sh-page .sh-thanks-hero-headrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.sh-page .sh-thanks-hero-headrow .sh-thanks-hero-icon {
  flex-shrink: 0;
  margin-bottom: 0; /* A4 base sets 1.5rem for the stacked layout */
}
.sh-page .sh-thanks-hero-headrow h1 {
  margin: 0; /* bottom spacing moves to the headrow wrapper */
}
@media (max-width: 599px) {
  .sh-page .sh-thanks-hero-headrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* DESIGN-ISSUE FIX 2026-06-12 — issue-20260612-191625-home-source-index-html
   Footer rework per owner drawing: Areas Served collapses to ONE column
   (the two-UL sub2 wrapper was removed in G-footer — counties now flow
   under cities), and the freed width goes to the map column so the embed
   reads as a wide rectangle (blue shape in the drawing). Social icon row
   (FB / IG / LinkedIn "#" stubs + auto-omitted Google) sits under the
   Social Links heading — icons added in 03-JS, stub URLs in 01-JSON.
   Overrides the canonical footer grid (02-CSS § footer) — scoped, dated,
   does not touch the base rules. */
/* 2026-06-16 · issue-20260615-132300-home-source-index-html (clarified by
   owner: SITEWIDE in the footer, MOBILE specifically): this 3-column
   footer-grid override (added 2026-06-12 for the wide-map rework) was
   UNCONDITIONAL and is the LAST footer-grid rule in the cascade, so it
   clobbered the base responsive collapses at
   `@media(max-width:1024px){…1fr 1fr}` and `@media(max-width:768px){…1fr}`.
   Result: the footer stayed pinned at three columns on phones, squeezing
   "Services Offered" / "Areas Served" so single-line items like
   "Roof Replacement" and "Missoula, MT" wrapped needlessly. Fix: gate the
   3-column desktop layout behind min-width:1025px so the base mobile rules
   (2-up ≤1024px, 1-up ≤768px) take over on narrow screens and items get
   their full column width back. The desktop wide-map look is preserved. */
@media (min-width: 1025px) {
  /* 2026-07-01 footer layout: Services (normal) · Areas Served (wider) · Social+Map. */
  .sh-page .sh-site-footer-grid { grid-template-columns: 1fr 1.5fr 1.4fr; }
}
.sh-page .sh-site-footer-map iframe { height: 300px; }

/* 2026-06-16 · issue-20260612-202219-global-footer: footer social icons
   read blue/gray (Facebook #1877F2, LinkedIn #0A66C2, multicolor Google)
   against the dark footer — owner wants them all white/gray, one
   monochrome set, like the already-white Instagram glyph. The icon SVGs
   are hydrated by 03-JS with hardcoded brand-color `fill="#…"` presentation
   attributes; an author CSS `fill` rule out-ranks a presentation attribute,
   so forcing fill here recolors every glyph (path + circle) without
   touching the JS. Coloring stays CSS in 02-CSS per footer doctrine. */
.sh-page .sh-site-footer-social svg path,
.sh-page .sh-site-footer-social svg circle { fill: var(--sh-white); }
.sh-page .sh-site-footer-social:hover svg path,
.sh-page .sh-site-footer-social:hover svg circle { fill: var(--sh-white); }

/* 2026-06-16 · issue-20260612-204136-p-scheduling: owner wants the
   calendar icon on the "Open the Scheduler" button (the .sh-scheduling-book
   primary button) grown to roughly the size of the green square he drew
   around it — that square reads as ~the height of the two-line button text
   block. Sitewide .sh-btn svg is locked to 18px; this scoped override
   bumps ONLY this button's icon to 2em (≈34px). The button is a centered
   flex row (align-items:center, gap, justify-content:center) and its label
   already wraps to two lines (~44px tall), so a 2em icon fits inside that
   existing text-block height: it does NOT force the button taller and does
   NOT shift the text — the gap + center alignment keep the label beside it.
   flex-shrink:0 stops the icon being squeezed if the label rewraps. Scoped
   to .sh-scheduling-book so no other button icon sitewide is affected. */
.sh-page .sh-scheduling-book .sh-btn svg {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
}

/* ============================================================
   RT. MENU-WIRE — live header + footer from menus.json  2026-07-01
   Minimal styles for item TYPES that had no existing rule. Nav links,
   dropdown links, dropdown panels, mobile links/subs and footer lists
   already have full styling above — these only cover: pinned:"right",
   non-link headings (nav/dropdown/mobile/footer), and dividers
   (dropdown/mobile/footer). All reuse existing --sh-* / --sh-header-*
   tokens; no new colors introduced.
   ============================================================ */

  /* pinned:"right" — push this item (and anything after it) to the right
     end of the centered .sh-header-nav flex row. Contact is the pinned one. */
  .sh-header-nav-item--right { margin-left: auto; }

  /* heading type: a non-link label styled like a nav/dropdown link but not
     interactive (default cursor, no hover surface). */
  .sh-header-nav-heading { cursor: default; }
  .sh-header-nav-heading:hover { background: transparent; color: var(--sh-header-text-local); }
  .sh-header-dropdown-heading { cursor: default; font-weight: 700; }
  .sh-header-dropdown-heading:hover { background: transparent; color: var(--sh-header-text-local); }

  /* divider type inside a dropdown — a thin separator rule. */
  .sh-header-dropdown-divider {
    list-style: none; height: 0;
    margin: 0.375rem 0.25rem;
    border-top: 1px solid rgba(0,0,0,0.10);
  }

  /* mobile: heading (non-link) + divider rule. */
  .sh-header-mobile-heading { cursor: default; }
  .sh-header-mobile-heading:hover { color: var(--sh-header-text-local); }
  .sh-header-mobile-divider {
    height: 0; margin: 0.5rem 0;
    border-top: 1px solid rgba(0,0,0,0.10);
  }

  /* footer: heading sub-label (reuses the footer sublabel look) + divider. */
  .sh-page .sh-site-footer-menu-heading {
    list-style: none; margin: 0.75rem 0 0.25rem;
    font-family: var(--sh-font-button) !important;
    font-weight: 700 !important; font-size: 0.875rem !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    color: var(--sh-white) !important;
  }
  .sh-page .sh-site-footer-divider {
    list-style: none; height: 0;
    margin: 0.6rem 0;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  /* footer: nested sub-item (one level). Indent only — inherits the footer
     link look; no new colors. (2026-07-01 footer-nesting) */
  .sh-page .sh-site-footer-subitem { padding-left: 1rem; }

  /* spacer type — a blank vertical gap (no rule), mirrors divider but empty.
     (2026-07-01) */
  .sh-header-dropdown-spacer { list-style: none; height: 0.5rem; margin: 0; }
  .sh-header-mobile-spacer { height: 0.75rem; }
  .sh-page .sh-site-footer-spacer { list-style: none; height: 0.75rem; margin: 0; }

/* ============================================================
   END RT. YELLOWSTONE BRAND ELEMENTS
   Yellowstone brand-element fold-back 2026-06-12
   ============================================================ */

/* ============================================================
   SR-SHIELD. STRONKREVIEWS / GBP-MIRROR PROTECTION  (2026-07-02)
   The BASE RESET's .sh-page !important rules (h1–h4 → heading font,
   800, UPPERCASE, navy; a → color:inherit + accent :hover) flatten
   the Google-mirror components, which style at plain specificity ON
   PURPOSE — StronkREVIEWS + the GBP card are the sanctioned exception
   to theme styling and must look like Google, not like the theme.
   This section re-asserts their intended values with matching
   !important: the 2026-05-27 engine-cascade fix above, done
   comprehensively. If any stronk-* / gbp-* element ever shows theme
   styling again, EXTEND THIS SECTION — never edit the locked engine.
   ============================================================ */

/* GBP card — the business-name <h3> gets hit by the .sh-page h3 reset;
   restore Google's quiet type (values verbatim from .gbp-card__name). */
.sh-page .gbp-card__name {
    font-family: 'Roboto', -apple-system, system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #202124 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}

/* GBP card links — Google blue, hover stays blue (underline only);
   .sh-page a { color:inherit } + the accent :hover were stealing these. */
.sh-page a.gbp-card__rating-count,
.sh-page a.gbp-card__rating-count:hover,
.sh-page a.gbp-card__phone-link,
.sh-page a.gbp-card__phone-link:hover,
.sh-page a.gbp-card__action,
.sh-page a.gbp-card__action:hover {
    color: #1a73e8 !important;
    text-transform: none !important;
}

/* StronkREVIEWS sidebar CTA — white-on-Google-blue. The sidebar mounts
   on <body> (outside .sh-page) so it's normally safe; shielded anyway
   in case a future build ever inlines it inside the page wrapper. */
.sh-page a.stronk-sidebar__cta,
.sh-page a.stronk-sidebar__cta:hover { color: #FFFFFF !important; }