/* ==============================================================================
   WATER HEATING (COMBINED) — PAGE-SPECIFIC STYLES (Layer 3)
   ==============================================================================

   Page-specific styles for the Water Heating hub page (combines PV solar
   water heating, inverter heat pumps, pool heating, and the water side of
   underfloor heating).

   The source CSS was unusually dense — 425 page-specific rules in a single
   compact <style> block, organised by section with comment markers. Less
   verbose than the multi-block pattern used on the heating-template pages
   (Underfloor v5, Carbon Fibre v6, Perlite v2) but covers more sections
   because this is a 4-in-1 hub page.

   WORDPRESS PLACEMENT
   -------------------
   wp-content/themes/synergy/assets/css/pages/water-heating.css

   ENQUEUE (in functions.php):

       if ( is_page( 'water-heating' ) ) {
           wp_enqueue_style(
               'synergy-water-heating',
               get_template_directory_uri() . '/assets/css/pages/water-heating.css',
               array( 'synergy-foundation' ),
               filemtime( get_template_directory() . '/assets/css/pages/water-heating.css' )
           );
       }

   STRUCTURE
   ---------
   Sections covered:
     - Page hero (rotating background, 6 images, currently Unsplash)
     - The problem (load shedding + electric geysers)
     - Choose your application (entry point cards: residential / commercial / pool / UFH)
     - PV water heating explainer
     - Heat pump explainer
     - Residential deep dive
     - Commercial deep dive (lodges, hotels, schools)
     - Pool deep dive
     - Underfloor deep dive
     - Comparison table
     - Why Synergy
     - FAQ accordions (most extensive of any page)
     - Testimonials
     - Closing CTA + quote form

   PAGE-SPECIFIC COMPONENTS (Layer 3)
   ----------------------------------
     - .application-chooser    (entry-point card grid: 4 use cases)
     - .deep-dive-section      (per-use-case explainer blocks)
     - .comparison-matrix      (4-column comparison: PV vs heat pump vs gas vs electric)
     - .step-flow              (HowTo step diagrams for PV and heat pump)

   LAYER 2 CANDIDATES (used across 13+ pages now)
   ----------------------------------------------
     - .page-hero, .trust-bar
     - .section, .section-light
     - .closing-cta, .faq, .faq-list

   CI COMPLIANCE
   -------------
   All colours updated to CI specification on 12 May 2026.
   This page had the most CI replacements of any page (82) — reflecting
   its size (4 use-case sections) and the volume of decorative colour
   tokens it used.

   ============================================================================== */

/* ============================================
       1. DESIGN TOKENS
       ============================================ */

/* ============================================
       2. RESET / BASE
       ============================================ */

h2 strong { color: var(--brand); font-weight: 700; }

p:last-child { margin-bottom: 0; }

/* ============================================
       3. UTILITIES
       ============================================ */

.section { padding: 80px 0; }

.section-light { background: var(--light-bg); }

.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }

.lede { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 760px; margin: 0 auto 36px; }

.section-head { text-align: center; margin-bottom: 50px; }

.section-head h2 { margin-bottom: 16px; }

/* Two-col intro pattern (Section 2) */

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: start; }

/* Summary-lift block (GEO-quotable) */

.summary-lift { background: #fafbf6; border-left: 4px solid var(--brand); padding: 18px 22px; border-radius: 0 8px 8px 0; margin-bottom: 22px; font-size: 15px; color: var(--ink); box-shadow: 0 2px 8px rgba(45,57,64,0.04); }

.summary-lift strong { color: var(--brand-dark); }

/* Trust pills */

.trust-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.trust-pill { display: inline-block; background: rgba(167, 190, 57, 0.1); border: 1px solid rgba(167, 190, 57, 0.3); color: var(--brand-dark); padding: 6px 14px; border-radius: 30px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

/* ============================================
       4. BUTTONS
       ============================================ */

.btn-hero { display: inline-block; background: var(--brand); color: #fff; border: 2px solid var(--brand); padding: 14px 32px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; font-size: 14px; transition: all 0.2s; }

.btn-hero:hover { background: #fff; color: var(--brand); }

.btn-hero-secondary { display: inline-block; background: transparent; color: #fff; border: 2px solid #fff; padding: 14px 32px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; font-size: 14px; transition: all 0.2s; margin-left: 12px; }

.btn-hero-secondary:hover { background: #fff; color: var(--brand-dark); }

@media (max-width: 600px) { .btn-hero-secondary { margin-left: 0; margin-top: 12px; } }

/* ============================================
       5. SECTION 1 — HERO + ALSO-FOR + TRUST BAR
       ============================================ */

.page-hero { position: relative; background: var(--ink); color: #fff; padding: 90px 0 100px; overflow: hidden; isolation: isolate; }

.hero-bg { position: absolute; inset: 0; opacity: 0; z-index: 0; animation: hero-rotate 36s infinite; will-change: opacity; }

.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, right center); display: block; }

.hero-bg-1 { animation-delay: 0s; }

.hero-bg-2 { animation-delay: -6s; }

.hero-bg-3 { animation-delay: -12s; }

.hero-bg-4 { animation-delay: -18s; }

.hero-bg-5 { animation-delay: -24s; }

.hero-bg-6 { animation-delay: -30s; }

@keyframes hero-rotate { 0% { opacity: 0; } 3% { opacity: 1; } 13% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }

.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(167, 190, 57, 0.92) 0%, rgba(142, 162, 48, 0.78) 40%, rgba(45, 57, 64, 0.55) 100%); z-index: 1; pointer-events: none; }

.page-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 30px; }

@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } .hero-bg-1 { opacity: 1; } }

