/*
Theme Name: Traci Taylor
Theme URI: https://tracitaylor.com
Author: Seth C
Description: Custom theme for Traci Taylor, Northeast Ohio Realtor.
Version: 1.4.0
Tags: real-estate, luxury, custom
Text Domain: tracitaylor
*/

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --black:      #0a0a0a;
  --white:      #ffffff;
  --off-white:  #f8f7f5;
  --gold:       #c9a267;  /* brand gold — for dark backgrounds */
  --gold-dark:  #a8844e;  /* gold hover */
  --gold-ink:   #8a6a35;  /* AA-compliant gold for text on light backgrounds (~5:1 on white) */
  --text-muted: #595959;  /* muted text — passes AA (~7:1 on white) */

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  --max-w:   1200px;
  --pad-x:   clamp(1.5rem, 5vw, 4rem);
  --pad-y:   clamp(5rem, 9vw, 8rem);
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);

  /* blog grid unit — 6 rows × this value = total grid height */
  --blog-row: 110px;
  --blog-gap: 10px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ─── UTILITIES ───────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.eyebrow--dark { color: var(--text-muted); }
/* Gold eyebrows that sit on light sections use the darker, AA-compliant gold.
   Eyebrows on dark sections (page hero, guide, search) keep the brighter --gold. */
.contact .eyebrow,
section.testimonials .eyebrow,
.testimonials--strip .eyebrow { color: var(--gold-ink); }

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn--gold { background: var(--gold); color: var(--black); border: 1px solid var(--gold); }
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn--outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); }
.btn--outline:hover { border-color: var(--white); }

.link-arrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: border-color 0.2s;
  white-space: nowrap;
}
.link-arrow:hover { border-color: currentColor; }

/* ─── FOCUS (keyboard) ────────────────────────────────────── */
/* Visible focus ring for keyboard users only (:focus-visible), so mouse clicks
   don't show a ring. Low specificity via :where() so components can override. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Nav sits on a dark bar — the brighter gold reads well; nudge the ring off the text. */
.nav__links a:focus-visible,
.nav__cta-link:focus-visible,
.nav__mobile-toggle:focus-visible { outline-offset: 3px; }
/* Form fields sit on light cards — use the darker gold for contrast. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-color: var(--gold-ink); outline-offset: 1px; }

/* ─── PLACEHOLDERS ────────────────────────────────────────── */
.ph {
  background-color: var(--black);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 9px,
    rgba(201,162,103,0.08) 9px, rgba(201,162,103,0.08) 10px
  );
  border: 1.5px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--gold);
}
.ph__icon { opacity: 0.65; flex-shrink: 0; }
.ph__label { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.ph__note  { font-size: 0.54rem; letter-spacing: 0.1em; color: rgba(201,162,103,0.45); text-transform: uppercase; }

/* full-bleed section background (no border) */
.ph--full-bg {
  position: absolute;
  inset: 0;
  border: none;
  z-index: 0;
}
/* hero photo — no side border, fills right column */
.ph--hero {
  position: absolute;
  inset: 0;
  border: none;
}
/* portrait for about section */
.ph--portrait {
  width: 100%;
  height: 100%;
}
/* guide PDF cover — A4 portrait (210 × 297 mm). div-scoped: only the
   empty-state placeholder gets this box; a real <img> cover sizes itself
   (see img.ph--guide further down). */
div.ph--guide {
  width: 100%;
  aspect-ratio: 210 / 297;
  max-height: 480px;
}
/* blog grid photos — height comes from grid rows */
.ph--blog {
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease);
}

/* ─── REAL IMAGES (replaces placeholders when photos are added) */
.section-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero__video { display: block; background: var(--black); }
.about-split__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.blog-card__link:hover .blog-card__photo { transform: scale(1.14); }

/* ─── SCROLL ANIMATIONS ───────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
[data-animate="fade"]        { transform: translateY(14px); }
[data-animate="fade-up"]     { transform: translateY(32px); }
[data-animate="slide-left"]  { transform: translateX(-44px); }
[data-animate="slide-right"] { transform: translateX(44px); }
[data-animate].is-visible    { opacity: 1; transform: translate(0, 0); }
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.22s; }
[data-delay="3"] { transition-delay: 0.34s; }
[data-delay="4"] { transition-delay: 0.46s; }

/* ─── NAV ────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.nav--scrolled {
  background: var(--black);
  border-bottom: 1px solid rgba(201,162,103,0.18);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
/* Legibility scrim: a soft top-down shade behind the transparent nav so the
   white logo/links stay readable over a bright hero video on first load. It
   fades out once the solid scrolled bar takes over (.nav--scrolled). */
