/* ==============================================================================
   PERLITE FLOOR INSULATION — PAGE-SPECIFIC STYLES (Layer 3)
   ==============================================================================

   Page-specific styles for the Perlite Floor Insulation page. Foundation,
   header, and footer styles live in their own files.

   This is the third page in the heating template family (after Hydronic
   Underfloor Heating _v5 and Carbon Fibre Wall Heating _v6). Source
   filename is _v2 — slightly less iterated than the siblings but same
   template structure.

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

   ENQUEUE (in functions.php):

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

   STRUCTURE
   ---------
   Sections covered:
     - Page hero (rotating background, real product photos)
     - How it works (perlite explained)
     - Benefits grid
     - Applications grid (underfloor heating, screed insulation, etc)
     - Why perlite
     - Comparison table (perlite vs alternatives)
     - 5-step installation process
     - Pricing
     - FAQ accordions
     - Other solutions cross-sell
     - About strip, closing CTA + quote form

   PAGE-SPECIFIC COMPONENTS (Layer 3)
   ----------------------------------
     - .summary-lift          (GEO-quotable factual block, same pattern as
                                Underfloor and Carbon Fibre)
     - .comparison-table      (3-column insulation-type comparison)
     - .applications-grid     (use-case cards)
     - .pricing-grid          (perlite-specific package tiers)

   LAYER 2 CANDIDATES (used across 12+ pages now)
   ----------------------------------------------
     - .page-hero, .trust-bar, .stats-ribbon
     - .section, .section-light
     - .closing-cta
     - .faq, .faq-list
     - .accreditation-grid

   CI COMPLIANCE
   -------------
   All colours updated to CI specification on 12 May 2026.

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

/* =========================================================
       DESIGN TOKENS
       ========================================================= */

/* =========================================================
       RESET / BASE
       ========================================================= */

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

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

/* =========================================================
       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; }

/* =========================================================
       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; }
    }

.btn-white {
      display: inline-block;
      background: #fff;
      color: var(--ink);
      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;
    }

.btn-white:hover {
      background: transparent;
      color: #fff;
    }

.btn-ghost-white {
      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;
    }

.btn-ghost-white:hover { background: #fff; color: var(--ink); }

/* =========================================================
       ANNOUNCEMENT BAR
       ========================================================= */

/* Announcement bar */

/* Header */

/* Buttons */

/* =========================================================
       BREADCRUMB
       ========================================================= */

/* =========================================================
       PAGE HERO (sub-page, single static)
       ========================================================= */

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

/* 6-layer rotating background: 36s loop, 6s per image, ~1.2s crossfade
       Each layer's image is anchored RIGHT by default so the photographic subject
       sits in the right-hand visual zone (the text occupies the left).
       Per-layer overrides below let individual photos be nudged without touching JS. */

.hero-bg {
      position: absolute;
      inset: 0;
      background-position: var(--bg-pos, right center);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: var(--ink); /* fallback during decode */
      opacity: 0;
      z-index: 0;
      animation: hero-rotate 36s infinite;
      will-change: opacity;
    }

/* Per-layer animation timing */

.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; }

/* Per-layer position overrides — all default to 'right center'.
       Tweak any individual layer here without touching the HTML.
       Examples of values: 'right center', '70% center', 'center', '30% center', 'left center'.
       Vertical: 'right top', 'right 30%', 'right bottom'. */

.hero-bg-1 { --bg-pos: right center; }

.hero-bg-2 { --bg-pos: right center; }

.hero-bg-3 { --bg-pos: right center; }

.hero-bg-4 { --bg-pos: right center; }

.hero-bg-5 { --bg-pos: right center; }

.hero-bg-6 { --bg-pos: right center; }

/* On very wide screens, pull subject slightly inboard so it doesn't drift off the edge */

@media (min-width: 1600px) {
      .hero-bg { background-position: 80% center; }
      .hero-bg-1, .hero-bg-2, .hero-bg-3,
      .hero-bg-4, .hero-bg-5, .hero-bg-6 { --bg-pos: 80% center; }
    }

