/*
Theme Name: Plumber Mesa AZ
Theme URI: https://www.example.com/
Author: Your Company Name
Author URI: https://www.example.com/
Description: A custom, fully editable WordPress theme for a local plumbing service business (Mesa, AZ and the East Valley). Ported from a hand-built static HTML site, structured for the WordPress template hierarchy, and built to work with Elementor out of the box. Includes dedicated page templates for every service and service-area landing page, Customizer-driven contact details, a native WP_Query-powered blog, and a working contact form.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plumber-mesa-az
Tags: local-business, blog, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

-----------------------------------------------------------------------
DESIGN SYSTEM (do not rename these custom properties -- every section
of every page template references them directly):
  --navy / --navy-dark       primary brand color
  --terracotta / -dark       accent color
  --charcoal                 body text color
  --bg / --bg-alt            page background / alternate section background
  --border-soft              hairline border color used on cards
  --shadow-sm / --shadow-md  card + hover elevation
  --radius / --btn-radius    corner rounding for cards / buttons
  --container                max content width
Fonts: Plus Jakarta Sans (headings/UI) + Inter (body), loaded in
functions.php via wp_enqueue_style() from Google Fonts.
-----------------------------------------------------------------------
*/

:root{
    --navy:#00487A;
    --navy-dark:#003558;
    --terracotta:#C97B63;
    --terracotta-dark:#af6350;
    --bg:#FFFFFF;
    --bg-alt:#F6F8FA;
    --charcoal:#675F57;
    --card-bg:#ffffff;
    --border-soft:rgba(0,72,122,0.10);
    --shadow-sm:0 2px 10px rgba(0,40,70,0.06);
    --shadow-md:0 14px 34px rgba(0,40,70,0.14);
    --radius:14px;
    --btn-radius:10px;
    --container:1220px;
  }

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

html{scroll-behavior:smooth;scroll-padding-top:100px;}

body{
    margin:0;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--charcoal);
    background:var(--bg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

img{max-width:100%;display:block;}

a{text-decoration:none;color:inherit;}

ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    color:var(--navy);
    margin:0 0 .5em;
    line-height:1.18;
    font-weight:700;
  }

p{margin:0 0 1em;}

.container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:clamp(1.25rem,4vw,2.5rem);
  }

section{padding-block:clamp(3.5rem,7vw,6rem);}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--terracotta);
    margin-bottom:.9em;
  }

.section-head{max-width:760px;margin:0 0 2.75rem;}

.section-head.center{margin-inline:auto;text-align:center;}

.section-head p{color:var(--charcoal);font-size:1.05rem;}

/* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45em;
    padding:.62em 1.3em;
    border-radius:var(--btn-radius);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;
    font-size:.86rem;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }

.btn svg{width:15px;height:15px;flex-shrink:0;}

.btn-primary{background:var(--terracotta);color:#fff;}

.btn-primary:hover{background:var(--terracotta-dark);transform:translateY(-2px);box-shadow:var(--shadow-md);}

.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}

.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}

.btn-navy{background:var(--navy);color:#fff;}

.btn-navy:hover{background:var(--navy-dark);transform:translateY(-2px);box-shadow:var(--shadow-md);}

.btn-white{background:#fff;color:var(--terracotta);}

.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* ===== Header ===== */
  #site-header{
    position:sticky;top:0;z-index:200;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-soft);
  }

#site-header .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding-block:.4rem;
    gap:1.5rem;
  }

.logo{display:inline-flex;align-items:center;}

.logo img{height:74px;width:auto;}

.main-nav{display:flex;align-items:center;}

.nav-list{display:flex;align-items:center;gap:1.9rem;}

.nav-list > li{position:relative;}

.nav-list > li > a{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:600;font-size:.95rem;color:var(--navy);
    position:relative;padding-block:.3em;display:inline-block;
  }

.nav-list > li > a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
    background:var(--terracotta);transition:width .2s ease;
  }

.nav-list > li > a:hover::after{width:100%;}

.nav-drop-btn{
    background:none;border:none;cursor:pointer;padding:.3em 0;
    display:flex;align-items:center;gap:.4em;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;color:var(--navy);
  }

.nav-drop-btn .chevron{width:13px;height:13px;transition:transform .2s ease;}

.nav-item-dropdown.open .nav-drop-btn .chevron{transform:rotate(180deg);}

.mega-menu,.dropdown-menu{
    position:absolute;top:calc(100% + 1.1rem);
    background:#fff;border-radius:var(--btn-radius);box-shadow:var(--shadow-md);
    padding:1.75rem;opacity:0;visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    border:1px solid var(--border-soft);
  }

.mega-menu{display:flex;gap:3rem;right:-2rem;min-width:260px;}

.dropdown-menu{left:0;min-width:230px;}

.mega-col h4{
    font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--terracotta);margin-bottom:.9rem;
  }