.nav::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 220%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  pointer-events: none; z-index: -1;
  opacity: 1; transition: opacity 0.5s var(--ease);
}
.nav--scrolled::before { opacity: 0; }
/* Extra insurance on very bright frames; not needed once the solid bar is in. */
.nav:not(.nav--scrolled) .nav__logo img { filter: drop-shadow(0 1px 5px rgba(0,0,0,0.45)); }
.nav:not(.nav--scrolled) .nav__links a,
.nav:not(.nav--scrolled) .nav__mobile-toggle { text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.nav__inner {
  position: relative; z-index: 1; /* keep nav content above the scrim */
  max-width: var(--max-w); margin: 0 auto;
  padding: 1.3rem var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
  display: inline-flex; align-items: center;
}
.nav__logo img { height: 58px; width: auto; display: block; }
.nav__links { display: flex; gap: 2rem; align-items: center; }
.nav__links a {
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); transition: color 0.2s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--gold); }
.nav__cta-link {
  color: var(--gold) !important;
  border: 1px solid rgba(201,162,103,0.35);
  padding: 0.35rem 0.85rem;
  transition: background 0.2s, border-color 0.2s !important;
}
.nav__cta-link:hover { background: rgba(201,162,103,0.1); border-color: var(--gold); }
.nav__mobile-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.4rem; cursor: pointer; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  background: var(--black);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  overflow: hidden;
}
.hero__inner {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(9rem, 14vw, 11rem) var(--pad-x) var(--pad-y) clamp(1.5rem, 8vw, 7rem);
}
.hero__rule { width: 44px; height: 1px; background: var(--gold); margin-bottom: 2.4rem; }
.hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  font-weight: 300; line-height: 1.06;
  color: var(--white); margin-bottom: 1.6rem; letter-spacing: -0.01em;
}
.hero__sub {
  font-size: 0.95rem; font-weight: 300;
  line-height: 1.7; color: rgba(255,255,255,0.52);
  max-width: 40ch; margin-bottom: 2.8rem;
}
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__image-wrap { position: relative; min-height: 100vh; overflow: hidden; }

/* Full-bleed video hero — no text column, video spans the entire header.
   Placed after .hero so its display:block overrides the two-column grid. */
.hero--video { display: block; grid-template-columns: none; min-height: 0; }
.hero--video .hero__image-wrap { min-height: 100vh; width: 100%; }

