/* Easy Flow Gutter Co. — home page only (WebGL hero + home sections) */

.hero{
  position:relative;isolation:isolate;
  min-height:min(100svh,880px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(48px,7vw,90px));
  padding-bottom:clamp(72px,9vw,120px);
  background:var(--ink);
  overflow:hidden;
}
.hero__stage{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}

/* scrim: keeps the headline, lede and micro-copy above AA on a bright photo.
   Left-to-right so the text column stays dark while the roofline stays visible. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(10,11,7,.92) 0%,rgba(10,11,7,.86) 32%,rgba(10,11,7,.55) 62%,rgba(10,11,7,.34) 100%),
    linear-gradient(to top,rgba(10,11,7,.7) 0%,rgba(10,11,7,0) 42%);
}
/* a whisper of brand yellow so the photo still reads as Easy Flow */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 88% 12%,rgba(238,226,102,.16),rgba(238,226,102,0) 70%);
}
@media (max-width:880px){
  .hero__img{object-position:58% 44%}
  .hero::before{background:
    linear-gradient(180deg,rgba(10,11,7,.86) 0%,rgba(10,11,7,.78) 45%,rgba(10,11,7,.88) 100%);}
}

.hero__inner{position:relative;z-index:1;width:min(1200px,100% - (2 * var(--gutter)))}
.hero .eyebrow{color:var(--yellow)}
.hero__title{
  color:#fff;max-width:14ch;
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.hero__title em{font-style:italic;color:var(--yellow);font-variation-settings:"opsz" 144}
.hero__lede{color:#D9DBD0;margin-top:var(--s3);max-width:52ch;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.hero__cta{margin-top:var(--s5)}
/* the hero is a dark photo but not a .dark section, so the ghost button needs
   the light-on-dark treatment explicitly or it renders near-invisible */
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(10,11,7,.28);backdrop-filter:blur(2px)}
.hero .btn--ghost:hover{color:var(--ink);background:var(--yellow);border-color:var(--yellow)}
.hero__micro{margin-top:var(--s3);font-size:.875rem;color:#A9AB9E}

.hero__scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:1;width:1px;height:52px;background:linear-gradient(to bottom,rgba(238,226,102,0),rgba(238,226,102,.7));overflow:hidden}
.hero__scroll span{position:absolute;inset:0;background:var(--yellow);animation:flow 2.4s var(--ease) infinite}
@keyframes flow{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero__scroll span{animation:none;opacity:.4}}

@media (max-width:640px){
  .hero{min-height:auto;padding-bottom:clamp(56px,10vw,80px)}
  .hero__title{max-width:none}
  .hero__scroll{display:none}
}

/* ---- why / stats ---- */
.why__media{max-width:460px;margin-inline:auto}
.stats{margin-top:clamp(48px,6vw,80px);padding-top:var(--s6);border-top:1px solid var(--line-dark)}

/* ---- quote block ---- */
.quote__split{align-items:start}
.quote__contact{margin-top:var(--s4);font-size:1.0625rem}
.quote__contact li::before{background:var(--yellow)}
.quote__contact a{color:#fff;text-decoration:none}
.quote__contact a:hover{color:var(--yellow)}
.quote__card{background:var(--paper);border-radius:var(--r-l);padding:clamp(24px,3vw,40px);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.quote__card .field label{color:var(--ink)}