/* WSW Realty brand: gold #C9A24B accent, black/white carry the layout.
   Headlines Oswald, body Open Sans (brand-standards.md — no other fonts). */
:root {
  --gold: #C9A24B;
  --black: #000;
  --ink: #12110f;
  --paper: #faf8f4;
  --muted: #6b665e;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

h1, h2, h3, .nav__brand, .btn {
  font-family: Oswald, "Open Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

a { color: inherit; }

.wrap { width: min(1180px, 92vw); margin: 0 auto; }

/* IDX surfaces need more room than a text page. The AeroIDX map search and
   property-detail components are built for the full viewport; holding them in
   .wrap (1180px) crops the map and squeezes the results columns. Raised by
   RealtyCandy 2026-10-09 against /search. The page heading stays in .wrap so it
   still lines up with the rest of the site. */
.wrap--idx      { width: 96vw; margin: 0 auto; }                 /* map search: full bleed */
.wrap--idx-text { width: min(1480px, 94vw); margin: 0 auto; }    /* detail page: wide, still readable */


/* Header */
.nav {
  background: var(--black);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav__inner { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.nav__brand { font-size: 22px; text-decoration: none; text-transform: uppercase; }
.nav__brand span { color: var(--gold); }
.nav__links { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav__links a { text-decoration: none; font-size: 15px; opacity: 0.88; }
.nav__links a:hover { opacity: 1; color: var(--gold); }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 15px;
  text-transform: uppercase;
  border: 1px solid var(--gold);
}
.btn--gold { background: var(--gold); color: #000; }
/* btn--ghost is white text on a white border -- correct inside .section--dark and invisible on
   a white card, where it rendered as an empty outlined box until hover. This is that shape in
   ink, for a light background. */
.btn--line { border-color: rgba(18,17,15,.3); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--gold); background: var(--gold); color: #000; }
.btn--ghost { color: #fff; }
.btn--ghost:hover { background: var(--gold); color: #000; }

/* Hero */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.82)), var(--black);
  color: #fff;
  padding: 96px 0 84px;
  text-align: center;
}
.hero h1 { font-size: clamp(40px, 6vw, 68px); margin: 0 0 18px; line-height: 1.05; }
.hero h1 em { color: var(--gold); font-style: italic; font-family: Georgia, serif; font-weight: 400; }
.hero p { max-width: 640px; margin: 0 auto 34px; font-size: 18px; opacity: 0.86; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.eyebrow {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 26px;
  color: var(--gold);
}

/* Widget slots */
.slot { background: #fff; padding: 26px; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.09); }
.slot--hero { max-width: 720px; margin: 0 auto 30px; }

section { padding: 76px 0; }
section h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 12px; }
section .lede { color: var(--muted); max-width: 640px; margin: 0 0 34px; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .lede { color: rgba(255, 255, 255, 0.72); }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 30px;
  border-radius: 3px;
}
.section--dark .card { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.card h3 { margin: 0 0 8px; font-size: 21px; }
.card p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.section--dark .card p { color: rgba(255, 255, 255, 0.7); }
.card a { color: var(--gold); text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; }

.page-head { background: var(--ink); color: #fff; padding: 56px 0 44px; }
.page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.page-body { padding: 40px 0 72px; min-height: 52vh; }

/* Footer + TREC compliance */
.foot { background: var(--black); color: rgba(255, 255, 255, 0.76); padding: 56px 0 34px; font-size: 14px; }
.foot__grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.foot h4 { font-family: Oswald, sans-serif; color: #fff; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
.foot a { color: rgba(255, 255, 255, 0.76); text-decoration: none; display: block; margin-bottom: 7px; }
.foot a:hover { color: var(--gold); }
.compliance {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}
.compliance a { display: inline; color: var(--gold); text-decoration: underline; }
.compliance__marks { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 18px; }

@media (max-width: 720px) {
  .nav__inner { flex-wrap: wrap; gap: 14px; }
  .nav__links { margin-left: 0; gap: 16px; }
  section { padding: 54px 0; }
}

/* ─────────────────────────────────────────────────────────────
   Home page. Full-bleed photographic hero, centred type, then a
   dark neighbourhood band. Motion is decorative only and is off
   entirely under prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */

.homehero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  background: #000 url("/assets/houston-hero.webp") center 38% / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.homehero::before {                       /* legibility scrim */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.92) 100%),
    radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(0,0,0,.5) 100%);
  z-index: 1;
}
/* W1 (2026-10-26): the agent's own hero, chosen in the portal's Website tile. It sits UNDER
   .homehero::before, which is the scrim that keeps the white headline readable over a photograph
   somebody else picked. z-index 0 here, 1 on the scrim, 2 on the text. With no heroMedia on file
   nothing is emitted and the skyline background-image above still shows. */
.homehero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block;
}
.homehero__inner {
  position: relative;
  z-index: 2;
  padding: 130px 0 96px;
  animation: heroRise 1s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.homehero .eyebrow {
  display: inline-block;
  font-family: Oswald, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 2px;
  padding: 9px 20px;
  margin-bottom: 26px;
}
.homehero h1 {
  font-size: clamp(38px, 7vw, 86px);
  line-height: 1.04;
  margin: 0 0 22px;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.homehero h1 em { font-style: normal; color: var(--gold); }
.homehero__lede {
  max-width: 60ch;
  margin: 0 auto 32px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(255,255,255,.84);
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}

.hsearch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(10,10,12,.56);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  padding: 9px;
  max-width: 680px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
}
.hsearch input, .hsearch select {
  font: inherit; font-size: 15px; color: #fff;
  background: transparent; border: 0; padding: 12px 10px; min-width: 0;
}
.hsearch input { flex: 1 1 240px; text-align: left; }
.hsearch input::placeholder { color: rgba(255,255,255,.55); }
.hsearch select { flex: 0 0 auto; color: rgba(255,255,255,.88); }
.hsearch select option { color: #111; }
.hsearch input:focus, .hsearch select:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.hsearch button {
  font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .07em;
  font-size: 14px; background: var(--gold); color: #000; border: 0;
  padding: 13px 28px; border-radius: 2px; cursor: pointer; flex: 0 0 auto;
  transition: filter .25s;
}
.hsearch button:hover { filter: brightness(1.1); }

.homehero__actions { margin-top: 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.homehero__rule {
  margin: 40px auto 0;
  font-family: Oswald, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.62);
}

/* valuation card, lifted over the seam */
.valstrip { position: relative; z-index: 3; margin-top: -58px; padding-bottom: 64px; }
.valstrip__card {
  background: #fff; border-radius: 3px; padding: 30px;
  box-shadow: 0 26px 60px rgba(0,0,0,.3);
}
.valstrip__card h2 { margin: 0 0 6px; font-size: 23px; }
.valstrip__card p  { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

/* neighbourhood cards */
.areas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.area {
  position: relative; display: block; text-decoration: none; color: #fff;
  background: #121114; border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px; padding: 30px 26px 26px; overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s;
}
.area::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.area:hover, .area:focus-visible {
  transform: translateY(-6px); border-color: rgba(201,162,75,.5);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.area:hover::after, .area:focus-visible::after { transform: scaleX(1); }
.area__zip {
  font-family: Oswald, sans-serif; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px;
}
.area h3 { margin: 0 0 10px; font-size: 24px; text-transform: uppercase; }
.area p  { margin: 0 0 18px; font-size: 14.5px; color: rgba(255,255,255,.66); line-height: 1.8; }
.area__go {
  font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.area__go span { display: inline-block; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.area:hover .area__go span { transform: translateX(6px); }

/* scroll reveal */
/* Hidden only where assets/reveal.js ran (it adds .js-reveal first): a page without the script shows
   its content instead of rendering blank -- /roster, 2026-10-26. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .homehero__inner { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .area, .area::after, .area__go span { transition: none; }
}

/* Brand mark in the nav. The badge is the real WSW Realty logo
   (content/assets/logos/wsw-badge-on-dark.png, the canonical copy) —
   gold frame, white type, made for a black ground. */
.nav__brand { display: inline-flex; align-items: center; line-height: 0; }
.nav__brand img { height: 46px; width: auto; display: block; }
@media (max-width: 640px) { .nav__brand img { height: 38px; } }

/* ---- Meet the agent -------------------------------------------------------
   Added 2026-10-04 with the agent-page rebuild. The agent pages reuse this
   stylesheet's own .homehero / .areas / .valstrip / .foot, so the brokerage
   homepage and the agent pages cannot drift apart -- restyle one and the other
   follows. This is the only block they needed that the homepage did not have. */
.meet { background: var(--paper); padding: 86px 0; }
.meet__inner { display: grid; grid-template-columns: 420px 1fr; gap: 54px; align-items: center; }
.meet__media { min-width: 0; }
/* The photograph comes from My Profile in the portal, which stores a 640x640 square --
   the same one on the agent's contact card and email signature. Framed 4:5 and cropped
   from the top, which is where a face sits in a headshot. A taller image fits the frame
   the same way, so an agent who uploads a portrait is not punished for it. */
.meet__photo {
  /* height:auto is load-bearing. The <img> carries width/height attributes so the browser
     reserves space before the file arrives, and those map to a presentational height that
     an aspect-ratio cannot override -- the photo rendered 420x640 instead of 420x525. */
  width: 100%; height: auto; display: block; border-radius: 6px;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  background: #ded8cd;
  box-shadow: 0 16px 44px rgba(18, 17, 15, .16);
}
.meet__body { min-width: 0; }
.meet__body h2 { margin: 10px 0 18px; }
.meet__body p { color: var(--muted); font-size: 17px; line-height: 1.68; margin: 0 0 16px; }
.meet__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.meet__actions .btn--ghost { border-color: rgba(18, 17, 15, .28); color: var(--ink); }
.meet__actions .btn--ghost:hover { border-color: var(--ink); }
/* No photo on file yet: the column collapses rather than leaving a grey hole. */
.meet__media:empty { display: none; }
.meet__media:empty + .meet__body { grid-column: 1 / -1; }
.meet__inner:has(.meet__media:empty) { grid-template-columns: 1fr; }
/* .card was written as a div. The agent pages make the whole listing card one link, which
   otherwise inherits the global anchor underline on every line inside it. */
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--gold); transform: translateY(-2px); }
a.card h3 { color: var(--ink); text-decoration: none; }
.card__price { font-family: "Oswald", sans-serif; font-size: 22px; color: var(--ink); margin: 6px 0 14px; }
@media (max-width: 860px) {
  .meet { padding: 58px 0; }
  .meet__inner { grid-template-columns: 1fr; gap: 30px; }
  .meet__photo { max-width: 320px; }
}

/* THE AGENT CONTACT FORM — the SMS opt-in form a carrier crawls for A2P.
   On a white card inside .section--dark on purpose: the consent wording is legally load-bearing,
   and light-on-dark small print is exactly the thing an A2P reviewer reads as buried.
   W4 (2026-10-26): the checkbox labels are now ONE SHORT LINE each and the disclosure moved to
   11px underneath — Will, looking at BoldTrail's form: *"the opt-in text is just as big as the
   rest. If BoldTrail can do it, why do we need to put all that in there?"* Every clause a
   carrier looks for is still on the page; it is a layout change, not a consent change, and
   sms_consent.py keeps the label and the fine print joined as the recorded sentence. */
.lead {
  background: #fff; color: var(--ink); border-radius: 4px;
  padding: 30px; margin: 34px auto 0; max-width: 820px; text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.lead__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lead label { display: block; font-family: Oswald, sans-serif; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lead input[type=text], .lead input[type=tel], .lead input[type=email],
.lead select, .lead textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px;
  color: var(--ink); background: #fff; border: 1px solid rgba(18, 17, 15, .24);
  border-radius: 3px; padding: 11px 12px;
}
.lead textarea { resize: vertical; }
.lead input:focus, .lead select:focus, .lead textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.lead__wide { margin-top: 16px; }

/* No border and no legend any more: Will, on the old framed box — *"I hate this 'text
   messages - optional' thing ... they shouldn't see any of that."* */
.lead__consent { border: 0; padding: 0; margin: 20px 0 0; }
/* Grid, not flex: the box stays beside the first line of a three-line sentence.
   `.lead .lead__check`, not `.lead__check`: the field-label rule above is `.lead label`, which
   outranks a single class, and the consent sentences rendered in CAPITALS until this was
   specific enough to beat it. */
.lead .lead__check { display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: center; margin: 0 0 8px; text-transform: none; letter-spacing: 0;
  font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--ink); cursor: pointer; }
.lead .lead__check input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.lead .lead__fine { font-family: "Open Sans", sans-serif; text-transform: none; letter-spacing: 0;
  font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.lead .lead__fine a { color: var(--ink); text-decoration: underline; }
/* The disclosure itself. 11px is BoldTrail's size for the same words. It is small, not hidden:
   full contrast against white, selectable, and immediately under the boxes it describes. */
.lead .lead__sms { font-size: 11px; line-height: 1.55; margin: 6px 0 0; }
.lead__by { margin: 18px 0 0; }

.lead__go { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 18px 0 0; }
.lead__said { font-size: 14px; color: var(--muted); margin: 0; }
.lead__done { font-size: 16px; color: var(--ink); }
/* The honeypot. Off-screen rather than display:none — a bot that reads computed styles skips a
   hidden field, and the point is that it fills this one in. */
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) {
  .lead { padding: 22px 18px; }
  .lead__consent { padding: 14px 14px 4px; }
}

/* ---- Home page, 2026-10-26 (Will: "the homepage is kind of boring ... boxes to move in and
   out ... the website needs to be animated some"). Sections modelled on the wswrealty.com home
   page: about, services, testimonials, a broker/careers band. Every motion here is decorative
   and switched off under prefers-reduced-motion (the block at the end). ---- */
.kicker { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .22em;
  font-size: 12px; color: var(--gold); margin: 0 0 10px; }
.section--paper { background: var(--paper); }
.section--paper .area { background: #fff; color: var(--ink); border-color: rgba(0,0,0,.08); }
.section--paper .area p { color: var(--muted); }

/* the hero photo drifts, slowly */
.homehero { animation: heroDrift 26s ease-in-out infinite alternate; }
@keyframes heroDrift { from { background-position: center 30%; } to { background-position: center 52%; } }

/* about */
.about { background: #fff; }
.about__inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; }
.about__lead h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; margin: 0; text-transform: uppercase; }
.about__lead h2 em { font-style: normal; color: var(--gold); }
.about__body > p { font-size: 18px; line-height: 1.7; color: #3b3832; margin: 0 0 26px; }
.about__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.about__facts li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.09); }
.about__facts b { font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; }
.about__facts span { color: var(--muted); }

/* services */
.svcs { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.svc { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  color: #fff; background: #17161a; border: 1px solid rgba(255,255,255,.1); border-radius: 3px;
  padding: 28px 26px 24px; overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s; }
.svc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gold);
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.svc:hover { transform: translateY(-6px); border-color: rgba(201,162,75,.55); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.svc:hover::before { transform: scaleY(1); }
.svc__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(201,162,75,.12); margin-bottom: 10px; transition: transform .45s, background .45s; }
.svc:hover .svc__icon { transform: rotate(-8deg) scale(1.08); background: var(--gold); }
.svc__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.svc:hover .svc__icon svg { stroke: #000; }
.svc__tag { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .16em;
  font-size: 11.5px; color: rgba(255,255,255,.55); }
.svc__tag em { font-style: normal; color: var(--gold); }
.svc h3 { margin: 2px 0 4px; font-size: 22px; }
.svc p { margin: 0 0 10px; color: rgba(255,255,255,.7); font-size: 15px; }
.svc__go { margin-top: auto; color: var(--gold); font-weight: 600; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .06em; }
.svc__go span { display: inline-block; transition: transform .35s; }
.svc:hover .svc__go span { transform: translateX(6px); }

/* featured listings: the cards come from the search (sx-card); this only spaces the slot */
.featured .slot { background: transparent; box-shadow: none; padding: 0; }

/* testimonials */
.quotes { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
.quote { margin: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px; padding: 30px 28px; position: relative; }
.quote::before { content: "\201C"; position: absolute; top: -18px; left: 22px; font-family: Georgia, serif;
  font-size: 84px; line-height: 1; color: var(--gold); }
.quote blockquote { margin: 0 0 18px; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.7; }
.quote figcaption { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: .12em;
  font-size: 13px; color: var(--gold); }

/* broker + careers band */
.join { background: var(--paper); }
.join__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.join h2 { margin: 0 0 10px; }
.join p { color: var(--muted); }
.join__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.join__card { background: var(--ink); color: #fff; border-radius: 3px; padding: 34px 32px;
  box-shadow: 0 30px 60px rgba(18,17,15,.25); }
.join__card h3 { font-size: 26px; margin: 0 0 10px; }
.join__card p { color: rgba(255,255,255,.72); margin: 0 0 22px; }

/* more ways to arrive, and a longer stagger for grids of six */
.js-reveal .reveal--left { transform: translateX(-34px); }
.js-reveal .reveal--right { transform: translateX(34px); }
.reveal--left.is-in, .reveal--right.is-in { transform: none; }
.reveal:nth-child(5) { transition-delay: .32s; }
.reveal:nth-child(6) { transition-delay: .40s; }

@media (max-width: 980px) {
  .svcs, .quotes { grid-template-columns: 1fr 1fr; }
  .about__inner, .join__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .svcs, .quotes { grid-template-columns: 1fr; }
  .about__facts li { grid-template-columns: 1fr; gap: 2px; }
  .reveal--left, .reveal--right { transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .homehero { animation: none; }
  .svc, .svc::before, .svc__icon, .svc__go span { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   W2 (2026-10-26): THE AGENT'S OWN LISTINGS, AS PHOTO CARDS

   Will: *"Ashlee's listings, you have just the address, not the photo of the home. Like, that
   looks really weird."* These rules are the IDX search's cards (idx/assets/idx.css .sx-*),
   copied here under the SAME class names and kept the same on purpose — a visitor sees both on
   one visit, and two cards that nearly match look like two websites. If one side changes, change
   the other.
   ───────────────────────────────────────────────────────────── */
.sx-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.sx-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column; color: inherit;
  text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sx-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-2px); }
.sx-ph { position: relative; aspect-ratio: 4 / 3; background: #ded8cd; overflow: hidden; }
.sx-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sx-price { font-family: Oswald, sans-serif; font-weight: 600; font-size: 25px; line-height: 1.15; }
.sx-facts { font-size: 15px; }
.sx-addr { font-size: 15px; color: var(--muted); }
.sx-firm { font-size: 15px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08); color: var(--muted); }

/* W3 (2026-10-26): the email address under the "Email <agent>" button, because the button is a
   mailto: and does nothing in Chrome on a desktop with no mail app. Visible text first, Copy
   second — the address still works with the script dead. */
.emailline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 15px; }
.emailline a { color: var(--ink); text-decoration: underline; }
/* Will, 2026-10-26, on the Copy buttons: "they're fine, I guess." Kept, because a mailto on a
   desktop with no mail app still does nothing -- but as a quiet text link rather than a boxed
   control competing with the real buttons. */
.emailline__copy { font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  padding: 0; border: 0; background: none; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; }
.emailline__copy:hover { color: var(--gold); }
.emailline--dark { justify-content: center; }
.emailline--dark a { color: #fff; }
.emailline--dark .emailline__copy { color: rgba(255,255,255,.72); }
.emailline--dark .emailline__copy:hover { color: var(--gold); }

/* ---- The header over a photo hero (assets/nav.js adds .nav--over, then .nav--solid after a
   short scroll). The background fades in rather than switching; the phone menu still opens on
   black. Pages without a hero never get these classes. ---- */
.nav { transition: background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease; }
.nav.nav--over { position: fixed; left: 0; right: 0; top: 0; background: transparent; box-shadow: none; }
.nav.nav--over::before { content: ""; position: absolute; inset: 0 0 -24px 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); transition: opacity .45s ease; }
.nav.nav--over.nav--solid { background: rgba(0,0,0,.94); box-shadow: 0 8px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav.nav--over.nav--solid::before { opacity: 0; }
.nav.nav--over .nav__t:checked ~ .nav__links { background: rgba(0,0,0,.94); margin-left: -4vw;
  margin-right: -4vw; padding: 0 4vw 10px; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* home page: the neighbourhood view band */
.nbhome { background: linear-gradient(120deg, #17161a 0%, #2a2418 100%); color: #fff; }
.nbhome__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; }
.nbhome h2 { margin: 0 0 10px; }
.nbhome p { color: rgba(255,255,255,.75); margin: 0; }
.nbhome .btn { font-size: 17px; padding: 16px 30px; }
.nbhome .nbhome__fine { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.55); }
@media (max-width: 860px) { .nbhome__inner { grid-template-columns: 1fr; } }

/* W9 (2026-10-26): the HAR copyright/disclaimer, ONCE under a card grid — HAR 18.3.5 / 18.3.6.
   Will, on cards that each carried the whole thing: "It's like you have the whole footer in
   there." Same class and size as the IDX search's note so the two read as one site. */
.sx-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 860px; }

/* W8: the neighbourhood view button, under the call/email buttons in the contact band. */
.nbhd { margin: 18px 0 0; }

/* ─────────────────────────────────────────────────────────────
   W5 (2026-10-26): THE AGENT ROSTER — BoldTrail's card, ours

   Will showed the BoldTrail roster at wswrealty.com/agents and asked for that card: photo,
   name, title, Email Me, Office, Cell, TREC number, Visit My Website, Listings, socials.
   Generated by build_agents.py from the verified roster and the portal profiles, so it cannot
   drift from who is actually licensed here.
   ───────────────────────────────────────────────────────────── */
.rgrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.rcard { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column; }
/* Round, centred, 170px. Will, 2026-10-26: "instead of making the photos square, maybe make
   them round ... a little too blocky ... we want something modern." */
.rcard { align-items: center; text-align: center; padding: 28px 20px 22px; }
.rcard__ph { display: block; width: 170px; height: 170px; margin: 0 auto; border-radius: 50%;
  background: #ded8cd; overflow: hidden; flex: none; }
.rcard__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photograph on file -- seven of sixteen agents today, so this is a normal card and not a
   fallback. A black square read as a broken image; initials in the brand gold read as a choice.
   Ink on gold, not white on gold: white on gold is 2.40:1 and these are large but still text. */
.rcard__ph--none { background: var(--gold); display: grid; place-items: center; }
.rcard__ini { font-family: Oswald, sans-serif; font-weight: 600; font-size: 56px; line-height: 1;
  letter-spacing: .04em; color: var(--ink); }
.rcard__b { padding: 16px 0 0; display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex: 1; width: 100%; }
.rcard__b h3 { margin: 0; font-size: 22px; }
.rcard__title { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.rcard__meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 15px;
  width: 100%; max-width: 250px; text-align: left; }
.rcard__meta li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 3px 0; }
.rcard__meta li span { color: var(--muted); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; align-self: center; }
.rcard__meta a { color: var(--ink); text-decoration: none; }
.rcard__meta a:hover { text-decoration: underline; }
/* One row at card width, so "Listings" stops dropping onto its own line under "Email Me".
   Email Me takes the full first row; the two links share the second evenly whatever their
   label length. */
.rcard .emailline { justify-content: center; margin: 4px 0 0; font-size: 14px; }
.rcard .socs { justify-content: center; }
.rcard__go { margin: auto 0 0; padding-top: 16px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rcard__go .btn { font-size: 12px; padding: 10px 12px; text-align: center; }
.rcard__go .btn--gold { grid-column: 1 / -1; }
.rcard__go .btn:only-child { grid-column: 1 / -1; }
/* A held agent's photo is not a link — see roster_card. Keep it looking like a photo anyway. */
span.rcard__ph { cursor: default; }

/* W6: social icons, on the agent page and the roster card. Text labels, not an icon font:
   nothing new to load, and a screen reader gets the name of the network. */
.socs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.soc { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid rgba(18,17,15,.22); border-radius: 3px;
  color: var(--ink); text-decoration: none; }
.soc:hover { border-color: var(--gold); color: var(--gold); }
.section--dark .soc { border-color: rgba(255,255,255,.34); color: #fff; }
.section--dark .soc:hover { border-color: var(--gold); color: var(--gold); }
.socs { justify-content: flex-start; }
.section--dark .socs { justify-content: center; }

/* ─────────────────────────────────────────────────────────────
   A LIGHT HERO — dark text, for the bright pictures in the stable

   Will picked "Vaulted room, wood beam" as the WSW default on 2026-10-26, and it is a bright
   room: white text vanishes on it. The stable records mode per picture ("light" means dark
   text) and build_agents puts .homehero--light on the section when it applies.

   Only the hero changes. The rest of the page is the same black, white and gold, and an
   agent's accent still works, because this redefines colours rather than the structure.
   ───────────────────────────────────────────────────────────── */
.homehero--light { color: var(--ink); }
/* The scrim inverts: a light wash instead of a dark one, so dark text reads over a photograph
   whose own bright and dark areas we do not control. Same element, same z-index, same job. */
.homehero--light::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.58) 34%, rgba(255,255,255,.72) 72%, rgba(255,255,255,.94) 100%),
    radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(255,255,255,.55) 100%);
}
.homehero--light .eyebrow { color: var(--ink); opacity: .72; }
.homehero--light h1 { color: var(--ink); text-shadow: none; }
.homehero--light h1 em { color: var(--gold); }
.homehero--light .homehero__lede { color: rgba(18,17,15,.78); }
.homehero--light .homehero__rule { color: rgba(18,17,15,.62); }
/* btn--ghost is white-on-white again here, for the same reason it was on the roster card. */
.homehero--light .btn--ghost { border-color: rgba(18,17,15,.34); color: var(--ink); }
.homehero--light .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.homehero--light .hsearch input, .homehero--light .hsearch select {
  background: rgba(255,255,255,.92); color: var(--ink); border-color: rgba(18,17,15,.2);
}