.page-hero h1 { color: #fff; max-width: 820px; margin-bottom: 18px; }

.page-hero h1 strong { color: var(--accent-warn); font-weight: 700; }

.page-hero .hero-lede { max-width: 800px; font-size: 16px; line-height: 1.7; margin-bottom: 32px; color: rgba(255, 255, 255, 0.95); }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; background: var(--brand); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 8px 16px; border-radius: 30px; margin-bottom: 22px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

.also-for-strip { background: var(--light-bg); border-bottom: 1px solid var(--line); padding: 18px 0; }

.also-for-inner { max-width: 1180px; margin: 0 auto; padding: 0 30px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; text-align: center; }

.also-for-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-dark); }

.also-for-list { font-size: 14px; color: var(--ink-soft); font-weight: 500; }

.also-for-list span { display: inline-block; padding: 0 6px; white-space: nowrap; }

.also-for-list span + span::before { content: "·"; margin-right: 12px; color: var(--brand); font-weight: 700; }

.trust-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 28px 0; }

.trust-bar-inner { max-width: 1180px; margin: 0 auto; padding: 0 30px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-around; align-items: center; }

.trust-item { font-size: 13px; color: var(--ink-soft); font-weight: 600; text-align: center; }

.trust-item strong { color: var(--brand); display: block; font-size: 18px; margin-bottom: 2px; font-family: 'Poppins', sans-serif; }

/* ============================================
       6. SECTION 2 — COST CHART
       ============================================ */

.chart-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 14px 36px rgba(45, 57, 64, 0.08); }

.chart-card h3 { font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; color: var(--ink); }

.chart-card .chart-sub { font-size: 12px; color: var(--ink-soft); margin-bottom: 18px; }

.chart-card svg { width: 100%; height: auto; display: block; }

.chart-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); line-height: 1.55; }

.chart-footer strong { color: var(--ink); }

/* ============================================
       7. AUDIENCE CARDS (Section 3) + USE-CASE CARDS (Sections 7,8)
       ============================================ */

.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }

.audience-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; display: flex; flex-direction: column; }

.audience-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); border-color: rgba(167, 190, 57, 0.4); }

.audience-icon { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, rgba(180, 200, 87, 0.16) 0%, rgba(167, 190, 57, 0.08) 100%); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: transform 0.25s ease, background 0.25s ease; }

.audience-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.audience-card:hover .audience-icon { background: linear-gradient(135deg, rgba(180, 200, 87, 0.28) 0%, rgba(167, 190, 57, 0.16) 100%); transform: scale(1.04); }

.audience-card h3 { font-size: 19px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.audience-best-for { font-size: 13px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 16px; }

.audience-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }

.audience-card ul { list-style: none; padding: 0; margin-bottom: 22px; }

.audience-card li { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; padding-left: 22px; position: relative; }

.audience-card li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.audience-jump { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.5px; padding-top: 14px; border-top: 1px solid var(--line); }

.audience-jump:hover { color: var(--brand); }

.audience-jump svg { width: 14px; height: 14px; transition: transform 0.2s; }

.audience-jump:hover svg { transform: translateX(3px); }

/* Use-case grid (Section 7 commercial, Section 8 pool) */

.usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 60px; }

.pool-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 60px; }

.usecase-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }

.usecase-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); }

.usecase-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, rgba(180, 200, 87, 0.16) 0%, rgba(167, 190, 57, 0.08) 100%); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

.usecase-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.usecase-card h4 { font-size: 17px; margin-bottom: 4px; color: var(--heading); font-family: var(--font-display); }

.usecase-card .usecase-sub { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px; }

.usecase-card p { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }

.usecase-card .usecase-spec { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }

.usecase-card .usecase-spec strong { display: block; color: var(--brand-dark); font-size: 12px; letter-spacing: 0.4px; margin-bottom: 2px; }

/* ============================================
       8. INLINE CTAs / INSIGHT STRIPS / CROSS-REFS
       ============================================ */

.inline-cta { background: rgba(167, 190, 57, 0.08); border: 1px solid rgba(167, 190, 57, 0.25); border-radius: 10px; padding: 28px 32px; margin: 0 auto; max-width: 920px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.inline-cta-text .inline-cta-title { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 4px; line-height: 1.3; font-family: var(--font-display); }

.inline-cta-text p { font-size: 14px; margin: 0; }

.insight-strip { max-width: 920px; margin: 50px auto 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 2px 10px rgba(45, 57, 64, 0.04); }

.insight-strip-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(167, 190, 57, 0.12); color: var(--brand); display: flex; align-items: center; justify-content: center; }

.insight-strip-icon svg { width: 22px; height: 22px; }

.insight-strip-body h4 { font-size: 15.5px; font-weight: 700; color: var(--heading); margin-bottom: 4px; font-family: var(--font-display); }

.insight-strip-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.insight-strip-body a { color: var(--brand-dark); font-weight: 700; white-space: nowrap; }

.insight-panel { background: linear-gradient(135deg, #fff 0%, #fafbf6 100%); border: 1px solid rgba(167, 190, 57, 0.3); border-radius: 16px; padding: 40px 44px; margin-bottom: 60px; box-shadow: 0 8px 32px rgba(45, 57, 64, 0.08); position: relative; overflow: hidden; }

.insight-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--brand) 0%, var(--brand-light) 100%); }

.insight-panel-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }

.insight-panel-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); background: rgba(167, 190, 57, 0.12); padding: 5px 12px; border-radius: 30px; margin-bottom: 14px; }

.insight-panel h3 { font-size: 22px; margin-bottom: 14px; color: var(--heading); font-family: var(--font-display); }

.insight-panel h3 strong { color: var(--brand); }

.insight-panel p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 14px; }

.insight-panel p strong { color: var(--ink); }

.insight-exception { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(167, 190, 57, 0.2); font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }

.insight-exception strong { color: var(--brand-dark); }

.demand-chart-wrap, .cop-chart-wrap { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px 20px; box-shadow: 0 2px 10px rgba(45,57,64,0.04); }

.demand-chart-wrap h4, .cop-chart-wrap h4 { font-size: 14px; font-family: var(--font-display); color: var(--heading); margin-bottom: 4px; }

.demand-chart-wrap .chart-sub, .cop-chart-wrap .chart-sub { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 14px; }

.demand-chart-wrap svg, .cop-chart-wrap svg { width: 100%; height: auto; display: block; }

.demand-chart-legend, .cop-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }

.demand-chart-legend .swatch, .cop-chart-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.cross-ref-strip { max-width: 920px; margin: 50px auto 0; background: rgba(167, 190, 57, 0.06); border: 1px dashed rgba(167, 190, 57, 0.4); border-radius: 10px; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; }

.cross-ref-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(167, 190, 57, 0.12); color: var(--brand); display: flex; align-items: center; justify-content: center; }

.cross-ref-icon svg { width: 22px; height: 22px; }

.cross-ref-body h4 { font-size: 15.5px; font-weight: 700; color: var(--heading); margin-bottom: 4px; font-family: var(--font-display); }

.cross-ref-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.cross-ref-body a { color: var(--brand-dark); font-weight: 700; white-space: nowrap; }

.disambig-box { max-width: 920px; margin: 0 auto 50px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent-warn); border-radius: 0 10px 10px 0; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 2px 10px rgba(45, 57, 64, 0.04); }

.disambig-box-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(217, 119, 6, 0.1); color: var(--accent-warn); display: flex; align-items: center; justify-content: center; }

.disambig-box-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.disambig-box-body h4 { font-size: 15.5px; font-weight: 700; color: var(--heading); margin-bottom: 4px; font-family: var(--font-display); }

.disambig-box-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.disambig-box-body strong { color: var(--brand-dark); }

/* ============================================
       9. PROCESS STEPS (Sections 4, 5)
       ============================================ */

.process-steps { max-width: 820px; margin: 50px auto 0; }

.process-step { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding-bottom: 36px; position: relative; }

.process-step:last-child { padding-bottom: 0; }

.process-step:not(:last-child)::before { content: ''; position: absolute; left: 29px; top: 78px; width: 2px; height: calc(100% - 78px); background: linear-gradient(180deg, var(--brand-light) 0%, var(--line) 50%); opacity: 0.5; z-index: 1; }

.process-step-num { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #b4c857 0%, #a7be39 50%, #8ea230 100%); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 14px rgba(167, 190, 57, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; font-family: var(--font-display); font-weight: 700; font-size: 22px; }

.process-step-num::after { content: attr(data-step); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; color: var(--brand); letter-spacing: 1.2px; white-space: nowrap; }

.process-step:hover .process-step-num { transform: scale(1.06); box-shadow: 0 8px 20px rgba(167, 190, 57, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

.process-step-body h3 { font-size: 18px; font-weight: 700; color: var(--heading); margin: 8px 0 6px; }

.process-step-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* Components grid (Sections 4, 5) */

.components-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }

.component-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s; }

.component-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); }

.component-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, rgba(180, 200, 87, 0.16) 0%, rgba(167, 190, 57, 0.08) 100%); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

.component-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.component-card h4 { font-size: 17px; margin-bottom: 4px; color: var(--heading); font-family: var(--font-display); }

.component-card .component-sub { font-size: 12px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }

.component-card p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* "Best fits" pills (Sections 4, 5) */

.best-fits-block { margin-top: 50px; padding: 24px 28px; background: rgba(167, 190, 57, 0.06); border: 1px solid rgba(167, 190, 57, 0.2); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.best-fits-label { font-size: 13px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.8px; }

.best-fits-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.best-fits-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid rgba(167, 190, 57, 0.35); color: var(--brand-dark); padding: 7px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; transition: all 0.2s; }

.best-fits-pill:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.best-fits-pill svg { width: 12px; height: 12px; transition: transform 0.2s; }

.best-fits-pill:hover svg { transform: translateX(2px); }

/* Objection cards (Section 5) */

.objection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; max-width: 820px; margin-left: auto; margin-right: auto; }

.objection-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }

.objection-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: rgba(217, 119, 6, 0.1); color: var(--accent-warn); display: flex; align-items: center; justify-content: center; }

.objection-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.objection-body h4 { font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 4px; font-family: var(--font-display); }

.objection-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

.objection-body strong { color: var(--brand-dark); }

/* ============================================
       10. SECTION 6 — RESIDENTIAL DECISION CARDS
       ============================================ */

.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin: 0 auto 30px; }

.decision-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px 28px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; position: relative; overflow: hidden; }

.decision-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); border-color: rgba(167, 190, 57, 0.4); }

.decision-card-header { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

.decision-card-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); background: rgba(167, 190, 57, 0.1); padding: 4px 10px; border-radius: 30px; margin-bottom: 12px; }

.decision-card h3 { font-size: 21px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.decision-card h3 strong { color: var(--brand); }

.decision-card .decision-card-tagline { font-size: 13px; color: var(--ink-soft); font-style: italic; }

.decision-card-list-label { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px; }

.decision-card ul { list-style: none; padding: 0; margin: 0 0 22px; }

.decision-card ul li { padding: 8px 0 8px 26px; font-size: 13.5px; color: var(--ink-soft); position: relative; border-bottom: 1px solid var(--line); margin-bottom: 0; }

.decision-card ul li:last-child { border-bottom: 0; }

.decision-card ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: rgba(167, 190, 57, 0.18); }

.decision-card ul li::after { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 3px; border-left: 2px solid var(--brand-dark); border-bottom: 2px solid var(--brand-dark); transform: rotate(-45deg); }

.decision-card-price { margin-top: auto; padding-top: 18px; border-top: 2px solid var(--line); }

.price-figure { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color: var(--brand); display: block; margin-bottom: 2px; }

.price-context { font-size: 12px; color: var(--text); display: block; margin-bottom: 14px; }

.decision-card-price .btn-primary { width: 100%; text-align: center; }

/* Worked example (Section 6) */

