/* ===== Design tokens ===== */
:root {
  --gold: #c39f69;       /* exact gold sampled from the logo file */
  --gold-light: #cfb287; /* lightened, for hover states on dark backgrounds */
  --gold-dark: #886f4a;  /* darkened, for small gold text on white (accessible contrast) */
  --ink: #1c1c1e;
  --ink-soft: #4a4a4d;
  --paper: #ffffff;
  --paper-soft: #faf8f4;
  --border: #e8e3d8;
  --navy: #17171a;      /* dark charcoal/black, not blue-navy */
  --navy-soft: #232326;
  --navy-border: rgba(245, 243, 238, 0.14);
  --on-navy: #f5f3ee;
  --on-navy-soft: rgba(245, 243, 238, 0.68);
  --radius: 10px;
  --shadow: 0 10px 30px rgba(28, 28, 30, 0.06);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

sup { font-size: 0.6em; top: -0.7em; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2 { font-family: var(--serif); font-weight: 700; margin: 0 0 16px; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.2; }

p { margin: 0 0 16px; color: var(--ink-soft); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-sub { max-width: 640px; }
h2.center + .section-sub.center { margin-bottom: 40px; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23, 23, 26, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--navy-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo-img { height: 34px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: var(--on-navy-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.main-nav a:hover { color: var(--gold-light); }
.main-nav .nav-cta {
  background: var(--gold);
  color: var(--navy);
  padding: 10px 20px;
  border-radius: 999px;
}
.main-nav .nav-cta:hover { background: var(--gold-light); color: var(--navy); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--on-navy);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 120px 0 0;
  background:
    radial-gradient(circle at 85% -10%, rgba(195, 159, 105, 0.18), transparent 45%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--on-navy);
  overflow: hidden;
}
.hero::before {
  /* slow-drifting glow so the section has motion even before the video is in place */
  content: "";
  position: absolute;
  top: -25%;
  right: -8%;
  width: 55%;
  height: 85%;
  background: radial-gradient(circle, rgba(195, 159, 105, 0.20), transparent 65%);
  z-index: 0;
  pointer-events: none;
  animation: heroGlowDrift 16s ease-in-out infinite alternate;
}
@keyframes heroGlowDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6%, 4%) scale(1.1); }
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* black-and-white treatment to match the skyline video used on the current site */
  filter: grayscale(100%) contrast(1.1) brightness(0.9);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 23, 26, 0.82) 0%, rgba(23, 23, 26, 0.78) 55%, rgba(23, 23, 26, 0.94) 100%);
}
.hero-skyline {
  /* locked to the artwork's true aspect ratio so it can never stretch/squash -
     width scales with the viewport (capped so it doesn't get oversized on very
     wide screens), height is always derived from width, never set directly */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 1200 / 260;
  z-index: 1;
  opacity: 0.65;
  pointer-events: none;
}
.hero-skyline rect,
.hero-skyline path,
.hero-skyline ellipse {
  fill: rgba(245, 243, 238, 0.10);
}
.hero-skyline .tower-seam {
  stroke: rgba(23, 23, 26, 0.3);
  stroke-width: 0.6;
}
.hero-skyline .light {
  fill: var(--gold-light);
  opacity: 0;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.9; }
}
.hero-inner { max-width: 720px; position: relative; z-index: 2; padding-bottom: 255px; }
.hero .eyebrow { color: var(--gold-light); }
.hero h1 { color: #fff; }
.hero-sub { font-size: 1.1rem; max-width: 560px; color: var(--on-navy-soft); }
.hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero .btn-outline { color: var(--on-navy); border-color: var(--navy-border); }
.hero .btn-outline:hover { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }

/* ===== About ===== */
.about { padding: 90px 0; }
.about-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.photo-placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headshot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
.credentials-line {
  margin: 22px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-dark);
}

