/* Shared inner-page banner and page layouts. */
/* Contact-only breadcrumb, information cards and enquiry form. */
/* From style.css */

/* From premium.css */

/* From enhancements.css */
.breadcrumb-section {
  position: relative;
  min-height: var(--height-breadcrumb);
  background: var(--color-primary);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-breadcrumb-text);
}

.breadcrumb-overlay {
  position: absolute;
  inset: var(--space-0);
  background: linear-gradient(
    110deg,
    var(--color-hero-shade),
    var(--color-hero-shade) 45%,
    var(--color-primary)
  );
  opacity: var(--breadcrumb-opacity);
}

.breadcrumb-content {
  position: relative;
  padding-block: var(--space-10);
}

.breadcrumb-content h1 {
  font-size: var(--font-breadcrumb);
  line-height: 1.18;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-5);
}

.breadcrumb-content > p:not(.eyebrow) {
  font-size: var(--font-lead);
  color: var(--color-hero-secondary);
  line-height: 1.8;
}

.breadcrumb-content nav ol {
  list-style: none;
  padding: var(--space-0);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-small);
  margin-top: var(--space-6);
}

.breadcrumb-content nav a {
  border-bottom: var(--border-width) solid var(--color-hero-secondary);
}
:root {
  --page-section-space: 80px;
  --page-copy-width: 780px;
  --page-panel-padding: 40px;
  --page-card-gap: 24px;
  --nav-underline-width: 90%;
  --nav-underline-height: 2px;
  --logo-desktop-width: 142px;
  --logo-footer-width: 180px;
  --close-button-size: 38px;
  --width-zero: 0%;
  --width-full: 100%;
  --font-page-lead: 1.12rem;
  --panel-shadow: 0 16px 50px
    color-mix(in srgb, var(--color-text) 6%, transparent);
  --faq-icon-size: 32px;
}
.page-section {
  padding-block: var(--page-section-space);
}
.page-heading {
  font-size: var(--font-h2);
  margin-bottom: var(--space-6);
}
.page-lead {
  font-size: var(--font-page-lead);
  color: var(--color-muted);
  line-height: 1.9;
}
.page-panel {
  border: var(--border-width) solid var(--color-border);
  padding: var(--page-panel-padding);
  background: var(--color-bg);
  box-shadow: var(--panel-shadow);
}
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-8);
}
.page-panel h2,
.page-panel h3 {
  margin-bottom: var(--space-5);
}
.page-panel p {
  line-height: 1.9;
}
.page-label {
  display: block;
  font-size: var(--font-small);
  margin-bottom: var(--space-2);
}
.page-notice {
  padding: var(--space-4);
  background: var(--color-surface);
  border-left: var(--border-focus) solid var(--color-primary);
  margin-block: var(--space-5);
  font-size: var(--font-small);
  line-height: 1.8;
}
.page-message {
  margin-top: var(--space-4);
  font-size: var(--font-small);
  line-height: 1.8;
}
.page-message:empty {
  display: none;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* Top-level underline sits at the navbar edge and grows from the centre. */
@media (min-width: 1200px) {
  .desktop-nav,
  .desktop-nav > .menu-level-0,
  .desktop-nav > .menu-level-0 > .menu-entry,
  .desktop-nav > .menu-level-0 > .menu-entry > .menu-row {
    height: var(--height-header);
    display: flex;
    align-items: center;
  }
  .desktop-nav > .menu-level-0 > .menu-entry > .menu-row {
    position: relative;
  }
  .desktop-nav > .menu-level-0 > .menu-entry > .menu-row > a {
    border-bottom: var(--space-0);
    position: static;
  }
  .desktop-nav > .menu-level-0 > .menu-entry > .menu-row > a::after {
    content: "";
    position: absolute;
    bottom: var(--space-0);
    left: 50%;
    transform: translateX(-50%);
    width: var(--width-zero);
    height: var(--nav-underline-height);
    background: var(--color-primary);
    transition: width var(--duration-slow) ease;
  }
  .desktop-nav > .menu-level-0 > .menu-entry:hover > .menu-row > a::after,
  .desktop-nav
    > .menu-level-0
    > .menu-entry
    > .menu-row
    > a:focus-visible::after,
  .desktop-nav
    > .menu-level-0
    > .menu-entry
    > .menu-row
    > a[aria-current]::after {
    width: var(--nav-underline-width);
  }
  .desktop-nav
    > .menu-level-0
    > .menu-entry
    > .menu-row
    > a[aria-current]::after {
    animation: navUnderline var(--duration-slow) ease both;
  }
}
@keyframes navUnderline {
  from {
    width: var(--width-zero);
  }
  to {
    width: var(--nav-underline-width);
  }
}
/* Consistent accessible close targets across every drawer and modal. */
.modal [data-bs-dismiss="modal"],
.offcanvas [data-bs-dismiss="offcanvas"] {
  width: var(--close-button-size);
  height: var(--close-button-size);
  min-width: var(--close-button-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-0);
  color: var(--color-text);
  background: var(--color-bg);
  transition:
    background var(--duration-fast),
    color var(--duration-fast);
}
.modal [data-bs-dismiss="modal"]:hover,
.offcanvas [data-bs-dismiss="offcanvas"]:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.modal [data-bs-dismiss="modal"] i,
.offcanvas [data-bs-dismiss="offcanvas"] i {
  font-size: var(--font-lead);
}
@media (max-width: 767.98px) {
  :root {
    --page-section-space: 48px;
    --page-panel-padding: 24px;
    --font-page-lead: 1rem;
  }
  .page-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .breadcrumb-content h1 {
    font-size: var(--font-h2);
  }
  .breadcrumb-section {
    min-height: 330px;
  }
  .page-actions > .luxury-button {
    width: var(--width-fluid);
  }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Avoid the legacy banner class adding section padding to content headings. */
h2.page-heading {
  padding: var(--space-0);
  text-align: left;
  background: transparent;
  margin-top: var(--space-0);
}
@media (min-width: 1200px) {
  .desktop-nav > .menu-level-0 > .menu-entry > .menu-row > a[aria-current] {
    border-bottom: var(--space-0);
  }
}

/* Medium type weight shared by the presentation-only refinements. */
:root {
  --weight-medium: 500;
}