.worked-example { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(167, 190, 57, 0.06) 0%, rgba(180, 200, 87, 0.03) 100%); border: 1px solid rgba(167, 190, 57, 0.2); border-radius: 12px; padding: 36px 38px; }

.worked-example-header { margin-bottom: 22px; text-align: center; }

.worked-example-header h3 { font-size: 20px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.worked-example-header h3 strong { color: var(--brand); }

.worked-example-header p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.savings-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 16px; }

.savings-cell { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px 18px; text-align: center; }

.savings-cell-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }

.savings-cell-figure { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }

.savings-cell-sub { font-size: 12px; color: var(--ink-soft); }

.savings-disclaimer { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 18px; font-style: italic; }

/* "What's included" checklist */

.included-block { max-width: 920px; margin: 50px auto 0; }

.included-block h3 { font-size: 18px; font-family: var(--font-display); text-align: center; margin-bottom: 22px; color: var(--heading); }

.included-block h3 strong { color: var(--brand); }

.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }

.included-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }

.included-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--brand); }

/* ============================================
       11. SIZING TABLES (Sections 7, 8)
       ============================================ */

.sizing-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 60px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }

.sizing-table-header { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; padding: 22px 28px; }

.sizing-table-header h3 { font-size: 19px; margin-bottom: 4px; color: #fff; font-family: var(--font-display); }

.sizing-table-header p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.92); }

.sizing-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.sizing-table thead th { background: var(--bg-panel); text-align: left; padding: 14px 18px; font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand-dark); border-bottom: 2px solid var(--line); }

.sizing-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }

.sizing-table tbody tr:last-child td { border-bottom: 0; }

.sizing-table tbody tr:hover { background: rgba(167, 190, 57, 0.04); }

.sizing-table .row-label { color: var(--heading); font-weight: 700; font-family: var(--font-display); }

.sizing-table .saving-cell { color: var(--brand-dark); font-weight: 700; }

.sizing-table-footer { padding: 16px 28px; background: var(--bg-panel); font-size: 12px; color: var(--ink-soft); font-style: italic; border-top: 1px solid var(--line); }

/* ============================================
       12. SECTION 8 — SWIM SEASON CALENDAR + COMBINED CALLOUT + COVER TIP
       ============================================ */

.swim-season { max-width: 920px; margin: 0 auto 60px; background: linear-gradient(135deg, #fff 0%, #fafbf6 100%); border: 1px solid rgba(167, 190, 57, 0.3); border-radius: 16px; padding: 36px 38px; box-shadow: 0 8px 28px rgba(45, 57, 64, 0.08); }

.swim-season-header { text-align: center; margin-bottom: 24px; }

.swim-season-header h3 { font-size: 20px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.swim-season-header h3 strong { color: var(--brand); }

.swim-season-header p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.calendar-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: center; margin-bottom: 14px; }

.calendar-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); }

.calendar-label strong { display: block; color: var(--heading); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.3px; text-transform: none; margin-bottom: 2px; }

.calendar-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 38px; border-radius: 6px; overflow: hidden; }

.calendar-cell { background: #e2e2e2; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #888; font-family: var(--font-display); letter-spacing: 0.4px; position: relative; }

.calendar-cell.swim-yes { background: var(--brand); color: #fff; }

.calendar-cell.swim-yes-extended { background: var(--brand-light); color: #fff; }

.swim-season .calendar-row:nth-of-type(2) .calendar-strip .calendar-cell:nth-child(1),
    .swim-season .calendar-row:nth-of-type(2) .calendar-strip .calendar-cell:nth-child(2),
    .swim-season .calendar-row:nth-of-type(2) .calendar-strip .calendar-cell:nth-child(3),
    .swim-season .calendar-row:nth-of-type(2) .calendar-strip .calendar-cell:nth-child(11),
    .swim-season .calendar-row:nth-of-type(2) .calendar-strip .calendar-cell:nth-child(12) { background: var(--brand-dark); color: #fff; opacity: 0.85; }

.swim-season-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }

.swim-stat { text-align: center; padding: 14px; background: rgba(167, 190, 57, 0.06); border-radius: 8px; }

.swim-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }

.swim-stat-figure { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand); }

.swim-stat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.regional-note { margin-top: 20px; font-size: 12.5px; color: var(--ink-soft); font-style: italic; text-align: center; line-height: 1.6; }

.regional-note strong { font-style: normal; color: var(--brand-dark); }

.combined-callout { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border-radius: 12px; padding: 36px 40px; margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: center; box-shadow: 0 8px 28px rgba(167, 190, 57, 0.25); }

.combined-callout-icon { display: flex; justify-content: center; }

.combined-callout-icon svg { width: 110px; height: 110px; stroke: rgba(255,255,255,0.85); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.combined-callout-body span.combined-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.18); padding: 5px 12px; border-radius: 30px; margin-bottom: 14px; }

.combined-callout-body h3 { font-size: 22px; margin-bottom: 10px; color: #fff; font-family: var(--font-display); }

.combined-callout-body p { font-size: 14.5px; color: rgba(255,255,255,0.95); margin-bottom: 12px; line-height: 1.65; }

.cover-tip { max-width: 920px; margin: 0 auto 50px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0; padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 2px 10px rgba(45, 57, 64, 0.04); }

.cover-tip-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(167, 190, 57, 0.12); color: var(--brand); display: flex; align-items: center; justify-content: center; }

.cover-tip-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cover-tip-body h4 { font-size: 15.5px; font-weight: 700; color: var(--heading); margin-bottom: 4px; font-family: var(--font-display); }

.cover-tip-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.cover-tip-body strong { color: var(--brand-dark); }

/* ============================================
       13. SECTION 9 — UNDERFLOOR PRICING + SUITABILITY
       ============================================ */

.pricing-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 auto 60px; }

.pricing-strip-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px 22px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }

.pricing-strip-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); }

.pricing-strip-card .strip-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-dark); background: rgba(167, 190, 57, 0.1); padding: 4px 10px; border-radius: 30px; margin-bottom: 12px; }

