@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Great+Vibes&display=swap");
@import url('https://fonts.cdnfonts.com/css/unseeness');
:root {
  /* ── Fonts ─────────────────────────────────────────── */
  --cp-heading-font: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --cp-text-font: "Inter", system-ui, sans-serif;
  --cp-emphasis-font: 'Unseeness', sans-serif;
  --cp-primary: #c8102e; /* buttons, links, arrows, eyebrows */
  --cp-accent: #a30c25; /* hover / active */
  --cp-on-primary: #ffffff;
  --cp-radius: 4px; /* near-square, per the mockup */
  --cp-container-max: 1440px;
  --rl-navy: #0f2647;
  --rl-navy-mid: #17325c;
  --rl-navy-deep: #0a1c36;

  /* ── Emphasis — the script cut, red. THE signature move ── */
  --cp-emphasis-color: var(--cp-primary);
  --cp-emphasis-color-dark: #ff5f75; /* red goes muddy on navy; lift it */
  --cp-emphasis-style: normal;
  --cp-emphasis-size: 1.5em; /* script x-height runs tiny at the same pt */
  --cp-eyebrow-color: var(--cp-primary);
  /* Eyebrows are a saturated red here, so the section subtext must NOT
     inherit it -- a full sentence in red reads as an alert. */
  --cp-section-lede-color: var(--cp-p-color);

  /* ── Surfaces — rules, not deep elevation ───────────── */
  --cp-rule-color: rgba(15, 38, 71, 0.16);
  --cp-card-radius: 4px;
  --cp-card-shadow: 0 8px 28px rgba(15, 38, 71, 0.1);
  --cp-card-heading-color: var(--rl-navy);
  --cp-card-icon-bg: var(--rl-navy); /* navy discs, per the mockup */
  --cp-card-icon-color: #ffffff;
  --cp-card-hover-shadow: 0 16px 38px rgba(15, 38, 71, 0.16);

  /* ── Section background tints ───────────────────────── */
  --cp-bg-warm: #f4f6fa;
  --cp-bg-tint: #f4f6fa;
  --cp-bg-cool: #e8eef7; /* the branded band -- used ONCE, on Listings */
  --cp-bg-dark: #12294d;
  --cp-bg-charcoal: var(--rl-navy-mid);
  --cp-bg-navy: var(--rl-navy);
  --cp-bg-ink: var(--rl-navy-deep);

  /* ── Typography — condensed uppercase display, quiet body ── */
  --cp-h2-size: clamp(1.9rem, 3.4vw, 3rem);
  --cp-h2-weight: 600;
  --cp-h2-tracking: 0.01em;
  --cp-h2-transform: uppercase;
  --cp-h2-line-height: 1.08;
  --cp-h2-eyebrow-size: 0.72rem;
  --cp-h2-eyebrow-weight: 600;
  --cp-h2-eyebrow-tracking: 0.2em;
  --cp-h2-eyebrow-transform: uppercase;

  --cp-h3-size: clamp(1rem, 1.5vw, 1.15rem);
  --cp-h3-weight: 500;
  --cp-h3-tracking: 0.06em;
  --cp-h3-transform: uppercase;

  --cp-h4-size: 0.72rem;
  --cp-h4-weight: 600;
  --cp-h4-tracking: 0.18em;
  --cp-h4-transform: uppercase;

  --cp-p-size: 1rem;
  --cp-p-weight: 400;
  --cp-p-line-height: 1.75;
  --cp-p-color: #5a6a80; /* navy-tinted slate -- 5.1:1 on white */

  /* Shared roles */
  --cp-name-font: var(--cp-heading-font);
  --cp-name-weight: 500;
  --cp-name-tracking: 0.04em;
  --cp-meta-color: #5a6a80;
  --cp-meta-size: 0.72rem;
  --cp-meta-weight: 600;
  --cp-meta-tracking: 0.14em;
  --cp-meta-transform: uppercase;

  /* Stat numbers -- navy, condensed (mockup's 100+ / 5-STAR / USAF row) */
  --cp-stat-number-color: var(--rl-navy);
  --cp-stat-number-weight: 600;

  /* ── Buttons — condensed uppercase, near-square ─────── */
  --cp-btn-font: var(--cp-heading-font);
  --cp-btn-text-transform: uppercase;
  --cp-btn-tracking: 0.08em;
  --cp-btn-font-size: 0.9rem;
  --cp-btn-padding: 0.95em 1.7em;
  --cp-btn-radius: 3px;

  /* ── Header — solid navy at all times (mockup) ──────── */
  --cp-header-bg: var(--rl-navy);
  --cp-header-scroll-bg: var(--rl-navy);
  --cp-header-link-color: #ffffff;
  --cp-header-scroll-link-color: #ffffff;
  --cp-header-burger-color: #ffffff;
  --cp-header-burger-scroll-color: #ffffff;
  --cp-header-container-width: 1440px;
  --cp-header-link-size: 0.82rem;
  --cp-header-link-weight: 500;
  --cp-header-link-letter-spacing: 0.06em;
  --cp-header-link-transform: uppercase;
  --cp-header-shadow: 0 2px 16px rgba(10, 28, 54, 0.28);

  /* Logo sits on navy in BOTH states, so no scroll-state filter swap. */
  --home-primary-logo_max-width: 230px;
  --home-primary-logo_filter: none;
  --home-primary-logo-scroll_filter: none;
  --inner-primary-logo_max-width: 200px;

  /* ── Hero ───────────────────────────────────────────── */
  /* Header is opaque, so the cover starts BELOW it -- no negative pull. */
  --cp-hero-header-offset: 0;
  --cp-cover-margin-top: 0;
  --cp-cover-height: 620px; /* no inline height in BoldTrail */
  --cp-cover-height-full: 660px; /* this account HAS an inline height */

  /* A WHITE veil, not a dark scrim: the mockup's headline is navy over a
     bright skyline. The account has "make background dark" on (BoldTrail
     stamps data-opacity="0.6"), which swaps to -overlay-dark, so both
     tiers are tuned light. */
  --cp-cover-overlay: rgba(255, 255, 255, 0);
  --cp-cover-overlay-dark: rgba(255, 255, 255, 0.46);

  --cp-cover-title-size: clamp(2rem, 3.8vw, 3.2rem);
  --cp-cover-title-size-compact: clamp(1.8rem, 3.4vw, 2.8rem);
  --cp-cover-title-weight: 600;
  --cp-cover-title-tracking: 0.01em;
  --cp-cover-title-line-height: 1.06;
  --cp-cover-title-transform: uppercase;
  --cp-cover-title-color: var(--rl-navy);
  --cp-cover-subtitle-size: 1.05rem;
  --cp-cover-subtitle-size-compact: 1rem;
  --cp-cover-subtitle-weight: 600;
  --cp-cover-subtitle-color: rgba(15, 38, 71, 0.9);
  --cp-cover-eyebrow-color: var(--cp-primary);
  --cp-cover-anim: cp-hero-fade;
  --cp-cover-anim-duration: 0.8s;
  --cp-cover-bg-anim: none;
  --cp-cover-ai-search-display: none; /* hide the Classic / AI toggle */

  /* Cover buttons -- red primary, navy secondary (mockup's trio) */
  --cp-cover-btn-font: var(--cp-heading-font);
  --cp-cover-btn-size: 0.9rem;
  --cp-cover-btn-weight: 500;
  --cp-cover-btn-tracking: 0.08em;
  --cp-cover-btn-transform: uppercase;
  --cp-cover-btn-padding: 1em 1.9em;
  --cp-cover-btn-radius: 3px;
  --cp-cover-btn-primary-bg: var(--cp-primary);
  --cp-cover-btn-primary-color: #ffffff;
  --cp-cover-btn-primary-hover-bg: var(--cp-accent);
  --cp-cover-btn-secondary-bg: var(--rl-navy);
  --cp-cover-btn-secondary-color: #ffffff;
  --cp-cover-btn-secondary-border: 1.5px solid transparent;
  --cp-cover-btn-secondary-hover-bg: var(--rl-navy-mid);
  --cp-cover-btn-secondary-hover-color: #ffffff;

  --rl-hero-figure: url("https://dtzulyujzhqiu.cloudfront.net/1stchoicerealty10927/images/1787789443_iaZNheKPGoSn9mpN0NiQzj3TzysYEN82klH9IrUr.png");
  --rl-hero-figure-w: 26rem;

  /* ── Testimonials ───────────────────────────────────── */
  --cp-tc-quote-size: clamp(1.05rem, 1.4vw, 1.25rem);
  --cp-tc-star-color: var(--cp-primary);
  --cp-avatar-bg: var(--rl-navy);
  --cp-avatar-color: #ffffff;

  /* ── Tiles (Featured Communities) ───────────────────── */
  --cp-tile-ratio: 4 / 3;
  --cp-tile-label-weight: 500;
  --cp-tile-label-size: clamp(1rem, 1.4vw, 1.2rem);
  --cp-tile-scrim: linear-gradient(
    to top,
    rgba(10, 28, 54, 0.88) 0%,
    rgba(10, 28, 54, 0.35) 50%,
    rgba(10, 28, 54, 0.05) 82%
  );
  --cp-fa-card-radius: 4px;
  --cp-fa-label-weight: 600;
  --cp-fa-label-tracking: 0.1em;
  --cp-fa-label-transform: uppercase;
  --cp-fa-scrim: var(--cp-tile-scrim);
  
  --cp-card-icon-bare-size: 3rem;

  /* ── Listings ───────────────────────────────────────── */
  --cp-listings-accent: var(--cp-primary);
  --cp-listings-radius: 4px;
  --cp-listings-badge-color: #ffffff;
  --cp-listings-scrim: var(--cp-tile-scrim);
  --cp-listings-card-meta-bg: #ffffff;
  --cp-listings-card-text-color: #5a6a80;
  --cp-listings-card-price-color: var(--rl-navy);
  --cp-listings-card-shadow: var(--cp-card-shadow);

  /* ── Custom Footer — navy, per the mockup ───────────── */
  --cp-footer-bg: var(--rl-navy);
  --cp-footer-color: rgba(226, 234, 245, 0.68);
  --cp-footer-heading: #ffffff;
  --cp-footer-link: rgba(226, 234, 245, 0.68);
  --cp-footer-link-hover: #ffffff;
  --cp-footer-border: rgba(148, 172, 205, 0.22);
  --cp-footer-logo-filter: brightness(0) invert(1);

  /* Native BoldTrail search bar (skinned below, not by a module) */
  --rl-search-panel-bg: var(--rl-navy);
}