.mega-col ul li,.dropdown-menu ul li{margin-bottom:.6rem;}

.mega-col a,.dropdown-menu a{font-size:.92rem;color:var(--charcoal);white-space:nowrap;}

.mega-col a:hover,.dropdown-menu a:hover{color:var(--terracotta);}

@media (min-width:961px){
    .nav-item-dropdown:hover .mega-menu,
    .nav-item-dropdown:hover .dropdown-menu,
    .nav-item-dropdown.open .mega-menu,
    .nav-item-dropdown.open .dropdown-menu{
      opacity:1;visibility:visible;transform:translateY(0);
    }
  }

.header-actions{display:flex;align-items:center;gap:1rem;}

.nav-toggle{
    display:none;background:none;border:none;cursor:pointer;padding:.4rem;
  }

.nav-toggle svg{width:26px;height:26px;color:var(--navy);}

/* ===== Hero ===== */
  #hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(125deg, rgba(0,32,56,.94), rgba(0,58,98,.9) 55%, rgba(0,72,122,.88)), var(--bg-image, none) center/cover no-repeat;
    color:#fff;
    padding-block:clamp(4rem,9vw,6.5rem);
  }

#hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(600px 400px at 88% 12%, rgba(201,123,99,.35), transparent 70%);
  }

#hero .container{position:relative;z-index:1;}

#hero .hero-inner{
    display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  }

#hero .eyebrow{
    color:#ffe3d6;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
    padding:.4em .9em;border-radius:100px;
  }

#hero h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.01em;}

#hero p.lead{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:640px;}

#hero .hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}

.hero-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    padding:2rem 1.9rem;
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-md);
  }

.hero-card-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;}

.hero-card-top .icon-circle{background:var(--terracotta);}

.hero-card-top strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;color:#fff;}

.hero-card-top span{font-size:.85rem;color:rgba(255,255,255,.75);}

.hero-card .btn{width:100%;margin-bottom:1.5rem;}

.hero-trust{display:flex;flex-direction:column;gap:.9rem;}

.hero-trust li{
    display:flex;align-items:center;gap:.7em;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.92rem;
    color:rgba(255,255,255,.95);
    padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.14);
  }

.hero-trust li:last-child{border-bottom:none;padding-bottom:0;}

.hero-trust svg{width:18px;height:18px;color:var(--terracotta);flex-shrink:0;}

/* ===== Trust strip ===== */
  #trust-strip{background:var(--bg-alt);padding-block:clamp(2.25rem,5vw,3rem);border-bottom:1px solid var(--border-soft);}

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

.trust-item{display:flex;align-items:center;gap:.9rem;}

.trust-item .icon-circle{width:48px;height:48px;flex-shrink:0;}

.trust-item strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);font-size:.98rem;}

.trust-item span{font-size:.85rem;color:var(--charcoal);}

/* Icon circle */
  .icon-circle{
    width:56px;height:56px;border-radius:50%;
    background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }

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

.icon-circle.terracotta{background:var(--terracotta);}

.icon-square{
    width:52px;height:52px;border-radius:var(--btn-radius);
    background:var(--terracotta);color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }

.icon-square svg{width:24px;height:24px;}

/* ===== Why Us (numbered split list) ===== */
  #why-us{background:var(--bg);}

.why-us-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start;}

.why-us-intro{position:sticky;top:110px;}

.why-us-intro .btn{margin-top:.5rem;}

.why-us-list{display:flex;flex-direction:column;}

.why-us-list li{
    display:flex;gap:1.5rem;padding-block:1.6rem;
    border-bottom:1px solid var(--border-soft);
  }

.why-us-list li:first-child{padding-top:0;}

.why-us-list li:last-child{border-bottom:none;padding-bottom:0;}

.why-num{
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
    font-size:2rem;color:var(--terracotta);opacity:.5;
    flex-shrink:0;width:2.4ch;line-height:1;
  }

.why-us-list h3{margin-bottom:.4em;font-size:1.08rem;}

.why-us-list p{margin:0;font-size:.96rem;}

/* ===== Plumbing services (card grid) ===== */
  #plumbing-services{background:var(--bg);}

.grid{display:grid;gap:1.75rem;}

.grid-3{grid-template-columns:repeat(3,1fr);}

.card{
    background:var(--card-bg);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    padding:2rem 1.75rem;
    box-shadow:var(--shadow-sm);
    transition:transform .22s ease, box-shadow .22s ease;
    scroll-margin-top:110px;
  }

.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}

.card .icon-circle{margin-bottom:1.25rem;}

.card h3{font-size:1.1rem;margin-bottom:.55em;position:relative;padding-bottom:.6em;}

.card h3::after{
    content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;
    background:var(--terracotta);border-radius:2px;
  }

.card p{font-size:.96rem;margin-bottom:0;color:var(--charcoal);}

/* ===== Areas We Serve (split intro + card grid) ===== */
  #service-areas{background:var(--bg);}

