/* ============================================================
   CPAs sub-page — page-specific styles
   Mostly reuses .ib-hero* and friends; this overrides the hero
   variant with a CPA-themed name.
   ============================================================ */

.cpas-hero { position: relative; padding-top: 152px; padding-bottom: 96px; overflow: hidden; }

.cpas-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 80% -10%, rgba(180, 155, 202, 0.16), transparent 60%);
}

.cpas-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}

.cpas-hero__copy { display: flex; flex-direction: column; gap: 24px; max-width: 540px; }

.cpas-hero h1 {
  font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.04em;
  color: var(--text-primary); margin: 0; text-wrap: balance;
}

.cpas-hero__subhead {
  font-size: 18px; line-height: 1.55; letter-spacing: -0.02em;
  color: var(--text-secondary); margin: 0; max-width: 540px;
}

/* Reuses .ib-hero__stage / __photo / __overlay--dashboard / __overlay--phone */
.cpas-hero__stage { position: relative; width: 100%; aspect-ratio: 16 / 12; min-height: 480px; }

.cpas-hero__photo {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-photo-glow);
}

.cpas-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cpas-hero__overlay {
  position: absolute;
  bottom: -10%; left: -8%;
  width: 72%; aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-elevated-ring);
  overflow: hidden;
  z-index: 5;
  transform: rotate(-3deg);
}

.cpas-hero__overlay::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 24px;
  background: #F4F1EC; border-bottom: 1px solid rgba(0,46,29,0.06); z-index: 2;
}
.cpas-hero__overlay::after {
  content: ""; position: absolute; top: 8px; left: 10px; width: 32px; height: 7px;
  background:
    radial-gradient(circle at 3.5px 3.5px, #E2746A 3px, transparent 3.5px),
    radial-gradient(circle at 14px 3.5px, #E2C36A 3px, transparent 3.5px),
    radial-gradient(circle at 24.5px 3.5px, #7DB58A 3px, transparent 3.5px);
  z-index: 3;
}

.cpas-hero__overlay img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

@media (max-width: 1100px) {
  .cpas-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .cpas-hero__stage { aspect-ratio: 4/3; min-height: 380px; }
}

@media (max-width: 640px) {
  .cpas-hero__overlay {
    width: 56%;
    bottom: -6%;
    left: -4%;
  }
  .cpas-hero__stage {
    aspect-ratio: 4 / 3.4;
    min-height: 340px;
  }
}

/* Two-card grid for "What we built" */
.cpa-builtfor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cpa-builtfor-grid .builtfor-card { padding: 32px; }

@media (max-width: 720px) {
  .cpa-builtfor-grid { grid-template-columns: 1fr; }
}

/* Post-stat closer paragraph */
.cpa-problem-closer {
  margin: 48px auto 0;
  max-width: 920px;
  background: var(--surface-cream);
  border-radius: var(--radius-xl);
  border-left: 3px solid var(--g-700);
  padding: 32px 40px;
  text-align: center;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
  box-shadow: var(--shadow-card-dense);
}

.cpa-problem-closer strong {
  color: var(--g-700);
  font-weight: 600;
}

@media (max-width: 720px) {
  .cpa-problem-closer { padding: 24px 24px; }
}