/* ===== OHM Solar Solutions - community homepage layer =====
   Sits on top of styles.css. Tokens, .btn, .container, .section-head,
   .reveal, .marquee, .panel-tex, .rev, .faq, .contact and .footer all come
   from styles.css. This file adds the mega nav, the community hero, the
   bill comparison, the PPA offer, the technology grid, the events band,
   the after-install support block and the video module. */

:root{
  --radius-lg:18px;
  --c-good:#1f9d55;   /* the VSL's green "with OHM" figure */
  --c-bad:#d6336c;    /* the VSL's pink "without solar" figure */
}

/* ===== MEGA NAV ===== */
.nav--mega .nav__inner{gap:12px}
.nav--mega .nav__cta{white-space:nowrap;padding:11px 18px}
.nav--mega .nav__phone{font-size:14px}
.nav--mega .nav__logo{height:46px}
.mega{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.mega__item{position:relative}
.mega__link{display:inline-flex;align-items:center;gap:5px;padding:11px 9px;font-size:14px;font-weight:600;color:var(--c-ink);white-space:nowrap;border-radius:8px;transition:color .2s,background .2s;background:none;border:0;font-family:var(--font-body);cursor:pointer}
.mega__link:hover,.mega__item.is-open>.mega__link{color:var(--c-primary);background:var(--c-surface)}
.mega__caret{width:9px;height:9px;flex:0 0 auto;opacity:.5;transition:transform .25s var(--ease)}
.mega__item.is-open .mega__caret{transform:rotate(180deg)}
.mega__panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);z-index:60;min-width:260px;background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:14px;box-shadow:0 24px 56px rgba(16,24,40,.18);padding:10px;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mega__item.is-open .mega__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega__panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.mega__panel a{display:block;padding:10px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--c-ink);line-height:1.35;transition:background .2s,color .2s}
.mega__panel a:hover{background:var(--c-surface);color:var(--c-primary)}
.mega__panel--wide{min-width:420px;columns:2;column-gap:6px}
.mega__panel--wide a{break-inside:avoid}
.mega__note{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--c-surface-tint);font-size:12.5px;font-weight:600;font-style:italic;color:var(--c-ink);opacity:.55}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--c-primary)}
.navtoggle svg{width:26px;height:26px}
@media(max-width:1400px){.nav--mega .nav__phone{display:none}}
@media(max-width:1240px){
  .mega{display:none}
  .navtoggle{display:inline-flex}
  .nav--mega .nav__inner{justify-content:space-between}
}

/* ===== HERO (community photo, PPA offer) ===== */
.chero{position:relative;background:#000;overflow:hidden;padding:clamp(126px,15vh,170px) 0 clamp(64px,8vw,92px)}
.chero__bg{position:absolute;inset:0;background:url('/wp-content/themes/adleverage-custom-theme/assets/site/hero-array.webp') center 55%/cover no-repeat}
.chero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.46) 72%,rgba(0,0,0,.34) 100%)}
.chero__inner{position:relative;z-index:2;display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,72px);align-items:center}
.chero__place{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.03em;color:rgba(255,255,255,.82);margin-bottom:20px}
.chero__place::before{content:"";width:26px;height:1.5px;background:rgba(255,255,255,.6)}
.chero h1{color:var(--c-white);font-size:clamp(40px,5.6vw,74px);line-height:1.01;letter-spacing:-.032em;margin-bottom:20px;max-width:14ch}
.chero__sub{font-size:clamp(17px,1.7vw,20px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.84);max-width:50ch;margin-bottom:30px}
.chero__cta{display:flex;gap:15px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.chero__tel{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--c-white);transition:opacity .25s}
.chero__tel svg{width:18px;height:18px}
.chero__tel:hover{opacity:.72}
.chero__strip{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.chero__strip span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85)}
.chero__strip svg{width:15px;height:15px;flex:0 0 auto}

.qform .gform_wrapper.gravity-theme .gfield_label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    color: var(--c-primary);
    opacity: .72;
}
.qform .gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-white);
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color .25s, background .25s, box-shadow .25s;
    color: var(--c-ink);
    background: var(--c-surface);
    border-color: var(--c-surface-tint);
}
.qform .gform_wrapper.gravity-theme .gform_footer button{
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .1px;
    padding: 15px 28px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s, border-color .25s;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
    background: var(--c-accent);
    color: var(--c-white);
}
.qform .gform_wrapper.gravity-theme .gform_footer button:hover{
background: var(--c-accent-deep);
    color: var(--c-white);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}

.svcform__card .gform_wrapper.gravity-theme .gfield_label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    color: var(--c-primary);
    opacity: .72;
}
.svcform__card .gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-white);
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color .25s, background .25s, box-shadow .25s;
    color: var(--c-ink);
    background: var(--c-surface);
    border-color: var(--c-surface-tint);
}
.svcform__card .gform_wrapper.gravity-theme .gform_footer button{
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .1px;
    padding: 15px 28px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s, border-color .25s;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
    background: var(--c-accent);
    color: var(--c-white);
}
.svcform__card .gform_wrapper.gravity-theme .gform_footer button:hover{
background: var(--c-accent-deep);
    color: var(--c-white);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}
.svcform__card .gform_wrapper.gravity-theme .gfield textarea.large {
    height: 84px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1.5px solid var(--c-surface-tint);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color .25s, background .25s, box-shadow .25s;
    resize: vertical;
    min-height: 84px;
    line-height: 1.55;
}
@media(max-width:1100px){
  .chero__inner{grid-template-columns:1fr;gap:40px}
  .chero h1{max-width:none}
  .chero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.66))}
}
@media(max-width:680px){
  .chero__cta{flex-direction:column;align-items:stretch}
  .chero__cta .btn{width:100%}
  .chero__tel{justify-content:center}
}

