/* ==========================================================================
   The Rider Residences — Brokers Site
   Design system mirrors www.theriderresidences.com (custom sans/serif fonts,
   pure black/white/off-white palette, large uppercase headlines with very
   tight negative letter-spacing, mixed-case hero copy)
   ========================================================================== */

/* --- Custom fonts (self-hosted, mirrored from the official site) --------- */

@font-face {
  font-family: 'sans';
  src: url('/assets/fonts/sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'sans';
  src: url('/assets/fonts/sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'sans';
  src: url('/assets/fonts/sans-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'serif';
  src: url('/assets/fonts/serif.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'serif';
  src: url('/assets/fonts/serif-italics.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-off-white: #f6f6f6;
  --color-gray: #ccc;
  --color-gray-mid: #6f6f6f;
  --color-gray-light: #b1b1b1;
  --color-text-muted: rgba(49, 49, 47, 0.5);

  --font-sans: 'sans', Arial, Helvetica, sans-serif;
  --font-serif: 'serif', Georgia, 'Times New Roman', serif;
  /* Fallback used for SMALL UI text (labels, eyebrows, fine print). The
     Rider custom font is hinted for display sizes and looks fuzzy under ~14px
     in uppercase, so small UI text uses the platform system font for crisp
     rendering at every density. Large headlines stay on --font-sans. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

  --max-content: 1440px;
  --header-height: 74px;

  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition-base); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--color-black); color: var(--color-white); }

/* --- Typography ---------------------------------------------------------- */

/* Display headlines: very large, uppercase, tight negative letter-spacing
   (mirrors site values: 116px @ -5.8px, 192px @ -9.6px → -0.05em) */
.display {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black);
}

.eyebrow--light {
  color: var(--color-white);
}

/* --- Layout helpers ----------------------------------------------------- */

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1024px) {
  .container { padding: 0 24px; }
}

.section { padding: 80px 0; }
@media (min-width: 1024px) { .section { padding: 140px 0; } }

.section--black { background: var(--color-black); color: var(--color-white); }
.section--white { background: var(--color-white); color: var(--color-black); }
.section--off { background: var(--color-off-white); color: var(--color-black); }

/* Curated section: normal flow scroll (no sticky/parallax). */

/* --- Header (matches www.theriderresidences.com /navBar) ----------------- */
/* Mirrors official: fixed white bar, 74px tall, padding x-9 (36px),
   3 equal columns: [INQUIRE + langs] | [centered logo] | [hamburger]      */

.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 224px;
  z-index: 100;
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  background: transparent;
  transition: opacity 200ms ease;
}

/* Header fades out when the user scrolls — only visible at the very top. */
.site-header.is-scrolled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 767px) {
  .site-header { height: 144px; padding: 0 16px; }
}

/* Side columns are absolutely pinned near the top of the header so their
   vertical position is independent of the (centered) logo's size. */
.header-col {
  position: absolute;
  top: 24px;
  display: flex;
  align-items: center;
}

.header-col--left { left: 24px; gap: 32px; }
.header-col--right { right: 24px; }
.header-col--center { display: none; }

@media (max-width: 767px) {
  .header-col { top: 16px; }
  .header-col--left { left: 16px; }
  .header-col--right { right: 16px; }
}

/* Centered Rider logo SVG */
/* Logo lives INSIDE the hero (centered at top) so it scrolls/sticks with
   the hero instead of staying fixed in the page header. When the next
   sections scroll up over the sticky hero, the logo gets covered too. */
.hero-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.hero-logo img {
  height: 200px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .hero-logo { height: 144px; }
  .hero-logo img { height: 120px; }
}

/* INQUIRE pill button (left column) — white pill, black text */
.inquire-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-base);
  border: 0;
}

.inquire-btn:hover { opacity: 0.85; }

@media (max-width: 767px) {
  .inquire-btn { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* Language switcher: white text over hero, active = underlined */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.lang-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  transition: color var(--transition-base);
}

.lang-link:hover { color: var(--color-white); }
.lang-link.is-active {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 767px) {
  .lang-switcher { gap: 8px; font-size: 13px; }
}

/* Hamburger (visual element matching official) */
.hamburger {
  width: 28px;
  height: 22px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-white);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  line-height: 1;
}

.btn--light { color: var(--color-white); }
.btn--light:hover { background: var(--color-white); color: var(--color-black); }

.btn--dark { color: var(--color-black); border-color: var(--color-black); }
.btn--dark:hover { background: var(--color-black); color: var(--color-white); }

