/* =========================================================================
   Aguero Real Estate design system
   A blend of Alex Welch (dark-luxury gold drama) + The Rockwell Group
   (light editorial restraint): a warm cream base, thin editorial serif,
   antique-gold accents, generous whitespace. Hand-authored, no build step.
   ========================================================================= */

:root {
  /* palette */
  --cream:      #faf7f2;
  --cream-2:    #f3eee4;
  --white:      #ffffff;
  --ink:        #1a1712;
  --ink-2:      #57534c;
  --muted:      #8b857a;
  --gold:       #a9812f;   /* deep antique gold — text/accents (contrast-safe on cream) */
  --gold-2:     #d1a23e;   /* logo gold — fills/hovers/highlights */
  --gold-soft:  #e7d9b4;
  --line:       #e7e1d6;   /* hairline on cream */
  --line-2:     #efe9df;
  /* Brand green — Aguero Real Estate logo hue, lifted one step (Round 6 PART 2.1) so
     the dark sections read richer, less like a black hole. Same hue, brighter. */
  --green:      #0A5A31;   /* logo green — primary dark surface */
  --green-2:    #12703F;   /* lighter green — hover / secondary / emerald accent */
  --green-deep: #064625;   /* deepest green — footer base */
  --dark:       #0A5A31;   /* dark bands / footer — the brand green */
  --dark-2:     #12703F;   /* the lighter brand green */
  --scrim:      10,9,8;    /* warm neutral near-black for photo overlays (rgb triplet) */

  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* metrics */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 130px);
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(var(--scrim),.05);
  --shadow: 0 24px 60px -30px rgba(var(--scrim),.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* color:inherit stops every button (e.g. the agent cards) falling back to the
   browser default — iOS Safari's is system blue, which turned the agent names blue
   on mobile. Buttons that set their own colour (.btn*, .pager, .calc-tab, …) still win. */
button { font-family: inherit; cursor: pointer; color: inherit; }
h1,h2,h3,h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: .005em; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(48px,6vw,84px); padding-bottom: clamp(48px,6vw,84px); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-white { background: var(--white); }
.bg-dark { background: var(--dark); color: #f3ede1; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--green-2);   /* Round 6 PART 2.2: emerald eyebrows on cream/white (photo-band eyebrows stay gold below) */
  margin: 0 0 18px;
  display: inline-block;
}
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--green-2); vertical-align: middle; margin-right: 12px; opacity: .8; }
.eyebrow--center { display: block; text-align: center; }

.h-display { font-size: clamp(40px, 6.4vw, 88px); font-weight: 500; letter-spacing: .01em; }
.h-1 { font-size: clamp(32px, 4.4vw, 56px); }
.h-2 { font-size: clamp(26px, 3.2vw, 40px); }
.h-3 { font-size: clamp(20px, 2.2vw, 27px); }
.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); line-height: 1.75; }
.muted { color: var(--muted); }
.serif-quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px,2.4vw,30px); line-height: 1.4; color: var(--ink); }
.center { text-align: center; }
.section-head { max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 0;
  transition: all .35s var(--ease); white-space: nowrap; cursor: pointer;
}
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; padding: 14px 34px; }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(169,129,47,.7); }
.btn-outline { background: transparent; color: var(--gold); border-color: var(--gold); font-weight: 500; padding: 11px 26px; }
.btn-outline:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-gold-lg { padding: 17px 38px; }
.link-gold { color: var(--gold); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 9px; transition: gap .3s var(--ease), color .3s; }
.link-gold:hover { gap: 15px; color: var(--gold-2); }
.link-gold::after { content: "→"; }

