/* ============================================================
   TOZZI GROUP REAL ESTATE — Design System
   Carbon-copies the live brand: brick red + near-black + white,
   Jost (Avenir Next stand-in) heavy uppercase headings + Poppins body,
   square shadowless buttons, dark cinematic Arizona-dusk hero.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Jost:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  /* Brand — Talus Home Team at EveryPlace (from logo lockup) */
  --navy:        #18243c;     /* TALUS — primary brand + dark surface */
  --navy-2:      #20304e;     /* elevated navy */
  --navy-deep:   #101a2c;     /* deepest navy */
  --tan:         #9c846c;     /* HOME TEAM — warm secondary: dividers, detail */
  --tan-soft:    #c4af96;     /* lighter tan for labels on navy */
  --orange:      #e47830;     /* EveryPlace — accent / CTA */
  --orange-dark: #c5611f;     /* accent hover */
  --orange-deep: #a8531a;

  /* Legacy aliases repointed to the new palette (so existing rules restyle) */
  --brick: var(--orange);     /* was brick red → EveryPlace orange accent */
  --brick-dark: var(--orange-dark);
  --brick-deep: var(--orange-deep);
  --everyplace: var(--orange);
  --ink: var(--navy);         /* near-black surfaces → navy */
  --ink-2: var(--navy-2);
  --ink-3: #2a3c5e;

  --paper: #ffffff;
  --sand: #f6f3ef;          /* warm off-white surface */
  --sand-2: #efe9e2;
  --muted: #6b6b6b;
  --line: rgba(24, 36, 60, 0.12);
  --line-light: rgba(255, 255, 255, 0.16);

  /* Dusk hero ramp (navy → desert-orange glow) */
  --dusk-top: #141c33;
  --dusk-mid: #2b3150;
  --dusk-glow: #d06a2c;
  --dusk-low: #0e1320;

  /* Type */
  --display: 'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;  /* bold display serif (Talus classical character) */
  --body: 'Poppins', system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: var(--ink);
}
/* Serif display for the large statement headings — echoes the Talus logo's classical serif */
h1, h2, .h1, .h2, .display {
  font-family: var(--serif);
  font-weight: 700;
  font-optical-sizing: auto;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--navy);
}
.eyebrow--light { color: rgba(255,255,255,0.72); }