/* ===== BILL COMPARISON ===== */
.cmp{background:var(--c-bg);padding:clamp(80px,10vw,128px) 0}
.cmp__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,80px);align-items:center}
.cmp__copy h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:18px;max-width:16ch}
.cmp__copy p{font-size:17px;line-height:1.75;color:var(--c-ink);opacity:.85;margin-bottom:16px;max-width:48ch}
.cmp__flow{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding:18px 20px;background:var(--c-surface);border-radius:12px;border:1px solid var(--c-surface-tint)}
.cmp__flow svg{width:26px;height:26px;flex:0 0 auto;color:var(--c-primary)}
.cmp__flow span{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--c-primary)}
/* definite height so the column's percentage height has something to resolve against */
.cmp__src{text-align:center;font-size:12.5px;color:var(--c-ink);opacity:.6;margin-top:18px}
@media(max-width:680px){}
@media(max-width:1100px){.cmp__grid{grid-template-columns:1fr;gap:40px}.cmp__copy h2,.cmp__copy p{max-width:none}}

/* ===== PPA OFFER SECTION ===== */
.ppa{position:relative;background:var(--c-primary);color:var(--c-white);padding:clamp(80px,10vw,128px) 0;overflow:hidden}
.ppa>.container{position:relative;z-index:1}
.ppa .panel-tex{background-image:linear-gradient(rgba(17,17,17,.86),rgba(17,17,17,.92)),url('/wp-content/themes/adleverage-custom-theme/assets/gallery/panels-1.jpg')}
.ppa__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:44px}
.pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:30px 26px;transition:transform .35s var(--ease),background .35s,border-color .35s}
.pcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.pcard__num{display:block;font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;color:rgba(255,255,255,.3);margin-bottom:16px}
.pcard h3{color:var(--c-white);font-size:19px;line-height:1.22;margin-bottom:9px}
.pcard p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76);margin:0}
.ppa__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding:28px 32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg)}
.ppa__foot p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0;max-width:62ch}
.ppa__foot strong{color:var(--c-white);font-family:var(--font-display)}
@media(max-width:1100px){.ppa__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.ppa__grid{grid-template-columns:1fr}.ppa__foot .btn{width:100%}}

/* ===== TECHNOLOGY GRID ===== */
.tech{background:var(--c-surface);padding:clamp(80px,10vw,128px) 0}
.tech__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:var(--radius-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.tcard__media{margin:0;height:190px;overflow:hidden;background:#e6e6e6}
.tcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tcard:hover .tcard__media img{transform:scale(1.05)}
.tcard__body{padding:24px 26px 26px}
.tcard:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(16,24,40,.14);border-color:var(--c-primary)}
.tcard h3{font-size:19px;line-height:1.22;margin-bottom:9px}
.tcard p{font-size:14.5px;line-height:1.68;color:var(--c-ink);opacity:.82;margin:0 0 14px}
.tcard__tags{display:flex;flex-wrap:wrap;gap:7px}
.tcard__tags span{font-size:12px;font-weight:600;color:var(--c-primary);background:var(--c-surface);border:1px solid var(--c-surface-tint);border-radius:999px;padding:5px 11px}
@media(max-width:1100px){.tech__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.tech__grid{grid-template-columns:1fr}}

/* ===== VIDEO MODULE ===== */
.vmod{background:var(--c-bg);padding:clamp(76px,9vw,120px) 0}
.vmod__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,64px);align-items:center}
.vmod__frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 30px 70px rgba(16,24,40,.26)}
.vmod__frame video{width:100%;height:100%;object-fit:cover;display:block}
.vmod__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.vmod__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28);border:0;cursor:pointer;transition:opacity .4s var(--ease),background .3s}
.vmod__play:hover{background:rgba(0,0,0,.16)}
.vmod__play span{width:76px;height:76px;border-radius:50%;background:var(--c-white);color:var(--c-primary);display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.vmod__play:hover span{transform:scale(1.07)}
.vmod__play svg{width:26px;height:26px;margin-left:4px}
.vmod__frame.is-playing .vmod__poster,.vmod__frame.is-playing .vmod__play{opacity:0;pointer-events:none}
.vmod__copy h2{font-size:clamp(28px,3.3vw,42px);margin-bottom:16px}
.vmod__copy p{font-size:16.5px;line-height:1.72;color:var(--c-ink);opacity:.85;margin-bottom:22px}
.qlist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;counter-reset:q}
.qlist li{counter-increment:q;display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--c-ink)}
.qlist li::before{content:counter(q);flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:var(--c-primary);color:var(--c-white);font-family:var(--font-display);font-weight:800;font-size:12.5px;display:grid;place-items:center;margin-top:1px}
@media(max-width:1100px){.vmod__grid{grid-template-columns:1fr;gap:36px}}

/* ===== COMMUNITY / EVENTS ===== */
.comm{position:relative;background:var(--c-primary-deep);color:var(--c-white);padding:clamp(84px,10vw,132px) 0;overflow:hidden}
.comm>.container{position:relative;z-index:1}
.comm__lead{max-width:760px;margin:0 auto 52px;text-align:center}
.comm__lead h2{color:var(--c-white);font-size:clamp(30px,3.8vw,50px);margin-bottom:18px}
.comm__lead p{font-size:17.5px;line-height:1.72;color:rgba(255,255,255,.78)}
.comm__events{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.cev{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:28px 26px;transition:background .3s,border-color .3s,transform .35s var(--ease)}
.cev:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);transform:translateY(-5px)}
.cev h3{color:var(--c-white);font-size:20px;margin-bottom:8px}
.cev p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76);margin:0}
@media(max-width:1100px){
    .comm__events{grid-template-columns:1fr}
}
@media(max-width:680px){}