/* ============================ NAV ============================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--pad);
  height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
/* Logo on the far left, all links + CTA in one group on the right (Welch layout). */
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-link {
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.86); transition: color .3s; position: relative; padding: 6px 0;
}
.nav-link:hover { color: #fff; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold-2); transition: width .3s var(--ease); }
.nav-link:hover::after { width: 100%; }
.nav-brand { text-align: left; flex: none; }
.nav-brand a { display: inline-flex; align-items: center; gap: 13px; color: #fff; line-height: 1; }
.brand-mark { height: 46px; width: auto; display: block; }
.brand-mark--dark { display: none; }
.brand-word { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .14em; display: inline-flex; flex-direction: column; }
.brand-word .brand-sub { font-family: var(--sans); font-size: 9px; letter-spacing: .5em; font-weight: 500; color: var(--gold-2); margin-top: 5px; text-transform: uppercase; }
.nav-cta { flex: none; }
.nav-cta a { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid rgba(255,255,255,.5); padding: 11px 22px; border-radius: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; transition: all .3s; }
.nav-cta a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* solid state (scrolled, or forced on interior pages) — solid brand green, links stay
   light (Round 6 PART 1.2). No blur, no shrink, no hide; short fade via .nav transition. */
.nav.solid { background: var(--green); backdrop-filter: none; border-bottom-color: rgba(255,255,255,.10); box-shadow: none; }
/* Keep the bar solid green while the mobile menu is open, regardless of scroll — otherwise
   the white hamburger X sits on the cream .mobile-menu panel and disappears. Higher
   specificity than .nav.solid so it wins in both the top and scrolled states. */
body.menu-open .nav { background: var(--green); border-bottom-color: rgba(255,255,255,.10); }

/* hamburger + mobile */
.hamburger { display: none; width: 30px; height: 20px; position: relative; background: none; border: 0; }
.hamburger span { position: absolute; left: 0; height: 2px; width: 100%; background: #fff; transition: .3s var(--ease); }
.hamburger span:nth-child(1){ top: 0; } .hamburger span:nth-child(2){ top: 9px; } .hamburger span:nth-child(3){ top: 18px; }
body.menu-open .hamburger span:nth-child(1){ top: 9px; transform: rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity: 0; }
body.menu-open .hamburger span:nth-child(3){ top: 9px; transform: rotate(-45deg); }
/* The panel is inset:0, i.e. the FULL viewport, but the fixed nav bar covers its top strip —
   so centring the links inside it pushed the first one under the bar (Round 8 PART 5).
   Reserving the bar's height as top padding keeps the centred block clear of it. Home was
   also dropped from the mobile list (the logo already goes home), which buys back a row.
   Deliberately NO overflow scrolling, font shrinking or scaling here — the client wants the
   menu stationary; the reserved padding plus one fewer row is what makes it fit. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--cream);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  transform: translateX(100%); transition: transform .45s var(--ease);
  padding: 132px 40px 40px;
}
body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu a { font-family: var(--serif); font-size: 30px; color: var(--ink); padding: 12px; letter-spacing: .04em; }
.mobile-menu a.mm-cta { margin-top: 22px; font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; background: var(--gold); color: #fff; padding: 15px 34px; border-radius: 2px; }
.mobile-menu .mm-meta { margin-top: 30px; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
/* Short phones (iPhone SE class, ~667px tall). Even with Home gone the rows total ~620px,
   which plus the 77px nav bar exceeds the screen — so the reserved 132px top padding alone
   still pushes the first row under the bar. Tighten the vertical rhythm here only: the row
   font stays 30px, the panel never scrolls and is never scaled — only the dead space between
   rows shrinks. Taller phones keep the roomier spacing above untouched. */
@media (max-height: 720px) {
  .mobile-menu { padding-top: 96px; padding-bottom: 24px; gap: 2px; }
  .mobile-menu a { padding: 6px 12px; }
  .mobile-menu a.mm-cta { margin-top: 14px; }
  .mobile-menu .mm-meta { margin-top: 18px; }
}

/* ============================ HERO ============================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Round 6 PART 2.3 brightened the hero photo; Round 8 PART 2 gives the text a little more
   support by lifting every stop +.08. --scrim stays neutral 10,9,8 (Round 5) — only the
   opacities move, or the green tint comes back. */
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--scrim),.56) 0%, rgba(var(--scrim),.34) 45%, rgba(var(--scrim),.38) 62%, rgba(var(--scrim),.63) 100%),
    linear-gradient(90deg, rgba(var(--scrim),.50) 0%, rgba(var(--scrim),.22) 52%, rgba(var(--scrim),0) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); width: 100%; padding-top: 120px; padding-bottom: 90px; }
.hero .eyebrow { color: var(--gold-2); }
.hero .eyebrow::before { background: var(--gold-2); }
.hero h1 { max-width: 15ch; }
/* Round 6 PART 3.1: homepage full-width name treatment. The headline spans the viewport
   (small margin either side) and scales down cleanly; the wide inner drops the 1240px cap. */
