/* =========================================================
   Rachel Nevers · Real Estate · Greater Moncton, NB
   Standalone site, niched to real estate only.
   Same brand language as the main site (Amplified by Rachel).
   ========================================================= */

:root {
  /* Brand palette — strict, only Rachel's 8 brand colors */
  --cobalt: #050e3d;
  --chalk: #ffffff;
  --onyx: #1d1d1d;
  --slate: #615b56;
  --seaglass: #bfdddb;
  --coral: #ff557e;
  --aqua: #00fbf0;
  --legacy-blue: #05c3f9;

  /* Functional aliases — all point to brand colors, never to invented intermediates */
  --accent: var(--slate);                       /* slate is now the action color (was coral) */
  --accent-soft: rgba(97, 91, 86, 0.10);        /* slate at 10% — for soft backgrounds only */
  --accent-cool: var(--aqua);
  --accent-cool-soft: rgba(0, 251, 240, 0.16);
  --accent-text: var(--slate);
  --accent-text-on-dark: var(--seaglass);       /* light accent on dark backgrounds */

  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(5, 14, 61, 0.06), 0 4px 12px rgba(5, 14, 61, 0.05);
  --shadow-md: 0 8px 24px rgba(5, 14, 61, 0.08), 0 2px 6px rgba(5, 14, 61, 0.05);
  --shadow-lg: 0 20px 50px rgba(5, 14, 61, 0.14), 0 8px 20px rgba(5, 14, 61, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--onyx);
  background: var(--chalk);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--onyx); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--onyx); letter-spacing: -0.01em; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.4rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
li { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 1rem;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 112px 0; }
@media (max-width: 720px) { section { padding: 72px 0; } }

.muted { color: var(--slate); }
.kicker { font-size: 0.9rem; color: var(--slate); }
.center { text-align: center; }

/* =========================
   MORTGAGE CALCULATOR
   ========================= */
.calculator-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  background: var(--chalk);
  border: 1px solid rgba(29,29,29,0.08);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 800px) { .calculator-wrap { grid-template-columns: 1fr; gap: 24px; padding: 28px; } }
.calc-field { margin-bottom: 16px; }
.calc-field label { display: block; font-size: 0.82rem; font-weight: 600; margin: 0 0 6px; color: var(--onyx); }
.calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-input-wrap input, .calc-field select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid rgba(29,29,29,0.14);
  border-radius: 10px; font-family: inherit; font-size: 1rem; color: var(--onyx); background: var(--chalk);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-input-wrap input:focus, .calc-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.calc-prefix { position: absolute; left: 14px; color: var(--slate); font-weight: 500; pointer-events: none; z-index: 1; }
.calc-input-wrap.has-prefix input { padding-left: 30px; }
.calc-suffix { position: absolute; right: 14px; color: var(--slate); font-size: 0.85rem; font-weight: 500; pointer-events: none; }
.calc-results {
  background: var(--accent-soft); border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.calc-result-main { text-align: center; padding-bottom: 18px; border-bottom: 1px solid rgba(29,29,29,0.1); }
.calc-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate); margin-bottom: 8px; font-weight: 600; }
.calc-value { display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 500; color: var(--onyx); line-height: 1; }
.calc-frequency { display: block; margin-top: 8px; color: var(--slate); font-size: 0.95rem; }
.calc-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-stat { background: var(--chalk); border-radius: 10px; padding: 14px 16px; }
.calc-stat-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); font-weight: 600; margin-bottom: 4px; }
.calc-stat-value { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--onyx); font-weight: 500; }

/* =========================
   NAV
   ========================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(29,29,29,0.07);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em;
  display: flex; flex-direction: column; line-height: 1.1;
}
.nav-brand .sub {
  font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--slate); font-weight: 600;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 0.95rem; font-weight: 500; }
.nav-cta {
  background: var(--onyx); color: var(--chalk);
  padding: 11px 22px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600;
  transition: all .2s ease;
}
.nav-cta:hover { background: var(--accent); color: var(--chalk); transform: translateY(-1px); }
@media (max-width: 800px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* =========================
   MOBILE BOTTOM NAV BAR
   Sticky tab bar at the bottom of the viewport on mobile.
   Hidden on desktop.
   ========================= */
.mobile-tabbar {
  display: none;
}
@media (max-width: 800px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 950;
    background: var(--chalk);
    border-top: 1px solid rgba(5, 14, 61, 0.08);
    box-shadow: 0 -4px 16px rgba(5, 14, 61, 0.06);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
  }
  .mobile-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--slate);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-tabbar a.active {
    color: var(--cobalt);
    background: rgba(191, 221, 219, 0.45);
  }
  .mobile-tabbar a:active { background: rgba(191, 221, 219, 0.6); }
  .mobile-tabbar .icon {
    font-size: 20px;
    line-height: 1;
    color: inherit;
  }
  /* push page content up so the fixed bar doesn't cover the footer */
  body { padding-bottom: 72px; }
}

/* =========================
   BUTTONS
   ========================= */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  transition: all .2s ease;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn-primary { background: var(--onyx); color: var(--chalk); }
