/* ===== FONTS =====
   Self-hosted from R2 rather than fetched from Google. Three reasons, in order
   of how much they cost: a third-party font host is a second DNS lookup, a
   second TLS handshake and a dependency whose downtime is invisible to us; the
   files are served with max-age=31536000, immutable, which Google caps far
   lower; and nothing about a visitor is announced to a third party.

   These are the same subsetted WOFF2 files Google serves - same unicode-range
   splits, so a page still downloads only the latin range it needs - copied to
   c21-branding/fonts/ and served from our own domain. Regenerate them with the
   manifest rather than editing by hand: the file names encode style, weight
   and subset, and a mismatch here fails silently as a fallback face.
   ================= */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/fraunces/fraunces-italic-300-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/fraunces/fraunces-italic-300-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/fraunces/fraunces-normal-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/fraunces/fraunces-normal-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/inter/inter-normal-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://library.c21masters.com/c21-branding/fonts/inter/inter-normal-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   HARBOR — Century 21 Masters team template
   Mirror of https://library.c21masters.com/global-css/harbor.css
   --------------------------------------------------------------------
   Converted from the "TK Realtors" source. Warm gold on white with
   graphite dark sections, Fraunces over Inter, pill buttons and 14px
   cards. Against its siblings: Vanguard is Montserrat black-and-gold with
   sharp 0px corners, Meridian is Poppins and emerald with medium radii.

   A TEAM template: agentInfo is the team leader and the roster comes from
   agent.team.members. See section 3c of ADDING-A-TEMPLATE.md.

   THE SOURCE WAS A REAL, LIVE SITE - TK Realtors, Kyler Battleson and
   Trace Emerson, Canyon Lake. Every trace of it is gone: 108 mentions of
   the town, both agents by name, both DRE numbers, the CENTURION award
   chips and the per-agent pull quotes. What is left renders from
   agent.json, so the same markup serves any team in any city. That was
   the whole job here - the design was already finished.

   Dropped with the markup they styled:

     .hero__stats, .stat,
     .stat-strip         invented figures. agent.json holds none of them,
                         and this ships to every team
     .listing-card,
     .listings-grid      the listings page, now the Ylopo widget
     .testi-*            hardcoded testimonials, now the reviews slot
     .acc-*, .accordion  no converted template carries an FAQ
     .form, .field,
     .search-fallback    form-inject.js owns the form and brings its CSS
     .agent-card__awards,
     .agent-card__quote  per-agent awards and pull quotes we do not hold
     .cc--*              colour overrides for four hardcoded towns
     .site-footer,
     .footer-*           footer.js injects the footer and defines its own
                         .footer-bottom; these would restyle it, and it
                         carries the Fair Housing text and EHO badges

   Icons are an inline SVG sprite in the layout, which is how the source
   did it - no request, and they render before any script runs.
   ===================================================================== */

/* =============================================================
   TK REALTORS — CENTURY 21 Masters | Canyon Lake, CA
   Standalone stylesheet. Mobile-first architecture.
   -------------------------------------------------------------
   Sections:
   1.  Reset
   2.  Variables
   3.  Base / Typography
   4.  Layout helpers / Utilities
   5.  Buttons
   6.  Forms
   7.  Navigation / Header
   8.  Hero
   9.  Sections & headings
   10. Agent cards (Featured Agents)
   11. Cards (features, amenities, communities)
   12. Listings
   13. Testimonials
   14. FAQ / Accordion
   15. CTA band
   16. Footer
   17. Animations
   18. Media queries (progressive enhancement)
   ============================================================= */