.hero-inner--wide { max-width: 1600px; }
.eyebrow--lg { font-size: 17px; letter-spacing: .3em; }
.hero-title-xl {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; line-height: .92; color: #fff; max-width: none; width: 100%;
  font-size: clamp(30px, 7.6vw, 128px); white-space: nowrap;
}
@media (max-width: 720px) { .hero-title-xl { white-space: normal; letter-spacing: .02em; } }
.hero-sub { max-width: 52ch; margin: 26px 0 38px; font-size: clamp(16px,1.5vw,19px); color: rgba(255,255,255,.9); line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,.7); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-scroll .line { width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: scrollPulse 2s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100%{ opacity: .3; transform: scaleY(.6);} 50%{ opacity: 1; transform: scaleY(1);} }

/* slow "Ken Burns" drift on the photographic bands — keeps the page feeling alive.
   Containers clip so the zoom never bleeds into the next section. */
.hero, .pagehead, .cta-band { overflow: hidden; }
.hero-bg, .pagehead-bg, .cta-band-bg { transform-origin: center; animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-bg, .pagehead-bg, .cta-band-bg { animation: none; } }

/* page header (interior pages) */
/* padding-top reserves the fixed (transparent) nav's height so a tall two-line
   title can never slide up under the navbar — even on short viewports where the
   content grows past min-height. min-height keeps comfortable breathing room. */
.pagehead { position: relative; min-height: 60vh; display: flex; align-items: flex-end; color: #fff; padding-top: clamp(120px, 14vh, 160px); }
.pagehead-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Round 8 PART 2: +.08 on both stops, same reasoning as .hero-bg::after. */
.pagehead-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim),.42), rgba(var(--scrim),.52)); }
.pagehead-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(44px,6vw,80px); width: 100%; }
.pagehead .eyebrow { color: var(--gold-2); } .pagehead .eyebrow::before { background: var(--gold-2); }
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { color: rgba(255,255,255,.85); max-width: 60ch; margin-top: 18px; }

/* ============================ STATS ============================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.stat { text-align: center; padding: 6px 8px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 1px; height: 54px; background: var(--line); }
.stat .num { font-family: var(--serif); font-size: clamp(34px,4vw,52px); color: var(--gold); line-height: 1; font-weight: 500; }
.stat .label { margin-top: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }

/* ============================ SPLIT (about) ============================ */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px,5vw,80px); align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
.split.rev .split-media { order: -1; }
.split-media { position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4/5; }
/* Round 8 PART 3: the offset gold outline (.split-media.frame::after) is REMOVED. It used
   z-index:-1 to sit behind the image, but these elements also carry .reveal, whose transform
   opens a stacking context — so it painted during load then vanished. Removal is the wanted
   outcome, not a stacking fix. The .frame class is left on the markup; it is now inert. */
.split-body p { color: var(--ink-2); }
.mission-quote { border-left: 2px solid var(--gold); padding-left: 22px; margin: 0 0 26px; }