/* ===== AFTER-INSTALL SUPPORT ===== */
.after{background:var(--c-bg);padding:clamp(80px,10vw,128px) 0}
.after__head{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,64px);align-items:end;margin-bottom:44px}
.after__head h2{font-size:clamp(30px,3.6vw,46px);max-width:17ch}
.after__head p{font-size:17px;line-height:1.75;color:var(--c-ink);opacity:.85}
.after__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.acard{background:var(--c-surface);border:1px solid var(--c-surface-tint);border-radius:14px;padding:24px 22px;transition:background .3s,border-color .3s,transform .35s var(--ease)}
.acard:hover{background:var(--c-white);border-color:var(--c-primary);transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,24,40,.12)}
.acard h3{font-size:16.5px;line-height:1.25;margin-bottom:7px}
.acard p{font-size:13.5px;line-height:1.6;color:var(--c-ink);opacity:.8;margin:0}
.after__note{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;padding:22px 28px;background:var(--c-primary);color:var(--c-white);border-radius:var(--radius-lg);text-align:center}
.after__note strong{font-family:var(--font-display);font-size:17px}
.after__note span{font-size:15px;color:rgba(255,255,255,.8)}
@media(max-width:1100px){.after__head{grid-template-columns:1fr;gap:20px}.after__head h2{max-width:none}.after__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.after__grid{grid-template-columns:1fr}}

/* ===== MOBILE DRAWER ===== */
@media(max-width:1240px){
  .nav--mega.is-open .mega{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--c-white);border-top:1px solid var(--c-surface-tint);
    box-shadow:0 22px 40px rgba(16,24,40,.16);
    max-height:calc(100vh - 76px);overflow-y:auto;padding:10px var(--pad) 22px}
  .nav--mega.is-open .mega__item{border-bottom:1px solid var(--c-surface-tint)}
  .nav--mega.is-open .mega__item:last-child{border-bottom:0}
  .nav--mega.is-open .mega__link{width:100%;justify-content:space-between;padding:15px 2px;font-size:16px;border-radius:0}
  .nav--mega.is-open .mega__link:hover{background:none}
  .nav--mega.is-open .mega__panel{
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;columns:1;
    box-shadow:none;border:0;border-radius:0;padding:0 0 12px 10px;display:none}
  .nav--mega.is-open .mega__item.is-open .mega__panel{display:block}
  .nav--mega.is-open .mega__panel a{padding:9px 8px;font-size:15px}
}

/* ===== CITATIONS ===== */
.cite{font-size:.62em;font-weight:700;vertical-align:super;line-height:0;margin-left:2px}
.cite a{color:inherit;opacity:.62;text-decoration:none;border-bottom:1px dotted currentColor;padding:0 1px}
.cite a:hover{opacity:1}