h1, .h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h2, .h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: 0; }
p { max-width: 62ch; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: #3a3a3a; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--sand { background: var(--sand); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .eyebrow { display: block; margin-bottom: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }

/* ---------- Buttons (rounded, shadowless) ---------- */
.btn {
  --btn-fg: #fff; --btn-bg: var(--brick);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.74rem;
  padding: 16px 30px; color: var(--btn-fg); background: var(--btn-bg);
  border: 1.5px solid var(--btn-bg); border-radius: 8px;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .25s var(--ease);
  position: relative; white-space: nowrap;
}
.btn:hover { background: var(--brick-dark); border-color: var(--brick-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--ghost-ink { --btn-bg: transparent; --btn-fg: var(--ink); border-color: rgba(27,27,27,0.45); }
.btn--ghost-ink:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--sm { padding: 12px 20px; font-size: 0.68rem; }
.btn--block { width: 100%; }

/* Text link with arrow */
.tlink {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.74rem; color: var(--brick);
  display: inline-flex; align-items: center; gap: 10px;
}
.tlink svg { transition: transform .3s var(--ease); }
.tlink:hover svg { transform: translateX(6px); }
.section--dark .tlink { color: #fff; }

/* ---------- Utility top bar ---------- */
.topbar {
  background: var(--ink-2); color: rgba(255,255,255,0.78);
  font-size: 0.74rem; letter-spacing: 0.04em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar a:hover { color: #fff; }
.topbar .topbar__right { display: flex; gap: 22px; align-items: center; }
@media (max-width: 760px){ .topbar { display: none; } }

/* ---------- Header / nav ---------- */
.header {
  position: fixed; inset: 38px 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), top .4s var(--ease);
}
.header.is-scrolled { background: var(--ink); top: 0; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
/* Permanently-solid header for pages without a dark hero (e.g. listing pages) */
.header--solid { background: var(--ink); top: 0; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; }

.brand { display: flex; align-items: center; line-height: 1; color: #fff; }
/* Talus "Home Team / at EveryPlace" logo lockup — brokerage attribution at top of every page.
   The dark-bg art (white TALUS + tan HOME TEAM + orange EveryPlace) reads on the navy header/footer. */
.brand__logo { display: block; height: 54px; width: auto; }
@media (max-width: 760px){ .brand__logo { height: 44px; } }
/* Legacy text-brand styles (kept for any fallback markup) */
.brand__main { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.18rem; }
.brand__sub { font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.62); font-family: var(--display); margin-top: 4px; }
.brand__main b { color: var(--tan); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.76rem; color: #fff; padding: 12px 16px;
  transition: color .25s var(--ease);
}
.nav__link:hover { color: var(--brick); }
.nav__link svg { width: 9px; transition: transform .3s var(--ease); opacity: .7; }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff;
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45); border-top: 3px solid var(--brick);
}
.nav__item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 11px 16px; color: var(--ink); font-size: 0.86rem;
  font-weight: 500; transition: background .2s, color .2s, padding-left .25s var(--ease);
}
.dropdown a:hover { background: var(--sand); color: var(--brick); padding-left: 22px; }

.header__actions { display: flex; align-items: center; gap: 18px; }
.header__phone { color: #fff; font-family: var(--display); font-weight: 600; letter-spacing: 0.06em; font-size: 0.86rem; display: flex; align-items: center; gap: 8px; }
.header__phone:hover { color: var(--brick); }
.header__phone svg { width: 15px; color: var(--brick); }

.hamburger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.hamburger span { display: block; height: 2px; width: 26px; background: #fff; transition: transform .3s var(--ease), opacity .3s; }
.hamburger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--ink); color: #fff;
  padding: 110px var(--gutter) 40px; transform: translateX(100%);
  transition: transform .45s var(--ease); overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem; padding: 16px 0; border-bottom: 1px solid var(--line-light); }
.drawer a:hover { color: var(--brick); }
.drawer a.drawer__cta { display: flex; justify-content: center; text-align: center; margin-top: 28px; border-bottom: none; }

@media (max-width: 1080px){
  .nav, .header__phone { display: none; }
  .hamburger { display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; padding-top: 80px; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 70% 8%, rgba(201,97,44,0.55) 0%, rgba(201,97,44,0) 45%),
    linear-gradient(180deg, var(--dusk-top) 0%, var(--dusk-mid) 42%, var(--dusk-glow) 60%, var(--dusk-low) 88%);
}
.hero__skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: 42%; object-fit: cover; }
.hero__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(18,15,18,0.88) 0%, rgba(18,15,18,0.46) 52%, rgba(18,15,18,0.12) 100%), linear-gradient(180deg, rgba(18,15,18,0.45) 0%, rgba(18,15,18,0.05) 38%, rgba(18,15,18,0.62) 100%); }
.hero__grain { position: absolute; inset: 0; z-index: 3; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay; }
.hero .container { position: relative; z-index: 4; width: 100%; }
.hero__inner { max-width: 760px; }
.hero .eyebrow { display: block; margin-bottom: 22px; }
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: rgba(255,255,255,0.86); max-width: 50ch; margin-bottom: 38px; font-weight: 300; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero search */
.searchbar {
  margin-top: 46px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18); display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto; max-width: 760px;
}
.searchbar__field { padding: 16px 20px; border-right: 1px solid rgba(255,255,255,0.14); }
.searchbar__field label { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.searchbar__field input, .searchbar__field select { width: 100%; background: transparent; border: none; color: #fff; font-family: var(--body); font-size: 0.92rem; outline: none; }
.searchbar__field select option { color: #1b1b1b; }
.searchbar__field input::placeholder { color: rgba(255,255,255,0.45); }
.searchbar__btn { background: var(--brick); display: flex; align-items: center; justify-content: center; padding: 0 26px; transition: background .3s; }
.searchbar__btn:hover { background: var(--brick-dark); }
.searchbar__btn svg { width: 22px; color: #fff; }
@media (max-width: 760px){
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar__field:nth-child(1){ grid-column: 1 / -1; }
  .searchbar__btn { grid-column: 1 / -1; padding: 16px; }
}

.hero__follow { position: absolute; right: var(--gutter); bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,0.8); font-size: 0.8rem; letter-spacing: 0.12em; }
.hero__follow a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.hero__follow a:hover { background: var(--brick); border-color: var(--brick); }
.hero__follow svg { width: 15px; }
@media (max-width: 760px){ .hero__follow { display: none; } }

/* ---------- Stat strip ---------- */
.stats { background: var(--navy-2); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(36px, 5vw, 56px) clamp(16px, 2vw, 30px); text-align: center; border-right: 1px solid rgba(255,255,255,0.18); }
.stat:last-child { border-right: none; }
.stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--orange); }
.stat__num span { font-size: 0.55em; }
.stat__label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; margin-top: 12px; color: var(--tan-soft); }
@media (max-width: 760px){ .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ border-right: none; } .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid rgba(255,255,255,0.18); } }