/* On mobile, narrow viewport means subject behind text would be lost — recentre */

@media (max-width: 760px) {
      .hero-bg { background-position: center top; }
      .hero-bg-1, .hero-bg-2, .hero-bg-3,
      .hero-bg-4, .hero-bg-5, .hero-bg-6 { --bg-pos: center top; }
    }

@keyframes hero-rotate {
      /* 6 layers × 6s each. Each layer: fade in (3%), hold (13%), fade out (16%) */
      0%   { opacity: 0; }
      3%   { opacity: 1; }
      13%  { opacity: 1; }
      16%  { opacity: 0; }
      100% { opacity: 0; }
    }

/* Olive-green gradient overlay sits ABOVE the rotating images */

.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;
    }

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

.page-hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 30px; }

.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);
    }

/* =========================================================
       TRUST BAR
       ========================================================= */

.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; }

/* =========================================================
       INTRO / WHAT WE OFFER (2-COL)
       ========================================================= */

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

.two-col-equal {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

.video-frame {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
      background: #000;
    }

.video-frame video {
      width: 100%;
      height: auto;
      display: block;
    }

.section-img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
      display: block;
    }

.member-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

.member-badge {
      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;
    }

.image-placeholder {
      width: 100%;
      aspect-ratio: 4 / 3;
      background:
        linear-gradient(135deg, rgba(167, 190, 57, 0.06) 0%, rgba(167, 190, 57, 0.02) 100%),
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 10px,
          rgba(167, 190, 57, 0.04) 10px,
          rgba(167, 190, 57, 0.04) 20px
        );
      border: 1px solid rgba(167, 190, 57, 0.18);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--brand-dark);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      padding: 24px 20px;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

.image-placeholder::before {
      content: "🌞";
      font-size: 36px;
      opacity: 0.55;
      filter: saturate(0.6);
    }

.image-placeholder span.placeholder-meta {
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      opacity: 0.85;
    }

/* Pricing card placeholders — square aspect with deeper tint to feel like product shots */

.pricing-card .image-placeholder {
      aspect-ratio: 1 / 1;
      margin-bottom: 18px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, var(--ink) 0%, #1a2024 100%);
      color: rgba(255, 255, 255, 0.78);
      border: 0;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    }

.pricing-card .image-placeholder::before {
      content: "⚡";
      font-size: 40px;
      opacity: 0.55;
      filter: saturate(0.4);
    }

.pricing-card .image-placeholder span.placeholder-meta {
      color: rgba(255, 255, 255, 0.55);
    }

/* Pricing card real images — premium dark feature-panel treatment */

.pricing-card-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      object-position: center;
      background: linear-gradient(135deg, var(--ink) 0%, #1a2024 100%);
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
      display: block;
    }

/* =========================================================
       BENEFITS GRID (5-IN-1)
       ========================================================= */

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

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

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

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

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

.benefit-icon {
      width: 52px;
      height: 52px;
      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: 18px;
      transition: transform 0.25s ease, background 0.25s ease;
    }

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

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

/* AI feature cards (4-up) */

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

.ai-feature-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 26px 22px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

.ai-feature-card .ai-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand);
      transition: transform 0.25s ease, color 0.25s ease;
      position: relative;
    }

.ai-icon::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(180,200,87,0.18) 0%, transparent 65%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

.ai-icon svg {
      width: 44px;
      height: 44px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      position: relative;
      z-index: 1;
    }

.ai-feature-card:hover .ai-icon {
      transform: scale(1.08);
      color: var(--brand-dark);
    }

.ai-feature-card:hover .ai-icon::after {
      opacity: 1;
    }

.ai-feature-card h3 {
      font-size: 16px;
      color: var(--heading);
    }

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

/* =========================================================
       PRICING GRID
       ========================================================= */

.tier-label {
      font-family: 'Poppins', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--heading);
      margin: 32px 0 18px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--brand-light);
    }

.tier-label:first-of-type { margin-top: 8px; }

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