/* ── Base body ──────────────────────────────────────── */
#home-bodycontent .main {
  padding: 0 !important;
}
body {
  background-color: #ffffff;
  color: var(--rl-navy);
}
#home-bodycontent .cover .cover-title-inner h1 em {
  text-transform: none;
  font-style: normal;
  line-height: 1.15;
  display: block;
  margin: 1.3rem 0 0;
}
#home-bodycontent .cover:not(.video)::before {
  content: "";
  position: absolute;
  left: max(0px, calc((100% - var(--cp-container-max, 1200px)) / 2 - 3rem));
  bottom: 0;
  width: var(--rl-hero-figure-w);
  height: 92%;
  background-image: var(--rl-hero-figure);
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 5;
  pointer-events: none;
}
#home-bodycontent .cover .rl-badges {
  display: flex;
  width: fit-content; /* hug the chips... */
  margin: 1.4rem auto 0; /* ...and centre the row on its own line */
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(15, 38, 71, 0.12);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(10, 28, 54, 0.14);
}
#home-bodycontent .cover .rl-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-left: 1px solid rgba(15, 38, 71, 0.12);
  font-family: var(--cp-heading-font);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--rl-navy);
  text-align: left;
}
#home-bodycontent .cover .rl-badge:first-child {
  border-left: 0;
}
#home-bodycontent .cover .rl-badge i {
  font-size: 1.15rem;
  color: var(--rl-navy);
}

