/* ==========================================================================
   Vistaar Homes — Components
   1. Buttons        2. Forms          3. Property card    4. Team card
   5. Feature card   6. Video card     7. Gallery          8. Info cards
   9. Lists & chips  10. Breadcrumbs   11. Filter          12. Accordion
   13. Modal         14. Framed media & maps
   ========================================================================== */

/* ---------- 1. Buttons (sharp edges, uppercase, 48px touch target) ---------- */
.btn {
  --bs-btn-border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-width: 1px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    background-color var(--duration) ease,
    border-color var(--duration) ease,
    color var(--duration) ease,
    transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-color: var(--ink);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 179, 87, 24;
}

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.7);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--ink);
}

.btn-outline-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-color: #fff;
}

.spinner-border-sm {
  --bs-spinner-width: 0.95rem;
  --bs-spinner-height: 0.95rem;
  --bs-spinner-border-width: 0.15em;
}

/* ---------- 2. Forms ---------- */
.form-label {
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.form-label .req {
  color: var(--brand-700);
}

.text-optional {
  color: var(--ink-muted);
  font-weight: 500;
}

.form-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.form-control,
.form-select {
  min-height: 52px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 16px;                /* 16px stops iOS Safari zooming into fields */
  line-height: 1.5;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: #8a9097;
}

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

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(179, 87, 24, 0.14);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--error);
  background-image: none;
  padding-right: 0.95rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success);
  background-image: none;
  padding-right: 0.95rem;
}

.invalid-feedback {
  margin-top: 0.4rem;
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Show feedback whenever the field is marked invalid (works for every layout) */
.is-invalid ~ .invalid-feedback,
.newsletter-form__row:has(.is-invalid) ~ .invalid-feedback {
  display: block;
}

.form-counter {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.form-counter.is-near-limit {
  color: var(--brand-700);
  font-weight: 700;
}

.form-privacy {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.form-check {
  min-height: 44px;
  padding-left: 2rem;
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  margin-left: -2rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

.form-check-input:checked {
  border-color: var(--brand-600);
  background-color: var(--brand-600);
}

.form-check-input.is-invalid ~ .form-check-label {
  color: inherit;
}

/* Form-wide messages */
.form-alert {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  border-left: 3px solid;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.form-alert--error {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
}

.form-alert--success {
  border-color: var(--success);
  background: var(--success-bg);
  color: #145b39;
}

/* ---------- 3. Property card ---------- */
.property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.property-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-alt);
}

.property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.property-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 0.4rem 0.8rem;
  background: var(--success);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.property-card--completed .property-card__badge,
.property-card--sold .property-card__badge {
  background: var(--ink);
}

.property-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.5rem;
}

.property-card__location {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.property-card__location .bi {
  color: var(--brand-600);
}

.property-card__title {
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.property-card__title a {
  color: var(--ink);
  text-decoration: none;
}

.property-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0;
  border-block: var(--rule);
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.property-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.property-card__specs .bi {
  color: var(--brand-600);
}

.property-card__specs strong {
  color: var(--ink);
}

.property-card__action {
  margin-top: auto;
}

.property-card__summary {
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: 0.925rem;
}

.property-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.property-card__cta .bi {
  color: var(--brand-600);
  transition: transform var(--duration) var(--ease-out);
}

/* Featured (wide) card when a section holds a single project */
@media (min-width: 992px) {
  .property-card--featured {
    display: grid;
    grid-template-columns: 7fr 5fr;
  }
  .property-card--featured .property-card__media {
    aspect-ratio: auto;
    min-height: 480px;
  }
  .property-card--featured .property-card__media img {
    position: absolute;
    inset: 0;
  }
  .property-card--featured .property-card__body {
    justify-content: center;
    padding: 3rem;
  }
  .property-card--featured .property-card__title {
    font-size: 2.6rem;
  }
}

/* ---------- 4. Team card ---------- */
.team-card {
  height: 100%;
  border: var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.team-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-alt);
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s var(--ease-out);
}

.team-card__body {
  padding: 1.75rem;
  border-top: 3px solid var(--brand);
}

.team-card__name {
  margin-bottom: 0.3rem;
  font-size: 2rem;
}

.team-card__role {
  margin-bottom: 1rem;
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.team-card__bio {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.925rem;
}

/* ---------- 5. Feature card ---------- */
.feature-card {
  height: 100%;
  padding: 2rem 1.75rem;
  border: var(--rule);
  background: var(--surface);
  transition:
    border-color var(--duration) ease,
    box-shadow var(--duration) ease;
}

.feature-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  place-items: center;
  border: 1px solid var(--brand);
  color: var(--brand-600);
  font-size: 1.35rem;
}

.feature-card__title {
  margin-bottom: 0.6rem;
  font-size: 1.55rem;
}

.feature-card__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.925rem;
}

.feature-card--dark {
  border-color: var(--on-dark-line);
  background: rgba(255, 255, 255, 0.03);
}

.feature-card--dark .feature-card__icon {
  color: var(--brand);
}

.feature-card--dark .feature-card__text {
  color: var(--on-dark-soft);
}

/* ---------- 6. Video card ---------- */
.video-card {
  margin: 0;
  border: 1px solid var(--on-dark-line);
  background: var(--ink-900);
}

.section--white .video-card,
.section--alt .video-card {
  border-color: var(--line);
}

.video-card__media {
  background: #000;
}

.video-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-card__caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.video-card__caption .bi {
  color: var(--brand);
}

/* Vimeo "click to play" facade */
.video-facade {
  display: block;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition:
    opacity var(--duration) ease,
    transform 0.8s var(--ease-out);
}

.video-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-facade__play > .bi {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  padding-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(21, 24, 28, 0.55);
  font-size: 2rem;
  transition: background-color var(--duration) ease;
}

.video-facade iframe {
  border: 0;
}

/* ---------- 7. Gallery ---------- */
.gallery {
  display: grid;
  gap: 12px;
  margin: 0;
}

.gallery__item {
  min-width: 0;
}

.gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-alt);
}

