/* Bernhardt Appraisal, company pages (about, contact, journal, privacy, terms, 404) on the
   BYQ Foster & Reeves family. Loaded after ../style.css and reuses its tokens, nav, footer,
   .lines, .eyebrow, .btn, .halves, .stats, .steps and .cta. Numbers follow the section specs in
   ../../design-refs/foster-and-reeves/. Words and photographs are the current site's.
   The fixed nav is 64px tall, so each page's first section adds 64px to the spec's top padding. */

/* ---------- Stepped image edge (image-and-gallery-1, utility-page-1): four columns, 0/10/25/35% ---------- */
.stair { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.stair > span { align-self: end; width: 100%; background: var(--stair, var(--bone)); }
.stair > span:nth-child(1) { height: 0; }
.stair > span:nth-child(2) { height: 10%; }
.stair > span:nth-child(3) { height: 25%; }
.stair > span:nth-child(4) { height: 35%; }

/* ---------- About: header (image-and-gallery-1) ---------- */
.about-hero { background: var(--sand); padding-block: 160px; }
.about-hero__grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: 80px; }
.about-hero__grid > * { min-width: 0; }
.about-hero__copy { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 64px; max-width: 500px; }
.about-hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.about-hero h1 { font-size: 48px; line-height: 44px; font-weight: 500; letter-spacing: -2px; }
.about-hero__lead { color: var(--ink-88); }
.about-hero__media { --stair: var(--sand); position: relative; width: 100%; height: 680px; overflow: hidden; }
.about-hero__media img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- About: the appraiser (intro-text-4 text blocks) ---------- */
.story { padding-block: 80px; }
.story__master { display: flex; flex-direction: column; gap: 80px; }
.story__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.story__head h2 { font-size: 48px; line-height: 44px; font-weight: 500; letter-spacing: -2px; }
.story__lead { font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -1px; }
.story__text { display: flex; flex-direction: column; gap: 16px; }
.story__text p { font-size: 20px; line-height: 28px; letter-spacing: 0; }

/* ---------- About: philosophy (structured-data-2 intro block, steps reuse .steps) ---------- */
ol.steps { list-style: none; margin: 0; padding: 0; }
.philosophy .process__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.process__title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; }

/* ---------- About: credentials (testimonials-2 frame) ---------- */
.creds { background: var(--charcoal); color: var(--bone); padding-block: 160px; }
.creds__inner { max-width: 679px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.creds .eyebrow { color: var(--light-88); }
.creds__list { width: 100%; }
.creds__list li { padding-block: 24px; font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.5px; text-wrap: balance; }
.creds__list li + li { border-top: 1px solid var(--light-16); }

/* ---------- Contact (contact-1, info list from contact-3) ---------- */
.contact { background: var(--sand); padding-top: calc(64px + 80px); padding-bottom: 80px; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__grid > * { min-width: 0; }
.contact__left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 48px; max-width: 448px; }
.contact__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact h1 { font-size: 48px; line-height: 44px; font-weight: 500; letter-spacing: -2px; }
.contact__tiles { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.contact__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.contact__tile dt { font-weight: 600; }
.contact__tile dd { margin: 0; }
.contact__tile a { text-decoration: none; }
.contact__tile a:hover { text-decoration: underline; }
.contact__form-block { background: var(--bone); padding: 48px; }
.contact__form { display: flex; flex-direction: column; gap: 48px; }
.contact__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact__title { max-width: 360px; font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: -1px; }
.contact__fields { display: flex; flex-direction: column; gap: 24px; }
.contact__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__pair > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; margin: 0; padding: 12px 16px; border: 1px solid transparent; border-radius: 0; background: var(--sand);
  color: var(--ink); font: inherit; font-size: 16px; line-height: 24px; letter-spacing: 0.25px; transition: border-color 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23111a0d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field textarea { min-height: 282px; resize: none; }
.contact__bottom { display: flex; justify-content: flex-end; align-items: flex-end; gap: 24px; }

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

/* ---------- Journal (cms-grid-4) ---------- */
.journal { padding-top: calc(64px + 80px); padding-bottom: 80px; }
.journal__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 679px; margin-bottom: 64px; }
.journal h1 { font-size: 80px; line-height: 72px; font-weight: 500; letter-spacing: -3px; }
.journal__controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill, .sort-select {
  padding: 10px 12px; border: 1px solid var(--ink-16); border-radius: 0; background: transparent; color: var(--ink-88);
  font-family: var(--font); font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}
.filter-pill { flex: none; transition: background-color 0.45s, border-color 0.45s; }
.filter-pill:hover, .filter-pill:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink); }
.filter-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sort-select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23111a0d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.posts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 48px; }
.posts > * { min-width: 0; }
.post { display: flex; flex-direction: column; gap: 24px; color: var(--ink); text-decoration: none; }
.post__img { width: 100%; height: 460px; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.post__date { font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-64); }
.post__title { font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: -0.5px; }
.filter-empty { display: none; padding-block: 48px; text-align: center; color: var(--ink-64); }