.areas-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start;}

.areas-intro .btn{margin-top:.75rem;}

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

.area-card{
    display:flex;align-items:center;gap:.9rem;
    padding:1.05rem 1.15rem;background:#fff;
    border:1px solid var(--border-soft);border-radius:var(--btn-radius);
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--navy);
    transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    scroll-margin-top:110px;
  }

.area-card:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-sm);}

.area-card .icon-square{width:38px;height:38px;}

.area-card .icon-square svg{width:17px;height:17px;}

.area-card span{font-size:.94rem;}

/* ===== Narrative sections ===== */
  .narrative-split{
    display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  }

.narrative-split img{border-radius:var(--radius);box-shadow:var(--shadow-md);}

#trusted-plumber{background:var(--bg-alt);}

#residential{
    background:linear-gradient(180deg, rgba(0,40,68,.88), rgba(0,53,88,.92)), var(--bg-image, none) center/cover no-repeat;
    color:#fff;text-align:center;
  }

#residential .section-head p{color:rgba(255,255,255,.9);}

#residential h2{color:#fff;}

#residential .container{max-width:820px;}

/* ===== FAQ ===== */
  #faq{background:var(--bg);}

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

.faq-item{
    border-bottom:1px solid var(--border-soft);
  }

.faq-item summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.4rem 0;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--navy);
    font-size:1.05rem;
  }

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

.faq-item .faq-icon{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;
    background:var(--bg-alt);color:var(--terracotta);
    display:flex;align-items:center;justify-content:center;
    transition:transform .25s ease;
  }

.faq-item[open] .faq-icon{transform:rotate(45deg);}

.faq-item .faq-icon svg{width:16px;height:16px;}

.faq-item p{padding-bottom:1.5rem;margin:0;max-width:700px;}

/* ===== CTA band ===== */
  #cta-band{
    background:linear-gradient(125deg, rgba(179,88,63,.93), rgba(201,123,99,.88)), var(--bg-image, none) center/cover no-repeat;
    color:#fff;text-align:center;
  }

#cta-band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem);}

#cta-band p{color:rgba(255,255,255,.95);max-width:650px;margin-inline:auto;font-size:1.05rem;}

#cta-band .cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.75rem;}

/* ===== Footer ===== */
  #site-footer{background:var(--navy-dark);color:rgba(255,255,255,.85);padding-top:clamp(3rem,6vw,4.5rem);}

.footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;
    padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12);
  }

.footer-grid h4{color:#fff;font-size:1rem;margin-bottom:1.1rem;}

.footer-about .logo{
    display:inline-flex;background:#fff;padding:.75rem 1.1rem;
    border-radius:var(--btn-radius);margin-bottom:1.25rem;
  }

.footer-about .logo img{height:64px;width:auto;}

.footer-about p{font-size:.92rem;color:rgba(255,255,255,.72);}

.footer-social{display:flex;gap:.75rem;margin-top:1rem;}

.footer-social a{
    width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease;
  }

.footer-social a:hover{background:var(--terracotta);}

.footer-social svg{width:16px;height:16px;color:#fff;}

.footer-grid ul li{margin-bottom:.65rem;}

.footer-grid ul a{font-size:.92rem;color:rgba(255,255,255,.78);transition:color .2s ease;}

.footer-grid ul a:hover{color:var(--terracotta);}

.footer-contact li{display:flex;gap:.6em;font-size:.92rem;color:rgba(255,255,255,.78);margin-bottom:.85rem;}

.footer-contact svg{width:17px;height:17px;color:var(--terracotta);flex-shrink:0;margin-top:.15em;}

.footer-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
    padding-block:1.5rem;font-size:.85rem;color:rgba(255,255,255,.6);
  }

.footer-bottom a{color:rgba(255,255,255,.6);}

.footer-bottom a:hover{color:#fff;}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .trust-grid{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .why-us-grid{grid-template-columns:1fr;}
    .why-us-intro{position:static;}
    .areas-grid{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .trust-grid{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr;}
    .areas-cards{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Mobile nav (slide-down accordion) ===== */
  @media (max-width:960px){
    .main-nav.nav-open{
      display:block;
      position:absolute;top:100%;left:0;right:0;
      background:#fff;padding:1.25rem clamp(1.25rem,4vw,2.5rem) 1.75rem;
      box-shadow:var(--shadow-md);
      border-top:1px solid var(--border-soft);
      max-height:calc(100vh - 70px);overflow-y:auto;
    }
    .main-nav.nav-open .nav-list{flex-direction:column;align-items:stretch;gap:0;}
    .main-nav.nav-open .nav-list > li{border-bottom:1px solid var(--border-soft);}
    .main-nav.nav-open .nav-list > li > a,
    .main-nav.nav-open .nav-drop-btn{width:100%;padding-block:.9rem;justify-content:space-between;}
    .main-nav.nav-open .mega-menu,
    .main-nav.nav-open .dropdown-menu{
      position:static;opacity:1;visibility:visible;transform:none;
      display:none;box-shadow:none;border:none;padding:.25rem 0 1rem 1rem;
      min-width:0;
    }
    .main-nav.nav-open .nav-item-dropdown.open .mega-menu,
    .main-nav.nav-open .nav-item-dropdown.open .dropdown-menu{display:flex;flex-direction:column;gap:1.25rem;}
    .main-nav.nav-open .mega-menu{flex-direction:column;gap:1.25rem;}
  }

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .why-us-grid{grid-template-columns:1fr;}
    .why-us-intro{position:static;}
    .areas-grid{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .grid-3{grid-template-columns:1fr;}
    .areas-cards{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

#hero .hero-inner{
    display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start;
  }

#hero h1{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.01em;}

#hero p.lead{font-size:1.08rem;color:rgba(255,255,255,.9);max-width:640px;}

#hero .hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;}

/* Quote form card */
  .hero-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    padding:2rem 1.9rem;
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-md);
  }

.contact-form{display:flex;flex-direction:column;gap:1rem;}

.contact-form label{
    display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;
    font-size:.85rem;color:rgba(255,255,255,.9);margin-bottom:.4rem;
  }

.contact-form input,.contact-form textarea{
    width:100%;padding:.8em 1em;border-radius:var(--btn-radius);
    border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
    color:#fff;font-family:'Inter',sans-serif;font-size:.95rem;
  }

.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.55);}

.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--terracotta);outline-offset:1px;}

