/* Page sections */

/* --- hero --- */
.hero{background:var(--black);color:var(--white);padding-block:clamp(3rem,6vw,5rem)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__copy{max-width:34rem}
.hero h1{color:var(--white);max-width:13ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin-top:1.5rem;font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--grey-dk);max-width:42ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__figure{
  aspect-ratio:4/3;border:1px solid var(--hair-dk);
  background-color:var(--near);background-image:var(--img-fallback);
  background-size:cover;background-position:center;position:relative;
}
.hero__figure::after{
  content:attr(data-caption);position:absolute;left:0;bottom:0;
  padding:.45rem .8rem;background:var(--black);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dk);
}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__figure{aspect-ratio:16/10}
}

/* --- hero: light variant (add .hero--light to the .hero element) --- */
.hero--light{background:var(--bone);color:var(--black)}
.hero--light h1{color:var(--black)}
.hero--light h1 em{color:var(--accent-dk)}
.hero--light .eyebrow{color:var(--grey)}
.hero--light p{color:var(--grey)}
.hero--light .hero__figure{border-color:var(--hair)}
.hero--light .hero__figure::after{background:var(--black);color:var(--paper)}
.hero--light .btn--line{color:var(--black);border-color:var(--black)}
.hero--light .btn--line:hover{background:var(--black);color:var(--white);border-color:var(--black)}

/* --- credential strip --- */
.creds{background:var(--near);color:var(--white)}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.creds__item{padding:1.9rem 2rem;border-right:1px solid var(--hair-dk)}
.creds__item:first-child{padding-left:0}
.creds__item:last-child{border-right:0;padding-right:0}
.creds__icon{display:block;width:26px;height:26px;margin-bottom:1.1rem;color:var(--accent)}
.creds__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.creds h2{
  margin:0 0 .5rem;max-width:none;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--white);
}
.creds p{margin:0;font-size:.9rem;line-height:1.5;color:#D6E4DB}
@media(max-width:900px){
  .creds .wrap{grid-template-columns:1fr 1fr}
  .creds__item{border-right:0;border-bottom:1px solid var(--hair-dk)}
  .creds__item:nth-child(odd){border-right:1px solid var(--hair-dk);padding-left:0}
  .creds__item:nth-child(even){padding-right:0}
  .creds__item:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:520px){
  .creds .wrap{grid-template-columns:1fr}
  .creds__item{border-right:0 !important;padding-left:0;padding-right:0}
  .creds__item:nth-last-child(-n+2){border-bottom:1px solid var(--hair-dk)}
  .creds__item:last-child{border-bottom:0}
}

/* --- statement --- */
.statement{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.statement__big{font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
@media(max-width:900px){.statement{grid-template-columns:1fr}}

/* --- services --- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.service{display:flex;flex-direction:column;height:100%;background:var(--white)}
.service__img{
  aspect-ratio:4/5;position:relative;
  background-color:var(--near);background-image:var(--img-fallback);
  background-size:cover;background-position:center;
}
.service__img::after{
  content:attr(data-label);position:absolute;left:1.1rem;bottom:1.1rem;
  padding:.38rem .7rem;background:var(--black);color:var(--white);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
}
.service__body{display:flex;flex-direction:column;flex:1;padding:1.8rem}
.service__body h3{margin-bottom:.9rem}
.service__body p{color:var(--grey);font-size:.96rem}
.service__list{margin:1.3rem 0 0;padding:0;list-style:none;font-size:.91rem}
.service__list li{padding:.52rem 0;border-top:1px solid var(--hair);color:var(--grey)}
.service__body .btn{margin-top:1.7rem;align-self:flex-start}
@media(max-width:900px){.services{grid-template-columns:1fr}}

/* --- process --- */
.steps{border-top:1px solid var(--hair-dk)}
.step{
  display:grid;grid-template-columns:5rem 1fr 1.1fr;gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.6rem,2.8vw,2.4rem);border-bottom:1px solid var(--hair-dk);
}
.step__idx{font-family:var(--mono);font-size:1.6rem;font-weight:500;color:var(--accent);line-height:1}
.step h3{padding-top:.15rem;max-width:20ch}
.step p{margin:0;font-size:.96rem;color:var(--grey-dk)}
@media(max-width:860px){
  .step{grid-template-columns:3rem 1fr;gap:1.1rem}
  .step__idx{font-size:1.3rem}
  .step p{grid-column:2;margin-top:.6rem}
}

/* --- capture --- */
.capture{background:var(--near);color:var(--white);padding-block:clamp(2.4rem,5vw,3.4rem)}
.capture .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.capture h2{max-width:20ch;font-size:clamp(1.35rem,2.4vw,1.8rem);color:var(--white)}
.capture p{margin-top:.7rem;font-size:.93rem;color:var(--grey-dk)}
.capture__form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.capture__form .btn{grid-column:1 / -1;justify-content:center}
@media(max-width:820px){.capture .wrap{grid-template-columns:1fr}}
@media(max-width:520px){.capture__form{grid-template-columns:1fr}}

/* --- systems table --- */
.systems{width:100%;border-collapse:collapse;font-size:.94rem}
.systems th,.systems td{text-align:left;padding:1.15rem 1.15rem 1.15rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
.systems thead th{
  padding-bottom:.85rem;border-bottom:1px solid var(--black);
  font-family:var(--mono);font-size:.67rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
}
.systems tbody th{width:9.5rem;font-family:var(--mono);font-size:1.25rem;font-weight:500;line-height:1.1}
.systems tbody th span{
  display:block;margin-top:.5rem;
  font-size:.63rem;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);
}
.systems__act{width:11rem;text-align:right;padding-right:0}
.systems .btn{padding:.72rem 1.15rem;font-size:.66rem}
@media(max-width:820px){
  .systems thead{display:none}
  .systems tr{display:block;padding-block:1.3rem;border-bottom:1px solid var(--hair)}
  .systems th,.systems td{display:block;width:auto;padding:.24rem 0;border:0}
  .systems td::before{
    content:attr(data-label) " \2014 ";
    font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--grey);
  }
  .systems__act{display:none}
}

/* --- areas --- */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
.area{padding:1.6rem;background:var(--near);border-left:2px solid var(--accent)}
.area__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.area h3{font-size:1.08rem}
.area__dist{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.area p{margin:0;font-size:.92rem;color:var(--grey-dk)}
@media(max-width:760px){.areas{grid-template-columns:1fr}}

/* --- benefits --- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.benefit{padding-top:1.1rem;border-top:2px solid var(--accent)}
.benefit h3{margin-bottom:.6rem;font-size:1.02rem}
.benefit p{margin:0;font-size:.92rem;color:var(--grey)}
@media(max-width:900px){.benefits{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.benefits{grid-template-columns:1fr}}

/* --- split w/ figure --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.figure{
  aspect-ratio:7/8;border:1px solid var(--hair-dk);
  background-color:var(--near);background-image:var(--img-fallback);
  background-size:cover;background-position:center;
}
.figure--wide{aspect-ratio:7/5}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* --- electrical list --- */
.tick{margin:0;padding:0;list-style:none;columns:2;column-gap:2.4rem}
.tick li{padding:.72rem 0;border-bottom:1px solid var(--hair);font-size:.96rem;break-inside:avoid}
@media(max-width:660px){.tick{columns:1}}

/* --- capability --- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.cap{display:flex;flex-direction:column;background:var(--near)}
.cap__img{
  aspect-ratio:3/2;
  background-color:var(--near);background-image:var(--img-fallback);
  background-size:cover;background-position:center;
}
.cap__body{padding:1.5rem}
.cap h3{margin-bottom:.7rem;font-size:1.1rem;color:var(--white)}
.cap p{margin:0;font-size:.92rem;color:var(--grey-dk)}
@media(max-width:820px){.caps{grid-template-columns:1fr}}

/* --- faq --- */
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  position:relative;padding:1.4rem 3rem 1.4rem 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.04rem;line-height:1.35;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.8rem;width:13px;height:13px;
  background:
    linear-gradient(var(--grey),var(--grey)) center/13px 1.5px no-repeat,
    linear-gradient(var(--grey),var(--grey)) center/1.5px 13px no-repeat;
  transition:transform .2s ease;
}
.faq details[open] summary{color:var(--near)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__answer{padding:0 clamp(0px,6vw,5rem) 1.5rem 0;max-width:76ch;font-size:.97rem;color:var(--grey)}
.faq__answer a{color:var(--near)}

/* --- forms --- */
.formcard{background:var(--white);padding:clamp(1.7rem,3.4vw,2.6rem)}
.field{margin-top:1.05rem}
.field:first-child{margin-top:0}
.field label{
  display:block;margin-bottom:.42rem;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}
.capture .field label{color:var(--grey-dk)}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .88rem;
  font-family:var(--sans);font-size:.97rem;color:var(--black);
  background:var(--paper);border:1px solid var(--hair);border-radius:0;
}
.capture .field input,.capture .field select{background:var(--white);border-color:transparent}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:var(--white)}
.field--pair{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.formcard .btn{width:100%;justify-content:center;margin-top:1.5rem}
.fineprint{margin-top:.95rem;font-size:.77rem;line-height:1.5;color:var(--grey)}
.hp{position:absolute;left:-9999px}

/* --- image bindings (keeps background URLs out of the markup) --- */
.img-hero{background-image:url('../img/hero.jpg')}
.img-solar{background-image:url('../img/solar.jpg')}
.img-battery{background-image:url('../img/battery.jpg')}
.img-electrical{background-image:url('../img/electrical.jpg')}
.img-rebates{background-image:url('../img/rebates.jpg')}
.img-trade{background-image:url('../img/trade.jpg')}
.img-grid-connect{background-image:url('../img/grid-connect.jpg')}
.img-off-grid{background-image:url('../img/off-grid.jpg')}
.img-commercial{background-image:url('../img/commercial.jpg')}

/* --- small utilities --- */
.u-flush-top{padding-top:0}
.u-mt-1{margin-top:1rem}
.u-mt-2{margin-top:1.3rem}
.u-mt-3{margin-top:1.7rem}
.u-mt-4{margin-top:2rem}
.u-small{font-size:.85rem}
.u-link{text-decoration:underline}
.u-accent{color:var(--accent);text-decoration:none}
.u-shown{display:flex}

/* --- whatsapp submit + optional-field marker --- */
.btn--wa::after{content:""}
.btn--wa::before{
  content:"";width:16px;height:16px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url('../img/whatsapp.svg') center/contain no-repeat;
  mask:url('../img/whatsapp.svg') center/contain no-repeat;
}
.field__opt{text-transform:none;letter-spacing:0;opacity:.65;font-size:.9em}
/* --- consent checkbox --- */
.consent{
  display:flex;align-items:flex-start;gap:.7rem;margin-top:1.3rem;
  font-size:.82rem;line-height:1.5;color:var(--grey);cursor:pointer;
}
.consent--wide{grid-column:1 / -1;color:var(--grey-dk)}
.consent input{
  flex-shrink:0;width:18px;height:18px;margin:.15rem 0 0;
  accent-color:var(--accent);cursor:pointer;
}
.consent a{color:inherit;text-decoration:underline}
.capture .consent a{color:var(--white)}