/* ---------- About / intro ---------- */
.about__img { position: relative; aspect-ratio: 4/5; background: var(--ink); overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__badge { position: absolute; bottom: 0; left: 0; background: var(--brick); color: #fff; padding: 22px 28px; border-radius: 8px; }
.about__badge b { font-family: var(--display); font-size: 2rem; display: block; line-height: 1; }
.about__badge span { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Areas ---------- */
.areas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.area {
  position: relative; aspect-ratio: 3/4; overflow: hidden; color: #fff; display: flex;
  align-items: flex-end; padding: 24px;
}
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); z-index: 0; }
.area::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,27,0) 30%, rgba(27,27,27,0.85) 100%); z-index: 1; transition: background .4s; }
.area:hover img { transform: scale(1.08); }
.area:hover::after { background: linear-gradient(180deg, rgba(180,48,49,0.15) 0%, rgba(122,31,32,0.9) 100%); }
.area__name { position: relative; z-index: 2; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; }
.area__name span { display: block; font-size: 0.66rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.75); margin-top: 6px; font-weight: 500; }
.area--tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 900px){ .areas__grid { grid-template-columns: 1fr 1fr; } .area--tall { grid-row: span 1; aspect-ratio: 3/4; } }
@media (max-width: 540px){ .areas__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Listings ---------- */
.listings__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(27,27,27,0.4); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__chip { position: absolute; top: 14px; left: 14px; background: var(--brick); color: #fff; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; padding: 7px 12px; border-radius: 8px; }
.card__chip--sold { background: var(--ink); }
.card__fav { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; background: rgba(255,255,255,0.9); display: grid; place-items: center; color: var(--ink); transition: background .3s, color .3s; }
.card__fav:hover { background: var(--brick); color: #fff; }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card__price { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--ink); }
.card__addr { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.card__addr b { color: var(--ink); font-weight: 600; display: block; text-transform: none; }
.card__meta { display: flex; gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; font-size: 0.82rem; color: var(--ink); }
.card__meta span { display: flex; align-items: center; gap: 7px; }
.card__meta svg { width: 16px; color: var(--brick); }
.listings-empty { padding: 60px 0; text-align: center; color: var(--muted); }

.area-map { aspect-ratio: 16/7; background: var(--sand-2); border: 1px solid var(--line); overflow: hidden; position: relative; }

/* Area page "at a glance" photo (replaced the Mapbox map 2026-08-23).
   Sizes to the image's own proportions instead of forcing a 16/7 crop, so a
   portrait shot is shown whole rather than having its top and bottom cut off.
   Tony's current area images are all 1290x900 landscape, so this is a no-op
   for them today; it matters the moment a differently-shaped photo is added. */
.area-photo {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--sand-2);
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.area-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Stops a tall portrait image from running the section off the screen. */
  max-height: min(78vh, 760px);
  object-fit: contain;
}
.area-map .mapboxgl-map { width: 100%; height: 100%; }
.area-map .mapboxgl-ctrl-attrib { font-size: 0.62rem; }
.area-map .mapboxgl-ctrl-logo { opacity: 0.6; }
.area-map .mapboxgl-popup-content { padding: 10px 14px; font-size: 0.82rem; border-radius: 6px; }
.area-map-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--brick); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); cursor: pointer; }
.area-map-pin--ep { background: var(--navy); }
@media (max-width: 980px){ .listings__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .listings__grid { grid-template-columns: 1fr; } }

