/*
 * RE/MAX Properties Zimbabwe — shared design system for the public website.
 * Loaded on top of the shared Bootstrap 5 core (static/assets/css/bootstrap.css,
 * the same file the staff admin dashboard uses) so both apps draw from one
 * Bootstrap build. This file only adds RE/MAX-specific brand tokens and the
 * Airbnb-inspired visual language (pill buttons, soft rounded cards).
 */

:root {
  /* Corporate RE/MAX colors: blue is the primary brand accent, red is used
     sparingly as a secondary contrast (sale tags, alerts) — not spread across
     every button/focus-state with red or blue accents. */
  --remax-primary: #3454d1;
  --remax-primary-hover: #2946b6;
  --remax-accent-red: #c81e2c;
  --remax-red-solid: #dc1c2d;
  --remax-danger: #dc3545;
  --remax-ink: #222222;
  --remax-muted: #717171;
  --remax-border: #dddddd;
  --remax-page-bg: #f7f7f7;
  --remax-radius-pill: 999px;
  --remax-radius-card: 18px;
  --remax-radius-control: 12px;
  --remax-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --remax-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.13);
  --remax-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Legacy Bootstrap color aliases: the public palette is RE/MAX red/blue. */
  --pink: var(--remax-red-solid);
  --yellow: var(--remax-red-solid);
  --orange: var(--remax-red-solid);
  --warning: var(--remax-red-solid);
}

/* ---------- Base typeface + page background: soft gray so white cards/sections pop ---------- */

body {
  font-family: var(--remax-font);
  font-size: 14px;
  line-height: 20px;
  background-color: var(--remax-page-bg);
  color: var(--remax-ink);
}

/* Typography scale aligned with the Dzemigo Estates reference site. Keep
   controls on the same inherited family so legacy Bootstrap components do
   not reintroduce Open Sans or oversized defaults. */
button,
input,
select,
textarea,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body label,
body li {
  font-family: var(--remax-font);
}

body h1 {
  font-size: 32px;
  line-height: 38px;
}

body h2 {
  font-size: 26px;
  line-height: 30px;
}

body h3 {
  font-size: 20px;
  line-height: 24px;
}

body h4 {
  font-size: 16px;
  line-height: 20px;
}

body h5,
body h6 {
  font-size: 14px;
  line-height: 20px;
}

body p,
body li {
  font-size: 14px;
  line-height: 20px;
}

/* Explicit white surfaces stay white against the gray page background. */
.bg-white,
.property-card,
.card__image-hover-style-v3,
.card,
.form-control,
.form-select {
  background-color: #fff;
}

/* ---------- Hero: truly center the search form, clear of the fixed nav ----------
   Legacy styles.css sets .jumbotron to a flat height:100vh and .wrap__intro to
   height:80vh with align-items-md-center, but the content still rendered
   pinned near the top with a large dead-space gap below the form. Overriding
   both directly here (loaded last) rather than reverse-engineering the
   minified legacy rules. Nav clearance is already handled globally by
   .page-clip's JS-synced top padding (single_base.html), so this only needs
   its own small, symmetric padding — no min-height floor and no extra nav
   offset, so the hero always hugs its content and stays genuinely centered
   whether the compact 4-field form or the fully expanded 8-field one (all
   extra filters toggled on) is showing. */
.jumbotron.bg-theme-v5 {
  height: auto;
  min-height: 0;
}

.wrap__intro {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 600px;
  padding-top: 113px;
  padding-bottom: 113px;
}

/* ---------- Buttons: pill-shaped everywhere ---------- */

.btn {
  border-radius: var(--remax-radius-pill);
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-sm {
  padding: 0.35rem 1rem;
}

.btn-lg {
  padding: 0.75rem 1.9rem;
}

.btn-primary {
  background-color: var(--remax-primary);
  border-color: var(--remax-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--remax-primary-hover);
  border-color: var(--remax-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52, 84, 209, 0.3);
}

.btn-outline-primary {
  color: var(--remax-primary);
  border-color: var(--remax-primary);
}

.btn-outline-primary:hover {
  background-color: var(--remax-primary);
  border-color: var(--remax-primary);
  transform: translateY(-1px);
}

/* Bootstrap's utility classes carry their own hardcoded blue independent of
   --remax-primary — override the ones actually used across the site's pages. */
.text-primary {
  color: var(--remax-primary) !important;
}

.bg-primary {
  background-color: var(--remax-primary) !important;
}

.border-primary {
  border-color: var(--remax-primary) !important;
}

.btn-danger:hover,
.btn-light:hover {
  transform: translateY(-1px);
}

/* Icon-only pill buttons (search filter toggles etc.) stay circular, not oval. */
.btn.btn-icon-circle {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Form controls: soften to match the pill language ---------- */

.form-control,
.form-select {
  border-radius: var(--remax-radius-control);
  border-color: var(--remax-border);
  padding: 0.6rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--remax-primary);
  box-shadow: 0 0 0 0.2rem rgba(52, 84, 209, 0.15);
}

/* ---------- Badges / pills ---------- */

.badge.rounded-pill {
  font-weight: 600;
  padding: 0.45em 0.9em;
}

/* ---------- Property cards: Airbnb-inspired ---------- */

.property-card {
  border: none;
  border-radius: var(--remax-radius-card);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transition: transform 0.25s ease;
  height: 100%;
}

.property-card:hover {
  box-shadow: none;
  transform: none;
}

.property-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--remax-radius-card);
}

.property-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.property-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.property-card:hover .property-card__image-wrap img {
  transform: scale(1.05);
}

/* Neutral pill badge, top-left over the image, in the Airbnb "Guest favorite" style. */
.property-card__badge--pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  border-radius: var(--remax-radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #fff;
  color: var(--remax-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* The contract type is the anchor badge and never gets replaced by a
   marketing/status flag. Secondary badges stack independently in the
   opposite corner so several highlights can be shown at once. */
.property-card__badge--listing-type {
  background: #fff;
  color: var(--remax-ink);
  border: 1px solid rgba(34, 34, 34, 0.08);
}

.property-card__badge-stack {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.property-card__badge-stack .property-card__badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--remax-radius-pill);
  padding: 0.3rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.property-card__badge--on-show,
.listing-card__status-badge--on-show { background: #d92f45; }
.property-card__badge--sole-mandate,
.listing-card__status-badge--sole-mandate { background: #174a7e; }
.property-card__badge--price-reduced,
.listing-card__status-badge--price-reduced { background: var(--remax-red-solid); }

.listing-card__overlay-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.listing-card__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--remax-radius-pill);
  padding: 0.3rem 0.7rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.card__image__header {
  position: relative;
}

/* ---------- Compact contact page ---------- */
.contact-form-section {
  padding: 2rem 0;
  background: var(--remax-page-bg);
  font-family: var(--remax-font);
}

.contact-form-container {
  max-width: 1120px;
}

.contact-visual,
.contact-form-card {
  height: 100%;
  min-height: 560px;
  border-radius: var(--remax-radius-card);
  overflow: hidden;
}

.contact-visual {
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: #fff;
  background-position: center;
  background-size: cover;
  position: relative;
}

.contact-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 34, 71, 0.08), rgba(0, 34, 71, 0.86));
}

.contact-visual__content {
  position: relative;
  max-width: 360px;
}

.contact-visual__eyebrow {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--remax-red-solid);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: normal;
}

.contact-visual h2,
.contact-form-title {
  margin-bottom: 0.65rem;
  color: var(--remax-ink);
  font-family: var(--remax-font);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 750;
  line-height: 1.2;
}

.contact-visual h2 {
  color: #fff;
}

.contact-visual p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.6;
}

.contact-form-card {
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 2rem;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 34, 71, 0.08);
}

.contact-form-title {
  margin-bottom: 1.25rem;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
  flex: 1 1 auto;
  align-content: start;
}

.contact-form > .mb-4 {
  margin-bottom: 0 !important;
}

.contact-form > .contact-form-wide {
  grid-column: 1 / -1;
}

.contact-form .form-control,
.contact-form .form-select {
  min-height: 36px;
  padding: 0.45rem 0.7rem;
  border: 1px solid #dfe4eb;
  border-radius: 0.7rem;
  color: var(--remax-ink);
  font-family: var(--remax-font);
  font-size: 0.85rem;
  line-height: 1.35;
}

.contact-form textarea.form-control {
  min-height: 82px;
  resize: vertical;
}

.contact-form label {
  margin-bottom: 0.35rem;
  color: #596579;
  font-family: var(--remax-font);
  font-size: 0.78rem;
  font-weight: 600;
}

.contact-form .form-check {
  padding-left: 1.5rem;
  margin-top: 0.15rem;
}

.contact-form .form-check-label {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

.contact-form .contact-submit-button {
  min-height: 36px;
  padding: 0.4rem 1.2rem;
  font-family: var(--remax-font);
  font-size: 0.82rem;
  font-weight: 700;
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-form-alert {
  margin-bottom: 1rem;
}

.contact-form.htmx-request .contact-submit-label {
  display: none;
}

.contact-form-success {
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: 3rem;
  text-align: center;
}

.contact-form-success__icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 166, 81, 0.12);
  color: #008f4c;
  font-size: 2rem;
}

.contact-form-success h2 {
  margin-bottom: 0.6rem;
}

.contact-form-success > p:last-child {
  max-width: 32rem;
  margin-bottom: 0;
  color: #596579;
}

.contact-info-section {
  padding: 1.75rem 0;
  background: var(--remax-page-bg);
}

.contact-info-section .info-card {
  padding: 1.1rem 1.25rem;
}

.contact-info-section .info-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
}

.contact-info-section .info-card__title {
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
}