/* ===== PPA EXPLAINER ===== */
.ppahow{background:var(--c-bg);padding:clamp(80px,10vw,128px) 0}
.ppahow__top{display:grid;grid-template-columns:6fr 6fr;gap:clamp(36px,5vw,72px);align-items:center;margin-bottom:52px}
.ppahow__def{background:var(--c-surface);border:1px solid var(--c-surface-tint);border-left:4px solid var(--c-primary);border-radius:12px;padding:24px 26px;margin-top:22px}
.ppahow__def strong{display:block;font-family:var(--font-display);font-size:16px;color:var(--c-primary);margin-bottom:7px}
.ppahow__def p{font-size:15.5px;line-height:1.7;color:var(--c-ink);opacity:.88;margin:0}
.ppahow h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:18px}
.ppahow__intro{font-size:17px;line-height:1.75;color:var(--c-ink);opacity:.85}
.ppahow__photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 26px 60px rgba(16,24,40,.2)}
.ppahow__photo img{width:100%;height:clamp(300px,34vw,420px);object-fit:cover}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{counter-increment:s;position:relative;background:var(--c-surface);border:1px solid var(--c-surface-tint);border-radius:14px;padding:28px 24px 24px;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.step:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,24,40,.12);border-color:var(--c-primary)}
.step::before{content:"0" counter(s);display:block;font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.03em;color:var(--c-primary);opacity:.22;line-height:1;margin-bottom:14px}
.step h3{font-size:17px;line-height:1.25;margin-bottom:8px}
.step p{font-size:14px;line-height:1.65;color:var(--c-ink);opacity:.82;margin:0}
@media(max-width:1100px){.ppahow__top{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.steps{grid-template-columns:1fr}}

/* ===== INSTALL GALLERY ===== */
.installs{background:var(--c-surface);padding:clamp(80px,10vw,128px) 0}
@media(max-width:1100px){}
@media(max-width:680px){}


/* ===== COMPARISON: the savings gap that resolves after both bars land ===== */

/* the amount counts up, so reserve the width and stop it jittering */

/* PPA tag on the hero offer card */
.chero__sub strong{color:var(--c-white);font-weight:700}

/* ===== BEFORE / AFTER COMPARISON =====
   Two stacked photo panes. The "before" pane is clipped from the right, so
   sliding the handle wipes between a home without solar and one with it.
   Auto-plays once on scroll, then stays draggable. */
.cmp__vis{display:flex;flex-direction:column}
.ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:#111;box-shadow:0 28px 64px rgba(16,24,40,.26);user-select:none;touch-action:pan-y}
.ba__pane{position:absolute;inset:0}
.ba__pane img{width:100%;height:100%;object-fit:cover;display:block}
.ba__pane--before{clip-path:inset(0 0 0 0);will-change:clip-path}
.ba__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.82) 100%)}
.ba__tag{position:absolute;left:0;right:0;bottom:0;padding:26px clamp(20px,3vw,32px) clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:2px;color:#fff}
.ba__label{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.86)}
.ba__amt{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ba__per{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7)}
.ba__tag--after .ba__amt{color:#4ade80}
.ba__tag--before .ba__amt{color:#fb7185}
/* the before pane's caption sits left, the after pane's sits right, so the
   wipe never covers the number you are meant to be reading */
.ba__tag--after{align-items:flex-end;text-align:right}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:rgba(255,255,255,.92);transform:translateX(-50%);cursor:ew-resize;z-index:4;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.ba__handle:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:#fff;color:var(--c-primary);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .25s var(--ease)}
.ba__grip svg{width:22px;height:22px}
.ba:hover .ba__grip{transform:translate(-50%,-50%) scale(1.08)}
.ba__delta{display:flex;align-items:baseline;gap:11px;justify-content:center;margin-top:20px;padding:16px 22px;background:var(--c-primary);color:#fff;border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ba.is-done ~ .ba__delta,.ba__delta.is-in{opacity:1;transform:none}
.ba__delta-amt{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;color:#4ade80}
.ba__delta-lbl{font-size:14.5px;color:rgba(255,255,255,.82)}
.cmp__vis .cmp__src{margin-top:16px}
@media(max-width:680px){
  .ba{aspect-ratio:3/4}
  .ba__delta{flex-direction:column;align-items:center;gap:3px;text-align:center}
}

/* ===== NO FLAT SECTIONS =====
   Every band carries a photograph rather than a solid fill. Light sections
   get a high white wash so body copy keeps its contrast; dark sections keep
   the existing dark bake. All of these inherit .panel-tex, so the existing
   GSAP parallax drifts them too. */
.ppahow,.cmp,.tech,.installs,.vmod,.after,.faq,.comm,.trustmq{position:relative;overflow:hidden}
.ppahow>.container,.cmp>.container,.tech>.container,.installs>.container,.vmod>.container,
.after>.container,.faq>.container,.trustmq>.marquee{position:relative;z-index:1}

/* light wash so dark text stays readable over a photo */
.panel-tex--light{background-blend-mode:normal}
.cmp .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.95)),url('/wp-content/themes/adleverage-custom-theme/assets/site/homes-wide.webp')}
.ppahow .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/panel-macro.webp')}
.tech .panel-tex--light{background-image:linear-gradient(rgba(244,244,244,.94),rgba(244,244,244,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/roof-tile.webp')}
.installs .panel-tex--light{background-image:linear-gradient(rgba(244,244,244,.94),rgba(244,244,244,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/solar-modern.webp')}
.vmod .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/inverter-close.webp')}
.after .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.95)),url('/wp-content/themes/adleverage-custom-theme/assets/site/inverters.webp')}
.faq .panel-tex--light{background-image:linear-gradient(rgba(244,244,244,.94),rgba(244,244,244,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/solar-pool.webp')}
.comm .panel-tex{background-image:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.9)),url('/wp-content/themes/adleverage-custom-theme/assets/site/home-dusk.webp')}
.trustmq .panel-tex--band{inset:0;background-image:linear-gradient(rgba(17,17,17,.9),rgba(17,17,17,.92)),url('/wp-content/themes/adleverage-custom-theme/assets/site/panel-macro.webp')}

/* the sections keep a base colour underneath purely as a loading fallback */
.cmp,.ppahow,.vmod,.after{background:var(--c-bg)}
.tech,.installs,.faq{background:var(--c-surface)}

/* ===== SOURCE ASTERISK =====
   Sits on the figure itself and jumps to the source note. Kept optically
   small so it never reads as part of the number. */
.star{font-size:12px;font-weight:700;vertical-align:super;line-height:0;margin-left:.12em;
  color:inherit;opacity:.65;text-decoration:none}
.star:hover{opacity:1;text-decoration:underline}
.ba__amt .star{color:#fff;opacity:.8}
.ba__delta-amt .star{opacity:.75}

/* footnote in the footer, where the asterisks land */
.footer__note{position:relative;z-index:1;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.5);max-width:none}
.footer__note:target{color:rgba(255,255,255,.8)}

/* ===== HERO: college-town editorial, PPA first =====
   Warm paper tone against the black-and-white chrome, a stamped label and a
   slight tilt on the primer card so the block reads printed rather than
   corporate. The hero teaches before it sells. */
:root{--c-paper:#F5F2EA;--c-sun:#F7DE7C}

.chero__place{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:22px}
.chero__place::before{content:"";width:30px;height:1.5px;background:rgba(255,255,255,.55)}
.chero h1{font-size:clamp(42px,6.2vw,86px);line-height:.98;letter-spacing:-.04em;max-width:none;margin-bottom:22px}
/* the hand-drawn rule under the payoff line */
.chero__mark{position:relative;display:inline-block;color:var(--c-white);
  animation:sunUp 1.1s 1.05s var(--ease) forwards}
.chero__mark::after{content:"";position:absolute;left:-.5%;right:-.5%;bottom:.02em;height:.09em;border-radius:99px;
  background:var(--c-white);transform:scaleX(0);transform-origin:left;
  animation:markIn .9s .5s var(--ease) forwards, sunUpBar 1.1s 1.05s var(--ease) forwards}
@keyframes markIn{to{transform:scaleX(1)}}
/* the payoff line warms from white to daylight once the rule has drawn */
@keyframes sunUp{to{color:var(--c-sun)}}
@keyframes sunUpBar{to{background:var(--c-sun)}}
.chero__learn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  font-size:16px;color:var(--c-white);border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:3px;transition:border-color .25s,gap .25s}
.chero__learn svg{width:17px;height:17px}
.chero__learn:hover{border-color:var(--c-white);gap:13px}

/* the primer: what a PPA is, before any number */
.primer{position:relative;background:var(--c-paper);border-radius:4px;padding:clamp(30px,3vw,40px);
  box-shadow:0 34px 76px rgba(0,0,0,.5);transform:rotate(-.7deg)}
.primer::before{content:"";position:absolute;inset:9px;border:1px solid rgba(17,17,17,.16);border-radius:2px;pointer-events:none}
/* no stamp: the heading carries the card */
.primer__head{font-size:clamp(25px,2.5vw,32px);letter-spacing:-.025em;margin-bottom:20px}
.primer__list{list-style:none;margin:0 0 20px;padding:0;counter-reset:pp;display:grid;gap:15px}
.primer__list li{counter-increment:pp;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.primer__list li::before{content:counter(pp,decimal-leading-zero);grid-row:span 2;font-family:var(--font-display);
  font-weight:800;font-size:15px;color:var(--c-primary);opacity:.4;letter-spacing:.02em}
.primer__list b{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--c-primary);line-height:1.25}
.primer__list span{font-size:14.5px;line-height:1.6;color:var(--c-ink);opacity:.82}
.primer__foot{font-size:13.5px;line-height:1.6;color:var(--c-ink);opacity:.72;padding-top:16px;border-top:1px solid rgba(17,17,17,.14)}
.primer__link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-display);
  font-weight:700;font-size:14.5px;color:var(--c-primary);transition:gap .25s}
.primer__link svg{width:15px;height:15px}
.primer__link:hover{gap:12px}
@media(max-width:1100px){.primer{transform:none}}
@media(prefers-reduced-motion:reduce){
  .chero__mark{color:var(--c-sun);animation:none}
  .chero__mark::after{transform:scaleX(1);background:var(--c-sun);animation:none}
}

/* ===== SOLAR SCHOOL =====
   The education hub: one long walkthrough, five phone-shaped answers, and
   the written guides. Vertical is the native shape of OHM's library, so the
   rail is built around 9:16 rather than letterboxing it into 16:9. */
.school{position:relative;overflow:hidden;background:var(--c-bg);padding:clamp(80px,10vw,128px) 0}
.school>.container{position:relative;z-index:1}
.school .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/inverter-close.webp')}
.school__feature{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,64px);align-items:center;margin-bottom:clamp(60px,7vw,92px)}
.school__feature .vmod__copy h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em;margin-bottom:16px}
.school__feature .vmod__copy p{font-size:16.5px;line-height:1.72;color:var(--c-ink);opacity:.85;margin-bottom:22px}
.vmod__badge{position:absolute;left:18px;top:18px;z-index:3;display:inline-block;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:7px 15px;font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:#fff}
.vmod__frame.is-playing .vmod__badge{opacity:0}

.school__railhead{margin-bottom:26px}
.school__railhead h3{font-size:clamp(22px,2.3vw,28px);letter-spacing:-.02em;margin-bottom:6px}
.school__railhead p{font-size:15.5px;color:var(--c-ink);opacity:.78}
.school__rail{margin-bottom:clamp(56px,6vw,84px)}

/* vertical cards */
.shorts{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.short{display:flex;flex-direction:column;gap:13px}
.short__frame{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111;
  box-shadow:0 16px 38px rgba(16,24,40,.2);transition:transform .35s var(--ease),box-shadow .35s}
.short:hover .short__frame{transform:translateY(-5px);box-shadow:0 26px 54px rgba(16,24,40,.3)}
.short__vid{width:100%;height:100%;object-fit:cover;display:block}
.short__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.2);border:0;cursor:pointer;transition:opacity .35s,background .3s}
.short__play:hover{background:rgba(0,0,0,.08)}
.short__play span{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--c-primary);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.short__play:hover span{transform:scale(1.08)}
.short__play svg{width:19px;height:19px;margin-left:3px}
.short__len{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.66);color:#fff;border-radius:6px;
  padding:3px 8px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.short__frame.is-playing .short__play,.short__frame.is-playing .short__len{opacity:0;pointer-events:none}
.short__title{font-size:14.5px;line-height:1.35;letter-spacing:-.01em;color:var(--c-primary)}

/* written guides */
.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.read{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:var(--c-paper);
  border:1px solid var(--c-surface-tint);border-radius:12px;padding:22px 24px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.read:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,24,40,.13);border-color:var(--c-primary)}