/* Visually hidden but available to screen readers and search engines. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim    { animation: heroRise 1s var(--ease) both; }
.hero-anim--1 { animation-delay: 0.1s; }
.hero-anim--2 { animation-delay: 0.25s; }
.hero-anim--3 { animation-delay: 0.4s; }
.hero-anim--4 { animation-delay: 0.7s; }

/* ─── METRICS ────────────────────────────────────────────── */
.metrics {
  background: var(--white);
  border-bottom: 1px solid #eaeaea;
  padding: 3.5rem var(--pad-x);
}
.metrics__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.metric {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 0 3.5rem; flex: 1; text-align: center;
}
.metric__value {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 300; color: var(--black);
}
.metric__label {
  font-size: 0.61rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.metric__divider { width: 1px; height: 48px; background: #e2e2e2; flex-shrink: 0; }

/* Credential badges (Home trust bar): uniform height, monochrome to stay on-brand
   against the white bar; full color on hover (desktop). */
.metrics--badges .metric { padding: 0 2rem; }
.metric__badge {
  height: clamp(38px, 4.4vw, 52px); width: auto; max-width: 100%;
  object-fit: contain; display: block; margin: 0 auto;
  filter: grayscale(1); opacity: 0.72;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}
/* Square seal + tall shield need a little more height to balance the wordmark badges */
.metric__badge--seal { height: clamp(52px, 6vw, 70px); }
.metric__badge:hover { filter: grayscale(0); opacity: 1; }

/* ─── SIGNATURE QUOTE (photo bg) ────────────────────────── */
.quote-feature {
  position: relative;
  overflow: hidden;
  padding: var(--pad-y) var(--pad-x);
  text-align: center;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.quote-feature__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(8, 8, 8, 0.68);
}
.quote-feature__inner {
  position: relative; z-index: 2;
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2.2rem;
}
.quote-feature__rule { width: 50px; height: 1px; background: var(--gold); }
.quote-feature__text {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 300; font-style: italic;
  line-height: 1.32; color: var(--white);
}
.quote-feature__cite {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-style: normal;
}

/* ─── ABOUT SPLIT (white bg, photo left) ────────────────── */
.about-split {
  background: var(--white);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 580px;
  overflow: hidden;
}
.about-split__img-wrap {
  position: relative;
  min-height: 580px;
}
.about-split__text {
  display: flex; flex-direction: column; justify-content: center; gap: 2rem;
  padding: var(--pad-y) clamp(1.5rem, 8vw, 7rem) var(--pad-y) var(--pad-x);
}
.about-split__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 300; line-height: 1.1;
}
/* Smaller-photo variant (home "She's Been Where You Are" + About bio split):
   narrower image column + shorter height so the photo doesn't dominate. */
.about-split--compact { grid-template-columns: 1fr 1.5fr; min-height: 440px; }
.about-split--compact .about-split__img-wrap { min-height: 440px; }

/* ─── ABOUT: EDITORIAL FEATURE ───────────────────────────────────────────────
   Traci's long story told as a magazine feature instead of one photo+text block:
   a portrait-anchored lead-in, a statement pull-quote, the body at a comfortable
   centered measure, a full-width cinematic photo, then the personal closing. */

/* Intro — portrait + oversized serif lead-in */
.about-intro {
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) 1.18fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--pad-x);
}
.about-intro__photo {
  display: block; width: 100%;
  height: clamp(380px, 52vw, 560px);
  object-fit: cover; object-position: top center;
}
.about-intro__lede > p:first-child {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.15; color: var(--black);
  margin-bottom: 1.5rem;
}

/* Pull-quote band */
.about-quote { background: var(--off-white); padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x); }
.about-quote__inner {
  max-width: 56rem; margin: 0 auto; text-align: center;
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.3; color: var(--gold-ink);
}
.about-quote__inner::before { content: "\201C"; }
.about-quote__inner::after  { content: "\201D"; }

/* Body story — comfortable centered measure (65–75ch) */
.about-story { background: var(--white); padding: clamp(3rem, 6vw, 5rem) var(--pad-x); }
.about-story__inner { max-width: 66ch; margin: 0 auto; }
.about-story--closing { padding-top: clamp(2.25rem, 5vw, 3.5rem); }

/* Full-width cinematic photo break */
.about-figure { margin: 0; width: 100%; height: clamp(280px, 42vw, 520px); overflow: hidden; }
.about-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* ─── GUIDE ──────────────────────────────────────────────── */
.guide {
  background: var(--black);
  padding: var(--pad-y) var(--pad-x);
}
.guide__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 7rem); align-items: center;
}
.guide__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;
}
.guide__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 300; line-height: 1.08; color: var(--white);
}
.guide__desc {
  font-size: 0.9rem; font-weight: 300;
  line-height: 1.75; color: rgba(255,255,255,0.5);
  max-width: 38ch;
  margin-top: -0.5rem;
}

/* ─── BLOG / INSIGHTS ────────────────────────────────────── */
/* Scoped to the section element: WordPress adds class="blog" to <body> on the
   posts page, so a bare `.blog` selector would leak this padding onto the body
   and push the whole page (and the fixed nav) down over a white strip. */
section.blog {
  background: var(--white);
  padding: var(--pad-y) var(--pad-x);
}
.blog__inner { max-width: var(--max-w); margin: 0 auto; }
.blog__head {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem; gap: 1.5rem;
}
.blog__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300; letter-spacing: -0.01em;
}

/*
  Complex 3-col grid, 6 rows × 110px.
  Staircase pattern:
    Col 1      Col 2      Col 3
    [  1  ]    [  2  ]    [ 3 ]
    [  1  ]    [  2  ]    [ 3 ]
    [  1  ]    [  2  ]    [  4  ]
    [  1  ]    [  5  ]    [  4  ]
    [ 6 ]      [  5  ]    [  4  ]
    [ 6 ]      [  5  ]    [  4  ]
*/
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, var(--blog-row));
  gap: var(--blog-gap);
}

