/**
 * Apartment detail page.
 *
 * Also loaded on the Contact page for the enquiry form's base styles (see
 * inc/enqueue.php), so everything outside the "Enquiry form" block is scoped
 * to the detail page's own classes, and the detail page's form adjustments
 * sit under .wb-detail__contact.
 *
 * Sizes follow the 1440px and 390px frames; the desktop values apply from
 * 64rem, where the page splits into two columns.
 */

.wb-detail {
  /* Page-specific colours from the frames. */
  --wb-detail-ink: #00001C;      /* body copy, headings, facts */
  --wb-detail-nav: #E1E1EC;      /* previous-image button */
  --wb-detail-owner-bg: #EAF6EC; /* installments banner */
  --wb-detail-owner-line: #BFE3C5;
  --wb-detail-owner-title: #1E7A2A;
  --wb-detail-owner-text: #2F4A37;
  --wb-detail-submit: #1B6B96;
  --wb-detail-shadow-thumb: 0 6px 14px rgba(0, 0, 28, 0.12);
  --wb-detail-shadow-form: 0 10px 30px rgba(0, 0, 28, 0.08);

  padding-block: calc(var(--wb-header-h) + 1.625rem) var(--wb-space-10); /* 26px under the header */
  color: var(--wb-detail-ink);
}

@media (min-width: 64rem) {
  .wb-detail {
    --wb-detail-shadow-form: 0 8px 30px rgba(0, 0, 28, 0.08);

    padding-block: calc(var(--wb-header-h) + 1.5625rem) 7rem; /* 25px under the header, 112px above the footer */
  }
}

/* ==========================================================================
 * Head — back link and "01 · Title"
 * ======================================================================= */

.wb-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem; /* 10px */
  margin-bottom: 1.375rem; /* 22px */
}

@media (min-width: 64rem) {
  .wb-detail__head {
    gap: 0.5625rem; /* 9px */
    margin-bottom: 1.75rem; /* 28px */
  }
}

.wb-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  color: var(--wb-detail-ink);
  font-size: 0.9875rem; /* 15.8px */
  letter-spacing: 0.01em;
  line-height: 1.375rem;
}

@media (min-width: 64rem) {
  .wb-detail__back {
    gap: 0.5rem;
    font-size: 1.0625rem; /* 17px */
    line-height: 1.4375rem;
  }
}

.wb-detail__back:hover,
.wb-detail__back:focus {
  color: var(--wb-primary);
}

.wb-detail__back-icon {
  width: 1.125rem; /* 18px */
  height: 1.125rem;
}

@media (min-width: 64rem) {
  .wb-detail__back-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* 32.3px at 390 rising to 41px at 1440. */
.wb-detail__title {
  margin: 0;
  color: var(--wb-detail-ink);
  font-size: clamp(2.0188rem, 1.817rem + 0.8286vw, 2.5625rem);
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.005em;
  line-height: 1.3625; /* 44 / 32.3, 56 / 41 */
}

.wb-detail__unit {
  color: var(--wb-secondary);
}


/* ==========================================================================
 * Layout
 *
 * Desktop: the main column (776) beside the form and the characteristics
 * panel (384), 40px apart. The main column spans every row; the spare last
 * row absorbs its height so the form and panel stay stacked at the top.
 * Mobile moves the characteristics above the form, as the design draws it.
 * ======================================================================= */

.wb-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "chars"
    "contact";
  gap: 2.5rem; /* 40px */
}

@media (min-width: 64rem) {
  .wb-detail__layout {
    grid-template-columns: minmax(0, 776fr) minmax(0, 384fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "main contact"
      "main chars"
      "main .";
    column-gap: 2.5rem;
    row-gap: 2.8125rem; /* 45px between the form and the panel */
    align-items: start;
  }
}

.wb-detail__main {
  grid-area: main;
  min-width: 0;
}

.wb-detail__contact {
  grid-area: contact;
  min-width: 0;
}

.wb-chars {
  grid-area: chars;
  min-width: 0;
}

/*
 * Below the gallery the design narrows the column to 612 of its 776px,
 * centred. As a proportion, so it holds at the theme's wider container —
 * but only once the column is wide enough to spare it. The facts, banner
 * and price panel lay themselves out by this block's width (container
 * queries), since at 1024px the column is narrower than on a tablet.
 */
.wb-detail__content {
  container-type: inline-size;
  padding-top: 2.375rem; /* 38px */
}

@media (min-width: 64rem) {
  .wb-detail__content {
    padding-top: 2.4375rem; /* 39px */
  }
}

@media (min-width: 80rem) {
  .wb-detail__content {
    width: 78.866%; /* 612 / 776 */
    margin-inline: auto;
  }
}

/* ==========================================================================
 * Gallery
 * ======================================================================= */

.wb-gallery {
  margin: 0;
}

.wb-gallery__stage {
  position: relative;
  overflow: hidden;
  border-radius: 0.1875rem; /* 3px */
}

@media (min-width: 64rem) {
  .wb-gallery__stage {
    border-radius: var(--wb-radius-sm);
  }
}

.wb-gallery__slide {
  margin: 0;
}

.wb-gallery__slide[hidden] {
  display: none;
}

.wb-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 358 / 238;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .wb-gallery__img {
    aspect-ratio: 776 / 436;
  }
}

/* The same tag the listing cards carry. */
.wb-gallery__badge {
  position: absolute;
  z-index: 1;
  inset-block-start: 0.875rem; /* 14px */
  inset-inline-start: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  height: 1.625rem; /* 26px */
  padding-inline: 0.625rem;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: var(--wb-radius-sm);
  color: #3F7248;
  font-size: var(--wb-fs-micro);
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .wb-gallery__badge {
    inset-block-start: 1.25rem; /* 20px */
    inset-inline-start: 1.25rem;
  }
}

.wb-gallery__badge-icon {
  flex-shrink: 0;
  width: 0.8125rem; /* 13px */
  height: 0.8125rem;
  color: #5A8F63;
}

/*
 * Thumbnail strip between two round buttons. Two thumbnails show on mobile
 * and three at desktop; the gaps are the design's (23px and 12px), which
 * makes the thumbnails come out at its 89px and 205px widths.
 */
.wb-gallery__controls {
  --wb-gallery-gap: 1.4375rem; /* 23px */
  --wb-gallery-per-view: 2;

  display: flex;
  align-items: center;
  gap: var(--wb-gallery-gap);
  margin-top: var(--wb-space-4);
}

@media (min-width: 40rem) {
  .wb-gallery__controls {
    --wb-gallery-gap: 0.75rem; /* 12px */
    --wb-gallery-per-view: 3;
  }
}

.wb-gallery__nav {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.4375rem; /* 55px */
  height: 3.4375rem;
  border-radius: 50%;
  color: var(--wb-white);
  transition: background-color var(--wb-transition), color var(--wb-transition);
}

@media (min-width: 64rem) {
  .wb-gallery__nav {
    width: 3.5rem; /* 56px */
    height: 3.5rem;
  }
}

.wb-gallery__nav--prev {
  background-color: var(--wb-detail-nav);
}

.wb-gallery__nav--next {
  background-color: var(--wb-primary);
}

.wb-gallery__nav:hover,
.wb-gallery__nav:focus-visible {
  background-color: var(--wb-secondary);
}

.wb-gallery__chevron {
  width: 1.25rem;
  height: 1.25rem;
}

/* The source chevron points down, so quarter turns give left and right. */
.wb-gallery__nav--prev .wb-gallery__chevron {
  transform: rotate(90deg);
}

.wb-gallery__nav--next .wb-gallery__chevron {
  transform: rotate(-90deg);
}

/*
 * Not positioned, on purpose: main.js measures the thumbnails' offsets
 * against the strip's own. The padding gives the thumbnails' shadows room
 * inside the scroll box; the negative margin gives the space back.
 */
.wb-gallery__thumbs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--wb-gallery-gap);
  margin: -0.5rem 0 -1.5rem;
  padding: 0.5rem 0 1.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wb-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.wb-gallery__thumb {
  flex: 0 0 calc((100% - (var(--wb-gallery-per-view) - 1) * var(--wb-gallery-gap)) / var(--wb-gallery-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.wb-gallery__thumb-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0.125rem; /* 2px */
  box-shadow: var(--wb-detail-shadow-thumb);
}

@media (min-width: 64rem) {
  .wb-gallery__thumb-link {
    border-radius: 0.1875rem; /* 3px */
  }
}

/* The current image is ringed; the design never shows it in the strip. */
.wb-gallery__thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color var(--wb-transition);
}

.wb-gallery__thumb.is-active .wb-gallery__thumb-link::after,
.wb-gallery__thumb-link:hover::after,
.wb-gallery__thumb-link:focus-visible::after {
  border-color: var(--wb-primary);
}

.wb-gallery__thumb-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 89 / 55;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .wb-gallery__thumb-img {
    aspect-ratio: 205 / 138;
  }
}