.pricing-strip-card h4 { font-size: 17px; margin-bottom: 8px; color: var(--heading); font-family: var(--font-display); }

.pricing-strip-card .strip-figure { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand); margin: 10px 0 4px; line-height: 1.2; }

.pricing-strip-card .strip-sub { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 14px; font-style: italic; }

.pricing-strip-card p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.suitable-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 36px; max-width: 920px; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }

.suitable-block h3 { font-size: 19px; font-family: var(--font-display); text-align: center; margin-bottom: 22px; color: var(--heading); }

.suitable-block h3 strong { color: var(--brand); }

.suitable-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; }

.suitable-item { display: flex; gap: 12px; align-items: flex-start; }

.suitable-item-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(167, 190, 57, 0.12); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-top: 2px; }

.suitable-item-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.suitable-item-body h5 { font-size: 14px; font-weight: 700; color: var(--heading); margin: 0 0 3px; font-family: var(--font-display); }

.suitable-item-body p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ============================================
       14. SECTION 10 — COMPARISON TABLE
       ============================================ */

.compare-table-wrap { overflow-x: auto; max-width: 1080px; margin: 0 auto; }

.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 14px; }

.compare-table thead th { text-align: left; padding: 16px 20px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; border-bottom: 0; font-family: var(--font-display); }

.compare-table thead th.col-pv { background: var(--brand); }

.compare-table thead th.col-hp { background: var(--brand-dark); }

.compare-table thead th .col-sub { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; font-family: 'Open Sans', sans-serif; }

.compare-table tbody th { text-align: left; padding: 14px 20px; font-weight: 700; color: var(--heading); background: var(--bg-panel); width: 24%; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 13.5px; }

.compare-table td { padding: 14px 20px; vertical-align: top; color: var(--ink-soft); line-height: 1.6; border-top: 1px solid var(--line); width: 38%; }

.compare-table tbody tr:first-child th, .compare-table tbody tr:first-child td { border-top: 0; }

.compare-table tbody tr:hover th { background: rgba(167, 190, 57, 0.05); }

.compare-table tbody tr:hover td { background: rgba(167, 190, 57, 0.02); }

.compare-table .price-row td { font-weight: 700; color: var(--brand-dark); }

.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; max-width: 1080px; margin-left: auto; margin-right: auto; }

.verdict-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; }

.verdict-card-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; padding: 4px 12px; border-radius: 30px; margin-bottom: 12px; }

.verdict-card.pv .verdict-card-tag { background: var(--brand); }

.verdict-card.hp .verdict-card-tag { background: var(--brand-dark); }

.verdict-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--heading); font-family: var(--font-display); }

.verdict-card p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.65; }

.verdict-card p strong { color: var(--ink); }

/* ============================================
       15. SECTION 11 — TRUST STATS + INTEGRATED PANEL + BRANCHES
       ============================================ */

.trust-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 70px; }

.trust-stat-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 26px 28px; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s; position: relative; }

.trust-stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); }

.trust-stat-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(180, 200, 87, 0.18) 0%, rgba(167, 190, 57, 0.08) 100%); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

.trust-stat-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.trust-stat-figure { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1.1; margin-bottom: 4px; }

.trust-stat-label { font-size: 14px; font-weight: 700; color: var(--heading); font-family: var(--font-display); margin-bottom: 10px; }

.trust-stat-card p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.integrated-panel { background: linear-gradient(135deg, var(--ink) 0%, #1f2a30 100%); color: #fff; border-radius: 16px; padding: 48px 50px; margin-bottom: 70px; box-shadow: 0 12px 40px rgba(45, 57, 64, 0.18); position: relative; overflow: hidden; }

.integrated-panel::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: radial-gradient(ellipse at 80% 50%, rgba(167, 190, 57, 0.18) 0%, transparent 70%); pointer-events: none; }

.integrated-panel-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; position: relative; z-index: 1; }

.integrated-panel-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.95); background: rgba(167, 190, 57, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); padding: 5px 14px; border-radius: 30px; margin-bottom: 18px; }

.integrated-panel h3 { font-size: 26px; margin-bottom: 16px; color: #fff; font-family: var(--font-display); line-height: 1.25; }

.integrated-panel h3 strong { color: var(--brand-light); font-weight: 700; }

.integrated-panel p { font-size: 15px; color: rgba(255,255,255,0.88); line-height: 1.7; margin-bottom: 14px; }

.solutions-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.solution-pill { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 14px; transition: all 0.2s; }

.solution-pill:hover { background: rgba(167, 190, 57, 0.18); border-color: rgba(180, 200, 87, 0.4); }

.solution-pill-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(167, 190, 57, 0.25); color: var(--brand-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.solution-pill-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.solution-pill-label { font-size: 13.5px; color: #fff; font-weight: 600; font-family: var(--font-display); }

.branches-head { text-align: center; margin-bottom: 32px; }

.branches-head h3 { font-size: 22px; margin-bottom: 8px; color: var(--heading); font-family: var(--font-display); }

.branches-head h3 strong { color: var(--brand); }

.branches-head p { font-size: 14px; color: var(--ink-soft); max-width: 640px; margin: 0 auto; }

.branches-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.branch-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }

.branch-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); }

.branch-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

.branch-pin { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(167, 190, 57, 0.3); }

.branch-pin svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.branch-card h4 { font-size: 18px; color: var(--heading); font-family: var(--font-display); margin: 0; line-height: 1.2; }

.branch-card .branch-region { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-dark); display: block; margin-top: 2px; }

.branch-card .branch-cities { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.6; }

.branch-card .branch-cities strong { display: block; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; font-family: var(--font-display); }

.branch-card .branch-contact { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }

.branch-card .branch-contact a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--brand-dark); font-weight: 600; }

.branch-card .branch-contact a:hover { color: var(--brand); }