.btn--solid-light {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.btn--solid-light:hover { background: transparent; color: var(--color-white); }

.btn--solid-dark {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn--solid-dark:hover { background: transparent; color: var(--color-black); }

.btn--block { width: 100%; }
.btn--lg { padding: 20px 36px; font-size: 0.8125rem; }

/* --- Hero ---------------------------------------------------------------- */

/* Sticky hero: stays pinned at the top of the viewport as the rest of the
   page scrolls up over it. The next sections (curated, broker, footer) are
   raised to z-index 2 so they visually layer above the stuck hero. */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
  padding-top: var(--header-height);
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* All sections after the hero scroll up over it (need solid backgrounds). */
.hero ~ section,
.hero ~ footer {
  position: relative;
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-black);
}

.hero-bg video,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two layered gradients:
     1) Vertical — slightly darker top/bottom for headline + features readability
     2) Horizontal — darker on the right (behind the form) so the glass card
        sits on a contrasted area, while the left (text) stays clean */
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.05) 35%,
      rgba(0,0,0,0.05) 60%,
      rgba(0,0,0,0.30) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 16px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  align-content: start;
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1.4fr minmax(360px, 420px);
    gap: 60px;
    padding: 32px 24px 0;
  }
}

.hero-copy { max-width: 720px; align-self: end; }

.hero-location {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 28px;
  opacity: 1;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* Hero headline matches official site: mixed-case (NOT uppercase),
   46px desktop, weight 400, slight negative tracking. We use sans serif
   per the official spec (no Cormorant). */
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 20px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.hero-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.hero-text {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  max-width: 520px;
  opacity: 1;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* Hero form — prominent glass card on the dark hero */
.hero-form-wrap {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 24px 26px;
  align-self: start;
}

@media (min-width: 768px) {
  .hero-form-wrap { padding: 28px 30px; }
}

/* Broker mini-header above the form */
.form-broker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.form-broker-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}

.form-broker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
  display: block;
}

.form-broker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.form-broker-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

.form-broker-name {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.2;
}

.form-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}

.form-field { margin-bottom: 8px; }

.form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color var(--transition-base);
  border-radius: 0;
}

.form-field input::placeholder { color: rgba(255, 255, 255, 0.4); }

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-white);
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
  cursor: pointer;
}

.form-field select option {
  background: var(--color-black);
  color: var(--color-white);
}

.form-bot-field {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.form-submit { margin-top: 14px; }

.form-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

.form-privacy svg { flex-shrink: 0; }

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  border: 1px solid transparent;
  display: none;
}

.form-status.is-success {
  display: block;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.form-status.is-error {
  display: block;
  border-color: #C95C5C;
  color: #C95C5C;
}

/* --- Features strip — sits at the bottom of the hero so it's visible in
       the first viewport without scrolling. Background fades from transparent
       to dark so it blends with the hero gradient (no visible seam). -------- */

.features-strip {
  position: relative;
  z-index: 1;
  padding: 20px 0 100px; /* more black space below labels */
  margin-top: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.92) 60%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* The gradient that fades the photo into the dark strip is rendered as a
   pseudo-element ABOVE the strip (extends upward into the hero). This keeps
   the strip element itself compact so labels never get clipped.
   Z-index -1 keeps it BELOW the hero-inner content (text + form). */
.features-strip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* Keep the icons grouped instead of spread to viewport edges */
.features-strip .container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

.feature-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

.feature-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.feature-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ffffff;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* --- Big section title (matches the 'WELCOME TO THE RIDER' style) ------- */

.big-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.section-eyebrow {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0.85;
}

/* --- Curated grid -------------------------------------------------------- */

.curated-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 60px;
  padding-top: 32px;
  border-top: 1px solid #000;
}

.curated-header-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .curated-header-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: end;
  }
}

.curated-description {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--color-black);
  max-width: 560px;
  margin: 0;
}

.curated-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) { .curated-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .curated-grid { grid-template-columns: repeat(4, 1fr); } }

.curated-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1a1a1a;
}

.curated-card img,
.curated-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.curated-card:hover img,
.curated-card:hover video { transform: scale(1.04); }

.curated-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.curated-card-label {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.3;
}

/* --- Broker section ------------------------------------------------------ */

.broker {
  background: var(--color-white);
  color: var(--color-black);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.broker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 768px) {
  .broker-grid {
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .broker-grid {
    grid-template-columns: 320px 1fr 1fr;
    gap: 80px;
  }
}

.broker-photo {
  aspect-ratio: 3 / 4;
  background: #1a1a1a;
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}

.broker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broker-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin-bottom: 24px;
}

.broker-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 20px;
}

.broker-title {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 4px;
}

.broker-subtitle {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin-bottom: 28px;
}

.broker-divider {
  width: 40px;
  height: 1px;
  background: var(--color-black);
  margin-bottom: 28px;
}

.broker-bio {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-gray-mid);
  max-width: 400px;
}