.blog-card { overflow: hidden; }
.blog-card--1 { grid-column: 1; grid-row: 1 / 5; }
.blog-card--2 { grid-column: 2; grid-row: 1 / 4; }
.blog-card--3 { grid-column: 3; grid-row: 1 / 3; }
.blog-card--4 { grid-column: 3; grid-row: 3 / 7; }
.blog-card--5 { grid-column: 2; grid-row: 4 / 7; }
.blog-card--6 { grid-column: 1; grid-row: 5 / 7; }

/* Fewer than six posts: a simple centred grid instead of the fixed staircase,
   so the Insights section never shows duplicate or empty/placeholder cards. */
.blog__grid--flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.blog__grid--flow .blog-card {
  flex: 1 1 300px;
  max-width: 360px;
  aspect-ratio: 3 / 2;
  grid-column: auto;
  grid-row: auto;
}
.blog__grid--flow .blog-card__link,
.blog__grid--flow .ph--blog { height: 100%; }

.blog-card__link {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.blog-card__link:hover .ph--blog { transform: scale(1.14); }

.blog-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.86) 0%, rgba(8,8,8,0.15) 55%, transparent 100%);
  display: flex; align-items: flex-end;
  padding: 1.2rem 1.1rem;
  transition: background 0.4s;
  overflow: hidden;
}
.blog-card__link:hover .blog-card__overlay {
  background: linear-gradient(to top, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.35) 60%, rgba(8,8,8,0.08) 100%);
}
.blog-card__overlay::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.55s var(--ease);
}
.blog-card__link:hover .blog-card__overlay::after { width: 100%; }

.blog-card__title {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 300; color: var(--white); line-height: 1.35;
  transform: translateY(6px);
  transition: transform 0.45s var(--ease);
}
.blog-card__link:hover .blog-card__title { transform: translateY(0); }

/* ─── TESTIMONIALS ───────────────────────────────────────── */
.testimonials {
  background: var(--off-white);
  padding: var(--pad-y) var(--pad-x);
}
.testimonials__inner { max-width: var(--max-w); margin: 0 auto; }
.testimonials__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4rem; margin-top: 3rem;
}
.testimonial { display: flex; flex-direction: column; gap: 1.2rem; }
.testimonial__bar { width: 30px; height: 1px; background: var(--gold); }
.testimonial__text {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-style: italic; font-weight: 300;
  line-height: 1.75; color: #333;
}
.testimonial__cite {
  font-size: 0.67rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); font-style: normal;
}
/* Google-review cards (plugin auto-feed rendered as native testimonials) */
.testimonial__stars {
  color: var(--gold-ink);
  font-size: 0.8rem; letter-spacing: 0.3em;
  margin-bottom: -0.7rem; /* pull the quote up: flex gap alone reads too airy */
}
.testimonial__source { font-weight: 400; opacity: 0.65; }

/* ─── FINAL CTA (white card on photo) ───────────────────── */
.cta-final {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
}
.cta-final__card {
  position: relative; z-index: 1;
  background: var(--white);
  padding: 3rem 5.5rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  width: min(680px, 88vw);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.cta-final__rule { width: 36px; height: 1px; background: var(--gold); }
.cta-final__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300; line-height: 1.15; color: var(--black);
}
/* Photo-left variant: the shipped Lake Erie still has Traci on the left of the
   frame, so on desktop the card sits over the open water on the right and she
   stays in view. The focal point biases left so the figure survives the
   cover-crop on narrow screens (where the card returns to center). */