.gallery__link img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.gallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  background: rgba(21, 24, 28, 0.72);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration) ease,
    transform var(--duration) var(--ease-out);
}

.gallery__caption {
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Equal grid */
.gallery--grid,
.gallery--plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mosaic: first image large */
.gallery--mosaic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery--mosaic .gallery__item:first-child {
  grid-column: 1 / -1;
}

/* Plans sit on white and are never cropped */
.gallery--plans .gallery__link {
  border: var(--rule);
  background: #fff;
}

.gallery--plans .gallery__link img {
  padding: 12px;
  object-fit: contain;
}

/* Two-column grid inside a narrow column */
.gallery--grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Stacked (vertical) */
.gallery--stack {
  grid-template-columns: 1fr;
}

.gallery--stack .gallery__link img {
  aspect-ratio: 16 / 9;
}

/* Horizontal scroll strip (swipe on mobile) */
.gallery--strip {
  grid-auto-columns: minmax(200px, 42%);
  grid-auto-flow: column;
  margin-top: 1.5rem;
  padding-bottom: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gallery--strip .gallery__item {
  scroll-snap-align: start;
}

.gallery--strip .gallery__link img {
  aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
  .gallery {
    gap: 16px;
  }
  .gallery--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gallery--mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gallery--mosaic .gallery__item:first-child {
    grid-row: span 2;
    grid-column: span 2;
  }
  .gallery--mosaic .gallery__item:first-child .gallery__link {
    height: 100%;
  }
  .gallery--mosaic .gallery__item:first-child img {
    aspect-ratio: auto;
  }
  .gallery--plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gallery--strip {
    grid-auto-columns: minmax(200px, 24%);
  }
}

@media (min-width: 1200px) {
  .gallery--plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gallery--strip {
    grid-auto-columns: calc((100% - 6 * 16px) / 7);
    overflow: visible;
  }
}

/* ---------- 8. Info cards ---------- */

/* Summary card (sticky facts beside project overview) */
.summary-card {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  padding: 2rem;
  border: var(--rule);
  border-top: 3px solid var(--brand);
  background: var(--surface-warm);
}

.summary-card__title {
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.summary-card__list {
  margin: 0 0 1.5rem;
}

.summary-card__list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: var(--rule);
  font-size: 0.925rem;
}

.summary-card__list dt {
  color: var(--ink-muted);
  font-weight: 500;
}

.summary-card__list dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

/* Price card (460 Armagh) */
.price-card {
  display: grid;
  height: 100%;
  border: var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.price-card__media {
  display: block;
  padding: 1.25rem;
  border-bottom: var(--rule);
  background: #fff;
}

.price-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.price-card__body {
  padding: 1.75rem;
}

.price-card__title {
  margin-bottom: 0.25rem;
  font-size: 2rem;
}

.price-card__note {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.9rem 0;
  border-block: var(--rule);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.price-card__price span {
  font-family: var(--font-body);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.price-card__bonus {
  margin: 0;
  font-size: 0.925rem;
  font-weight: 700;
}

.price-card__bonus .bi {
  color: var(--brand-600);
}

.price-card__bonus small {
  color: var(--ink-muted);
  font-weight: 500;
}

/* Offer card (vehicle incentive) */
.offer-card {
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--on-dark-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
}

.offer-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.offer-card figcaption {
  display: grid;
  gap: 0.2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-soft);
  font-size: var(--fs-sm);
}

.offer-card strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
}

.offer-card__home {
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Download card */
.download-card {
  padding: 2rem;
  border: var(--rule);
  border-top: 3px solid var(--brand);
  background: var(--surface);
}

.download-card__title {
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
}

.download-list {
  margin: 0 0 1.25rem;
}

.download-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 64px;
  padding: 0.75rem 0;
  border-bottom: var(--rule);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.download-list a > .bi:first-child {
  color: var(--brand-600);
  font-size: 1.5rem;
}

.download-list span {
  display: grid;
  flex: 1 1 auto;
  font-size: 0.925rem;
}

.download-list small {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.download-list__arrow {
  color: var(--ink-muted);
}

.download-card__note {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

/* Quick contact card */
.quick-card {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  width: 100%;
  height: 100%;
  padding: 1.75rem;
  border: var(--rule);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition:
    border-color var(--duration) ease,
    box-shadow var(--duration) ease;
}

.quick-card > .bi {
  margin-bottom: 0.5rem;
  color: var(--brand-600);
  font-size: 1.5rem;
}

.quick-card__label {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.quick-card strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  overflow-wrap: anywhere;
}

/* Service card (Services page) */
.service-card {
  height: 100%;
  padding: 2.25rem 2rem;
  border: var(--rule);
  background: var(--surface);
}

.service-card p {
  color: var(--ink-soft);
}

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

.service-card__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: var(--rule);
}

.service-card__avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: top;
}

.service-card__person p {
  margin: 0;
}

.service-card__role {
  color: var(--brand-700) !important;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.service-card__name {
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.service-card__title {
  margin-bottom: 1rem;
  font-size: 2.1rem;
}

/* ---------- 9. Lists & chips ---------- */
.check-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0 1.5rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.check-list .bi {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--brand-600);
  font-size: 1.1rem;
}

.section--dark .check-list li {
  color: var(--on-dark-soft);
}

.section--dark .check-list .bi {
  color: var(--brand);
}

@media (min-width: 768px) {
  .check-list--two {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
}

.icon-list {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
  border-top: var(--rule);
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: var(--rule);
}

.icon-list .bi {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--brand-600);
  font-size: 1.2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}

.feature-grid li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border: var(--rule);
  font-weight: 700;
  font-size: 0.925rem;
}

.feature-grid .bi {
  color: var(--brand-600);
  font-size: 1.25rem;
}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.25rem 0 1.75rem;
}

.spec-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border: var(--rule);
  background: var(--surface);
  font-size: 0.8125rem;
}

.spec-chips .bi {
  color: var(--brand-600);
}

.spec-chips span {
  color: var(--ink-muted);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.tag-list li {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--brand);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.tag-list--stack {
  flex-direction: column;
}

.plain-list li {
  padding: 0.55rem 0;
  border-bottom: var(--rule);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.distance-list {
  margin: 0 0 1.5rem;
  border-top: var(--rule);
}

.distance-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: var(--rule);
}

.distance-list .bi {
  color: var(--brand-600);
  font-size: 1.15rem;
}

.distance-list span {
  flex: 1 1 auto;
}

.distance-list strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
}

/* ---------- 10. Breadcrumbs ---------- */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.72);
}