.contact-info-section .info-card__text {
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  .contact-info-section { padding: 1.25rem 0; }
  .contact-form-section { padding: 1.25rem 0; }
  .contact-visual { height: 270px; min-height: 270px; padding: 1.5rem; }
  .contact-form-card { height: auto; min-height: 0; padding: 1.35rem; }
  .contact-form-success { min-height: 360px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form > .contact-form-wide { grid-column: 1; }
}

/* ---------- Services + About page refinement ---------- */
.services-page .hero-band--tall,
.about-page .hero-band--tall {
  min-height: 360px;
  padding: 88px 0 48px;
}

.services-page .hero-band__title,
.about-page .hero-band__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.services-page .hero-band__subtitle,
.about-page .hero-band__subtitle {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

.services-grid-section,
.about-content-section {
  padding: 3.25rem 0;
}

.services-grid-section .row,
.about-content-section .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

.services-grid-section .col-lg-6,
.about-content-section .col-lg-6 {
  margin-bottom: 0 !important;
}

.service-card {
  border: 1px solid var(--remax-border);
  box-shadow: none;
}

.service-card .card-body {
  padding: 1.4rem 1.5rem 1.5rem;
}

.service-card .card-body > .h4:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 0.85rem !important;
  border-radius: 50%;
  background: rgba(52, 84, 209, 0.09);
}

.service-card .card-body > .h4:first-child img {
  width: 18px;
  height: 18px;
}

.service-card .card-body > .h4:nth-child(2) {
  margin: 0 0 0.75rem !important;
  color: var(--remax-ink) !important;
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 700;
}

.service-card ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.service-card li {
  margin-bottom: 0.4rem;
  color: var(--remax-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.service-card li:last-child {
  margin-bottom: 0;
}

.service-card h5 {
  margin: 1.1rem 0 0.55rem;
  color: var(--remax-primary);
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: normal;
}

/* Services and About use the same compact picture-left card language as the
   property-type directory. The image is decorative; all content stays in the
   existing accessible text structure. */
.services-grid-section .service-card {
  position: relative;
  display: block;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.services-grid-section .service-card[id] {
  scroll-margin-top: 110px;
}
.services-grid-section .service-card::before {
  display: none;
}
.services-grid-section .service-card__image {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 440px;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.services-grid-section .col:nth-child(1) .service-card::before { background-image: url("../images/info-cards/services/property-sales.jpg"); }
.services-grid-section .col:nth-child(2) .service-card::before { background-image: url("../images/info-cards/services/property-management.jpg"); }
.services-grid-section .col:nth-child(3) .service-card::before { background-image: url("../images/info-cards/services/project-management.jpg"); }
.services-grid-section .col:nth-child(4) .service-card::before { background-image: url("../images/info-cards/services/property-valuation.jpg"); }
.services-grid-section .col:nth-child(5) .service-card::before { background-image: url("../images/info-cards/services/property-development.jpg"); }
.services-grid-section .col:nth-child(6) .service-card::before { background-image: url("../images/info-cards/services/international-investment.jpg"); }
.services-grid-section .col:nth-child(7) .service-card::before { background-image: url("../images/info-cards/services/property-auctions.jpg"); }
.services-grid-section .service-card .card-body {
  min-height: 300px;
  margin-left: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem 1.25rem 1.25rem;
}
.services-grid-section .col-lg-6 {
  flex: 0 0 100%;
  max-width: 100%;
}
.services-grid-section .service-card .card-body > .h4:first-child { display: none; }
.services-grid-section .service-card .card-body > .h4:nth-child(2) { margin-top: 0 !important; }

.about-page .about-roots-section .info-card,
.about-page .about-dark-section .info-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
}
.about-page .about-roots-section .info-card::before,
.about-page .about-dark-section .info-card::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  min-height: 100%;
  background: center / cover no-repeat url("../images/info-cards/about/roots.jpg");
}
.about-page .about-roots-section .col:nth-child(2) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .about-roots-section .col:nth-child(3) .info-card::before { background-image: url("../images/info-cards/services/property-sales.jpg"); }
.about-page .about-roots-section .col:nth-child(4) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .about-roots-section .col:nth-child(5) .info-card::before { background-image: url("../images/info-cards/about/agent-training.jpg"); }
.about-page .about-roots-section .col:nth-child(6) .info-card::before { background-image: url("../images/info-cards/services/international-investment.jpg"); }
.about-page .about-roots-section .col:nth-child(7) .info-card::before { background-image: url("../images/info-cards/about/marketing.jpg"); }
.about-page .about-roots-section .col:nth-child(8) .info-card::before { background-image: url("../images/info-cards/about/roots.jpg"); }
.about-page .about-roots-section .col:nth-child(9) .info-card::before { background-image: url("../images/info-cards/about/community-service.jpg"); }
.about-page .about-roots-section .col:nth-child(10) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .about-dark-section .col:nth-child(1) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .about-dark-section .col:nth-child(2) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .about-dark-section .col:nth-child(3) .info-card::before { background-image: url("../images/info-cards/about/agent-training.jpg"); }
.about-page .about-dark-section .col:nth-child(4) .info-card::before { background-image: url("../images/info-cards/about/community-service.jpg"); }
.about-page .about-dark-section .col:nth-child(5) .info-card::before { background-image: url("../images/info-cards/about/marketing.jpg"); }
.about-page .about-dark-section .info-card__icon { display: none; }
.about-page .about-roots-section .info-card__icon { display: none; }
.about-page .about-roots-section .info-card__text,
.about-page .about-dark-section .info-card__text {
  grid-column: 2;
  align-self: center;
  padding: 1.1rem 1.25rem;
}

/* The final "what we provide" group is also a strong fit for the same
   picture-left treatment. */
.about-page .bg-dark:not(.about-dark-section) .info-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
}
.about-page .bg-dark:not(.about-dark-section) .info-card::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 100%;
  background: center / cover no-repeat url("../images/info-cards/about/marketing.jpg");
}
.about-page .bg-dark:not(.about-dark-section) .info-card__icon { display: none; }
.about-page .bg-dark:not(.about-dark-section) .info-card__title,
.about-page .bg-dark:not(.about-dark-section) .info-card__text {
  grid-column: 2;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
.about-page .bg-dark:not(.about-dark-section) .info-card__title { padding-top: 1rem; }
.about-page .bg-dark:not(.about-dark-section) .info-card__text { padding-bottom: 1rem; }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(2) .info-card::before { background-image: url("../images/info-cards/about/community-service.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(3) .info-card::before { background-image: url("../images/info-cards/about/marketing.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(4) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(5) .info-card::before { background-image: url("../images/info-cards/about/agent-training.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(6) .info-card::before { background-image: url("../images/info-cards/about/marketing.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(7) .info-card::before { background-image: url("../images/info-cards/about/community-service.jpg"); }
.about-page .bg-dark:not(.about-dark-section) .col:nth-child(8) .info-card::before { background-image: url("../images/info-cards/about/global-network.jpg"); }

@media (max-width: 575.98px) {
  .services-grid-section .service-card {
    display: block;
  }
  .services-grid-section .service-card__image { width: 110px; }
  .services-grid-section .service-card .card-body {
    min-height: 220px;
    margin-left: 110px;
  }
  .about-page .about-roots-section .info-card,
  .about-page .about-dark-section .info-card,
  .about-page .bg-dark:not(.about-dark-section) .info-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* Keep About menu anchors below the sticky header instead of hiding their
   section headings underneath it. */
.about-page section[id] {
  scroll-margin-top: 110px;
}

.about-roots-section .info-card,
.about-dark-section .info-card {
  padding: 1.25rem 1.35rem;
}

.about-roots-section .info-card__icon,
.about-dark-section .info-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
}

.about-roots-section .info-card__text,
.about-dark-section .info-card__text {
  font-size: 0.86rem;
  line-height: 1.5;
}

.about-dark-section {
  background: #101d33 !important;
}

.about-dark-section .info-card {
  border-color: rgba(255, 255, 255, 0.12);
}

.about-section-heading {
  padding: 3rem 0;
}

.about-section-heading .responsive-heading {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.about-marketing-section {
  padding: 3.25rem 0 3.75rem;
}

.about-marketing-section .row + .row {
  margin-top: 1.25rem;
}

.about-guarantee-section {
  padding: 3.25rem 0;
}

.service-guarantee-visual {
  min-height: 360px;
  border-radius: var(--remax-radius-card);
}

.about-guarantee-section .col-lg-6:last-child {
  padding: 1rem 2rem;
}

.about-guarantee-section h1 {
  margin-bottom: 0.85rem;
  font-size: 1.65rem;
  line-height: 1.2;
}

.about-guarantee-section p {
  margin-bottom: 0;
  color: var(--remax-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

@media (max-width: 767.98px) {
  .services-page .hero-band--tall,
  .about-page .hero-band--tall {
    min-height: 300px;
    padding: 76px 0 38px;
  }

  .services-grid-section,
  .about-content-section,
  .about-guarantee-section {
    padding: 2.25rem 0;
  }

  .about-section-heading {
    padding: 2.25rem 1rem;
  }

  .about-marketing-section {
    padding: 2.25rem 0 2.75rem;
  }

  .about-guarantee-section .col-lg-6:last-child {
    padding: 1.25rem 0 0;
  }

  .service-guarantee-visual {
    min-height: 240px;
  }
}

/* ---------- Core team page ---------- */
.team-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 270px;
  padding: 72px 0 38px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.team-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(7, 28, 69, 0.76), rgba(0, 152, 218, 0.72));
}

.team-hero .container {
  position: relative;
  z-index: 1;
}

.team-hero__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.team-hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: normal;
}

.team-hero h1 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.team-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  line-height: 1.5;
}

.team-page {
  max-width: 1120px;
  padding-top: 2.75rem;
  padding-bottom: 3.75rem;
}

.team-page .staff-row {
  gap: 18px;
}

.team-page .staff-photo {
  height: 220px;
}

.team-page .staff-info {
  padding: 17px 18px 19px;
}

.team-page .staff-info h3 {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 20px;
}

.staff-contact-list {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
}

.staff-contact-list a,
.staff-contact-list span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--remax-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.staff-contact-list a:hover {
  color: var(--remax-primary);
}

.staff-contact-list i {
  flex: 0 0 auto;
  color: var(--remax-primary);
  font-size: 0.85rem;
  line-height: 1.1;
}

.team-empty-state {
  max-width: 520px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  background: #fff;
  box-shadow: var(--remax-shadow-card);
  text-align: center;
}

.team-empty-state > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: rgba(52, 84, 209, 0.09);
  color: var(--remax-primary);
  font-size: 1.35rem;
}

.team-empty-state h2 {
  margin-bottom: 0.45rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

.team-empty-state p {
  margin-bottom: 1.15rem;
  color: var(--remax-muted);
  font-size: 0.88rem;
}

@media (max-width: 767.98px) {
  .team-hero {
    min-height: 220px;
    padding: 66px 0 32px;
  }

  .team-page {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }

  .team-page .staff-photo {
    height: 200px;
  }
}

/* ---------- Homepage conversion layout ---------- */
.home-page {
  font-family: var(--remax-font);
}

.home-hero .wrap__intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 48px 0;
}

.home-hero .wrap__intro > .container {
  width: 100%;
}

.home-hero .bg-overlay {
  background: linear-gradient(180deg, rgba(4, 18, 42, 0.58) 0%, rgba(4, 18, 42, 0.4) 42%, rgba(4, 18, 42, 0.72) 100%);
}

.home-hero .wrap__intro-heading {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.home-hero__eyebrow {
  display: block;
  margin-bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: normal;
  text-align: center;
}

.home-hero h1 {
  margin-bottom: 0.9rem !important;
  font-size: clamp(1.8rem, 3.3vw, 2.65rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-hero__subtitle {
  max-width: 620px;
  margin: 0 auto 1.35rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.home-hero .wrap__intro-heading > .search__property {
  position: relative;
  width: 100%;
  max-width: 1255px;
  margin: 2rem auto 0 !important;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 35px rgba(4, 18, 42, 0.2);
  backdrop-filter: blur(7px);
}

.home-hero .search__container--filterbar {
  padding: 1rem 0 0;
  border-radius: 0;
  background: transparent;
}

.home-hero .search__property .listing-type-tabs {
  position: absolute;
  top: -1.05rem;
  left: 1.25rem;
  z-index: 3;
  margin-left: 0;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
}

.home-hero .search__property > .position-relative {
  position: static !important;
}

.home-hero .listing-type-tabs__btn {
  padding: 0.34rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--remax-radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--remax-ink);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(7, 28, 69, 0.16);
}

.home-hero .listing-type-tabs__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--remax-ink);
}

.home-hero .listing-type-tabs__btn.active {
  background: var(--remax-accent-red);
  color: #fff;
}

.home-hero__quick-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
}

.home-hero__quick-links a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.home-hero__quick-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-hero__quick-links i {
  margin-right: 0.3rem;
  color: var(--remax-red-solid);
}

.home-hero__trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.7rem;
  font-weight: 600;
}

.home-hero__trust i {
  margin-right: 0.3rem;
  color: #fff;
}

.home-trust-strip {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding: 1rem 0;
  background: #fff;
  border-bottom: 1px solid var(--remax-border);
}

.home-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

.home-trust-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem 0.75rem;
  border-right: 1px solid var(--remax-border);
}

.home-trust-grid > div:last-child {
  border-right: 0;
}

.home-trust-grid strong {
  color: var(--remax-primary);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
}

.home-trust-grid span {
  color: var(--remax-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.home-page .popular__city-large,
.home-page .recent__property {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.home-page .title__head-v2 h2,
.home-page .recent__property h2 {
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.home-section-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--remax-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: normal;
}

.home-page .home__about {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-page .home__about h2 {
  font-size: 1.8rem;
  line-height: 1.2;
}

.home-page .home__about p {
  font-size: 0.9rem;
  line-height: 1.65;
}

.home-page .cta-v1 {
  border-radius: var(--remax-radius-card);
}

@media (max-width: 767.98px) {
  .home-hero .wrap__intro {
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 40px;
  }

  .home-hero .search__property {
    padding: 1rem;
    border-radius: 14px;
  }

  .home-hero .search__container--filterbar {
    padding: 0.85rem 0 0;
  }

  .home-hero .search__property .listing-type-tabs {
    margin-left: 0;
  }

  .home-hero .listing-type-tabs__btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.68rem;
  }

  .home-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 0;
  }

  .home-trust-grid > div:nth-child(2) {
    border-right: 0;
  }

  .home-page .popular__city-large,
  .home-page .recent__property {
    padding-top: 2.35rem;
    padding-bottom: 2.35rem;
  }

  .home-hero__quick-links {
    gap: 0.45rem 0.85rem;
  }

  .home-hero__trust {
    gap: 0.3rem 0.7rem;
    font-size: 0.65rem;
  }
}

/* Keep every legacy warm accent inside the RE/MAX red/blue palette. */
.text-warning,
.text-pink,
.text-orange,
.text-yellow {
  color: var(--remax-red-solid) !important;
}

.bg-warning,
.bg-pink,
.bg-orange,
.bg-yellow,
.btn-warning,
.badge-warning {
  background-color: var(--remax-red-solid) !important;
  border-color: var(--remax-red-solid) !important;
  color: #fff !important;
}

.btn-outline-warning {
  border-color: var(--remax-red-solid) !important;
  color: var(--remax-red-solid) !important;
}

.btn-outline-warning:hover {
  background-color: var(--remax-red-solid) !important;
  color: #fff !important;
}

code {
  color: var(--remax-red-solid) !important;
}

.btn-social.instagram {
  background-color: var(--remax-red-solid) !important;
  color: #fff !important;
}

.btn-social.outlined.instagram:hover {
  color: #fff !important;
}

/* ---------- Location and property-type directories ---------- */
.home-section-heading,
.directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.home-section-heading h2,
.directory-heading h2 {
  margin: 0;
  color: var(--remax-ink);
  font-size: 1.55rem;
  line-height: 1.25;
}

.home-section-link {
  flex: 0 0 auto;
  color: var(--remax-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.home-section-link:hover {
  color: var(--remax-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-section-link i {
  margin-left: 0.25rem;
}

.directory-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 250px;
  padding: 72px 0 38px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.directory-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(7, 28, 69, 0.78), rgba(0, 152, 218, 0.72));
}

.directory-hero .container,
.directory-hero__inner {
  position: relative;
  z-index: 1;
}

.directory-hero__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.directory-hero__eyebrow {
  display: block;
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: normal;
}

.directory-hero h1 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.directory-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
}

.directory-page {
  padding-top: 3.25rem;
  padding-bottom: 4rem;
}

.directory-count {
  color: var(--remax-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.directory-card {
  display: flex;
  min-height: 155px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  background: #fff;
  box-shadow: var(--remax-shadow-card);
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.directory-card:hover {
  border-color: rgba(52, 84, 209, 0.35);
  box-shadow: var(--remax-shadow-card-hover);
  transform: translateY(-3px);
}

.directory-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.15rem;
  border-radius: 50%;
  background: rgba(52, 84, 209, 0.09);
  color: var(--remax-primary);
  font-size: 1rem;
}

.directory-card__name {
  color: var(--remax-ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

.directory-card__count {
  color: var(--remax-muted);
  font-size: 0.76rem;
}

/* The full property-type directory uses the same picture-led card language,
   with a slightly wider image strip than the compact homepage row. */
.directory-grid--images {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.directory-grid--images .directory-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 82px;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
}
.directory-grid--images .directory-card__image {
  display: block;
  align-self: stretch;
  width: 82px;
  height: calc(100% + 2px);
  min-height: 84px;
  margin: -1px 0 -1px -1px;
  border-radius: 12px 0 0 12px;
  object-fit: cover;
}
.directory-grid--images .directory-card__body {
  padding: 0.7rem 0.8rem;
}

.directory-empty {
  grid-column: 1 / -1;
  color: var(--remax-muted);
  text-align: center;
}

/* Location directory cards match the image-led cards used on the landing
   page: full-bleed photo, dark readable overlay, red count badge. */
.directory-grid--locations {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.directory-location-card {
  position: relative;
  display: block;
  height: 230px;
  overflow: hidden;
  border-radius: var(--remax-radius-card);
  background: #172b4d;
  box-shadow: var(--remax-shadow-card);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.directory-location-card:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: var(--remax-shadow-card-hover);
}
.directory-location-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.directory-location-card:hover > img { transform: scale(1.04); }
.directory-location-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23,43,77,.08) 25%, rgba(10,28,55,.9) 100%);
}
.directory-location-card__count {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: .55rem 1rem;
  border-radius: var(--remax-radius-pill);
  background: var(--remax-red-solid);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.directory-location-card__name {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .category-grid--popular,
  .directory-grid--images,
  .directory-grid--locations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .category-grid--popular,
  .directory-grid--images,
  .directory-grid--locations {
    grid-template-columns: 1fr;
  }

  .category-grid {
    gap: 0.7rem;
  }

  .home-section-heading,
  .directory-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .directory-hero {
    min-height: 220px;
    padding: 66px 0 32px;
  }

  .directory-page {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }

  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .directory-card {
    min-height: 135px;
    padding: 1rem 0.65rem;
  }
}

/* Price badge — same dark bottom-left treatment as before, but a softer
   rounded-rect (not a full pill) since per-sqm listings need a second line
   for the computed total, which a pill shape doesn't suit. */
.property-card__badge--price {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  border-radius: var(--remax-radius-control);
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  background: var(--remax-ink);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Short-stay option slider: scoped to one property card. Its JS swaps only
   this card's gallery image and price; it never advances the catalogue. */
.short-stay-rate-slider {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .42rem .5rem .42rem .7rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #fff;
  background: rgba(20, 27, 34, .9);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.short-stay-rate-slider__viewport { min-width: 0; flex: 1; }
.short-stay-rate-slider__slide { display: none; min-width: 0; }
.short-stay-rate-slider__slide.is-active { display: flex; align-items: baseline; justify-content: space-between; gap: .55rem; }
.short-stay-rate-slider__slide span { overflow: hidden; color: rgba(255,255,255,.78); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.short-stay-rate-slider__slide strong { flex: 0 0 auto; color: #fff; font-size: .78rem; white-space: nowrap; }
.short-stay-rate-slider__controls { display: inline-flex; align-items: center; gap: .28rem; flex: 0 0 auto; }
.short-stay-rate-slider__controls button,
.short-stay-detail-slider__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.short-stay-rate-slider__controls button:hover { background: rgba(255,255,255,.2); }
.short-stay-rate-slider__controls span { min-width: 25px; color: rgba(255,255,255,.7); font-size: .6rem; text-align: center; }

/* Detail-page version uses the same option-slide behavior but keeps the
   global two-column property detail shell untouched. */
.stay-options { overflow: hidden; }
.stay-options__heading { margin-bottom: 1rem; }
.stay-options__eyebrow { display: block; margin-bottom: .2rem; color: var(--remax-primary); font-size: .68rem; font-weight: 800; letter-spacing: normal; }
.short-stay-detail-slider { position: relative; }
.short-stay-detail-slider__viewport { min-height: 255px; }
.short-stay-detail-slider__slide { display: none; grid-template-columns: minmax(220px, 38%) minmax(0, 1fr); min-height: 255px; overflow: hidden; border: 1px solid var(--remax-border); border-radius: 16px; background: #fff; }
.short-stay-detail-slider__slide.is-active { display: grid; }
.short-stay-detail-slider__image { position: relative; min-height: 255px; background: #eef1f4; }
.short-stay-detail-slider__image img { width: 100%; height: 100%; object-fit: cover; }
.short-stay-detail-slider__image > span { position: absolute; top: 12px; left: 12px; padding: .3rem .65rem; border-radius: 999px; color: var(--remax-ink); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: .68rem; font-weight: 800; }
.short-stay-detail-slider__content { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.4rem; }
.short-stay-detail-slider__content h4 { margin: .15rem 0 .45rem; color: var(--remax-ink); font-size: 1.2rem; }
.short-stay-detail-slider__content p { margin: 0; color: var(--remax-muted); font-size: .82rem; line-height: 1.55; }
.stay-option__availability { margin-top: .75rem; color: #16865b; font-size: .74rem; font-weight: 700; }
.short-stay-detail-slider__price { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--remax-border); }
.short-stay-detail-slider__price strong { color: var(--remax-ink); font-size: 1.15rem; white-space: nowrap; }
.short-stay-detail-slider__controls { position: absolute; right: 14px; top: 14px; z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .25rem; border-radius: 999px; background: rgba(20,27,34,.88); }
.short-stay-detail-slider__controls span { min-width: 34px; color: #fff; font-size: .68rem; text-align: center; }
.stay-options__grid { display: grid; gap: .75rem; }
.stay-option { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--remax-border); border-radius: 14px; }
.stay-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--remax-primary); background: rgba(41,70,182,.08); }
.stay-option__content h4 { margin: 0; font-size: .92rem; }
.stay-option__content p { margin: .2rem 0 0; color: var(--remax-muted); font-size: .76rem; }
.stay-option__action { display: grid; justify-items: end; gap: .45rem; }

@media (max-width: 767.98px) {
  .short-stay-detail-slider__slide.is-active { grid-template-columns: 1fr; }
  .short-stay-detail-slider__image { min-height: 190px; height: 190px; }
  .short-stay-detail-slider__content { padding: 1rem; }
  .short-stay-detail-slider__price { align-items: stretch; flex-direction: column; }
  .short-stay-detail-slider__price .btn { width: 100%; }
  .stay-option { grid-template-columns: auto minmax(0,1fr); }
  .stay-option__action { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; width: 100%; }
}

.property-card__badge--price-was {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  margin-right: 0.35rem;
}

.property-card__badge--price-rate {
  display: block;
}

.property-card__badge--price-total {
  display: block;
  margin-top: 1px;
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.property-card__body {
  padding: 0.75rem 0.1rem 0;
}

.property-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.property-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--remax-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.property-card__description {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--remax-muted);
  margin-top: 0.1rem;
  height: 2.9em;
  min-height: 2.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.property-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--remax-muted);
}

.property-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.property-card__meta i {
  color: var(--remax-muted);
  font-size: 0.8rem;
}

.property-card__price-unit {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- City cards: soften corners + hover lift, same family as property cards ---------- */

.card__image-hover-style-v3 {
  border-radius: var(--remax-radius-card);
  overflow: hidden;
  box-shadow: var(--remax-shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card__image-hover-style-v3:hover {
  box-shadow: var(--remax-shadow-card-hover);
  transform: translateY(-4px);
}

.card__image-hover-style-v3-thumb {
  border-radius: var(--remax-radius-card);
  overflow: hidden;
  line-height: 0;
}

.card__image-hover-style-v3-thumb a,
.card__image-hover-style-v3-thumb img {
  display: block;
}

/* "Find more properties in other cities" — sits inside the same <section>
   as the city cards above, which already carries 80px top/bottom padding
   (a global "section{padding:80px 0}" rule in styles.css). This block used
   to add its own py-5 on the same bottom edge, compounding into a huge gap
   before the next section. The spacing here is deliberately symmetric: equal
   padding above/below the content between the two border lines, and equal
   margin outside the borders (city cards -> top border == bottom border ->
   "Properties for Sale" heading), so the block sits centered in the gap
   rather than hugging one side. .popular__city-large's own bottom padding is
   zeroed and .recent__property's top padding takes over that job instead,
   matching .other-cities' own margin-top exactly. */
.other-cities {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--remax-border);
  border-bottom: 1px solid var(--remax-border);
}

.popular__city-large {
  padding-bottom: 0;
}

.recent__property {
  padding: 2.5rem 0;
}

.other-cities__heading {
  font-weight: 600;
  color: var(--remax-muted);
  margin-bottom: 1rem;
}

.other-cities__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.other-cities__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--remax-radius-pill);
  border: 1.5px solid var(--remax-border);
  background: #fff;
  color: var(--remax-ink);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.other-cities__pill:hover {
  border-color: #aaaaaa;
  background-color: #fafafa;
  color: var(--remax-ink);
  transform: translateY(-1px);
}

.other-cities__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  border-radius: var(--remax-radius-pill);
  background: var(--remax-red-solid);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Picture-led category cards inspired by the compact real-estate directory
   layout: image strip on the left, label and count on the right. */
.category-grid {
  display: grid;
  gap: 1rem;
}
.category-grid--popular {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.category-tile {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 82px;
  overflow: hidden;
  border: 1px solid var(--remax-border);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--remax-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.category-tile:hover {
  border-color: var(--remax-primary);
  color: var(--remax-ink);
  transform: translateY(-2px);
  box-shadow: var(--remax-shadow-card);
}
.category-tile__image {
  display: block;
  align-self: stretch;
  width: 76px;
  height: calc(100% + 2px);
  min-height: 84px;
  margin: -1px 0 -1px -1px;
  border-radius: 12px 0 0 12px;
  object-fit: cover;
}
.category-tile__body,
.directory-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
}
.category-tile__name {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
}
.category-tile__count {
  font-size: 0.74rem;
  color: var(--remax-muted);
}

@media (max-width: 991.98px) {
  .category-grid--popular {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .category-grid--popular {
    grid-template-columns: 1fr;
  }
}

/* styles.css sets this same margin via the compound selector
   ".card__image-hover-style-v3 .card__image-hover-style-v3-thumb" (two
   classes), which outranks a single-class ".card__image-hover-style-v3-thumb"
   override no matter which stylesheet loads last — specificity beats source
   order. Match the compound selector so this actually wins the cascade. */
.card__image-hover-style-v3 .card__image-hover-style-v3-thumb {
  margin: 0;
}

/* ---------- Nav: Airbnb-style pill tabs (markup/JS unchanged — .navbar stays
   .navbar so the legacy bundle's scroll-to-solid handler and Bootstrap's own
   collapse/dropdown JS keep working; this is a pure visual layer, scoped to
   .nav-v2 so it only touches the new nav, not any other .navbar-* element on
   the page). ---------- */

.nav-v2 {
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.nav-v2 > .container {
  width: 95%;
  max-width: 1255px;
}
.nav-v2 .navbar-collapse { flex: 1 1 auto; }
.nav-v2 .navbar-collapse > .navbar-nav:first-child {
  margin-left: auto !important;
  margin-right: 1rem;
  gap: 6px;
}

.nav-v2.fixed-top {
  border-bottom-color: var(--remax-border);
}

.nav-v2 .navbar-brand img {
  height: 38px;
  width: auto;
}

.nav-v2 .navbar-nav .nav-link,
.nav-v2 .navbar-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  padding: 5px 10px !important;
  border-radius: var(--remax-radius-pill);
  border: 1.5px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: border-color 0.2s ease, background-color 0.18s ease;
  white-space: nowrap;
}

.nav-v2 .navbar-collapse > .navbar-nav:first-child {
  flex-wrap: nowrap;
  gap: 2px;
}

.nav-v2 .navbar-collapse {
  align-items: center;
}

.nav-v2 .navbar-nav .nav-link,
.nav-v2 .navbar-nav .dropdown-toggle {
  border-color: #e2e2e2;
}

.nav-v2 .navbar-nav .nav-link:hover,
.nav-v2 .navbar-nav .dropdown-toggle:hover {
  border-color: #aaaaaa;
  background-color: #fafafa;
}

/* styles.css paints an orange bottom border on hover via
   ".navbar-soft .navbar-nav .nav-item:hover .nav-link" (4 class-level
   selectors) — that outranks the plain ".nav-v2 ... :hover" rule above, so
   nav-link:hover's border-color never reached the bottom edge. Match classes
   on the <nav> itself (.navbar-soft.nav-v2, both present in the markup) to
   push specificity higher and win outright, swapping orange for brand red. */
.navbar-soft.nav-v2 .navbar-nav .nav-item:hover .nav-link,
.navbar-soft.nav-v2 .navbar-nav .nav-item.show .nav-link {
  border-bottom-color: var(--remax-accent-red);
}

.btn-login {
  background-color: var(--remax-accent-red);
  border-color: var(--remax-accent-red);
  color: #fff;
}

.btn-login:hover,
.btn-login:focus {
  background-color: #a8182a;
  border-color: #a8182a;
  color: #fff;
}

/* Active nav item — same border treatment as :hover above (grey sides, red
   bottom edge) so the current page reads as "already where hover would take
   you", rather than its own separate style. */
.nav-v2 .navbar-nav .nav-link.active,
.nav-v2 .navbar-nav .dropdown-toggle.active {
  background-color: transparent !important;
  color: var(--remax-ink) !important;
  border-color: #aaaaaa !important;
  border-bottom: 2px solid var(--remax-accent-red) !important;
  border-radius: var(--remax-radius-pill) !important;
}

/* CTA buttons (Contact Us / Login) — same footprint, evenly spaced. */
/* Shared footprint for both CTA pills — padding/font-size live here, not on
   .btn-primary, so Contact Us (btn-primary) and Login (btn-login) always
   match instead of each falling back to a different .btn base padding. */
.nav-v2 .nav-cta-btn {
  min-width: 132px;
  padding: 5px 12px;
  min-height: 36px;
  font-size: 12.5px;
  text-transform: none;
  justify-content: center;
}

.nav-v2 .navbar-collapse > ul.navbar-nav + ul.navbar-nav {
  margin-left: 12px;
}

/* Account control matches the Contact Us footprint while remaining a quieter
   outlined pill for logged-in users. */
.nav-v2 .navbar-nav .dropdown-toggle.nav-v2-account-btn {
  width: auto;
  min-width: 132px;
  height: 36px;
  padding: 5px 12px !important;
  border: 1.5px solid var(--remax-accent-red) !important;
  border-radius: var(--remax-radius-pill) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: #fff !important;
  color: var(--remax-ink) !important;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-v2 .navbar-nav .dropdown-toggle.nav-v2-account-btn:hover,
.nav-v2 .navbar-nav .dropdown-toggle.nav-v2-account-btn:focus {
  border-color: var(--remax-accent-red) !important;
  background: rgba(220, 28, 45, 0.06) !important;
  color: var(--remax-accent-red) !important;
}

/* Dropdown panels (Our Services / About Us / Account) — rounded card, soft shadow. */
.nav-v2 .dropdown-menu {
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  padding: 8px;
  margin-top: 10px;
}

/* The dropdown only shows via a CSS :hover rule on the parent <li> (see
   .navbar-hover .dropdown:hover > .dropdown-menu in styles.css), with no JS
   hover-intent delay. The 10px margin-top above is a real gap in the page —
   moving the mouse from the toggle straight down into it breaks :hover on
   the <li> and the menu disappears before the cursor reaches it. This
   pseudo-element is a child of .dropdown-menu, so hovering it still counts
   as hovering the menu (and therefore the <li>), bridging the gap without
   changing where the menu visually sits. */
.nav-v2 .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-v2 .dropdown-item {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}

.nav-v2 .dropdown-item:hover,
.nav-v2 .dropdown-item:focus {
  background-color: #f5f5f5;
}

@media (max-width: 991.98px) {
  .nav-v2 .navbar-nav .nav-link,
  .nav-v2 .navbar-nav .dropdown-toggle {
    border-color: #e2e2e2 !important;
    color: var(--remax-ink) !important;
    margin: 3px 0;
  }
}

/* ---------- Footer: brand accents on the existing dark footer band
   (structure/markup unchanged — .wrapper__footer/.bg__footer/.footer-title
   already come styled dark+full-bleed from the legacy bundle; this layer
   only reskins link hover, headings, and the CTA button to the new brand). --- */

.footer-v2 .footer-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  opacity: 0.6;
  margin-bottom: 18px;
}

.footer-v2 .widget__footer a {
  transition: color 0.15s ease, opacity 0.15s ease;
}

.footer-v2 .widget__footer a:hover {
  color: var(--remax-primary) !important;
  opacity: 1;
}

.footer-v2 .btn-social.facebook {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.footer-v2 .btn-social.facebook:hover {
  border-color: var(--remax-primary);
  background-color: var(--remax-primary);
}

.footer-v2 .bg__footer-bottom a:hover {
  color: var(--remax-primary);
}

/* Property-type link list — wraps into 2 columns instead of one long
   single-column list, so it doesn't dominate the footer's width regardless
   of how many property types exist in the database. */
.footer-columns-2 {
  column-count: 2;
  column-gap: 1.5rem;
}

.footer-columns-2 li {
  break-inside: avoid;
}

.footer-contact-list {
  margin-bottom: 0;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.footer-contact-list li i {
  margin-top: 0.2rem;
}

/* ---------- Property detail page: sidebar CTA card + spec grid + section
   headings (targets the existing markup's own classes directly — no
   restructuring, this is a pure CSS layer). ---------- */

.detail-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--remax-border);
}

.single__detail-area-title h4 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.single__detail-area-price h5 {
  font-size: 22px;
  font-weight: 700;
}

/* Agent/contact sidebar — sticky rounded card, matches the reference's .property-sidebar. */
.profile__agent {
  position: sticky;
  top: 96px;
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  padding: 22px;
  box-shadow: var(--remax-shadow-card);
  background: #fff;
}

.profile__agent__header-avatar figure {
  margin: 0 0 14px;
}

.profile__agent__header-avatar figure img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.profile__agent__header-avatar ul li {
  margin-bottom: 10px;
}

.profile__agent__header-avatar .btn {
  width: 100%;
  justify-content: center;
}

/* Spec grid rows — quiet list rows instead of the legacy bullet list. */
.property__detail-info-list {
  margin: 0;
}

.property__detail-info-list li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--remax-border);
  font-size: 14px;
  color: var(--remax-muted);
}

.property__detail-info-list li b {
  color: var(--remax-ink);
  font-weight: 600;
}

.icon-checkbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin: 0;
}

.icon-checkbox li {
  list-style: none;
  padding: 6px 0;
  font-size: 14px;
  color: var(--remax-ink);
}

.icon-checkbox li::before {
  content: '\2713';
  display: inline-block;
  margin-right: 8px;
  color: var(--remax-primary);
  font-weight: 700;
}

/* Dark CTA banner — matches the reference's .host-panel/.standout-card. */
/* Lives on the same .container div every other section uses, so it lines up
   with the same left/right edges and max-width — no more viewport-relative
   inset margin. Padding replaces the py-5 that used to live on the outer
   <section> (which had the background), now that the background/radius sit
   on the inner .container instead. */
.cta-v1 {
  background: #111111;
  border-radius: var(--remax-radius-card);
  padding: 3rem 2.5rem;
}

.show__more-button {
  display: inline-block;
  background-color: var(--remax-primary) !important;
  border-color: var(--remax-primary) !important;
}

/* Homepage "Properties for Sale/Rent" carousels — plain CSS scroll-snap, not
   the site's OwlCarousel bundle (its plugin module never registers at
   runtime — an earlier JS error in that 566KB minified bundle aborts the
   script before it gets there — so it silently stays display:none forever)
   and not Bootstrap's .carousel (which only jumps whole slides, so grouping
   cards per-slide leaves a gap on a short last slide). Scrolling by exactly
   one card's width (see the inline script in home-page.html) keeps movement
   smooth and gap-free regardless of how many cards are visible at once. */
.property-carousel-wrap {
  position: relative;
}

.property-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.property-carousel::-webkit-scrollbar {
  display: none;
}

.property-carousel__item {
  flex: 0 0 calc(33.333% - 0.85rem);
  min-width: 260px;
  scroll-snap-align: start;
}

@media (max-width: 991.98px) {
  .property-carousel__item {
    flex-basis: calc(50% - 0.65rem);
  }
}

@media (max-width: 575.98px) {
  .property-carousel__item {
    flex-basis: 85%;
  }
}

.property-carousel-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  background: none;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.property-carousel-wrap:hover .property-carousel-nav {
  opacity: 1;
  visibility: visible;
}

.property-carousel-nav--prev {
  left: -4px;
}

.property-carousel-nav--next {
  right: -4px;
}

.property-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--remax-ink);
  box-shadow: var(--remax-shadow-card-hover);
  font-size: 1rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.property-carousel-nav:hover .property-carousel__arrow {
  background: var(--remax-primary);
  color: #fff;
}

.cta-v1 .btn-light {
  border-radius: var(--remax-radius-pill);
  font-weight: 700;
  padding: 12px 26px;
}

/* ---------- Listing search filter form: contract-type tabs + multi-select
   checkbox dropdowns, replacing plain <select> elements (a <select> can't
   hold multiple human-friendly labels well, and native multi-select listbox
   UI is unfamiliar to most users). ---------- */

/* The homepage hero renders this exact same form (see property-catalogue.html
   for the full-bleed version). .search__container has no CSS of its own
   anywhere in the codebase — floats directly on the hero photo by design
   (no card backing), each field standing on its own white .form-control. */
.search__container--filterbar {
  padding: 1.5rem 1.15rem 1.1rem;
}

/* Homepage hero: keep the tabs/filter bar left-aligned with each other
   rather than inheriting any center alignment from the hero heading above
   them, matching the catalogue page's full-bleed filter bar. */
.search__property {
  text-align: left;
}

/* .search__container--filterbar (unlike the catalogue page's edge-to-edge
   .search__area-inner) has its own left padding, so the tabs sitting
   outside it need the same inset to actually line up with the fields
   inside rather than starting flush with the panel's outer edge. */
.search__property .listing-type-tabs {
  margin-left: 1.5rem;
}

/* Catalogue page filter bar: the legacy .search__area-inner rule this class
   also matches only sets an asymmetric top-only padding (30px 0 0), so the
   tabs+form block always sat pinned to the top of the blue panel with the
   rest of its height as dead space below. Centering the whole block (tabs
   included) inside the panel and giving it a symmetric padding fixes both
   at once. */
.search__area .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 320px;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  gap: 0.85rem;
}

.search__area-inner {
  padding: 0;
  margin-block: 0;
}

/* Listing-type (For Sale / For Rent) rendered as a pill-shaped tab bar
   sitting above the filter panel, left-aligned with it, rather than as an
   inline field inside the form grid — so the panel reads as "here's the
   For Sale search" instead of a flat list of equal-weight fields. */
.listing-type-tabs {
  display: inline-flex;
  gap: 6px;
  position: relative;
  z-index: 1;
  text-align: left;
  margin-bottom: 0;
}

.listing-type-tabs__btn {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0.6rem 1.75rem;
  border-radius: var(--remax-radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.listing-type-tabs__btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.listing-type-tabs__btn.active {
  background: #fff;
  color: var(--remax-primary);
}

/* Fields no longer carry a <label> — an icon inside the control itself
   (leading icon on dropdown toggles, .filter-input-icon wrapper on plain
   inputs/selects) keeps each field's purpose identifiable without one. */
.checkbox-dropdown__toggle {
  gap: 0.6rem;
}

.checkbox-dropdown__toggle > i:first-child {
  color: var(--remax-muted);
  font-size: 0.85rem;
}

.filter-input-icon {
  position: relative;
}

.filter-input-icon > i {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--remax-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.filter-input-icon > input,
.filter-input-icon > select {
  padding-left: 2.25rem;
  width: 100%;
}

.checkbox-dropdown {
  position: relative;
}

.checkbox-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: var(--remax-ink);
}

/* Explicit, matching box model for the dropdown toggle and the icon-prefixed
   price/bedroom/bathroom/garage inputs — legacy styles.css has several
   conflicting bare .form-control{height:...} rules of equal specificity (a
   fixed 45px, an auto, a calc()...), and which one actually wins for a given
   element depends on tag-type quirks that aren't worth relitigating.
   Asserting the same height/padding/box-sizing directly here sidesteps that
   ambiguity. */
.checkbox-dropdown__toggle,
.filter-input-icon > input,
.filter-input-icon > select {
  height: 46px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Search is a field-sized action, not a taller or shorter control. */
.home-hero #filterForm button[type="submit"],
.search__area #filterForm button[type="submit"] {
  height: 46px;
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 999px;
}

.checkbox-dropdown__toggle {
  padding: 0.6rem 0.9rem;
}

.checkbox-dropdown__toggle span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkbox-dropdown__toggle i {
  font-size: 0.75rem;
  color: var(--remax-muted);
  flex-shrink: 0;
}

.checkbox-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--remax-radius-control);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 8px;
}

.checkbox-dropdown__panel.show {
  display: block;
}

.checkbox-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--remax-ink);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-dropdown__option:hover {
  background: #f5f5f5;
}

.checkbox-dropdown__option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--remax-primary);
  cursor: pointer;
}

/* Type-to-filter box injected at the top of the panel by
   listing-filter-form.js, styled to match the search box used by the
   admin-wide searchable-select.js component. */
.checkbox-dropdown__search {
  display: block;
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  color: var(--remax-ink);
  border: 1px solid var(--remax-border);
  border-radius: 8px;
  outline: none;
}

.checkbox-dropdown__search:focus {
  border-color: var(--remax-primary);
  box-shadow: 0 0 0 2px rgba(52, 84, 209, 0.1);
}

.checkbox-dropdown__empty {
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  color: var(--remax-muted);
}

/* ---------- Generic content pages (about/services/privacy/contact/team):
   these are plain Bootstrap .card/.btn/.form-control markup with no
   bespoke classes, so one shared rule lifts all of them at once. ---------- */

.card {
  border: none;
  border-radius: var(--remax-radius-card);
  box-shadow: var(--remax-shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card.h-100:hover,
.card.shadow-sm:hover {
  box-shadow: var(--remax-shadow-card-hover);
  transform: translateY(-3px);
}

.card .h4.text-primary,
.card .h2.text-primary {
  font-weight: 700;
}

/* Dark full-bleed hero/CTA bands used on about/services/privacy/contact/team —
   rounded corners at the page edge instead of a hard rectangle, matching the
   reference's rounded full-bleed hero treatment. */
.bg-dark.py-5 {
  position: relative;
}

.bg-dark.py-5 .display-5 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Team page: staff cards + bio modal (Bootstrap's own modal JS,
   just restyled — no new JS needed). ---------- */

.staff-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.staff-card {
  border: 1.5px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.staff-card:hover {
  border-color: rgba(52, 84, 209, 0.35);
  box-shadow: 0 14px 44px rgba(52, 84, 209, 0.12);
  transform: translateY(-5px);
}

.staff-photo {
  height: 240px;
  overflow: hidden;
  background: #f2f2f2;
}

.staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.25, 0, 0.25, 1);
}

.staff-card:hover .staff-photo img {
  transform: scale(1.07);
}

.staff-info {
  padding: 20px 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.staff-info h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.staff-badges .badge-role {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--remax-radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(52, 84, 209, 0.1);
  color: var(--remax-primary-hover);
  margin-bottom: 14px;
}

.staff-card .staff-quote {
  flex: 1;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--remax-muted);
  margin: 0 0 16px;
}

.staff-bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--remax-radius-pill);
  border: 1.5px solid var(--remax-border);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  align-self: flex-start;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.staff-card:hover .staff-bio-btn {
  border-color: var(--remax-primary);
  background: var(--remax-primary);
  color: #fff;
}

.bio-modal-v2 {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.bio-modal-v2 .modal-header {
  align-items: center;
  gap: 14px;
}

.bio-modal-v2 .modal-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .staff-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .staff-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Site-wide redesign pass: shared components for the content pages
   (about/services/contact/privacy/subscribe/downloads/404/etc) that were
   still running the original Bootstrap-4-era template — inline-styled hero
   bands, plain .card.shadow-sm fact grids, a dark legacy breadcrumb band.
   These four components replace those patterns everywhere they repeat.
   ========================================================================== */

/* ---------- .hero-band: dark image hero with centered content.
   Modeled on unsubscribe.html's existing hero (pill eyebrow, gradient
   overlay, bold heading) since that page was already ahead of the others
   visually — this promotes that look to the shared standard rather than
   flattening it down to the plainer pages' level. Background image stays
   inline per-page (style="background-image:url(...)"), only the wrapper
   structure/class changes. ---------- */
.hero-band {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 48, 0.55), rgba(8, 22, 48, 0.78));
}

.hero-band__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-band__eyebrow {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.75rem;
  border-radius: var(--remax-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
}

/* Legacy styles.css has several bare h1{color:...}/p{color:...} rules
   (dark navy/gray, meant for light-background pages). A direct rule on an
   element always beats an inherited value regardless of specificity or
   source order, so .hero-band's own color:#fff on the parent was silently
   losing to those — title/subtitle need color set directly, not inherited. */
.hero-band__title {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.hero-band__subtitle {
  color: #fff;
  opacity: 0.9;
  margin-bottom: 0;
  font-size: 1.05rem;
}

.hero-band--tall {
  min-height: 420px;
  padding: 110px 0 60px;
}

.hero-band--short {
  min-height: 260px;
  padding: 90px 0 40px;
}

/* ---------- .page-header: thin wrapper around the breadcrumb pattern
   already used (and working) on property-catalogue.html — reused here
   instead of the legacy dark full-bleed breadcrumb band on 404/
   property-unavailable/property_detail, so there's one breadcrumb
   language, not two. ---------- */
.page-header {
  background: var(--remax-page-bg);
  border-bottom: 1px solid var(--remax-border);
  padding: 1.1rem 0;
}

.page-header .breadcrumb {
  margin-bottom: 0;
  background: transparent;
}

/* ---------- .info-card: icon-badge + title + text tile, replacing plain
   .card.shadow-sm fact/contact cards. Icon badge matches .category-tile__icon
   for visual consistency with the homepage's "Browse by Property Type". ---------- */
.info-card {
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  padding: 1.5rem;
  height: 100%;
  background: #fff;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.info-card:hover {
  box-shadow: var(--remax-shadow-card-hover);
  transform: translateY(-3px);
}

.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(52, 84, 209, 0.08);
  color: var(--remax-primary);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

.info-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.info-card__text {
  font-size: 0.9rem;
  color: var(--remax-muted);
  margin-bottom: 0;
}

/* ---------- .step-card: numbered circle + title + text, replacing the
   Marketing Plan grid's copy-pasted inline SVG arrows (only present on 6 of
   8 cards to begin with) — the number badge alone communicates sequence. ---------- */
.step-card {
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  padding: 1.5rem;
  height: 100%;
  background: #fff;
}

.step-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--remax-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.step-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-card__text {
  font-size: 0.9rem;
  color: var(--remax-muted);
  margin-bottom: 0;
}

/* ---------- .photo-gallery: property_detail.html's image gallery ----------
   Airbnb-style static CSS grid (one large photo + up to 4 smaller ones),
   matching the DzeMigo reference design exactly, with a click-to-open
   lightbox (photo-gallery.js) for browsing every photo including ones
   beyond the 5 shown in the grid. Grid shape switches on [data-count] since
   listings can have anywhere from 1 to many photos, unlike the reference's
   fixed 5-photo case. */
.photo-gallery {
  display: grid;
  gap: 8px;
  overflow: hidden;
  border-radius: 18px;
  margin: 1.25rem 0 2rem;
  position: relative;
}

.photo-gallery__cell {
  position: relative;
  overflow: hidden;
}

.photo-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.photo-gallery img:hover {
  opacity: 0.88;
}

.photo-gallery[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 480px;
}

.photo-gallery[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 420px;
}

.photo-gallery[data-count="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 210px 210px;
}

.photo-gallery[data-count="3"] .gallery-main {
  grid-row: span 2;
}

.photo-gallery[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 210px 210px;
}

.photo-gallery[data-count="5+"] {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
}

.photo-gallery[data-count="5+"] .gallery-main {
  grid-row: span 2;
}

.photo-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  pointer-events: none;
}

@media (max-width: 767px) {
  .photo-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .photo-gallery img {
    height: 220px;
  }
  .photo-gallery .gallery-main {
    grid-row: auto !important;
  }
}

/* Short-stay BnB option gallery. The hero itself is the slider; the right
   side is an option picker rather than a duplicate photographic gallery. */
.photo-gallery.photo-gallery--stay-options {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  grid-template-rows: 520px;
  background: #edf1f5;
}

.stay-gallery__main {
  min-width: 0;
  height: 520px;
}

.photo-gallery--stay-options .stay-gallery__main > img {
  cursor: zoom-in;
  opacity: 1;
  transition: transform .46s cubic-bezier(.22,.75,.25,1);
  will-change: transform;
}

.photo-gallery--stay-options .stay-gallery__main > img:hover { opacity: 1; }
.photo-gallery--stay-options .stay-gallery__main > img.is-sliding-out-left { transform: translateX(-100%); }
.photo-gallery--stay-options .stay-gallery__main > img.is-sliding-out-right { transform: translateX(100%); }
.photo-gallery--stay-options .stay-gallery__transition-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .46s cubic-bezier(.22,.75,.25,1);
  will-change: transform;
}
.photo-gallery--stay-options .stay-gallery__transition-image.is-entering-right { transform: translateX(100%); }
.photo-gallery--stay-options .stay-gallery__transition-image.is-entering-left { transform: translateX(-100%); }
.photo-gallery--stay-options .stay-gallery__transition-image.is-arrived { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .photo-gallery--stay-options .stay-gallery__main > img,
  .photo-gallery--stay-options .stay-gallery__transition-image { transition: none; }
}

.stay-gallery__summary {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(105deg, rgba(8,18,36,.92), rgba(8,18,36,.7));
  box-shadow: 0 8px 28px rgba(6,17,35,.24);
  backdrop-filter: blur(8px);
}

.stay-gallery__summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-gallery__summary [data-short-stay-hero-price] {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
}

.stay-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  color: var(--remax-ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(8,18,36,.18);
  transform: translateY(-50%);
}

.stay-gallery__arrow:hover { background: #fff; }
.stay-gallery__arrow--prev { left: 14px; }
.stay-gallery__arrow--next { right: 14px; }

.stay-gallery__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  height: 520px;
  overflow-y: auto;
  scrollbar-width: none;
}

.stay-gallery__options::-webkit-scrollbar { display: none; }

.stay-gallery__option {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: #fff;
  background: #dfe5eb;
  text-align: left;
}

.stay-gallery__option img {
  cursor: pointer;
  transition: transform .25s ease, opacity .2s ease;
}

.stay-gallery__option::before {
  content: '';
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48%;
  background: linear-gradient(to bottom, rgba(5,15,30,0), rgba(5,15,30,.88));
  pointer-events: none;
}

.stay-gallery__option::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}

.stay-gallery__option-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1.8rem .65rem .55rem;
  background: transparent;
}

.stay-gallery__option-copy strong,
.stay-gallery__option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stay-gallery__option-copy strong { min-width: 0; font-size: .72rem; }
.stay-gallery__option-copy small { flex: 0 0 auto; color: rgba(255,255,255,.85); font-size: .68rem; font-weight: 700; }
.stay-gallery__option:hover img { opacity: .92; transform: scale(1.025); }
.stay-gallery__option.is-active::after { border-color: #fff; box-shadow: inset 0 0 0 2px var(--remax-primary); }

.stay-gallery__counter {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  padding: .32rem .6rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(8,18,36,.78);
  font-size: .68rem;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .photo-gallery.photo-gallery--stay-options {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    grid-template-rows: 440px;
  }
  .stay-gallery__main,
  .stay-gallery__options { height: 440px; }
  .stay-gallery__options { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .photo-gallery.photo-gallery--stay-options {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 310px 112px !important;
    gap: 7px;
    border-radius: 14px;
  }
  .stay-gallery__main { height: 310px; }
  .photo-gallery--stay-options .stay-gallery__main > img { height: 310px; }
  .stay-gallery__options {
    display: flex;
    height: 112px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .stay-gallery__option {
    flex: 0 0 42%;
    height: 112px;
    scroll-snap-align: start;
  }
  .stay-gallery__option img { height: 112px; }
  .stay-gallery__summary { right: 12px; bottom: 12px; left: 12px; padding: .65rem .75rem; }
  .stay-gallery__summary strong { font-size: .82rem; }
  .stay-gallery__summary [data-short-stay-hero-price] { font-size: .88rem; }
  .stay-gallery__arrow { width: 34px; height: 34px; }
  .stay-gallery__arrow--prev { left: 10px; }
  .stay-gallery__arrow--next { right: 10px; }
  .stay-gallery__counter { top: auto; right: 10px; bottom: 124px; }
}

/* Preserve the site's established 1-large + 4-small gallery geometry for
   the BnB slider. These rules intentionally mirror the standard gallery
   above; option behaviour must never create a different shell or spacing. */
.photo-gallery.photo-gallery--stay-options {
  gap: 8px;
  background: transparent;
}
.photo-gallery.photo-gallery--stay-options[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 480px;
}
.photo-gallery.photo-gallery--stay-options[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 420px;
}
.photo-gallery.photo-gallery--stay-options[data-count="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 210px 210px;
}
.photo-gallery.photo-gallery--stay-options[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 210px 210px;
}
.photo-gallery.photo-gallery--stay-options[data-count="5+"] {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
}
.photo-gallery--stay-options[data-count="3"] .gallery-main,
.photo-gallery--stay-options[data-count="5+"] .gallery-main { grid-row: span 2; }
.photo-gallery--stay-options .stay-gallery__main { height: auto; }
.photo-gallery--stay-options .stay-gallery__option {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.photo-gallery--stay-options .stay-gallery__option.is-active::after {
  border-color: transparent;
  box-shadow: none;
}
.photo-gallery--stay-options .photo-gallery__more { z-index: 4; }

@media (max-width: 767.98px) {
  .photo-gallery.photo-gallery--stay-options {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px;
    border-radius: 18px;
  }
  .photo-gallery--stay-options .stay-gallery__main,
  .photo-gallery--stay-options .stay-gallery__option { height: auto; }
  .photo-gallery--stay-options .stay-gallery__main > img,
  .photo-gallery--stay-options .stay-gallery__option img { height: 220px; }
  .photo-gallery--stay-options .gallery-main { grid-row: auto !important; }
  .photo-gallery--stay-options .stay-gallery__counter { top: 10px; right: 10px; bottom: auto; }
}

/* ---------- Photo gallery lightbox (photo-gallery.js) ---------- */

.lb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lb-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
  z-index: 1;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.26);
}

.lb-close {
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 22px;
}

.lb-prev {
  left: 14px;
}

.lb-next {
  right: 14px;
}

.lb-stage {
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  transition: opacity 0.15s ease;
  cursor: default;
}

.lb-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 14px;
  border-radius: 99px;
  pointer-events: none;
}

/* ---------- Blog cards + detail page ---------- */

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: var(--remax-radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--remax-shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  text-decoration: none;
  color: inherit;
}

.blog-card:hover {
  box-shadow: var(--remax-shadow-card-hover);
  transform: translateY(-3px);
  color: inherit;
}

.blog-card__image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image-wrap img {
  transform: scale(1.05);
}

.blog-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.blog-card__category {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--remax-primary);
  background: rgba(52, 84, 209, 0.1);
  border-radius: var(--remax-radius-pill);
  padding: 0.2rem 0.65rem;
}

.blog-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--remax-ink);
  margin-bottom: 0.5rem;
}

.blog-card__excerpt {
  color: var(--remax-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.blog-card__meta {
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--remax-muted);
}

.blog-detail__content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--remax-ink);
  white-space: pre-line;
}