/* value bullets */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 12px; }
.value { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; transition: .35s var(--ease); }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.value .vicon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); margin-bottom: 18px; }
.value h3 { font-size: 20px; margin-bottom: 10px; }
.value p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ============================ TEAM ============================ */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.agent { text-align: left; background: none; border: 0; padding: 0; width: 100%; }
.agent-photo { position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, var(--cream-2), #e9e2d5); border: 1px solid var(--line); }
.agent-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.agent:hover .agent-photo img { transform: scale(1.05); }
.agent-mono { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gold); }
.agent-mono .mono { font-family: var(--serif); font-size: 64px; font-weight: 600; letter-spacing: .04em; }
.agent-mono .soon { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.agent-photo .overlay { position: absolute; inset: 0; background: rgba(var(--scrim),.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s; }
.agent:hover .agent-photo .overlay { opacity: 1; }
.agent-photo .overlay span { border: 1px solid rgba(255,255,255,.8); color: #fff; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 11px 22px; border-radius: 2px; }
.agent-name { font-family: var(--serif); font-size: 24px; margin-top: 20px; letter-spacing: .02em; color: var(--ink); }
.agent-role { color: var(--gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-top: 7px; font-weight: 600; }
.agent-dre { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.agent-blurb { color: var(--ink-2); font-size: 14.5px; margin-top: 12px; }
.agent-meta { margin-top: 12px; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.agent-meta a { color: var(--ink-2); }
.agent-meta a:hover { color: var(--gold); }

/* bio modal */
.modal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(var(--scrim),.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal { background: var(--white); max-width: 900px; width: 100%; max-height: 88vh; overflow: hidden; border-radius: var(--radius); display: grid; grid-template-columns: 42% 58%; transform: translateY(14px); transition: transform .4s var(--ease); }
.modal-scrim.open .modal { transform: translateY(0); }
.modal-media { background: linear-gradient(150deg, var(--cream-2), #e4ddce); position: relative; min-height: 320px; }
.modal-media .agent-mono .mono { font-size: 92px; }
.modal-media img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: clamp(28px,3vw,46px); overflow-y: auto; }
.modal-body h3 { font-size: clamp(26px,3vw,34px); }
.modal-body .agent-role { margin-top: 8px; }
.modal-body .agent-dre { margin-top: 6px; }
.modal-rule { height: 1px; background: var(--line); margin: 20px 0; }
.modal-body p { color: var(--ink-2); font-size: 15px; }
.modal-close { position: absolute; top: 16px; right: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.9); font-size: 20px; color: var(--ink); display: grid; place-items: center; }
.modal-close:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ---- Get-in-touch LEAD MODAL ---- */
.lead-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(var(--scrim),.66); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.lead-scrim.open { opacity: 1; pointer-events: auto; }
.lead-card { position: relative; background: var(--white); width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; border-radius: var(--radius); padding: clamp(30px,4vw,52px); box-shadow: var(--shadow); border-top: 3px solid var(--gold); transform: translateY(16px) scale(.985); transition: transform .4s var(--ease); }
.lead-scrim.open .lead-card { transform: translateY(0) scale(1); }
.lead-card .eyebrow { margin-bottom: 12px; }
.lead-card .h-2 { margin-bottom: 10px; }
.lead-intro { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 26px; }
.lead-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); font-size: 20px; color: var(--ink); display: grid; place-items: center; transition: .25s; }
.lead-close:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.lead-form .btn-gold-lg { width: 100%; justify-content: center; margin-top: 6px; }
.lead-success { text-align: center; padding: 26px 6px 12px; }
.lead-success h3 { margin-bottom: 10px; }
.lead-success p { color: var(--ink-2); font-size: 15px; max-width: 40ch; margin: 0 auto; }
.lead-check { width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gold); box-shadow: 0 10px 26px -10px rgba(169,129,47,.8); animation: checkPop .5s var(--ease) both; }
.lead-check svg { width: 32px; height: 32px; }
@keyframes checkPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* gentle glow on the nav "Get in touch" CTA to invite the click */
.nav-cta a { animation: ctaGlow 3.4s ease-in-out infinite; }
.nav-cta a:hover { animation: none; }
@keyframes ctaGlow { 0%,100% { box-shadow: 0 0 0 rgba(200,162,74,0); } 50% { box-shadow: 0 0 16px -2px rgba(200,162,74,.55); } }
@media (prefers-reduced-motion: reduce) { .nav-cta a { animation: none; } }

/* ============================ LISTINGS ============================ */
.listings-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.listing-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .4s var(--ease); display: flex; flex-direction: column; }
.listing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.listing-media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--cream-2); }
.listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.listing-media.no-photo { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--cream-2), #e6dfd0); }
.listing-media.no-photo::after { content: "AGUERO REAL ESTATE"; font-family: var(--serif); font-size: 15px; letter-spacing: .22em; color: var(--gold); opacity: .55; }
.listing-card:hover .listing-media img { transform: scale(1.06); }
.listing-status { position: absolute; top: 14px; left: 14px; background: rgba(250,247,242,.95); color: var(--ink); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 7px 13px; border-radius: 2px; }
.listing-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.listing-price { font-family: var(--serif); font-size: 26px; color: var(--gold); font-weight: 600; }
.listing-addr { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); text-transform: uppercase; }
.listing-sub { font-size: 13px; color: var(--muted); }
.listing-specs { display: flex; gap: 16px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.listing-specs b { color: var(--ink); font-weight: 600; }
.listing-skel { pointer-events: none; }
.listing-skel .sk { background: linear-gradient(90deg,#efe9df 25%,#f6f1e8 37%,#efe9df 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 3px; }
@keyframes shimmer { 0%{ background-position: 100% 0;} 100%{ background-position: -100% 0;} }

/* listings page filters + grid + pager */
/* Listings hero sits close to the search bar (not a full scroll below it). */
.section[data-listings-page] { padding-top: 40px; }
.filters { display: grid; grid-template-columns: repeat(5, 1fr) auto; align-items: end; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 34px; }
.filters .field { display: flex; flex-direction: column; gap: 6px; }
.filters label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.filters input, .filters select { font-family: var(--sans); font-size: 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--cream); color: var(--ink); }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--green-2); }
/* Let the grid columns shrink below their content width. Without min-width:0 the 1fr
   columns keep their intrinsic minimum, the bar stays ~857px wide, and it overflows the
   phone viewport (forcing horizontal page scroll). These lines are required, not optional. */