/* ==========================================================================
 * Headline facts — type, area, location
 * ======================================================================= */

.wb-facts {
  display: flex;
  flex-direction: column;
  gap: 1.375rem; /* 22px */
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (min-width: 32rem) {
  .wb-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: space-between;
    gap: var(--wb-space-5);
  }
}

/* The design's 190 / 190 / 232px slots, as proportions. */
@container (min-width: 38rem) {
  .wb-facts {
    grid-template-columns: minmax(0, 190fr) minmax(0, 190fr) minmax(0, 232fr);
    gap: var(--wb-space-2);
  }
}

.wb-facts__item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  min-height: 2.0625rem; /* 33px */
  color: var(--wb-detail-ink);
  font-size: 1.08125rem; /* 17.3px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.4375rem;
}

@media (min-width: 64rem) {
  .wb-facts__item {
    gap: 0.625rem; /* 10px */
    font-size: 1.3125rem; /* 21px */
    letter-spacing: 0;
    line-height: 1.75rem;
  }
}

.wb-facts__icon {
  flex-shrink: 0;
  width: 2.25rem; /* 36px */
  height: 2.0625rem; /* 33px */
  color: var(--wb-secondary);
}

@media (min-width: 64rem) {
  .wb-facts__icon {
    width: 2.75rem; /* 44px */
    height: 2.5625rem; /* 41px */
  }
}

/* ==========================================================================
 * Direct Owner Installments banner
 * ======================================================================= */

.wb-owner {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "badge title"
    "text  text"
    "cta   cta";
  align-items: center;
  column-gap: 0.875rem; /* 14px */
  margin-top: 2.1875rem; /* 35px */
  padding-block: 1.3125rem; /* 21px */
  padding-inline: 1.0625rem 1.4375rem; /* 17px inside the rule, 23px */
  background-color: var(--wb-detail-owner-bg);
  border: 2px solid var(--wb-detail-owner-line);
  border-inline-start: 6px solid var(--wb-secondary);
  border-radius: var(--wb-radius-sm);
}

/* The copy block only groups the title and text at desktop. */
.wb-owner__copy {
  display: contents;
}

@media (min-width: 64rem) {
  .wb-owner {
    margin-top: 2.375rem; /* 38px */
  }
}

@container (min-width: 34rem) {
  .wb-owner {
    display: flex;
    align-items: center;
    gap: 1.125rem; /* 18px */
    padding-block: 1.3125rem; /* 21px */
    padding-inline: 1.375rem 1.5rem; /* 22px inside the rule, 24px */
    min-height: 9.375rem; /* 150px */
  }

  .wb-owner__copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .wb-owner__cta {
    margin-top: 0;
  }
}

.wb-owner__badge {
  grid-area: badge;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44px */
  height: 2.75rem;
  background-color: var(--wb-secondary);
  border-radius: 50%;
  color: var(--wb-white);
}

@container (min-width: 34rem) {
  .wb-owner__badge {
    width: 3.25rem; /* 52px */
    height: 3.25rem;
  }
}

.wb-owner__icon {
  width: 1.375rem; /* 22px */
  height: 1.375rem;
  stroke-width: 2.2;
}

@media (min-width: 64rem) {
  .wb-owner__icon {
    width: 1.625rem; /* 26px */
    height: 1.625rem;
  }
}

.wb-owner__title {
  grid-area: title;
  margin: 0;
  color: var(--wb-detail-owner-title);
  font-size: 1.15625rem; /* 18.5px */
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.5625rem;
}

.wb-owner__text {
  grid-area: text;
  margin: 0.625rem 0 0; /* 10px */
  color: var(--wb-detail-owner-text);
  font-size: 0.90625rem; /* 14.5px */
  letter-spacing: 0.01em;
  line-height: 1.375rem;
}

@media (min-width: 64rem) {
  .wb-owner__title {
    font-size: 1.3125rem; /* 21px */
    line-height: 1.75rem;
  }

  .wb-owner__text {
    margin-top: var(--wb-space-1);
    font-size: 0.9375rem; /* 15px */
  }
}