.cta-final--photo-left .section-bg-img { object-position: 30% center; }
@media (min-width: 901px) {
  .cta-final--photo-left { justify-content: flex-end; }
  .cta-final--photo-left .cta-final__card {
    width: min(540px, 76vw);
    margin-right: clamp(1.5rem, 6vw, 6rem);
  }
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer { background: var(--black); border-top: 1px solid rgba(201,162,103,0.18); }
.footer__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 2.8rem var(--pad-x);
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: 0.3rem; }
.footer__logo {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--white);
}
img.footer__logo { height: 100px; width: auto; display: block; margin-bottom: 0.2rem; }
.footer__brokerage {
  font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.footer__social { display: flex; gap: 0.7rem; margin-top: 1rem; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.social-icon:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201,162,103,0.08);
}
.social-icon svg { width: 17px; height: 17px; display: block; }
.footer__nav { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer__nav a {
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.38); transition: color 0.2s;
}
.footer__nav a:hover { color: var(--gold); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1rem var(--pad-x) 1.4rem;
}
.footer__bottom span {
  display: block; max-width: var(--max-w); margin: 0 auto;
  font-size: 0.59rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.16);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, calc(var(--blog-row) * 1.4));
  }
  .blog-card--1 { grid-column: 1; grid-row: 1 / 3; }
  .blog-card--2 { grid-column: 2; grid-row: 1 / 2; }
  .blog-card--3 { grid-column: 2; grid-row: 2 / 3; }
  .blog-card--4 { grid-column: 1; grid-row: 3 / 4; }
  .blog-card--5 { grid-column: 2; grid-row: 3 / 5; }
  .blog-card--6 { grid-column: 1; grid-row: 4 / 5; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__inner { padding: 7rem 1.5rem 3.5rem; }
  .hero__image-wrap { min-height: 340px; }
  .ph--hero { position: relative; min-height: 340px; }

  .metrics__inner { flex-wrap: wrap; }
  .metric { padding: 1.2rem 1.5rem; min-width: 50%; }
  .metric__divider { display: none; }

  .about-split { grid-template-columns: 1fr; }
  .about-split__img-wrap { margin-bottom: 0; min-height: 320px; }
  .ph--portrait { min-height: 320px; }

  /* About editorial feature: intro stacks, photo becomes a normal banner. */
  .about-intro { grid-template-columns: 1fr; gap: 1.8rem; }
  .about-intro__photo { height: clamp(320px, 72vw, 460px); }

  .guide { padding-top: var(--pad-y); }
  .guide__inner { grid-template-columns: 1fr; }
  .guide__cover { display: none; }

  .blog__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .blog-card--1, .blog-card--2, .blog-card--3,
  .blog-card--4, .blog-card--5, .blog-card--6 {
    grid-column: auto; grid-row: auto;
  }
  .ph--blog { height: 260px; }

  .testimonials__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cta-final__card { min-width: 0; width: 100%; max-width: 420px; padding: 3rem 2rem; }

  .nav__links { display: none; }
  .nav__mobile-toggle { display: block; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .hero__ctas { flex-direction: column; }
  .metric { min-width: 100%; }
  .nav__logo img { height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES & BLOG — appended for the full WordPress build.
   Reuses the tokens, fonts, and visual language of the approved home design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Real guide-cover image (vs the empty-state div.ph--guide, which keeps its
   A4 shape): show the whole cover at its native proportions. Height is capped
   and the width follows the image's own ratio, so cover art of any dimensions
   works without touching CSS. Don't set aspect-ratio here: the browser derives
   the true ratio from the img's width/height attributes (WP always emits them),
   and that ratio is what keeps auto width honest under the height cap. */
img.ph--guide {
  width: auto; max-width: 100%;
  height: auto; max-height: 480px;
  display: block; margin-inline: auto;
}

/* Google Reviews auto-feed wrapper (replaces manual testimonials when set) */
.reviews-embed { margin-top: 3rem; }
.contact__testimonials .reviews-embed { margin-top: 1rem; }

/* ─── PAGE HERO (dark band atop inner pages) ──────────────────────────────── */
.page-hero {
  background: var(--black);
  padding: clamp(8rem, 13vw, 11rem) var(--pad-x) clamp(3.5rem, 6vw, 5rem);
}
.page-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex; flex-direction: column;
}
.page-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 300; line-height: 1.08;
  color: var(--white); letter-spacing: -0.01em;
}
.page-hero__sub {
  font-size: 0.95rem; font-weight: 300;
  line-height: 1.7; color: rgba(255,255,255,0.52);
  max-width: 52ch; margin-top: 1.6rem;
}
.page-hero--post .page-hero__heading { max-width: 24ch; }

/* ─── RICH TEXT (native editor content: posts, pages) ─────────────────────── */
.rich-text { font-size: 1rem; font-weight: 300; line-height: 1.85; color: #333; }
.rich-text > * + * { margin-top: 1.4rem; }
.rich-text h2 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; color: var(--black); margin-top: 2.6rem; }
.rich-text h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; color: var(--black); margin-top: 2rem; }
.rich-text a { color: var(--gold-dark); border-bottom: 1px solid rgba(201,162,103,0.5); transition: border-color 0.2s; }
.rich-text a:hover { border-color: var(--gold-dark); }
.rich-text ul, .rich-text ol { padding-left: 1.4rem; }
.rich-text li { margin-top: 0.5rem; }
.rich-text blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.6rem; margin-left: 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.3rem; line-height: 1.5; color: #222;
}
.rich-text img, .rich-text figure, .rich-text iframe { max-width: 100%; height: auto; }
.rich-text figure { margin-top: 2rem; }
.rich-text figcaption { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.6rem; }