/* =================== 1. RESET =================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  min-height: 100svh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* contain off-canvas mobile drawer; never scroll sideways */
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
:target { scroll-margin-top: 90px; }
/* =================== 2. VARIABLES =================== */
:root {
  /* Brand palette — CENTURY 21 "Relentless Gold" + graphite */
  --primary:      #b6a475;   /* C21 gold */
  --primary-dark: #97854f;
  --primary-soft: #d9cca9;
  --secondary:    #1c1c1e;   /* near-black graphite */
  --secondary-2:  #2b2b2f;
  --accent:       #b6a475;

  --text:         #23231f;
  --text-muted:   #5f5f58;
  --text-invert:  #f7f4ec;
  --background:   #ffffff;
  --surface:      #faf7f0;   /* warm off-white */
  --surface-2:    #f1ebdd;
  --border:       #e6ded0;
  --border-dark:  #3a3a3f;

  /* Typography */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: clamp(2.5rem, 6vw, 5rem);
  --space-2xl: clamp(3.5rem, 9vw, 7rem);

  /* Structure */
  --container: 1200px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --header-h: 66px;

  --shadow-sm: 0 1px 3px rgba(28, 28, 30, .08);
  --shadow-md: 0 10px 30px -12px rgba(28, 28, 30, .22);
  --shadow-lg: 0 24px 60px -20px rgba(28, 28, 30, .32);

  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* =================== 3. BASE / TYPOGRAPHY =================== */
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--background);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga", "calt";
}
::selection { background: var(--primary); color: #1c1c1e; }
::-moz-selection { background: var(--primary); color: #1c1c1e; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  color: var(--secondary);
  text-wrap: balance;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}
h1 { font-weight: 600; letter-spacing: -0.028em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.65rem); }
h4 { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.25rem); }
p { color: var(--text-muted); }
p.lead {
  font-size: clamp(1.075rem, 1rem + 0.5vw, 1.35rem);
  color: var(--text);
  line-height: 1.55;
  text-wrap: pretty;
}
strong { color: var(--text); font-weight: 600; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--primary);
}
.eyebrow--center { justify-content: center; }
.eyebrow--invert { color: var(--primary-soft); }
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* =================== 4. LAYOUT / UTILITIES =================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.container--narrow { max-width: 820px; }
.section { padding-block: var(--space-2xl); }
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--surface); }
.section--dark {
  background: var(--secondary);
  color: var(--text-invert);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #c9c6bd; }
.section-head { max-width: 720px; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: var(--space-md); }
.text-center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon {
  width: 1.25em; height: 1.25em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
/* Skip link */
.skip-link {
  position: absolute;
  left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--secondary);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }
/* =================== 5. BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--primary);
  color: #1c1c1e;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn--dark { background: var(--secondary); color: #fff; }
.btn--dark:hover { background: #000; box-shadow: var(--shadow-md); }
.btn--outline {
  background: transparent;
  border-color: var(--secondary);
  color: var(--secondary);
}
.btn--outline:hover { background: var(--secondary); color: #fff; }
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.btn--ghost-light:hover { background: #fff; color: var(--secondary); border-color: #fff; }
.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .92rem; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
/* =================== 7. NAVIGATION / HEADER =================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  padding-block: .5rem;
}
/* Graphite tile showcasing the TK emblem — crisp at any DPI */
.brand__tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--secondary-2), var(--secondary));
  box-shadow: inset 0 0 0 1px rgba(182, 164, 117, .35), var(--shadow-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.brand__tile img { height: 34px; width: auto; }
.brand:hover .brand__tile {
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-md);
  transform: translateY(-1px);
}
/* Mobile drawer nav */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--secondary);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  /* Explicit height: the header's backdrop-filter makes it the containing
     block, so `bottom:0` can't be relied on to stretch the drawer. */
  height: calc(100dvh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--space-lg) clamp(1.1rem, 4vw, 2.5rem);
  background: var(--background);
  border-top: 1px solid var(--border);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s var(--ease);
  overflow-y: auto;
}
.nav-menu.is-open { transform: translateX(0); visibility: visible; }
.nav-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem .5rem;
  font-size: 1.15rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  color: var(--secondary);
}
.nav-menu a .icon { color: var(--primary-dark); }
.nav-menu a[aria-current="page"] { color: var(--primary-dark); font-weight: 700; }
.nav-menu .btn { margin-top: var(--space-md); }
.nav-cta { display: none; }
body.nav-open { overflow: hidden; }
/* =================== 8. HERO =================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(88svh, 760px);
  padding-block: var(--space-2xl);
  color: var(--text-invert);
  /* The source layered the photograph into this shorthand, pointing at a file
     in its own repo. The photograph is per agent here, and a CSS background
     cannot carry a srcset - it would spend the whole two-transformation
     budget on one width. So the plate is an <img> below and this keeps only
     the gradients, with the radial as the ground an agent without a hero
     photo still gets. */
  background:
    linear-gradient(180deg, rgba(18,18,20,.68) 0%, rgba(18,18,20,.55) 45%, rgba(18,18,20,.85) 100%),
    radial-gradient(120% 90% at 80% 10%, #3a4a52 0%, #23303a 40%, #14181d 100%);
  overflow: hidden;
}
/* Behind the gradients, which are painted by .hero itself. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
@media (min-width: 768px) {.hero {
    background:
      linear-gradient(180deg, rgba(18,18,20,.68) 0%, rgba(18,18,20,.55) 45%, rgba(18,18,20,.85) 100%),
      url("../src/images/hero-canyon-lake.webp") center 35% / cover no-repeat,
      radial-gradient(120% 90% at 80% 10%, #3a4a52 0%, #23303a 40%, #14181d 100%);
  }
}
.hero::before {
  /* The gradient scrim, above the photograph and below the copy. On .hero
     itself it would paint under the <img> and the text would sit on bare
     photo. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deepened from the source's .68/.55/.85. That was tuned against one
     dim lake photograph; this ships with whatever hero an agent
     uploads, and a bright one left the lead paragraph unreadable. */
  background: linear-gradient(180deg, rgba(18,18,20,.80) 0%, rgba(18,18,20,.68) 45%, rgba(18,18,20,.90) 100%);
  pointer-events: none;
}
.hero::after {
  /* subtle water shimmer line */
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(182,164,117,.10));
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { color: #fff; }
.hero p.lead { color: #e9e6dd; margin-top: var(--space-md); }
.hero .btn-row { margin-top: var(--space-lg); }
.hero__search {
  margin-top: var(--space-lg);
  max-width: 640px;
  min-height: 56px; /* reserve space for the async widget — no layout shift */
}
.hero__search .YLOPO_searchWidget { width: 100%; }
/* Give the third-party search input a refined, on-brand frame.
   The visible white bar is the widget's .multi-location-autocomplete box. */
.hero__search :is(input, .YLOPO_searchWidget input) {
  border-radius: var(--radius-pill) !important;
}
.hero__search .multi-location-autocomplete {
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-md);
  padding-inline: .5rem;
}
.hero__search :is(.grouped-location-autocomplete, .grouped-location-autocomplete-input) {
  border-radius: var(--radius-pill) !important;
}
/* Page hero (inner pages) */
.page-hero {
  padding-block: var(--space-2xl);
  background:
    linear-gradient(180deg, rgba(18,18,20,.82), rgba(18,18,20,.72)),
    url("../src/images/lifestyle-lake-768.webp") center / cover no-repeat,
    radial-gradient(120% 120% at 85% 0%, #3a4a52 0%, #20272e 55%, #14181d 100%);
  color: var(--text-invert);
  text-align: center;
}
@media (min-width: 768px) {.page-hero {
    background:
      linear-gradient(180deg, rgba(18,18,20,.82), rgba(18,18,20,.72)),
      url("../src/images/lifestyle-lake.webp") center / cover no-repeat,
      radial-gradient(120% 120% at 85% 0%, #3a4a52 0%, #20272e 55%, #14181d 100%);
  }
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #dad7cd; max-width: 620px; margin-inline: auto; margin-top: var(--space-sm); }
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: .5rem;
  font-size: .85rem;
  color: #b9b6ac;
  margin-bottom: var(--space-md);
}
.breadcrumb a:hover { color: var(--primary-soft); }
/* =================== 9. SECTIONS =================== */
.split { display: grid; gap: var(--space-xl); align-items: center; }
.media-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
  min-height: 300px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
}
.media-card--lake {
  background:
    linear-gradient(180deg, rgba(20,24,29,.12), rgba(20,24,29,.45)),
    url("../src/images/lifestyle-lake.webp") center / cover no-repeat,
    radial-gradient(110% 100% at 30% 20%, #6d8794 0%, #3c5460 45%, #223038 100%);
}
.media-card > svg { display: none; }
.media-fig { position: relative; }
.media-fig figcaption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  background: rgba(28,28,30,.7);
  color: #fff;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  backdrop-filter: blur(4px);
}
/* =================== 10. AGENT CARDS (FEATURED) =================== */
.agents-grid {
  display: grid;
  gap: var(--space-lg);
}
.agents-grid.agents-grid--stack { grid-template-columns: 1fr; }
.agent-card--narrow { width: 100%; max-width: 420px; margin-inline: auto; }
.agent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.agent-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); }
.agent-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, #2b333a 0%, #1b2126 100%);
  color: #fff;
}
.agent-card__media picture { height: 100%; }
.agent-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.avatar-photo {
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
}
/* Team photo band */
.team-photo {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.team-photo img { width: 100%; height: auto; display: block; }
.team-photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(transparent, rgba(20,24,29,.88));
  color: #fff;
  font-weight: 600;
  text-align: center;
}
/* Canyon Lake photo gallery */
.gallery { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) {.gallery { grid-template-columns: repeat(3, 1fr); }
}
.agent-card__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--primary);
  color: #1c1c1e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
}
.agent-card__badge .icon { width: 14px; height: 14px; }
.avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: #1c1c1e;
  background: linear-gradient(150deg, var(--primary-soft), var(--primary));
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-md);
}
.agent-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.agent-card__name { margin-top: .2rem; }
.agent-card__role {
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary-dark);
  font-weight: 700;
}
.agent-card__license { font-size: .8rem; color: var(--text-muted); }
.agent-card__bio { color: var(--text-muted); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
}
.chip .icon { width: 14px; height: 14px; }
.agent-card__contact {
  display: grid;
  gap: .4rem;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.agent-card__contact a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: var(--secondary);
  min-height: 44px;
}
.agent-card__contact a .icon { color: var(--primary-dark); width: 1.05em; height: 1.05em; }
.agent-card__contact a:hover { color: var(--primary-dark); }
.agent-card__actions { display: grid; gap: .5rem; margin-top: var(--space-sm); }
/* Compact agent card (contact page): photo + details in a row */
.agent-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--space-lg);
}
.agent-card__header .avatar-photo { width: 72px; height: 72px; flex-shrink: 0; }
.agent-card__header-info { display: grid; gap: .15rem; }
.agent-card__header-info .agent-card__name { font-size: 1.3rem; margin: 0; }
.agent-card__contact--flush {
  margin: 0 var(--space-lg) var(--space-lg);
  padding-top: var(--space-md);
}
/* =================== 11. CARDS =================== */
.card-grid { display: grid; gap: var(--space-md); }
.feature-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  height: 100%;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-card__icon {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--primary-dark);
  margin-bottom: var(--space-sm);
}
.feature-card__icon .icon { width: 26px; height: 26px; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.amenity-list {
  display: grid;
  gap: .7rem;
}
.amenity-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text);
}
.amenity-list .icon { color: var(--primary-dark); margin-top: .15rem; }
/* Community cards */
.community-grid {
  display: grid;
  gap: var(--space-md);
}
.community-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-lg);
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.community-card--featured { min-height: 340px; }
.community-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.community-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,29,.25) 30%, rgba(20,24,29,.85) 100%);
  z-index: 1;
}
.community-card > * { position: relative; z-index: 2; }
.community-card h3 { color: #fff; }
.community-card p { color: #e2dfd6; }
.community-card .tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--primary);
  color: #1c1c1e;
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  margin-bottom: .5rem;
}
.community-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary-soft);
}
.community-card__cta .icon { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.community-card:hover .community-card__cta { color: #fff; }
.community-card:hover .community-card__cta .icon { transform: translateX(4px); }
/* Steps / process */
.steps { display: grid; gap: var(--space-md); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.step__num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary-soft);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.step__num::before { content: counter(step); }
/* =================== 15. CTA BAND =================== */
.cta-band {
  background:
    linear-gradient(180deg, rgba(18,18,20,.86), rgba(18,18,20,.9)),
    radial-gradient(120% 130% at 85% 10%, #3a4a52 0%, #20272e 55%, #14181d 100%);
  color: var(--text-invert);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #dad7cd; max-width: 560px; margin-inline: auto; margin-top: var(--space-sm); }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-lg); }
.social-row { display: flex; gap: .6rem; margin-top: var(--space-md); }
.social-row a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  color: #d7d4cb;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s;
}
.social-row a:hover { background: var(--primary); color: #1c1c1e; border-color: var(--primary); }
/* =================== 17. ANIMATIONS =================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
.reveal { opacity: 1; transform: none; }
}
/* No-JS safeguard: never keep content hidden if scripting is unavailable */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}
/* =================== 17b. DESIGN POLISH / MICRO-INTERACTIONS =================== */

/* Tactile button lift */
.btn { letter-spacing: .01em; }
.btn--primary:hover, .btn--dark:hover, .btn--outline:hover, .btn--ghost-light:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Agent portrait subtle zoom on hover */
.agent-card__photo { transition: transform .6s var(--ease); }
.agent-card:hover .agent-card__photo { transform: scale(1.045); }
/* Community card image drift */
.community-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
/* Gallery images */
.gallery img { transition: transform .5s var(--ease), box-shadow .3s var(--ease); }
.gallery img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Feature/testimonial cards: refined lift already set; add border warm-up */
.feature-card, .agent-card { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.feature-card:hover { border-color: var(--primary-soft); }
/* Eyebrow line grows a touch on section hover for life */
.section-head .eyebrow::before { transition: width .3s var(--ease); }
/* Refined, consistent focus ring */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Sharper image rendering + no blue tap highlight */
img { image-rendering: auto; }
a, button { -webkit-tap-highlight-color: transparent; }
/* =================== 18. MEDIA QUERIES =================== */

/* ≥ 480px — large phones */
@media (min-width: 480px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}
/* ≥ 640px — small tablets */
@media (min-width: 640px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .listings-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
  .community-grid { grid-template-columns: repeat(2, 1fr); }
  .community-card--featured { grid-column: 1 / -1; }
}
/* ≥ 900px — tablets / small desktop: real nav */
@media (min-width: 900px) {
  :root { --header-h: 74px; }

  .brand__tile { width: 58px; height: 58px; border-radius: 14px; }
  .brand__tile img { height: 38px; }

  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: .3rem;
    padding: 0;
    inset: auto;
    top: auto;
    height: auto;
    min-height: 0;
    transform: none;
    visibility: visible;
    background: transparent;
    border: none;
    overflow: visible;
    width: auto;
  }
  .nav-menu a {
    position: relative;
    font-size: .95rem;
    font-weight: 500;
    padding: .5rem .2rem;
    margin-inline: .55rem;
    border: none;
    border-radius: 0;
  }
  .nav-menu a .icon { display: none; }
  .nav-menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease);
  }
  .nav-menu a:hover { color: var(--primary-dark); background: transparent; }
  .nav-menu a:hover::after,
  .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-menu a[aria-current="page"] { color: var(--primary-dark); font-weight: 600; }
  .nav-menu .btn { display: none; }

  .nav-cta { display: inline-flex; }

  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .media-card { order: 2; }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .listings-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .community-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .steps--horizontal { grid-template-columns: repeat(4, 1fr); }

  .footer-main { grid-template-columns: 1.7fr 1fr 1.3fr; gap: var(--space-2xl); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }

  .hero__stat .num { font-size: 2.4rem; }
}
/* ≥ 1100px — desktop refinements */
@media (min-width: 1100px) {
  .agents-grid { gap: var(--space-xl); }
  /* Featured community spans the full first row; the rest sit three-up below */
  .community-grid { grid-template-columns: repeat(3, 1fr); }
  .split--wide { grid-template-columns: 1.1fr .9fr; }
}

/* =====================================================================
   Priority+ navigation. See global-js/nav-fit.js and section 3a of
   ADDING-A-TEMPLATE.md. The source collapsed at a fixed width; this
   measures the row, because the wordmark is the team's name and no single
   pixel value is right for every team.
   ===================================================================== */
.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(85vw, 20rem);
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  background: var(--background);
  box-shadow: -30px 0 60px -30px rgba(35, 35, 31, .35);
  transform: translateX(100%);
  transition: transform .3s ease;
  /* Off-screen rather than hidden so it can animate; visibility is what
     keeps its links out of the tab order while it is closed. */
  visibility: hidden;
}
.nav-panel.is-open { transform: translateX(0); visibility: visible; }
.nav-panel .nav-list { display: flex; flex-direction: column; gap: 2px; width: 100%; list-style: none; margin: 0; padding: 0; }
.nav-panel .nav-list a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: 9px;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  min-height: 44px;
}
.nav-panel .nav-list a[aria-current="page"] { color: var(--primary-dark); background: var(--surface); }
.nav-panel .nav-cta { margin-top: auto; justify-content: center; }
.nav-panel .nav-sub { list-style: none; margin: 0; padding-left: var(--space-md); }
.nav-panel .nav-caret { display: none; }
body.nav-open { overflow: hidden; }