.contact-form textarea{resize:vertical;min-height:90px;}

.contact-form .btn{width:100%;margin-top:.25rem;}

.contact-form-note{
    text-align:center;font-size:.85rem;color:rgba(255,255,255,.7);margin-top:1rem;margin-bottom:0;
  }

.contact-form-note a{color:#fff;font-weight:700;text-decoration:underline;}

/* ===== How to reach us (4-card grid) ===== */
  #how-to-reach{background:var(--bg);}

.grid-4{grid-template-columns:repeat(4,1fr);}

.card h3{font-size:1.05rem;margin-bottom:.55em;position:relative;padding-bottom:.6em;}

.card p{font-size:.94rem;margin-bottom:0;color:var(--charcoal);}

/* ===== Why trust (centered narrative band) ===== */
  #why-trust{background:var(--bg-alt);text-align:center;}

#why-trust .container{max-width:820px;}

/* ===== What to expect (numbered split list) ===== */
  #what-to-expect{background:var(--bg);}

/* ===== Services checklist ===== */
  #services-list{background:var(--bg-alt);}

.check-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.5rem;margin-bottom:1.5rem;}

.check-list li{
    display:flex;align-items:flex-start;gap:.85rem;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--navy);
    font-size:1rem;
  }

.check-list .icon-circle{width:32px;height:32px;flex-shrink:0;margin-top:.1rem;}

.check-list .icon-circle svg{width:15px;height:15px;}

/* ===== Local coverage (centered + chips) ===== */
  #local-coverage{background:var(--bg);text-align:center;}

#local-coverage .container{max-width:820px;}

.area-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.5rem;}

.area-chip{
    display:inline-flex;align-items:center;gap:.4em;
    padding:.5em 1.1em;border-radius:100px;
    background:var(--bg-alt);border:1px solid var(--border-soft);
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.86rem;color:var(--navy);
  }

.area-chip svg{width:13px;height:13px;color:var(--terracotta);}

/* ===== Warning signs band ===== */
  #warning-signs{background:var(--navy);color:rgba(255,255,255,.88);}

#warning-signs .eyebrow{color:#ffceba;}

#warning-signs h2{color:#fff;}

#warning-signs .section-head p{color:rgba(255,255,255,.78);}

.warning-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.5rem;margin-bottom:1.75rem;}

.warning-list li{
    display:flex;align-items:flex-start;gap:.9rem;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    border-radius:var(--btn-radius);padding:1rem 1.15rem;
    font-size:.95rem;color:rgba(255,255,255,.92);
  }

.warning-list .icon-square{width:34px;height:34px;flex-shrink:0;}

.warning-list .icon-square svg{width:16px;height:16px;}

#warning-signs .closing-note{color:rgba(255,255,255,.85);max-width:760px;}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .why-us-grid{grid-template-columns:1fr;}
    .why-us-intro{position:static;}
    .check-list{grid-template-columns:1fr;}
    .warning-list{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .grid-3{grid-template-columns:1fr;}
    .grid-4{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

ul,ol{margin:0;padding:0;list-style:none;}

#hero h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.01em;}

/* Icon circle/square */
  .icon-circle{
    width:56px;height:56px;border-radius:50%;
    background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }

/* ===== Emergency vs routine comparison ===== */
  #what-counts{
    position:relative;
    background:
      linear-gradient(115deg, rgba(201,123,99,.09) 0%, rgba(201,123,99,.09) 48%, rgba(0,72,122,.05) 52%, rgba(0,72,122,.05) 100%),
      var(--bg);
  }

.urgency-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}