/* ---------- Feature: landing page pitch ---------- */
.feature { background: var(--ink); color: #fff; overflow: hidden; }
.feature__mock { position: relative; }
.feature__phone { width: 100%; max-width: 340px; margin-inline: auto; border: 10px solid #000; border-radius: 38px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7); }
.feature__phone img { width: 100%; aspect-ratio: 9 / 19; object-fit: cover; display: block; }
.feature__list { display: grid; gap: 22px; margin-top: 34px; }
.feature__li { display: flex; gap: 16px; align-items: flex-start; }
.feature__li .n { font-family: var(--display); font-weight: 800; color: var(--brick); font-size: 1.1rem; min-width: 30px; }
.feature__li b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; margin-bottom: 4px; }
.feature__li p { color: rgba(255,255,255,0.7); font-size: 0.92rem; }

/* ---------- Valuation band ---------- */
.valuation { position: relative; color: #fff; overflow: hidden; background: linear-gradient(120deg, var(--navy-deep), var(--navy-2)); }
.valuation .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.valuation__form { background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.2); padding: 30px; display: grid; gap: 14px; }
.valuation__form input { width: 100%; padding: 15px 18px; background: rgba(255,255,255,0.95); border: none; font-family: var(--body); font-size: 0.95rem; }
.valuation__form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 860px){ .valuation .container { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.step { background: #fff; padding: 38px 32px; transition: background .35s var(--ease); }
.step:hover { background: var(--sand); }
.step__n { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--sand-2); line-height: 1; transition: color .35s; }
.step:hover .step__n { color: var(--brick); }
.step h3 { margin: 14px 0 10px; font-size: 1.15rem; }
.step p { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 860px){ .process__grid { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { background: #fff; border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.review__stars { display: flex; gap: 3px; color: var(--brick); }
.review__stars svg { width: 18px; }
.review p { font-size: 0.96rem; color: #333; line-height: 1.7; }
.review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.review__av { width: 42px; height: 42px; border-radius: 50%; background: var(--brick); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.review__by b { font-size: 0.9rem; } .review__by span { font-size: 0.78rem; color: var(--muted); display: block; }
@media (max-width: 860px){ .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- Final CTA ---------- */
.cta { position: relative; background: var(--ink); color: #fff; text-align: center; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 120% at 50% 0%, rgba(180,48,49,0.35), transparent 60%); }
.cta .container { position: relative; z-index: 2; }
.cta h2 { color: #fff; margin-bottom: 22px; }
.cta__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Footer ---------- */
.footer { background: #141414; color: rgba(255,255,255,0.7); padding-block: 70px 0; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line-light); }
.footer h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.2em; margin-bottom: 22px; }
.footer a { display: block; padding: 7px 0; font-size: 0.9rem; transition: color .25s, padding-left .25s var(--ease); }
.footer a:hover { color: var(--brick); padding-left: 6px; }
.footer__brand .brand { color: #fff; margin-bottom: 18px; }
.footer__brand .brand__logo { height: 62px; }
.footer__contact a { display: flex; align-items: center; gap: 10px; }
.footer__contact svg { width: 15px; color: var(--brick); flex-shrink: 0; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; font-size: 0.76rem; color: rgba(255,255,255,0.45); flex-wrap: wrap; }
.footer__legal { max-width: 760px; font-size: 0.7rem; line-height: 1.6; color: rgba(255,255,255,0.4); padding-bottom: 30px; }
@media (max-width: 860px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .footer__top { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile call/text bar ---------- */
.mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; grid-template-columns: 1fr 1fr; box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.3); }
.mobilebar a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: #fff; }
.mobilebar__call { background: var(--ink); } .mobilebar__text { background: var(--brick); }
.mobilebar a:active { filter: brightness(1.15); }
.mobilebar svg { width: 18px; }
@media (max-width: 1080px){ .mobilebar { display: grid; } body { padding-bottom: 54px; } }

/* ---------- Page hero (interior pages) ---------- */
.pagehero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; padding: 150px 0 64px; }
.pagehero__bg { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.pagehero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,15,18,0.5) 0%, rgba(18,15,18,0.25) 38%, rgba(18,15,18,0.92) 100%); }
.pagehero .container { position: relative; z-index: 2; }
.pagehero .eyebrow { display: block; }
.pagehero h1 { color: #fff; margin: 18px 0 18px; }
.pagehero p { color: rgba(255,255,255,0.85); max-width: 56ch; font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.2rem); }

/* ---------- Team grid ---------- */
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.member { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.member:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(27,27,27,0.4); }
.member__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.member:hover .member__photo img { transform: scale(1.05); }
.member__ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy-2), var(--navy-deep)); color: var(--tan-soft); font-family: var(--display); font-weight: 800; font-size: 3rem; }
.member__lead { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--brick); color: #fff; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; padding: 6px 11px; }
.member__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.member__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.1rem; color: var(--ink); }
.member__role { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; color: var(--brick); }
.member__contact { display: flex; gap: 8px; margin-top: 14px; }
.member__contact a { width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.member__contact a:hover { background: var(--brick); color: #fff; border-color: var(--brick); }
/* These icon links were reported as "not wired up" (2026-08-18). They were
   always correct tel:/mailto: anchors — the problem was that they looked
   inert: a bare 1px grey square with no label, no focus ring and no press
   feedback reads as a placeholder, not a control. Resting state is now a
   tinted surface, and focus-visible/active exist per the interactive-states
   rule (they were missing entirely). */
.member__contact a { background: rgba(24,36,60,0.04); border-radius: 3px; }
.member__contact a:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; background: var(--brick); color: #fff; border-color: var(--brick); }
.member__contact a:active { transform: translateY(1px); background: var(--brick-dark, var(--brick)); color: #fff; border-color: var(--brick-dark, var(--brick)); }
.member__contact svg { width: 16px; }
@media (max-width: 1080px){ .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .team__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px){ .team__grid { grid-template-columns: 1fr; } }

/* ---------- Values ---------- */
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value { padding: 36px 32px; border: 1px solid var(--line); background: #fff; transition: background .35s var(--ease); }
.value:hover { background: var(--sand); }
.value__icon { width: 46px; height: 46px; color: var(--brick); margin-bottom: 20px; }
.value h3 { font-size: 1.2rem; margin-bottom: 10px; }
.value p { font-size: 0.92rem; color: var(--muted); }
@media (max-width: 760px){ .values__grid { grid-template-columns: 1fr; } }

/* ---------- Highlights list (area pages) ---------- */
.highlights { display: grid; gap: 13px; margin: 22px 0 32px; }
.highlights li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; color: #333; }
.highlights svg { width: 18px; color: var(--brick); flex-shrink: 0; margin-top: 3px; }

/* ---------- Scroll reveal ----------
   Hidden state is gated on .is-ready (added by JS). If JS or GSAP fails
   to load, nothing is hidden — content stays fully visible. Progressive
   enhancement, never a blank page. */
.is-ready .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.is-ready .reveal.in { opacity: 1; transform: none; }
.is-ready [data-stagger] > * { opacity: 0; transform: translateY(28px); }
.is-ready [data-stagger].in > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Agent Hub (private portal) ---------- */
.hubhead { position: relative; overflow: hidden; color: #fff; padding: 150px 0 60px;
  background: radial-gradient(120% 150% at 88% -20%, rgba(228,120,48,0.20), transparent 52%), linear-gradient(155deg, var(--navy-deep), var(--navy-2)); }
.hubhead .eyebrow { display: block; }
.hubhead h1 { color: #fff; margin: 16px 0 14px; }
.hubhead p { color: rgba(255,255,255,0.78); max-width: 54ch; font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.18rem); }
.hubhead__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.hubhead__acct { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-light); padding: 14px 18px; }
.hubhead__avatar { width: 42px; height: 42px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; display: grid; place-items: center; border-radius: 50%; }
.hubhead__acct-id b { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--tan-soft); }
.hubhead__acct-id span { font-size: 0.86rem; color: #fff; }
.hubhead__signout { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); border-left: 1px solid var(--line-light); padding-left: 16px; }
.hubhead__signout:hover { color: #fff; }
.hub-search { position: relative; margin-top: 34px; display: flex; align-items: center; gap: 14px; background: #fff; padding-left: 20px; max-width: 640px; }
.hub-search svg { width: 20px; color: var(--navy); flex-shrink: 0; }
.hub-search input { flex: 1; border: none; outline: none; font-family: var(--body); font-size: 0.98rem; padding: 17px 0; color: var(--ink); background: transparent; }
.hub-search__hint { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); background: var(--sand); padding: 0 18px; align-self: stretch; display: flex; align-items: center; }
.hub-note { display: flex; align-items: center; gap: 14px; background: var(--sand); border: 1px solid var(--line); padding: 16px 24px; margin-top: 26px; font-size: 0.86rem; color: #4a4a4a; line-height: 1.55; }
.hub-note svg { width: 20px; color: var(--tan); flex-shrink: 0; }
.hub-note b { color: var(--navy); }
.hub-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hub-quickcard { display: flex; align-items: center; gap: 16px; background: var(--navy); color: #fff; padding: 22px 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hub-quickcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(16,26,44,0.7); }
.hub-quickcard__ic { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; background: rgba(228,120,48,0.16); color: var(--orange); }
.hub-quickcard__ic svg { width: 22px; }
.hub-quickcard__tx b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.96rem; letter-spacing: 0.01em; }
.hub-quickcard__tx span { font-size: 0.78rem; color: rgba(255,255,255,0.68); }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hubcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 30px 28px 22px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.hubcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(24,36,60,0.4); }
.hubcard__ic { width: 54px; height: 54px; display: grid; place-items: center; background: var(--sand); color: var(--navy); margin-bottom: 22px; transition: background .35s var(--ease), color .35s var(--ease); }
.hubcard__ic svg { width: 26px; }
.hubcard:hover .hubcard__ic { background: var(--navy); color: #fff; }
.hubcard h3 { font-family: var(--display); font-weight: 700; text-transform: none; letter-spacing: -0.01em; font-size: 1.12rem; line-height: 1.2; margin-bottom: 10px; }
.hubcard p { font-size: 0.9rem; color: #555; line-height: 1.6; flex: 1; margin-bottom: 20px; }
.hubcard__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.hubcard__count { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.hubcard__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--orange); transition: gap .3s var(--ease); }
.hubcard__link svg { width: 16px; }
.hubcard:hover .hubcard__link { gap: 12px; }
@media (max-width: 940px){ .hub-grid, .hub-quick { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .hub-grid, .hub-quick { grid-template-columns: 1fr; } .hub-search__hint { display: none; } .hubhead__acct { width: 100%; } }

/* ============================================================
   Agent pages (agent-<slug>.html, generated by build-agents.mjs)
   Built from the existing Talus tokens — navy surface, tan detail,
   orange accent, Jost display over Poppins body — so these pages read
   as part of the site rather than a bolt-on. Two new components only:
   the agent hero and the teammate strip.
   ============================================================ */
/* 150px top padding matches .pagehero — the site header is position:fixed
   and overlays the first 80px of any section, so a smaller value tucks
   the portrait under the nav. */
.agenthero { background: var(--navy); color: #fff; padding: 150px 0 72px; position: relative; overflow: hidden; }
/* Tan hairline echoing the logo's HOME TEAM rule, plus a soft radial lift
   off the deep navy so the portrait doesn't sit on a flat field. */
.agenthero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 15% 0%, rgba(156,132,108,0.20), transparent 60%); pointer-events: none; }
.agenthero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--tan), var(--orange)); }
.agenthero .container { position: relative; z-index: 1; }
.agenthero__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.agenthero__media { position: relative; }
.agenthero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; display: block; border: 1px solid rgba(255,255,255,0.14); }
.agenthero__ph { width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--navy-2); border: 1px solid rgba(255,255,255,0.14); font-family: var(--display); font-weight: 800; font-size: 3.4rem; color: var(--tan-soft); letter-spacing: 0.04em; }
.agenthero__lead { position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff; font-family: var(--display); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 7px 12px; }
/* Explicit #fff: the base `h1`/`h2` rules set color directly, which beats
   the white inherited from .agenthero — without this the name renders
   navy-on-navy and is invisible. Caught in review 2026-08-18. */
.agenthero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.04; margin: 14px 0 6px; letter-spacing: -0.02em; color: #fff; }
.agenthero__role { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--tan-soft); }
.agenthero__bio { margin-top: 20px; max-width: 54ch; color: rgba(255,255,255,0.82); line-height: 1.7; }
.agenthero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.agenthero__email { margin-top: 16px; font-size: 0.86rem; }
.agenthero__email a { color: var(--tan-soft); border-bottom: 1px solid rgba(196,175,150,0.4); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.agenthero__email a:hover { color: #fff; border-color: #fff; }
.agenthero__email a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 860px) {
  .agenthero__grid { grid-template-columns: 1fr; gap: 28px; }
  .agenthero__media { max-width: 240px; }
}

/* Teammate strip — every agent page links to every other, which is also
   how these pages get internally linked to each other for crawlers. */
.agentstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px; }
.agentstrip__item { display: grid; gap: 10px; text-align: center; }
.agentstrip__item img, .agentstrip__ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; display: block; border-radius: 50%; }
.agentstrip__ph { display: grid; place-items: center; background: var(--sand-2); font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--tan); }
.agentstrip__name { font-family: var(--display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink); }
.agentstrip__item img, .agentstrip__ph { transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s; }
.agentstrip__item:hover img, .agentstrip__item:hover .agentstrip__ph { transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(24,36,60,0.5); }
.agentstrip__item:hover .agentstrip__name { color: var(--orange); }
.agentstrip__item:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.agentstrip__item:active img, .agentstrip__item:active .agentstrip__ph { transform: translateY(-1px); }

