.hero { padding-top: 54px; background: radial-gradient(circle at 80% 8%, rgba(173, 109, 73, .11), transparent 29%), var(--floral); }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 66px; align-items: center; }
.hero-copy > p:not(.eyebrow) { max-width: 730px; }
.hero-eyebrow { display: flex; justify-content: center; gap: 16px; font-size: 2rem; letter-spacing: .16em; word-spacing: .10em; }
.hero-media { position: relative; display: flex; min-height: 555px; align-items: center; justify-content: center; }
.portrait-frame { position: relative; width: min(100%, 390px); }
.portrait-frame::before { content: ""; position: absolute; inset: 20px -23px -23px 20px; z-index: -1; border: 1px solid var(--cinnamon); }
.portrait-frame img { width: 100%; height: 525px; object-fit: cover; object-position: center 25%; filter: saturate(.94); }
.proof-card { position: absolute; right: -8px; bottom: 23px; max-width: 310px; padding: 15px 18px; border-left: 4px solid var(--cinnamon); background: white; box-shadow: var(--shadow-soft); }
.proof-card strong, .proof-card span { display: block; }
.proof-card strong { color: var(--espresso); font-family: var(--serif); font-size: 19px; }
.proof-card span { color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
  .hero-grid { gap: 42px; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-copy { max-width: 760px; }
  .hero-media { min-height: 485px; }
}
@media (max-width: 760px) {
  .hero {
    padding-top: 28px;
  }

  .hero-grid {
    gap: 28px;
  }

  .hero-copy {
    min-width: 0;
  }

  .hero-eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .hero-media {
    display: block;
    min-height: 0;
    padding: 4px 14px 0 0;
  }

  .portrait-frame {
    width: min(82vw, 300px);
    margin: 0 auto;
  }

  .portrait-frame img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 25%;
  }

  .portrait-frame::before {
    inset: 12px -12px -12px 12px;
  }

  .proof-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(90%, 275px);
    max-width: none;
    margin: -38px 0 0 auto;
    padding: 11px 13px;
  }

  .proof-card strong {
    font-size: 17px;
  }

  .proof-card span {
    font-size: 12px;
    line-height: 1.4;
  }

  /*
    Keep all supplied testimonials, but avoid
    making the mobile page enormously tall.
  */
  .testimonial-band {
    display: flex;
    gap: 12px;
    margin-top: 34px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .testimonial-band::-webkit-scrollbar {
    display: none;
  }

  .testimonial-quote,
  .testimonial-quote-short {
    flex: 0 0 min(84vw, 330px);
    min-height: 250px;
    padding: 20px;
    scroll-snap-align: center;
  }

  .testimonial-quote blockquote,
  .testimonial-quote-short blockquote {
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.5;
  }

  .testimonial-quote figcaption {
    font-size: 13px;
  }
}