.branch-card .branch-contact svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============================================
       16. SECTION 12 — FAQ
       ============================================ */

.faq-wrap { max-width: 920px; margin: 0 auto; }

.faq-cluster { margin-bottom: 50px; }

.faq-cluster:last-child { margin-bottom: 0; }

.faq-cluster-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid rgba(167, 190, 57, 0.2); }

.faq-cluster-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(167, 190, 57, 0.25); }

.faq-cluster-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.faq-cluster-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--heading); }

.faq-cluster-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.4px; margin-left: auto; }

.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; }

.faq-item[open] { border-color: rgba(167, 190, 57, 0.4); box-shadow: 0 4px 16px rgba(167, 190, 57, 0.08); }

.faq-item summary { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; gap: 14px; list-style: none; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--heading); line-height: 1.4; transition: color 0.2s; }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--brand-dark); }

.faq-chevron { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(167, 190, 57, 0.12); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-left: auto; transition: transform 0.25s ease, background 0.25s ease; }

.faq-chevron svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.faq-item[open] .faq-chevron { transform: rotate(180deg); background: var(--brand); color: #fff; }

.faq-answer { padding: 0 22px 20px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

.faq-answer p { margin-bottom: 10px; }

.faq-answer strong { color: var(--ink); }

.faq-nudge { max-width: 920px; margin: 50px auto 0; text-align: center; padding: 28px; background: rgba(167, 190, 57, 0.06); border: 1px dashed rgba(167, 190, 57, 0.4); border-radius: 10px; }

.faq-nudge h3 { font-size: 18px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.faq-nudge p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.faq-nudge p a { font-weight: 700; color: var(--brand-dark); }

/* ============================================
       17. SECTION 13 — TESTIMONIALS
       ============================================ */

.rating-hero { max-width: 920px; margin: 0 auto 50px; background: linear-gradient(135deg, #fff 0%, var(--bg-panel) 100%); border: 1px solid rgba(167, 190, 57, 0.3); border-radius: 16px; padding: 36px 40px; box-shadow: 0 8px 28px rgba(45, 57, 64, 0.08); display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; }

.rating-figure-block { text-align: center; padding-right: 36px; border-right: 1px solid var(--line); }

.rating-figure { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 8px; }

.rating-stars { color: var(--google-yellow); font-size: 20px; letter-spacing: 4px; margin-bottom: 6px; }

.rating-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); }

.rating-body { text-align: center; }

.rating-body h3 { font-size: 21px; margin-bottom: 8px; color: var(--heading); font-family: var(--font-display); line-height: 1.3; }

.rating-body h3 strong { color: var(--brand); }

.rating-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.google-cta { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--brand); color: var(--brand-dark); padding: 12px 22px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; transition: all 0.2s; white-space: nowrap; }

.google-cta:hover { background: var(--brand); color: #fff; }

.google-cta-icon { width: 18px; height: 18px; flex-shrink: 0; }

.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto; }

.testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.3s, box-shadow 0.3s; position: relative; display: flex; flex-direction: column; }

.testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08); }

.testimonial-card::before { content: "\201C"; position: absolute; top: 14px; right: 24px; font-family: 'Poppins', serif; font-size: 64px; line-height: 1; color: rgba(167, 190, 57, 0.18); font-weight: 700; }

.testimonial-stars { color: var(--google-yellow); font-size: 16px; margin-bottom: 14px; letter-spacing: 3px; }

.testimonial-card p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; font-style: italic; flex: 1; }

.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.testimonial-author-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; font-weight: 700; flex-shrink: 0; }

.testimonial-author-meta { flex: 1; }

.testimonial-author-name { font-family: var(--font-display); font-weight: 700; color: var(--heading); font-size: 14px; line-height: 1.2; }

.testimonial-author-source { font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; margin-top: 2px; }

.testimonial-author-source svg { width: 12px; height: 12px; }

.testimonials-note { max-width: 920px; margin: 36px auto 0; padding: 18px 22px; font-size: 12.5px; color: var(--ink-soft); text-align: center; font-style: italic; line-height: 1.65; }

.testimonials-note a { font-weight: 700; color: var(--brand-dark); font-style: normal; }

/* ============================================
       18. SECTION 14 — CLOSING CTA + QUOTE FORM
       ============================================ */

.closing-cta { background: var(--brand-gradient), var(--ink); color: #fff; padding: 80px 0; text-align: center; position: relative; overflow: hidden; }

.closing-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.04) 0%, transparent 50%); pointer-events: none; }

.closing-cta .container { position: relative; z-index: 1; }

.closing-eyebrow { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-light); margin-bottom: 14px; opacity: 0.95; }

.closing-cta h2 { color: #fff; margin-bottom: 16px; max-width: 880px; margin-left: auto; margin-right: auto; line-height: 1.25; font-size: 32px; }

.closing-cta h2 strong { color: var(--accent-warn); font-weight: 700; }

.closing-cta > .container > p { font-size: 16px; color: rgba(255, 255, 255, 0.92); max-width: 760px; margin: 0 auto 36px; line-height: 1.7; }

.quote-form-wrap { background: #fff; color: var(--ink); max-width: 880px; margin: 0 auto; border-radius: 16px; padding: 40px 44px; box-shadow: 0 24px 60px rgba(20, 28, 32, 0.25); text-align: left; position: relative; }

.quote-form-header { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }

.quote-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); background: rgba(167, 190, 57, 0.1); padding: 5px 14px; border-radius: 30px; margin-bottom: 14px; }

.quote-form-header h3 { font-size: 22px; margin-bottom: 6px; color: var(--heading); font-family: var(--font-display); }