.btn-primary:hover { background: var(--accent); color: var(--chalk); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-accent { background: var(--accent); color: var(--chalk); box-shadow: 0 4px 12px rgba(97,91,86,0.18); }
.btn-accent:hover { background: var(--accent); color: var(--chalk); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(97,91,86,0.22); filter: brightness(0.93); }
.btn-ghost {
  background: rgba(255,255,255,0.9); color: var(--onyx);
  border: 1.5px solid var(--onyx);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--onyx); color: var(--chalk); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* =========================
   PHOTO HERO (graphics-led)
   ========================= */
.photo-hero {
  position: relative;
  min-height: 86vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--chalk);
  background: var(--onyx);
}
.photo-hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.photo-hero .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Photo breathes through at top — darker wash at bottom so text reads cleanly */
  background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(29,29,29,0.72) 100%);
}
.photo-hero .hero-content {
  position: relative; z-index: 1;
  max-width: var(--maxw); width: 100%;
  margin: 0 auto;
  padding: 64px 24px;
}
.photo-hero .eyebrow { color: var(--seaglass); }
.photo-hero h1 {
  color: var(--chalk);
  max-width: 760px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.photo-hero h1 .accent { color: var(--seaglass); font-style: italic; font-weight: 400; }
.photo-hero .lead {
  max-width: 580px; font-size: 1.2rem;
  color: rgba(255,255,255,0.95);
  margin-top: 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.photo-hero .eyebrow { text-shadow: 0 1px 6px rgba(0,0,0,0.3); }

/* Three home styles matched to Rachel's NB market */
.hero-bg.hero-home {
  /* Rachel in downtown Moncton — replaces the beach photo */
  background-image:
    url("assets/rachel-crosswalk.jpg"),
    linear-gradient(135deg, var(--seaglass) 0%, var(--seaglass) 100%);
}
.hero-bg.hero-buying {
  /* Real Greater Moncton home — $350K-$400K range, stone-accented two-story */
  background-image:
    url("assets/home-buying.jpg"),
    linear-gradient(135deg, var(--seaglass) 0%, var(--seaglass) 100%);
}
.hero-bg.hero-selling {
  /* Real Greater Moncton home — $400K-$600K range, wraparound porch family home */
  background-image:
    url("assets/home-selling.jpg"),
    linear-gradient(135deg, var(--seaglass) 0%, var(--seaglass) 100%);
}
.hero-bg.hero-trusted {
  /* Trusted Pros page hero — Rachel professional, white barn */
  background-image:
    url("assets/rachel-barn-pose.jpg"),
    linear-gradient(135deg, var(--seaglass) 0%, var(--seaglass) 100%);
}
.hero-bg.hero-areas {
  /* Service Areas page hero */
  background-image:
    url("assets/areas.jpg"),
    linear-gradient(135deg, var(--seaglass) 0%, var(--seaglass) 100%);
}
/* Stronger overlay specifically for the trusted-pros and areas heroes — the photos have lighter areas behind the headline */
.photo-hero .hero-bg.hero-trusted::after,
.photo-hero .hero-bg.hero-areas::after {
  background: linear-gradient(180deg, rgba(29,29,29,0.15) 0%, rgba(29,29,29,0.55) 45%, rgba(29,29,29,0.85) 100%);
}
/* Moderate overlays for buying and selling — calmer photos, easier to read */
.photo-hero .hero-bg.hero-buying::after,
.photo-hero .hero-bg.hero-selling::after {
  background: linear-gradient(180deg, rgba(29,29,29,0.10) 0%, rgba(29,29,29,0.45) 50%, rgba(29,29,29,0.80) 100%);
}

/* =========================
   VALUE PROPOSITION ICONS
   ========================= */
.value-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }

.value-item {
  text-align: center;
  padding: 28px 20px;
}
.value-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: var(--font-display);
}
.value-item h3 { font-size: 1.1rem; margin-bottom: 8px; text-wrap: balance; }
.value-item p { color: var(--slate); font-size: 0.95rem; margin: 0; text-wrap: pretty; }

/* =========================
   BIG STATS
   ========================= */
.stats-strip {
  background: linear-gradient(180deg, var(--seaglass) 0%, var(--seaglass) 100%);
  color: var(--onyx);
  padding: 64px 0;
}
.stats-strip .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
  align-items: stretch;
}
@media (max-width: 800px) { .stats-strip .container { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }

.stat-block {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 0 12px;
  text-align: center;
}
.stat-block .big {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 400; line-height: 1.05;
  color: var(--onyx);
  min-height: 84px;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  margin-bottom: 16px;
}

/* Real Broker logo image — uses the white version of the brand asset on cobalt background */
.stat-block img.big {
  /* Override flex defaults so the logo behaves as an image, not a flex container */
  display: block;
  white-space: normal;
}
.stat-block .real-img {
  height: clamp(54px, 6vw, 72px);
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
.stat-block .label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin-top: 14px;
}

/* =========================
   TESTIMONIAL CARDS
   ========================= */
.testimonial-band {
  background: linear-gradient(180deg, var(--chalk) 0%, rgba(191,221,219,0.65) 100%);
}
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--chalk);
  border: 1px solid rgba(29,29,29,0.08);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  transition: all .25s ease;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -8px; left: 24px;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--slate);
  line-height: 1;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--onyx);
  line-height: 1.5;
  margin: 16px 0 24px;
}
.testimonial-author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(29,29,29,0.08);
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--seaglass);
  color: var(--slate);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.testimonial-meta { line-height: 1.3; }
.testimonial-name {
  font-weight: 600; color: var(--onyx); font-size: 0.95rem;
}
.testimonial-detail {
  color: var(--slate); font-size: 0.85rem;
}
.testimonial.placeholder {
  background: linear-gradient(180deg, var(--chalk) 0%, rgba(191,221,219,0.65) 100%);
  border-style: dashed;
  border-color: rgba(97,91,86,0.3);
}
.testimonial.placeholder .testimonial-quote {
  color: var(--slate);
}

/* =========================
   FEATURE / IMAGE-RIGHT
   ========================= */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; gap: 40px; } }

