/* ─── Hero ─── */
.hero { padding: 4.5rem var(--pad-x) 3.5rem; text-align: center; max-width: var(--max-w); margin: 0 auto; }
.hero h1 { font-family: var(--serif); font-size: 42px; line-height: 1.2; font-weight: 400; margin: 0.85rem auto 0; max-width: 640px; }
.hero h1 em { font-style: italic; color: var(--rose); }

/* ─── About row ─── */
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; padding: 3rem 4.5rem; max-width: var(--max-w); margin: 0 auto; }
.about-img { background: var(--rose-light); overflow: hidden; }
.about-img img { display: block; width: 100%; height: 440px; object-fit: cover; }
.about-row h2 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin-bottom: 1.25rem; line-height: 1.25; }
.about-row p { font-size: 16px; line-height: 1.75; color: var(--body-text); font-weight: 300; margin-bottom: 0.85rem; }
.about-label { margin-bottom: 0.85rem; display: block; }

/* ─── Owner row ─── */
.owner-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; padding: 3.5rem 4.5rem; max-width: var(--max-w); margin: 0 auto; }
.owner-row h2 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin-bottom: 1.25rem; line-height: 1.25; }
.owner-row p { font-size: 16px; line-height: 1.9; color: var(--body-text); font-weight: 300; margin-bottom: 1rem; }
.owner-sign { font-family: var(--serif); font-style: italic; color: var(--rose); font-size: 15px; margin-top: 0.5rem; }
.owner-img { background: var(--rose-light); overflow: hidden; position: relative; }
.owner-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ─── Quote band ─── */
.quote-band { background: var(--ink); padding: 4.5rem var(--pad-x); text-align: center; }
.quote-eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose-light); margin-bottom: 1.5rem; }
.quote-band p.quote { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.6; color: var(--cream); max-width: 640px; margin: 0 auto; }
.quote-attr { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rose-light); margin-top: 1.5rem; }

/* ─── Team ─── */
.team-section { padding: 5rem 4.5rem; border-top: 0.5px solid var(--rule); max-width: var(--max-w); margin: 0 auto; }
.team-section h2.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 400; margin: 0; line-height: 1; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.team-card { background: var(--cream); padding: 2.5rem; display: block; }
.team-card::after { content: ''; display: table; clear: both; }
.team-img { float: left; width: 285px; margin: 0 1.5rem 1rem 0; position: relative; overflow: hidden; }
.team-img img { width: 100%; height: 385px; object-fit: cover; object-position: top; display: block; }
.team-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(20, 14, 16, 0.4) 50%,
    rgba(20, 14, 16, 0.85) 100%
  );
}
.team-role { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 0.2rem; line-height: 1.2; }
.team-name { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--cream); line-height: 1.1; }
.team-body { font-size: 14px; line-height: 1.8; color: var(--body-text); font-weight: 300; }

/* ─── Responsive: Tablet ─── */
@media (max-width: 1024px) {
  .about-row { display: flex; flex-direction: column; gap: 1.5rem; padding: 3rem 2.5rem; }
  .about-img img { max-height: 380px; }
  .owner-row { display: flex; flex-direction: column-reverse; gap: 1.5rem; padding: 3rem 2.5rem; }
  .owner-img { position: static; display: flex; justify-content: center; }
  .owner-img img { position: static; inset: auto; width: auto; height: auto; max-width: 420px; aspect-ratio: 3/4; }
  .team-section { padding: 3.5rem 2.5rem; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 768px) {
  .hero { padding: 3rem var(--pad-x) 1.25rem; }
  .hero h1 { font-size: 32px; }

  .about-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.5rem; }
  .about-row h2 { font-size: 21px; }

  .owner-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1.5rem; }
  .owner-row { display: flex; flex-direction: column-reverse; }
  .owner-img img { max-width: 100%; }
  .owner-row h2 { font-size: 21px; }

  .quote-band { padding: 3rem var(--pad-x); }
  .quote-band p.quote { font-size: 17px; }

  .team-section { padding: 2.5rem 1.5rem; }
  .team-card { padding: 1.5rem; }
  .team-img { width: 100%; }
  .team-name { font-size: 18px; }
}