.urgency-card{
    position:relative;overflow:hidden;border-radius:var(--radius);
    background:#fff;box-shadow:var(--shadow-md);
  }

.urgency-card.urgent{box-shadow:0 16px 34px rgba(201,123,99,.22);}

.urgency-card.routine{box-shadow:0 16px 34px rgba(0,72,122,.14);}

.urgency-card-head{
    display:flex;align-items:center;gap:.75em;
    padding:1.4rem 1.75rem;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;
    position:relative;
  }

.urgency-card.urgent .urgency-card-head{background:linear-gradient(120deg, var(--terracotta), var(--terracotta-dark));}

.urgency-card.routine .urgency-card-head{background:linear-gradient(120deg, var(--navy), var(--navy-dark));}

.urgency-card-head .badge-icon{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
  }

.urgency-card-head svg{width:20px;height:20px;flex-shrink:0;color:#fff;}

.urgency-card-head .tag{
    margin-left:auto;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(255,255,255,.22);padding:.3em .7em;border-radius:100px;font-weight:700;
  }

.urgency-card-body{padding:1.6rem 1.75rem 1.75rem;}

.urgency-card.urgent .urgency-card-body{background:rgba(201,123,99,.04);}

.urgency-card.routine .urgency-card-body{background:rgba(0,72,122,.03);}

.urgency-card li{
    display:flex;gap:.7em;align-items:flex-start;
    padding-block:.65rem;font-size:.95rem;color:var(--charcoal);
    border-bottom:1px solid rgba(0,0,0,.06);
  }

.urgency-card li:last-child{border-bottom:none;padding-bottom:0;}

.urgency-card li svg{width:16px;height:16px;flex-shrink:0;margin-top:.2rem;}

.urgency-card.urgent li svg{color:var(--terracotta);}

.urgency-card.routine li svg{color:var(--navy);}

#what-counts .closing-note{
    margin-top:1.75rem;max-width:760px;
    background:#fff;border:1px dashed var(--border-soft);border-radius:var(--btn-radius);
    padding:1rem 1.25rem;
  }

/* ===== Plain step list (no bold lead-ins) ===== */
  .step-list{display:flex;flex-direction:column;}

.step-list li{
    display:flex;gap:1.25rem;padding-block:1.25rem;
    border-bottom:1px solid var(--border-soft);
  }

.step-list li:first-child{padding-top:0;}

.step-list li:last-child{border-bottom:none;padding-bottom:0;}

.step-marker{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:var(--bg-alt);color:var(--terracotta);
    display:flex;align-items:center;justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;
  }

.step-list p{margin:0;font-size:.98rem;color:var(--charcoal);font-weight:400;line-height:1.75;}

#while-you-wait{background:var(--bg-alt);}

#how-it-works{background:var(--bg);}

#common-situations{background:var(--bg-alt);}

/* ===== Quick actions card (What to Do While You Wait) ===== */
  .quick-actions{
    max-width:760px;margin:0 auto 1.75rem;
    background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
    padding:.5rem 1.75rem;box-shadow:var(--shadow-sm);
  }

.quick-actions li{
    display:flex;align-items:center;gap:1.1rem;padding-block:1.15rem;
    border-bottom:1px solid var(--border-soft);
  }

.quick-actions li:last-child{border-bottom:none;}

.quick-actions .icon-circle{width:42px;height:42px;flex-shrink:0;}

.quick-actions .icon-circle svg{width:19px;height:19px;}

.quick-actions p{margin:0;font-size:.97rem;color:var(--charcoal);font-weight:400;line-height:1.6;}

/* ===== Timeline treatment (How Our Service Works) ===== */
  #how-it-works .step-list{position:relative;}

#how-it-works .step-list::before{
    content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;
    background:var(--border-soft);
  }

#how-it-works .step-marker{
    background:var(--navy);color:#fff;position:relative;z-index:1;
    box-shadow:0 0 0 4px var(--bg);
  }

/* ===== 24/7 statement band ===== */
  #always-on{
    background:linear-gradient(180deg, rgba(0,40,68,.9), rgba(0,53,88,.94)), var(--bg-image, none) center/cover no-repeat;
    color:#fff;text-align:center;
  }

#always-on .section-head p{color:rgba(255,255,255,.9);}

#always-on h2{color:#fff;}

#always-on .container{max-width:820px;}

.area-card{
    display:flex;align-items:center;gap:.9rem;
    padding:1.05rem 1.15rem;background:#fff;
    border:1px solid var(--border-soft);border-radius:var(--btn-radius);
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--navy);
    transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }

/* ===== RELATED SERVICES ===== */
  #related-services{background:var(--bg-alt);}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:960px;margin:0 auto;}

.related-card{display:block;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;}

.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

.related-card h3{font-size:1rem;margin-bottom:.4em;}

.related-card span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.85rem;color:var(--terracotta);}

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

.faq-item{border-bottom:1px solid var(--border-soft);}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .urgency-grid{grid-template-columns:1fr;}
    .areas-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .areas-cards{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Quick actions card (Signs section) ===== */
  #signs{background:var(--bg-alt);}

.quick-actions{
    max-width:780px;margin:0 auto 1.5rem;
    background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
    padding:.5rem 1.75rem;box-shadow:var(--shadow-sm);
  }

#signs .closing-note{max-width:780px;margin:0 auto;font-size:.96rem;}

/* ===== Card grid (Causes / Services) ===== */
  #causes{background:var(--bg);}

#services{background:var(--bg);}

.card{
    background:var(--card-bg);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    padding:2rem 1.75rem;
    box-shadow:var(--shadow-sm);
    transition:transform .22s ease, box-shadow .22s ease;
  }

.card p{font-size:.95rem;margin-bottom:0;color:var(--charcoal);}

/* ===== Timeline (Process) ===== */
  #process{background:var(--navy);color:rgba(255,255,255,.88);}

#process .eyebrow{color:#ffceba;}

#process h2{color:#fff;}

#process .section-head p{color:rgba(255,255,255,.78);}

.step-list{display:flex;flex-direction:column;position:relative;}

.step-list::before{
    content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;
    background:rgba(255,255,255,.18);
  }

.step-list li{
    display:flex;gap:1.25rem;padding-block:1.25rem;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

.step-marker{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
    background:var(--terracotta);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;
    box-shadow:0 0 0 4px var(--navy);
  }

.step-list p{margin:0;font-size:.98rem;color:rgba(255,255,255,.85);font-weight:400;line-height:1.75;}

/* ===== Narrative (Why local) ===== */
  #why-local{background:var(--bg-alt);}

.narrative-split{
    display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  }

.narrative-split img{
    width:100%;height:auto;max-height:360px;object-fit:cover;
    border-radius:var(--radius);box-shadow:var(--shadow-md);
  }

/* ===== Comparison (Main line vs simple clog) ===== */
  #compare{background:var(--bg);}

.urgency-card{position:relative;overflow:hidden;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-md);}

.urgency-card-head{
    display:flex;align-items:center;gap:.75em;
    padding:1.4rem 1.75rem;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.02rem;color:#fff;
  }

#compare .closing-note{
    margin-top:1.75rem;max-width:760px;
    background:var(--bg-alt);border:1px dashed var(--border-soft);border-radius:var(--btn-radius);
    padding:1rem 1.25rem;
  }

/* ===== Prevention checklist ===== */
  #prevention{background:var(--bg-alt);}

.check-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.5rem;margin-bottom:0;}

.check-list li{
    display:flex;align-items:flex-start;gap:.85rem;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;color:var(--navy);
    font-size:.98rem;
  }

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .urgency-grid{grid-template-columns:1fr;}
    .check-list{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .grid-3{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .narrative-split img{max-height:220px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Card grid (Causes / Services / Methods) ===== */
  #causes{background:var(--bg);}

#methods{background:var(--bg-alt);}

.grid-2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto;}

#methods .closing-note{max-width:820px;margin:1.75rem auto 0;text-align:center;}

/* ===== Comparison (Trenchless vs Excavation) ===== */
  #compare{background:var(--bg);}

.urgency-card-head{
    display:flex;align-items:center;gap:.75em;
    padding:1.4rem 1.75rem;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;color:#fff;
  }

.urgency-card-head .tag{
    margin-left:auto;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(255,255,255,.22);padding:.3em .6em;border-radius:100px;font-weight:700;
  }

#cta-band h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-2{grid-template-columns:1fr;}
    .urgency-grid{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

/* ===== Quick actions card (Signs) ===== */
  #signs{background:var(--bg-alt);}

/* ===== Checklist grid (Causes) ===== */
  #causes{background:var(--bg);}

.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem;max-width:900px;margin:0 auto;}

.check-grid li{
    display:flex;align-items:flex-start;gap:1rem;
    background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--btn-radius);
    padding:1.15rem 1.25rem;
  }

.check-grid .icon-square{width:40px;height:40px;flex-shrink:0;}

.check-grid .icon-square svg{width:18px;height:18px;}

.check-grid h3{font-size:.98rem;margin-bottom:.3em;}

.check-grid p{font-size:.87rem;margin:0;color:var(--charcoal);}

/* ===== Feature cards with colored header band (Services) ===== */
  #services{background:var(--bg-alt);}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}

.feature-card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:transform .22s ease, box-shadow .22s ease;}

.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}

.feature-card-head{padding:1.75rem 1.5rem 1.35rem;}

