.hapo-client-logos,.hapo-why-hapo{font-family:"Manrope",sans-serif;color:#09090b}.hapo-client-logos--width-full,.hapo-why-hapo--width-full{position:relative;left:50%;width:100vw;margin-left:-50vw}.hapo-client-logos{padding:120px 32px}.hapo-client-logos header,.hapo-why-hapo__body header{text-align:center}.hapo-client-logos h2,.hapo-client-logos h3,.hapo-why-hapo h2{margin:0;font-size:40px;font-weight:800;letter-spacing:-1.2px;line-height:1.2;text-transform:uppercase}.hapo-client-logos header i,.hapo-why-hapo header i{display:block;width:150px;height:4px;margin:31px auto 58px;background:#1cca67}.hapo-client-logos__filters{display:flex;max-width:1120px;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 auto 30px}.hapo-client-logos__filters button{border:0;border-radius:999px;background:#f6f6f6;padding:11px 19px;color:#181818;font:600 15px/1.2 "Manrope",sans-serif;cursor:pointer}.hapo-client-logos__filters button.is-active{background:#00c14a;color:#fff}.hapo-client-logos__filters button:focus-visible{outline:3px solid #09090b;outline-offset:3px}.hapo-client-logos__grid{display:grid;max-width:1360px;grid-template-columns:repeat(5,1fr);gap:20px;margin:0 auto;padding:0;list-style:none}.hapo-client-logos__item{display:grid;min-height:130px;place-items:center;border:1px solid #e5e7e8;border-radius:12px;background:#fff;transition:opacity .2s ease,transform .2s ease}.hapo-client-logos__item.is-filtered-out{display:none}.hapo-client-logos__item img{width:100%;height:auto;max-width:256px;object-fit:contain}.hapo-why-hapo{display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.45fr);min-height:1050px;background:#f5f5f5}.hapo-why-hapo__image{align-self:start;margin-top:115px}.hapo-why-hapo__image img{display:block;width:100%;height:auto}.hapo-why-hapo__body{padding:120px clamp(30px,6vw,120px) 110px}.hapo-why-hapo__body header i{margin-bottom:58px}.hapo-why-hapo ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}.hapo-why-hapo__card{min-height:190px;padding:26px 20px;border-radius:12px;background:#fff;box-shadow:0 9px 20px rgb(0 0 0 / 5%);text-align:center}.hapo-why-hapo__card img{width:58px;height:58px;object-fit:contain}.hapo-why-hapo__card h3{margin:13px 0 7px;font-size:19px;font-weight:800;line-height:1.3}.hapo-why-hapo__card p{margin:0;color:#777;font-size:14px;font-weight:500;line-height:1.4}
@media(max-width:900px){.hapo-client-logos__grid{grid-template-columns:repeat(3,1fr)}.hapo-why-hapo{grid-template-columns:1fr}.hapo-why-hapo__image{max-width:744px;margin:0 auto}.hapo-why-hapo__body{padding:75px 32px}}
@media(max-width:767px){.hapo-client-logos{padding:72px 16px}.hapo-client-logos h2,.hapo-client-logos h3,.hapo-why-hapo h2{font-size:28px}.hapo-client-logos header i,.hapo-why-hapo header i{width:110px;margin:18px auto 34px}.hapo-client-logos__filters{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;padding-bottom:7px}.hapo-client-logos__filters button{flex:0 0 auto;font-size:13px}.hapo-client-logos__grid{grid-template-columns:repeat(2,1fr);gap:12px}.hapo-client-logos__item{min-height:92px}.hapo-why-hapo__body{padding:65px 16px}.hapo-why-hapo ul{grid-template-columns:1fr;gap:16px}.hapo-why-hapo__card{min-height:0}}

/* Why Hapo: quiet flowing lines behind the existing photograph and cards. */
.hapo-why-hapo{position:relative;isolation:isolate;overflow:hidden}
.hapo-why-hapo__flow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hapo-why-hapo__flow svg{display:block;width:100%;height:100%}
.hapo-why-hapo__flow-static{opacity:.12}
.hapo-why-hapo__flow-trails{opacity:.55}
.hapo-why-hapo__flow-trails path{stroke-dasharray:180 2700;stroke-dashoffset:2880;animation:hapo-why-flow 15s linear infinite}
.hapo-why-hapo__flow-trails path:nth-child(2){animation-delay:-3s;animation-duration:18s}
.hapo-why-hapo__flow-trails path:nth-child(3){animation-delay:-8s;animation-duration:17s}
.hapo-why-hapo__flow-trails path:nth-child(4){animation-delay:-5s;animation-duration:19s}
.hapo-why-hapo__flow-trails path:nth-child(5){animation-delay:-12s;animation-duration:16s}
.hapo-why-hapo__flow-trails path:nth-child(6){animation-delay:-10s;animation-duration:20s}
@keyframes hapo-why-flow{to{stroke-dashoffset:0}}
.hapo-why-hapo__image,.hapo-why-hapo__body{position:relative;z-index:1}
.hapo-why-hapo__card{position:relative;border:1px solid transparent;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.hapo-why-hapo__card img{transition:transform .35s ease}
@media(hover:hover){.hapo-why-hapo__card:hover{transform:translateY(-7px);border-color:#a5ebc4;background:#fbfffc;box-shadow:0 18px 34px rgb(0 100 56 / 13%)}.hapo-why-hapo__card:hover img{transform:translateY(-3px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hapo-why-hapo__flow-trails path{animation:none;stroke-dashoffset:0}.hapo-why-hapo__card,.hapo-why-hapo__card img{transition:none}}
@media(prefers-reduced-motion:reduce){.hapo-client-logos__item{transition:none}}
.hapo-client-logos__item--empty{border-style:dashed;color:#727272;font-size:14px;text-align:center}

/* Client logos: keep filter selection distinct from the transient hover state. */
.hapo-client-logos__filters button{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.hapo-client-logos__item{transition:opacity .2s ease,transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.hapo-client-logos__item img{transition:transform .25s ease}
@media(hover:hover){
  .hapo-client-logos__filters button:not(.is-active):hover{background:#e7f9ed;color:#008c3a}
  .hapo-client-logos__filters button.is-active:hover{background:#00a940;box-shadow:0 4px 12px rgb(0 142 58 / 18%)}
  .hapo-client-logos__item:not(.hapo-client-logos__item--empty):hover{transform:translateY(-5px);border-color:#a5ebc4;box-shadow:0 14px 28px rgb(0 100 56 / 10%)}
  .hapo-client-logos__item:not(.hapo-client-logos__item--empty):hover img{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .hapo-client-logos__filters button,.hapo-client-logos__item,.hapo-client-logos__item img{transition:none}
}

/* Spacing aligned to the supplied homepage crop (2026-10-20, 983px crop = 1920px, ×1.953):
   photo 744px flush left; grey panel from 25.73% that runs ~135px behind the growth CTA;
   CTA 120px below the cards; filters on one row with 28px gaps. */
.hapo-client-logos__filters button{margin:0;padding:11px 15px;text-transform:none;letter-spacing:0}
@media(min-width:901px){
  .hapo-why-hapo{grid-template-columns:38.75% minmax(0,1fr);background:linear-gradient(90deg,#fff 0 25.73%,#f1f2f1 25.73% 100%)}
  .hapo-why-hapo__image{margin-top:120px}
  .hapo-why-hapo__body{padding:120px 20.5% 110px 5.02%}
  .hapo-why-hapo__body header i{margin-bottom:61px}
  .hapo-why-hapo ul{gap:31px 32px}
  .hapo-why-hapo:has(+ .hapo-contact-section--growth_cta) .hapo-why-hapo__body{padding-bottom:240px}
  .hapo-why-hapo + .hapo-contact-section--growth_cta{margin-top:-135px}
  .hapo-client-logos__filters{gap:28px;margin-bottom:33px}
}
/* Mobile, from the supplied 375px design (2026-10-20): no photo, two-line title,
   16px card stack, and a full-width growth CTA 31px below the last card (no overlap). */
.hapo-why-hapo__mobile-break{display:none}
@media(max-width:767px){
  .hapo-why-hapo__mobile-break{display:inline}
  .hapo-why-hapo__image{display:none}
  .hapo-why-hapo__body{padding:61px 16px 31px}
  .hapo-why-hapo h2{font-size:25.5px;letter-spacing:0;line-height:34px}
  .hapo-why-hapo header i{width:80px;margin:11px auto 30px}
  .hapo-why-hapo ul{gap:16px}
  .hapo-why-hapo ul li{margin:0}
  .hapo-why-hapo__card{min-height:0;padding:22px 24px 24px}
  .hapo-why-hapo__card h3{margin:10px 0 4px;font-size:16px;line-height:1.35}
  .hapo-why-hapo__card p{font-size:14px;line-height:18px}
  .hapo-why-hapo + .hapo-contact-section--growth_cta{width:100%;margin:0}
}