/* ==========================================================================
   Hawthorne CPA & Advisors — home.css
   Homepage sections only. Foundations live in css/site.css.

   One DOM, mobile-first. Values interpolate between the approved 390px
   mobile design and the approved 1280px desktop design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  background: var(--color-surface);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--gutter);
  padding-block: clamp(2.75rem, 1.326rem + 5.843vw, 6rem)
    clamp(2.5rem, 1.186rem + 5.393vw, 5.5rem); /* 44→96 / 40→88 */
}

.hero__rule {
  margin-bottom: clamp(1.625rem, 1.406rem + 0.899vw, 2.125rem); /* 26 → 34 */
}

.hero__lead {
  margin-top: clamp(1.25rem, 0.976rem + 1.124vw, 1.875rem); /* 20 → 30 */
  /* Keeps the supporting line to a readable measure once the hero is wider
     than a phone. Has no effect at mobile widths. */
  max-width: 44ch;
}

.hero__cta {
  margin-top: clamp(1.875rem, 1.546rem + 1.348vw, 2.625rem); /* 30 → 42 */
}

.hero__panel {
  position: relative;
  overflow: hidden;
  height: 190px;
  background: var(--color-brand);
}

.hero__mark {
  position: absolute;
  left: -28px;
  bottom: -56px;
  width: 250px;
  opacity: 0.14;
}

@media (min-width: 640px) {
  /* Keep the button from stretching across a wide single-column hero. */
  .hero__cta {
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {
  /* The hero runs full-bleed so the blue panel reaches the right edge, but
     the copy stays aligned with the 1280px content column used by every
     section below. The inset lives on .hero itself so the percentage
     resolves against the full page width. */
  .hero {
    grid-template-columns: 1.35fr 1fr;
    min-height: 520px;
    padding-left: max(
      var(--gutter),
      calc((100% - var(--container-max)) / 2 + var(--gutter))
    );
  }

  .hero__content {
    padding-left: 0;
    padding-right: var(--gutter);
  }

  .hero__title {
    max-width: 16ch;
  }

  .hero__panel {
    height: auto;
  }

  .hero__mark {
    left: -40px;
    bottom: -60px;
    width: 440px;
  }
}

/* --------------------------------------------------------------------------
   How can we help? — service panels
   -------------------------------------------------------------------------- */

.services {
  padding-block: clamp(3.25rem, 1.826rem + 5.843vw, 6.5rem)
    clamp(3.75rem, 1.011rem + 11.236vw, 10rem); /* 52→104 / 60→160 */
}

.services__title {
  margin-bottom: clamp(1.625rem, 0.913rem + 2.921vw, 3.25rem); /* 26 → 52 */
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}

@media (min-width: 640px) {
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   A firm built on relationships and trust
   -------------------------------------------------------------------------- */

.relationship {
  background: var(--color-surface);
  padding-block: clamp(3.5rem, 1.473rem + 8.315vw, 8.125rem)
    clamp(3.75rem, 2.107rem + 6.742vw, 7.5rem); /* 56→130 / 60→120 */
}

.relationship__copy p {
  max-width: 56ch;
}

.relationship__copy .prose {
  margin-top: clamp(1.375rem, 1.115rem + 1.067vw, 1.75rem); /* 22 → 28 */
}

.relationship__people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid);
  align-items: start;
  margin-top: clamp(2.125rem, 1.809rem + 1.798vw, 2.75rem); /* 34 → 44 */
}

/* The second portrait sits slightly lower, as approved. */
.relationship__person--offset {
  margin-top: clamp(1.25rem, 1.031rem + 0.899vw, 1.75rem); /* 20 → 28 */
}

.relationship__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.relationship__name {
  margin-top: clamp(0.75rem, 0.696rem + 0.225vw, 0.875rem); /* 12 → 14 */
  font-size: var(--text-name);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .relationship__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem; /* 72 */
    align-items: start;
  }

  .relationship__people {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps {
  padding-block: var(--section-y)
    clamp(3.75rem, 2.545rem + 4.944vw, 6.5rem); /* 56→104 / 60→104 */
}

.steps__title {
  margin-bottom: clamp(1.875rem, 1.163rem + 2.921vw, 3.5rem); /* 30 → 56 */
  color: var(--color-on-brand);
}

.steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.step {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.031rem + 0.899vw, 1.75rem); /* 20 → 28 */
  padding: clamp(1.5rem, 1.24rem + 1.067vw, 2rem)
    clamp(1.375rem, 1.115rem + 1.067vw, 1.875rem)
    clamp(1.75rem, 1.49rem + 1.067vw, 2.25rem); /* 24 22 28 → 32 30 36 */
  background: var(--color-on-brand-surface);
  border: 1px solid var(--color-on-brand-line);
}

.step__marker {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.912rem + 0.225vw, 1.125rem); /* 16 → 18 */
}

.step__number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.875rem, 2.71rem + 0.674vw, 3.25rem); /* 46 → 52 */
  height: clamp(2.875rem, 2.71rem + 0.674vw, 3.25rem);
  border: 1px solid var(--color-on-brand-line-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.133rem + 0.225vw, 1.3125rem); /* 19 → 21 */
  line-height: 1;
  color: var(--color-on-brand);
}

.step__line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.step__title {
  margin-bottom: clamp(0.625rem, 0.516rem + 0.449vw, 0.875rem); /* 10 → 14 */
  color: var(--color-on-brand);
}

.step__body {
  font-size: var(--text-small);
  line-height: 1.68;
  color: var(--color-on-brand-muted);
  text-wrap: pretty;
}

.steps__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.125rem, 1.6rem + 2.022vw, 3.5rem); /* 34 → 56 */
}

@media (min-width: 900px) {
  .steps__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}