.blog-detail__meta {
  color: var(--remax-muted);
  font-size: 0.9rem;
}

.blog-related-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--remax-radius-control);
  padding: 0.5rem;
  transition: background-color 0.2s ease;
}

.blog-related-card:hover {
  background: var(--remax-page-bg);
  color: inherit;
}

.blog-related-card__image {
  flex: 0 0 84px;
  width: 84px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
}

.blog-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-related-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--remax-ink);
  margin-bottom: 0.2rem;
}

.blog-related-card__date {
  font-size: 0.78rem;
  color: var(--remax-muted);
}

.blog-share a {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.blog-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--remax-ink);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.blog-category-pill:hover,
.blog-category-pill.active {
  background: var(--remax-primary);
  border-color: var(--remax-primary);
  color: #fff;
}

/* ---------- Property detail page: two-column layout (content + sticky
   sidebar), replacing the old single__detail-*/profile__agent Bootstrap-4
   era markup with the same visual language as the rest of the site. ---------- */

.detail-title h1 {
  margin: 0;
  font-size: 1.3rem !important;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--remax-ink);
  text-transform: capitalize;
}

.detail-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: nowrap;
}

.detail-title p {
  margin: 0;
  color: var(--remax-muted);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  flex: 0 1 38%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-title h1 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.3rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .detail-title {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .detail-title h1,
  .detail-title p {
    width: 100%;
    flex-basis: 100%;
    white-space: normal;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
  }
}

.detail-gallery__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.detail-gallery__badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 12px rgba(7, 28, 69, 0.24);
  white-space: nowrap;
}