.read span{font-family:var(--font-display);font-weight:700;font-size:15.5px;line-height:1.35;color:var(--c-primary)}
.read svg{width:17px;height:17px;flex:0 0 auto;color:var(--c-primary);opacity:.5;margin-top:2px}
.read:hover svg{opacity:1}

@media(max-width:1100px){
  .school__feature{grid-template-columns:1fr;gap:36px}
  .shorts{grid-template-columns:repeat(3,1fr)}
  .reads{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .shorts{grid-template-columns:repeat(2,1fr);gap:14px}
  .reads{grid-template-columns:1fr}
}

/* ===== HORIZONTAL IMAGE RAIL =====
   Replaces the two tall photo grids. One big tile is exactly as wide and
   tall as the two stacked tiles beside it, and the whole track drifts so the
   galleries cost one band of height instead of a full screen each. */
.hrail{position:relative;z-index:1;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.hrail__track{display:flex;align-items:stretch;gap:16px;width:max-content;height:clamp(280px,32vw,440px);
  animation:railDrift 70s linear infinite}
.hrail__dupe{display:flex;align-items:stretch;gap:16px;margin-left:16px}
.hrail:hover .hrail__track{animation-play-state:paused}
@keyframes railDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hrail__track.is-static{animation:none;flex-wrap:nowrap;overflow-x:auto}

.hrail__item{position:relative;margin:0;flex:0 0 auto;height:100%}
/* a big tile spans the same footprint as the stacked pair */
.hrail__item--big{width:clamp(300px,34vw,470px);border-radius:14px;overflow:hidden;background:#222}
.hrail__item--big img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hrail__item--big:hover img{transform:scale(1.05)}
.hrail__item--stack{width:clamp(300px,34vw,470px);display:grid;grid-template-rows:1fr 1fr;gap:16px}
.hrail__item--stack figure{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#222}
.hrail__item--stack img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hrail__item--stack figure:hover img{transform:scale(1.05)}
.hrail__cap{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.84));font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff}
/* the rails sit between two container blocks, so give them their own rhythm */
.installs .hrail,.comm .hrail{margin-top:8px;margin-bottom:8px}
@media(prefers-reduced-motion:reduce){.hrail__track{animation:none}}

/* ===== NAV: destination descriptions + you-are-here =====
   On a single-page layout the label alone does not tell you where a link
   lands, so each one states its destination and the current section is
   marked as you scroll. */
.mega__panel a{display:block}
.mega__desc{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;line-height:1.4;
  color:var(--c-ink);opacity:.6;margin-top:2px}
.mega__panel a:hover .mega__desc{opacity:.75}
.mega__page::after{content:"page";margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-white);background:var(--c-primary);border-radius:3px;padding:2px 5px;vertical-align:2px}
.mega__link.is-here{color:var(--c-primary)}
.mega__link.is-here::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--c-primary)}
.mega__panel a.is-here{background:var(--c-surface)}