.breadcrumbs li + li::before {
  color: var(--brand);
  content: "/";
}

.breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.breadcrumbs--dark {
  padding-top: 2rem;
}

.breadcrumbs--dark li {
  color: var(--ink-muted);
}

.breadcrumbs--dark a {
  color: var(--ink);
}

/* ---------- 11. Filter buttons ---------- */
.filter {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
}

.filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filter__btn + .filter__btn {
  border-left: 1px solid var(--ink);
}

.filter__btn span {
  color: var(--ink-muted);
}

.filter__btn.is-active {
  background: var(--ink);
  color: #fff;
}

.filter__btn.is-active span {
  color: var(--brand);
}

/* ---------- 12. Accordion (FAQ) ---------- */
.faq {
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-border-color: var(--line);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--surface-warm);
  --bs-accordion-active-color: var(--ink);
  margin-bottom: 2rem;
}

.faq .accordion-button {
  min-height: 64px;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.faq .accordion-body {
  color: var(--ink-soft);
}

/* ---------- 13. Site-visit modal ---------- */
.enquiry-modal {
  border: 0;
  border-top: 3px solid var(--brand);
  box-shadow: var(--shadow-lg);
}

.enquiry-modal__header {
  align-items: flex-start;
  padding: calc(1.25rem + env(safe-area-inset-top)) 1.5rem 1rem;
  border-bottom: var(--rule);
}

.enquiry-modal__header .eyebrow {
  margin-bottom: 0.4rem;
}

.enquiry-modal__header .modal-title {
  margin: 0;
  font-size: 2.1rem;
}

.enquiry-modal__header .btn-close {
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.5rem 0 auto;
  padding: 0;
}

.enquiry-modal__body {
  padding: 1.5rem;
}

.enquiry-modal__submit {
  position: sticky;
  z-index: 2;
  bottom: -1.5rem;
  margin: 1.5rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  border-top: var(--rule);
  background: var(--surface);
}

@media (min-width: 576px) {
  .enquiry-modal__header {
    padding: 1.75rem 2rem 1.25rem;
  }
  .enquiry-modal__body {
    padding: 1.75rem 2rem 2rem;
  }
  .enquiry-modal__submit {
    position: static;
    margin: 1.5rem 0 0;
    padding: 0;
    border: 0;
  }
  .modal-dialog {
    max-width: 560px;
  }
}

/* ---------- 14. Framed media & maps ---------- */
.framed-media {
  position: relative;
  isolation: isolate;
}

.framed-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* Architectural corner frame */
.framed-media::after {
  position: absolute;
  z-index: -1;
  right: -14px;
  bottom: -14px;
  width: 45%;
  height: 45%;
  border-right: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
  content: "";
  pointer-events: none;
}

.framed-media::before {
  position: absolute;
  z-index: -1;
  top: -14px;
  left: -14px;
  width: 22%;
  height: 22%;
  border-top: 1px solid var(--brand);
  border-left: 1px solid var(--brand);
  content: "";
  pointer-events: none;
}

.map-frame,
.contact__map {
  position: relative;
  overflow: hidden;
  border: var(--rule);
  background: var(--surface-alt);
}

.map-frame {
  height: 100%;
  min-height: 360px;
}

.map-frame iframe,
.contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact__map-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.contact__map-placeholder .bi {
  color: var(--brand-600);
  font-size: 1.6rem;
}

/* ---------- Property card: start/finish dates + photo placeholder ---------- */
.property-card__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 1rem;
  border-block: var(--rule);
}

.property-card__dates > div {
  padding: 0.75rem 0;
}

.property-card__dates > div + div {
  padding-left: 1rem;
  border-left: var(--rule);
}

.property-card__dates dt {
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.property-card__dates dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

.property-card__dates + .property-card__specs {
  border-top: 0;
}

.property-card__media--placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(238, 126, 57, 0.18), transparent 60%),
    var(--ink);
  color: #fff;
}

.property-card__mark {
  width: 62%;
  height: auto;
  aspect-ratio: 3162 / 950;
  opacity: 0.9;
}

.property-card--current .property-card__badge {
  background: #BA160C;
  border-radius: 10px;
}

.property-card--sold .property-card__badge {
  background: green;
  border-radius: 10px;
}