.detail-gallery__badge--type { background: #fff; color: var(--remax-ink); }
.detail-gallery__badge--show,
.detail-gallery__badge--reduced { background: var(--remax-red-solid); }
.detail-gallery__badge--mandate { background: var(--remax-primary); }

@media (max-width: 575px) {
  .detail-gallery__badges { top: 10px; left: 10px; max-width: calc(100% - 20px); }
  .detail-gallery__badge { font-size: 0.65rem; min-height: 27px; padding: 0.32rem 0.58rem; }
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3.5rem;
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 991px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.detail-content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--remax-ink);
}

.detail-content > * + * {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--remax-border);
}

.summary-block p {
  margin: 0;
  color: var(--remax-muted);
  font-size: 0.95rem;
  text-transform: capitalize;
}

.about-property p {
  margin: 0;
  color: var(--remax-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.detail-features__subhead {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--remax-ink);
  margin: 0.95rem 0 0.35rem;
}

.detail-features__subhead:first-child {
  margin-top: 0;
}

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 4px;
}

@media (max-width: 991px) {
  .amenity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .amenity-grid {
    grid-template-columns: 1fr;
  }
}

.amenity-grid span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0.32rem 0;
  border: 0;
  border-radius: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--remax-ink);
}

.amenity-grid i {
  color: var(--remax-primary);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  margin-top: 0.1rem;
}