/* Modifier for 2-card pricing-grids: caps width and centres the pair so the
       cards don't sit flush-left under the tier-label. Keeps individual card
       size consistent with the 3-column / 4-card grids elsewhere on the page. */

.pricing-grid--centered {
      grid-template-columns: repeat(2, minmax(0, 380px));
      justify-content: center;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

@media (max-width: 1100px) {
      .pricing-grid--centered { max-width: 760px; }
    }

@media (max-width: 760px) {
      .pricing-grid--centered { grid-template-columns: 1fr; max-width: 420px; }
    }

.pricing-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 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;
    }

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

.pricing-card h3 {
      font-size: 18px;
      margin-bottom: 14px;
      color: var(--heading);
    }

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

.pricing-card h3 .pkg-sku {
      display: block;
      font-family: 'Open Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-soft);
      margin-top: 4px;
      letter-spacing: 0.2px;
    }

.pricing-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
    }

.pricing-card ul li {
      padding: 6px 0;
      border-bottom: 1px solid var(--line);
      font-size: 13.5px;
      color: var(--ink-soft);
    }

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

.pricing-card .pricing-suit {
      font-size: 13px;
      color: var(--text);
      font-style: italic;
      margin-bottom: 18px;
    }

.pricing-price {
      margin-top: auto;
      padding-top: 14px;
      border-top: 2px solid var(--line);
    }

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

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

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

/* =========================================================
       PRICING — SIMPLIFIED 2-CARD COMPARISON (perlite-specific)
       Used by the perlite-vs-polystyrene pricing block.
       ========================================================= */

.pricing-grid--two {
      max-width: 880px;
      margin: 0 auto;
      grid-template-columns: repeat(2, 1fr);
    }

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

.pricing-card-simple {
      text-align: center;
      padding: 36px 32px;
      position: relative;
    }

.pricing-card-simple h3 {
      font-size: 22px;
      margin-bottom: 18px;
      color: var(--heading);
    }

.pricing-card-simple .price-headline {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 44px;
      color: var(--brand);
      line-height: 1.1;
      margin: 0 0 8px;
      display: block;
    }

.pricing-card-simple .price-headline .price-unit {
      font-size: 15px;
      font-weight: 500;
      color: var(--ink-soft);
      margin-left: 4px;
      letter-spacing: 0;
    }

.pricing-card-simple .price-sublabel {
      font-size: 13px;
      color: var(--text);
      margin: 0 0 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

.pricing-check-list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
      text-align: left;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }

.pricing-check-list li {
      padding: 8px 0 8px 28px;
      position: relative;
      font-size: 14px;
      color: var(--ink-soft);
      border-bottom: 0;
    }

.pricing-check-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      width: 16px;
      height: 12px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23829823' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 10 8 16 22 2'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
    }

.pricing-card.featured {
      border: 2px solid var(--brand);
      box-shadow: 0 8px 28px rgba(167, 190, 57, 0.12);
    }

.pricing-card.featured .price-headline { color: var(--brand-dark); }

.recommended-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--brand);
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.5px;
      padding: 6px 18px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(167, 190, 57, 0.3);
      white-space: nowrap;
    }

.pricing-card-simple .btn-primary {
      width: 100%;
      max-width: 320px;
      margin: 4px auto 0;
      text-align: center;
      display: inline-block;
    }

.pricing-callout {
      max-width: 880px;
      margin: 36px auto 0;
      padding: 22px 26px;
      background: var(--bg-panel);
      border-left: 4px solid var(--brand);
      border-radius: 6px;
      font-size: 14px;
      color: var(--ink);
      line-height: 1.65;
    }

.pricing-callout strong { color: var(--brand-dark); }

/* =========================================================
       INSTALLATION PROCESS (7 steps)
       ========================================================= */

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

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

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

.install-step:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 29px;
      top: 78px; /* clears the 60px circle + 18px label-room */
      width: 2px;
      height: calc(100% - 78px);
      background: linear-gradient(180deg, var(--brand-light) 0%, var(--line) 50%);
      opacity: 0.5;
      z-index: 1;
    }