.feature-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
  min-height: 380px;
}
.feature-photo.photo-rachel {
  background-image:
    url("assets/rachel-smiling.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 22%;
}
.feature-photo.photo-rachel-sitting {
  background-image:
    url("assets/rachel-sitting.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 30%;
}
.feature-photo.photo-rachel-joyful {
  background-image:
    url("assets/rachel-joyful.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 22%;
}
.feature-photo.photo-rachel-laughing {
  background-image:
    url("assets/rachel-laughing.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 25%;
}
.feature-photo.photo-rachel-crosswalk {
  background-image:
    url("assets/rachel-crosswalk.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 30%;
}
.feature-photo.photo-rachel-stairs {
  background-image:
    url("assets/rachel-stairs-confident.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 18%;
}
.feature-photo.photo-rachel-chair {
  background-image:
    url("assets/rachel-chair-laugh.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 22%;
}
.feature-photo.photo-rachel-barn {
  background-image:
    url("assets/rachel-barn-smile.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 28%;
}
.feature-photo.photo-rachel-stairs-smile {
  background-image:
    url("assets/rachel-stairs-smile.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 22%;
}
.feature-photo.photo-rachel-hat-laugh {
  background-image:
    url("assets/rachel-hat-laugh.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 22%;
}
.feature-photo.photo-rachel-curb-smile {
  background-image:
    url("assets/rachel-curb-smile.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 28%;
}
.feature-photo.photo-rachel-spiral-stairs {
  background-image:
    url("assets/rachel-spiral-stairs.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
  background-position: center 25%;
}

/* "Rachel band" — side-by-side photo and content (photo shows full body) */
.rachel-band {
  background: var(--cobalt);
  position: relative;
  overflow: hidden;
  margin: 0;
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 540px;
}
.rachel-band-photo {
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  min-height: 540px;
  z-index: 0;
}
.rachel-band-content {
  padding: 64px 56px;
  color: var(--chalk);
  display: flex; flex-direction: column; justify-content: center;
  z-index: 1;
}
.rachel-band-content .eyebrow {
  color: var(--seaglass);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 600;
}
.rachel-band-content h3 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--chalk);
  margin: 14px 0 14px;
  font-weight: 400;
}
.rachel-band-content h3 em {
  font-style: italic;
  color: var(--coral);
}
.rachel-band-content p {
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  margin: 0 0 22px;
  line-height: 1.55;
}
.rachel-band-content .btn {
  background: var(--chalk);
  color: var(--cobalt);
  border: none;
}
.rachel-band-content .btn:hover { background: var(--seaglass); }
@media (max-width: 800px) {
  .rachel-band { grid-template-columns: 1fr; }
  .rachel-band-photo { min-height: 320px; }
  .rachel-band-content { padding: 40px 24px; }
  .rachel-band-content h3 { font-size: 1.7rem; }
}
/* East coast lifestyle — people enjoying their homes and the coast */
.feature-photo.photo-kitchen {
  /* Bright kitchen, sunlight streaming in */
  background-image:
    url("https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-living {
  /* Cozy coastal living room with ocean view */
  background-image:
    url("https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-couple {
  /* Happy couple walking the east coast shoreline */
  background-image:
    url("https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-moving {
  /* Couple unpacking moving boxes in their new home */
  background-image:
    url("https://images.unsplash.com/photo-1600518464441-9154a4dea21b?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-keys {
  /* New homeowner with house keys */
  background-image:
    url("https://images.unsplash.com/photo-1582407947304-fd86f028f716?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-family {
  /* East coast family lifestyle, walking the beach together */
  background-image:
    url("https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-coast {
  /* Atlantic shoreline lifestyle */
  background-image:
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-celebration {
  /* Friends celebrating with each other — east coast warmth */
  background-image:
    url("https://images.unsplash.com/photo-1529635893269-ad1d04d80386?w=1200&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-staged {
  /* Rachel's own staging photo */
  background-image:
    url("assets/selling-staging.jpeg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-marketing-pro {
  /* Rachel's own marketing strategy photo */
  background-image:
    url("assets/selling-strategy.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-checklist-couple {
  /* Rachel's own checklist couple photo */
  background-image:
    url("assets/selling-checklist.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-coast-landscape {
  /* Rachel's own coast landscape photo */
  background-image:
    url("assets/coast-landscape.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-phone {
  /* Rachel's own phone-with-listings photo */
  background-image:
    url("assets/buying-phone.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo.photo-lawyer {
  /* Rachel's own closing costs photo */
  background-image:
    url("assets/selling-closing.jpg"),
    linear-gradient(135deg, var(--seaglass), var(--accent-soft));
}
.feature-photo .photo-tag {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(29,29,29,0.7);
  color: var(--chalk);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  backdrop-filter: blur(4px);
}

/* =========================
   PROCESS STEPS (visual)
   ========================= */
.process-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }

.process-card {
  background: var(--chalk);
  border: 1px solid rgba(29,29,29,0.08);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all .25s ease;
  position: relative;
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.process-card .step-num {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  color: var(--accent-soft);
  line-height: 1;
}
.process-card .step-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.process-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.process-card p { color: var(--slate); font-size: 0.95rem; margin: 0; }

/* =========================
   PATHWAYS (Buying / Selling CTAs)
   ========================= */
.pathway-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 800px) { .pathway-grid { grid-template-columns: 1fr; } }

.pathway-card {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; align-items: flex-end;
  color: var(--chalk);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: var(--shadow-md);
}
.pathway-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--chalk); }
.pathway-card .pw-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s ease;
}
.pathway-card:hover .pw-bg { transform: scale(1.05); }
.pathway-card .pw-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Softer overlay — pathway photo breathes through, dark wash only at bottom for text */
  background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(29,29,29,0.68) 100%);
}
.pathway-card .pw-content {
  position: relative; z-index: 1;
  padding: 40px 36px;
  width: 100%;
}
.pathway-card .pw-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 10px;
}
.pathway-card h3 {
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.pathway-card p {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  margin-bottom: 20px;
}
.pathway-card .arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  color: var(--chalk);
  font-size: 0.95rem;
}
.pathway-card .arrow-link::after { content: "→"; transition: transform .25s ease; }
.pathway-card:hover .arrow-link::after { transform: translateX(6px); }

.pw-buying.pw-bg {
  /* BUYER JOURNEY — happy couple, hope and discovery */
  background-image:
    url("https://images.unsplash.com/photo-1604186293649-8e96122e0474?w=1600&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--seaglass));
}
.pw-selling.pw-bg {
  /* SELLER JOURNEY — thoughtful couple, making the next move */
  background-image:
    url("https://images.unsplash.com/photo-1586986422389-e500f0ed9f65?w=1600&q=80&auto=format&fit=crop"),
    linear-gradient(135deg, var(--seaglass), var(--seaglass));
}

/* =========================
   AREA FOCUS (small graphic)
   ========================= */
.area-band {
  background: var(--seaglass);
  background: linear-gradient(160deg, var(--seaglass) 0%, var(--chalk) 100%);
}
.area-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
.area-chip {
  background: var(--chalk);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--onyx);
  box-shadow: var(--shadow-sm);
  transition: all .2s ease;
}
.area-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--accent); }

/* =========================
   SECTION HEAD
   ========================= */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head p { color: var(--slate); font-size: 1.1rem; margin: 0; }

/* =========================
   PROMISES STRIP
   ========================= */
.promises-strip {
  background: linear-gradient(160deg, var(--chalk) 0%, rgba(191,221,219,0.65) 100%);
  text-align: center;
}
.promises-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px;
  max-width: 840px; margin: 0 auto;
  text-align: left;
}
@media (max-width: 700px) { .promises-list { grid-template-columns: 1fr; gap: 14px; } }
.promise-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(29,29,29,0.08);
  font-size: 1.05rem;
  color: var(--onyx);
}
.promise-item:last-child { border-bottom: none; }
.promise-check {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 2px;
}

/* =========================
   FAQ
   ========================= */
.faq-list {
  max-width: 760px; margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(29,29,29,0.1);
  padding: 8px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--onyx);
  padding: 22px 40px 22px 0;
  position: relative;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform .25s ease;
  line-height: 1;
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after {
  content: "−";
  transform: translateY(-50%);
}
.faq-item summary:hover { color: var(--accent); }
.faq-answer {
  padding: 4px 0 24px;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.7;
}
.faq-answer p:last-child { margin-bottom: 0; }

/* =========================
   CTA BAND
   ========================= */
.cta-band {
  background: var(--onyx);
  color: var(--chalk);
  text-align: center;
}
.cta-band h2 { color: var(--chalk); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto 32px; font-size: 1.1rem; }

/* =========================
   FOOTER
   ========================= */
footer {
  background: var(--onyx); color: rgba(255,255,255,0.78);
  padding: 64px 0 32px;
}
footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
footer h4 { color: var(--chalk); font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 16px; font-weight: 500; }
footer a { color: rgba(255,255,255,0.78); display: block; margin-bottom: 10px; font-size: 0.94rem; }
footer a:hover { color: var(--coral); }
.foot-brand { font-family: var(--font-display); font-size: 1.4rem; color: var(--chalk); margin-bottom: 8px; }
.foot-meta {
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  grid-column: 1 / -1;
}
@media (max-width: 800px) {
  footer .container { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 500px) {
  footer .container { grid-template-columns: 1fr; }
}

/* =========================================================
   Meet Rachel strip (top of every page, under the nav)
   ========================================================= */
.meet-strip {
  background: rgba(191, 221, 219, 0.40);
  padding: 22px 0;
  border-bottom: 1px solid rgba(5, 14, 61, 0.06);
}
.meet-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.meet-strip .avatar {
  width: 78px; height: 78px;
  border-radius: 50%;
  background-image: url("assets/rachel-headshot-400.jpg?v=20261108");
  background-size: cover;
  background-position: center 18%;
  border: 3px solid var(--chalk);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.meet-strip .greeting {
  flex: 1; min-width: 0;
}
.meet-strip .greeting .hi {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--cobalt);
  margin: 0 0 2px;
  line-height: 1.2;
}
.meet-strip .greeting .hi em { font-style: italic; color: var(--coral); }
.meet-strip .greeting .sub {
  color: var(--slate);
  font-size: 0.9rem;
  margin: 0;
}
.meet-strip .strip-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.meet-strip .strip-actions a {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.meet-strip .strip-actions .ms-primary {
  background: var(--cobalt);
  color: var(--chalk);
}
.meet-strip .strip-actions .ms-ghost {
  background: var(--chalk);
  color: var(--cobalt);
  border: 1px solid rgba(5,14,61,0.18);
}
@media (max-width: 700px) {
  .meet-strip-inner { gap: 14px; }
  .meet-strip .greeting .hi { font-size: 1.15rem; }
  .meet-strip .greeting .sub { font-size: 0.82rem; }
  .meet-strip .strip-actions { width: 100%; justify-content: flex-start; }
}

/* =========================================================
   Quick capture form (bottom of every page)
   ========================================================= */
.quick-capture {
  background: rgba(191, 221, 219, 0.35);
  padding: 56px 0;
}
.quick-capture-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 36px; align-items: center;
}
.quick-capture h3 {
  font-family: var(--font-display);
  font-size: 1.6rem; color: var(--cobalt);
  margin: 8px 0 8px;
}
.quick-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quick-form input {
  padding: 12px 14px;
  border: 1px solid rgba(5, 14, 61, 0.16);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--chalk);
  color: var(--onyx);
}
.quick-form input:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(191,221,219,0.5);
}
.quick-form input[name="message"] {
  grid-column: 1 / -1;
}
.quick-form button {
  grid-column: 1 / -1;
  margin-top: 4px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .quick-capture-inner { grid-template-columns: 1fr; }
  .quick-form { grid-template-columns: 1fr; }
}

/* =========================================================
   Market stats charts
   ========================================================= */
.stats-section { padding: 72px 0; background: rgba(191,221,219,0.25); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.stat-card {
  background: var(--chalk);
  padding: 24px;
  border-radius: var(--radius);
  border-top: 4px solid var(--coral);
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--cobalt);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat-card .stat-sub {
  font-size: 0.88rem;
  color: var(--slate);
}
.stat-card .stat-bar {
  margin-top: 14px;
  height: 8px;
  background: rgba(5,14,61,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.stat-card .stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--seaglass), var(--coral));
  border-radius: 999px;
}
.stat-card .stat-trend {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--coral);
  font-weight: 600;
  margin-top: 6px;
}
.stat-card .stat-trend.down { color: var(--legacy-blue); }
.stats-source {
  text-align: center;
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--slate);
  font-style: italic;
}
@media (max-width: 800px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* Simple SVG-based bar chart styling */
.chart-block {
  background: var(--chalk);
  padding: 28px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: 28px;
}
.chart-block .chart-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--cobalt);
  margin: 0 0 6px;
}
.chart-block .chart-sub {
  color: var(--slate);
  font-size: 0.9rem;
  margin: 0 0 18px;
}
.bar-chart { display: grid; gap: 12px; }
.bar-chart .bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  align-items: center;
  gap: 12px;
}
.bar-chart .bar-label {
  font-size: 0.86rem;
  color: var(--onyx);
  font-weight: 600;
}
.bar-chart .bar-track {
  height: 22px;
  background: rgba(5,14,61,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.bar-chart .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--seaglass), var(--legacy-blue));
  border-radius: 8px;
}
.bar-chart .bar-fill.highlight {
  background: linear-gradient(90deg, var(--coral), #ff7f9c);
}
.bar-chart .bar-value {
  font-size: 0.86rem;
  color: var(--cobalt);
  font-weight: 700;
  text-align: right;
}


/* =========================================================
   EDITORIAL RESTYLE · Nov 2026
   Clean white page, big tight headlines, one accent (coral)
   used sparingly, seaglass tint behind numbers and labels,
   thin outlines, pill buttons. No gradients, no shadows.
   Everything below overrides the rules above; delete this
   block to go back to the previous look.
   ========================================================= */
:root {
  --ink: var(--cobalt);              /* navy text */
  --ink-muted: var(--slate);         /* secondary text (6.4:1 on white) */
  --paper: #ffffff;
  --rule: #e2e4ea;                   /* hairline dividers */
  --line: 1px solid var(--cobalt);   /* thin card outline */
  --hair: 1px solid #e2e4ea;
  --tint: var(--seaglass);
  --tint-soft: rgba(191, 221, 219, 0.45);
  --accent: var(--cobalt);
  --accent-soft: var(--tint-soft);
  --accent-text: var(--cobalt);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --radius: 16px;
  --radius-lg: 20px;
}
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }

body { color: var(--ink); background: var(--paper); }
a { color: var(--ink); }
a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.btn:hover, .nav-brand:hover, .mobile-tabbar a:hover, .post-card:hover, .pathway-card:hover, .area-chip:hover, .resource-block:hover, footer a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.025em; line-height: 1.06; }
h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.8rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.5rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; }
h3 { letter-spacing: -0.015em; line-height: 1.18; }
p { color: inherit; }
.muted, .kicker { color: var(--ink-muted); }

/* Labels: small uppercase text on a soft seaglass pill */
.eyebrow {
  display: inline-flex; align-items: center;
  background: var(--tint-soft);
  color: var(--ink) !important;
  font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 1.25rem;
}
section { padding: clamp(72px, 9vw, 120px) 0; }
/* page sections are plain white, separated by a hairline */
section[style*="background"]:not(.cta-band),
.testimonial-band, .area-band, .promises-strip, .stats-section, .stats-strip {
  background: var(--paper) !important;
  border-top: var(--hair) !important;
}
.section-head { margin-bottom: 56px; }
.section-head p { color: var(--ink-muted); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.6; }

/* ---------- Nav ---------- */
.nav { background: rgba(255,255,255,0.96); backdrop-filter: none; border-bottom: var(--hair); }
.nav-brand { color: var(--ink); letter-spacing: -0.02em; }
.nav-links a { color: var(--ink); }
.nav-cta, .nav-links a.nav-cta { background: var(--coral); color: var(--cobalt); padding: 11px 22px; }
.nav-cta:hover { background: var(--cobalt); color: #fff; transform: none; }

/* ---------- Buttons ---------- */
.btn { min-height: 52px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; border-radius: 999px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: none; filter: none; text-decoration: none; }
.btn-accent, .btn-accent:hover { background: var(--coral); color: var(--cobalt); border: 1.5px solid var(--coral); }
.btn-accent:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.btn-primary { background: var(--cobalt); color: #fff; border: 1.5px solid var(--cobalt); }
.btn-primary:hover { background: #fff; color: var(--cobalt); }
.btn-ghost { background: #fff; color: var(--cobalt); border: 1px solid var(--cobalt); backdrop-filter: none; }
.btn-ghost:hover { background: var(--cobalt); color: #fff; }
.btn-row { gap: 12px; }

/* ---------- Meet Rachel strip ---------- */
.meet-strip { background: var(--paper); border-bottom: var(--hair); padding: 18px 0; }
.meet-strip .avatar { border: 1px solid var(--cobalt); width: 64px; height: 64px; }
.meet-strip .greeting .hi { color: var(--ink); letter-spacing: -0.015em; }
.meet-strip .greeting .hi em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.meet-strip .strip-actions a { min-height: 40px; display: inline-flex; align-items: center; }
.meet-strip .strip-actions .ms-primary { background: var(--cobalt); color: #fff; }
.meet-strip .strip-actions .ms-ghost { border: 1px solid var(--cobalt); }

/* ---------- Hero: white editorial, photo as an outlined card ---------- */
.photo-hero {
  min-height: 0; color: var(--ink); background: var(--paper);
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas: "content photo" "art art";
  column-gap: clamp(32px, 5vw, 72px);
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 24px 0;
  overflow: visible;
}
.photo-hero .hero-bg {
  position: relative; inset: auto; grid-area: photo;
  aspect-ratio: 4 / 5; max-height: 640px; width: 100%;
  border-radius: var(--radius-lg); border: var(--line);
  background-color: var(--tint-soft);
  background-position: center 30%;
}
.photo-hero .hero-bg::after, .photo-hero .hero-bg.hero-trusted::after, .photo-hero .hero-bg.hero-areas::after,
.photo-hero .hero-bg.hero-buying::after, .photo-hero .hero-bg.hero-selling::after { display: none; background: none; }
.photo-hero .hero-content { grid-area: content; padding: 0; margin: 0; max-width: none; }
.photo-hero h1 { color: var(--ink); max-width: 13ch; margin-bottom: 0.35em; }
.photo-hero h1 .accent { color: var(--ink); font-style: italic; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.photo-hero .lead { color: var(--ink-muted); font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.62; max-width: 56ch; margin-top: 0; }
.photo-hero .eyebrow { background: var(--coral); color: var(--cobalt) !important; }
.hero-bg.hero-home { background-image: url("assets/rachel-crosswalk.jpg"); }
.hero-bg.hero-buying { background-image: url("assets/home-buying.jpg"); }
.hero-bg.hero-selling { background-image: url("assets/home-selling.jpg"); }
.hero-bg.hero-trusted { background-image: url("assets/rachel-barn-pose.jpg"); }
.hero-bg.hero-areas { background-image: url("assets/areas.jpg"); }
.hero-art { grid-area: art; margin-top: clamp(40px, 6vw, 72px); }
.hero-art svg, .hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .photo-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "photo" "art"; padding-top: 40px; }
  .photo-hero .hero-bg { aspect-ratio: 1 / 1; margin-top: 36px; max-height: none; }
  .hero-art { margin-top: 32px; }
  .hero-art svg, .hero-art img { height: 130px; width: 100%; object-fit: cover; object-position: 45% 100%; }
}

/* ---------- Line-art street (houses + dot buyers) ---------- */
.la-house { fill: #fff; stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; }
.la-house.hot { fill: var(--coral); }
.la-line { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.la-sun { fill: var(--seaglass); }
.la-dot { fill: var(--cobalt); }
.la-dot.hot { fill: var(--coral); }
@media (prefers-reduced-motion: no-preference) {
  .la-dot { opacity: 0; animation: la-dot-in .5s ease-out forwards; }
  @keyframes la-dot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Big stats strip (numbers on soft tint) ---------- */
.stat-block .big { color: var(--ink); letter-spacing: -0.02em; }
.stat-block .label { color: var(--ink-muted); }

/* ---------- Cards: white with a thin outline ---------- */
.value-grid { gap: 20px; }
.value-item { text-align: left; background: #fff; border: var(--hair); border-radius: var(--radius); padding: 30px 28px; }
.value-icon { width: 48px; height: 48px; margin: 0 0 20px; background: var(--tint-soft); color: var(--ink); font-size: 1.3rem; }
.value-item h3 { font-size: 1.25rem; }
.value-item p { color: var(--ink-muted); font-size: 1rem; line-height: 1.6; }

.process-card, .testimonial, .post-card, .resource-block, .calculator-wrap, body .contact-form, body .success-msg { background: #fff; border: var(--hair); }
.process-card:hover, .testimonial:hover { transform: none; border-color: var(--cobalt); }
.process-card .step-num { position: static; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-soft); color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; margin-bottom: 18px; }
.process-card .step-icon { background: transparent; border: var(--line); color: var(--ink); width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; }
.process-card p { color: var(--ink-muted); }

.testimonial { border-radius: var(--radius); }
.testimonial::before { color: var(--coral); }
.testimonial-quote { color: var(--ink); }
.testimonial-author { border-top: var(--hair); }
.testimonial-avatar { background: var(--tint-soft); color: var(--ink); }
.testimonial.placeholder { background: #fff; }

.feature-photo { background-color: var(--tint-soft); border: var(--line); border-radius: var(--radius-lg); }
.feature-photo .photo-tag { background: #fff; color: var(--ink); border: var(--line); backdrop-filter: none; }

/* Rachel band: white, photo as an outlined card */
.rachel-band { background: var(--paper); border-top: var(--hair); max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 104px) 24px; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: visible; }
.rachel-band-photo { border-radius: var(--radius-lg); border: var(--line); min-height: 520px; }
.rachel-band-content { padding: 0; color: var(--ink); }
.rachel-band-content h3 { color: var(--ink); font-size: clamp(2rem, 1rem + 3vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.04; }
.rachel-band-content h3 em { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
.rachel-band-content p { color: var(--ink-muted); }
.rachel-band-content .btn { background: var(--cobalt); color: #fff; align-self: flex-start; }
.rachel-band-content .btn:hover { background: var(--coral); color: var(--cobalt); }
@media (max-width: 800px) {
  .rachel-band { grid-template-columns: minmax(0, 1fr); }
  .rachel-band-photo { min-height: 380px; }
  .rachel-band-content { padding: 0; }
  .rachel-band-content h3 { font-size: 2rem; }
}

/* Pathway cards: photo on top, white panel below, thin outline */
.pathway-card { flex-direction: column; align-items: stretch; min-height: 0; color: var(--ink); background: #fff; border: var(--line); border-radius: var(--radius-lg); }
.pathway-card:hover { transform: none; color: var(--ink); }
.pathway-card .pw-bg { position: relative; inset: auto; aspect-ratio: 16 / 10; border-bottom: var(--line); }
.pathway-card:hover .pw-bg { transform: none; }
.pathway-card .pw-bg::after { display: none; }
.pathway-card .pw-content { padding: 28px 28px 32px; }
.pathway-card .pw-eyebrow { color: var(--ink); background: var(--tint-soft); padding: 6px 12px; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.14em; }
.pathway-card h3 { color: var(--ink); letter-spacing: -0.025em; }
.pathway-card p { color: var(--ink-muted); }
.pathway-card .arrow-link { color: var(--ink); background: var(--coral); padding: 12px 22px; border-radius: 999px; }
.pw-buying.pw-bg { background-image: url("https://images.unsplash.com/photo-1604186293649-8e96122e0474?w=1600&q=80&auto=format&fit=crop"); background-color: var(--tint-soft); }
.pw-selling.pw-bg { background-image: url("https://images.unsplash.com/photo-1586986422389-e500f0ed9f65?w=1600&q=80&auto=format&fit=crop"); background-color: var(--tint-soft); }

/* Area chips: pills with a hairline */
.area-chip { background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 14px 12px; color: var(--ink); }
.area-chip:hover { transform: none; background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

/* Promise list + check circles */
.promise-item { border-bottom: var(--hair); color: var(--ink); }
.promise-check { background: var(--tint-soft); color: var(--ink); }

/* FAQ: hairline rows, + / − in a ring */
.faq-list { border-top: var(--line); }
.faq-item { border-bottom: var(--hair); }
.faq-item summary { color: var(--ink); padding-right: 52px; letter-spacing: -0.01em; }
.faq-item summary::after { width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; color: var(--ink); line-height: 1; }
.faq-item[open] summary, .faq-item summary:hover { color: var(--ink); }
.faq-item[open] summary::after { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.faq-answer { color: var(--ink-muted); }

/* ---------- Calculator ---------- */
.calculator-wrap { border-radius: var(--radius-lg); }
.calc-results { background: var(--tint-soft); }
.calc-value, .calc-stat-value, .calc-field label { color: var(--ink); }
.calc-input-wrap input, .calc-field select { border: 1px solid var(--rule); border-radius: 12px; min-height: 48px; }
.calc-input-wrap input:focus, .calc-field select:focus { border-color: var(--cobalt); }

/* ---------- Market stats ---------- */
.stats-grid { gap: 16px; }
.stat-card { background: #fff; border: var(--line); border-top: var(--line); border-radius: var(--radius); }
.stat-card .stat-label { display: inline-block; background: var(--tint-soft); color: var(--ink); padding: 5px 10px; border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.12em; margin-bottom: 14px; }
.stat-card .stat-value { color: var(--ink); letter-spacing: -0.025em; }
.stat-card .stat-sub { color: var(--ink-muted); }
.stat-card .stat-bar { background: #eef0f3; height: 6px; }
.stat-card .stat-bar-fill { background: var(--coral); }
.stat-card .stat-trend, .stat-card .stat-trend.down { color: var(--ink); font-weight: 600; }
.stats-source { color: var(--ink-muted); font-style: normal; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.7; }
.chart-block { background: #fff; border: var(--line); border-radius: var(--radius); }
.chart-block .chart-title { color: var(--ink); }
.bar-chart .bar-track { background: #eef0f3; border-radius: 4px; }
.bar-chart .bar-fill { background: var(--seaglass); border-radius: 4px; }
.bar-chart .bar-fill.highlight { background: var(--coral); }
.bar-chart .bar-label, .bar-chart .bar-value { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Quick capture form ---------- */
.quick-capture { background: var(--paper); border-top: var(--hair); }
.quick-capture h3 { color: var(--ink); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.025em; }
.quick-form input { border: 1px solid var(--rule); border-radius: 12px; min-height: 48px; }
.quick-form input:focus { border-color: var(--cobalt); }

/* ---------- Sign-off band: full-width coral, big headline, white button ---------- */
.cta-band { background: var(--coral); color: var(--cobalt); padding: clamp(72px, 10vw, 128px) 0; border-top: 0; }
.cta-band .container::before {
  content: ""; display: block; width: 96px; height: 76px; margin: 0 auto 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 76'%3E%3Cg fill='%23fff' stroke='%23050e3d' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 36 L48 8 L82 36'/%3E%3Crect x='20' y='32' width='56' height='42'/%3E%3Crect x='42' y='50' width='12' height='24'/%3E%3Crect x='27' y='42' width='10' height='9'/%3E%3Crect x='59' y='42' width='10' height='9'/%3E%3C/g%3E%3Cpath d='M2 75 H94' stroke='%23050e3d' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cta-band h2 { color: var(--cobalt); font-size: clamp(2.4rem, 1rem + 4.6vw, 4.4rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 16ch; margin-left: auto; margin-right: auto; }
.cta-band p { color: var(--cobalt); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); }
.cta-band .eyebrow { background: #fff; color: var(--cobalt) !important; }
.cta-band .btn-accent, .cta-band .btn-primary { background: #fff; color: var(--cobalt); border-color: #fff; }
.cta-band .btn-accent:hover, .cta-band .btn-primary:hover { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.cta-band .btn-ghost { background: transparent; color: var(--cobalt); border: 1.5px solid var(--cobalt); }
.cta-band .btn-ghost:hover { background: var(--cobalt); color: #fff; }
.cta-band a:not(.btn) { color: var(--cobalt); text-decoration: underline; }

/* ---------- Footer ---------- */
footer { background: var(--cobalt); }
footer a:hover { color: var(--seaglass); }

/* ---------- Phone: sticky bottom bar, white with a hairline; Contact as a coral pill ---------- */
@media (max-width: 800px) {
  .mobile-tabbar { background: #fff; border-top: var(--hair); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 2px; }
  .mobile-tabbar a { color: var(--ink-muted); border-radius: 999px; }
  .mobile-tabbar a.active { color: var(--ink); background: var(--tint-soft); }
  .mobile-tabbar a[href$="contact.html"], .mobile-tabbar a[href="/contact"] { flex: 1.25; flex-direction: row; justify-content: center; gap: 6px; min-height: 46px; background: var(--coral); color: var(--cobalt); font-size: 13px; }
  .mobile-tabbar a[href$="contact.html"].active, .mobile-tabbar a[href="/contact"].active { background: var(--coral); }
  .mobile-tabbar a[href$="contact.html"] .icon, .mobile-tabbar a[href="/contact"] .icon { font-size: 15px; }
  body { padding-bottom: 80px; }
}

/* ---------- Subtle fade-in on scroll (browsers that support it; content is never hidden otherwise) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head, .value-item, .process-card, .testimonial, .stat-card, .chart-block, .feature-row > *,
    .pathway-card, .faq-list, .post-card, .resource-block, .area-grid, .promises-list, .rachel-band-content,
    .quick-capture-inner, .cta-band .container, .author-box, .quick-answer, .rachel-note, .hero-art {
      animation: rn-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 150px;
    }
    @keyframes rn-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}


/* ---------- Line icons from Rachel's client gifts (coasters + keychain) ---------- */
.lic { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.value-icon .lic { width: 26px; height: 26px; }
.value-icon { color: var(--ink); }
.la-door { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; }
.la-door.hot { fill: #fff; }
.sec-icon { display: block; width: 44px; height: 44px; margin: 0 auto 18px; color: var(--ink); }
.section-head.left .sec-icon { margin-left: 0; }
.sec-icon .lic { width: 44px; height: 44px; stroke-width: 1.6; }
.pw-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: var(--line); color: var(--ink); margin-right: 10px; vertical-align: middle; }
.pw-icon .lic { width: 24px; height: 24px; }

/* Coaster band: slate tiles with white line icons, like her coaster set */
.stats-strip.coaster-band { background: var(--slate) !important; border-top: 0 !important; padding: clamp(48px, 7vw, 88px) 0 !important; }
.coaster-band .container { gap: 18px; }
.coaster-band .stat-block.coaster {
  aspect-ratio: 1 / 1; justify-content: center; padding: 18px;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 14px;
  color: #fff;
}
.coaster-band .stat-block .big { color: #fff; min-height: 0; margin-bottom: 6px; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); }
.coaster-band .stat-block .label { color: rgba(255,255,255,0.92); margin-top: 6px; font-size: 0.72rem; line-height: 1.5; }
.coaster-icon { display: block; width: 40px; height: 40px; color: #fff; margin: 0 auto 14px; }
.coaster-icon .lic { width: 40px; height: 40px; stroke-width: 1.6; }
.coaster-band .coaster-logo .real-img { width: 86%; height: auto; max-height: none; }
@media (max-width: 800px) {
  .coaster-band .container { grid-template-columns: 1fr 1fr; gap: 12px; }
  .coaster-band .stat-block.coaster { padding: 12px; }
  .coaster-icon, .coaster-icon .lic { width: 32px; height: 32px; margin-bottom: 10px; }
  .coaster-band .stat-block .big { font-size: 1.35rem; white-space: normal; }
  .coaster-band .stat-block .label { font-size: 0.64rem; letter-spacing: 0.08em; }
}

/* One house-shaped badge in seaglass, like her keychain (quick-hello card) */
.quick-capture-inner > div:first-child::before {
  content: ""; display: block; width: 76px; height: 84px; margin-bottom: 22px;
  background-color: var(--seaglass);
  clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%);
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23050e3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='24' r='8'/%3E%3Cpath d='M23 24 H42 M35 24 V30 M40 24 V29'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 50% 68%; background-size: 46px;
}

/* Sign-off band house: white line on coral, coaster proportions */
.cta-band .container::before {
  width: 84px; height: 84px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22 L24 8 L40 22 V40 H8 Z'/%3E%3Cpath d='M19 40 V29 H29 V40'/%3E%3C/g%3E%3C/svg%3E");
}

/* RN | REAL lockup in the footer, as on the coasters */
.foot-lockup { width: 170px; height: auto; margin: 4px 0 14px; opacity: 0.95; }

/* Phone tab bar line icons */
.mobile-tabbar .icon .lic { width: 21px; height: 21px; stroke-width: 1.8; }
.mobile-tabbar a[href$="contact.html"] .icon .lic, .mobile-tabbar a[href="/contact"] .icon .lic { width: 17px; height: 17px; }

.hero-art { overflow: hidden; }
@media (max-width: 800px) {
  .nav-cta, .nav-links a.nav-cta { white-space: nowrap; padding: 10px 18px; font-size: 0.88rem; }
  .eyebrow { border-radius: 14px; letter-spacing: 0.1em; line-height: 1.5; }
}


/* ---------- Back to top (assets/back-to-top.js) ---------- */
.to-top {
  position: fixed; right: 18px; bottom: 24px; z-index: 940;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cobalt); color: #fff; border: 1px solid #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--coral); color: var(--cobalt); border-color: var(--coral); }
.to-top:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
@media (max-width: 800px) { .to-top { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }

/* ===== CURRENT HEADSHOT · Nov 2026 (800px source: never wider than 400px) ===== */
.feature-photo.photo-headshot { aspect-ratio: 1 / 1; min-height: 0; width: 100%; max-width: 400px; margin-inline: auto; background: var(--seaglass); }
.feature-photo.photo-headshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meet-strip .avatar { background-position: center 30%; }


/* ===== JOIN ME AT REAL BROKER · Nov 2026 (index.html #join) ===== */
.join-band { background: var(--seaglass) !important; border-top: 0 !important; color: var(--cobalt); }
.join-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.join-media { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.join-photo { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--cobalt); background: #fff; }
.join-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.join-brand { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--cobalt); border-radius: 999px; padding: 10px 20px 10px 16px; }
.join-brand img { width: 84px; height: auto; display: block; }
.join-brand span { font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--cobalt); white-space: nowrap; border-left: 1px solid var(--rule); padding-left: 12px; }
.join-brand small { display: block; font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600; color: var(--slate); }
.join-band .eyebrow { background: #fff; color: var(--cobalt) !important; }
.join-copy h2 { color: var(--cobalt); margin-bottom: 0.4em; }
.join-copy p { color: var(--cobalt); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1em; max-width: 56ch; }
.join-copy .join-lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.join-lgr a, .join-alt a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 28px 0 18px; }
.join-actions .btn-accent { border-color: var(--coral); }
.join-actions .btn-accent:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.join-copy .join-note { margin: 0; font-size: 0.98rem; max-width: 30ch; }
.join-copy .join-alt { margin: 0; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.nav-links a.nav-join { display: none; }
@media (min-width: 1100px) { .nav-links a.nav-join { display: inline; } }
@media (max-width: 900px) {
  .join-row { grid-template-columns: 1fr; gap: 28px; }
  .join-media { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .join-photo { width: 132px; max-width: 132px; flex: none; }
  .join-brand { flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 16px; padding: 12px 16px; min-width: 0; }
  .join-brand img { width: 72px; }
  .join-brand span { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 8px; white-space: normal; }
  .join-actions { flex-direction: column; align-items: stretch; }
  .join-actions .btn { width: 100%; }
  .join-copy .join-note { max-width: none; text-align: center; }
}

/* ---------- Let's Get Real page (Nov 2026) ---------- */
.lgr-by { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; flex-wrap: wrap; }
.lgr-by img { width: 92px; height: auto; }
.lgr-by span { font-size: 0.95rem; font-weight: 600; color: var(--cobalt); border-left: 1px solid var(--rule); padding-left: 14px; }
.lgr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.lgr-jump a { font-size: 0.9rem; font-weight: 600; color: var(--cobalt); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.lgr-jump a:hover { border-color: var(--cobalt); text-decoration: none; }
.lgr-section { padding: 80px 0; }
.lgr-section h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.15; color: var(--cobalt); margin: 0 0 14px; }
.lgr-tint { background: var(--tint-soft, rgba(191, 221, 219, 0.35)); }
.lgr-who { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center; max-width: 960px; }
.lgr-photo { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.lgr-who p, .lgr-plan p, .lgr-ra { color: var(--cobalt); font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.lgr-lead { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem) !important; font-weight: 500; }
.lgr-sub { color: var(--slate); font-size: 1.02rem; margin: 0 0 28px; }
.lgr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lgr-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.lgr-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--cobalt); margin: 0; }
.lgr-card p { margin: 0; color: var(--cobalt); font-size: 0.98rem; line-height: 1.55; }
.lgr-card p.lgr-rhythm { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.lgr-tag { align-self: flex-start; margin-top: 8px; font-size: 0.78rem; font-weight: 600; color: var(--cobalt); background: var(--seaglass); border-radius: 999px; padding: 4px 10px; }
.lgr-ra { margin: 28px 0 0; font-size: 0.98rem !important; }
.lgr-plan { max-width: 860px; }
.lgr-plan h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--cobalt); margin: 32px 0 4px; }
.lgr-nn { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lgr-nn li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; }
.lgr-nn h4 { margin: 0 0 2px; font-size: 1.05rem; color: var(--cobalt); }
.lgr-nn p { margin: 0; font-size: 0.98rem; }
.lgr-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--seaglass); display: grid; place-items: center; }
.lgr-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lgr-more { margin-top: 22px; }
.lgr-plan p.lgr-motto { margin-top: 18px; font-weight: 700; letter-spacing: 0.16em; font-size: 0.85rem; color: var(--slate); }
.cta-band .lgr-contact { margin-top: 22px; font-size: 1rem; }
.cta-band .lgr-contact a { color: inherit; text-decoration: underline; }
@media (max-width: 900px) { .lgr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .lgr-section { padding: 60px 0; }
  .lgr-who { grid-template-columns: 1fr; gap: 24px; }
  .lgr-photo { width: 160px; }
  .lgr-cards { grid-template-columns: 1fr; }
  .lgr-hero .btn-row .btn { width: 100%; }
  .lgr-by span { border-left: 0; padding-left: 0; flex-basis: 100%; }
}
.blog-hero.lgr-hero .container { max-width: var(--maxw); }
.lgr-hero .lead { max-width: 46ch; }