.property-sidebar {
  position: sticky;
  top: 96px;
  border: 1px solid var(--remax-border);
  border-radius: var(--remax-radius-card);
  padding: 1.25rem;
  background: #fff;
  box-shadow: var(--remax-shadow-card);
}

@media (max-width: 991px) {
  .property-sidebar {
    position: static;
  }
}

.sidebar-price {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--remax-border);
}

.sidebar-price h5 {
  margin-bottom: 0.25rem;
}

.sidebar-agent + .sidebar-agent {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--remax-border);
}

.sidebar-agent__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.75rem;
}

.sidebar-agent__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--remax-page-bg);
}

.sidebar-agent__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-agent__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--remax-ink);
  margin: 0;
}

.sidebar-agent__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sidebar-agent__button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.sidebar-agent__button-row .btn {
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
  padding-inline: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-agent-modal .modal-header,
.contact-agent-modal .modal-body {
  padding: 1rem 1.1rem;
}

.modal {
  z-index: 2000;
}

.modal-backdrop {
  z-index: 1990;
}

.contact-agent-modal .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contact-agent-modal .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.contact-agent-modal .form-check-input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.contact-agent-modal .form-check-label {
  font-size: 0.83rem;
  color: var(--remax-muted);
  line-height: 1.45;
}

.sidebar-agent__email,
.sidebar-agent__link {
  font-size: 0.82rem;
  color: var(--remax-muted);
  line-height: 1.4;
}

.sidebar-agent__link:hover {
  color: var(--remax-primary);
}

.site-toast-stack {
  position: fixed;
  top: 92px;
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-toast {
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.16);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  pointer-events: none;
}

.site-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-toast.success {
  border-left: 4px solid #22a06b;
}

.site-toast.error {
  border-left: 4px solid #dc3545;
}

.site-toast .toast-header {
  display: flex;
  align-items: center;
  border-bottom: 0;
  padding: 0.8rem 1rem 0.45rem;
  background: transparent;
}

.site-toast .toast-body {
  padding: 0 1rem 0.95rem;
  color: var(--remax-ink);
}

@media (max-width: 575.98px) {
  .sidebar-agent__button-row .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.7rem;
  }

  .site-toast-stack {
    left: 12px;
    right: 12px;
    top: 84px;
  }

  .site-toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}