/* ===== SERVICE REQUEST ===== */
.svcform{position:relative;overflow:hidden;background:var(--c-bg);padding:clamp(76px,9vw,116px) 0}
.svcform .panel-tex--light{background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.96)),url('/wp-content/themes/adleverage-custom-theme/assets/site/inverters.webp')}
.svcform__inner{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,72px);align-items:center}
.svcform__copy h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:16px}
.svcform__copy>p{font-size:17px;line-height:1.7;color:var(--c-ink);opacity:.85;margin-bottom:22px}
.svcform__pts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.svcform__pts li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--c-ink);opacity:.85}
.svcform__pts li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--c-primary);margin-top:8px}
.svcform__tel{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--c-primary)}
.svcform__tel svg{width:17px;height:17px}
.svcform__card{background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:var(--radius-lg);
  padding:clamp(26px,2.8vw,38px);box-shadow:0 26px 60px rgba(16,24,40,.14)}
.svcform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svcform__field{display:flex;flex-direction:column;gap:6px}
.svcform__field--full{grid-column:1 / -1}
.svcform__field label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);opacity:.72}
.svcform__field .req{color:var(--c-accent)}
.svcform__field input,.svcform__field select,.svcform__field textarea{font-family:var(--font-body);font-size:15px;color:var(--c-ink);
  background:var(--c-surface);border:1.5px solid var(--c-surface-tint);border-radius:8px;padding:12px 14px;transition:border-color .25s,background .25s,box-shadow .25s}
.svcform__field textarea{resize:vertical;min-height:84px;line-height:1.55}
.svcform__field input:focus,.svcform__field select:focus,.svcform__field textarea:focus{outline:none;background:var(--c-white);
  border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1)}
/* brief flash when a service card fills this in for you */
#svcType.is-set{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.16);background:var(--c-white)}
.svcform__submit{grid-column:1 / -1;width:100%;margin-top:4px}
.svcform__card.is-sent .svcform__grid{display:none}
.svcform__done{display:none;text-align:center;padding:26px 6px 12px}
.svcform__card.is-sent .svcform__done{display:block}
.svcform__done-mark{width:58px;height:58px;border-radius:50%;background:var(--c-primary);color:var(--c-white);display:grid;place-items:center;margin:0 auto 16px}
.svcform__done-mark svg{width:29px;height:29px}
.svcform__done h3{font-size:21px;margin-bottom:8px}
.svcform__done p{font-size:15px;line-height:1.6;color:var(--c-ink);opacity:.8}
@media(max-width:900px){.svcform__inner{grid-template-columns:1fr}.svcform__grid{grid-template-columns:1fr}}

/* service cards are links now */
.acard{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.acard__go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-weight:700;font-size:13.5px;color:var(--c-primary);opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),gap .25s}
.acard__go svg{width:14px;height:14px}
.acard:hover .acard__go,.acard:focus-visible .acard__go{opacity:1;transform:none}
.acard:hover .acard__go{gap:11px}
.acard:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}

/* ===== SERVICE AREAS ===== */
.areas{display:grid;gap:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:var(--c-primary-deep);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.areas__mapwrap{position:relative;height:clamp(240px,26vw,320px);background:#1a1a1a}
.areas__panel{padding:clamp(22px,2.4vw,30px)}
.areas__head{color:var(--c-white);font-size:21px;margin-bottom:6px}
.areas__sub{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);margin-bottom:20px}
.areas__office{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:11px}
.areas__note{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.6)}
@media(max-width:680px){}