.install-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;
    }

.install-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;
    }

.install-step-num svg {
      width: 28px;
      height: 28px;
      stroke: #fff;
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.install-step:hover .install-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);
    }

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

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

.install-cta-wrap {
      text-align: center;
      margin-top: 40px;
    }

@media (max-width: 600px) {
      .install-step { grid-template-columns: 50px 1fr; gap: 18px; }
      .install-step-num { width: 50px; height: 50px; }
      .install-step-num svg { width: 24px; height: 24px; }
      .install-step-num::after { bottom: -20px; font-size: 10px; }
      .install-step:not(:last-child)::before { left: 24px; top: 50px; height: calc(100% - 50px); }
    }

/* =========================================================
       FAQ ACCORDION
       ========================================================= */

.faq-list {
      max-width: 880px;
      margin: 0 auto;
    }

.faq-item {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }

.faq-item summary {
      padding: 18px 24px;
      cursor: pointer;
      font-weight: 600;
      color: var(--heading);
      list-style: none;
      position: relative;
      padding-right: 50px;
    }

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

.faq-item summary::after {
      content: "+";
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      color: var(--brand);
      font-weight: 400;
      transition: transform 0.2s;
    }

.faq-item[open] summary::after { content: "−"; }

.faq-item .faq-body {
      padding: 0 24px 20px;
      color: var(--text);
      font-size: 14px;
    }

/* =========================================================
       TESTIMONIALS
       ========================================================= */

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

.testimonial-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

.testimonial-stars {
      color: var(--accent-warn);
      font-size: 16px;
      margin-bottom: 12px;
      letter-spacing: 2px;
    }

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

.testimonial-author {
      font-weight: 700;
      color: var(--heading);
      font-size: 14px;
    }

/* =========================================================
       ABOUT STRIP
       ========================================================= */

.about-strip {
      background: var(--ink);
      color: #fff;
      padding: 70px 0;
    }

.about-strip h2 { color: #fff; }

.about-strip h2 strong { color: var(--brand-light); }

.about-strip p { color: rgba(255,255,255,0.85); }

.about-stats {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 18px;
      margin-top: 30px;
    }

.about-stat {
      text-align: center;
      padding: 18px 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
    }

.about-stat .stat-num {
      font-family: 'Poppins', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--brand-light);
      display: block;
      line-height: 1.1;
    }

.about-stat .stat-label {
      font-size: 12px;
      color: rgba(255,255,255,0.85);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 1.35;
      display: block;
      margin-top: 6px;
    }

/* =========================================================
       EXPLORE OUR OTHER SOLUTIONS
       ========================================================= */

.other-solutions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

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

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

.solution-card h3 {
      font-size: 18px;
      margin-bottom: 12px;
      color: var(--heading);
    }

.solution-card p {
      font-size: 13.5px;
      color: var(--text);
      line-height: 1.6;
      margin-bottom: 22px;
      flex-grow: 1;
    }

.solution-link {
      display: inline-block;
      margin: 0 auto;
      padding: 9px 24px;
      border: 2px solid var(--brand);
      color: var(--brand);
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.2s;
    }

.solution-link:hover {
      background: var(--brand);
      color: #fff;
    }

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

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

/* =========================================================
       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;
    }

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

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

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

.compare-table td.highlight {
      background: rgba(167, 190, 57, 0.06);
      color: var(--ink);
      font-weight: 500;
    }

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

/* =========================================================
       5-IN-1 STACK DIAGRAM (premium dark-panel edition)
       ========================================================= */

.stack-diagram-wrap {
      max-width: 1080px;
      margin: 0 auto 50px;
      display: grid;
      grid-template-columns: minmax(300px, 420px) 1fr;
      gap: 44px;
      align-items: start;
    }

/* DARK PRESENTATION PANEL */

