/* Bernhardt Appraisal, area pages (/areas/*) on the BYQ Foster & Reeves family.
   Loaded after ../style.css and reuses its tokens, .container, .lines, .eyebrow, .btn,
   .intro/.halves (intro-text-2) and .cta (cta-1). Sections added here:
   .area-hero (foster-and-reeves-hero-5) and .area-svc (foster-and-reeves-structured-data-1).
   Numbers follow the section specs in ../design-refs/foster-and-reeves/ (gitignored).
   Words are the current area pages'; built by ../build_areas.py. */

/* ---------- Page hero (hero-5) ---------- */
/* Source: py-3 (12px). Top raised by the fixed 64px nav so the photo is not covered. */
.area-hero { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; padding-top: 76px; padding-bottom: 12px; background: var(--bone); }
.area-hero > .container { flex: 1; display: flex; }
.area-hero__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 100%; }
.area-hero__grid > * { min-width: 0; }
.area-hero__media { position: relative; overflow: hidden; }
.area-hero__media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Staircase cutout: four columns of bone tiles at 0 / 10 / 25 / 35 percent height */
.area-hero__tiles { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.area-hero__tiles > div { display: flex; align-items: flex-end; height: 100%; }
.area-hero__tiles span { display: block; flex: none; width: 100%; background: var(--bone); }
.area-hero__tiles > div:nth-child(1) span { height: 0; }
.area-hero__tiles > div:nth-child(2) span { height: 10%; }
.area-hero__tiles > div:nth-child(3) span { height: 25%; }
.area-hero__tiles > div:nth-child(4) span { height: 35%; }
/* Source caps the copy at 564px; widened to 640px so "Home Appraisals" holds one line as on the
   current page. The line under it keeps the 564px measure. */
.area-hero__copy { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; max-width: 640px; padding-block: 160px; }
.area-hero h1 { position: relative; z-index: 1; font-size: 80px; line-height: 72px; font-weight: 500; letter-spacing: -3px; color: var(--ink); }
.area-hero__lead { max-width: 564px; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.25px; color: var(--ink); }

/* ---------- Services (structured-data-1) ---------- */
.area-svc { padding-block: 80px; background: var(--bone); }
.area-svc__head { margin-bottom: 80px; }
.area-svc__halves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.area-svc__halves > * { min-width: 0; }
.area-svc__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.area-svc__headline h2 { font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -1px; color: var(--ink); }
.area-svc__split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.area-svc__split > * { min-width: 0; }
.area-svc__media { padding-right: 80px; }
.area-svc__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.area-svc__frame img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.area-svc__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.area-svc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; padding-block: 24px; border-top: 1px solid var(--ink-08); }
.area-svc__row > * { min-width: 0; }
.area-svc__label { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.area-svc__body { display: flex; flex-direction: column; gap: 4px; }
.area-svc__body h3 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.25px; color: var(--ink); }
.area-svc__body h3 a { text-decoration: underline; text-decoration-color: var(--ink-16); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.area-svc__body h3 a:hover, .area-svc__body h3 a:focus-visible { text-decoration-color: var(--ink); }
.area-svc__body p { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.25px; color: var(--ink-64); }

/* ---------- Local knowledge (intro-text-2 text block, reuses .intro and .halves) ---------- */
.area-local__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  .area-svc__body h3 a { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .area-hero { min-height: 0; }
  .area-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .area-hero__media { height: 450px; }
  /* Stacked: the source's 160px (tablet) and 120px (phone) top padding left an empty band
     under the photo; the grid gap alone separates photo and copy. */
  .area-hero__copy { padding-top: 0; padding-bottom: 0; }
  .area-svc__split { grid-template-columns: 1fr; gap: 32px; }
  .area-svc__media { padding-right: 0; }
  .area-svc__frame { height: 400px; }
}

/* ---------- Mobile landscape ---------- */
@media (max-width: 767px) {
  .area-hero__grid { gap: 32px; }
  .area-hero__media { height: 360px; }
  .area-hero__copy { gap: 16px; }
  .area-hero h1 { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .area-svc { padding-block: 40px; }
  .area-svc__head { margin-bottom: 56px; }
  .area-svc__halves { grid-template-columns: 1fr; gap: 12px; }
  .area-svc__headline { gap: 16px; }
  .area-svc__headline h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.5px; }
  .area-svc__split { gap: 24px; }
  .area-svc__frame { height: 300px; }
  .area-svc__row { gap: 12px; padding-block: 16px; }
  .area-local__head { gap: 16px; }
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 479px) {
  .area-svc__row { grid-template-columns: 1fr; }
}