/* ---------- Legal (utility-page-2) ---------- */
.legal { padding-top: calc(64px + 80px); padding-bottom: 80px; }
.legal .container { max-width: 940px; }
.legal__master { display: flex; flex-direction: column; gap: 80px; max-width: 679px; margin: 0 auto; }
.legal__headline { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.legal h1 { font-size: 80px; line-height: 72px; font-weight: 500; letter-spacing: -3px; color: var(--ink-88); }
.legal__lead { color: var(--ink-88); }
.legal__wrap { display: flex; flex-direction: column; gap: 48px; color: var(--ink-88); }
.legal__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.legal__tile h2 { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.legal__body { display: flex; flex-direction: column; gap: 8px; }
.legal__body ul { list-style: disc; padding-left: 20px; }
.legal__body li + li { margin-top: 4px; }
.legal__date strong { font-weight: 600; }
.legal a { text-underline-offset: 2px; }

/* ---------- 404 (utility-page-1) ---------- */
.notfound { display: flex; flex-direction: column; min-height: 100vh; background: var(--ink); color: var(--bone); padding-top: calc(64px + 80px); padding-bottom: 32px; overflow: hidden; }
.notfound > .container { display: flex; flex: 1; }
.notfound__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; width: 100%; }
.notfound__grid > * { min-width: 0; }
.notfound__media { --stair: var(--ink); position: relative; min-height: 560px; overflow: hidden; }
.notfound__media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.notfound__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 24px; max-width: 564px; }
.notfound .eyebrow { color: var(--ledger); }
.notfound h1 { max-width: 550px; font-size: 80px; line-height: 72px; font-weight: 500; letter-spacing: -3px; }
.btn--outline-dark { color: var(--bone); }
.btn--outline-dark::before { background: var(--ink); border: 1.5px solid var(--light-16); }
.btn--outline-dark:hover, .btn--outline-dark:focus-visible { color: var(--ink); }
.btn--outline-dark:hover::before, .btn--outline-dark:focus-visible::before { background: var(--accent-hover); border-color: var(--ink-16); }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .contact__left { flex-direction: row; justify-content: space-between; align-items: flex-end; max-width: none; }
  .contact__head { flex: 1 1 0; }
  .contact__tiles { flex: none; }
  .legal .container { max-width: 728px; }
  .notfound { min-height: 100vh; }
  .notfound__grid { grid-template-columns: 1fr; }
  .notfound__media { height: 560px; min-height: 0; }
}

/* ---------- Mobile landscape ---------- */
@media (max-width: 767px) {
  .about-hero { padding-top: calc(64px + 80px); padding-bottom: 80px; }
  .about-hero__grid { gap: 40px; }
  .about-hero__copy { gap: 48px; }
  .about-hero__head { gap: 16px; }
  .about-hero h1 { font-size: 32px; line-height: 36px; letter-spacing: -1.5px; }
  .about-hero__media { height: 362px; }

  .story { padding-block: 40px; }
  .story__master { gap: 56px; }
  .story .halves { gap: 12px; }
  .story__spacer { display: none; }
  .story__head { gap: 16px; }
  .story__head h2 { font-size: 32px; line-height: 36px; letter-spacing: -1.5px; }
  .story__lead { font-size: 24px; line-height: 28px; letter-spacing: -0.5px; }
  .story__text p { font-size: 16px; line-height: 24px; letter-spacing: 0.25px; }

  .philosophy .process__intro { gap: 16px; }
  .process__title { font-size: 16px; line-height: 24px; }

  .creds { padding-block: 40px; }
  .creds__inner { gap: 16px; }
  .creds__list li { padding-block: 16px; font-size: 20px; line-height: 24px; letter-spacing: -0.25px; }

  .contact { padding-top: calc(64px + 40px); padding-bottom: 40px; }
  .contact__grid { row-gap: 32px; }
  .contact__left { flex-direction: column; align-items: flex-start; gap: 24px; }
  .contact__head { gap: 16px; flex: none; }
  .contact h1 { font-size: 32px; line-height: 36px; letter-spacing: -1.5px; }
  .contact__tiles { gap: 16px; }
  .contact__heading { gap: 16px; }
  .contact__form-block { padding: 24px; }
  .contact__form { gap: 32px; }
  .contact__title { font-size: 24px; line-height: 28px; letter-spacing: -0.5px; }
  .contact__fields { gap: 16px; }
  .contact__pair { gap: 12px; }
  .field label { font-size: 10px; line-height: 12px; letter-spacing: 0.5px; }
  .field input, .field select, .field textarea { padding: 10px 12px; font-size: 14px; line-height: 20px; letter-spacing: 0; }
  .field select { padding-right: 40px; background-position: right 12px center; }
  .field textarea { min-height: 168px; }
  .contact__bottom { gap: 16px; }

  .note { padding-block: 40px; }
  .note p { font-size: 20px; line-height: 24px; letter-spacing: -0.25px; }

  .journal { padding-top: calc(64px + 40px); padding-bottom: 40px; }
  .journal__head { gap: 16px; margin-bottom: 48px; }
  .journal h1 { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .journal__controls { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .filter-bar { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .posts { grid-template-columns: 1fr; column-gap: 12px; row-gap: 32px; }
  .post { gap: 16px; }
  .post__img { height: 360px; }
  .post__text { gap: 12px; }
  .post__meta { gap: 8px 12px; }
  .post__date { font-size: 8px; line-height: 10px; letter-spacing: 0.5px; }
  .post__title { font-size: 20px; line-height: 24px; letter-spacing: -0.25px; }

  .legal { padding-top: calc(64px + 40px); padding-bottom: 40px; }
  .legal .container { max-width: none; }
  .legal__master { gap: 56px; }
  .legal__headline { gap: 16px; }
  .legal h1 { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .legal__wrap { gap: 32px; }
  .legal__tile { gap: 16px; }
  .legal__tile h2 { font-size: 10px; letter-spacing: 0.5px; }
  .legal__body li { font-size: 14px; line-height: 20px; }

  .notfound { min-height: 0; padding-top: calc(64px + 40px); padding-bottom: 24px; }
  .notfound__grid { gap: 40px; }
  .notfound__media { height: 360px; }
  .notfound__copy { gap: 16px; max-width: 430px; }
  .notfound h1 { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 479px) {
  .contact__bottom { flex-direction: column-reverse; align-items: flex-start; }
}