/* Bernhardt Appraisal, Services group (services.html and services/*.html) on the BYQ
   Foster & Reeves family. Loaded after ../style.css and reuses its tokens, .container,
   .lines, .eyebrow, .btn, .cta and footer. Numbers follow the section specs in
   ../../design-refs/foster-and-reeves/ (hero-6, structured-data-1, value-and-features-5,
   intro-text-5). Words and photographs are the current site's. */

/* ---------- Service hero (hero-6): charcoal copy band, wide image overlapping into bone ---------- */
.svc-hero { position: relative; z-index: 2; background: var(--bone); }
.svc-hero__top { position: relative; z-index: 2; background: var(--charcoal); color: var(--bone); padding-top: 0; padding-bottom: 270px; }
/* Spec block width is 564px. The H1 alone may run to half the grid (680px) so the current
   site's two- and three-line titles hold ("Appraisals built for" sets at 638px, "Estate &
   Probate" at 572px); the lead paragraph keeps 564px. */
.svc-hero__copy { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; padding-top: 160px; padding-bottom: 80px; max-width: 680px; }
.svc-hero h1 { font-size: 80px; line-height: 72px; font-weight: 500; letter-spacing: -3px; color: var(--bone); text-wrap: balance; }
.svc-hero__lead { max-width: 564px; color: var(--bone); }
.svc-hero__media { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.svc-hero__frame { position: relative; width: 100%; height: 710px; margin-top: -370px; overflow: hidden; }
.svc-hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Service block (structured-data-1): headline row, then image beside a ruled list ---------- */
.svc-split { padding-block: 80px; }
.svc-split__head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 80px; align-items: start; }
.svc-split__head > * { min-width: 0; }
.svc-split__title-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.svc-split__title { font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -1px; color: var(--ink); }
.svc-split__intro { color: var(--ink-64); }
.svc-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-split__grid > * { min-width: 0; }
.svc-split__media { display: flex; flex-direction: column; padding-right: 80px; }
.svc-split__frame { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.svc-split__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-split__list { display: flex; flex-direction: column; }
.svc-split__list-label { margin-bottom: 24px; font-size: inherit; line-height: inherit; font-weight: inherit; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; padding-block: 24px; border-top: 1px solid var(--ink-08); }
.svc-row > * { min-width: 0; }
.svc-row__label { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.25px; color: var(--ink); }
.svc-row__text { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.25px; color: var(--ink-64); }

/* ---------- Feature cards (value-and-features-5) ---------- */
.svc-cards { padding-block: 120px; overflow: hidden; }
/* The section's headline group has no current copy and is left out, so the cards would sit
   under 80px (hero) + 120px of empty bone. Directly after the hero, the cards start at the
   hero's own 80px bottom. */
.svc-hero + .svc-cards { padding-top: 0; }
.svc-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.svc-card {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%; min-width: 0; min-height: 332px; padding: 24px; gap: 24px; background: var(--sand);
}
.svc-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.svc-card__title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.svc-card__body { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink-64); }

/* ---------- Centered statement (intro-text-5) ---------- */
.svc-note { padding-block: 80px; }
.svc-note__inner { max-width: 679px; margin: 0 auto; text-align: center; }
.svc-note p { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.5px; color: var(--ink); }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .svc-hero__frame { height: 450px; }
  .svc-split__grid { grid-template-columns: 1fr; gap: 32px; }
  .svc-split__media { padding-right: 0; }
  .svc-split__frame { flex: none; height: 400px; min-height: 0; }
  .svc-cards__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile landscape ---------- */
@media (max-width: 767px) {
  .svc-hero__top { padding-bottom: 140px; }
  .svc-hero__copy { padding-top: 120px; padding-bottom: 40px; gap: 16px; }
  .svc-hero h1 { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .svc-hero__media { padding-bottom: 64px; }
  .svc-hero__frame { height: 280px; margin-top: -185px; }
  .svc-split { padding-block: 40px; }
  .svc-split__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 56px; }
  .svc-split__title-wrap { gap: 16px; }
  .svc-split__title { font-size: 24px; line-height: 28px; letter-spacing: -0.5px; }
  .svc-split__grid { gap: 24px; }
  .svc-split__frame { height: 300px; }
  .svc-split__list-label { margin-bottom: 16px; }
  .svc-row { gap: 12px; padding-block: 16px; }
  .svc-cards { padding-block: 40px; }
  .svc-hero + .svc-cards { padding-top: 0; }
  .svc-cards__grid { gap: 12px; }
  .svc-card { padding: 16px; gap: 16px; }
  .svc-card__text { gap: 10px; }
  .svc-card__title { font-size: 16px; line-height: 24px; }
  .svc-note { padding-block: 40px; }
  .svc-note p { font-size: 20px; line-height: 26px; letter-spacing: -0.25px; } /* spec 20px; opened up for a 60-word paragraph */
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 479px) {
  /* "Appraisals built for" (379px at 48px) cannot fit a phone line; without its forced
     breaks the title balances instead of leaving "for" alone on a line. */
  .svc-hero h1 br { display: none; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-cards__grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 280px; }
}