/* ─── GENERIC PAGE BODY ───────────────────────────────────────────────────── */
.page-body { background: var(--white); padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x); }
.page-body__inner { max-width: 760px; margin: 0 auto; }

/* (The About bio now uses the editorial-feature layout — see “ABOUT: EDITORIAL
   FEATURE” above. The old .about-split--bio / __text--body rules were removed.) */

/* ─── CTA BAND (solid dark, e.g. About close) ─────────────────────────────── */
.cta-band { background: var(--black); padding: var(--pad-y) var(--pad-x); }
.cta-band__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  text-align: center;
}
.cta-band__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 300; line-height: 1.12; color: var(--white);
}
/* Blog lead-capture band (template-parts/lead-cta.php) */
.lead-cta__sub {
  font-size: 0.95rem; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,0.55); max-width: 50ch; margin-top: -0.6rem;
}
.lead-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ─── CONTACT (Work With Me) ──────────────────────────────────────────────── */
.contact { background: var(--off-white); padding: var(--pad-y) var(--pad-x); }
.contact__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
/* 3-column variant (Work With Me): Form · The Process · Portrait + Schedule —
   spreads the content horizontally so the section reads fuller. Tighter gap so
   three columns breathe; collapses to one column at the 900px breakpoint below. */
.contact__inner--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.contact__media { display: flex; flex-direction: column; gap: 1.4rem; }
.contact__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300; line-height: 1.12; color: var(--black);
  margin-bottom: 2rem;
}
.contact-form { font-size: 0.95rem; }
.contact-form--placeholder {
  border: 1.5px dashed var(--gold);
  padding: 2.5rem 2rem; text-align: center; color: var(--text-muted);
  background: rgba(201,162,103,0.04);
}
.contact-form__note { font-size: 0.78rem; margin-top: 0.8rem; color: var(--text-muted); }
.contact__testimonials { display: flex; flex-direction: column; gap: 2rem; }
.contact__testimonials .eyebrow { margin-bottom: 0.5rem; }

/* ─── RESOURCES (guide reversed + opt-in) ─────────────────────────────────── */
.guide--resources .guide__text { justify-content: center; }
/* The "View resource" link sits on the dark showcase section — keep it legible. */
.guide--resources .link-arrow { color: var(--white); }
.optin { width: 100%; display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.optin__note { font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.4); }

/* Present the cover like a framed book mockup (not full-bleed) with a soft
   shadow, so it reads as a deliberate object paired with the opt-in card. */
.guide--resources .guide__inner { gap: clamp(2.5rem, 5vw, 4.5rem); }
/* A real cover sizes and centers itself (img.ph--guide: capped height, width
   from the image's own ratio); only the empty-state div needs a definite width
   so it doesn't collapse. */
.guide--resources .guide__cover { width: 100%; }
.guide--resources .guide__cover img,
.guide--resources .guide__cover .ph--guide {
  display: block;
  border-radius: 4px;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,0.62);
}
.guide--resources .guide__cover div.ph--guide { width: min(100%, 400px); margin-inline: auto; }
/* Slightly taller cap than the generic 480px: at the current art's ratio this
   renders ~400px wide, the size tuned to balance the opt-in card. A future
   cover of any shape keeps its own proportions under the same cap. */
.guide--resources .guide__cover img { max-height: 520px; }

/* Flodesk opt-in, framed as a light card that lifts off the dark section.
   Hooks Flodesk's stable [data-ff-el="root"] wrapper, so it works no matter
   which form id is embedded. The form keeps its own inner padding, so the card
   just adds a radius, a gold top accent, and a soft shadow. */