.feature-card.navy .feature-card-head{background:linear-gradient(120deg,var(--navy),var(--navy-dark));}

.feature-card.terracotta .feature-card-head{background:linear-gradient(120deg,var(--terracotta),var(--terracotta-dark));}

.feature-card-head .icon-circle{background:rgba(255,255,255,.2);margin-bottom:1rem;}

.feature-card-head h3{color:#fff;margin:0;font-size:1.03rem;}

.feature-card-body{padding:1.5rem;}

.feature-card-body p{margin:0;font-size:.95rem;color:var(--charcoal);}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .urgency-grid{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .check-grid{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .narrative-split img{max-height:220px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Split layout (Detection Methods) ===== */
  #methods{background:var(--bg);}

.decide-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start;}

.decide-intro{position:sticky;top:110px;}

.plain-steps{display:flex;flex-direction:column;}

.plain-steps li{
    display:flex;gap:1.25rem;padding-block:1.25rem;
    border-bottom:1px solid var(--border-soft);
  }

.plain-steps li:first-child{padding-top:0;}

.plain-steps li:last-child{border-bottom:none;padding-bottom:0;}

.plain-marker{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:var(--bg-alt);color:var(--terracotta);
    display:flex;align-items:center;justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;
  }

.plain-steps p{margin:0;font-size:.98rem;color:var(--charcoal);font-weight:400;line-height:1.75;}

.plain-steps strong{color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .decide-grid{grid-template-columns:1fr;}
    .decide-intro{position:static;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

/* ===== Feature cards with colored header band (Detection Methods) ===== */
  #methods{background:var(--bg-alt);}

/* ===== Split layout (Which Repair Option) ===== */
  #decide{background:var(--bg);}

/* ===== Comparison (Repair vs Replace) ===== */
  #decide{background:var(--bg);}

/* ===== Comparison (Salt Based vs Salt Free) ===== */
  #compare{background:var(--bg-alt);}

/* ===== Feature cards with colored header band (Services) ===== */
  #services{background:var(--bg);}

/* ===== Split layout (Repair or Replace) ===== */
  #decide{background:var(--bg);}

/* ===== Card grid (Leaking / Causes / Services) ===== */
  #leaking{background:var(--bg);}

#causes{background:var(--bg-alt);}

#leaking .closing-note{
    max-width:820px;margin:1.75rem auto 0;
    background:var(--bg-alt);border:1px dashed var(--border-soft);border-radius:var(--btn-radius);
    padding:1rem 1.25rem;
  }

/* ===== Checklist grid (Causes) ===== */
  .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem;max-width:900px;margin:0 auto;}

.check-grid li{
    display:flex;align-items:flex-start;gap:1rem;
    background:#fff;border:1px solid var(--border-soft);border-radius:var(--btn-radius);
    padding:1.15rem 1.25rem;
  }

/* ===== Feature cards with colored header band (Services) ===== */
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}

/* ===== Split layout (Repair or Replace) ===== */
  #decide{background:var(--bg-alt);}

.plain-marker{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:#fff;color:var(--terracotta);
    display:flex;align-items:center;justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;
  }

/* ===== Badge callout (24/7 band) ===== */
  #always-on{background:var(--bg);text-align:center;}

#always-on h2{color:var(--navy);}

.badge-callout{
    max-width:640px;margin:0 auto;background:var(--bg-alt);
    border:2px solid var(--terracotta);border-radius:var(--radius);
    padding:clamp(2rem,4vw,2.75rem) clamp(1.5rem,4vw,2.5rem);
  }

.badge-callout .icon-circle{width:68px;height:68px;margin:0 auto 1.25rem;background:var(--terracotta);}

.badge-callout .icon-circle svg{width:30px;height:30px;}

.badge-callout h2{margin-bottom:.6em;}

.badge-callout p{margin:0;color:var(--charcoal);}

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .decide-grid{grid-template-columns:1fr;}
    .decide-intro{position:static;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .grid-3{grid-template-columns:1fr;}
    .check-grid{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .narrative-split img{max-height:220px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Quick actions card (Why choose us) ===== */
  #why-us{background:var(--bg-alt);}

.feature-card-body p{margin:0 0 1rem;font-size:.95rem;color:var(--charcoal);}

.feature-card-body a.card-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.86rem;color:var(--terracotta);}

.feature-card-body a.card-link:hover{text-decoration:underline;}

/* ===== Checklist grid (What makes Gilbert different) ===== */
  #causes{background:var(--bg-alt);}

/* ===== Areas grid (Neighborhoods) ===== */
  #neighborhoods{background:var(--bg);}

.areas-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;}

.areas-intro p{color:var(--charcoal);}

.area-card{
    display:flex;align-items:center;gap:.9rem;
    background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--btn-radius);
    padding:1rem 1.1rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.92rem;
    color:var(--navy);transition:background .2s ease, color .2s ease, transform .2s ease;
  }

/* ===== CTA band (no image, gradient only) ===== */
  #cta-band{
    background:linear-gradient(125deg, var(--terracotta), var(--terracotta-dark));
    color:#fff;text-align:center;
  }

/* ===== Responsive ===== */
  @media (max-width:960px){
    .main-nav{display:none;}
    .nav-toggle{display:block;}
    #hero .hero-inner{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
    .areas-grid{grid-template-columns:1fr;}
    .narrative-split{grid-template-columns:1fr;}
    .narrative-split .narrative-image{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}
  }

@media (max-width:640px){
    .check-grid{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:1fr;}
    .areas-cards{grid-template-columns:1fr;}
    #hero .hero-ctas{flex-direction:column;align-items:stretch;}
    .narrative-split img{max-height:220px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;text-align:center;}
  }

/* ===== Checklist grid (What makes Chandler different) ===== */
  #causes{background:var(--bg-alt);}

/* ===== Checklist grid (What makes Tempe different) ===== */
  #causes{background:var(--bg-alt);}

/* ===== Checklist grid (What makes Queen Creek different) ===== */
  #causes{background:var(--bg-alt);}
/* ===== Blog listing (index.php / home.php) ===== */
#blog-hero{background:var(--bg-alt);text-align:center;}
#blog-hero .container{max-width:820px;}
#blog-listing{background:var(--bg);}
.blog-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s ease, box-shadow .22s ease;}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.blog-card-image{display:block;}
.blog-card-image img{width:100%;height:200px;object-fit:cover;display:block;}
.blog-card-body{padding:1.5rem 1.4rem;}
.blog-card-meta{font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--terracotta);margin-bottom:.6em;}
.blog-card h2{font-size:1.15rem;margin-bottom:.5em;}
.blog-card p{font-size:.95rem;color:var(--charcoal);margin-bottom:1rem;}
.card-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.86rem;color:var(--terracotta);}
.card-link:hover{text-decoration:underline;}
.blog-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:3rem;}
.blog-pagination a,.blog-pagination span{padding:.6em 1.1em;border-radius:var(--btn-radius);border:1px solid var(--border-soft);font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.9rem;color:var(--navy);}
.blog-pagination .current{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===== Single post ===== */
#single-post-header{padding-bottom:0;}
.single-post-header{max-width:820px;text-align:center;}
.single-post-thumb{margin-bottom:0;}
.single-post-thumb img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md);}
#single-post-content .single-post-content{max-width:760px;font-size:1.05rem;line-height:1.8;}
.single-post-content h2{margin-top:1.75em;}
.single-post-content h3{margin-top:1.5em;}
.single-post-content p{margin-bottom:1.4em;}
.single-post-content img{border-radius:var(--radius);margin:1.5em 0;max-width:100%;height:auto;}
.single-post-content ul,.single-post-content ol{list-style:revert;margin:0 0 1.4em 1.4em;}

