/*
Theme Name: HERS ECC Title 24 Group
Theme URI: https://hersecctitle24group.com
Author: HERS ECC Title 24 Group
Description: Self-installing site theme for HERS ECC Title 24 Group. On activation it creates all pages, menus, and the two-door homeowner/contractor experience. Clean forest green and lime design, matching the HERS ECC / Title 24 Group logo.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hersecc
*/

:root{
  --navy:#06733B; --navy-deep:#044322; --sky:#08914A; --sky-dark:#056031;
  --tint:#EAF5EE; --tint-2:#F4FBF6; --ink:#182420; --mut:#5A7566;
  --line:#D8E9DC; --white:#FFFFFF; --radius:12px;
  --lime:#80C403; --lime-soft:#D9F0AA; --lime-dim:#B5C48D;
  --shadow:0 8px 28px rgba(11,110,57,.10);
  --font:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--sky-dark);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.prose{max-width:780px}
.center{text-align:center}
.mut{color:var(--mut)}

h1,h2,h3,h4{color:var(--navy);line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,4vw,2.8rem)}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}
h3{font-size:1.2rem}
h4{font-size:1.02rem;letter-spacing:0}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.45em}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-dark);margin-bottom:.7em}
.lead{font-size:1.13rem;color:var(--ink)}