.wb-owner__cta {
  grid-area: cta;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  min-height: 3.125rem; /* 50px */
  margin-top: 0.875rem; /* 14px */
  padding-inline: 1.125rem; /* 18px */
  background-color: var(--wb-secondary);
  border-radius: 0.1875rem;
  color: var(--wb-white);
  font-size: 1rem;
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.375rem;
  transition: background-color var(--wb-transition);
}

.wb-owner__cta:hover,
.wb-owner__cta:focus-visible {
  background-color: var(--wb-primary);
  color: var(--wb-white);
}

.wb-owner__cta-icon,
.wb-viewing__cta-icon {
  flex-shrink: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
}

/* ==========================================================================
 * Prices & viewings — shown instead of the banner without installments
 * ======================================================================= */

.wb-viewing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wb-space-4);
  margin-top: 2.1875rem;
  padding: 1.25rem 1.5rem 1.125rem; /* 20px 24px 18px */
  background-color: var(--wb-surface);
  border-radius: 0.1875rem;
}

@media (min-width: 64rem) {
  .wb-viewing {
    margin-top: 2.375rem;
  }
}

@container (min-width: 30rem) {
  .wb-viewing {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 6.0625rem; /* 97px */
    padding-block: 1.3125rem;
    padding-inline: 1.5rem 2rem;
  }
}

.wb-viewing__copy {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.wb-viewing__label {
  color: var(--wb-detail-ink);
  font-size: 0.9875rem; /* 15.8px */
  letter-spacing: 0.01em;
  line-height: 1.375rem;
}

.wb-viewing__value {
  color: var(--wb-primary);
  font-size: 1.08125rem; /* 17.3px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.4375rem;
}

@media (min-width: 64rem) {
  .wb-viewing__label {
    font-size: 1.0625rem; /* 17px */
    line-height: 1.4375rem;
  }

  .wb-viewing__value {
    font-size: 1.3125rem; /* 21px */
    line-height: 1.75rem;
  }
}

.wb-viewing__cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--wb-space-2);
  min-height: 3.4375rem; /* 55px */
  padding: var(--wb-space-4) var(--wb-space-5);
  background-color: var(--wb-primary);
  border-radius: 0.125rem;
  color: var(--wb-white);
  font-size: 1.0625rem;
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.4375rem;
  transition: background-color var(--wb-transition);
}

.wb-viewing__cta:hover,
.wb-viewing__cta:focus-visible {
  background-color: var(--wb-secondary);
  color: var(--wb-white);
}

/* ==========================================================================
 * Description, layout, features, location, photo grid
 * ======================================================================= */

.wb-detail__body {
  margin-top: 2rem; /* 32px */
  color: var(--wb-detail-ink);
  font-size: 1.0375rem; /* 16.6px */
  letter-spacing: 0.01em;
  line-height: 1.6125rem; /* 25.8px */
}

@media (min-width: 64rem) {
  .wb-detail__body {
    margin-top: 2.0625rem; /* 33px */
    font-size: 1.0625rem; /* 17px */
    line-height: 1.625rem; /* 26px */
  }
}

.wb-detail__body > :first-child {
  margin-top: 0;
}

.wb-detail__highlight {
  margin: 0;
  color: var(--wb-primary-dark);
  font-size: 1.08125rem; /* 17.3px */
  font-weight: var(--wb-fw-bold);
  line-height: 1.5625rem; /* 25px */
}

@media (min-width: 64rem) {
  .wb-detail__highlight {
    font-size: 1.1875rem; /* 19px */
    line-height: 1.625rem;
  }
}

.wb-detail__desc {
  max-width: none;
  margin-top: 0.75rem; /* 12px */
}

.wb-detail__desc > * + * {
  margin-top: 0.75rem;
}

.wb-detail__desc p {
  margin-bottom: 0;
}

/*
 * Headings inside the editor content take the same run-in style as the
 * section headings below ("Apartment layout:" and so on).
 */