.broker-contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.broker-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-black);
  transition: opacity var(--transition-base);
}

.broker-contact-item:hover { opacity: 0.6; }

.broker-contact-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  flex-shrink: 0;
}

.broker-contact-icon svg { width: 16px; height: 16px; }

.broker-contact-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  display: block;
  margin-bottom: 2px;
}

.broker-contact-value {
  font-size: 0.875rem;
  color: var(--color-black);
}

.broker-whatsapp-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 36px 24px;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  text-align: center;
  transition: background var(--transition-base), color var(--transition-base);
}

.broker-whatsapp-cta:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.broker-whatsapp-cta:hover .whatsapp-icon-large {
  background: var(--color-white);
  color: var(--color-black);
}

.whatsapp-icon-large {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--transition-base);
}

.whatsapp-icon-large svg { width: 22px; height: 22px; }

.broker-whatsapp-cta-label {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.broker-whatsapp-cta-arrow {
  font-size: 1rem;
}

/* --- Agent section (Angélica-focused, white bg) ------------------------- */

.agent-section {
  position: relative;
  background: var(--color-white);
  color: var(--color-black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Black topbar with phone + downloads */
.agent-topbar {
  background: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
}

.agent-topbar-phone {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.agent-topbar-phone:hover { opacity: 0.7; }

.agent-topbar-link {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color var(--transition-base);
}

.agent-topbar-link:hover { color: var(--color-white); }

.agent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  flex: 1 1 auto; /* fill remaining viewport height after the topbar */
}

@media (min-width: 1024px) {
  .agent-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Left column wraps the white card + the footer with WATCH+copyright */
.agent-left-col {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

/* Right column: full-height image with logos overlaid at the bottom */
.agent-right-col {
  position: relative;
  background: var(--color-black);
  min-height: 320px;
  overflow: hidden;
}

.agent-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Small white photo-credit text — sits below the partner logos */
.agent-photo-credit {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  margin: 14px 0 0;
  text-align: center;
}

/* Logos overlaid on the photo with a gradient fade-to-black behind them */
.agent-logos-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 80px 24px 14px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

@media (min-width: 1024px) {
  .agent-logos-overlay { padding: 100px 40px 14px; }
}

/* LEFT (white): the contact card with photo on the left */
.agent-card-side {
  background: var(--color-white);
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 0 16px 0 0;
  flex: 1 1 auto;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .agent-card-side { gap: 48px; padding: 0 60px 0 0; }
}

.agent-card {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
}

/* Edge-to-edge portrait on the LEFT of the card — emerges from the topbar
   and runs the full height of the white left column. Right edge fades to
   transparent so the photo blends into the white card content. */
.agent-card-photo--side {
  flex-shrink: 0;
  width: 220px;
  align-self: stretch;
  overflow: hidden;
  background: transparent;
}

@media (min-width: 1024px) {
  .agent-card-photo--side { width: 360px; }
}

.agent-card-photo--side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* RIGHT (dark): video placeholder only — logos move to the footer bar */
.agent-video-side {
  position: relative;
  background: var(--color-black);
  min-height: 420px;
  overflow: hidden;
}

.agent-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}

.agent-video-placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
}

/* Bottom bar (full width across the section) with watch button + copyright + logos */
/* Mirror the card-side grid (photo column + content column) so the WATCH
   button sits centered exactly below Angélica's photo, copyright on right. */
.agent-footer-left {
  background: var(--color-white);
  padding: 16px 24px 16px 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.agent-footer-left .watch-construction-btn {
  justify-self: end;
}

.agent-footer-left .agent-footer-copyright {
  text-align: right;
  justify-self: end;
}

@media (min-width: 1024px) {
  .agent-footer-left {
    grid-template-columns: 360px 1fr;
    gap: 48px;
    padding: 18px 60px 18px 0;
  }
}

.watch-construction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px 10px 18px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.watch-construction-btn:hover { opacity: 0.85; }

.agent-footer-copyright {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-black);
  letter-spacing: 0.02em;
  margin: 0;
}

.agent-footer-sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* (legacy) .agent-footer-right + .agent-video-side no longer used */

.agent-info-block {
  display: flex;
  flex-direction: column;
}

.agent-info-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin-bottom: 12px;
}

.agent-info-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 8px;
}

.agent-info-title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.agent-info-dot { color: var(--color-gray-mid); }

.agent-info-bio {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-black);
  max-width: 540px;
  margin-bottom: 16px;
}

.agent-info-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.agent-info-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.agent-info-contact:hover { opacity: 0.6; }

.agent-info-contact svg {
  flex-shrink: 0;
  color: var(--color-gray-mid);
}

