/* =====================================================================
   Home page — section-specific styles
   ===================================================================== */

/* ----------------------------- Hero ------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 80px); overflow: clip; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__copy .eyebrow { margin-bottom: 26px; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 34px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.hero__chips li {
  font-size: .9rem; font-weight: 500; color: var(--slate);
  background: var(--white); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: var(--radius-pill);
}

/* --------------------- Hero snapshot panel ------------------------ */
.hero__panel { position: relative; }
.hero__panel .blob--sage { width: 220px; height: 220px; top: -54px; right: -48px; opacity: .22; }
.hero__panel .blob--yellow { width: 120px; height: 120px; bottom: -38px; left: -42px; opacity: .55; }

/* ----------------------------- Intro ------------------------------ */
.intro__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.intro__lead .eyebrow { margin-bottom: 22px; }
.intro__body .lead { margin-bottom: 22px; }
.intro__body p { margin-bottom: 22px; }

/* ---------------------------- Services ---------------------------- */
.services .card h3 { margin-bottom: 14px; }
.services .card p { color: var(--ink-soft); font-size: 1.02rem; }

/* --------------------------- Who we help -------------------------- */
.who .section-head { margin-inline: auto; text-align: center; }
.who .section-head .eyebrow { justify-content: center; }
.who-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 34px 30px;
  transition: transform .3s var(--ease), background .3s var(--ease);
  display: flex; flex-direction: column;
}
a.who-card { text-decoration: none; }
.who-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.who-card__go {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--sage);
  transition: gap .25s var(--ease), color .25s;
}
.who-card__go svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
a.who-card:hover .who-card__go { gap: 12px; color: #fff; }
.who-card--accent .who-card__go { color: var(--green); }
a.who-card--accent:hover .who-card__go { color: var(--green-deep); }
.who-card__num { font-family: var(--display); font-size: 1.4rem; color: var(--sage); -webkit-text-stroke: 0.4px currentColor; }
.who-card h3 { color: #fff; margin: 14px 0 14px; font-size: 1.6rem; }
.who-card p { color: #C6D7CC; font-size: 1rem; }
.who-card--accent { background: #F8F5D0; border-color: #F8F5D0; }
.who-card--accent .who-card__num { color: var(--green); }
.who-card--accent h3 { color: var(--green-deep); }
.who-card--accent p { color: #3a4632; }
.who-card--accent:hover { background: #f0ecbf; }
.who-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, .9fr) 1.4fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.who-card--wide .who-card__lead { display: flex; flex-direction: column; }
.who-card--wide h3 { margin-top: 14px; }
.who-card--wide p { font-size: 1.05rem; }
@media (max-width: 760px) {
  .who-card--wide { grid-template-columns: 1fr; gap: 14px; }
}

/* ------------------------- Look no further ------------------------ */
.further { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.further__media { position: relative; }
.further__ph { aspect-ratio: 4/5; border-radius: var(--radius); }
.further__ph span { line-height: 1.6; }
.further__blob { width: 160px; height: 160px; opacity: .18; bottom: -36px; right: -30px; }
.further__copy .eyebrow { margin-bottom: 22px; }
.further__copy h2 { margin-bottom: 24px; }
.further__copy .lead { margin-bottom: 20px; }
.further__copy .btn { margin-top: 12px; }

/* ----------------------------- FAQ -------------------------------- */
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__intro { position: sticky; top: 110px; }
.faq__intro .eyebrow { margin-bottom: 22px; }
.faq__intro h2 { margin-bottom: 20px; }
.faq__intro .lead { margin-bottom: 28px; }
.faq__list { border-top: 1px solid var(--line); }

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__panel { max-width: 520px; }
  .intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .further { grid-template-columns: 1fr; }
  .further__media { max-width: 420px; }
  .faq { grid-template-columns: 1fr; gap: 8px; }
  .faq__intro { position: static; }
  .faq__intro .faq__cta { margin-bottom: 12px; }
}
@media (max-width: 760px) {
  .snapshot__foot { grid-template-columns: 1fr; gap: 12px; }
}