/* ==========================================================
     COLOR & TYPOGRAPHY TOKENS
     - Cream background, deep teal accent, warm gold detailing
     ========================================================== */
  :root {
    --cream: #FBF8F2;
    --cream-deep: #F1EADC;
    --teal: #2C5F5D;
    --teal-deep: #1F4847;
    --teal-soft: #88A8A2;
    --gold: #B89B6F;
    --charcoal: #2A2A2A;
    --charcoal-soft: #4A4A4A;
    --white: #FFFFFF;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --hand: 'Caveat', cursive;
    --max-width: 1200px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--sans);
    color: var(--charcoal);
    background: var(--cream);
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.15;
  }

  a { color: inherit; text-decoration: none; transition: color .3s ease; }

  img { max-width: 100%; display: block; }

  .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ==========================================================
     TOP UTILITY BAR (phone / email / brokerage)
     ========================================================== */
  /* ==========================================================
     ACCESSIBILITY: skip-to-main-content link and focus indicators
     ========================================================== */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 9999;
    background: var(--teal);
    color: var(--white);
    padding: 12px 22px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 2px;
    transition: top .2s ease;
  }
  .skip-link:focus {
    top: 12px;
    outline: 3px solid var(--gold);
    outline-offset: 2px;
  }
  /* Strong, visible focus styles for all interactive elements (keyboard users) */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Hide focus ring on mouse clicks but keep for keyboard navigation */
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible) {
    outline: none;
  }

  .topbar {
    background: var(--cream-deep);
    color: var(--teal);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 9px 40px;
    border-bottom: 1px solid rgba(44,95,93,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    transition: transform .35s ease;
  }
  .topbar a { color: inherit; }
  .topbar a:hover { color: var(--gold); }
  .topbar .topbar-left,
  .topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .topbar .topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }
  .topbar svg { width: 14px; height: 14px; }
  .topbar .divider {
    width: 1px;
    height: 14px;
    background: rgba(44,95,93,.3);
  }
  .topbar.hidden { transform: translateY(-100%); }

  /* ==========================================================
     HEADER (sticky, becomes opaque on scroll)
     ========================================================== */
  header {
    position: fixed;
    top: 38px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 22px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .4s ease, padding .3s ease, box-shadow .3s ease, top .35s ease;
  }
  header.scrolled {
    background: var(--cream);
    padding: 18px 40px;
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
    top: 0;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    height: 96px;
    transition: height .3s ease;
  }
  .logo img {
    height: 100%;
    width: auto;
    display: block;
    transition: opacity .4s ease;
  }
  .logo img.logo-light { display: block; }
  .logo img.logo-dark  { display: none; }
  header.scrolled .logo { height: 70px; }
  header.scrolled .logo img.logo-light { display: none; }
  header.scrolled .logo img.logo-dark  { display: block; }

  nav ul {
    list-style: none;
    display: flex;
    gap: 38px;
    align-items: center;
  }
  nav a {
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 500;
    transition: color .3s ease;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }
  header.scrolled nav a {
    color: var(--charcoal);
    text-shadow: none;
  }
  nav a:hover { color: var(--gold); }

  .menu-toggle { display: none; background: none; border: 0; cursor: pointer; }

  /* When mobile nav is open, force dark links on cream */
  nav ul.open a {
    color: var(--charcoal) !important;
    text-shadow: none !important;
  }
  nav ul.open a:hover { color: var(--teal) !important; }

  /* ==========================================================
     HERO
     ========================================================== */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    color: var(--white);
    padding: 0 0 90px 0;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(135deg, rgba(31,72,71,.55) 0%, rgba(44,95,93,.40) 60%, rgba(184,155,111,.35) 100%),
      linear-gradient(180deg, #4a7b7a 0%, #2c5f5d 70%, #1f4847 100%);
    z-index: 0;
  }
  /* Decorative SVG layer evoking rolling vineyard hills */
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='g1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23000' stop-opacity='0'/><stop offset='100%' stop-color='%23000' stop-opacity='.45'/></linearGradient></defs><path fill='%231f4847' fill-opacity='.55' d='M0,560 C220,500 380,620 600,580 C820,540 1000,460 1200,500 C1320,524 1380,560 1440,540 L1440,800 L0,800 Z'/><path fill='%23163838' fill-opacity='.55' d='M0,640 C200,600 420,700 660,660 C880,624 1100,580 1280,620 C1360,638 1410,652 1440,648 L1440,800 L0,800 Z'/><rect width='1440' height='800' fill='url(%23g1)'/></svg>");
    background-size: cover;
    background-position: center;
    opacity: .9;
  }
  .hero-photo-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 140%;
    background-size: cover;
    background-position: center 8%;
    background-image: var(--hero-image, none);
    z-index: 1;
    filter: brightness(.82) saturate(1);
    transform: translate3d(0,0,0);
  }
  .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.35) 65%, rgba(0,0,0,.55) 100%);
    z-index: 2;
  }
  .hero-content {
    position: relative;
    z-index: 3;
    padding: 0 64px;
    max-width: 760px;
    transform: translateY(20px);
    opacity: 0;
    animation: heroIn 1.4s ease .3s forwards;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
  }
  @keyframes heroIn { to { transform: translateY(0); opacity: 1; } }

  .hero-eyebrow {
    font-family: var(--hand);
    font-size: 30px;
    color: #FBF8F2;
    margin-bottom: 6px;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 4px 18px rgba(0,0,0,.5);
  }
  .hero h1 {
    font-size: clamp(52px, 8.5vw, 110px);
    font-weight: 400;
    color: var(--white);
    letter-spacing: -1px;
    line-height: .95;
    text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45);
  }
  .hero h1 .ital {
    font-style: italic;
    font-weight: 300;
    color: #FBF8F2;
    text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45);
  }
  .hero-divider {
    width: 64px;
    height: 1px;
    background: var(--gold);
    margin: 22px 0;
  }
  .hero-tagline {
    font-family: var(--serif);
    font-size: clamp(16px, 1.9vw, 22px);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
  }
  .hero-license {
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }
  .hero-scroll {
    position: absolute;
    bottom: 40px;
    right: 50px;
    z-index: 3;
    color: var(--white);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .85;
    text-align: center;
  }
  .hero-scroll .line {
    display: block;
    width: 1px;
    height: 40px;
    background: var(--white);
    margin: 12px auto 0;
    animation: scrollLine 2s ease-in-out infinite;
    transform-origin: top;
  }
  @keyframes scrollLine {
    0%, 100% { transform: scaleY(1); opacity: .8; }
    50% { transform: scaleY(.4); opacity: .3; }
  }

  /* ==========================================================
     SECTION DEFAULTS
     ========================================================== */
  section { padding: 120px 0; position: relative; }
  .section-eyebrow {
    font-family: var(--hand);
    font-size: 24px;
    color: var(--teal);
    margin-bottom: 8px;
    letter-spacing: .5px;
  }
  .section-title {
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 400;
    margin-bottom: 24px;
    line-height: 1.05;
  }
  .section-title .ital { font-style: italic; color: var(--teal); font-weight: 300; }
  .section-intro {
    font-size: 17px;
    color: var(--charcoal-soft);
    max-width: 640px;
    margin: 0 auto 60px;
    line-height: 1.7;
  }
  .center { text-align: center; }

  /* Reveal on scroll */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ==========================================================
     ABOUT
     ========================================================== */
  .about {
    background: var(--white);
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--cream-deep);
    overflow: hidden;
    box-shadow: 24px 24px 0 0 var(--teal);
  }
  .about-photo .photo-fill {
    position: absolute;
    top: -12%; bottom: -12%; left: 0; right: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--about-image, none);
  }
  .about-photo .placeholder-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--teal);
    text-align: center;
    padding: 40px;
  }
  .about-photo .placeholder-label .initials {
    font-family: var(--serif);
    font-size: 96px;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    color: var(--teal);
  }
  .about-photo .placeholder-label .pl-sub {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal-soft);
  }
  .about-text h2 { margin-bottom: 28px; }
  .about-text p {
    font-size: 17px;
    color: var(--charcoal-soft);
    margin-bottom: 22px;
    line-height: 1.85;
  }
  .about-text p:first-of-type::first-letter {
    font-family: var(--serif);
    font-size: 64px;
    color: var(--teal);
    float: left;
    line-height: 1;
    padding-right: 12px;
    padding-top: 6px;
    font-style: italic;
  }

  .btn {
    display: inline-block;
    padding: 16px 40px;
    background: var(--teal);
    color: var(--white);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--teal);
    transition: all .35s ease;
    cursor: pointer;
    margin-top: 16px;
  }
  .btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31,72,71,.25); }
  .btn-outline {
    background: transparent;
    color: var(--teal);
    border-color: var(--teal);
  }
  .btn-outline:hover { background: var(--teal); color: var(--white); }
  .btn-light { background: var(--white); color: var(--teal); border-color: var(--white); }
  .btn-light:hover { background: transparent; color: var(--white); border-color: var(--white); }

  /* ==========================================================
     SERVICES (3-column)
     ========================================================== */
  .services { background: var(--cream); }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 60px;
  }
  .service-card {
    background: var(--cream);
    padding: 56px 36px 44px;
    text-align: center;
    border: 1px solid var(--cream-deep);
    transition: transform .4s ease, box-shadow .4s ease;
    position: relative;
    overflow: hidden;
  }
  .service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
  }
  .service-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(31,72,71,.10); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-icon {
    width: 64px; height: 64px;
    margin: 0 auto 24px;
    color: var(--teal);
  }
  .service-card h3 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 14px;
    color: var(--charcoal);
  }
  .service-card p {
    color: var(--charcoal-soft);
    margin-bottom: 24px;
    font-size: 15px;
  }
  .service-card a {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom: 1px solid var(--teal);
    padding-bottom: 4px;
    font-weight: 500;
  }
  .service-card a:hover { color: var(--gold); border-color: var(--gold); }

  /* ==========================================================
     AREAS
     ========================================================== */
  .areas { background: var(--white); }
  .areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 60px;
  }
  .area-card {
    text-align: center;
    cursor: pointer;
    transition: transform .4s ease;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .area-card:hover { transform: translateY(-6px); }
  .area-bg {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) contrast(1.04);
    transition: filter .4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }
  .area-card:hover .area-bg { filter: saturate(1.18) contrast(1.06); }
  .area-card h3 {
    color: var(--white);
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    margin-top: 22px;
    text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.45);
  }

  /* Local photos in the site folder, with SVG illustration as fallback if photo fails */
  .bg-santa-rosa {
    background-image:
      url("santa-rosa.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23f3c98c'/><stop offset='35%25' stop-color='%23dba36e'/><stop offset='70%25' stop-color='%23a17a5d'/><stop offset='100%25' stop-color='%235a6e63'/></linearGradient><linearGradient id='hill1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23607a6e'/><stop offset='100%25' stop-color='%232c4744'/></linearGradient><linearGradient id='hill2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23496961'/><stop offset='100%25' stop-color='%231a2f2c'/></linearGradient></defs><rect width='600' height='800' fill='url(%23sky)'/><circle cx='460' cy='180' r='42' fill='%23ffe4b8' fill-opacity='.85'/><path fill='url(%23hill1)' d='M0,440 C100,410 200,470 320,440 C420,418 510,440 600,420 L600,800 L0,800 Z'/><g stroke='%231f4036' stroke-width='1.2' stroke-opacity='.55'><path d='M40,520 L80,560'/><path d='M90,510 L130,550'/><path d='M140,500 L180,540'/><path d='M190,495 L230,535'/><path d='M240,490 L280,530'/><path d='M290,495 L330,535'/><path d='M340,500 L380,540'/><path d='M390,510 L430,550'/><path d='M440,520 L480,560'/><path d='M490,530 L530,570'/></g><path fill='url(%23hill2)' d='M0,580 C140,540 300,620 460,580 C520,564 570,572 600,568 L600,800 L0,800 Z'/><g stroke='%23142823' stroke-width='1' stroke-opacity='.5'><path d='M60,650 L100,690'/><path d='M120,640 L160,680'/><path d='M180,635 L220,675'/><path d='M240,635 L280,675'/><path d='M300,640 L340,680'/><path d='M360,648 L400,688'/><path d='M420,655 L460,695'/><path d='M480,665 L520,705'/></g></svg>");
    background-size: cover, cover;
    background-position: center center, center center;
  }
  .bg-windsor {
    background-image:
      url("windsor.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='wsky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23a9c8c5'/><stop offset='50%25' stop-color='%237ea49e'/><stop offset='100%25' stop-color='%234d7570'/></linearGradient><linearGradient id='wgrass' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23597a4f'/><stop offset='100%25' stop-color='%232f4b3a'/></linearGradient><radialGradient id='wcanopy' cx='.5' cy='.6' r='.6'><stop offset='0%25' stop-color='%23446b3e'/><stop offset='100%25' stop-color='%231e3622'/></radialGradient></defs><rect width='600' height='800' fill='url(%23wsky)'/><g fill='%23ffffff' fill-opacity='.5'><ellipse cx='120' cy='160' rx='60' ry='14'/><ellipse cx='340' cy='110' rx='80' ry='12'/><ellipse cx='510' cy='190' rx='50' ry='10'/></g><path fill='url(%23wgrass)' d='M0,550 C150,530 320,560 480,540 C540,532 580,536 600,534 L600,800 L0,800 Z'/><g><rect x='118' y='560' width='4' height='80' fill='%23241a14'/><circle cx='120' cy='540' r='80' fill='url(%23wcanopy)'/><circle cx='100' cy='520' r='40' fill='%2350784a' fill-opacity='.7'/><circle cx='150' cy='510' r='44' fill='%2350784a' fill-opacity='.65'/></g><g><rect x='448' y='580' width='4' height='70' fill='%23241a14'/><circle cx='450' cy='560' r='62' fill='url(%23wcanopy)'/><circle cx='430' cy='540' r='30' fill='%2350784a' fill-opacity='.7'/><circle cx='470' cy='540' r='34' fill='%2350784a' fill-opacity='.65'/></g><g transform='translate(290,600)'><rect x='-2' y='0' width='4' height='40' fill='%231f3a2d'/><polygon points='-30,0 30,0 24,-22 -24,-22' fill='%23b89b6f'/><rect x='-22' y='-22' width='44' height='4' fill='%23a08660'/><line x1='-20' y1='-22' x2='-20' y2='40' stroke='%231f3a2d' stroke-width='2'/><line x1='-10' y1='-22' x2='-10' y2='40' stroke='%231f3a2d' stroke-width='2'/><line x1='0' y1='-22' x2='0' y2='40' stroke='%231f3a2d' stroke-width='2'/><line x1='10' y1='-22' x2='10' y2='40' stroke='%231f3a2d' stroke-width='2'/><line x1='20' y1='-22' x2='20' y2='40' stroke='%231f3a2d' stroke-width='2'/></g></svg>");
    background-size: cover, cover;
    background-position: center center, center center;
  }
  /* Shared SVG placeholder for cities that don't have a photo yet.
     Drop a {slug}.jpg into the site folder to override. */
  .bg-healdsburg, .bg-sebastopol, .bg-sonoma, .bg-rohnert-park, .bg-cotati, .bg-cloverdale {
    background-size: cover, cover;
    background-position: center center, center center;
  }
  .bg-healdsburg {
    background-image:
      url("healdsburg.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='hsky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23f0e1c8'/><stop offset='60%25' stop-color='%23dcc7a3'/><stop offset='100%25' stop-color='%23a87f5a'/></linearGradient><linearGradient id='hhill' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%237b9c84'/><stop offset='100%25' stop-color='%23445e4f'/></linearGradient></defs><rect width='600' height='450' fill='url(%23hsky)'/><circle cx='460' cy='130' r='38' fill='%23ffe9c4' fill-opacity='.85'/><path fill='url(%23hhill)' d='M0,260 C120,220 260,300 400,260 C490,232 560,260 600,250 L600,450 L0,450 Z'/><path fill='%233d5b4c' fill-opacity='.65' d='M0,340 C160,310 300,360 460,330 C520,318 570,322 600,318 L600,450 L0,450 Z'/></svg>");
  }
  .bg-sebastopol {
    background-image:
      url("sebastopol.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='ssky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23dceae3'/><stop offset='60%25' stop-color='%23b9d2c2'/><stop offset='100%25' stop-color='%2386a48e'/></linearGradient><linearGradient id='shill' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23769b7c'/><stop offset='100%25' stop-color='%23435d44'/></linearGradient></defs><rect width='600' height='450' fill='url(%23ssky)'/><path fill='url(%23shill)' d='M0,250 C120,210 240,290 380,250 C470,222 540,250 600,240 L600,450 L0,450 Z'/><g fill='%23578256' fill-opacity='.7'><circle cx='120' cy='340' r='28'/><circle cx='220' cy='335' r='25'/><circle cx='320' cy='340' r='30'/><circle cx='420' cy='335' r='27'/></g></svg>");
  }
  .bg-sonoma {
    background-image:
      url("sonoma.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='msky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ece6da'/><stop offset='60%25' stop-color='%23d6cab1'/><stop offset='100%25' stop-color='%239d8b6c'/></linearGradient></defs><rect width='600' height='450' fill='url(%23msky)'/><rect x='190' y='270' width='220' height='100' fill='%238a6f5a'/><polygon points='190,270 300,200 410,270' fill='%23624e3f'/><rect x='240' y='310' width='30' height='60' fill='%23362b22'/><rect x='330' y='300' width='40' height='30' fill='%23d4c5a4'/><path fill='%237f8c6d' d='M0,360 C160,340 300,380 600,360 L600,450 L0,450 Z'/></svg>");
  }
  .bg-rohnert-park {
    background-image:
      url("rohnert-park.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='rsky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23d6e2e0'/><stop offset='60%25' stop-color='%23afc6c2'/><stop offset='100%25' stop-color='%23748d88'/></linearGradient><linearGradient id='rhill' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%2389a594'/><stop offset='100%25' stop-color='%234e6957'/></linearGradient></defs><rect width='600' height='450' fill='url(%23rsky)'/><path fill='url(%23rhill)' d='M0,290 C120,260 280,320 420,290 C500,272 560,290 600,285 L600,450 L0,450 Z'/></svg>");
  }
  .bg-cotati {
    background-image:
      url("cotati.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='ctsky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23eee6d3'/><stop offset='60%25' stop-color='%23d4c4a3'/><stop offset='100%25' stop-color='%23998468'/></linearGradient></defs><rect width='600' height='450' fill='url(%23ctsky)'/><circle cx='480' cy='110' r='42' fill='%23ffe9c4' fill-opacity='.9'/><path fill='%23708a7a' fill-opacity='.85' d='M0,310 C140,280 280,330 420,300 C500,284 560,302 600,295 L600,450 L0,450 Z'/></svg>");
  }
  .bg-cloverdale {
    background-image:
      url("cloverdale.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='cdsky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23dee9e3'/><stop offset='60%25' stop-color='%23b6cabd'/><stop offset='100%25' stop-color='%237d9686'/></linearGradient><linearGradient id='cdhill' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%237ea286'/><stop offset='100%25' stop-color='%23435d49'/></linearGradient></defs><rect width='600' height='450' fill='url(%23cdsky)'/><path fill='url(%23cdhill)' d='M0,240 C100,200 220,280 360,240 C460,212 540,240 600,235 L600,450 L0,450 Z'/><path fill='%233a4f43' fill-opacity='.7' d='M0,320 C160,290 320,350 480,320 C540,310 580,316 600,314 L600,450 L0,450 Z'/></svg>");
  }

  .bg-petaluma {
    background-image:
      url("petaluma.jpg?v=1"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='psky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23e8c8a4'/><stop offset='40%25' stop-color='%23c79a78'/><stop offset='100%25' stop-color='%23704a40'/></linearGradient><linearGradient id='pbrick' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%238d4a3a'/><stop offset='100%25' stop-color='%23532a22'/></linearGradient><linearGradient id='pbrickL' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23a55c44'/><stop offset='100%25' stop-color='%23663329'/></linearGradient></defs><rect width='600' height='800' fill='url(%23psky)'/><g fill='%23ffe4c0' fill-opacity='.55'><ellipse cx='480' cy='140' rx='90' ry='14'/><ellipse cx='180' cy='200' rx='70' ry='10'/></g><circle cx='90' cy='180' r='30' fill='%23ffd9a6' fill-opacity='.85'/><g><rect x='80' y='420' width='80' height='240' fill='url(%23pbrickL)'/><rect x='80' y='420' width='80' height='4' fill='%23241410'/><g fill='%23ffeac0' fill-opacity='.4'><rect x='92' y='440' width='14' height='22'/><rect x='114' y='440' width='14' height='22'/><rect x='136' y='440' width='14' height='22'/><rect x='92' y='480' width='14' height='22'/><rect x='114' y='480' width='14' height='22'/><rect x='136' y='480' width='14' height='22'/><rect x='92' y='520' width='14' height='22'/><rect x='114' y='520' width='14' height='22'/><rect x='136' y='520' width='14' height='22'/></g></g><g><rect x='170' y='380' width='110' height='280' fill='url(%23pbrick)'/><rect x='170' y='380' width='110' height='6' fill='%231a0c08'/><polygon points='170,380 225,350 280,380' fill='%23241410'/><g fill='%23ffeac0' fill-opacity='.45'><rect x='184' y='400' width='16' height='26'/><rect x='208' y='400' width='16' height='26'/><rect x='232' y='400' width='16' height='26'/><rect x='256' y='400' width='16' height='26'/><rect x='184' y='440' width='16' height='26'/><rect x='208' y='440' width='16' height='26'/><rect x='232' y='440' width='16' height='26'/><rect x='256' y='440' width='16' height='26'/><rect x='184' y='480' width='16' height='26'/><rect x='208' y='480' width='16' height='26'/><rect x='232' y='480' width='16' height='26'/><rect x='256' y='480' width='16' height='26'/></g></g><g><rect x='290' y='420' width='90' height='240' fill='url(%23pbrickL)'/><rect x='290' y='420' width='90' height='4' fill='%23241410'/><g fill='%23ffeac0' fill-opacity='.4'><rect x='302' y='440' width='14' height='22'/><rect x='324' y='440' width='14' height='22'/><rect x='346' y='440' width='14' height='22'/><rect x='302' y='480' width='14' height='22'/><rect x='324' y='480' width='14' height='22'/><rect x='346' y='480' width='14' height='22'/><rect x='302' y='520' width='14' height='22'/><rect x='324' y='520' width='14' height='22'/><rect x='346' y='520' width='14' height='22'/></g></g><g><rect x='390' y='360' width='100' height='300' fill='url(%23pbrick)'/><rect x='390' y='360' width='100' height='6' fill='%231a0c08'/><g fill='%23ffeac0' fill-opacity='.45'><rect x='402' y='382' width='16' height='26'/><rect x='426' y='382' width='16' height='26'/><rect x='450' y='382' width='16' height='26'/><rect x='474' y='382' width='16' height='26'/><rect x='402' y='420' width='16' height='26'/><rect x='426' y='420' width='16' height='26'/><rect x='450' y='420' width='16' height='26'/><rect x='474' y='420' width='16' height='26'/><rect x='402' y='460' width='16' height='26'/><rect x='426' y='460' width='16' height='26'/><rect x='450' y='460' width='16' height='26'/><rect x='474' y='460' width='16' height='26'/><rect x='402' y='500' width='16' height='26'/><rect x='426' y='500' width='16' height='26'/><rect x='450' y='500' width='16' height='26'/><rect x='474' y='500' width='16' height='26'/></g></g><g><rect x='498' y='400' width='80' height='260' fill='url(%23pbrickL)'/><rect x='498' y='400' width='80' height='4' fill='%23241410'/><g fill='%23ffeac0' fill-opacity='.4'><rect x='510' y='420' width='14' height='22'/><rect x='532' y='420' width='14' height='22'/><rect x='554' y='420' width='14' height='22'/><rect x='510' y='460' width='14' height='22'/><rect x='532' y='460' width='14' height='22'/><rect x='554' y='460' width='14' height='22'/><rect x='510' y='500' width='14' height='22'/><rect x='532' y='500' width='14' height='22'/><rect x='554' y='500' width='14' height='22'/></g></g><rect x='0' y='660' width='600' height='140' fill='%231a0a08' fill-opacity='.5'/></svg>");
    background-size: cover, cover;
    background-position: center center, center center;
  }
  /* ==========================================================
     FULL-SECTION BACKGROUND PHOTO (with parallax)
     Section gets position:relative and overflow:hidden so the photo
     and overlay can absolute-position to fill it. Container content
     sits on top via z-index.
     ========================================================== */
  .has-bg-photo { position: relative; overflow: hidden; }
  .has-bg-photo > .container { position: relative; z-index: 2; }
  .section-bg-photo {
    position: absolute;
    top: -15%; bottom: -15%; left: 0; right: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--cream);
    z-index: 0;
    will-change: transform;
  }
  .section-bg-photo.contain {
    background-size: contain;
    background-position: center right 6%;
    top: 0; bottom: 0;
    background-color: var(--cream);
  }
  /* Very light overlay just for a touch of contrast where text sits */
  .section-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.18) 100%);
    z-index: 1;
  }
  /* Title and intro pick up a stronger text shadow so they stay readable
     against the now-mostly-bare photo. ALL title text is white on photo bgs
     (no teal italic accent) so it stays readable against any photo. */
  .has-bg-photo .section-eyebrow {
    color: #FBF8F2;
    text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.55);
  }
  .has-bg-photo .section-title {
    color: var(--white);
    font-size: clamp(48px, 7vw, 92px);
    text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 4px 22px rgba(0,0,0,.5);
  }
  .has-bg-photo .section-title .ital {
    color: var(--white);
    font-style: italic;
    font-weight: 300;
  }
  .has-bg-photo .section-intro {
    color: var(--white);
    font-size: 19px;
    max-width: 760px;
    text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.45);
  }
  /* Valuation info text gets a subtle "frosted glass" backdrop card so it reads
     cleanly against the bright kitchen photo. */
  .has-bg-photo .valuation-info {
    background: linear-gradient(180deg, rgba(20,40,40,.82) 0%, rgba(20,40,40,.88) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 42px 38px 36px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
  }
  .has-bg-photo .valuation-info > p {
    color: rgba(255,255,255,.95);
    text-shadow: none;
  }
  .has-bg-photo .valuation-list li {
    color: rgba(255,255,255,.95);
    border-bottom-color: rgba(255,255,255,.18);
    text-shadow: none;
  }
  .has-bg-photo .valuation-list li svg { color: var(--gold); }
  .has-bg-photo .valuation-list li strong { color: var(--white); }
  .has-bg-photo .valuation-aside {
    color: rgba(255,255,255,.85);
    text-shadow: none;
  }
  .has-bg-photo .areas-cta {
    color: var(--white);
    text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.45);
  }

  /* TCPA / CCPA-style consent line under forms */
  .form-consent {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--charcoal-soft);
    font-style: italic;
  }
  .form-consent a { color: var(--teal); border-bottom: 1px solid currentColor; }

  /* ==========================================================
     CITY DETAIL PAGES (cities/{slug}.html)
     ========================================================== */
  .city-hero {
    position: relative;
    height: 60vh;
    min-height: 460px;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
    padding-top: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    color: var(--white);
  }
  .city-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(.78);
  }
  .city-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.45) 100%);
    z-index: 1;
  }
  .city-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 70px;
    max-width: 900px;
  }
  .city-hero-content .section-eyebrow {
    color: var(--gold);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
  }
  .city-hero-content h1 {
    font-family: var(--serif);
    font-size: clamp(56px, 9vw, 110px);
    font-weight: 400;
    color: var(--white);
    line-height: 1.05;
    margin: 8px 0 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,.5), 0 4px 22px rgba(0,0,0,.45);
  }
  .city-deck {
    font-family: var(--serif);
    font-size: clamp(18px, 2vw, 22px);
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .city-body {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    padding: 90px 0 110px;
  }
  .city-content {
    max-width: 760px;
    margin: 0 auto;
  }
  .city-content h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 400;
    color: var(--charcoal);
    margin: 0 0 22px;
    line-height: 1.1;
  }
  .city-content h3 {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--teal);
    margin: 38px 0 12px;
  }
  .city-content p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--charcoal);
    margin-bottom: 16px;
  }
  .city-disclaimer {
    background: rgba(255,255,255,.6);
    border-left: 3px solid var(--teal);
    padding: 18px 22px;
    margin-bottom: 38px;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--charcoal-soft) !important;
  }
  .city-disclaimer em { color: var(--charcoal-soft); }
  .city-cta {
    margin-top: 60px;
    padding: 38px 38px 42px;
    background: var(--white);
    border: 1px solid var(--cream-deep);
    border-radius: 2px;
    box-shadow: 0 16px 40px rgba(31,72,71,.08);
    text-align: center;
  }
  .city-cta h3 {
    margin-top: 0;
    font-size: 30px;
    color: var(--charcoal);
  }
  .city-cta p {
    color: var(--charcoal-soft);
    margin-bottom: 22px;
  }
  .city-map {
    margin-top: 48px;
    background: var(--white);
    border: 1px solid var(--cream-deep);
    box-shadow: 0 8px 30px rgba(31,72,71,.06);
    overflow: hidden;
  }
  .city-map h3 {
    margin: 0;
    padding: 24px 28px 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--teal);
  }
  .city-map p {
    padding: 0 28px;
    font-size: 14px !important;
    color: var(--charcoal-soft) !important;
    margin: 6px 0 18px !important;
  }
  .city-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
  }

  .areas-cta {
    margin-top: 50px;
    text-align: center;
    color: var(--charcoal-soft);
    font-size: 16px;
    font-style: italic;
    font-family: var(--serif);
  }

  /* ==========================================================
     SEARCH SONOMA COUNTY HOMES
     ========================================================== */
  .search {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    color: var(--charcoal);
    text-align: center;
    position: relative;
  }
  .search .section-eyebrow { color: var(--teal); }
  .search .section-title { color: var(--charcoal); }
  .search .section-title .ital { color: var(--teal); }
  .search .section-intro { color: var(--charcoal-soft); }
  .search-panel {
    background: var(--white);
    color: var(--charcoal);
    padding: 44px 40px 36px;
    margin: 50px auto 0;
    max-width: 940px;
    text-align: left;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    position: relative;
  }
  .search-panel .corner-deco {
    position: absolute;
    width: 28px; height: 28px;
    border: 1px solid var(--gold);
  }
  .search-panel .corner-deco.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .search-panel .corner-deco.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .search-panel .corner-deco.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .search-panel .corner-deco.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
  .search-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .search-row {
    display: grid;
    gap: 16px;
    align-items: end;
  }
  .search-row-1 { grid-template-columns: 2fr 1fr 1fr; }
  .search-row-2 { grid-template-columns: 1fr 1fr 1.4fr 1fr; }
  .search-field label {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: 6px;
  }
  .search-field input,
  .search-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(44,95,93,.25);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--charcoal);
    transition: border-color .3s ease, background .3s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%232C5F5D' d='M0 0 L10 0 L5 6 Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }
  .search-field input {
    background-image: none;
  }
  .search-field input:focus,
  .search-field select:focus {
    outline: none;
    border-color: var(--teal);
    background-color: var(--white);
  }
  .search-button {
    background: var(--teal);
    color: var(--white);
    border: 1px solid var(--teal);
    padding: 14px 16px;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background .3s ease, transform .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    font-family: var(--sans);
  }
  .search-button:hover { background: var(--teal-deep); transform: translateY(-1px); }
  .search-button svg { width: 14px; height: 14px; }
  .search-helper {
    margin-top: 24px;
    font-size: 13px;
    color: var(--charcoal-soft);
    font-style: italic;
    text-align: center;
  }
  .search-helper a {
    color: var(--teal);
    border-bottom: 1px solid var(--teal);
    padding-bottom: 1px;
    font-style: normal;
    font-weight: 500;
  }
  .search-helper a:hover { color: var(--gold); border-color: var(--gold); }

  /* ==========================================================
     HOME VALUATION (free CMA request form for sellers)
     ========================================================== */
  .valuation {
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
    position: relative;
    overflow: hidden;
  }
  .valuation::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(44,95,93,.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .valuation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .valuation-info h2 { margin-bottom: 24px; }
  .valuation-info > p {
    color: var(--charcoal-soft);
    font-size: 17px;
    margin-bottom: 32px;
    line-height: 1.8;
  }
  .valuation-list {
    list-style: none;
    margin-bottom: 24px;
  }
  .valuation-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(44,95,93,.12);
    font-size: 15px;
    color: var(--charcoal);
    line-height: 1.55;
  }
  .valuation-list li:last-child { border-bottom: 0; }
  .valuation-list li svg {
    width: 20px; height: 20px;
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 3px;
  }
  .valuation-list li strong {
    color: var(--teal);
    font-weight: 600;
  }
  .valuation-aside {
    margin-top: 16px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--teal);
    border-left: 2px solid var(--gold);
    padding-left: 18px;
  }
  .valuation-form {
    background: var(--white);
    padding: 44px 40px;
    border: 1px solid rgba(44,95,93,.15);
    box-shadow: 0 24px 60px rgba(31,72,71,.08);
  }
  .valuation-form h3 {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .valuation-form .sub {
    color: var(--charcoal-soft);
    font-size: 14px;
    margin-bottom: 24px;
  }
  .valuation-form .btn { width: 100%; }
  .form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  /* ==========================================================
     PERSONAL / GET TO KNOW
     ========================================================== */
  .personal {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    color: var(--charcoal);
    position: relative;
    overflow: hidden;
  }
  .personal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><g stroke='%232C5F5D' stroke-opacity='.06' fill='none' stroke-width='1'><circle cx='100' cy='100' r='80'/><circle cx='700' cy='200' r='120'/><circle cx='200' cy='600' r='100'/><circle cx='650' cy='650' r='90'/></g></svg>");
    background-size: cover;
    opacity: .6;
  }
  .personal .container { position: relative; z-index: 2; }
  .personal .section-eyebrow { color: var(--teal); }
  .personal .section-title { color: var(--charcoal); }
  .personal .section-title .ital { color: var(--teal); }
  .personal .section-intro { color: var(--charcoal-soft); }
  .personal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 60px;
    max-width: 800px;
    margin: 0 auto;
  }
  .fact {
    padding: 22px 0;
    border-bottom: 1px solid rgba(44,95,93,.18);
  }
  .fact .label {
    font-family: var(--hand);
    font-size: 26px;
    color: var(--teal);
    display: block;
    margin-bottom: 4px;
  }
  .fact .value {
    font-size: 16px;
    color: var(--charcoal);
    font-weight: 300;
  }

  /* ==========================================================
     TESTIMONIALS
     ========================================================== */
  .testimonials {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    color: var(--charcoal);
  }
  /* The cream section IS the design here. The key photo floats as a decorative
     figure in the upper right corner against the soft cream field. */
  .testimonials .section-bg-overlay { display: none; }
  .testimonials .section-bg-photo.contain {
    background-color: transparent;
    background-position: top right -40px;
    background-size: auto 75%;
    opacity: .28;
    top: 0; bottom: auto;
    height: 100%;
    pointer-events: none;
    filter: brightness(1.05);
  }
  /* On a light cream field the title goes back to the regular charcoal/teal
     palette. Eyebrow stays gold, title charcoal, intro charcoal-soft. */
  .testimonials.has-bg-photo .section-eyebrow {
    color: var(--teal-deep);
    text-shadow: none;
    font-weight: 600;
  }
  .testimonials.has-bg-photo .section-title { color: var(--charcoal); text-shadow: none; }
  .testimonials.has-bg-photo .section-title .ital {
    color: var(--teal-deep);
    font-weight: 400;
  }
  .testimonials.has-bg-photo .section-intro { color: var(--charcoal); text-shadow: none; }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
  }
  .testimonial {
    background: var(--white);
    padding: 50px 36px 40px;
    position: relative;
    box-shadow: 0 12px 32px rgba(31,72,71,.08);
    border: 1px solid var(--cream-deep);
  }
  .testimonial .quote-mark {
    font-family: var(--serif);
    font-size: 96px;
    color: var(--teal-soft);
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 28px;
    font-style: italic;
  }
  .testimonial p {
    font-size: 16px;
    color: var(--charcoal);
    line-height: 1.85;
    font-style: italic;
    font-family: var(--serif);
    font-weight: 400;
    position: relative;
    z-index: 2;
    margin-top: 32px;
    margin-bottom: 24px;
  }
  .testimonial p strong {
    color: var(--teal);
    font-weight: 600;
    font-style: normal;
  }
  .testimonial .signature {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 500;
    border-top: 1px solid var(--cream-deep);
    padding-top: 18px;
  }
  .testimonial .signature .role {
    display: block;
    font-size: 12px;
    color: var(--charcoal-soft);
    letter-spacing: .5px;
    text-transform: none;
    margin-top: 2px;
    font-weight: 300;
  }

  /* ==========================================================
     BLOG PREVIEW
     ========================================================== */
  .blog-preview {
    background: var(--cream);
    border-top: 1px solid var(--cream-deep);
  }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
  }
  .blog-card {
    background: var(--white);
    border: 1px solid var(--cream-deep);
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    border-color: var(--teal-soft);
  }
  .blog-card .blog-meta {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .blog-card .blog-meta .dot {
    color: var(--cream-deep);
    margin: 0 8px;
  }
  .blog-card .blog-meta .category {
    color: var(--teal);
  }
  .blog-card h3 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
    margin-bottom: 14px;
  }
  .blog-card p {
    color: var(--charcoal-soft);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
  }
  .blog-card .blog-link {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease;
  }
  .blog-card .blog-link:hover {
    color: var(--teal-deep);
    border-color: var(--teal);
  }
  .blog-cta {
    margin-top: 50px;
    text-align: center;
  }
  .blog-cta a {
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 4px;
  }

  /* ==========================================================
     CONTACT
     ========================================================== */
  .contact {
    background:
      linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .contact-info h2 { margin-bottom: 24px; }
  .contact-info p {
    color: var(--charcoal-soft);
    font-size: 17px;
    margin-bottom: 36px;
    line-height: 1.8;
  }
  .contact-list { list-style: none; }
  .contact-list li {
    padding: 18px 0;
    border-bottom: 1px solid rgba(44,95,93,.15);
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 16px;
  }
  .contact-list li svg {
    width: 22px; height: 22px; color: var(--teal); flex-shrink: 0;
  }
  .contact-list li a:hover { color: var(--teal); }
  .contact-list li .label {
    font-family: var(--hand);
    color: var(--teal);
    font-size: 20px;
    margin-right: 4px;
  }
  .contact-form {
    background: var(--white);
    padding: 48px 40px;
    border: 1px solid rgba(44,95,93,.15);
  }
  .contact-form h3 {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .contact-form .sub {
    color: var(--charcoal-soft);
    font-size: 14px;
    margin-bottom: 28px;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .form-field {
    margin-bottom: 16px;
  }
  .form-field label {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(44,95,93,.25);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    color: var(--charcoal);
    transition: border-color .3s ease, background .3s ease;
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: var(--white);
  }
  .form-field textarea { min-height: 110px; resize: vertical; }
  .contact-form .btn { width: 100%; }

  /* ==========================================================
     FOOTER
     ========================================================== */
  footer {
    background: var(--charcoal);
    color: rgba(255,255,255,.75);
    padding: 70px 0 30px;
    font-size: 14px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
  }
  footer h4 {
    font-size: 14px;
    color: var(--white);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: var(--sans);
    font-weight: 600;
    margin-bottom: 18px;
  }
  footer .footer-brand-name {
    font-family: var(--serif);
    font-size: 28px;
    color: var(--white);
    margin-bottom: 12px;
  }
  footer .footer-brand-name .ital { color: var(--gold); font-style: italic; }
  footer ul { list-style: none; }
  footer li { margin-bottom: 10px; }
  footer a:hover { color: var(--gold); }
  .socials {
    display: flex;
    gap: 14px;
    margin-top: 18px;
  }
  .socials a {
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
  }
  .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
  .socials svg { width: 16px; height: 16px; }

  .footer-disclosure {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 28px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-badges {
    display: flex;
    gap: 16px;
    align-items: center;
    color: rgba(255,255,255,.85);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .footer-badges .badge {
    border: 1px solid rgba(255,255,255,.25);
    padding: 6px 12px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* ==========================================================
     RESPONSIVE
     ========================================================== */
  @media (max-width: 900px) {
    .topbar {
      padding: 8px 22px;
      font-size: 11px;
      letter-spacing: 1px;
    }
    .topbar .topbar-right { display: none; }
    .topbar .divider { display: none; }
    header { padding: 14px 22px; top: 34px; }
    header.scrolled { top: 0; }
    nav ul { display: none; }
    .menu-toggle {
      display: flex; flex-direction: column; gap: 5px;
      width: 32px; height: 26px; justify-content: center;
    }
    .menu-toggle span {
      display: block; height: 2px; background: var(--white);
      transition: background .3s ease;
    }
    header.scrolled .menu-toggle span { background: var(--charcoal); }

    .about-grid,
    .contact-grid,
    .valuation-grid { grid-template-columns: 1fr; gap: 60px; }
    .form-row-3 { grid-template-columns: 1fr 1fr; }
    .services-grid,
    .areas-grid,
    .testimonials-grid,
    .blog-grid,
    .personal-grid,
    .footer-grid { grid-template-columns: 1fr; }

    section { padding: 80px 0; }
    .container { padding: 0 22px; }
    .about-photo { box-shadow: 14px 14px 0 0 var(--teal); }

    .form-row { grid-template-columns: 1fr; }
    .footer-disclosure { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 900px) {
    .search-row-1,
    .search-row-2 { grid-template-columns: 1fr 1fr; }
    .search-row-1 .search-field:first-child,
    .search-row-2 .search-button-wrap { grid-column: 1 / -1; }
    .search-panel { padding: 36px 26px 30px; }
  }

  @media (max-width: 600px) {
    .hero h1 { font-size: clamp(48px, 14vw, 80px); }
    .hero-content { padding: 0 28px; }
    .search-row-1,
    .search-row-2 { grid-template-columns: 1fr; }
    .search-row-1 .search-field,
    .search-row-2 .search-field,
    .search-row-2 .search-button-wrap { grid-column: 1; }
    .contact-form,
    .valuation-form { padding: 36px 24px; }
    .form-row-3 { grid-template-columns: 1fr; }
  }

  /* ==========================================================
     BLOG PAGE
     ========================================================== */
  .page-hero {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
    color: var(--charcoal);
    padding: 200px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(184,155,111,.10) 0%, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(44,95,93,.06) 0%, transparent 50%);
    pointer-events: none;
  }
  .page-hero .section-eyebrow {
    color: var(--teal);
    margin-bottom: 12px;
  }
  .page-hero h1 {
    font-family: var(--serif);
    color: var(--charcoal);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 22px;
  }
  .page-hero h1 .ital {
    font-style: italic;
    color: var(--gold);
  }
  .page-hero p {
    color: rgba(255,255,255,.85);
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .blog-archive {
    background: var(--cream);
    padding: 100px 0;
  }
  .blog-archive-list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .blog-archive-item {
    background: var(--white);
    border: 1px solid var(--cream-deep);
    padding: 36px 40px 32px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .blog-archive-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    border-color: var(--teal-soft);
  }
  .blog-archive-item .blog-meta {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .blog-archive-item .blog-meta .dot {
    color: var(--cream-deep);
    margin: 0 8px;
  }
  .blog-archive-item .blog-meta .category {
    color: var(--teal);
  }
  .blog-archive-item h2 {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.25;
    margin-bottom: 14px;
  }
  .blog-archive-item h2 a {
    color: inherit;
    text-decoration: none;
  }
  .blog-archive-item h2 a:hover { color: var(--teal); }
  .blog-archive-item p {
    color: var(--charcoal-soft);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 18px;
  }
  .blog-archive-item .blog-link {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }
  .blog-archive-item .blog-link:hover { color: var(--teal-deep); }
  .blog-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--charcoal-soft);
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
  }

  /* ==========================================================
     SINGLE POST PAGE
     ========================================================== */
  .post-page {
    background: var(--cream);
    padding: 60px 0 100px;
  }
  .post-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
  }
  .post-back {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }
  .post-meta {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .post-meta .dot { color: var(--cream-deep); margin: 0 8px; }
  .post-meta .category { color: var(--teal); }
  .post-title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .post-title .ital { font-style: italic; color: var(--teal); }
  .post-deck {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--charcoal-soft);
    line-height: 1.55;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--cream-deep);
  }
  .post-body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.85;
    color: var(--charcoal);
    font-weight: 300;
  }
  .post-body p {
    margin-bottom: 22px;
  }
  .post-body h3 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--teal);
    margin-top: 36px;
    margin-bottom: 14px;
  }
  .post-body ul, .post-body ol {
    margin: 0 0 22px 22px;
  }
  .post-body li { margin-bottom: 10px; }
  .post-body strong { color: var(--teal); font-weight: 600; }
  .post-body blockquote {
    border-left: 3px solid var(--gold);
    padding: 6px 0 6px 22px;
    margin: 30px 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--charcoal-soft);
    line-height: 1.55;
  }
  .post-author-card {
    margin-top: 60px;
    padding: 36px 40px;
    background: var(--white);
    border: 1px solid var(--cream-deep);
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .post-author-card .author-text h4 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 6px;
  }
  .post-author-card .author-text p {
    font-size: 14px;
    color: var(--charcoal-soft);
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .post-author-card .author-text a {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }
  @media (max-width: 600px) {
    .page-hero { padding: 160px 0 80px; }
    .post-author-card { flex-direction: column; text-align: center; }
    .blog-archive-item { padding: 28px 24px; }
    .blog-archive-item h2 { font-size: 26px; }
  }