/* ==========================================================================
   Southern California Real Estate — prototype stylesheet
   Single source of styles for every page. Tokens first, then components.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Palette: a dark, slightly warm ground so the photography sits in it
     rather than on it. White is the accent now, not the surface. */
  --bg: #151311;
  --surface: #211d1a;
  --surface-alt: #1b1816;
  --surface-deep: #000000;

  --ink: #f5f3f0;
  --ink-soft: #c7c2bb;
  --muted: #938d85;
  --on-deep: #ffffff;
  --on-deep-soft: #bdb7af;

  --line: #322d28;
  --line-soft: #272320;

  --accent: #ffffff;
  --accent-hover: #d9d4cd;
  --accent-wash: #262220;
  /* Text that sits on top of --accent. */
  --on-accent: #000000;

  /* Kept under their original names so every existing rule resolves. */
  --gold: #ffffff;
  --gold-wash: #1b1816;

  --ok: #f5f3f0;
  --ok-wash: #1b1816;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Shadows read as depth only if they are near-black on a dark ground. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 26px rgba(0, 0, 0, 0.6), 0 24px 56px rgba(0, 0, 0, 0.45);
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}
h4 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: 0;
}

p {
  margin: 0 0 1.1em;
  color: var(--ink-soft);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
}

ul,
ol {
  color: var(--ink-soft);
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.45em;
}

strong {
  color: var(--ink);
  font-weight: 650;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

/* A map search earns more room than a column of prose does. */
.wrap-wide {
  max-width: 1560px;
}

section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-alt {
  background: var(--surface-alt);
}

.section-deep {
  background: var(--surface-deep);
}

.section-deep h1,
.section-deep h2,
.section-deep h3,
.section-deep h4 {
  color: var(--on-deep);
}

.section-deep p,
.section-deep li {
  color: var(--on-deep-soft);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

.section-deep .eyebrow {
  color: var(--gold);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--on-accent);
}

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-phone {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
  background: var(--surface);
}

.btn-light {
  background: var(--on-deep);
  color: var(--surface-deep);
}

.btn-light:hover {
  background: #fff;
  color: var(--surface-deep);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--on-deep);
}

