/* ===== Solar Shop hero: "Reliable solar solutions from a trusted brand" =====
   Uses the site's own tokens (site.css :root) so global changes flow through.
   Hero band = 300px on desktop, one third of the old 900px hero. */
.hero2{
  --h2-band:300px;
  --h2-gap:14px;
  --h2-radius:26px;
  --h2-shadow:0 26px 50px -34px rgba(15,35,20,.55);
  position:relative;
  padding:96px 0 0;              /* clears the floating header bar */
  background:linear-gradient(180deg,#F4F7EF 0%,#F1F5EC 100%);
}
.h2-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.12fr) minmax(0,.62fr);
  gap:var(--h2-gap);
  height:var(--h2-band);
}
.h2-card{
  background:#fff;
  border:1px solid rgba(230,223,205,.7);
  border-radius:var(--h2-radius);
  box-shadow:var(--h2-shadow);
}

/* -- 1. copy card -- */
.h2-copy{display:flex;flex-direction:column;justify-content:center;padding:26px clamp(24px,2.3vw,36px)}
.h2-eyebrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 12px 5px 10px;margin-bottom:12px;border-radius:999px;
  background:var(--tg);color:var(--deep);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.h2-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(79,132,82,.18)}
.hero2 h1{
  margin:0 0 10px;color:var(--ink);
  font-size:clamp(28px,2.45vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.06;
}
.hero2 h1 .serif{color:var(--sun);white-space:nowrap}
.h2-copy p{margin:0 0 18px;max-width:46ch;font-size:15px;line-height:1.55;color:var(--text)}
.h2-copy .cta{display:flex;flex-wrap:wrap;gap:10px}

/* -- 2. real team photo -- */
.h2-photo{position:relative;margin:0;overflow:hidden;border-radius:var(--h2-radius);box-shadow:var(--h2-shadow);background:#DCE6D6}
.h2-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 58%;
  transform:scale(1.04);transition:transform 1.6s var(--ease);
}
.h2-photo:hover img{transform:scale(1.07)}
.h2-chip{
  position:absolute;left:14px;bottom:14px;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 9px;border-radius:999px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -16px rgba(10,30,15,.55);
  color:var(--text);font-size:13px;line-height:1.25;
}
.h2-chip b{display:block;color:var(--ink);font-size:14px;font-weight:800}
.h2-chip-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--deep);flex:none}
.h2-chip-ic svg{width:16px;height:16px;fill:#F3E2B0}

/* -- 3. proof + quote + supplied lockup -- */
.h2-side{display:grid;grid-template-rows:1fr auto auto;gap:10px;min-width:0}
.h2-stats{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:14px 10px}
.h2-stats>div{padding:0 8px;text-align:center;border-left:1px solid var(--line)}
.h2-stats>div:first-child{border-left:0}
.h2-stats b{display:block;color:var(--green);font-size:clamp(17px,1.35vw,22px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h2-stats small{display:block;margin-top:4px;color:var(--text);font-size:12px;line-height:1.25}
.hero2 .h2-quote{position:relative;justify-content:space-between;width:100%;padding:12px 12px 12px 24px;border-width:3px}
.h2-brand{display:grid;place-items:center;padding:12px 18px}
.h2-brand img{display:block;width:100%;max-width:230px;height:auto}

/* -- accreditation strip (supplied artwork) -- */
.h2-accr{display:flex;align-items:center;justify-content:center;gap:20px;padding:22px 0 20px}
.h2-accr-t{color:var(--green);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.h2-accr-logos{flex:0 1 auto;min-width:0;overflow:hidden;border-radius:16px;background:#fff;border:1px solid rgba(230,223,205,.7);box-shadow:0 16px 30px -26px rgba(15,35,20,.5)}
.h2-accr img{display:block;width:auto;max-width:100%;height:auto;max-height:76px}

/* -- entrance motion (smooth, never robotic) -- */
@media (prefers-reduced-motion:no-preference){
  .hero2 .h2-copy,.hero2 .h2-photo,.hero2 .h2-side>*,.hero2 .h2-accr{
    opacity:0;transform:translateY(16px);
    animation:h2in .9s var(--ease) forwards;
  }
  .hero2 .h2-photo{animation-delay:.08s}
  .hero2 .h2-side>*:nth-child(1){animation-delay:.16s}
  .hero2 .h2-side>*:nth-child(2){animation-delay:.22s}
  .hero2 .h2-side>*:nth-child(3){animation-delay:.28s}
  .hero2 .h2-accr{animation-delay:.36s}
  .hero2 .h2-photo img{animation:h2drift 22s ease-in-out infinite alternate}
}
@keyframes h2in{to{opacity:1;transform:none}}
@keyframes h2drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.09) translateX(-1.2%)}}

/* -- tablet -- */
@media (max-width:1180px){
  .h2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:var(--h2-band) auto;height:auto}
  .h2-side{grid-column:1 / -1;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:none;align-items:stretch}
  .h2-accr{flex-direction:column;gap:10px}
}
/* -- mobile -- */
@media (max-width:760px){
  .hero2{padding-top:88px}
  .h2-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .h2-grid>*{min-width:0}
  .h2-copy{padding:24px 22px}
  .hero2 h1{font-size:31px;text-align:left}
  .h2-copy .cta{gap:8px}
  .h2-copy .cta .btn{flex:1 1 auto;justify-content:center;padding:11px 14px;font-size:14px;white-space:nowrap}
  .h2-photo{aspect-ratio:16/10}
  .h2-side{grid-template-columns:1fr;gap:10px}
  .h2-stats{padding:14px 4px}
  .h2-accr{flex-direction:column;gap:10px;padding:14px 0 16px}
}

/* -- back to top -- */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--deep);border:2px solid #fff;box-shadow:0 14px 28px -14px rgba(10,30,15,.6);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--deep2)}
.totop svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}