/* components part 9 of 9 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

/* The homepage instance of this band carries an eyebrow, a two-line headline AND a full
   paragraph, over a brighter frame than the interior page's. The shared gradient was
   tuned for a short heading and left the paragraph sitting on highlights. Two changes,
   scoped so the interior page keeps its lighter treatment: a deeper scrim, and a panel
   behind the copy so the text has its own ground rather than borrowing the photo's. */
/* This section holds nothing but a full-bleed image, so the section rhythm's own
   padding-block had nowhere to go: it painted a 100px white strip above and below an
   edge-to-edge dark band, which reads as a gap someone forgot to fill rather than as
   breathing room. The band supplies its own height; the section supplies none. */
section.flush{padding-block:0}
.h-why-band::after{background:linear-gradient(0deg,rgba(20,19,16,.95),rgba(20,19,16,.72) 46%,rgba(20,19,16,.34))}
.h-why-band .b-overlay{background:linear-gradient(90deg,rgba(20,19,16,.72),rgba(20,19,16,.34) 72%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-radius:3px;max-width:calc(760px + var(--over))}
.h-why-band .b-overlay p{color:rgba(255,255,255,.94);font-size:clamp(16px,1.15vw,17.5px);line-height:1.7}
.h-why-band .b-overlay h2{color:#fff;text-shadow:0 1px 18px rgba(20,19,16,.45)}@media(max-width:760px){
  .h-why-band .b-overlay{background:linear-gradient(0deg,rgba(20,19,16,.8),rgba(20,19,16,.6))}}
.h-why{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,72px);
       align-items:center}
.h-why img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--grey)}@media(max-width:860px){ .h-why{grid-template-columns:1fr}}