.stack-stage {
      position: relative;
      padding: 36px 24px 32px;
      background:
        radial-gradient(ellipse at 50% 18%, rgba(180, 200, 87, 0.18) 0%, transparent 55%),
        linear-gradient(160deg, #1a2429 0%, #2d3940 55%, #1f2a30 100%);
      border-radius: 18px;
      box-shadow:
        0 24px 60px rgba(20, 28, 32, 0.35),
        0 8px 18px rgba(20, 28, 32, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

/* Subtle grid texture inside the stage */

.stack-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      opacity: 0.6;
    }

.stack-stage svg {
      display: block;
      width: 100%;
      height: auto;
      max-width: 340px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

/* SVG component groups (the rects) */

.stack-stage .stack-part {
      cursor: pointer;
      transition: transform 0.25s ease;
    }

.stack-stage .stack-part .stack-body-rect {
      transition: filter 0.25s ease;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    }

.stack-stage .stack-part:hover .stack-body-rect,
    .stack-stage .stack-part:focus-visible .stack-body-rect {
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    }

.stack-stage .stack-part.is-active .stack-body-rect {
      filter:
        drop-shadow(0 0 14px rgba(180, 200, 87, 0.5))
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
    }

/* Number badges */

.stack-stage .stack-num-circle {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
      transition: filter 0.2s;
    }

.stack-stage .stack-part.is-active .stack-num-circle {
      filter: drop-shadow(0 0 10px rgba(180, 200, 87, 0.7));
    }

.stack-stage .stack-num-text {
      fill: #fff;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 13px;
      pointer-events: none;
    }

.stack-stage .stack-label {
      fill: #fff;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 11.5px;
      letter-spacing: 0.2px;
      pointer-events: none;
    }

.stack-stage .stack-sublabel {
      fill: rgba(255, 255, 255, 0.55);
      font-family: 'Open Sans', sans-serif;
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.3px;
      pointer-events: none;
    }

.stack-stage .stack-flow-label {
      fill: rgba(180, 200, 87, 0.75);
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 9px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      pointer-events: none;
    }

/* Ambient shimmer on the active component (very subtle) */

@keyframes stack-shimmer {
      0%, 100% { opacity: 0.0; }
      50%      { opacity: 0.5; }
    }

.stack-stage .stack-part .stack-shimmer {
      opacity: 0;
      pointer-events: none;
    }

.stack-stage .stack-part.is-active .stack-shimmer {
      animation: stack-shimmer 3.6s ease-in-out infinite;
    }

@media (prefers-reduced-motion: reduce) {
      .stack-stage .stack-part .stack-shimmer { animation: none; }
    }

/* Stage caption below SVG */

.stack-stage-caption {
      position: relative;
      z-index: 1;
      text-align: center;
      margin-top: 18px;
      color: rgba(255, 255, 255, 0.5);
      font-family: 'Poppins', sans-serif;
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

.stack-stage-caption strong {
      color: rgba(180, 200, 87, 0.95);
      font-weight: 700;
    }

/* RIGHT COLUMN — selector pills + detail card */

.stack-detail-col {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

.stack-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

.stack-pill {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 16px 8px 8px;
      font-family: 'Open Sans', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-soft);
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

.stack-pill .stack-pill-num {
      background: linear-gradient(135deg, #b6cc4d 0%, #a7be39 100%);
      color: #fff;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 700;
      transition: all 0.2s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15);
    }

.stack-pill:hover {
      border-color: var(--brand);
      color: var(--heading);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

.stack-pill.is-active {
      border-color: var(--brand);
      background: linear-gradient(135deg, #fafbf6 0%, #f1f4e3 100%);
      color: var(--brand-dark);
      box-shadow: 0 4px 14px rgba(167, 190, 57, 0.18);
    }

.stack-pill.is-active .stack-pill-num {
      background: linear-gradient(135deg, #8ea230 0%, #4d5c14 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 3px rgba(167,190,57,0.18);
    }

/* DETAIL CARD — premium */

.stack-detail-card {
      position: relative;
      background:
        linear-gradient(180deg, #ffffff 0%, #fafbf6 100%);
      border: 1px solid var(--line);
      border-left: 4px solid transparent;
      border-image: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%) 1;
      border-radius: 12px;
      padding: 28px 30px 26px;
      box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.06),
        0 4px 8px rgba(0, 0, 0, 0.03);
      min-height: 220px;
      overflow: hidden;
    }

/* Large faint number watermark in the corner */

.stack-detail-card::before {
      content: attr(data-watermark);
      position: absolute;
      top: -22px;
      right: -8px;
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: 160px;
      line-height: 1;
      color: rgba(167, 190, 57, 0.06);
      pointer-events: none;
      letter-spacing: -8px;
    }

.stack-detail-card .stack-detail-eyebrow {
      position: relative;
      font-family: 'Poppins', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 10px;
    }

.stack-detail-card h3 {
      position: relative;
      font-size: 22px;
      font-weight: 700;
      color: var(--heading);
      margin: 0 0 14px;
      padding-bottom: 0;
      letter-spacing: -0.2px;
    }

.stack-detail-card p {
      position: relative;
      font-size: 14.5px;
      line-height: 1.75;
      color: var(--ink-soft);
      margin: 0 0 14px;
    }

.stack-detail-card p:last-child { margin-bottom: 0; }

.stack-detail-card .stack-detail-specs {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px dashed var(--line);
    }

.stack-detail-card .stack-detail-specs span {
      background: linear-gradient(135deg, rgba(180, 200, 87, 0.12) 0%, rgba(167, 190, 57, 0.06) 100%);
      color: var(--brand-dark);
      font-family: 'Poppins', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 4px;
      border: 1px solid rgba(167, 190, 57, 0.18);
      letter-spacing: 0.2px;
    }

@media (max-width: 760px) {
      .stack-diagram-wrap {
        grid-template-columns: 1fr;
        gap: 26px;
      }
      .stack-stage { padding: 28px 16px 24px; }
      .stack-stage svg { max-width: 280px; }
      .stack-detail-card { padding: 22px; min-height: 0; }
      .stack-detail-card::before { font-size: 110px; top: -10px; }
      .stack-detail-card h3 { font-size: 19px; }
    }

/* =========================================================
       COVERAGE / BRANCHES
       ========================================================= */

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

.coverage-card {
      background: var(--bg-panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px;
    }

.coverage-card h3 {
      font-size: 18px;
      margin-bottom: 14px;
      color: var(--heading);
    }

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

.coverage-card .coverage-region {
      font-size: 13.5px;
      color: var(--ink-soft);
      margin-bottom: 16px;
      line-height: 1.65;
    }

.coverage-card .coverage-addr {
      font-size: 13px;
      color: var(--text);
      padding-top: 14px;
      border-top: 1px solid var(--line);
      margin-bottom: 14px;
    }

.coverage-card .coverage-cta {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: var(--brand-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: color 0.2s, transform 0.2s;
    }

.coverage-card .coverage-cta:hover {
      color: var(--brand);
      transform: translateX(2px);
    }

.coverage-card .coverage-cta::after {
      content: " →";
      transition: margin 0.2s;
    }

.coverage-card .coverage-cta:hover::after {
      margin-left: 3px;
    }

/* =========================================================
       ACCREDITATIONS
       ========================================================= */

.accreditation-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }

.accreditation-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 28px 22px;
      text-align: center;
    }

.accreditation-logo-img {
      max-width: 140px;
      max-height: 80px;
      width: auto;
      height: auto;
      object-fit: contain;
      margin: 0 auto 16px;
      display: block;
    }

/* Old .accreditation-logo (text-based) — keeping rule in case any card uses it */

.accreditation-logo {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      font-weight: 700;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }

.accreditation-card h3 {
      font-size: 16px;
      margin-bottom: 8px;
      color: var(--heading);
    }

.accreditation-card p {
      font-size: 13px;
      color: var(--text);
      line-height: 1.6;
    }

/* =========================================================
       INLINE CTA CARD (soft olive)
       ========================================================= */

.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: 40px auto 0;
      max-width: 880px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

.inline-cta-text h3 {
      font-size: 18px;
      margin-bottom: 4px;
    }

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

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

/* =========================================================
       CLOSING CTA BANNER
       ========================================================= */

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

/* Subtle backdrop pattern for depth */

.closing-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06) 0%, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
      pointer-events: none;
    }

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

.closing-cta h2 { color: #fff; margin-bottom: 14px; }

.closing-cta h2 strong { color: #fff; }

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

/* =========================================================
       QUOTE FORM (inside closing-cta)
       ========================================================= */

.quote-form-wrap {
      max-width: 760px;
      margin: 0 auto;
      background: #fff;
      border-radius: 14px;
      padding: 40px 44px 36px;
      text-align: left;
      box-shadow:
        0 24px 60px rgba(20, 28, 32, 0.32),
        0 8px 18px rgba(20, 28, 32, 0.18);
      color: var(--text);
    }

.quote-form-header {
      text-align: center;
      margin-bottom: 30px;
    }

.quote-form-header .quote-eyebrow {
      display: inline-block;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 10px;
    }

.quote-form-header h3 {
      font-size: 22px;
      font-weight: 700;
      color: var(--heading);
      margin: 0 0 8px;
      padding-bottom: 0;
    }

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

/* Field rows */

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

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

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

.quote-field label {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--heading);
      letter-spacing: 0.3px;
    }

.quote-field label .req {
      color: var(--brand);
      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;
      font: inherit;
      font-size: 14px;
      color: var(--heading);
      background: var(--bg-panel);
      border: 1.5px solid var(--line);
      border-radius: 7px;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      font-family: 'Open Sans', sans-serif;
    }

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

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

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

.quote-field .field-error {
      font-size: 12px;
      color: #c0392b;
      margin-top: 2px;
      min-height: 16px;
    }

/* Radio groups (bill range / contact time) */

.quote-radio-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

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

.quote-radio-options label {
      flex: 1;
      min-width: 120px;
      padding: 10px 14px;
      background: var(--bg-panel);
      border: 1.5px solid var(--line);
      border-radius: 7px;
      cursor: pointer;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-soft);
      text-align: center;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.2px;
    }

.quote-radio-options input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

.quote-radio-options input[type="radio"]:checked + span {
      background: linear-gradient(135deg, rgba(180, 200, 87, 0.18) 0%, rgba(167, 190, 57, 0.12) 100%);
      border-color: var(--brand);
      color: var(--brand-dark);
      box-shadow: 0 0 0 1px var(--brand);
    }

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

/* Wrap the visible state in a span so the radio can be a sibling */

.quote-radio-options label span.radio-pill {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background: transparent;
      border: 0;
    }

/* Consent checkbox */

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

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

/* Submit + summary row */

.quote-form-footer {
      margin-top: 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

.quote-submit {
      background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 50%, var(--brand-dark) 100%);
      color: #fff;
      border: 0;
      padding: 14px 38px;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.4px;
      cursor: pointer;
      box-shadow:
        0 6px 18px rgba(167, 190, 57, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
      transition: transform 0.18s, box-shadow 0.18s;
      min-width: 240px;
    }

.quote-submit:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow:
        0 10px 24px rgba(167, 190, 57, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

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

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

/* Honeypot — hidden from users */

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

/* Error banner (form-wide) */

.quote-form-error {
      display: none;
      background: #fdf3f1;
      border: 1px solid #f5c6c1;
      color: #c0392b;
      padding: 12px 16px;
      border-radius: 7px;
      font-size: 13.5px;
      margin-bottom: 18px;
      text-align: center;
    }

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

/* Success state */

.quote-form-success {
      display: none;
      text-align: center;
      padding: 50px 30px;
    }

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

.quote-form-success .success-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 22px;
      background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 22px rgba(167, 190, 57, 0.35);
    }

.quote-form-success .success-icon svg {
      width: 36px;
      height: 36px;
      stroke: #fff;
      fill: none;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.quote-form-success h3 {
      font-size: 24px;
      font-weight: 700;
      color: var(--heading);
      margin-bottom: 12px;
      padding-bottom: 0;
    }

.quote-form-success p {
      font-size: 15px;
      color: var(--ink-soft);
      max-width: 460px;
      margin: 0 auto 8px;
      line-height: 1.7;
    }

.quote-form-success .success-meta {
      font-size: 13px;
      color: var(--ink-soft);
      margin-top: 18px;
    }

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

/* Direct-call alternative below the form */

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

.quote-alt strong { color: #fff; }

.quote-alt a {
      color: #fff;
      font-weight: 700;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
      padding-bottom: 1px;
    }

.quote-alt a:hover { border-bottom-color: #fff; color: #fff; }

@media (max-width: 760px) {
      .quote-form-wrap { padding: 30px 20px 26px; }
      .quote-form-grid { grid-template-columns: 1fr; gap: 14px; }
      .quote-radio-options label { min-width: 0; }
      .quote-form-header h3 { font-size: 19px; }
    }

.closing-cta h2 { color: #fff; margin-bottom: 16px; }

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

.closing-cta p {
      color: rgba(255,255,255,0.95);
      max-width: 720px;
      margin: 0 auto 32px;
      font-size: 16px;
    }

.closing-cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

/* =========================================================
       FLOATING MOBILE CTA
       ========================================================= */

.float-cta {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 90;
      background: var(--brand);
      color: #fff;
      padding: 14px 22px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      display: none;
    }

/* Only show on mobile/tablet, after scroll */

@media (max-width: 980px) {
      .float-cta.visible { display: inline-block; }
    }

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

/* =========================================================
       FOOTER
       ========================================================= */

/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 1100px) {
      h1 { font-size: 30px; }
      h2 { font-size: 26px; }
      h3 { font-size: 19px; }
      .section { padding: 70px 0; }
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
      .ai-features { grid-template-columns: repeat(2, 1fr); }
      .accreditation-grid { grid-template-columns: repeat(3, 1fr); }
      .coverage-grid { grid-template-columns: repeat(2, 1fr); }
      .about-stats { grid-template-columns: repeat(3, 1fr); }
    }

@media (max-width: 980px) {
      .two-col, .two-col-equal {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .testimonial-grid { grid-template-columns: 1fr; }
      .coverage-grid { grid-template-columns: 1fr; }
      .about-stats { grid-template-columns: repeat(2, 1fr); }
      .accreditation-grid { grid-template-columns: repeat(2, 1fr); }
      .inline-cta { flex-direction: column; text-align: center; }
    }

@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; }
      .benefits-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
      .ai-features { grid-template-columns: 1fr; }
      .accreditation-grid { grid-template-columns: 1fr; }
      .about-stats { grid-template-columns: 1fr; }
      .closing-cta-buttons { flex-direction: column; align-items: stretch; }
      .closing-cta-buttons a { text-align: center; }
    }

/* Reduced motion */

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

/* ====== Summary-lift block: GEO-quotable 80-word factual summary
       Visually distinct so AI engines and human skimmers both treat it as
       the canonical answer block. Targeted by SpeakableSpecification too. ====== */

.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); }

/* ==============================================================================
   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;
  }
}

/* ============================================
   PREMIUM GRADIENT PILL CTA — v23 canonical
   ============================================ */
.btn-primary {
  display: inline-block !important;
  padding: 14px 36px !important;
  background: linear-gradient(135deg, #b8d63d 0%, #8eb022 50%, #6b8418 100%) !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(142, 176, 34, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(142, 176, 34, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #c5e045 0%, #9bbf28 50%, #78941c 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(142, 176, 34, 0.35) !important;
}

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

/* ============================================
   PRODUCT CARD IMAGE — clean (no dark frame)
   ============================================ */
.pricing-card .pricing-card-image,
.pricing-card-image {
  background: #ffffff !important;
  background-color: #ffffff !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px 12px 0 0 !important;
  display: block !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
}