/* hero video: the same real install loop the landing page uses. It fades in
   over the still, so a slow connection or reduced motion just keeps the photo. */
.chero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1s var(--ease);z-index:0}
.chero__video.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.chero__video{display:none}}

/* ===== NAV: mockup marker in place of the menu =====
   The section links were anchors on a one-page layout rather than real
   destinations, so the bar states that plainly instead of implying a site
   map that does not exist yet. */
.nav__soon{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;
  color:var(--c-ink);opacity:.62;font-style:italic;white-space:nowrap;
  padding:7px 16px;border:1px dashed var(--c-surface-tint);border-radius:999px}
@media(max-width:680px){.nav__soon{font-size:12.5px;padding:5px 11px}}



/* ===== SERVICE AREAS: two priority tiers =====
   The core towns carry a solid chip so they read first; the wider ring is
   outlined. A dot in each heading acts as the legend. */
.areas__group--one .areas__group--two 



/* ===== SERVICE AREA: bigger map, county accordion ===== */
.areas{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
/* the export is cropped close to the territory, so cover fills the column
   without losing anything that matters */
.areas__panel{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,34px)}
.areas__sub{margin-bottom:18px}

.areas__acc{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.12)}
.acc{border-bottom:1px solid rgba(255,255,255,.12)}
.acc__head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 2px;background:none;border:0;
  cursor:pointer;text-align:left;color:var(--c-white);transition:color .2s}
.acc__head:hover{color:var(--c-sun)}
.acc__head:focus-visible{outline:2px solid var(--c-sun);outline-offset:2px;border-radius:4px}
.acc__name{font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.acc__n{margin-left:auto;font-size:12px;font-weight:700;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.09);border-radius:999px;padding:3px 9px;min-width:26px;text-align:center}
.acc__chev{position:relative;width:11px;height:11px;flex:0 0 auto;transition:transform .3s var(--ease)}
.acc__chev::before,.acc__chev::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.acc__chev::before{left:0;right:0;top:calc(50% - .8px);height:1.6px}
.acc__chev::after{top:0;bottom:0;left:calc(50% - .8px);width:1.6px;transition:opacity .3s var(--ease)}
/* plus becomes minus: hide the upright, no rotation (rotating leaves a bar) */
.acc.is-open .acc__chev::after{opacity:0}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc.is-open .acc__body{grid-template-rows:1fr}
.acc__towns{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px}
.acc.is-open .acc__towns{padding:0 0 15px}
.acc__town{font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 12px;border:1px solid transparent}
.acc__town--one{background:var(--c-white);color:var(--c-primary)}
.acc__town--two{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.28)}

.areas__note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.areas__key{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.7)}
.areas__kdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.areas__kdot--one{background:var(--c-white)}
.areas__kdot--two{border:1.5px solid rgba(255,255,255,.6)}
@media(max-width:900px){.areas{grid-template-columns:1fr}}

/* the territory card is its own full-width row now: squeezed into half the
   contact grid, both the map and the county list were too narrow */
.contact__areas{position:relative;z-index:1;margin-top:clamp(44px,5vw,64px)}
.contact__areas .areas{border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:var(--c-primary-deep);box-shadow:0 20px 44px rgba(0,0,0,.4)}

/* ===== SERVICE AREA: both halves fill one row =====
   The panel decides the row height and the map fills it, so the two sides
   always finish level whatever the county list is doing. */
.areas{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:stretch}
.areas__mapwrap{position:relative;display:block;padding:0;height:auto;min-height:100%;background:var(--c-primary-deep)}
.areas__panel{padding:clamp(24px,2.6vw,34px)}
@media(max-width:900px){
  .areas{grid-template-columns:1fr}
  .areas__mapwrap{min-height:320px}
}


/* ===== TAKE BACK YOUR POWER: the section now carries its own form ===== */
.qform{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:clamp(26px,2.8vw,36px);box-shadow:0 22px 50px rgba(0,0,0,.34)}
.qform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform__head{grid-column:1 / -1;color:var(--c-white);font-size:clamp(20px,2.1vw,25px);line-height:1.2;margin-bottom:2px}
.qform__sub{grid-column:1 / -1;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7);margin-bottom:8px}
.qform__field{display:flex;flex-direction:column;gap:6px}
.qform__field--full{grid-column:1 / -1}
.qform__field label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.qform__field .req{color:var(--c-sun)}
.qform__field input,.qform__field select{font-family:var(--font-body);font-size:15px;color:var(--c-white);
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:8px;padding:12px 14px;
  transition:border-color .25s,background .25s,box-shadow .25s}
.qform__field input::placeholder{color:rgba(255,255,255,.4)}
.qform__field select option{background:#111;color:#fff}
.qform__field input:focus,.qform__field select:focus{outline:none;background:rgba(255,255,255,.12);
  border-color:var(--c-sun);box-shadow:0 0 0 3px rgba(247,222,124,.18)}
.qform__submit{grid-column:1 / -1;width:100%;margin-top:4px}
.qform__note{grid-column:1 / -1;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);margin:0}
.qform.is-sent .qform__grid{display:none}
.qform__done{display:none;text-align:center;padding:22px 6px 10px}
.qform.is-sent .qform__done{display:block}
.qform__mark{width:56px;height:56px;border-radius:50%;background:var(--c-white);color:var(--c-primary);
  display:grid;place-items:center;margin:0 auto 16px}