/* Team cards on about.html now link through to each agent's own page. */
.member__link { display: block; }
.member__name a { color: inherit; transition: color .25s; }
.member__name a:hover { color: var(--orange); }
.member__name a:focus-visible, .member__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.agentcard__top b a { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px; transition: border-color .25s; }
.agentcard__top b a:hover { border-color: #fff; }
.agentcard__top b a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Optional per-agent Zillow profile link (roster `zillow` field). A link
   out, not an embed — see teamRoster.js for why. */
.agenthero__zillow { margin-top: 10px; font-size: 0.84rem; }
.agenthero__zillow a { color: var(--tan-soft); border-bottom: 1px solid rgba(196,175,150,0.4); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.agenthero__zillow a:hover { color: #fff; border-color: #fff; }
.agenthero__zillow a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- CTA band: shared values promoted out of inline styles (2026-08-18) ----
   .cta supplies color + centering only; .section supplies the padding, so
   the two classes must be used TOGETHER (`class="section cta"`). Using
   .cta alone gives a section with padding:0 — that's what made the agent
   pages' CTA sit flush against the footer with no breathing room.

   The h2/p values below are exactly what all 10 existing CTA sections
   already carry as identical inline styles, so those pages are unchanged
   (inline still wins). This just means new markup doesn't have to repeat
   them — and fixes the real bug: without `margin: 0 auto` the paragraph's
   max-width box pins left while its text centers inside it, so the copy
   sits visibly off-centre from the heading and buttons above/below it. */
.cta h2 { margin: 16px 0 10px; font-size: clamp(2.2rem, 5vw, 4rem); }
.cta p { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0 auto; }
.cta .eyebrow { display: block; }

/* ---- No-photo placeholder for listing cards (2026-08-18) ----
   Replaces a stock-photo fallback that was showing a REAL, ARMLS-watermarked
   photo of one specific house (street number 42441, which happened to be
   both listing-01.jpg and listing-03.jpg) against other listings' addresses
   and prices. All 531 non-team EveryPlace rows have zero photos, so every
   one of those cards was captioned with someone else's home. That is
   misleading advertising on a brokerage site, not a cosmetic bug.

   This placeholder is deliberately, obviously not a photograph. */
.card__noimg {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(156,132,108,0.20), transparent 65%),
    var(--navy);
  color: rgba(255,255,255,0.60);
  text-align: center; padding: 20px;
}
.card__noimg svg { width: 34px; height: 34px; opacity: 0.55; }
.card__noimg span {
  font-family: var(--display); font-size: 0.64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.6;
}