/* ============================================================
   CGS Carbon — home page styles
   Hero, fact strip, split photo panels, duotone band, quote.
   ============================================================ */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 520px at 82% 8%,rgba(29,118,134,.10),transparent 62%),
  linear-gradient(180deg,var(--tint),#fff 72%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:64px;
  align-items:center;padding-top:96px;padding-bottom:104px}
.hero h1 .fade{color:#4E93A3}
.hero .lead{margin-top:26px;max-width:52ch}
.hero-media{position:relative}
.hero-media img{width:100%;height:auto;border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover}
.hero-badge{position:absolute;left:-38px;bottom:-38px;width:126px;height:126px;background:#fff;
  border-radius:50%;display:grid;place-items:center;padding:16px;box-shadow:var(--shadow)}
.hero-badge img{width:100%;height:100%}
.wave{position:absolute;right:-8%;top:66%;width:58%;opacity:.45;pointer-events:none}

/* ---------- fact strip ---------- */
.herofacts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.herofacts ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.herofacts li{margin:0;padding:26px 28px;border-left:1px solid var(--line)}
.herofacts li:first-child{border-left:0;padding-left:0}
.herofacts .k{display:block;font-size:1.55rem;font-weight:700;color:var(--ink);
  letter-spacing:-.05em;line-height:1.1}
.herofacts .v{display:block;font-size:.83rem;color:var(--slate);margin-top:6px;line-height:1.45}

/* ---------- split photo panels (Birchtech signature) ----------
   Mirrors the parent site's feature tiles. Each panel is a flex child, so
   hovering one grows it while its neighbour narrows; the photo eases in at the
   same time. The tint is a left-heavy gradient rather than a full wash, which
   holds the copy legible while leaving the right of the photo readable. */
.panels{display:flex;gap:0}
.panels:hover .panel{flex-grow:.82}
.panels:hover .panel:hover{flex-grow:1.5}
.panel{position:relative;display:flex;flex-direction:column;justify-content:center;
  flex:1 1 0;min-width:0;min-height:560px;padding:clamp(36px,4vw,60px);color:#fff;
  isolation:isolate;overflow:hidden;text-decoration:none;
  transition:flex-grow .55s var(--ease)}
.panel:hover{text-decoration:none}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s var(--ease)}
.panel:hover img{transform:scale(1.05)}
/* Two tints, matching the hues the parent site gives its own paired tiles:
   the water side takes Birchtech's clean-water teal, the gas side its
   clean-air sage. Paired this way the two panels read as one graphic. */
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(29,118,134,.92) 0%,rgba(29,118,134,.58) 45%,rgba(29,118,134,.16) 100%)}
.panel-water::after{background:
  linear-gradient(100deg,rgba(6,114,141,.93) 0%,rgba(6,114,141,.56) 45%,rgba(6,114,141,.15) 100%)}
.panel-gas::after{background:
  linear-gradient(100deg,rgba(68,126,123,.93) 0%,rgba(68,126,123,.56) 45%,rgba(68,126,123,.15) 100%)}
.panel-inner{max-width:560px}
.panel h2,.panel h3{color:#fff}
.panel h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:18px}
.panel p{color:#fff;max-width:42ch;font-weight:500;margin:0}
.panel .pills{margin:24px 0 30px}
.panel .pill{font-weight:700;border-color:rgba(255,255,255,.45)}
.panel .btns{margin-top:0}
.panel .btn-light:hover{background:linear-gradient(90deg,var(--teal) 0%,var(--teal-deep) 100%);
  color:#fff;transform:none}
.panel .btn-light:hover .ico{background:rgba(255,255,255,.22);color:#fff}

/* ---------- full-bleed duotone band ---------- */
.band{position:relative;padding:132px 0;background:var(--teal-ink);overflow:hidden;isolation:isolate}
.band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.62}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,46,54,.75),rgba(10,46,54,.85))}
.band h2,.band h3{color:#fff}
.band p{color:#D7E7EA}
.band .eyebrow{color:#8FD3DF}

/* ---------- pull quote ---------- */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote .qm{font-size:3rem;color:var(--teal);line-height:1;margin-bottom:10px}
.quote blockquote{margin:0;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;
  letter-spacing:-.055em;line-height:1.14;color:var(--ink)}
.quote figcaption{margin-top:28px;font-size:.92rem;color:var(--slate)}
.quote figcaption strong{display:block;color:var(--ink);font-size:1rem}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero .wrap{gap:44px}
}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:64px;gap:44px}
  .hero-media{order:-1;max-width:560px}
  .hero-badge{width:92px;height:92px;left:-14px;bottom:-18px;padding:11px}
  .wave{display:none}
  .herofacts ul{grid-template-columns:1fr 1fr}
  .herofacts li{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-right:16px}
  .herofacts li:nth-child(-n+2){border-top:0}
  /* stack the tiles and disable the grow/shrink interaction on touch */
  .panels{flex-direction:column}
  .panels:hover .panel,.panels:hover .panel:hover{flex-grow:1}
  .panel{min-height:440px}
  .band{padding:92px 0}
}
@media(max-width:620px){
  .herofacts ul{grid-template-columns:1fr}
  .herofacts li{border-top:1px solid var(--line);padding:20px 0}
  .herofacts li:first-child{border-top:0}
}