/* ══════════════════════════════════════
   AURA AESTHETIC — CTA Section
   Mobile-first → Desktop @1024px
   Pencil: Mobile 390x577, Desktop 1440x480
   ══════════════════════════════════════ */

/* ══════════════════════════════════
   MOBILE (390px frame, 577px tall, centered)
   Image: 180x180 at x:105, y:56 (circle)
   Tag: centered, y:260
   Title: x:24, y:295 (36px, centered)
   Desc: x:24, y:405
   Button: centered at y:474
   ══════════════════════════════════ */

/* ── Section ── */
.cta {
  background: var(--c-bg-warm);
  padding: 56px 0;
}

/* ── Inner Container: column, centered ── */
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ── Portrait Image: 180x180, circle ── */
.cta__image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.cta__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Content ── */
.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Title: 36px, centered ── */
.cta__title {
  font-family: var(--ff-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* ── Description ── */
.cta__desc {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--c-text-secondary);
  line-height: 1.8;
  max-width: 440px;
  margin-bottom: 32px;
}

/* ── Button: dark pill ── */
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-text);
  padding: 16px 40px;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: none;
  transition: background var(--t-fast), transform var(--t-fast);
}

.cta__btn-arrow {
  color: var(--c-accent);
}

.cta__btn:active {
  transform: scale(0.97);
}


/* ══════════════════════════════════════
   DESKTOP — 1440x480, bg #FAF7F4
   Image: 360x360 at x:64, y:60 (pill/circle, border-radius 200px)
   Content: 872px wide at x:504, y:67
   Flex row: image left, content right, gap ~80px
   ══════════════════════════════════════ */
@media (min-width: 1024px) {

  .cta {
    padding: 60px 0;
  }

  .cta__inner {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 80px;
  }

  /* ── Larger portrait: 360x360, pill shape ── */
  .cta__image {
    width: 360px;
    height: 360px;
    border-radius: 200px;
  }

  /* ── Content: left-aligned ── */
  .cta__content {
    align-items: flex-start;
    flex: 1;
  }

  .cta__title {
    font-size: 52px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .cta__desc {
    font-size: 15px;
    margin-bottom: 36px;
  }

  /* ── Button hover ── */
  .cta__btn:hover {
    background: #111111;
    transform: translateY(-1px);
  }
}