/* Platinum Ridge Real Estate — design system
   Palette derived from Shelby Dunham's postcards: navy, antique gold, warm cream. */

:root {
  --navy: #0B1B2B;
  --navy-2: #11263A;
  --navy-3: #17324B;
  --gold: #C6A15B;
  --gold-bright: #D9B978;
  --gold-ink: #6E5218;      /* AA-safe gold-family text on cream */
  --cream: #F2EDE3;
  --cream-2: #F8F5EE;
  --white: #FFFFFF;
  --ink: #17212B;           /* body text on cream */
  --ink-muted: #55606B;     /* AA on cream */
  --sage: #8B9A8B;
  --line-cream: #DCD3C2;
  --line-navy: rgba(198,161,91,.28);

  --ff-display: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
  --ff-body: "Instrument Sans", "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-script: "Petit Formal Script", "Great Vibes", cursive;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --r: 4px;
  --shadow: 0 18px 44px -24px rgba(11,27,43,.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.72rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.42rem); }
h4 { font-size: 1.05rem; font-family: var(--ff-body); font-weight: 650; letter-spacing: .01em; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { font-weight: 650; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 66px) 0; }
.navy { background: var(--navy); color: #EDE7DA; }
.navy h1, .navy h2, .navy h3 { color: #FBF7EF; }
.cream2 { background: var(--cream-2); }

/* ---------- small shared bits ---------- */
.eyebrow {
  font-size: .74rem; text-wrap: balance; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 650; color: var(--gold-ink); margin: 0 0 .9em;
}
.navy .eyebrow { color: var(--gold-bright); }
.script { font-family: var(--ff-script); font-weight: 400; letter-spacing: .01em; }
.lede { font-size: clamp(1.04rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--ink-muted); }
.navy .lede { color: #CFC7B8; }
.rule-diamond { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
.rule-diamond::before, .rule-diamond::after { content: ""; height: 1px; flex: 1; background: var(--line-cream); }
.navy .rule-diamond::before, .navy .rule-diamond::after { background: var(--line-navy); }
.rule-diamond span { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--ff-body); font-size: .93rem; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; padding: 15px 28px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s;
  min-height: 48px; text-align: center;
}
.btn--gold { background: var(--gold); color: #17120A; }
.btn--gold:hover { background: var(--gold-bright); transform: translateY(-1px); }
.btn--outline { border-color: rgba(198,161,91,.6); color: var(--gold-bright); background: transparent; }
.btn--outline:hover { background: rgba(198,161,91,.14); }
.btn--navy { background: var(--navy); color: #F6F1E7; }
.btn--navy:hover { background: var(--navy-3); transform: translateY(-1px); }
.btn--ghost-dark { border-color: rgba(23,33,43,.3); color: var(--ink); }
.btn--ghost-dark:hover { background: rgba(23,33,43,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(11,27,43,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid rgba(198,161,91,.24);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #F6F1E7; flex-shrink: 0; }
.brand svg { flex-shrink: 0; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-txt b { font-family: var(--ff-display); font-weight: 500; font-size: 1.02rem; letter-spacing: .11em; text-transform: uppercase; }
.brand-txt span { font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: #E4DDD0; text-decoration: none; font-size: .83rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 550; padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); }
.nav .btn { text-transform: uppercase; padding: 11px 20px; min-height: 42px; font-size: .78rem; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(198,161,91,.45); border-radius: var(--r); color: var(--gold-bright); padding: 9px 12px; cursor: pointer; }
.nav-toggle svg { display: block; }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; background: var(--navy);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 24px;
    border-bottom: 1px solid rgba(198,161,91,.3); display: none;
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .9rem; }
  .nav .btn { margin-top: 14px; border-bottom: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: #FFF9EE; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--navy); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(11,27,43,.90) 0%, rgba(11,27,43,.74) 42%, rgba(11,27,43,.30) 74%, rgba(11,27,43,.16) 100%),
    linear-gradient(180deg, rgba(11,27,43,.42) 0%, rgba(11,27,43,0) 30%, rgba(11,27,43,0) 62%, rgba(11,27,43,.78) 100%);
}
.hero__inner { padding: clamp(72px, 12vw, 148px) 0 clamp(58px, 9vw, 112px); max-width: 780px; }
.hero h1 { color: #FFFBF2; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero h1 .script { display: block; color: var(--gold-bright); font-size: 1.18em; line-height: 1.05; margin: .06em 0; }
.hero p { color: #E7DFD0; max-width: 44ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.hero--short .hero__inner { padding: clamp(58px, 9vw, 104px) 0; max-width: 720px; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--cream-2); border: 1px solid var(--line-cream); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.pillar__body { padding: 26px 24px 22px; flex: 1; }
.pillar__icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--gold);
  display: grid; place-items: center; margin-bottom: 16px;
}
.pillar__icon svg { width: 32px; height: 32px; display: block; }
.pillar h3, .navy .pillar h3 { color: var(--ink); font-family: var(--ff-body); font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.pillar ul { list-style: none; padding: 0; margin: 0; }
.navy .pillar { color: var(--ink); }
.pillar li { position: relative; padding-left: 18px; color: var(--ink-muted); font-size: .96rem; }
.pillar li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: var(--gold-ink); transform: rotate(45deg); }
.pillar__img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.pillar__more { display: block; padding: 0 24px 20px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--gold-ink); }

/* ---------- generic grid/cards ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--cream-2); border: 1px solid var(--line-cream); border-radius: var(--r); padding: 28px 26px; }
.navy .card { background: rgba(255,255,255,.045); border-color: var(--line-navy); }
.card h3 { margin-bottom: .45em; }

.frame { position: relative; border-radius: var(--r); overflow: hidden; }
.frame--gold::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(198,161,91,.55); pointer-events: none; }

/* ---------- checklist / content blocks ---------- */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 8px;
  border-left: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(-45deg);
}
.navy .checklist li::before { border-color: var(--gold); }
.callout {
  border-left: 3px solid var(--gold); background: rgba(198,161,91,.10);
  padding: 20px 24px; border-radius: 0 var(--r) var(--r) 0; margin: 26px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--gold-ink); letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; display: block; margin-bottom: .4em; }
.navy .callout { background: rgba(198,161,91,.12); }
.navy .callout b { color: var(--gold-bright); }

.topic { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line-cream); scroll-margin-top: 90px; }
.topic:first-of-type { border-top: 0; }
.topic__head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.topic__head .pillar__icon { margin-bottom: 0; width: 54px; height: 54px; flex-shrink: 0; }
.topic__head h2 { margin: 0; }
.topic__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(26px, 4vw, 52px); align-items: start; margin-top: 26px; }
.topic__aside { position: sticky; top: 100px; }
@media (max-width: 860px) { .topic__grid { grid-template-columns: 1fr; } .topic__aside { position: static; } }
.topic__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); }

/* table of contents */
.toc { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.toc a {
  display: inline-block; text-decoration: none; border: 1px solid var(--line-navy);
  color: #E9E1D2; padding: 9px 16px; border-radius: 999px; font-size: .82rem; letter-spacing: .06em;
}
.toc a:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(198,161,91,.1); }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--ink-muted); }
.navy .field label { color: #CBC2B1; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-cream); border-radius: var(--r); padding: 13px 14px; width: 100%; min-width: 0;
}
.navy .field input, .navy .field select, .navy .field textarea {
  background: rgba(255,255,255,.06); border-color: var(--line-navy); color: #F6F1E7;
}
.navy .field input::placeholder, .navy .field textarea::placeholder { color: #9C9485; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.checkline { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; color: var(--ink-muted); line-height: 1.5; }
.navy .checkline { color: #B9B1A3; }
.checkline input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--gold); }
.form-note { font-size: .8rem; color: var(--ink-muted); }
.navy .form-note { color: #A69D8E; }
/* SMS/call consent disclosure shown above the submit button on every lead form.
   Required verbatim by A2P 10DLC carrier review - do not shorten or remove. */
.form-consent { font-size: .8rem; line-height: 1.6; color: var(--ink-muted); }
.navy .form-consent { color: #A69D8E; }
.form-consent a { color: inherit; text-decoration: underline; }
.navy .form-consent a { color: #D8CFBE; }
.form-status { font-size: .9rem; color: var(--gold-bright); min-height: 1.2em; }

/* ---------- search page ---------- */
.searchbar {
  background: var(--cream-2); border: 1px solid var(--line-cream); border-radius: var(--r);
  padding: 24px; box-shadow: var(--shadow);
}
.searchbar .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.searchbar--compact .grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .searchbar--compact .grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .searchbar .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .searchbar .grid { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chip {
  border: 1px solid var(--line-cream); background: var(--white); border-radius: 999px;
  padding: 10px 17px; font-size: .86rem; text-decoration: none; color: var(--ink); display: inline-flex; gap: 8px; align-items: center;
}
.chip:hover { border-color: var(--gold); background: rgba(198,161,91,.1); }
.chip svg { width: 17px; height: 17px; }
.idx-slot {
  border: 1px dashed rgba(198,161,91,.75); border-radius: var(--r); background: rgba(198,161,91,.07);
  padding: clamp(30px, 5vw, 52px); text-align: center;
}
.idx-slot h3 { margin-bottom: .4em; }
.idx-slot p { max-width: 56ch; margin-inline: auto; }

/* ---------- stats / marks ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }
.stat b { display: block; font-family: var(--ff-display); font-size: 2rem; color: var(--gold-bright); line-height: 1; margin-bottom: 8px; }
.stat span { font-size: .88rem; letter-spacing: .04em; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #C9C1B3; padding: clamp(46px, 6vw, 72px) 0 30px; border-top: 3px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(26px, 4vw, 54px); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--gold-bright); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: #DCD5C8; text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; font-size: .95rem; }
.footer-brand p { font-size: .93rem; max-width: 34ch; }
.footer-tag { font-family: var(--ff-display); font-style: italic; color: var(--gold); font-size: 1rem; }
.legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
  font-size: .8rem; color: #9A9385; line-height: 1.55;
}
.legal p { margin: 0; max-width: 70ch; }
.legal strong { color: #C8C1B2; font-weight: 600; letter-spacing: .01em; word-spacing: .12em; }
/* Trademark marks.
   NAR requires the REALTOR(R) Logo be surrounded by an "area of isolation"
   equal to half the width of the block, containing no other wording or design
   elements. The block here renders 57px wide, so the isolation is 29px. */
.marks { display: flex; align-items: flex-end; gap: 29px; flex: 0 0 auto; }
.marks svg, .marks img { display: block; }
.mark-realtor { width: 57px; height: auto; margin: 29px; }
.mark-eho { width: 84px; height: auto; }
@media (max-width: 640px) {
  .marks { gap: 22px; }
  .mark-realtor { width: 46px; margin: 23px; }
  .mark-eho { width: 70px; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 10px; z-index: 200; background: var(--gold); color: #17120A; padding: 10px 16px; border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* prose pages (privacy / sms) */
.prose h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.prose h3 { margin-top: 1.4em; }
.prose { max-width: 74ch; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--gold-ink); }

/* Netlify Forms honeypot — must be hidden from humans, present for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }