/* =========================================================================
   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;
  /* Round 10: a nav label never breaks mid-phrase. Spanish labels run longer than
     English, and a wrapped label makes the bar two rows tall (Round 4 PART 1). */
  white-space: nowrap;
}
.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; }
/* Round 10: quiet Luxury Collective attribution inside the hero. It sits under the CTAs and
   repeats the eyebrow's rule-then-text lockup from the top of the block, so the hero reads as
   one composition instead of a logo dropped onto a photo. The asset is the same WHITE lockup
   the footer uses, which is the correct variant over the photo scrim. Unlinked, matching the
   footer, because no destination has ever been supplied.
   Width is stated explicitly, NOT auto: the file is a 428x48 retina asset, and inside a flex
   row max-content resolves to that natural width, which pushes the row past the hero padding
   (the same trap the footer .lux-logo hit). 161x18 is the footer's own 143x16 treatment
   scaled up, so the two attributions carry the lockup at the same proportions. */
.hero-lux { display: flex; align-items: center; gap: 13px; margin-top: clamp(34px, 4vw, 48px); }
.hero-lux::before { content: ""; width: 26px; height: 1px; flex: none; background: rgba(255,255,255,.45); }
.hero-lux-label { font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.7); white-space: nowrap; }
.hero-lux-logo { height: 18px; width: 161px; flex: none; opacity: .9; }
.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; }
  /* Partner lockup: scale the whole row down on phones. At desktop size the 26px rule plus
     the label plus the 161px logo comes to ~307px, which is wider than the 280px a 320px
     screen leaves inside the hero padding, so the logo would be clipped. This lands at
     ~252px, and the tightened top margin keeps the hero comfortably inside 100dvh. */
  .hero-lux { gap: 11px; margin-top: 30px; }
  .hero-lux::before { width: 18px; }
  .hero-lux-label { font-size: 9.5px; letter-spacing: .2em; }
  .hero-lux-logo { height: 15px; width: 134px; }
  /* 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; }
}

/* -------------------------------------------------------------------------
   Elfsight AI Chatbot launcher (Round 9 PART 2).
   The widget mounts itself above everything on the page, so with the mobile
   menu open the green launcher floated on top of the menu panel and covered
   the "Serving Los Angeles County" line. The menu is a full-screen overlay,
   so the launcher has no business being visible over it. Fade it out instead
   of display:none, which would unmount the widget and drop an open chat.
   ------------------------------------------------------------------------- */
body.menu-open .es-portal-root,
body.menu-open .eapps-widget {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   Round 10 — Spanish line + language toggle.
   ------------------------------------------------------------------------- */

/* PART 1. The "Nosotros hablamos español." line, directly under the hero CTAs.
   Small and confident, so it supports the headline instead of competing with
   it. nowrap keeps it on one line, which is why the size steps down on the
   narrowest phones rather than wrapping to two. */
.hero-es {
  margin: 22px 0 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gold-soft);
  white-space: nowrap;
}

/* PART 2. The ES / EN button. Square corners and gold-on-hover, the same
   button language the site adopted in Round 4. It reads as a control, not as
   another nav link, while keeping the nav link type size Brett asked for.
   White text works on both nav states: transparent over the hero, and solid
   brand green once scrolled. */
.lang-toggle {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  background: none;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  padding: 7px 11px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s, background .3s, border-color .3s;
}
.lang-toggle:hover,
.lang-toggle:focus-visible { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.nav-lang { display: inline-flex; align-items: center; flex: none; }

/* The mobile button rides beside the hamburger, because .nav-links (which holds
   the desktop one) is display:none below 1150px. margin-left:auto pushes the
   pair to the right edge; without it the nav's space-between would strand the
   button in the middle of the bar. */
.nav-lang--mobile { display: none; }
@media (max-width: 1150px) {
  .nav-lang--mobile { display: inline-flex; margin-left: auto; margin-right: 16px; }
}
@media (max-width: 400px) {
  /* iPhone SE and 360px: keep the bar from crowding by trimming the button, and
     step the hero line down so it still holds one line. */
  .lang-toggle { font-size: 11.5px; padding: 6px 9px; letter-spacing: .12em; }
  .nav-lang--mobile { margin-right: 12px; }
  .hero-es { font-size: 13px; letter-spacing: .08em; margin-top: 18px; }
}

/* The three legal pages stay in English on purpose: that is the wording the
   lawyer approved, and a translated notice would be a second legal text nobody
   has reviewed. This line appears only in Spanish, so the gap reads as a
   decision rather than as an unfinished page. No `display` here: the element
   relies on the `hidden` attribute, which a display rule would defeat. */
.legal-es-note {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--cream-2, #f6f1e6);
  font-size: 14px;
  color: var(--muted);
}