.btn-outline-light:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--surface-deep);
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero::after {
  /* Soft warm glow, bottom-right. Decorative only. */
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 65%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.hero h1 {
  color: var(--on-deep);
}

.hero p {
  color: var(--on-deep-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  max-width: 48ch;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.2rem;
  margin: 2.2rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-trust div {
  min-width: 90px;
}

.hero-trust dt {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--on-deep);
  line-height: 1;
}

.hero-trust dd {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-deep-soft);
}

/* --- Forms -------------------------------------------------------------- */
/* The form card stays light whatever it sits on. A white panel against a
   dark section pulls the eye straight to it, and pale fields are easier to
   type into than dark ones. Same token trick as .section-light: redeclare
   them here and every control inside follows. */
.lead-card,
.valuation-form {
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-alt: #e9e4dc;

  --ink: #141210;
  --ink-soft: #46413b;
  --muted: #6e675f;

  --line: #ddd6cc;
  --line-soft: #e9e4dc;

  --accent: #141210;
  --accent-hover: #3a352f;
  --accent-wash: #e9e4dc;
  --on-accent: #ffffff;

  --ok: #141210;
  --ok-wash: #e9e4dc;

  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}

.lead-card h2 {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}

.lead-card .form-intro {
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
  color: var(--ink);
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.83rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.field .req {
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #c0392b;
}

.field-error {
  display: block;
  font-size: 0.8rem;
  color: #c0392b;
  margin-top: 0.3rem;
  font-weight: 500;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1.1rem 0 1.3rem;
}

.consent input {
  width: auto;
  margin-top: 0.3rem;
  flex: none;
  accent-color: var(--accent);
}

.consent label {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.form-note {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin: 0.9rem 0 0;
}

.form-success {
  background: var(--ok-wash);
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.form-success h3 {
  color: var(--ok);
  margin-bottom: 0.4rem;
}

.form-success p {
  margin: 0;
  font-size: 0.92rem;
}

/* --- Cards -------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 1.4rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

.card-link {
  display: block;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card-more {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--accent);
  margin: 0;
}

/* Numbered step cards */
.step {
  position: relative;
  padding-left: 3.4rem;
}

.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface-deep);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.steps {
  display: grid;
  gap: 2rem;
}

/* --- Callouts ----------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}

.callout h4 {
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.callout p:last-child,
.callout ul:last-child {
  margin-bottom: 0;
}

/* The emphasis callout: on a dark page the way to make a block shout is to
   light it up, so this is the inverse of the surrounding sections. */
.callout-gold {
  border-left-color: var(--accent);
  background: #f3f0ec;
}

.callout-gold h4,
.callout-gold strong,
.callout-gold a {
  color: #111111;
}

.callout-gold p,
.callout-gold ul,
.callout-gold ol,
.callout-gold li {
  color: #3c3833;
}

/* --- Tables ------------------------------------------------------------- */
/* Tables carry their own light card whatever section they land in. A block
   of figures is the thing people squint at, so it always gets maximum
   contrast, and it separates the heading above from the callout below. */
.table-scroll {
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-alt: #e9e4dc;

  --ink: #141210;
  --ink-soft: #46413b;
  --muted: #6e675f;

  --line: #ddd6cc;
  --line-soft: #e9e4dc;

  overflow-x: auto;
  margin: 1.8rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 540px;
}

caption {
  caption-side: bottom;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line-soft);
}

th,
td {
  text-align: left;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

thead th {
  background: var(--surface-alt);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

td strong {
  color: var(--ink);
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Accordion (FAQ) ---------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  position: relative;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq .faq-body {
  padding-bottom: 1.3rem;
  max-width: 72ch;
}

.faq .faq-body p:last-child,
.faq .faq-body ul:last-child {
  margin-bottom: 0;
}

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.breadcrumb {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* On-page jump links */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin-bottom: 2.5rem;
}

.toc h2 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.92rem;
}

.toc li {
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Content block spacing on article pages */
.prose > h2 {
  scroll-margin-top: 96px;
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.prose > h3 {
  margin-top: 2rem;
}

/* --- CTA band ----------------------------------------------------------- */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  padding-block: 3rem 2rem;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--line);
}

.site-footer h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-contact p {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.footer-legal {
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-legal p {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
  max-width: 70ch;
  line-height: 1.6;
}

.housing-badges {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex: none;
}

.housing-badges svg {
  width: 30px;
  height: 30px;
  color: var(--muted);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grid,
  .cta-grid {
    grid-template-columns: 1fr;
  }

  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    position: relative;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 20px 1rem;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav a[aria-current="page"] {
    border-bottom-color: var(--line-soft);
    color: var(--accent);
  }

  .nav-toggle {
    display: block;
    order: 3;
  }

  .header-phone {
    display: none;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .toc ol {
    columns: 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .header-cta .btn {
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 420px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .header-cta .btn {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Cinematic hero with scroll parallax
   The media layer and the copy layer move at different rates while the
   section is in view. JS sets --shift on each [data-parallax] element.
   ========================================================================== */

.hero-parallax {
  position: relative;
  min-height: 560px;
  height: 100svh;
  max-height: 940px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--surface-deep);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  /* Oversized vertically so the drift never exposes an edge. */
  inset: -12% 0 -12%;
  z-index: 0;
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}

.hero-media img,
.hero-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.62) 34%,
    rgba(0, 0, 0, 0.18) 62%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.hero-cover-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  transform: translate3d(0, var(--shift, 0px), 0);
}

.hero-cover-content h1 {
  color: #fff;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-cover-content .lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

.hero-kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Scroll hint, fades out once the visitor starts moving */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 3;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: opacity 0.4s ease;
}

.scroll-cue[data-hidden="true"] {
  opacity: 0;
}

.scroll-cue span {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);
  animation: cue-drift 2s ease-in-out infinite;
}

@keyframes cue-drift {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed grid */
.reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* ==========================================================================
   Dropdown navigation
   ========================================================================== */

.nav .has-sub {
  position: relative;
}

.nav .sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0.4rem 0;
  margin: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.nav .sub-toggle:hover,
.nav .has-sub[data-open="true"] .sub-toggle {
  color: var(--ink);
}

.nav .sub-toggle::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.18s ease;
}

.nav .has-sub[data-open="true"] .sub-toggle::after {
  rotate: 225deg;
  translate: 0 2px;
}

.subnav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1rem;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 60;
}

.nav .has-sub[data-open="true"] .subnav {
  display: flex;
}

/* The panel sits half a rem below the button, and that gap used to be dead
   space: moving the pointer down into the menu left .has-sub, fired
   mouseleave, and closed it. This invisible strip bridges the gap so the
   pointer never actually leaves. */
.nav .has-sub[data-open="true"]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -1rem;
  /* Wide enough to sit under the whole panel, not just the button. */
  width: max(100% + 2rem, 240px);
  height: 0.75rem;
  z-index: 59;
}

.subnav a {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border-bottom: none;
  font-size: 0.9rem;
  white-space: normal;
}

.subnav a:hover {
  background: var(--surface-alt);
  color: var(--accent);
}

/* Current page inside a dropdown: tint it, don't underline it. */
.subnav a[aria-current="page"] {
  border-bottom-color: transparent;
  background: var(--accent-wash);
  color: var(--accent);
}

/* A parent whose submenu holds the current page. */
.nav .has-sub:has(a[aria-current="page"]) .sub-toggle {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   In-page tabs
   ========================================================================== */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}

.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.85rem 1.1rem;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.section-deep .tablist {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.section-deep .tab {
  color: var(--on-deep-soft);
}

.section-deep .tab:hover {
  color: #fff;
}

.section-deep .tab[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tabpanel:focus-visible {
  outline-offset: 6px;
}

/* ==========================================================================
   Credibility tiles — built for depth of knowledge, not sales volume
   ========================================================================== */

.cred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cred-tile {
  background: var(--surface);
  padding: 1.6rem 1.4rem;
}

.cred-tile dt {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.cred-tile dd {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ==========================================================================
   Property cards and search UI
   ========================================================================== */

.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.property-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.property-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.property-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}

.property-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--surface-deep);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.property-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.property-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}

.property-address {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0.9rem;
}

.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0 0 0.2rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: 0.84rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.property-specs strong {
  color: var(--ink);
  font-weight: 650;
}

/* Filter bar */
.search-filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2.2rem;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
  align-items: end;
}

.filter-row .field {
  margin-bottom: 0;
}

/* Notice panel for features that need external data access */
.notice {
  border: 1px dashed var(--ink);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}

.notice h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.notice p:last-child,
.notice ol:last-child,
.notice ul:last-child {
  margin-bottom: 0;
}

.notice-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* --- CRMLS IDX embed ---------------------------------------------------- */

/* --- MLS search launch --------------------------------------------------
   The CRMLS search opens in its own tab. A cross-origin iframe cannot be
   styled, so embedding it meant pasting another company's 2010 interface
   into the middle of this one. Linking out keeps the site intact.
   ------------------------------------------------------------------------ */

.launch {
  max-width: 64ch;
}

.launch h2 {
  margin-bottom: 0.6rem;
}

.launch-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.launch-note {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--on-deep-soft);
}

/* --- Responsive additions ---------------------------------------------- */
@media (max-width: 960px) {
  .cred-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .hero-parallax {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 58svh;
  }

  /* Drop the drift on small screens — the viewport is too short for it. */
  .hero-media {
    inset: 0 0 auto;
    height: 58svh;
    transform: none;
  }

  .hero-scrim {
    inset: 0;
    background: linear-gradient(
      to top,
      var(--surface-deep) 18%,
      rgba(10, 12, 18, 0.5) 48%,
      rgba(10, 12, 18, 0.25) 100%
    );
  }

  .hero-cover-content {
    transform: none;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .scroll-cue {
    display: none;
  }

  /* Submenus become an indented list inside the open mobile panel. */
  .nav .has-sub {
    display: flex;
    flex-direction: column;
  }

  .nav .sub-toggle {
    display: none;
  }

  .subnav {
    position: static;
    display: flex;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    border-radius: 0;
  }

  .subnav a {
    padding: 0.75rem 0 0.75rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    color: var(--muted);
  }

  .cred-grid,
  .property-grid,
  .filter-row {
    grid-template-columns: 1fr;
  }

  .tablist {
    gap: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .tab {
    padding: 0.8rem 0.85rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Never hide content behind an animation that will not run. */
  .reveal,
  .reveal-group > * {
    opacity: 1;
    transform: none;
  }

  .hero-media,
  .hero-cover-content {
    transform: none;
  }
}

/* ==========================================================================
   Brand: logo, hero nameplate, portrait, dark footer
   ========================================================================== */

/* --- Hero nameplate ----------------------------------------------------- */

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.1rem;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.hero-dre {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.8rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* --- About: portrait beside the bio -------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about-portrait {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.about-portrait-caption {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Footer in black ------------------------------------------------------
   It closes the page on the same note the dark sections strike, and the
   brokerage logo is drawn for a dark ground, so it sits here without a box
   around it. */

.site-footer {
  background: var(--surface-deep);
  border-top: none;
}

.site-footer h4 {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer .footer-grid {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.site-footer .footer-contact p,
.site-footer .footer-links a {
  color: var(--on-deep-soft);
}

.site-footer .footer-contact strong,
.site-footer .footer-contact a {
  color: var(--on-deep);
}

.site-footer .footer-links a:hover,
.site-footer .footer-contact a:hover {
  color: #fff;
}

.site-footer .footer-legal p {
  color: rgba(255, 255, 255, 0.45);
}

.site-footer .footer-legal strong {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer .housing-badges svg {
  color: rgba(255, 255, 255, 0.4);
}

.brokerage-logo {
  width: 150px;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

@media (max-width: 960px) {
  .about-grid {
    grid-template-columns: 260px 1fr;
  }
}

@media (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-portrait {
    max-width: 320px;
  }

  .brand-logo {
    height: 34px;
  }
}

/* --- Social links (footer, dark ground) --------------------------------- */

.social-links {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.social-links a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-deep-soft);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.social-links a:hover {
  border-color: #fff;
  color: #fff;
}

.social-links svg {
  width: 17px;
  height: 17px;
}

/* --- Logotype -----------------------------------------------------------
   Set as live text rather than an image so the name is spelled correctly,
   stays sharp at any size, and inverts with the colour scheme. */

.brand-house {
  width: 42px;
  height: auto;
  flex: none;
  color: var(--ink);
}

.brand-wordmark {
  display: block;
  line-height: 1;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.brand-sub {
  display: block;
  margin-top: 0.34rem;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .brand-house {
    width: 34px;
  }

  .brand-name {
    font-size: 0.98rem;
    letter-spacing: 0.08em;
  }

  .brand-sub {
    letter-spacing: 0.26em;
  }
}

/* ==========================================================================
   Light blocks
   Every token is re-declared for the subtree, so descendants invert without
   needing a single override of their own.
   ========================================================================== */

.section-light {
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-alt: #e9e4dc;

  --ink: #141210;
  --ink-soft: #46413b;
  --muted: #6e675f;

  --line: #ddd6cc;
  --line-soft: #e9e4dc;

  --accent: #141210;
  --accent-hover: #3a352f;
  --accent-wash: #e9e4dc;
  --on-accent: #ffffff;

  --gold-wash: #e9e4dc;
  --ok: #141210;
  --ok-wash: #e9e4dc;

  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.06),
    0 2px 8px rgba(20, 16, 12, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 16, 12, 0.09),
    0 12px 32px rgba(20, 16, 12, 0.07);
  --shadow-lg: 0 8px 24px rgba(20, 16, 12, 0.11),
    0 24px 56px rgba(20, 16, 12, 0.09);

  background: var(--bg);
  color: var(--ink);
}

/* The emphasis callout inverts again: dark inside a light block. */
.section-light .callout-gold {
  background: var(--surface-deep);
  border-left-color: var(--surface-deep);
}

.section-light .callout-gold h4,
.section-light .callout-gold strong,
.section-light .callout-gold a {
  color: #ffffff;
}

.section-light .callout-gold p,
.section-light .callout-gold ul,
.section-light .callout-gold ol,
.section-light .callout-gold li {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Home valuation ------------------------------------------------------ */

.valuation-hero {
  background: var(--surface-deep);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.valuation-hero h1 {
  max-width: 19ch;
}

.valuation-hero .lede {
  color: var(--on-deep-soft);
  max-width: 58ch;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.valuation-form {
  max-width: 900px;
}

/* auto-fit so the three-field row and the two-field row both behave. */
.valuation-form .field-row {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.field-hint {
  display: block;
  margin-top: 0.42rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Components that cross light and dark blocks ------------------------ */

.phone-link {
  font-weight: 650;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-deep .phone-link {
  color: #ffffff;
}

/* The numbered badge is white on black, so on a light ground its text
   must stay white rather than follow the section's ink token. */
.section-light .step-num {
  color: #ffffff;
}

/* --- Language switch ----------------------------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lang-switch a,
.lang-switch span {
  padding: 0.3rem 0.52rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch [aria-current="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 520px) {
  .lang-switch {
    font-size: 0.68rem;
  }
}

/* The fine print under the submit button, set in full black on the light
   card so it is read rather than skimmed past. */
.lead-card .form-note,
.valuation-form .form-note {
  color: var(--ink);
}

/* The areas list is long enough now to want two columns. */
.footer-areas {
  columns: 2;
  column-gap: 1.5rem;
}

.footer-areas li {
  break-inside: avoid;
}

@media (max-width: 760px) {
  .footer-areas {
    columns: 1;
  }
}

/* Reads as a continuation of the list rather than another entry in it. */
.footer-areas-more {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-style: italic;
  color: var(--muted);
  break-inside: avoid;
}

/* The header spans the full viewport rather than the 1140px content column,
   so the logo sits near the left edge and the language switch near the right.
   Adding margin alone would not have moved it: the row is right-aligned, so
   extra space before it just pushes everything else left. */
.site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 3.5vw, 56px);
}

.header-cta .lang-switch {
  margin-left: 1.8rem;
  padding-left: 1.8rem;
  border-left: 1px solid var(--line);
}

/* On narrow screens the button beside it is hidden, so the divider would be
   a line with nothing on its left. */
@media (max-width: 420px) {
  .header-cta .lang-switch {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

/* Sits directly under the email / phone pair, because the requirement
   belongs to the pair rather than to either field on its own. */
.field-pair-hint {
  margin: -0.45rem 0 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* A listing card is only a link when a url is given for it. */
.property-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}