.qform__mark svg{width:28px;height:28px}
.qform__done h3{color:var(--c-white);font-size:21px;margin-bottom:8px}
.qform__done p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.75)}
@media(max-width:900px){.qform__grid{grid-template-columns:1fr}}


/* ===== SERVICE AREAS: its own dark band above the call to action ===== */
.areasec{position:relative;overflow:hidden;background:var(--c-primary);padding:clamp(72px,9vw,110px) 0}
.areasec .panel-tex{background-image:linear-gradient(rgba(17,17,17,.88),rgba(17,17,17,.92)),url('/wp-content/themes/adleverage-custom-theme/assets/site/roof-tile.webp')}
.areasec__inner{position:relative;z-index:1}
.areasec .areas{border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:var(--c-primary-deep);box-shadow:0 20px 44px rgba(0,0,0,.4)}

/* ===== TAKE BACK YOUR POWER: warm paper, so the ask is not another dark band =====
   Everything inside flips to dark-on-light. */
.contact{background:var(--c-paper)}
.contact .panel-tex{background-image:linear-gradient(rgba(245,242,234,.93),rgba(245,242,234,.95)),url('/wp-content/themes/adleverage-custom-theme/assets/site/panel-macro.webp')}
.contact__copy h2{color:var(--c-primary)}
.contact__body{color:var(--c-ink);opacity:.85}
.contact__office{background:rgba(17,17,17,.04);border-color:rgba(17,17,17,.14)}
.contact__label{color:var(--c-ink);opacity:.6}
.contact__addr{color:var(--c-ink);opacity:.85}
.contact__phone,.contact__email{color:var(--c-primary)}

.qform{background:var(--c-white);border-color:var(--c-surface-tint);box-shadow:0 22px 50px rgba(16,24,40,.14)}
.qform__head{color:var(--c-primary)}
.qform__sub{color:var(--c-ink);opacity:.78}
.qform__field label{color:var(--c-primary);opacity:.72}
.qform__field .req{color:var(--c-accent)}
.qform__field input,.qform__field select{color:var(--c-ink);background:var(--c-surface);
  border-color:var(--c-surface-tint)}
.qform__field input::placeholder{color:var(--c-ink);opacity:.42}
.qform__field select option{background:#fff;color:#111}
.qform__field input:focus,.qform__field select:focus{background:var(--c-white);border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1)}
.qform__note{color:var(--c-ink);opacity:.6}
.qform__mark{background:var(--c-primary);color:var(--c-white)}
.qform__done h3{color:var(--c-primary)}
.qform__done p{color:var(--c-ink);opacity:.8}
/* the submit sits on white now, so use the light-section treatment */
.qform__submit.btn--on-dark.btn--accent{background:var(--c-accent);color:var(--c-white)}
.qform__submit.btn--on-dark.btn--accent:hover{background:var(--c-accent-deep);color:var(--c-white)}


/* ===== SERVICE AREA MAP: the client's own territory export =====
   Cropped to the map canvas so it can fill the column edge to edge; the
   Google attribution it lost in that crop rides on top as a caption. */
.areas{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.areas__mapwrap{position:relative;display:grid;place-items:center;padding:0;overflow:hidden;
  background:var(--c-primary-deep);min-height:340px}
/* contain, never cover: cropping this one cuts the territory itself */
.areas__img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.areas__credit{position:absolute;left:10px;bottom:9px;z-index:1;font-size:12px;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.55);border-radius:4px;padding:3px 8px}
@media(max-width:900px){.areas{grid-template-columns:1fr}.areas__mapwrap{min-height:300px}}

/* compact rows: the menu was ~150px taller than the map, which is what
   produced the dark bands beside it */
.areas__panel{padding:clamp(20px,2.2vw,28px)}
.areas__sub{margin-bottom:14px;font-size:14px}
.acc__head{padding:10px 2px}
.acc__name{font-size:15px}
.acc.is-open .acc__towns{padding:0 0 12px}
.acc__town{font-size:13px;padding:4px 11px}
.areas__note{margin-top:14px;padding-top:12px;font-size:12.5px}

/* ===== MOBILE NAV BUTTON ===== */
.navtoggle{align-items:center;justify-content:center;border-radius:10px;transition:background .2s}
.navtoggle:hover{background:var(--c-surface)}
.navtoggle__close{display:none}
.nav--mega.is-open .navtoggle__open{display:none}
.nav--mega.is-open .navtoggle__close{display:block}
body.nav-locked{overflow:hidden}
@media(max-width:1240px){
  /* the group header is a toggle on mobile, so give it a visible affordance */
  .nav--mega.is-open .mega__caret{width:12px;height:12px;opacity:.7}
  /* keep the quote button reachable next to the menu button */
  .nav--mega .nav__right{gap:10px}
}
@media(max-width:520px){
  .nav--mega .nav__cta{padding:10px 14px;font-size:13.5px}
  .nav--mega .nav__logo{height:38px}
}
/* tap-to-call at the foot of the mobile drawer */
.mega__item--call{display:none}
.mega__call{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:15px 18px;
  border-radius:12px;background:var(--c-primary);color:var(--c-white);font-family:var(--font-display);
  font-weight:700;font-size:16px;min-height:52px}
.mega__call svg{width:18px;height:18px;flex:0 0 auto}
@media(max-width:1240px){
  .nav--mega.is-open .mega__item--call{display:block;border-bottom:0}
  /* comfortable tap targets for the links inside an open group */
  .nav--mega.is-open .mega__panel a{padding:13px 8px;min-height:48px}
}