.agent-info-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #25D366;
  color: var(--color-white);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-base);
  width: fit-content;
}

.agent-info-whatsapp:hover { opacity: 0.85; }

/* Bottom info row (get in touch + sales gallery) */
.agent-info-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
  .agent-info-row { grid-template-columns: 1fr 1fr; }
}

.agent-info-block--small .agent-info-eyebrow {
  margin-bottom: 14px;
}

.agent-info-link,
.agent-info-text {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-black);
  text-decoration: none;
  display: block;
  transition: opacity var(--transition-base);
}

.agent-info-link:hover { opacity: 0.6; }

/* Legacy contact-section styles (kept commented in case rolled back) ----- */
.contact-section {
  display: none;
}

.contact-topbar {
  background: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.contact-topbar-phone {
  color: var(--color-white);
  text-decoration: none;
}
.contact-topbar-phone:hover { opacity: 0.7; }

.contact-topbar-link {
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  opacity: 0.7;
  transition: opacity var(--transition-base);
}
.contact-topbar-link:hover { opacity: 1; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* Left: form on off-white */
.contact-form-side {
  background: var(--color-off-white);
  padding: 60px 24px;
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .contact-form-side { padding: 80px 60px; }
}

.contact-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 24px;
}

.contact-subtitle {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-black);
  max-width: 480px;
  margin-bottom: 36px;
}

/* Form */
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .contact-form-row { grid-template-columns: 1fr 1fr; }
}

.contact-field { margin-bottom: 20px; }

.contact-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--color-black);
  transition: border-color var(--transition-base);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

.contact-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-ui);
}

.contact-radio-group {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.contact-radio-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-black);
  margin: 0;
}

.contact-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.contact-radios label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--color-black);
  cursor: pointer;
}

.contact-radios input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-black);
  cursor: pointer;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 36px;
  background: var(--color-black);
  color: var(--color-white);
  border: 0;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity var(--transition-base);
}

.contact-submit:hover { opacity: 0.85; }

.contact-disclaimer {
  margin-top: 28px;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.55);
  max-width: 520px;
}

/* Right: dark info side with broker photo */
.contact-info-side {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
  min-height: 600px;
  overflow: hidden;
}

.contact-info-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}

.contact-info-overlay {
  position: relative;
  z-index: 1;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
}

@media (min-width: 1024px) {
  .contact-info-overlay { padding: 80px 60px; }
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-info-title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}

.contact-info-name {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 4px;
}

.contact-info-link,
.contact-info-text {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.7;
  display: block;
  transition: opacity var(--transition-base);
}

.contact-info-link:hover { opacity: 0.7; }

.contact-info-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 18px;
  background: #25D366;
  color: var(--color-white);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-base);
  width: fit-content;
}

.contact-info-whatsapp:hover { opacity: 0.85; }

/* --- Partners strip (Cipres / Rilea / Cervera on black) ----------------- */

/* Partners label + logos (live inside the agent's dark right column) */
.partners-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.partners-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  gap: 12px 16px;
  width: 100%;
}

.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  opacity: 0.9;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.partner-logo:hover { opacity: 1; }

.partner-logo img {
  height: 100%;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .partner-logo { height: 22px; }
  .partners-logos { gap: 14px 24px; }
}

/* For partner logos that come in dark/colored versions, invert to white. */
.partner-logo--invert img {
  filter: brightness(0) invert(1);
}

/* Bigger for selected partner logos (Rilea, Deforma, Radyca, Cervera)
   so their visual content matches the dense Cipres wordmark */
.partner-logo--lg { height: 32px; }
.partner-logo--lg img { max-width: 150px; }

@media (min-width: 768px) {
  .partner-logo--lg { height: 40px; }
}

/* Rilea logo a touch larger than the rest */
.partner-logo--xl { height: 46px; }
.partner-logo--xl img { max-width: 180px; }

@media (min-width: 768px) {
  .partner-logo--xl { height: 58px; }
}

/* --- Footer mini -------------------------------------------------------- */
/* Footer (matches official off-white footer with GET IN TOUCH) ----------- */

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: 28px 24px;
}

.footer-mini {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-mini {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer .footer-copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer .footer-links a:hover { color: var(--color-white); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }
}

.footer-title {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin-bottom: 20px;
}

.footer-col p,
.footer-col a {
  display: block;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity var(--transition-base);
}

.footer-col a:hover { opacity: 0.6; }

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  letter-spacing: 0.04em;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
}

.footer-links a:hover { color: var(--color-black); }

/* --- Animations ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Mobile tweaks ------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --header-height: 60px; }
  .form-title { font-size: 0.9375rem; }
  .hero-inner { padding: 40px 24px; }
  .section { padding: 64px 0; }
}