.filters .field { min-width: 0; }
.filters input, .filters select { width: 100%; min-width: 0; }
.listings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pager button { min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); background: var(--white); border-radius: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: .25s; }
.pager button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pager button.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }
.empty-note { text-align: center; color: var(--muted); padding: 60px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ============================ REVIEWS / IG ============================ */
.embed-placeholder { border: 1px dashed var(--gold-soft); border-radius: var(--radius); background: linear-gradient(var(--white), var(--cream)); padding: 46px 24px; text-align: center; color: var(--muted); }
.embed-placeholder .badge { display: inline-block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 40px; padding: 6px 14px; margin-bottom: 14px; }
.embed-placeholder .stars { color: var(--gold-2); font-size: 22px; letter-spacing: 3px; margin-bottom: 10px; }
.reviews-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* ============================ CTA band ============================ */
.cta-band { position: relative; color: #fff; text-align: center; }
.cta-band-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(var(--scrim),.34), rgba(var(--scrim),.44)); }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band .eyebrow { color: var(--gold-2); } .cta-band .eyebrow::before { background: var(--gold-2); }
.cta-band h2 { max-width: 20ch; margin: 0 auto 26px; }

/* ============================ services 3up ============================ */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.svc { padding: 34px 30px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); border-radius: 0; transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.svc:hover { transform: translateY(-6px); border-color: var(--gold); background: rgba(255,255,255,.06); }
.svc .n { font-family: var(--serif); color: var(--gold-soft); font-size: 15px; letter-spacing: .3em; }
.svc h3 { font-size: 22px; margin: 14px 0 10px; }
.svc p { color: var(--ink-2); font-size: 15px; margin: 0; }
/* Round 8 PART 1: cream at 72% washed out on the green. Soft gold reads cleanly and
   matches the .n step numbers. One rule, covers the homepage "Guidance" cards and the
   Seller "How we sell your home" cards. */
.bg-dark .svc p { color: var(--gold-soft); }
.bg-dark .svc .n { color: var(--gold-2); }