.wb-detail__desc h2,
.wb-detail__desc h3,
.wb-detail__desc h4,
.wb-detail__desc h5,
.wb-detail__desc h6,
.wb-detail__heading {
  margin: 2.3125rem 0 0; /* 37px */
  color: var(--wb-detail-ink);
  font-size: 1.28125rem; /* 20.5px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.75rem;
}

@media (min-width: 64rem) {
  .wb-detail__desc h2,
  .wb-detail__desc h3,
  .wb-detail__desc h4,
  .wb-detail__desc h5,
  .wb-detail__desc h6,
  .wb-detail__heading {
    font-size: 1.3125rem; /* 21px */
    letter-spacing: 0;
  }
}

.wb-detail__desc img {
  width: 100%;
  height: auto;
  border-radius: 0.1875rem;
}

.wb-detail__section {
  margin: 0;
}

/* Indented, unmarked lines, as the design sets them. */
.wb-detail__desc ul,
.wb-detail__desc ol,
.wb-detail__list {
  margin: 0.625rem 0 0; /* 10px */
  padding: 0;
  padding-inline-start: 1.625rem; /* 26px */
  list-style: none;
}

@media (min-width: 64rem) {
  .wb-detail__desc ul,
  .wb-detail__desc ol,
  .wb-detail__list {
    margin-top: 0.875rem; /* 14px */
  }
}

.wb-detail__desc li + li,
.wb-detail__list li + li {
  margin-top: 0;
}

.wb-detail__text {
  margin: 0.625rem 0 0;
}

@media (min-width: 64rem) {
  .wb-detail__text {
    margin-top: 0.9375rem; /* 15px */
    line-height: 1.4375rem; /* 23px */
  }
}

.wb-detail__section--photos .wb-detail__heading {
  margin-top: 2.4375rem; /* 39px */
}

@media (min-width: 64rem) {
  .wb-detail__section--photos .wb-detail__heading {
    margin-top: 2.5625rem; /* 41px */
  }
}

.wb-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem; /* 10px */
  margin: var(--wb-space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .wb-photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem; /* 12px */
  }
}

.wb-photos__link {
  display: block;
  overflow: hidden;
  border-radius: 0.1875rem;
}

.wb-photos__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 174 / 130;
  object-fit: cover;
  transition: transform var(--wb-transition);
}

@media (min-width: 40rem) {
  .wb-photos__img {
    aspect-ratio: 196 / 150;
  }
}

.wb-photos__link:hover .wb-photos__img,
.wb-photos__link:focus-visible .wb-photos__img {
  transform: scale(1.04);
}

/* ==========================================================================
 * Enquiry form — base styles, shared with the Contact page
 * ======================================================================= */

.wb-enquiry__title {
  margin: 0 0 var(--wb-space-5);
  color: var(--wb-primary-dark);
  font-size: var(--wb-fs-advant);
  line-height: 1.22;
}

.wb-enquiry__card {
  padding: var(--wb-space-5);
  background-color: var(--wb-white);
  box-shadow: var(--wb-shadow-card);
}

.wb-enquiry__legend {
  margin: 0 0 var(--wb-space-5);
  color: #0f3f5c;
  font-size: 1.25rem; /* 20px */
  font-weight: var(--wb-fw-bold);
  line-height: 2.625rem;
}

.wb-enquiry__fields,
.wb-enquiry__row {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-4);
}

.wb-input {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem; /* 7px */
  margin: 0;
}

.wb-input__label {
  color: #22384a;
  font-size: var(--wb-fs-caption);
  font-weight: var(--wb-fw-semibold);
  line-height: 1.75rem;
}

.wb-input__required {
  color: #d64545;
}

/* Scoped so base.css's element selectors do not re-apply their own border. */
.wb-input .wb-input__control {
  width: 100%;
  min-height: 2.875rem; /* 46px */
  padding: 0.5rem 1rem;
  background-color: #f2f5f7;
  border: 0;
  border-radius: 0;
  color: var(--wb-text);
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.8125rem;
}

.wb-input .wb-input__control::placeholder {
  color: #9aa6ae;
}

.wb-input .wb-input__control:focus {
  box-shadow: inset 0 0 0 2px var(--wb-primary);
  outline: none;
}

.wb-input--area .wb-input__control {
  min-height: 9.875rem; /* 158px */
  resize: vertical;
}

.wb-enquiry__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-space-2);
  width: 100%;
  min-height: 3.125rem; /* 50px */
  margin-top: var(--wb-space-5);
  background-color: var(--wb-primary);
  color: var(--wb-white);
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--wb-fw-semibold);
  transition: background-color var(--wb-transition);
}