/* The subtext <p> holds both the tagline and the chip row; let it size to
   its content instead of the narrow measure a subtitle normally takes. */
#home-bodycontent .cover .cp-hero-below > p {
  max-width: none;
}

/* ── Native search bar as the mockup's navy panel ─────
   No search-bar module is loaded (they all strip the advanced fields),
   so the native bar is skinned here. Scoped to the homepage cover. */
#home-bodycontent .cover #horizontal-search {
  width: 100%;
  max-width: var(--cp-container-max, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
}
#qs-submit,
#more-options {
  background-color: var(--cp-accent);
}
#home-bodycontent .cover #horizontal-search {
  background: var(--rl-search-panel-bg);
  padding: 1.25rem 1.5rem;
}
#home-bodycontent
  .listings.container:has(.carousel-link[data-destination="/index.php?showagent=1#rslt"]) {
  display: none;
}

/* ── Mobile ─────────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  /* The cut-out has no room beside the copy once the hero narrows. */
  #home-bodycontent .cover::before {
    display: none !important;
  }
  #home-bodycontent .cover:not(.video) .cover-title .container {
    padding-left: 1rem;
  }
  #home-bodycontent .cover #horizontal-search > .container {
    padding: 1rem;
  }
}

@media only screen and (max-width: 767px) {
  #home-bodycontent .cover .rl-badges {
    flex-direction: column;
    align-self: center;
  }
  #home-bodycontent .cover .rl-badge {
    border-left: 0;
    border-top: 1px solid rgba(15, 38, 71, 0.12);
    justify-content: flex-start;
  }
  #home-bodycontent .cover .rl-badge:first-child {
    border-top: 0;
  }
  /* Drop the fixed hero photo so the native bg doesn't jitter on scroll. */
  .cover .cover-image {
    background-attachment: scroll !important;
  }
}
#home-bodycontent .cover .cover-title {
  background-image: radial-gradient(white, transparent);
}
#home-bodycontent .cover .cover-title > .container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: unset !important;
  max-width: none;
  justify-content: center;
}
#home-bodycontent #horizontal-search:before {
  content: "Find Your Next Home";
  display: block;
  font-family: var(--cp-text-font);
  font-size: clamp(1rem, 4vw, 1.6rem);
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
}
#home-bodycontent #horizontal-search {
  position: absolute !important;
  bottom: -260px;
  left: 0;
  padding: 2rem 0rem !important;
  max-width: 100% !important;
}
#home-bodycontent .custom-top {
  margin-top: 260px;
}
#home-bodycontent .cover {
  overflow: visible;
}
[data-cp-component="Services"] .cp-grid {
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}
[data-cp-component="Services"] .cp-container {
  max-width: 100%;
}
[data-cp-component="Services"] .cp-actions {
  justify-content: center;
}
[data-cp-component="About"] .cp-grid.cp-grid-2 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  border-radius: 5px;
  box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.2);
}
[data-cp-component="About"] h3 {
  font-size: 2rem !important;
}
[data-cp-component="About"] .cp-overlay--lg {
  background: none;
}
[data-cp-component="Banner"] h2 em {
  text-transform: capitalize !important;
}