@media (max-width:640px){
  .blog-card-image img{height:170px;}
}

/* ===== Elementor photo bands (Home page) =====
   Elementor's own background-overlay control did not render an overlay
   element for these containers, so the gradient that sits over each
   hero/CTA photo is applied here instead. The Elementor container just
   carries the matching CSS class (Advanced > CSS Classes), which keeps
   the gradient identical to the original hardcoded design while still
   leaving every widget inside fully editable. */
   Targeted two ways on purpose: by the .pma-band class (set on the
   container in elementor-home.json) and by the container's Elementor
   element id, so the gradient survives whether or not the newest JSON
   has been re-imported. Both resolve to the same single ::before, so
   there is no risk of the overlay being applied twice. */
.pma-band,
.elementor-element-000001a,
.elementor-element-00000c7,
.elementor-element-00000d7{position:relative;}

.pma-band > *,
.elementor-element-000001a > *,
.elementor-element-00000c7 > *,
.elementor-element-00000d7 > *{position:relative;z-index:1;}

.pma-band::before,
.elementor-element-000001a::before,
.elementor-element-00000c7::before,
.elementor-element-00000d7::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;}

.pma-band-hero::before,
.elementor-element-000001a::before{background:linear-gradient(125deg, rgba(0,32,56,.94), rgba(0,58,98,.9) 55%, rgba(0,72,122,.88));}

.pma-band-residential::before,
.elementor-element-00000c7::before{background:linear-gradient(180deg, rgba(0,40,68,.88), rgba(0,53,88,.92));}

.pma-band-cta::before,
.elementor-element-00000d7::before{background:linear-gradient(125deg, rgba(179,88,63,.93), rgba(201,123,99,.88));}

/* Outline buttons: Elementor falls back to its global accent colour
   (green) unless the background is explicitly cleared. */
.elementor-element-0000005 .elementor-button,
.elementor-element-00000d4 .elementor-button{background-color:transparent;}