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

    :root {
      --gold: #C9A45C;
      --gold-light: #F4F0E6;
      --gold-text: #07584F;
      --dark: #07584F;
      --text: #292929;
      --muted: #6B6B6B;
      --border: rgba(0,0,0,0.12);
      --surface: #F4F0E6;
      --bg: #FFFFFF;
      --serif: 'Playfair Display', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
      --emerald: #07584F;
      --ivory: #F4F0E6;
      --charcoal: #292929;
      --kw-red: #B40101;
    }
html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: #DED2BE;
      color: var(--text);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    /* ── LAYOUT ── */
    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* ── NAV ── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg);
      border-bottom: 0.5px solid var(--border);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 0;
    }
    .nav-brand .name {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
      color: var(--text);
      display: block;
    }
    .nav-brand .sub {
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      display: block;
      margin-top: 2px;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }
    .nav-links a {
      font-size: 13px;
      color: var(--muted);
      text-decoration: none;
      font-weight: 400;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--gold); }
    .nav-cta {
      background: var(--gold);
      color: #07584F;
      border: none;
      padding: 10px 22px;
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .nav-cta:hover { opacity: 0.85; }

    @media (max-width: 640px) {
      .nav-links { display: none; }
    }

    /* ── HERO ── */
    .hero {
      padding: 6rem 0 5rem;
      border-bottom: 0.5px solid var(--border);
    }
    .eyebrow {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
      margin-bottom: 1.25rem;
    }
    .hero h1 {
      font-family: var(--serif);
      font-size: 52px;
      font-weight: 500;
      line-height: 1.15;
      color: var(--text);
      max-width: 580px;
    }
    .hero h1 em {
      font-style: italic;
      color: var(--gold);
    }
    .gold-rule {
      width: 40px;
      height: 2px;
      background: var(--gold);
      margin: 1.5rem 0;
    }
    .hero-sub {
      font-size: 18px;
      color: var(--muted);
      line-height: 1.75;
      max-width: 520px;
      font-weight: 300;
    }
    .hero-actions {
      display: flex;
      gap: 12px;
      margin-top: 2.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .btn-primary {
      background: var(--emerald);
      color: var(--ivory);
      border: none;
      padding: 14px 30px;
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: opacity 0.2s;
    }
    .btn-primary:hover { opacity: 0.8; }
    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 0.5px solid var(--border);
      padding: 14px 30px;
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

    /* ── STATS ── */
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      border: 0.5px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin: 3.5rem 0;
    }
    .stat {
      padding: 1.75rem 1.25rem;
      text-align: center;
      border-right: 0.5px solid var(--border);
    }
    .stat:last-child { border-right: none; }
    .stat-val {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 500;
      color: var(--text);
    }
    .stat-lbl {
      font-size: 12px;
      color: var(--muted);
      margin-top: 5px;
      line-height: 1.4;
    }

    @media (max-width: 600px) {
      .stats { grid-template-columns: 1fr 1fr; }
      .stat:nth-child(2) { border-right: none; }
      .stat:nth-child(3) { border-top: 0.5px solid var(--border); }
      .stat:nth-child(4) { border-top: 0.5px solid var(--border); border-right: none; }
    }

    /* ── SECTIONS ── */
    .section {
      padding: 4.5rem 0;
      border-bottom: 0.5px solid var(--border);
    }
    .section-label {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
      margin-bottom: 0.6rem;
    }
    .section h2 {
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.6rem;
      line-height: 1.2;
    }
    .section-sub {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.75;
      max-width: 540px;
      font-weight: 300;
    }

    /* ── AUDIENCES ── */
    .audience-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-top: 2.5rem;
    }
    .audience-card {
      background: var(--bg);
      border: 0.5px solid var(--border);
      border-radius: 12px;
      padding: 1.75rem;
      transition: border-color 0.2s;
    }
    .audience-card:hover { border-color: var(--gold); }
    .card-icon {
      font-size: 24px;
      color: var(--gold);
      margin-bottom: 1rem;
    }
    .audience-card h3 {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.6rem;
    }
    .audience-card > p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
      font-weight: 300;
    }
    .card-list {
      list-style: none;
      margin-top: 1.25rem;
    }
    .card-list li {
      font-size: 13px;
      color: var(--muted);
      padding: 6px 0;
      border-top: 0.5px solid var(--border);
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    .card-list li i {
      color: var(--gold);
      font-size: 14px;
      margin-top: 3px;
      flex-shrink: 0;
    }

    /* ── ABOUT ── */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 3.5rem;
      margin-top: 2.5rem;
      align-items: start;
    }
    @media (max-width: 640px) {
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    }
    .about-photo {
      background: var(--surface);
      border-radius: 12px;
      border: 0.5px solid var(--border);
      aspect-ratio: 3 / 4;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
    }
    /* When you add your actual photo, replace the placeholder with:
       <img src="your-photo.jpg" alt="Christy Bulerez" style="width:100%;height:100%;object-fit:cover;" />
    */
    .about-photo i { font-size: 48px; color: var(--gold); opacity: 0.35; }
    .about-photo span { font-size: 13px; color: var(--muted); }
    .about-content h3 {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 1.25rem;
    }
    .about-content p {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 1rem;
      font-weight: 300;
    }
    .about-content p em { font-style: italic; color: var(--text); }
    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 1.75rem;
    }
    .badge {
      background: var(--gold-light);
      color: var(--gold-text);
      font-size: 12px;
      padding: 5px 14px;
      border-radius: 20px;
      font-weight: 500;
    }

    /* ── KW PILLARS ── */
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-top: 2.5rem;
    }
    .pillar {
      padding: 1.5rem;
      border: 0.5px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
    }
    .pillar i {
      font-size: 20px;
      color: var(--gold);
      margin-bottom: 0.75rem;
      display: block;
    }
    .pillar h4 {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.4rem;
    }
    .pillar p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
      font-weight: 300;
    }

    /* ── VALUES ── */
    .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      margin-top: 2rem;
    }
    .value-item {
      padding: 0.9rem 1rem;
      border-left: 2px solid var(--gold);
      background: var(--surface);
      border-radius: 0 8px 8px 0;
    }
    .value-item strong {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      display: block;
    }
    .value-item span {
      font-size: 12px;
      color: var(--muted);
    }

    /* ── FORM ── */
    .form-wrap {
      background: var(--surface);
      border-radius: 12px;
      border: 0.5px solid var(--border);
      padding: 2.75rem;
      margin-top: 2.5rem;
    }
    .form-wrap h3 {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.4rem;
    }
    .form-sub {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 2rem;
      font-weight: 300;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    @media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }
    .form-group label {
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 11px 14px;
      border: 0.5px solid var(--border);
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 14px;
      background: var(--bg);
      color: var(--text);
      transition: border-color 0.2s;
      appearance: none;
      -webkit-appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--gold);
    }
    .form-group textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.6;
    }
    .form-submit {
      width: 100%;
      background: var(--emerald);
      color: var(--ivory);
      border: none;
      padding: 15px;
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 8px;
      letter-spacing: 0.02em;
      transition: opacity 0.2s;
    }
    .form-submit:hover { opacity: 0.82; }
    .form-note {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      margin-top: 12px;
    }

    /* ── FOOTER ── */
    .footer {
      padding: 3rem 0 2.5rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 1.5rem;
    }
    .footer-brand {
      font-family: var(--serif);
      font-size: 15px;
      color: var(--text);
      margin-bottom: 0.5rem;
    }
    .footer-copy {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }
    .footer-links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .footer-links a {
      font-size: 13px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--gold); }

    /* ── UTILITY ── */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    @media (max-width: 640px) {
      .hero h1 { font-size: 36px; }
      .section h2 { font-size: 26px; }
    }

    /* Warm perimeter / page frame */
    body > header,
    body > main,
    body > footer {
      width: min(100% - 32px, 1440px);
      margin-left: auto;
      margin-right: auto;
    }
    body > main { background: var(--bg); }
    body > header { margin-top: 16px; border-radius: 14px 14px 0 0; overflow: hidden; }
    body > footer { margin-bottom: 16px; border-radius: 0 0 14px 14px; overflow: hidden; }
    @media (max-width: 640px) {
      body > header, body > main, body > footer { width: calc(100% - 16px); }
      body > header { margin-top: 8px; }
      body > footer { margin-bottom: 8px; }
    }
  
    /* Understated Keller Williams Preferred affiliation mark */
    .kw-preferred-logo {
      width: clamp(105px, 11vw, 150px);
      height: auto;
      object-fit: contain;
      opacity: 0.72;
      margin-left: 1rem;
      flex: 0 0 auto;
    }
    @media (max-width: 760px) {
      .kw-preferred-logo { width: 96px; opacity: 0.68; margin-left: .6rem; }
    }
    @media (max-width: 430px) {
      .kw-preferred-logo { width: 78px; }
      .nav-brand .sub { display: none; }
    }
  


    /* Responsive screen-fit refinements */
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
    img, svg, video, iframe { max-width: 100%; height: auto; }
    .container { width: min(100% - 32px, 900px); padding-left: 0; padding-right: 0; }
    .hero h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); }
    .section h2 { font-size: clamp(1.75rem, 4.5vw, 2.125rem); }
    @media (max-width: 760px) {
      .hero { padding: 4rem 0 3.5rem; }
      .section { padding: 3.5rem 0; }
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
      .about-photo { width: min(100%, 420px); margin-inline: auto; }
      .form-wrap { padding: 1.5rem; }
      .footer { flex-direction: column; }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 24px, 900px); }
      .nav-inner { padding: .9rem 0; }
      .nav-brand .name { font-size: 15px; }
      .nav-brand .sub { font-size: 9px; }
      .hero { padding: 3rem 0; }
      .hero-actions { align-items: stretch; }
      .hero-actions a { width: 100%; text-align: center; }
      .stats { grid-template-columns: 1fr 1fr; }
      .stat { padding: 1.25rem .75rem; }
      .audience-grid, .pillar-grid, .values-grid { grid-template-columns: 1fr; }
      .form-wrap { padding: 1.25rem; }
      .footer-links { gap: .9rem; }
    }
  


    /* Footer warm tan treatment */
    footer {
      background: #E8DCC4 !important;
      border-top: 1px solid rgba(7,88,79,0.14);
    }
    footer .footer-brand, footer .footer-copy, footer .footer-links a {
      color: #292929 !important;
    }
    footer .footer-links a:hover { color: #07584F !important; }