/* ============================ CONTACT ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); }
.form { display: grid; gap: 12px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .field { display: flex; flex-direction: column; gap: 5px; }
.form label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.form input, .form textarea { font-family: var(--sans); font-size: 15px; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); transition: border-color .3s; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--green-2); }
.form textarea { resize: vertical; min-height: 96px; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.form .consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }
/* Honeypot: off-screen, unfocusable, never announced — bots fill it, humans don't. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; margin-top: 4px; }
.form-note.ok { color: #2f7d4f; } .form-note.err { color: #b23b3b; }
.contact-info .info-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info .info-row .ic { color: var(--gold); flex: none; margin-top: 2px; }
.contact-info .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact-info .v { font-size: 15.5px; color: var(--ink); margin-top: 3px; }
.contact-info .v a:hover { color: var(--gold); }
.pending-pill { display: inline-block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: var(--cream-2); border: 1px solid var(--gold-soft); border-radius: 30px; padding: 3px 10px; }

/* ============================ FOOTER ============================ */
.footer { background: var(--dark); color: rgba(255,255,255,.92); padding: clamp(56px,7vw,90px) 0 34px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; }
.footer-brand .fb-name { font-family: var(--serif); font-size: 26px; color: #fff; letter-spacing: .1em; }
.footer-brand .fb-sub { font-size: 9px; letter-spacing: .5em; color: var(--gold-2); text-transform: uppercase; margin-top: 6px; }
.footer-logo { height: 96px; width: auto; margin: -6px 0 4px; }
.footer-brand p { color: rgba(255,255,255,.92); font-size: 14px; margin: 18px 0 0; max-width: 34ch; }
.footer h4 { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: rgba(255,255,255,.92); font-size: 14px; transition: color .25s; }
.footer a:hover { color: var(--gold-2); }
.footer .fcol .muted-line { color: rgba(255,255,255,.55); font-size: 13px; }
.footer-bottom { margin-top: clamp(40px,5vw,64px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.09); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-bottom, .footer-bottom a { font-size: 12px; color: rgba(255,255,255,.55); }
/* Round 6 PART 7: quiet Luxury Collective attribution. nowrap (Round 9 PART 3) keeps the
   "Powered by" text glued to the lockup — without it the line broke BETWEEN them and the
   logo stranded on its own row. The phrase still wraps as a whole after "reserved." on
   narrow screens, which is the natural break. */
.powered-by { display: inline-flex; align-items: center; gap: 6px; opacity: .85; white-space: nowrap; }
/* Round 9 PART 3: the partner lockup sits at footer-text size, not as a headline. The
   supplied asset is the WHITE variant (correct for the green footer) and is shipped at 3x
   for retina, so the intrinsic width/height attributes on the img keep it from reflowing. */
/* Width is stated explicitly, NOT auto: with width:auto the flex item's max-content size is
   computed from the image's NATURAL width (428px, the 3x asset), which inflated the footer's
   left column past the available space and bumped the attribution onto its own row. 143x16
   is the 428x48 asset's own ratio, so nothing is distorted. */
.lux-logo { height: 16px; width: 143px; flex: none; opacity: .9; }
.footer-dre { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 18px; line-height: 1.6; letter-spacing: .02em; max-width: 90ch; }
.footer-dre:empty { display: none; }
.footer-disc { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 10px; line-height: 1.6; max-width: 90ch; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.8); }
.footer-social a:hover { border-color: var(--gold-2); color: var(--gold-2); }

/* ============================ legal / prose ============================ */
.legal-head { padding-top: 150px; padding-bottom: 30px; }
.legal-head .eyebrow { margin-bottom: 12px; }
.prose { max-width: 820px; }
.prose h2 { font-size: 22px; margin: 44px 0 12px; }
.prose h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 28px 0 8px; color: var(--ink); }
.prose p, .prose li { color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.prose ul { padding-left: 20px; margin: 10px 0; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--gold); word-break: break-word; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .updated { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
/* effective-date line + callout notes + closing contact card (ported from Freddy) */
.legal-effective { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 26px; }
.legal-note { background: var(--cream-2); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 16px 22px; margin: 20px 0; }
.legal-note p { margin: 0 0 10px; color: var(--ink-2); font-size: 14.5px; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-contact { margin-top: 56px; padding: 30px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.legal-contact h2 { margin: 0 0 8px; }
.legal-contact p { margin: 6px 0; }

/* ============================ calculators (buyer) ============================ */
.calc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.calc-tabs { display: flex; }
.calc-tab { flex: 1; padding: 18px 16px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--cream-2); border: 0; border-bottom: 2px solid transparent; transition: .25s; }
.calc-tab.active { color: var(--green); background: var(--white); border-bottom-color: var(--gold); }
.calc-pane { display: none; }
.calc-pane.active { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px,3vw,44px); padding: clamp(24px,3vw,40px); }
.calc-inputs { display: block; }
.calc-field { margin-bottom: 16px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.calc-field input, .calc-field select { width: 100%; font-family: var(--sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--cream); color: var(--ink); }
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--green-2); }
.calc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-result { background: var(--green); color: #fff; border-radius: var(--radius); padding: clamp(24px,3vw,34px); display: flex; flex-direction: column; justify-content: center; }
.calc-result .rlabel { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; }
.calc-result .rnum { font-family: var(--serif); font-size: clamp(38px,5vw,56px); font-weight: 600; line-height: 1; margin: 12px 0 6px; }
.calc-result .rsub { font-size: 13px; color: rgba(255,255,255,.72); }
.calc-breakdown { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; display: grid; gap: 11px; }
.calc-breakdown .brow { display: flex; justify-content: space-between; font-size: 14px; }
.calc-breakdown .brow span:first-child { color: rgba(255,255,255,.72); }
.calc-breakdown .brow span:last-child { font-weight: 600; }
.calc-disc { padding: 15px clamp(24px,3vw,40px); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--cream); }

/* ============================ process steps ============================ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; transition: .35s var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.step .snum { font-family: var(--serif); font-size: 15px; letter-spacing: .28em; color: var(--gold); font-weight: 600; }
.step h3 { font-size: 20px; margin: 14px 0 10px; }
.step p { color: var(--ink-2); font-size: 15px; margin: 0; }
.bg-cream .step { background: var(--white); }

/* ============================ area cards ============================ */
.areas { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.area { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: #fff; border: 1px solid var(--line); background: var(--green); }
.area-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.area:hover .area-bg { transform: scale(1.06); }
.area-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(var(--scrim),.30), rgba(var(--scrim),.58)); }
.area-body { position: relative; z-index: 2; padding: 26px 26px 28px; }
.area-body h3 { font-family: var(--serif); font-size: 24px; color: #fff; }
.area-body p { font-size: 14px; color: rgba(255,255,255,.86); margin: 8px 0 0; }
/* Round 6 PART 5.4: larger "Where we help buyers" — taller cards, more padding, bigger headings. */
.areas-lg { gap: 36px; }
.areas-lg .area { min-height: 420px; }
.areas-lg .area-body { padding: 36px 34px 38px; }
.areas-lg .area-body h3 { font-size: 30px; }
.areas-lg .area-body p { font-size: 15.5px; margin-top: 10px; }

/* ============================ reveal ============================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-scroll .line { animation: none; } }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .split, .split.rev { grid-template-columns: 1fr; }
  /* order:0 only reset to natural DOM order, and .split.rev is photo-first in the DOM, so
     its photo landed directly beneath the previous section's photo. Force text-then-photo. */
  .split.rev .split-body  { order: 1; }
  .split.rev .split-media { order: 2; }
  .split-media img { aspect-ratio: 16/11; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1150px) {
  /* Nav collapses to the hamburger before the desktop links get cramped. */
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-inner { height: 76px; }
  .brand-mark { height: 38px; }
  .brand-word { font-size: 19px; }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .stat:nth-child(3)::before, .stat:nth-child(2n+1)::before { display: none; }
  .team-grid, .listings-strip, .listings-grid, .values, .svc-grid, .reviews-cols, .steps, .areas { grid-template-columns: 1fr; }
  .team-grid, .listings-strip, .listings-grid { gap: 26px; }
  .calc-pane.active { grid-template-columns: 1fr; }
  .calc-result { order: -1; }
  .modal { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .modal-media { min-height: 220px; max-height: 260px; }
  .form .row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  /* Filter bar: two columns; City and the Search/Reset group each span the full width. */
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .field:first-child { grid-column: 1 / -1; }
  .filters .field:last-child  { grid-column: 1 / -1; }
  /* Hide the homepage "Scroll" cue on mobile (kept on desktop). */
  .hero-scroll { display: none; }
  /* Round 8 PART 4: the hero must fill the visible viewport so the section below never
     bleeds in at the top. svh is the height with the browser chrome at its LARGEST, so at
     first paint (address bar expanded) 100svh fell short; dvh tracks the chrome live.
     This supersedes Round 7's 88svh — the dead band above the headline is handled by the
     104/56 .hero-inner padding trim below, which stays. */
  .hero { min-height: 100dvh; }
}
@media (max-width: 560px) {
  :root { --pad: 20px; }
  .team-grid, .listings-strip { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  /* Filter bar: single column on phones. */
  .filters { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
}
@media (max-width: 720px) {
  /* Homepage hero: the 120/90 inner padding left a big empty band above the eyebrow on
     phones. Trim it; 104px top still clears the nav. (Height is set to 100dvh in the
     860px block above — Round 8 PART 4 replaced the 88svh that used to live here.) */
  .hero-inner { padding-top: 104px; padding-bottom: 56px; }
  /* Interior page header: same empty-gap problem. svh is stable on mobile (vh inflates
     behind the collapsing address bar and grows the gap). */
  .pagehead { min-height: 44svh; padding-top: 104px; padding-bottom: 32px; }
}