.hero{position:relative;min-height:540px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(135deg,#0f4a2d 0%,#1f7a4d 60%,#2f8f5f 100%)}
.hero-art{position:absolute;inset:0;pointer-events:none}
.hero-art svg{position:absolute;right:4%;top:36px;height:72%;max-width:60%;opacity:.22}
.hero-band{position:relative;background:rgba(255,255,255,.93);padding:34px 0 26px;margin-bottom:56px;text-align:center}
.hero-band h1{margin:0;color:var(--green-dark);font-size:clamp(28px,4.6vw,48px);font-weight:300;line-height:1.15}
.hero-band h1 strong{font-weight:800}
.hero-band p{margin:10px 0 0;color:var(--green);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,1.6vw,15px)}
.scroll-down{display:inline-flex;margin-top:14px;width:38px;height:38px;border-radius:50%;border:2px solid var(--green);
  align-items:center;justify-content:center;color:var(--green);text-decoration:none;animation:bob 2s ease-in-out infinite}
.scroll-down svg{width:16px;height:16px;fill:currentColor}
@keyframes bob{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scroll-down{animation:none}}
@media (max-width:760px){.hero{min-height:360px}}