/* ===== Awards ===== */
.awards { padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.awards-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 34px;
}
.awards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  flex-wrap: wrap;
}
.award-logo { height: 84px; width: auto; opacity: 1; }

/* ===== Communities ===== */
.communities {
  padding: 90px 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(195, 159, 105, 0.14), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(195, 159, 105, 0.10), transparent 50%),
    var(--paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.community-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.community-card:hover {
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(195, 159, 105, 0.08), var(--paper) 40%);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(195, 159, 105, 0.22);
}
.community-card:hover .community-icon { background: var(--gold); color: #fff; transform: scale(1.08); }
.community-card-more {
  grid-column: 1 / -1;
  background: var(--paper-soft);
  border-left: 3px solid var(--gold);
  border-style: dashed;
  border-left-style: solid;
  /* Three-column grid (1fr / auto / 1fr) rather than flex: the two 1fr
     spacer columns are always equal width by definition, so the middle
     column - .community-main - lands exactly at the card's true center
     no matter how wide "Search" or the name text are, while the arrow
     stays pinned to the right edge like it is on every card above it. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.community-card-more .community-main { grid-column: 2; }
.community-card-more .community-arrow { grid-column: 3; justify-self: end; }
.community-card-more .community-icon { background: rgba(195, 159, 105, 0.16); }
.community-main { display: flex; align-items: center; gap: 14px; }
.community-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(195, 159, 105, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.community-icon svg { width: 18px; height: 18px; }
.community-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.community-arrow { color: var(--gold-dark); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }

/* ===== Buyers / Calculator ===== */
.buyers { padding: 90px 0; }
.buyers-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.calculator {
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 18px;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.calc-field input,
.calc-field select {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--sans);
  background: #fff;
}
.calc-field input:focus,
.calc-field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.calc-result {
  margin-top: 8px;
  padding: 20px;
  background: var(--ink);
  border-radius: var(--radius);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-result-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.calc-result-value { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--gold); }
.calc-result-note { font-size: 0.8rem; opacity: 0.75; }

/* ===== Testimonials ===== */
.testimonials {
  padding: 90px 0;
  background: var(--paper-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
.testimonial-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.testimonial-stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; font-size: 0.9rem; }
.testimonial-quote { font-style: italic; color: var(--ink); font-size: 0.95rem; }
.testimonial-name { color: var(--gold-dark); font-weight: 600; margin: 0; font-size: 0.85rem; }

/* ===== Contact ===== */
.contact {
  padding: 90px 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(195, 159, 105, 0.16), transparent 45%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--on-navy);
}
.contact .eyebrow { color: var(--gold-light); }
.contact h2 { color: #fff; }
.contact .section-sub { color: var(--on-navy-soft); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-details { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; font-weight: 500; }
.contact-details li { color: var(--on-navy); }
.contact-details a { color: var(--on-navy); text-decoration: none; }
.contact-details a:hover { color: var(--gold-light); }
.social-row { display: flex; gap: 14px; margin-top: 22px; }
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--navy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-navy-soft);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social-row a svg { width: 16px; height: 16px; }
.social-row a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.contact-form {
  display: grid;
  gap: 14px;
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--ink);
}
.contact-form label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--sans);
  background: #fff;
  width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.contact-form button { justify-self: start; border: none; cursor: pointer; }
.hidden-field { position: absolute; left: -9999px; }

/* Generic hide utility + inline form-success state, shared by the contact form
   and the home-evaluation form so a submission replaces the form in place
   instead of navigating to another page. */
.hidden-block { display: none !important; }
.form-success { text-align: center; }
.form-success h3 { font-family: var(--serif); margin: 0 0 10px; color: var(--ink); }
.form-success p { margin: 0 auto; max-width: 42ch; color: var(--ink-soft); }
.form-success .btn { margin-top: 18px; }

/* ===== Footer ===== */
.site-footer { padding: 26px 0; background: var(--navy); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-icon { width: 26px; height: auto; opacity: 0.9; }
.footer-inner p { margin: 0; font-size: 0.82rem; color: var(--on-navy-soft); text-align: center; }
.footer-registrant { font-weight: 600; color: var(--on-navy) !important; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .about-inner,
  .buyers-inner,
  .contact-inner { grid-template-columns: 1fr; }
  .about-photo { max-width: 260px; }
  .community-grid,
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile / tablet nav: collapses to a hamburger with a vertical dropdown panel.
   Kicks in at 900px because six nav items no longer fit in one row below that. */
@media (max-width: 900px) {
  .nav-toggle { display: block; color: var(--on-navy); }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-bottom: 1px solid var(--navy-border);
    padding: 6px 24px 22px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  }
  .main-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--navy-border);
    font-size: 1rem;
    white-space: nowrap;
  }
  .main-nav .nav-cta {
    margin-top: 18px;
    padding: 14px 20px;
    text-align: center;
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .community-grid,
  .testimonial-grid { grid-template-columns: 1fr; }
  .hero { padding: 90px 0 0; }
  .hero-inner { padding-bottom: 135px; }
  .award-logo { height: 56px; }
  .awards-row { gap: 34px; }
}

/* ===== Home Evaluation landing page (home-value.html, thank-you.html) =====
   Deliberately skips the full site nav/header - this page is meant to be reached
   straight from a postcard QR code, so it's one continuous block with one job
   and no exit links. Logo lives inside the hero itself instead of a separate bar. */
.eval-hero {
  padding: 64px 0 70px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 85% -10%, rgba(195, 159, 105, 0.18), transparent 45%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--on-navy);
}
.eval-hero-inner { max-width: 640px; }
.eval-return {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  color: var(--on-navy-soft);
  text-decoration: none;
  margin: 0 0 22px;
}
.eval-return:hover { color: var(--gold-light); }
.eval-logo { display: block; height: 30px; width: auto; margin: 0 auto 32px; }
.eval-hero .eyebrow { color: var(--gold-light); }
.eval-hero h1 { color: #fff; }
.eval-hero .section-sub { color: var(--on-navy-soft); margin: 0 auto 36px; }

.eval-card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 32px;
  color: var(--ink);
}
.eval-form { display: grid; gap: 14px; }
.eval-form label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.eval-form input,
.eval-form select,
.eval-form textarea {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--sans);
  background: #fff;
  width: 100%;
}
.eval-form textarea { resize: vertical; min-height: 84px; }
.eval-form input:focus,
.eval-form select:focus,
.eval-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.eval-form .optional-tag { font-weight: 400; color: var(--ink-soft); }
.eval-step-hidden { display: none; }
.eval-step-lead { margin: 0 0 4px; font-weight: 600; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; }
.eval-next,
.eval-form button[type="submit"] { width: 100%; text-align: center; border: none; cursor: pointer; margin-top: 4px; }
.eval-back {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 12px;
  padding: 0;
  justify-self: start;
}

.eval-privacy {
  font-size: 0.8rem;
  color: var(--on-navy-soft);
  text-align: center;
  margin-top: 22px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.eval-call {
  font-size: 0.85rem;
  color: var(--on-navy-soft);
  text-align: center;
  margin: 14px 0 0;
}
.eval-call a { color: var(--on-navy); font-weight: 600; text-decoration: none; }
.eval-call a:hover { color: var(--gold-light); }

/* Map preview, revealed once an address is selected from the Google autocomplete
   dropdown (see home-value.js). Stays hidden/collapsed if no API key is set. */
.eval-map {
  width: 100%;
  height: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: height 0.25s ease, margin 0.25s ease;
}
.eval-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.eval-map-visible { height: 160px; margin-top: -2px; }

.eval-thanks .btn { display: block; width: max-content; margin: 28px auto 0; }

@media (max-width: 640px) {
  .eval-hero { padding: 48px 0 56px; }
  .eval-card { padding: 24px; }
}