.quote-form-header p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.quote-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quote-form-error { display: none; background: rgba(217, 65, 65, 0.08); border: 1px solid rgba(217, 65, 65, 0.3); color: #b53030; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }

.quote-form-error.is-visible { display: block; }

.quote-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.quote-field { display: flex; flex-direction: column; }

.quote-field.full-row { grid-column: 1 / -1; }

.quote-field label { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 6px; font-family: var(--font-display); }

.quote-field .req { color: #d94141; margin-left: 2px; }

.quote-field input[type="text"], .quote-field input[type="tel"], .quote-field input[type="email"], .quote-field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 6px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: var(--ink); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }

.quote-field input:focus, .quote-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(167, 190, 57, 0.12); }

.quote-field input[aria-invalid="true"], .quote-field textarea[aria-invalid="true"] { border-color: #d94141; }

.quote-field textarea { resize: vertical; min-height: 80px; }

.field-error { font-size: 12px; color: #d94141; margin-top: 4px; min-height: 16px; }

.quote-radio-group label { display: block; margin-bottom: 8px; }

.quote-radio-options { display: flex; flex-wrap: wrap; gap: 8px; }

.quote-radio-options label { margin: 0; cursor: pointer; }

.quote-radio-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.radio-pill { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: #fff; transition: all 0.2s; font-family: 'Open Sans', sans-serif; }

.quote-radio-options label:hover .radio-pill { border-color: var(--brand); color: var(--brand-dark); }

.quote-radio-options input[type="radio"]:checked + .radio-pill { background: var(--brand); border-color: var(--brand); color: #fff; }

.quote-radio-options input[type="radio"]:focus-visible + .radio-pill { box-shadow: 0 0 0 3px rgba(167, 190, 57, 0.25); }

.quote-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }

.quote-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); width: 16px; height: 16px; }

.quote-form-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }

.quote-submit { display: inline-block; background: var(--brand); color: #fff; border: 2px solid var(--brand); padding: 14px 36px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }

.quote-submit:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.quote-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.quote-form-trust { font-size: 12px; color: var(--ink-soft); margin: 12px 0 0; }

.quote-form-success { display: none; text-align: center; }

.quote-form-success.is-visible { display: block; }

.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }

.success-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.quote-form-success h3 { font-size: 22px; margin-bottom: 12px; color: var(--heading); }

.quote-form-success p { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }

.success-meta a { font-weight: 700; color: var(--brand-dark); }

.quote-alt { text-align: center; margin-top: 28px; font-size: 14px; color: rgba(255, 255, 255, 0.92); }

.quote-alt a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.quote-alt a:hover { color: var(--accent-warn); }

/* ============================================
       19. RESPONSIVE BREAKPOINTS (consolidated)
       ============================================ */

@media (min-width: 1600px) {
      .hero-bg img { object-position: 80% center; }
    }

@media (max-width: 1100px) {
      .audience-grid, .pricing-strip, .trust-stats-grid, .usecase-grid { grid-template-columns: repeat(2, 1fr); }
    }

@media (max-width: 980px) {
      .two-col, .insight-panel-grid, .integrated-panel-grid { grid-template-columns: 1fr; gap: 32px; }
      .components-grid, .pool-usecase-grid, .branches-grid, .audience-card-grid { grid-template-columns: 1fr; }
      .insight-panel { padding: 32px 28px; }
      .integrated-panel { padding: 36px 28px; }
    }

@media (max-width: 900px) {
      .rating-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; text-align: center; }
      .rating-figure-block { padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
      .google-cta { justify-self: center; }
    }

@media (max-width: 760px) {
      .hero-bg img { object-position: center top; }
      .decision-grid, .testimonial-grid, .savings-row, .verdict-grid, .compare-table { grid-template-columns: 1fr; }
      .compare-table { min-width: 640px; font-size: 13px; }
      .sizing-table-wrap { overflow-x: auto; }
      .sizing-table { min-width: 640px; }
      .inline-cta, .combined-callout { flex-direction: column; text-align: center; }
      .combined-callout { grid-template-columns: 1fr; padding: 28px 26px; gap: 20px; }
      .combined-callout-icon svg { width: 80px; height: 80px; }
      .closing-cta { padding: 60px 0; }
      .closing-cta h2 { font-size: 26px; }
      .quote-form-wrap { padding: 30px 22px; }
      .quote-form-grid { grid-template-columns: 1fr; }
      .quote-submit { width: 100%; }
      .calendar-row { grid-template-columns: 1fr; gap: 8px; }
      .swim-season { padding: 28px 22px; }
    }

@media (max-width: 720px) {
      .objection-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 600px) {
      h1 { font-size: 26px; }
      h2 { font-size: 23px; }
      h3 { font-size: 18px; }
      .section { padding: 60px 0; }
      .page-hero { padding: 70px 0 80px; }
      .audience-grid, .pricing-strip, .trust-stats-grid, .usecase-grid { grid-template-columns: 1fr; }
      .included-grid, .suitable-grid, .solutions-stack { grid-template-columns: 1fr; }
      .process-step { grid-template-columns: 50px 1fr; gap: 18px; }
      .process-step-num { width: 50px; height: 50px; font-size: 18px; }
      .insight-strip, .cross-ref-strip, .disambig-box, .cover-tip { flex-direction: column; gap: 12px; }
      .integrated-panel h3 { font-size: 21px; }
      .trust-stat-figure { font-size: 28px; }
      .rating-figure { font-size: 44px; }
      .calendar-cell { font-size: 9px; }
      .faq-item summary { font-size: 14px; padding: 16px 18px; }
      .faq-answer { padding: 0 18px 16px; }
    }

@media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      html { scroll-behavior: auto; }
      .hero-bg-1 { opacity: 1; }
    }

/* ============================================
       PRICE-JUMP STRIP (skip-ahead nav for buyers who know what they want)
       ============================================ */

.price-jump {
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 18px 0;
    }

.price-jump-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: center;
    }

.price-jump-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      font-family: var(--font-display);
      line-height: 1.3;
      white-space: nowrap;
    }

.price-jump-label-sub {
      display: block;
      font-size: 11px;
      font-weight: 400;
      color: var(--text);
      margin-top: 2px;
      letter-spacing: 0.2px;
    }