.nav-link-on-show {
  color: #dc1c2d !important;
  font-weight: 800;
}
.nav-link-on-show:hover, .nav-link-on-show.active { color: #b91524 !important; }
.nav-on-show-count { display:inline-flex; min-width:20px; height:20px; align-items:center; justify-content:center; padding:0 5px; border-radius:999px; background:#dc1c2d; color:#fff; font-size:11px; }
.nav-v2 {
  padding: 8.4px 0;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(13,59,140,.10);
  box-shadow: 0 4px 18px rgba(13,59,140,.06);
}
.nav-v2 .navbar-brand { display:flex; align-items:center; margin-right: 2rem; }
.nav-v2 .navbar-brand img { height: 36px; }
.nav-v2 .navbar-nav .nav-link,
.nav-v2 .navbar-nav .dropdown-toggle {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 7px 10px !important;
  color: #172b4d;
  font-family: var(--remax-font), sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav-v2 .navbar-nav .nav-link:hover,
.nav-v2 .navbar-nav .dropdown-toggle:hover {
  border-bottom-color: rgba(220,28,45,.55) !important;
  background: transparent;
  color: #0d3b8c;
}
.nav-v2 .navbar-nav .nav-link.active,
.nav-v2 .navbar-nav .dropdown-toggle.active {
  border-bottom-color: #dc1c2d !important;
  color: #0d3b8c !important;
  background: transparent !important;
}
.nav-v2 .nav-link-on-show {
  margin-left: 5px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--remax-red-solid) !important;
  border-bottom: 2px solid var(--remax-red-solid) !important;
  border-radius: 999px !important;
  color: var(--remax-red-solid) !important;
  background: #fff !important;
}
.nav-v2 .nav-link-on-show:hover,
.nav-v2 .nav-link-on-show:focus,
.nav-v2 .nav-link-on-show:active,
.nav-v2 .nav-link-on-show.active {
  border-radius: 999px !important;
  border: 1px solid rgba(220,28,45,.48) !important;
  border-bottom: 2px solid #dc1c2d !important;
  background:#dc1c2d !important;
  color:#fff !important;
}

/* This selector intentionally includes .navbar-nav and .nav-link so it
   outranks the legacy nav rule that resets every link to square corners. */
.nav-v2 .navbar-nav .nav-link.nav-link-on-show,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:hover,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:focus,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:active,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show.active {
  border-radius: 999px !important;
}
.nav-v2 .navbar-nav .nav-link.nav-link-on-show {
  background: #fff !important;
  border: 1px solid var(--remax-red-solid) !important;
  border-bottom: 2px solid var(--remax-red-solid) !important;
  color: var(--remax-red-solid) !important;
}
.nav-v2 .navbar-nav .nav-link.nav-link-on-show.active {
  background: #dc1c2d !important;
  color: #fff !important;
}
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:hover,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:focus,
.nav-v2 .navbar-nav .nav-link.nav-link-on-show:active {
  background: #dc1c2d !important;
  border-color: #dc1c2d !important;
  color: #fff !important;
}
.nav-v2 .nav-cta-btn {
  min-width: 140px;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Manrope', var(--remax-font), sans-serif;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none !important;
}
.nav-v2 .navbar-brand img { max-width: 120px; }
.nav-v2 .nav-cta-btn.btn-primary { background: #3454d1; }
.nav-v2 .nav-cta-btn.btn-primary:hover { background: #0d3b8c; }
.nav-v2-account-btn {
  width: auto;
  min-width: 42px;
  height: 36px;
  gap: 7px;
  padding: 0 11px !important;
  border: 1px solid #dbe2ee !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #172b4d !important;
  box-shadow: 0 2px 8px rgba(23,43,77,.08);
  font-size: 13px;
}
.nav-v2-account-btn::after { margin-left: 1px; }
.nav-v2-account-btn:hover,
.nav-v2-account-btn:focus,
.nav-v2-account-btn.show {
  border-color: var(--remax-primary) !important;
  background: #f3f6ff !important;
  color: var(--remax-primary) !important;
}
.nav-v2-account-label { font-size: 12px; font-weight: 700; }

/* Keep the main menu right-aligned and visually close to the primary CTA. */
.nav-v2 .navbar-collapse > .navbar-nav:first-child {
  margin-left: auto !important;
  margin-right: 0.5rem !important;
}
.nav-v2 .navbar-collapse > .navbar-nav:first-child + .navbar-nav {
  margin-left: 0 !important;
}
.nav-v2 .navbar-collapse > .navbar-nav:first-child + .navbar-nav + .navbar-nav {
  margin-left: 0.5rem !important;
}

/* Active navigation uses the same rounded-outline language as the buttons.
   On Show keeps its stronger red pill styling below. */
.nav-v2 .navbar-nav .nav-link.active:not(.nav-link-on-show),
.nav-v2 .navbar-nav .dropdown-toggle.active {
  border: 1px solid var(--remax-red-solid) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--remax-red-solid) !important;
}

/* All red controls use one solid brand red, including the search reset. */
.btn-danger,
.btn-danger:focus,
.btn-danger:hover {
  background: var(--remax-red-solid) !important;
  border-color: var(--remax-red-solid) !important;
  color: #fff !important;
}

.home-page .card__image-hover-style-v3 .badge.bg-danger {
  background-color: var(--remax-red-solid) !important;
  border-color: var(--remax-red-solid) !important;
  color: #fff !important;
}
@media (max-width: 1199.98px) and (min-width: 992px) {
  .nav-v2 > .container { width: 95%; }
  .nav-v2 .navbar-collapse > .navbar-nav:first-child { gap: 0; margin-right: .45rem; }
  .nav-v2 .navbar-nav .nav-link, .nav-v2 .navbar-nav .dropdown-toggle { padding-left: 6px !important; padding-right: 6px !important; font-size: 14px; }
  .nav-v2 .nav-cta-btn { min-width: 125px; padding-left: 12px; padding-right: 12px; }
}
.home-on-show-section { background: #fff; padding: 42px 0; }
.on-show-carousel-wrap { margin-top: 1.15rem; }
.on-show-carousel { gap: 1rem; }
.on-show-carousel .on-show-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  min-height: 245px;
  overflow: hidden;
  border: 1px solid var(--remax-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 43, 77, 0.08);
  scroll-snap-align: start;
}
.on-show-slide__image { position: relative; min-height: 245px; overflow: hidden; }
.on-show-slide__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.on-show-slide__image:hover img { transform: scale(1.035); }
.on-show-slide__image .property-card__badge--listing-type { top: 14px; left: 14px; }
.on-show-slide__badge { position: absolute; top: 14px; right: 14px; z-index: 2; padding: .48rem .72rem; border-radius: 999px; background: var(--remax-red-solid); color: #fff; font-size: .7rem; font-weight: 800; box-shadow: 0 3px 10px rgba(23,43,77,.22); }
.on-show-slide__content { display: flex; flex-direction: column; justify-content: center; padding: 1.45rem 2rem; }
.on-show-slide__content .home-section-kicker { margin-bottom: .35rem; }
.on-show-slide__content h3 { margin: 0 0 .35rem; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.25; }
.on-show-slide__content h3 a { color: var(--remax-ink); text-decoration: none; }
.on-show-slide__content h3 a:hover { color: var(--remax-primary); }
.on-show-slide__location { margin: 0 0 .55rem; color: var(--remax-primary); font-size: .82rem; font-weight: 700; }
.on-show-slide__description { max-width: 680px; margin: 0 0 .85rem; color: var(--remax-muted); font-size: .83rem; line-height: 1.55; }
.on-show-slide__facts { display: flex; flex-wrap: wrap; gap: .65rem 1rem; color: var(--remax-muted); font-size: .76rem; }
.on-show-slide__facts i { margin-right: .3rem; color: var(--remax-primary); }
.on-show-slide__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--remax-border); }
.on-show-slide__footer strong { color: var(--remax-ink); font-size: 1.05rem; }
.on-show-slide__footer a { color: var(--remax-primary); font-size: .78rem; font-weight: 800; text-decoration: none; }
.on-show-slide__footer a:hover { color: var(--remax-red-solid); }
.on-show-carousel-wrap .property-carousel-nav { top: 50%; }
@media (max-width: 767.98px) {
  .home-on-show-section { padding: 2.5rem 0; }
  .on-show-carousel .on-show-slide { grid-template-columns: 1fr; min-height: 0; }
  .on-show-slide__image { height: 195px; min-height: 195px; }
  .on-show-slide__content { padding: 1.15rem 1.2rem 1.25rem; }
  .on-show-slide__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.on-show-hero h1, .on-show-hero p { color:#fff; }
.on-show-page .directory-heading { margin-top: 0.25rem; }
/* One content rail for every public page.  Sections may keep full-bleed
   backgrounds, but their readable content always lines up with the header
   and footer rail. */
.page-clip > .container,
.page-clip > section > .container,
.page-clip > main.container,
.page-clip .container,
.page-clip .container-fluid {
  width: 95%;
  max-width: 1255px;
  margin-right: auto;
  margin-left: auto;
}

/* Directory pages are themselves containers, so keep their width explicit
   even when Bootstrap's page-specific rules are loaded before this file. */
.page-clip .directory-page,
.page-clip .contact-page,
.page-clip .property-detail-page {
  width: 95%;
  max-width: 1255px;
  margin-right: auto;
  margin-left: auto;
}

/* Page shells must stay full width so hero images and coloured bands reach
   both viewport edges. Their child .container elements still use the shared
   readable content rail above. */
.page-clip .services-page,
.page-clip .about-page {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}
.footer-v2,
.footer-v2 .wrapper__footer,
.footer-v2 .bg__footer-bottom {
  font-family: 'Manrope', var(--remax-font), sans-serif;
}
.footer-v2 .wrapper__footer {
  padding: 3.25rem 0 2.75rem;
  background: #071c45;
}
.footer-v2 .wrapper__footer > .container,
.footer-v2 .footer-bottom .container { width: 95%; max-width: 1255px; }
.footer-v2 .footer-columns-2 { column-count: 2 !important; column-gap: 2.25rem; }
.footer-v2 .widget__footer { height: 100%; }
.footer-v2 .footer-title {
  min-height: 1.25rem;
  margin: 0 0 .85rem;
  color:#fff;
  opacity:1;
  font-size:.82rem;
  line-height:1.25rem;
  letter-spacing:normal;
  text-transform:none;
}
.footer-v2 .widget__footer li,
.footer-v2 .widget__footer p,
.footer-v2 .widget__footer a { color:rgba(255,255,255,.72); font-size:.78rem; line-height:1.55; }
.footer-v2 .widget__footer a:hover { color:#fff !important; }
.footer-v2 .footer-contact-list { display:grid; gap:.32rem; padding-top:15px; }
.footer-v2 .footer-contact-list li { display:flex; align-items:flex-start; }
.footer-v2 .footer-contact-list i { flex:0 0 18px; margin-top:2px; color:#a9c2ff; }
.footer-v2 .footer-contact-list a { display:inline-flex; align-items:flex-start; }
.footer-v2 .col-lg-3 .footer-title { margin-bottom:.85rem; }
.footer-v2 .col-lg-3 .footer-contact-list { gap:.12rem; margin-bottom:.35rem; }
.footer-v2 .col-lg-3 .footer-contact-list li,
.footer-v2 .col-lg-3 .footer-contact-list a { line-height:1.28; }
.footer-v2 .widget__form-newsletter { padding-top: .85rem; border-top:1px solid rgba(255,255,255,.12); }
.footer-v2 .col-lg-3 .widget__form-newsletter { margin-top:.35rem !important; padding-top:.65rem; }
.footer-v2 .widget__form-newsletter p { margin-bottom:.65rem; line-height:1.45; }
.footer-v2 .widget__form-newsletter .btn {
  display:inline-flex;
  width:auto !important;
  min-width:120px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.5rem 1.1rem;
  font-size:.76rem;
  font-weight:800;
}
.footer-v2 .btn-social.facebook {
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin: .15rem 0 .45rem;
  padding:0;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  color:#fff;
  font-size:.9rem;
  line-height:1;
}
.footer-v2 .bg__footer-bottom { background:#04142f; border-top:1px solid rgba(255,255,255,.1); }
.footer-v2 .footer-bottom { padding:1rem 0; }
.footer-v2 .footer-bottom span,
.footer-v2 .footer-bottom a { color:rgba(255,255,255,.62); font-size:.72rem; text-decoration:none; }
@media (max-width: 767.98px) {
  .page-clip > .container,
  .page-clip > section > .container,
  .page-clip > main.container,
  .page-clip .container,
  .page-clip .container-fluid,
  .page-clip .directory-page,
  .page-clip .contact-page,
  .page-clip .property-detail-page,
  .footer-v2 .wrapper__footer > .container,
  .footer-v2 .footer-bottom .container { width:calc(100% - 28px); }
}

@media (max-width: 767.98px) {
  .page-clip .services-page,
  .page-clip .about-page {
    width: 100%;
  }
}