/* Homepage design A (pages/home-a.php). All selectors prefixed .ha / .ha-. */

/* hero: dark forest band, video + welcome copy left, Mark's cut-out photo right */
.ha-hero{position:relative;overflow:hidden;color:#e7f3e9;
  background:radial-gradient(900px 520px at 82% 40%,rgba(125,189,13,.38),transparent 62%),
             linear-gradient(155deg,#0b3324 0%,var(--forest) 45%,#17583a 100%);padding:72px 0 0}
.ha-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.ha-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-areas:"copy mark" "video mark";column-gap:56px;align-items:end}
.ha-hero__copy{grid-area:copy;align-self:start}
.ha-hero__video{grid-area:video;padding-bottom:150px}
.ha-hero__mark{grid-area:mark;align-self:end;position:relative;display:flex;justify-content:center}
.ha-hero__mark{padding-bottom:110px}
.ha-hero__mark::before{content:"";position:absolute;left:50%;bottom:200px;width:118%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(201,236,138,.55),rgba(125,189,13,.18) 55%,transparent 70%)}
.ha-hero__mark img{position:relative;width:100%;max-width:440px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.ha-hero h1{color:#fff;font-size:clamp(38px,4.6vw,62px);margin-bottom:.35em}
.ha-hero h1 span{color:var(--lime);display:block}
.ha-hero__intro{font-size:21px;line-height:1.6;color:#d6e9dc;max-width:620px;margin-bottom:34px}
.ha-hero .cc-video{border:7px solid rgba(240,248,236,.92);background:#0b3324;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 24px 60px rgba(0,0,0,.35)}

/* lead-magnet band: white card that overlaps the hero */
.ha-join{position:relative;z-index:2;margin-top:-110px}
.ha-join__card{background:#fff;border-radius:28px;box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:48px 52px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 56px;align-items:center}
.ha-join__pitch h2{font-size:clamp(26px,2.5vw,34px);line-height:1.25;margin:0}
.ha-join__pitch h2::before{content:"";display:block;width:64px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lime),var(--green));margin-bottom:22px}
.ha-join__form{background:var(--mint);border:1px solid var(--mint-2);border-radius:22px;padding:30px 30px 26px}
.ha-join__logo{width:210px;margin:0 auto 6px}
.ha-join__title{text-align:center;font:800 20px/1.2 var(--head);color:var(--forest);letter-spacing:.02em;margin:6px 0 16px}
.ha-join__cta{grid-column:1 / -1;text-align:center;border-top:1px dashed #cfdcc7;padding-top:30px;margin-top:6px}
.ha-join__cta .cc-btn{min-width:min(520px,100%)}

/* section heads */
.ha-head{text-align:center;max-width:760px;margin:0 auto 52px}
.ha-head h2{margin-bottom:.35em}
.ha-head h2::after{content:"";display:block;width:64px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--lime),var(--green));margin:18px auto 0}
.ha-head .cc-lead{margin:0}

/* product category cards */
.ha-offers{padding-top:100px}
.ha-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
.ha-cat{grid-column:span 2;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:0 30px 30px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.ha-cat:nth-child(4){grid-column:span 2}
.ha-cat:nth-child(5){grid-column:span 4}
.ha-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ha-cat__pic{display:block;margin:0 -30px 18px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:radial-gradient(circle at 50% 60%,#fff 0,var(--mint) 70%);padding:20px 0 6px}
.ha-cat__pic img{width:230px;margin:0 auto}
.ha-cat__title{font-size:25px;margin:0 0 .45em}
.ha-cat__title a{color:var(--forest);text-decoration:none}
.ha-cat__title a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.ha-cat__title a:hover{color:var(--green)}
.ha-cat p{color:var(--ink-2);font-size:18px;line-height:1.6}
.ha-cat p:last-of-type{margin-bottom:22px}
.ha-cat__arrow{margin-top:auto;width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--green-d);display:grid;place-items:center;transition:background .2s,color .2s}
.ha-cat__arrow svg{width:22px;height:22px}
.ha-cat:hover .ha-cat__arrow{background:var(--green);color:#fff}
.ha-cat__pic{position:relative;z-index:1}

/* statement band (old black band) */
.ha-band{display:block;background:#0a2a1e;color:#fff;text-decoration:none;padding:40px 0;transition:background .2s}
.ha-band:hover{background:#0d3b2a;color:#fff}
.ha-band__in{display:flex;align-items:center;justify-content:space-between;gap:30px}
.ha-band strong{font:800 clamp(20px,2vw,26px)/1.4 var(--head);letter-spacing:-.01em;max-width:960px}
.ha-band__go{flex:none;width:60px;height:60px;border-radius:50%;background:var(--lime);color:var(--forest);display:grid;place-items:center}
.ha-band__go svg{width:26px;height:26px}

/* testimonials */
.ha-says{background:var(--mint)}
.ha-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.ha-quote{position:relative;margin:0;background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);padding:34px 32px 30px;display:flex;flex-direction:column;gap:20px}
.ha-quote__mark{position:absolute;top:-22px;right:26px;width:44px;height:44px;padding:11px 10px;border-radius:50%;background:var(--forest);fill:var(--lime);box-shadow:0 8px 18px rgba(11,51,36,.25)}
.ha-quote blockquote{margin:0}
.ha-quote blockquote p{font-size:18px;line-height:1.65;color:var(--ink)}
.ha-quote blockquote p:last-child{margin:0}
.ha-quote__who{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:0 0 20px;min-height:94px}
.ha-quote__who img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--mint-2)}
.ha-quote__name{display:block;font:800 19px/1.2 var(--head);color:var(--forest);text-transform:uppercase;letter-spacing:.02em}
.ha-quote__role{display:block;font:700 16px/1.3 var(--head);letter-spacing:.04em;color:var(--green);margin-top:4px}

/* closing CTA */
.ha-close{background:linear-gradient(155deg,#0b3324 0%,var(--forest) 50%,#17583a 100%);color:#e7f3e9;padding:90px 0}
.ha-close__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:60px;align-items:center}
.ha-close h2{color:#fff;font-size:clamp(26px,2.6vw,36px);line-height:1.25;margin-bottom:34px}
.ha-close__pic img{border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.4);border:6px solid rgba(255,255,255,.1)}

/* tablet */
@media (max-width:980px){
  .ha-hero{padding-top:52px}
  .ha-hero__grid{grid-template-columns:1fr;grid-template-areas:"copy" "video" "mark";text-align:center}
  .ha-hero__intro{margin-left:auto;margin-right:auto}
  .ha-hero__video{padding-bottom:0}
  .ha-hero__mark{margin-top:20px;padding-bottom:110px}
  .ha-hero__mark img{max-width:300px}
  .ha-hero__mark::before{bottom:150px;width:120%;max-width:440px}
  .ha-join__card{grid-template-columns:1fr;padding:40px 32px}
  .ha-join__pitch{text-align:center}
  .ha-join__pitch h2::before{margin:0 auto 22px}
  .ha-cats{grid-template-columns:repeat(2,1fr)}
  .ha-cat,.ha-cat:nth-child(4){grid-column:auto}
  .ha-quote__who{min-height:0}
  .ha-cat:nth-child(5){grid-column:1 / -1;max-width:560px;justify-self:center}
  .ha-quotes{grid-template-columns:1fr;max-width:720px;margin:0 auto}
  .ha-close__grid{grid-template-columns:1fr;text-align:center}
  .ha-close__pic{max-width:560px;margin:0 auto}
}

/* phone */
@media (max-width:640px){
  .ha-hero{padding-top:40px}
  .ha-hero h1{font-size:36px}
  .ha-hero__intro{font-size:18px;margin-bottom:26px}
  .ha-hero .cc-video{border-width:6px}
  .ha-hero__mark img{max-width:230px}
  .ha-hero__mark{padding-bottom:90px}
  .ha-join{margin-top:-90px}
  .ha-join__card{padding:30px 20px;border-radius:22px}
  .ha-join__pitch h2{font-size:24px}
  .ha-join__form{padding:24px 18px 20px}
  .ha-join__cta{padding-top:24px}
  .ha-offers{padding-top:70px}
  .ha-head{margin-bottom:36px}
  .ha-cats{grid-template-columns:1fr;gap:22px}
  .ha-cat:nth-child(5){grid-column:auto}
  .ha-cat{padding:0 22px 24px}
  .ha-cat__pic{margin:0 -22px 16px}
  .ha-cat__pic img{width:200px}
  .ha-band{padding:30px 0}
  .ha-band__in{flex-direction:column;align-items:flex-start;gap:18px}
  .ha-band__go{width:52px;height:52px}
  .ha-quote{padding:26px 22px 24px}
  .ha-close{padding:64px 0}
  .ha-close h2{font-size:24px}
}