.price-jump-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

.price-jump-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      padding: 12px 14px;
      border: 1.5px solid var(--brand);
      border-radius: 8px;
      background: #fff;
      color: var(--brand-dark);
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-display);
      text-decoration: none;
      transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
      line-height: 1.2;
    }

.price-jump-link:hover,
    .price-jump-link:focus-visible {
      background: var(--brand);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(167, 190, 57, 0.25);
    }

.price-jump-link svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      stroke-width: 2.5;
    }

@media (max-width: 980px) {
      .price-jump-inner { grid-template-columns: 1fr; gap: 14px; }
      .price-jump-label { white-space: normal; text-align: center; }
    }

@media (max-width: 700px) {
      .price-jump-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .price-jump-link { padding: 10px 12px; font-size: 12.5px; }
    }

/* Scroll-margin so price-jump deep-links land with breathing room above */

#price-pv-residential, #price-heatpump-residential,
    #price-pool, #price-commercial { scroll-margin-top: 24px; }

/* ============================================
       SERVICE CROSS-LINK (water-heating ↔ water-heating-service)
       Discreet single-line link for visitors on the wrong page.
       ============================================ */

.service-cross-link {
      background: var(--bg-panel);
      border-bottom: 1px solid var(--line);
      padding: 12px 0;
      font-family: var(--font-body);
    }

.service-cross-link-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
      text-align: center;
      font-size: 13px;
      color: var(--ink-soft);
    }

.service-cross-link-inner strong {
      color: var(--ink);
      font-weight: 600;
    }

.service-cross-link-inner a {
      color: var(--brand-dark);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(167, 190, 57, 0.35);
      padding-bottom: 1px;
      margin-left: 4px;
      transition: color 0.18s ease, border-color 0.18s ease;
    }

.service-cross-link-inner a:hover,
    .service-cross-link-inner a:focus-visible {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }

.service-cross-link-inner a svg {
      width: 11px;
      height: 11px;
      stroke-width: 2.5;
      margin-left: 3px;
      vertical-align: -1px;
    }

@media (max-width: 600px) {
      .service-cross-link-inner { font-size: 12.5px; line-height: 1.5; }
    }

/* ============================================
       VIDEO BLOCK (§5 heat pump demo + future videos)
       ============================================ */

.video-block { max-width: 880px; margin: 56px auto 0; }

.video-block-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 10px; text-align: center; font-family: var(--font-body); }

.video-block h3 { text-align: center; font-size: 20px; color: var(--heading); margin-bottom: 18px; font-family: var(--font-display); font-weight: 600; }

.video-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--ink);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(45, 57, 64, 0.18);
    }

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

.video-frame .video-poster {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #2d3940 0%, #1a2024 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.85);
      gap: 18px;
    }

.video-frame .video-poster::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(circle at 30% 30%, rgba(167,190,57,0.18) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(180,200,87,0.10) 0%, transparent 60%);
      pointer-events: none;
    }

.video-poster-play {
      position: relative; z-index: 1;
      width: 88px; height: 88px; border-radius: 50%;
      background: rgba(167,190,57,0.95);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(167,190,57,0.55);
      animation: video-pulse 2.4s infinite;
    }

.video-poster-play svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; }

@keyframes video-pulse {
      0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(167,190,57,0.55); }
      50% { box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 18px rgba(167,190,57,0); }
    }

.video-poster-label { position: relative; z-index: 1; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; font-family: var(--font-display); }

.video-poster-sub { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--font-body); }

.video-caption { font-size: 12.5px; color: var(--text); text-align: center; margin-top: 14px; line-height: 1.6; font-style: italic; }

@media (max-width: 760px) {
      .video-block { margin-top: 40px; }
      .video-poster-play { width: 64px; height: 64px; }
      .video-poster-play svg { width: 24px; height: 24px; }
    }

@media (prefers-reduced-motion: reduce) {
      .video-poster-play { animation: none; }
    }

/* ============================================
       BREADCRUMB (matches BreadcrumbList schema)
       ============================================ */

/* ==============================================================================
   CLIENT REVIEWS & TESTIMONIALS SECTION
   Added 2026-05-27 — standardised site-wide reviews block.
   ============================================================================== */

.reviews-aggregate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 40px;
  text-align: center;
}

.reviews-aggregate-stars {
  font-size: 2rem;
  color: #f5b800;
  letter-spacing: 4px;
}

.reviews-aggregate-rating {
  font-size: 1.3rem;
  color: #1a2429;
}

.reviews-aggregate-rating strong {
  font-size: 2rem;
  color: #a7be39;
}

.reviews-aggregate-count {
  color: #4a5568;
  font-size: 0.95rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.review-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.review-stars {
  color: #f5b800;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.review-text {
  font-style: italic;
  color: #1a2429;
  line-height: 1.55;
  margin: 0 0 20px;
  flex-grow: 1;
  font-size: 0.95rem;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.review-author {
  color: #1a2429;
  font-size: 1rem;
}

.review-tag {
  display: inline-block;
  background: #a7be39;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
}

.review-date {
  color: #888;
  font-size: 0.85rem;
}

.reviews-cta {
  text-align: center;
  margin-top: 30px;
  color: #4a5568;
}

.reviews-cta a {
  color: #a7be39;
  font-weight: 700;
  text-decoration: none;
}

.reviews-cta a:hover {
  text-decoration: underline;
}

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

@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   CTA BUTTONS — .btn-primary gradient pill
   Added 2026-06-01 (match site-wide CTA style)
   ============================================ */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #b4c857 0%, #a7be39 50%, #8ea230 100%);
  color: #fff;
  border: 0;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(167, 190, 57, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(167, 190, 57, 0.42);
  filter: brightness(1.05);
  color: #fff;
}

/* ============================================
   PROCESS-STEP ICONS (replace plain numbers)
   Added 2026-06-01
   ============================================ */
.process-step-num svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}