.guide--resources .optin { gap: 0; margin-top: 0.25rem; max-width: 480px; }
.guide--resources .optin [id^="fd-form-"] { min-height: 300px; }   /* reserve space → no load shift */
.guide--resources .optin [data-ff-el="root"] {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  border-top: 3px solid var(--gold);
  box-shadow: 0 34px 70px -26px rgba(0,0,0,0.62);
}
/* This section already states the guide title in the serif heading + blurb, so
   hide the form's own built-in title/subtitle heading (the client's copy lives
   in Flodesk's __subtitle block) — no duplicate, cramped, off-brand heading.
   Direct-child scope leaves the form's success / error messages untouched. */
.guide--resources .optin form > [class*="__title"],
.guide--resources .optin form > [class*="__subtitle"] { display: none !important; }

/* "More Resources" grid (Resource CPT) — light band, cards mirror the blog. */
.resource-list { background: var(--white); padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x); }
.resource-list__inner { max-width: var(--max-w); margin: 0 auto; }
.resource-list__heading {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300; line-height: 1.1; color: var(--black); margin-bottom: 2.2rem;
}
.resource-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.resource-card { background: var(--white); }
.resource-card__link { display: flex; flex-direction: column; height: 100%; }
.resource-card__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.resource-card .ph--blog.resource-card__photo { display: flex; }
.resource-card__link:hover .resource-card__photo { transform: scale(1.06); }
.resource-card__body { padding: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.resource-card__title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; line-height: 1.25; color: var(--black); }
.resource-card__blurb { font-size: 0.88rem; font-weight: 300; line-height: 1.65; color: #555; flex: 1; }
.resource-card__link .link-arrow { align-self: flex-start; margin-top: 0.4rem; }

/* Single resource — "All Resources" back link band. */
.single__back { background: var(--white); padding: 0 var(--pad-x) clamp(3rem, 6vw, 5rem); }
.single__back .link-arrow { display: inline-flex; }

/* ─── SEARCH HOMES / 404 (centered dark statement) ────────────────────────── */
.search-homes {
  background: var(--black);
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(9rem, 14vw, 12rem) var(--pad-x) var(--pad-y);
  text-align: center;
}
.search-homes__inner {
  max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
}
.search-homes__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  font-weight: 300; line-height: 1.06; color: var(--white); letter-spacing: -0.01em;
}
.search-homes__sub {
  font-size: 0.95rem; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,0.55); max-width: 46ch;
}
.search-homes .btn { margin-top: 0.8rem; }

/* ─── BLOG LISTING / ARCHIVE / SEARCH ─────────────────────────────────────── */
.post-list { background: var(--white); padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x) var(--pad-y); }
.post-list__inner { max-width: var(--max-w); margin: 0 auto; }
.post-list__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.post-list__empty { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 300; color: var(--text-muted); }

.post-card { background: var(--white); }
.post-card__link { display: flex; flex-direction: column; height: 100%; }
.post-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.post-card__media .ph--blog { width: 100%; height: 100%; }
.post-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post-card__link:hover .post-card__photo { transform: scale(1.06); }
.post-card__body { padding: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.post-card__date { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.post-card__title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; line-height: 1.25; color: var(--black); }
.post-card__excerpt { font-size: 0.88rem; font-weight: 300; line-height: 1.65; color: #555; flex: 1; }
.post-card .link-arrow { align-self: flex-start; margin-top: 0.4rem; }

/* ─── SINGLE POST ─────────────────────────────────────────────────────────── */
.single__feature { max-width: 1000px; margin: -3rem auto 0; padding: 0 var(--pad-x); position: relative; z-index: 2; }
.single__feature-img { width: 100%; height: auto; display: block; box-shadow: 0 24px 70px rgba(0,0,0,0.18); }
.single__body { background: var(--white); padding: clamp(3rem, 6vw, 5rem) var(--pad-x) var(--pad-y); }
.single__content { max-width: 760px; margin: 0 auto; }
.single__nav {
  max-width: 760px; margin: 3.5rem auto 0; padding-top: 2rem;
  border-top: 1px solid #eaeaea;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.single__nav a { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.2s; }
.single__nav a:hover { color: var(--gold); }
.single__nav-next { text-align: right; margin-left: auto; }

/* ─── PAGINATION ──────────────────────────────────────────────────────────── */
.pagination { margin-top: 3.5rem; }
.pagination .nav-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
  font-size: 0.75rem; letter-spacing: 0.06em;
  border: 1px solid #e2e2e2; color: var(--black); transition: all 0.2s;
}
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold-dark); }
.pagination .page-numbers.current { background: var(--black); color: var(--white); border-color: var(--black); }