/* nav-fit.js measures each row child to decide what fits. A flex item that
   may shrink reports the width it was squeezed to rather than the one it
   needs, so the row looks like it fits while the CTA overlaps the last
   link. Refusing to shrink is what makes the measurement true. */
.nav > .nav-menu, .nav > .brand { flex: 0 0 auto; }

.nav-menu { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu a {
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.nav-menu a[aria-current="page"] { color: var(--primary-dark); }
.nav-caret {
  display: inline-block;
  width: .38em; height: .38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em);
}
/* Opens on hover AND focus-within, so it is reachable from the keyboard
   with no script. */
.nav-menu .nav-sub {
  position: absolute; top: 100%; left: 0;
  min-width: 12rem;
  margin: 0; padding: var(--space-xs) 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  box-shadow: 0 18px 40px -20px rgba(35, 35, 31, .28);
  opacity: 0; visibility: hidden;
  transform: translateY(.35rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav-menu .nav-group:hover .nav-sub,
.nav-menu .nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-menu .nav-sub a { display: block; padding: var(--space-xs) var(--space-md); }

/* The burger shows only when the panel holds something. nav-fit.js sets
   this to "false" when everything fits inline; ABSENT means visible, which
   is the state a phone loads in with every item still in the panel. */
.nav-toggle { display: inline-flex; }
[data-nav-overflow="false"] .nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-menu .nav-sub { transition: none; }
}