/* HowfenConnect – About page */
.aboutp{color:#000}
.aboutp a{color:inherit;text-decoration:none}
.about-hero{padding:40px 0 64px;text-align:center}
.about-hero .sec-head{max-width:820px;margin:0 auto;padding:0 20px}
.about-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0 0 20px}
.about-hero .lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;margin:0 auto;max-width:640px}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:56px auto 0;max-width:900px}
.stat{background:var(--accent);border-radius:20px;padding:28px 24px;text-align:center}
.stat b{display:block;font-size:clamp(2.2rem,4vw,3.25rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:8px;font-size:.95rem;font-weight:600}

/* story rows */
.story{padding:32px 0 40px}
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.story-row:first-child{border-top:0}
.story-row.flip .story-text{order:2}
.story-text .num{display:inline-block;font-family:"Caveat",cursive;font-size:1.9rem;color:var(--accent-dark);line-height:1;margin-bottom:12px}
.story-text h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 18px}
.story-text p{font-size:1.05rem;line-height:1.65;margin:0 0 14px}
.story-text p a{font-weight:600;border-bottom:2px solid var(--accent)}
.story-visual{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.story-visual img{width:100%;height:100%;object-fit:cover;display:block}
.story-visual.tint{background:var(--accent);display:flex;align-items:center;justify-content:center;padding:32px}
.story-visual.tint .big{font-size:clamp(3rem,7vw,6rem);font-weight:800;letter-spacing:-.05em;line-height:1;text-align:center}
.story-visual.tint .big small{display:block;font-size:1.05rem;font-weight:600;letter-spacing:0;margin-top:12px}
.story-visual.dark{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:36px}
.story-visual.dark .logo{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:14px}
.story-visual.dark .logo b{color:var(--accent)}
.story-visual.dark p{margin:0;font-size:1rem;line-height:1.55;color:#fff}
.story-visual.dark .cta{margin-top:22px;align-self:flex-start}

  /* ============ FAQ ============ */
  .faq{padding:96px 0 104px}
  .faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:64px;align-items:start}
  .faq-intro h2{font-size:clamp(2.2rem,4.2vw,3.25rem);font-weight:700;letter-spacing:-.03em;margin:0 0 20px;color:#000;line-height:1.05}
  .faq-intro p{margin:0 0 28px;font-size:1rem;line-height:1.6;color:#000;max-width:420px}
  .faq-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;
    background:none;border:0;padding:24px 0;cursor:pointer;color:#000;font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
  .faq-q .chev{flex:none;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;transition:transform .2s}
  .faq-q .chev svg{width:16px;height:16px}
  .faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .faq-a>div{overflow:hidden}
  .faq-item.open .faq-a{grid-template-rows:1fr}
  .faq-a p{margin:0 0 26px;font-size:1rem;line-height:1.65;color:#000;max-width:720px}
  .faq-a a{font-weight:600;border-bottom:2px solid var(--accent)}
  @media (max-width:900px){
    .faq{padding:64px 0 72px}
    .faq-grid{grid-template-columns:1fr;gap:32px}
    .faq-q{font-size:1.05rem;padding:20px 0}
    .faq-q .chev{width:38px;height:38px}
  }



.aboutp + .band-wrap{padding-top:0;background:#fff}

@media (max-width:900px){
  .about-hero{padding:24px 0 48px}
  .stats{grid-template-columns:1fr;gap:12px;margin-top:40px}
  .story-row{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .story-row.flip .story-text{order:0}
  .story-visual{aspect-ratio:16/10}
}
.aboutp .cta{color:#000}.aboutp .cta.on-yellow.dark{color:#fff}
.faq-intro .script{color:var(--accent-dark);font-family:"Caveat",cursive;font-size:2rem}
@media (max-width:900px){.faq-intro{text-align:center}.faq-intro p{max-width:none}}
.faq-intro .script{margin:0 0 6px;line-height:1}
.faq-intro h2{margin-top:0}