/* ─── INNER-PAGE RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
  .post-list__grid,
  .resource-list__grid { grid-template-columns: repeat(2, 1fr); }
  /* On Resources, keep cover above the opt-in like the home guide collapse */
  .guide--resources .guide__cover { display: block; }
}

@media (max-width: 600px) {
  .post-list__grid,
  .resource-list__grid { grid-template-columns: 1fr; }
}

/* ─── CALENDLY SCHEDULE (Work With Me) ────────────────────────────────────── */
/* "Schedule a Call" sits under The Process; solid gold for visibility on the
   off-white contact section. */
.contact__schedule { margin-top: 1.6rem; }
.contact__schedule .btn { display: inline-block; }
/* Setup placeholder shown until a Calendly URL is set */
.contact__schedule--ph { opacity: 0.6; cursor: default; }
.contact__schedule-note { font-size: 0.78rem; margin-top: 0.8rem; color: var(--text-muted); }

/* ─── WORK WITH ME: compact hero + form-first layout ──────────────────────── */
/* Smaller hero so the contact form is visible on first glance. */
.page-hero--compact {
  padding-top: clamp(6rem, 9vw, 7.5rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.contact--compact { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* "The Process" now sits alongside the form (where testimonials were). */
.contact__process { display: flex; flex-direction: column; gap: 1rem; }
/* Portrait atop The Process — a warm, face-forward photo beside the CTA. */
.contact__portrait { margin-bottom: 0.6rem; overflow: hidden; }
.contact__portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}
.contact__process .eyebrow { margin-bottom: 0.5rem; }
.contact__process .rich-text { font-size: 0.95rem; }
.contact__process .rich-text > * + * { margin-top: 1.1rem; }
/* Slim social-proof strip below the contact section (white, hairline divider,
   compact + centered to read as a distinct band against the off-white form). */
.testimonials--strip {
  background: var(--white);
  border-top: 1px solid rgba(10,10,10,0.08);
  padding: clamp(2.8rem, 5vw, 4rem) var(--pad-x);
  text-align: center;
}
.testimonials--strip .testimonials__grid { gap: clamp(2rem, 4vw, 3rem); margin-top: 1.8rem; }
.testimonials--strip .testimonial { gap: 0.9rem; align-items: center; }
.testimonials--strip .testimonial__bar { margin: 0 auto; }
.testimonials--strip .testimonial__text { font-size: 0.95rem; line-height: 1.6; }

/* ─── NAV EXTERNAL-LINK ICON ──────────────────────────────────────────────── */
.nav__ext-icon {
  display: inline-block; vertical-align: middle;
  margin-left: 0.35em; opacity: 0.85;
  transform: translateY(-1px);
}
.nav__cta-link .nav__ext-icon { opacity: 1; }
/* Match icon inside the gold button on the Search Homes page */
.search-homes .btn svg {
  display: inline-block; vertical-align: middle;
  margin-left: 0.4em; transform: translateY(-1px);
}

/* ─── ABOUT: RECOGNITION (full-color badges) ──────────────────────────────── */
.recognition {
  background: var(--off-white);
  border-top: 1px solid #eaeaea;
  padding: var(--pad-y) var(--pad-x);
}
.recognition__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 2.4rem;
  text-align: center;
}
.recognition__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.recognition__badge { height: clamp(54px, 6vw, 74px); width: auto; object-fit: contain; }
.recognition__badge--seal { height: clamp(74px, 8vw, 104px); }

/* ─── REDUCED MOTION ──────────────────────────────────────── */
/* Honor the OS "reduce motion" setting: reveal all content immediately and strip
   scroll/hover/keyframe motion. theme.js also skips wiring the reveal observer. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-anim { animation: none !important; }
  .blog-card__link:hover .blog-card__photo,
  .blog-card__link:hover .ph--blog,
  .blog-card__link:hover .blog-card__title,
  .post-card__link:hover .post-card__photo,
  .resource-card__link:hover .resource-card__photo { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}