/* ===== OHM category pages =====
   Layered on styles.css + home.css. Adds only what the two category pages
   need: the page hero, the prose splits, the card grids, the numbered
   process and the closing band. Everything else comes from the homepage
   system so the pages read as the same site. */

/* ===== PAGE HERO ===== */
.phero{position:relative;overflow:hidden;background:#000;padding:clamp(132px,16vh,178px) 0 clamp(64px,8vw,92px)}
.phero__bg{position:absolute;inset:0;background-size:cover;background-position:center 58%}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 46%,rgba(0,0,0,.5) 100%)}
.phero__inner{position:relative;z-index:2;max-width:760px}
.phero__crumb{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:20px}
.phero__crumb a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .25s}
.phero__crumb a:hover{border-color:#fff}
.phero h1{color:var(--c-white);font-size:clamp(36px,5.2vw,68px);line-height:1.02;letter-spacing:-.035em;margin-bottom:16px}
.phero__sub{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.9vw,23px);line-height:1.3;
  color:var(--c-sun);margin-bottom:22px}
.phero p.phero__lede{font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);margin-bottom:14px;max-width:60ch}
.phero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:28px}
.phero__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}
.phero__tel svg{width:18px;height:18px}
.phero__tel:hover{opacity:.72}
@media(max-width:680px){.phero__cta{flex-direction:column;align-items:stretch}.phero__cta .btn{width:100%}.phero__tel{justify-content:center}}

/* ===== SECTION SHELL ===== */
.csec{position:relative;overflow:hidden;padding:clamp(72px,9vw,116px) 0}
.csec>.container{position:relative;z-index:1}
.csec--light{background:var(--c-bg)}
.csec--surface{background:var(--c-surface)}
.csec--paper{background:var(--c-paper)}
.csec--dark{background:var(--c-primary);color:var(--c-white)}
.csec--dark h2,.csec--dark h3{color:var(--c-white)}
.csec__head{max-width:760px;margin:0 auto 48px;text-align:center}
.csec__head h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
.csec__head p{font-size:17px;line-height:1.72;color:var(--c-ink);opacity:.85}
.csec--dark .csec__head p{color:rgba(255,255,255,.78)}
.csec__head--left{margin-left:0;text-align:left}

/* ===== PROSE SPLIT (copy + photo) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split--flip .split__media{order:-1}
.split__copy h2{font-size:clamp(26px,3.1vw,40px);margin-bottom:18px;max-width:18ch}
.split__copy p{font-size:16.5px;line-height:1.75;color:var(--c-ink);opacity:.85;margin-bottom:15px;max-width:56ch}
.csec--dark .split__copy p{color:rgba(255,255,255,.8)}
.split__copy p:last-child{margin-bottom:0}
.split__media{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 56px rgba(16,24,40,.2)}
.split__media img{width:100%;height:clamp(280px,36vw,430px);object-fit:cover;display:block}
@media(max-width:900px){.split{grid-template-columns:1fr}.split--flip .split__media{order:0}.split__copy h2,.split__copy p{max-width:none}}

/* ===== CARD GRID ===== */
.cgrid{display:grid;gap:20px}
.cgrid--2{grid-template-columns:repeat(2,1fr)}
.cgrid--3{grid-template-columns:repeat(3,1fr)}
.cgrid--4{grid-template-columns:repeat(4,1fr)}
.ccard{background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:var(--radius-lg);
  padding:28px 26px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.ccard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(16,24,40,.13);border-color:var(--c-primary)}
.ccard h3{font-size:18.5px;line-height:1.25;margin-bottom:9px}
.ccard p{font-size:14.5px;line-height:1.7;color:var(--c-ink);opacity:.84;margin:0}
.csec--dark .ccard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.csec--dark .ccard:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.csec--dark .ccard p{color:rgba(255,255,255,.78)}
.ccard__media{margin:-28px -26px 22px;height:160px;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ccard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ccard:hover .ccard__media img{transform:scale(1.05)}
@media(max-width:1100px){.cgrid--4,.cgrid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cgrid--4,.cgrid--3,.cgrid--2{grid-template-columns:1fr}}

/* ===== FLOW (how it works) ===== */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:fl}
.flow li{counter-increment:fl;position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:24px 20px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.84)}
.flow li::before{content:"0" counter(fl);display:block;font-family:var(--font-display);font-weight:800;font-size:22px;
  color:var(--c-sun);margin-bottom:10px;line-height:1}
@media(max-width:1100px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.flow{grid-template-columns:1fr}}