/* ---------- notice ribbon ---------- */
.ribbon{background:var(--navy);color:var(--lime-soft);font-size:.86rem;padding:.5rem 0}
.ribbon .wrap{display:flex;gap:.6em;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.ribbon b{color:#fff}
.ribbon .tag{background:var(--lime);color:var(--navy-deep);font-weight:800;font-size:.7rem;letter-spacing:.1em;padding:.15em .55em;border-radius:99px;text-transform:uppercase}
.ribbon a{color:#fff;text-decoration:underline}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:1.2rem;padding:.7rem 0;max-width:1300px}
.brand{display:flex;align-items:center;flex-direction:column;line-height:1.05;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{display:block;height:52px;width:52px;border-radius:50%;object-fit:cover}
.brand .b1{font-weight:900;font-size:1.22rem;color:var(--navy);letter-spacing:-.01em}
.brand .b1 span{color:var(--sky)}
.brand .b2{font-size:.63rem;font-weight:800;letter-spacing:.24em;color:var(--mut)}
@media (max-width:1020px){.brand img{height:42px;width:42px}}
.aud-chip{font-size:.66rem;font-weight:800;letter-spacing:.12em;color:var(--sky-dark);background:var(--tint);border:1px solid var(--line);padding:.2em .7em;border-radius:99px;text-transform:uppercase;white-space:nowrap}
.head-spacer{flex:1}
.nav{display:flex;align-items:center;gap:.05rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:.25rem;gap:.05rem}
.nav li{margin:0;position:relative}
.nav a{display:block;padding:.55rem .58rem;font-size:.92rem;font-weight:600;color:var(--ink);border-radius:8px;white-space:nowrap}
.nav a:hover{background:var(--tint);text-decoration:none;color:var(--navy)}
.nav .sub-menu{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:230px;padding:.35rem;flex-direction:column;gap:0}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.head-cta{display:flex;align-items:center;gap:.6rem}
.phone{font-weight:800;color:var(--navy);font-size:.95rem;white-space:nowrap}
.phone small{display:block;font-weight:600;color:var(--mut);font-size:.68rem;letter-spacing:.02em}
.btn{display:inline-block;background:var(--sky);color:#fff!important;font-weight:800;padding:.72rem 1.25rem;border-radius:10px;border:0;font-size:.97rem;cursor:pointer;transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--sky-dark);text-decoration:none;transform:translateY(-1px)}
.btn.big{padding:.95rem 1.7rem;font-size:1.06rem}
.btn.ghost{background:transparent;color:var(--navy)!important;border:2px solid var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff!important}
.btn.light{background:#fff;color:var(--navy)!important}
.btn.light:hover{background:var(--tint)}
.switch-link{font-size:.8rem;color:var(--mut)}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:8px;color:var(--navy);font-weight:800;padding:.45rem .7rem;font-size:.85rem}

@media (max-width:1300px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:.6rem 22px 1rem;box-shadow:var(--shadow)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding-left:1rem}
  body.nav-open .nav{display:block}
  .nav-toggle{display:inline-block}
  .phone{display:none}
}

/* ---------- hero ---------- */
.hero{padding:4.2rem 0 3.4rem;background:linear-gradient(180deg,var(--tint-2),#fff)}
.hero .lead{max-width:820px}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem;align-items:center}
.trust{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--mut);font-weight:600}
.trust b{color:var(--navy)}

/* ---------- gateway doors ---------- */
.gateway-hero{padding:3.4rem 0 1rem;text-align:center}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;padding:1.8rem 0 3.2rem}
@media (max-width:820px){.doors{grid-template-columns:1fr}}
.door{border-radius:18px;padding:2.2rem;display:flex;flex-direction:column;gap:.4rem;box-shadow:var(--shadow);transition:transform .14s ease}
.door:hover{transform:translateY(-4px)}
.door .icon{width:64px;height:64px;margin-bottom:.6rem}
.door h2{margin-bottom:.35rem}
.door p{flex:1}
.door .btn{align-self:flex-start;margin-top:.6rem}
.door.ho{background:#fff;border:1px solid var(--line);border-top:6px solid var(--sky)}
.door.ho .icon{color:var(--sky)}
.door.co{background:var(--navy);border-top:6px solid var(--lime)}
.door.co h2,.door.co p{color:#fff}
.door.co p{color:var(--lime-soft)}
.door.co .icon{color:var(--lime)}
.door .k{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.door.ho .k{color:var(--sky-dark)}
.door.co .k{color:var(--lime-soft)}

/* ---------- sections & cards ---------- */
.section{padding:3.6rem 0}
.band{background:var(--tint-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-navy{background:var(--navy)}
.band-navy h2,.band-navy p,.band-navy li{color:#fff}
.band-navy .mut{color:var(--lime-soft)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin:1.4rem 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:0 2px 10px rgba(11,110,57,.05)}
.card .icon{width:42px;height:42px;color:var(--sky);margin-bottom:.7rem}
.card h3{font-size:1.06rem;margin-bottom:.4rem}
.card p{font-size:.95rem;margin:0;color:var(--mut)}
.card a.more{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.9rem}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1rem}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.2rem 1.2rem 4.2rem;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:1.1rem;top:1.05rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sky);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.checks{list-style:none;padding:0}
.checks li{padding-left:1.9em;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;border-radius:50%;background:var(--sky);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat}

/* ---------- doc cards (rights page) ---------- */
.docrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin:1.2rem 0}
.doc{border:1px solid var(--line);border-left:6px solid var(--sky);border-radius:10px;padding:1.1rem 1.2rem;background:#fff}
.doc b{color:var(--navy)}
.doc .when{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-dark)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:.7rem;padding:0 1.1rem}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:.95rem 0;list-style:none;position:relative;padding-right:2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.75rem;font-size:1.3rem;color:var(--sky);font-weight:800;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 1rem;color:var(--ink)}

/* ---------- CTA band ---------- */
.cta{background:var(--navy);border-radius:18px;color:#fff;padding:2.4rem;display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:2.6rem 0}
.cta h2{color:#fff;margin:0 0 .25rem}
.cta p{color:var(--lime-soft);margin:0}
.cta .phone-big{font-size:1.4rem;font-weight:900;color:#fff;white-space:nowrap}
.cta .phone-big small{display:block;font-size:.78rem;color:var(--lime-soft);font-weight:600}

/* ---------- geo ---------- */
.county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;list-style:none;padding:0}
.county-grid li{margin:0}
.county-grid a,.county-grid span{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;font-size:.92rem;font-weight:600;color:var(--navy)}
.county-grid a:hover{border-color:var(--sky);text-decoration:none;background:var(--tint)}

/* ---------- split audience blocks ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.4rem 0}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.aud-block{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:#fff}
.aud-block.ho{border-top:5px solid var(--sky)}
.aud-block.co{border-top:5px solid var(--navy)}
.aud-block .k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-dark)}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep);color:var(--lime-soft);margin-top:4rem;padding:3rem 0 1.6rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.7rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.4rem}
.site-foot a{color:var(--lime-soft)}
.site-foot a:hover{color:var(--lime)}
.foot-brand{display:flex;align-items:center;gap:.55rem;font-weight:900;color:#fff;font-size:1.1rem}
.foot-brand img{display:block;height:34px;width:34px;border-radius:50%;object-fit:cover}
.foot-brand .accent{color:var(--lime)}
.smallprint{border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.1rem;font-size:.8rem;color:var(--lime-dim);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- utility ---------- */
.notice-box{background:var(--tint);border:1px solid var(--line);border-left:6px solid var(--sky);border-radius:10px;padding:1.1rem 1.3rem;margin:1.4rem 0}
.notice-box b{color:var(--navy)}
.page-title{padding:3rem 0 0}
.entry{padding:1.2rem 0 2rem}
table{border-collapse:collapse;width:100%;margin:1rem 0}
th,td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;font-size:.95rem}
th{background:var(--tint);color:var(--navy)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}