.wb-enquiry__submit:hover,
.wb-enquiry__submit:focus {
  background-color: var(--wb-secondary);
}

.wb-enquiry__icon {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* Kept in the DOM for bots but out of view and out of the tab order. */
.wb-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wb-notice {
  margin: 0 0 var(--wb-space-4);
  padding: var(--wb-space-3) var(--wb-space-4);
  border-radius: var(--wb-radius-sm);
  font-size: var(--wb-fs-body);
}

.wb-notice--ok {
  background-color: rgba(42, 158, 54, 0.12);
  color: #1f7a29;
}

.wb-notice--error {
  background-color: rgba(214, 69, 69, 0.12);
  color: #a33434;
}

/* ==========================================================================
 * Enquiry form — the detail page's sidebar version
 *
 * The eyebrow and heading sit 16px in from the card's edge at desktop; on
 * mobile the whole block is inset 7px from the page gutter.
 * ======================================================================= */

.wb-detail__contact {
  margin-top: 0.4375rem; /* 47px after the panel above, with the grid gap */
  padding-inline: 0.4375rem; /* 7px */
}

@media (min-width: 64rem) {
  .wb-detail__contact {
    margin-top: 0;
    padding-inline: 0;
  }
}

.wb-detail__contact .wb-eyebrow {
  margin: 0;
  color: var(--wb-secondary);
  font-size: 0.71875rem; /* 11.5px */
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.01em;
  line-height: 0.9375rem;
  text-transform: none;
}

.wb-detail__contact .wb-enquiry__title {
  margin: 0.25rem 0 2.1875rem; /* 4px, 35px */
  color: var(--wb-primary-dark);
  font-size: 1.625rem; /* 26px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 2.0625rem; /* 33px */
  text-wrap: wrap; /* base.css balances headings; the design breaks after "&" */
}

@media (min-width: 64rem) {
  .wb-detail__contact .wb-eyebrow,
  .wb-detail__contact .wb-enquiry__title {
    max-width: 20.625rem; /* 330px, so the heading breaks after "&" */
    margin-inline: var(--wb-space-4);
  }

  .wb-detail__contact .wb-eyebrow {
    margin-top: 0.5625rem; /* 9px */
    font-size: var(--wb-fs-caption); /* 13px */
    line-height: 1.125rem;
  }

  .wb-detail__contact .wb-enquiry__title {
    margin-top: 0.4375rem; /* 7px */
    margin-bottom: 1.9375rem; /* 31px */
    font-size: 1.6875rem; /* 27px */
    letter-spacing: 0;
  }
}

.wb-detail__contact .wb-enquiry__card {
  padding: 2.0625rem 1.25rem 1.5rem; /* 33px 20px 24px */
  box-shadow: var(--wb-detail-shadow-form);
}

@media (min-width: 64rem) {
  .wb-detail__contact .wb-enquiry__card {
    padding: 1.8125rem 1.5rem; /* 29px 24px */
  }
}

.wb-detail__contact .wb-enquiry__legend {
  margin-bottom: 2.0625rem; /* 33px */
  color: var(--wb-navy);
  font-size: 1.2375rem; /* 19.8px */
  letter-spacing: 0.01em;
  line-height: 1.6875rem; /* 27px */
}

@media (min-width: 64rem) {
  .wb-detail__contact .wb-enquiry__legend {
    margin-bottom: 2rem; /* 32px */
    font-size: 1.25rem;
    letter-spacing: 0;
  }
}

.wb-detail__contact .wb-enquiry__fields,
.wb-detail__contact .wb-enquiry__row {
  gap: 1.125rem; /* 18px */
}

.wb-detail__contact .wb-input {
  gap: 0.5rem; /* 8px */
}

.wb-detail__contact .wb-input__label {
  color: var(--wb-detail-ink);
  font-size: 0.85rem; /* 13.6px */
  letter-spacing: 0.01em;
  line-height: 1.1875rem;
}

.wb-detail__contact .wb-input__required {
  color: #E53935;
}

.wb-detail__contact .wb-input .wb-input__control {
  padding-inline: 0.875rem; /* 14px */
  font-size: 0.825rem; /* 13.2px */
}

.wb-detail__contact .wb-input .wb-input__control::placeholder {
  color: #757575;
}

@media (min-width: 64rem) {
  .wb-detail__contact .wb-enquiry__fields,
  .wb-detail__contact .wb-enquiry__row {
    gap: 1.1875rem; /* 19px */
  }

  .wb-detail__contact .wb-input {
    gap: 0.875rem; /* 14px */
  }

  .wb-detail__contact .wb-input__label {
    font-size: var(--wb-fs-caption); /* 13px */
    line-height: 1.125rem;
  }

  .wb-detail__contact .wb-input .wb-input__control {
    padding-inline: 0.9375rem; /* 15px */
    font-size: var(--wb-fs-caption);
  }
}

.wb-detail__contact .wb-input--area .wb-input__control {
  min-height: 9.8125rem; /* 157px */
  padding-top: var(--wb-space-4);
}

@media (min-width: 64rem) {
  .wb-detail__contact .wb-input--area .wb-input__control {
    padding-top: 1.125rem; /* 18px */
  }
}

.wb-detail__contact .wb-enquiry__submit {
  background-color: var(--wb-detail-submit);
}

.wb-detail__contact .wb-enquiry__submit:hover,
.wb-detail__contact .wb-enquiry__submit:focus {
  background-color: var(--wb-secondary);
}

/* ==========================================================================
 * Brief characteristics
 * ======================================================================= */

.wb-chars {
  padding: 0.875rem var(--wb-space-4) 1.125rem; /* 14px 16px 18px */
  background-color: var(--wb-surface);
  border-radius: 0.1875rem;
}

@media (min-width: 64rem) {
  .wb-chars {
    padding: 2.3125rem var(--wb-space-7) var(--wb-space-7); /* 37px 40px 40px */
  }
}

.wb-chars__title {
  margin: 0 0 var(--wb-space-2);
  color: var(--wb-detail-ink);
  font-size: 1.1125rem; /* 17.8px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.5rem;
}

@media (min-width: 64rem) {
  .wb-chars__title {
    margin-bottom: var(--wb-space-4);
    font-size: 1.3125rem; /* 21px */
    letter-spacing: 0;
    line-height: 1.75rem;
  }
}