/* ===== NUMBERED PROCESS ===== */
.psteps{list-style:none;margin:0 auto;padding:0;max-width:900px;position:relative}
.psteps::before{content:"";position:absolute;top:14px;bottom:14px;left:27px;width:2px;background:var(--c-surface-tint)}
.pstep2{position:relative;display:flex;gap:24px;align-items:flex-start;padding-bottom:26px}
.pstep2:last-child{padding-bottom:0}
.pstep2__n{position:relative;z-index:1;flex:0 0 56px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-primary);color:var(--c-white);font-family:var(--font-display);font-weight:800;font-size:19px;
  border:5px solid var(--c-surface);box-shadow:0 6px 18px rgba(16,24,40,.16)}
.pstep2__b{flex:1;background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:var(--radius-lg);padding:20px 24px}
.pstep2__b h3{font-size:18px;line-height:1.25;margin-bottom:7px}
.pstep2__b p{font-size:14.5px;line-height:1.7;color:var(--c-ink);opacity:.84;margin:0}
@media(max-width:680px){.psteps::before{left:21px}.pstep2{gap:16px}.pstep2__n{flex:0 0 44px;width:44px;height:44px;font-size:16px;border-width:4px}}

/* ===== CHECK LIST ===== */
.clist{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.clist li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.6;color:var(--c-ink)}
.csec--dark .clist li{color:rgba(255,255,255,.85)}
.clist li::before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.csec--dark .clist li::before{background-color:var(--c-white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}

/* ===== REASON CHIPS ===== */
.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.chips span{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--c-primary);
  background:var(--c-white);border:1px solid var(--c-surface-tint);border-radius:999px;padding:11px 20px}
.csec--dark .chips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--c-white)}

/* ===== OFFER PANEL (PPA) ===== */
.offerp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center;
  background:var(--c-primary);color:var(--c-white);border-radius:var(--radius-lg);padding:clamp(32px,4vw,58px);
  box-shadow:0 26px 60px rgba(0,0,0,.26)}
.offerp h2{color:var(--c-white);font-size:clamp(26px,3vw,38px);margin-bottom:16px;max-width:15ch}
.offerp p{color:rgba(255,255,255,.8);font-size:16.5px;line-height:1.72;margin-bottom:14px;max-width:50ch}
.offerp .clist li{color:rgba(255,255,255,.86)}
.offerp .clist li strong{display:block;font-family:var(--font-display);font-size:16px;color:var(--c-white)}
@media(max-width:900px){.offerp{grid-template-columns:1fr}.offerp h2,.offerp p{max-width:none}}

/* ===== CLOSING BAND ===== */
.cband{position:relative;overflow:hidden;background:var(--c-paper);padding:clamp(70px,8vw,108px) 0;text-align:center}
.cband>.container{position:relative;z-index:1}
.cband h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:16px}
.cband p{font-size:17.5px;line-height:1.7;color:var(--c-ink);opacity:.85;max-width:620px;margin:0 auto 30px}
.cband__row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.cband__tel{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;
  font-size:21px;color:var(--c-primary)}
.cband__tel svg{width:19px;height:19px}
@media(max-width:680px){.cband__row{flex-direction:column}.cband__row .btn{width:100%}}

/* ===== SECTION TEXTURES =====
   The homepage never shows a flat color band: every section carries a real OHM
   photo under a heavy wash of its own background color, and GSAP drifts it.
   Category pages now do the same. The .panel-tex layer holds the photo alone;
   the ::after overlay is the wash, tinted per variant so text contrast is
   unchanged. data-tex cycles the photo so no two neighbors share one. */
.csec::after,.cband::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.csec>*:not(.panel-tex),.cband>*:not(.panel-tex){position:relative;z-index:1}
.csec--light::after{background:rgba(255,255,255,.94)}
.csec--surface::after{background:rgba(244,244,244,.94)}
.csec--paper::after{background:rgba(245,242,234,.94)}
.csec--dark::after{background:rgba(17,17,17,.88)}
.cband::after{background:rgba(245,242,234,.93)}

.csec .panel-tex,.cband .panel-tex{background-image:none}
.csec[data-tex="1"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/panel-macro.webp')}
.csec[data-tex="2"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/roof-tile.webp')}
.csec[data-tex="3"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/array-dapple.webp')}
.csec[data-tex="4"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/panel-cells.webp')}
.csec[data-tex="5"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/solar-modern.webp')}
.csec[data-tex="6"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/homes-wide.webp')}
.csec[data-tex="7"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/inverter-close.webp')}
.csec[data-tex="8"] .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/solar-pool.webp')}
.cband .panel-tex{background-image:url('/wp-content/themes/adleverage-custom-theme/assets/site/home-dusk.webp')}
/* the FAQ inherits the homepage bake; give category pages their own photo so it
   never lands next to the section above it */
.faq[data-tex] .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/why-array.webp')}