.wb-chars__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  margin: 0;
}

@media (min-width: 64rem) {
  .wb-chars__list {
    gap: 1.25rem; /* 20px */
  }
}

/* The icon sits in the term; a wrapped value hangs under the label. */
.wb-chars__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3em;
  padding-inline-start: 2rem; /* 20px icon + 12px */
  position: relative;
  color: var(--wb-detail-ink);
  font-size: 0.9875rem; /* 15.8px */
  letter-spacing: 0.01em;
  line-height: 1.375rem;
}

@media (min-width: 64rem) {
  .wb-chars__row {
    padding-inline-start: 2.125rem; /* 22px icon + 12px */
    font-size: 1.0625rem; /* 17px */
    line-height: 1.4375rem;
  }
}

.wb-chars__label {
  margin: 0;
  font-weight: var(--wb-fw-bold);
}

.wb-chars__value {
  margin: 0;
}

.wb-chars__icon {
  position: absolute;
  inset-block-start: 0.0625rem;
  inset-inline-start: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  color: var(--wb-secondary);
}

@media (min-width: 64rem) {
  .wb-chars__icon {
    inset-block-start: 0;
    width: 1.375rem; /* 22px */
    height: 1.375rem;
  }
}

/* ==========================================================================
 * Related listings — the archive's card, three across
 * ======================================================================= */

.wb-related {
  margin-top: var(--wb-space-10); /* 64px */
}

@media (min-width: 64rem) {
  .wb-related {
    margin-top: 6.8125rem; /* 109px */
  }
}

.wb-related__title {
  margin: 0 0 1.5625rem; /* 25px */
  color: var(--wb-detail-ink);
  font-size: 1.3125rem; /* 21px */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.75rem;
}

@media (min-width: 64rem) {
  .wb-related__title {
    margin-bottom: var(--wb-space-5);
    font-size: 1.35625rem; /* 21.7px */
    font-weight: var(--wb-fw-semibold);
    letter-spacing: 0;
    line-height: 1.8125rem;
    text-align: center;
  }
}

.wb-related__grid {
  row-gap: 1.625rem; /* 26px */
}

/* The mobile frame shows two; the third returns with the third column. */
@media (max-width: 63.99rem) {
  .wb-related__grid > :nth-child(n + 3) {
    display: none;
  }
}