/*** MISC ***/
* {
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
html {
  font-size: 14px; }
  p {
    margin-bottom: 1rem;
  }
a {
  text-decoration: underline; }
a:hover,
a:focus {
  text-decoration: none; }
p, body,.btn, .header .nav-link {
  font-family: "Parkinsans", sans-serif;
   }
  h1, h2, h3 {
    font-family: "Baskervville", serif;
  }
.container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: 20px; }
img {
  max-width: 100%; }
.pswp img {
  max-width: none; }
.pswp__button--arrow {
  visibility: visible !important; }
.mt-26 {
  margin-top: 5px;
}
.px-15 {
  padding-left: 10px;
  padding-right: 10px;
}
.mx-15 {
  margin-left: -10px;
  margin-right: -10px;
}

/*** BUTTONS ***/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background-color: #7C95A9;
  color: #F2E5C7;
  font-weight: 700;
  font-size: 1.19rem;
  line-height: 1.4;
  padding: 1.2rem 1.6rem 1.2rem 1.6rem;
  border-radius: 5px;
  text-decoration: none;
  border: 0; }
.btn:hover,
.btn:focus {
  color: #F2E5C7!important;
  background-color: #7C95A9;
  opacity: .9; }
.btn-search::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("../images/search.svg") center / contain no-repeat; }

/*** HEADER ***/
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 30px 0; }
.navbar-brand {
  margin-right: 0; }
.navbar-brand img {
  display: block;
  width: clamp(130px, 9vw, 184px);
  height: auto; }
.header .navbar-nav {
  gap: clamp(20px, 25px, 56px); }
.header .nav-link {
  color: #F2E5C7;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  padding: 0; }
.header .nav-link:hover,
.header .nav-link:focus {
  opacity: .75; }
.header .nav-link.nav-inactive {
  color: #B8A68D; }
.header .nav-link.nav-inactive:hover,
.header .nav-link.nav-inactive:focus {
  opacity: .75; }
.header .login-link {
  color: #F2E5C7;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap; }
.header .login-link:hover,
.header .login-link:focus {
  opacity: .75; }
.header .navbar-toggler {
  position: relative;
  width: 26px;
  height: 20px;
  border: 0;
  padding: 0; }
.header .navbar-toggler:focus {
  box-shadow: none; }
.header .navbar-toggler-line {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: #F2E5C7;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.header .navbar-toggler-line:nth-child(1) {
  top: 0; }
.header .navbar-toggler-line:nth-child(2) {
  top: 9px; }
.header .navbar-toggler-line:nth-child(3) {
  top: 18px; }
.header .navbar-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(1) {
  top: 9px;
  transform: rotate(45deg); }
.header .navbar-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(2) {
  opacity: 0; }
.header .navbar-toggler[aria-expanded="true"] .navbar-toggler-line:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg); }
@media (max-width: 991.98px) {
  /* The open menu is a full-screen panel. The header is normally absolute, so it is pinned
     to the viewport while open - otherwise scrolling carries the menu off the top and the
     page shows through. .collapsing is included so the panel is there for the whole of the
     open and close animation, not only once .show lands at the end of it. */
  .header:has(.navbar-collapse.show),
  .header:has(.navbar-collapse.collapsing) {
    position: fixed;
    inset: 0;
    background-color: #3B1312;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain; }
  /* and the page behind it stays put */
  html:has(.header .navbar-collapse.show) {
    overflow: hidden; }
  .header .navbar-collapse {
    margin-top: 1.25rem;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(242, 229, 199, .2);
    text-align: center; }
  .header .navbar-nav {
    align-items: center;
    gap: 1.25rem; }
  .header .nav-link {
    font-size: 1.75rem;
    line-height: 1.3; }
  .header .login-link {
    display: inline-block;
    margin-top: 1rem; }
  /* in the burger menu the favourites link is a menu item of its own, set apart from the
     pages by a divider */
  .header .fav-link {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    margin-right: 0;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(242, 229, 199, .2);
    font-weight: 500;
    font-size: 1.5rem; }
  .header .fav-link img {
    width: 24px;
    height: 24px; } }

/*** HERO ***/
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #1a1410; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.hero-video {
  border: 0;
  z-index: 1;
  pointer-events: none;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(59, 19, 18, .50) 0%, rgba(59, 19, 18, 0) 25%), radial-gradient(50% 50% at 50% 50%, rgba(59, 19, 18, .30) 30%, rgba(59, 19, 18, .60) 100%); }
.hero-container {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(2.5rem, 3.5vw, 7.64rem); }
.hero-container h1 {
  font-weight: 500;
  color: #F2E5C7;
  font-size: clamp(2.75rem, 6.2vw, 10rem);
  line-height: 1;
  margin-bottom: 0;
  word-break: break-word; }
.hero-text {
  font-weight: 500;
  color: #F2E5C7;
  font-size: clamp(1.2rem, 1.2rem, 1.43rem);
  line-height: 1.6;
  margin-bottom: 1.5rem; }
.hero-bottom {
  margin-top: clamp(4rem, 7.5vw, 10rem); }
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 15px, 20px);
  text-decoration: none; }
.hero-scroll img {
  width: 40px;
  height: 40px;
  flex-shrink: 0; }
.hero-scroll span {
  color: #F2E5C7;
  opacity: .5;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1.5px; }
.hero-scroll:hover span {
  opacity: 1; }
.hero-coords {
  text-align: right; }
.hero-coords span {
  color: #F2E5C7;
  opacity: .5;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 1.5px; }
/* From 768px the hero fills the screen: the heading row is centred in it, and the scroll link
   and coordinates are pinned to the bottom out of the flow, so they don't pull it off centre.
   The pinned row spans the container and takes its padding, which changes per breakpoint, so
   it lines up with the heading at every width. The top and bottom padding match, so the centre
   is the screen's centre while still keeping clear of the header and the pinned row. */
@media (min-width: 768px) {
  .hero {
    align-items: stretch; }
  .hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(8rem, 9vw, 12.29rem);
    padding-bottom: clamp(8rem, 9vw, 12.29rem); }
  .hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2.5rem, 3.5vw, 7.64rem);
    margin-top: 0;
    padding-inline: inherit; } }
/* On a phone a full-screen hero pushes everything below the fold, so the section is sized
   by its content instead, with room at the top for the absolute header like the inner-page
   heroes. The video then can no longer cover with vh maths, so it covers against the
   section the way .corporate-hero-video does. */
@media (max-width: 767.98px) {
  .hero {
    min-height: 0; }
  .hero-container {
    padding-top: 10rem; }
  .hero-video {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 16 / 9; }
}

/*** HOMES ***/
.homes {
  background-color: #F2E5C7;
   padding-bottom: 5rem; }
.compass {
  margin-top: 0;
  margin-bottom: 5rem; }
.compass-tick {
  display: block;
  width: 1px;
  height: 20px;
  margin: 0 auto 10px;
  background-color: rgba(59, 19, 18, .1); }
.compass span:last-child {
  color: #3B1312;
  opacity: 0.25;
  font-size: clamp(.6rem, .52vw, .71rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .5px; }
.homes-head {
  margin-bottom: clamp(2.2rem, 4.5vw, 4.29rem); }
.homes h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #3B1312;
  border-radius: 5px;
  color: #3B1312;
  opacity: .8;
  font-weight: 500;
  font-size: clamp(.9rem, .83vw, 1.14rem);
  padding: 11px 20px;
  text-decoration: none; }
.btn-outline img {
  width: 12px;
  height: 7px;
  flex-shrink: 0; }
.homes-view-all {
  margin-top: 2rem; }
.btn-outline:hover,
.btn-outline:focus {
  opacity: 1;
  color: #3B1312;
  text-decoration: none; }
.home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none; }
.home-card:hover,
.home-card:focus {
  text-decoration: none; }
.home-card-image {
  margin: 20px 20px 0;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 344 / 229; }
.home-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; }
.home-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 24px; }
.home-card-title {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0; }
.home-card-location {
  color: #B8A68D;
  font-size: clamp(.85rem, .73vw, 1rem);
  margin-bottom: 0; }
.home-card-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-transform: uppercase;
  gap: 1.4rem;
  border-top: 1px solid rgba(184, 166, 141, .25);
  border-bottom: 1px solid rgba(184, 166, 141, .25);
  padding-block: 1rem;
  margin-top: 1.43rem;
  margin-bottom: 1.43rem;
  color: #3B1312;
  font-size: clamp(.8rem, .68vw, .93rem);
  letter-spacing: .65px; }
.home-card-features span {
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.home-card-features img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.home-card-text {
  flex: 1;
  color: #3B1312;
  font-size: clamp(.85rem, .75vw, 1rem);
  line-height: 1.6;
  /* excerpt() already trims the text, but how many lines that comes to depends on the card
     width - clamp it so a narrow card cannot push the price out of alignment with its row. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; }
.home-card-price {
  align-self: flex-start;
  background-color: rgba(242, 229, 199, .4);
  color: #3B1312;
  font-size: clamp(.8rem, .68vw, .93rem);
  letter-spacing: .65px;
  text-transform: uppercase;
  padding: 13px 20px 14px;
  line-height: 1;
  margin-top: clamp(5px, 10px, 16px);
  border-radius: 40px; }

/*** FEATURES ***/
.features {
  background-color: #3B1312;
  padding-top: 5rem;
  padding-bottom: 5rem;  }
.feature-row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 1.5vw, 2rem);
  min-height: clamp(80px, 6.25vw, 120px);
  padding: clamp(20px, 2vw, 40px) 0 clamp(20px, 2vw, 40px) clamp(15px, 1.5vw, 30px);
  border-top: 1px solid rgba(242, 229, 199, .1);
  transition: padding-right .3s ease-out; }
.feature-row:last-child {
  border-bottom: 1px solid rgba(242, 229, 199, .1); }
.feature-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: top;
  transform: scaleY(0);
  background-color: #2E0E0D;
  transition: transform .3s ease-out, background-color .3s ease-out; }
.feature-row:hover {
  padding-right: clamp(15px, 1.5vw, 30px); }
.feature-row:hover::before {
  transform: scaleY(1);
  background-color: rgba(242, 229, 199, .06); }
.feature-row-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2vw, 2.8rem); }
.feature-row-icon img {
  width: 40px;
  height: 40px;
  flex-shrink: 0; }
.feature-row-icon span {
  color: #F2E5C7;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem); }
.feature-row-desc {
  position: relative;
  z-index: 1;
  color: #B8A68D;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }

/*** FAQ ***/
.faq {
  background-color: #F2E5C7;
  padding-top: 5rem;
  padding-bottom: 5rem; }
.faq h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 20px; }
.faq-head {
  align-items: flex-end;
  margin-bottom: clamp(3.5rem, 6.25vw, 8.57rem); }
.faq-intro {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
/* padding rather than margin: a top margin here collapses with the label's and with the
   search block's bottom margin, so the gap could not be set reliably. Scoped to the list that
   follows a search box - the homepage has no search, and there the label should sit level
   with the first category button rather than 20px below it. */
.faq-search-wrap + .faq-list {
  padding-top: 20px; }
.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 5px; }
.faq-categories.is-searching {
  opacity: .4;
  pointer-events: none; }
.faq-category,
.blog-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 12px;
  background-color: rgba(59, 19, 18, 0.10);
  color: #3B1312;
  opacity: .8;
  border: 0;
  padding: 12px 16px;
  text-align: left;
  line-height: 1;
  font-size: clamp(.8rem, .68vw, .93rem);
  letter-spacing: .65px;
  text-transform: uppercase; }
.faq-category.active,
.blog-category.active {
  background-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }
.faq-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(.8rem, .68vw, .93rem);
  letter-spacing: .65px; }
.faq-category.active .faq-count,
.blog-category.active .faq-count {
  background-color: rgba(242, 229, 199, .1); }
.faq-panel {
  display: none; }
.faq-panel.active {
  display: block;
  border-bottom: 1px solid rgba(59, 19, 18, .1); }
/* Only one panel shows at a time normally. A search reveals several at once, so each group
   needs air above its heading or the label collides with the previous group's last question. */
.faq-list.is-searching .faq-panel {
  padding-top: 30px; }
.faq-panel-label {
  /* Sandstone, per the design - not the body brown at half opacity */
  color: #B8A68D;
  /* 14px at desktop, which is what the design specifies */
  font-size: clamp(.8rem, .97vw, 1rem);
  line-height: 1;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  /* 40 from the search block + 40 of list padding = the design's 80px below the field */
  margin-top: 0;
  margin-bottom: 30px; }
.faq-item {
  padding-bottom: 10px;
  border-top: 1px solid rgba(59, 19, 18, .1); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  width: 100%;
  background: none;
  border: 0;
  padding: 20px 9px 10px 0;
  color: #3B1312;
  opacity: .8;
  font-weight: 500;
  line-height: 1;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  text-align: left; }
.faq-question[aria-expanded="true"] {
  opacity: 1; }
.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(242, 229, 199, .8);
  position: relative;}
/* The +/- is drawn from two bars rather than swapped between two images, so the change
   between states can be animated. Closed: an upright bar crossed by a flat one - a plus.
   Open: the upright bar rotates a quarter turn onto the flat one, which fades out at the
   same time, leaving a single minus. */
.faq-toggle:before,
.faq-toggle:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #3B1312;
  -webkit-transition: all .35s ease-in-out;
       -o-transition: all .35s ease-in-out;
          transition: all .35s ease-in-out; }
.faq-toggle:before {
  width: 2px;
  height: 16px;
  margin-left: -1px;
  margin-top: -8px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg); }
.faq-toggle:after {
  width: 16px;
  height: 2px;
  margin-left: -8px;
  margin-top: -1px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg); }
.faq-question[aria-expanded="true"] .faq-toggle:before {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg); }
.faq-question[aria-expanded="true"] .faq-toggle:after {
  opacity: 0;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg); }
.faq-answer {
  /* Bootstrap's .collapsing animates height only, so any padding here is applied in full
     from the first frame - the panel pops open by that much before the animation starts,
     then snaps again when height:auto takes over. Keep this box padding-free and put the
     spacing on the inner wrapper instead. */
  padding-bottom: 0; }
.faq-answer-inner {
  padding-bottom: 30px; }
.faq-answer p {
  color: #3B1312;
  opacity: .8;
  font-size: clamp(.85rem, .75vw, 1rem);
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 0; }

/*** CORPORATE ***/
.corporate {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.corporate-bg {
  position: absolute;
  inset: 0;
  z-index: 0; }
.corporate-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: corporate-slide 20s linear infinite; }
.corporate-slide:nth-child(1) { animation-delay: 0s; }
.corporate-slide:nth-child(2) { animation-delay: 4s; }
.corporate-slide:nth-child(3) { animation-delay: 8s; }
.corporate-slide:nth-child(4) { animation-delay: 12s; }
.corporate-slide:nth-child(5) { animation-delay: 16s; }
@keyframes corporate-slide {
  0% { opacity: 0; }
  2% { opacity: 1; }
  18% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; } }
.corporate-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .5) 100%); }
.corporate-lines-tall,
.corporate-lines-tick {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none; }
.corporate-lines-tall {
  top: 0;
  height: 69.05%; }
.corporate-lines-tick {
  top: 69.05%;
  height: 20px; }
.corporate-lines-tall span,
.corporate-lines-tick span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.corporate-lines-tall span:nth-child(1),
.corporate-lines-tick span:nth-child(1) {
  left: 20%; }
.corporate-lines-tall span:nth-child(2),
.corporate-lines-tick span:nth-child(2) {
  left: 40%; }
.corporate-lines-tall span:nth-child(3),
.corporate-lines-tick span:nth-child(3) {
  left: 60%; }
.corporate-lines-tall span:nth-child(4),
.corporate-lines-tick span:nth-child(4) {
  left: 80%; }
.corporate-line-h {
  position: absolute;
  left: 0;
  top: 69.05%;
  width: 100%;
  height: 1px;
  background-color: #F2E5C7;
  opacity: .1;
  z-index: 1;
  pointer-events: none; }
.corporate-container {
  position: relative;
  z-index: 2;
  padding-top: 5rem;
  padding-bottom: 5rem; }
.corporate h2 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: clamp(1rem, 2vw, 2rem); }
.corporate-text {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
.btn-arrow::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("../images/arrow-right.svg") center / contain no-repeat; }
.corporate-trusted {
  padding-top: 100px;
  text-align: center; }
.trusted-marquee {
  width: clamp(260px, 48.07vw, 923px);
  margin-inline: auto;
  overflow: hidden;
  margin-bottom: clamp(20px, 30px, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.trusted-marquee-track {
  display: flex;
  width: max-content;
  animation: trusted-marquee 20s linear infinite; }
@keyframes trusted-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } }
.trusted-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0; }
.trusted-marquee-group img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  opacity: .7;
  margin-right: clamp(40px, 60px, 80px); }
.trusted-caption {
  color: #F2E5C7;
  opacity: .5;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(.7rem, .68vw, .93rem);
  letter-spacing: .65px;
  text-transform: uppercase;
  margin-bottom: 0; }

/*** FOOTER ***/
.footer {
  background-color: #F2E5C7;
  padding-top: clamp(50px, 85px, 120px); }
.footer a {
  text-decoration: none; }
.footer-top {
  margin-bottom:  clamp(50px, 85px, 120px); }
.footer-logo {
  display: inline-block;
  width: clamp(180px, 14vw, 276px);
  height: auto; }
.footer-label {
  color: #B8A68D;
  font-size: 1rem;
  letter-spacing: 2.1px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 30px, 40px); }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0; }
.footer-links li {
  margin-bottom: clamp(10px, 15px, 20px); }
.footer-links li:last-child {
  margin-bottom: 0; }
.footer-links a {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(.9rem, .83vw, 1.14rem);
  line-height: 1.6; }
.footer-links a:hover,
.footer-links a:focus {
  opacity: .75; }
.footer-contact {
  margin-bottom: clamp(10px, 15px, 20px); }
.footer-contact a {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(.9rem, .83vw, 1.14rem);
  line-height: 1.6; }
.footer-contact a:hover,
.footer-contact a:focus {
  opacity: .75; }
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: clamp(20px, 25px, 30px); }
.footer-social-link {
  width: 40px;
  height: 40px; }
.footer-social-link:hover,
.footer-social-link:focus {
  opacity: 0.7; }
.footer-newsletter {
  display: flex;
  gap: .6rem; }
.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1px solid rgba(59, 19, 18, .4);
  border-radius: 5px;
  background: none;
  padding-inline: 1rem;
  color: #3B1312;
  font-family: "Parkinsans", sans-serif;
  font-size: 1rem; }
.footer-newsletter-input::placeholder {
  color: #B8A68D; }
.footer-newsletter-input:focus {
  outline: none;
  border-color: #3B1312; }
.footer-newsletter-btn {
  flex-shrink: 0;
  height: 46px;
  background-color: #3B1312;
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(.9rem, .83vw, 1.14rem);
  border: 0;
  border-radius: 5px;
  padding-inline: 1.07rem; }
.footer-newsletter-btn:hover,
.footer-newsletter-btn:focus {
  opacity: .9; }
.footer-watermark {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(2rem, 4vw, 4.3rem); }
.footer-bottom {
  padding-top: 20px;
  padding-bottom: 20px; }
.footer-copy {
  color: #3B1312;
  opacity: .8;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 0; }
.footer-legal a,
.footer-legal span {
  color: #3B1312;
  opacity: .8;
  font-weight: 400;
  line-height: 1.6;
  font-size: 1rem; }
.footer-legal a:hover,
.footer-legal a:focus {
  opacity: 1; }
.footer-legal span {
  margin: 0 5px; }
.footer-webby {
  display: block;
  margin: 0!important; }
.footer-webby a {
  opacity: 1;
  text-decoration: underline; }


/*** HOMES HERO ***/
.homes-hero-media {
  position: relative;
  overflow: hidden; }
.homes-hero-bg {
  display: block;
  width: 100%;
  height: clamp(280px, 20.4vw, 391px);
  object-fit: cover; }
.homes-hero-bg {
  display: block;
  width: 100%;
  object-fit: cover; }
.homes-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .32) 100%); }
.homes-hero-lines {
  position: absolute;
  inset: 0;
  pointer-events: none; }
.homes-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.homes-hero-lines span:nth-child(1) {
  left: 20%; }
.homes-hero-lines span:nth-child(2) {
  left: 40%; }
.homes-hero-lines span:nth-child(3) {
  left: 60%; }
.homes-hero-lines span:nth-child(4) {
  left: 80%; }
.homes-hero-container {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 3vw, 3.5rem);
  transform: translateX(-50%);
  width: 100%; }
.homes-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.homes-hero p {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }

/*** CORPORATE HERO ***/
.corporate-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.corporate-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
/* .hero on the homepage is min-height:100vh so it can cover with vh maths. This section is
   sized by its own content, so the video is covered against the section instead: hold 16:9
   and grow until both edges are met, letting the overflow be clipped by .corporate-hero. */
.corporate-hero-video {
  border: 0;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
.corporate-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 69.36%, rgba(59, 19, 18, .8) 100%); }
.corporate-hero-lines-tall,
.corporate-hero-lines-tick {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none; }
.corporate-hero-lines-tall {
  top: 0;
  height: 72.28%; }
.corporate-hero-lines-tick {
  top: 72.28%;
  height: 20px; }
.corporate-hero-lines-tall span,
.corporate-hero-lines-tick span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.corporate-hero-lines-tall span:nth-child(1),
.corporate-hero-lines-tick span:nth-child(1) {
  left: 20%; }
.corporate-hero-lines-tall span:nth-child(2),
.corporate-hero-lines-tick span:nth-child(2) {
  left: 40%; }
.corporate-hero-lines-tall span:nth-child(3),
.corporate-hero-lines-tick span:nth-child(3) {
  left: 60%; }
.corporate-hero-lines-tall span:nth-child(4),
.corporate-hero-lines-tick span:nth-child(4) {
  left: 80%; }
.corporate-hero-line-h {
  position: absolute;
  left: 0;
  top: 72.28%;
  width: 100%;
  height: 1px;
  background-color: #F2E5C7;
  opacity: .1;
  z-index: 2;
  pointer-events: none; }
.corporate-hero-container {
  position: relative;
  z-index: 3;
  padding-top: clamp(10rem, 10.73vw, 14.71rem);
  padding-bottom: clamp(20px, 1.7vw, 40px); }
.corporate-hero-eyebrow {
  color: #B8A68D;
  font-weight: 400;
  font-size: clamp(.85rem, .73vw, 1rem);
  letter-spacing: 2.1px;
  text-transform: uppercase;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.corporate-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 6.86rem);
  line-height: 1.1;
  max-width: 55.14rem;
  margin-bottom: 0;
  word-break: break-word; }
.corporate-hero-text {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.04vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: clamp(1.5rem, 5.42vw, 7.43rem); }
.corporate-hero-trusted {
  margin-top: clamp(4rem, 13.28vw, 18.21rem);
  text-align: center; }
.corporate-hero-trusted-caption {
  color: #F2E5C7;
  opacity: .5;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(.7rem, .68vw, .93rem);
  letter-spacing: .65px;
  text-transform: uppercase;
  margin-bottom: clamp(1.25rem, 2.08vw, 2.88rem); }

/*** CORPORATE FEATURES ***/
.corporate-features {
  background-color: #F2E5C7;
  padding-top: 5rem;
  padding-bottom: 5rem; }
.corporate-features-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px; }
.corporate-features-eyebrow img {
  width: 24px;
  height: 24px;
  flex-shrink: 0; }
.corporate-features-eyebrow span {
  color: #3B1312;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 2.1px;
  text-transform: uppercase; }
.corporate-features h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.corporate-features-list-row {
  margin-top: clamp(3rem, 7.29vw, 10rem); }
.corporate-feature-row {
  border-top: 1px solid rgba(59, 19, 18, .1);
  padding-top: 2.2rem;
  padding-bottom: 2.2rem; }
.corporate-feature-row:last-child {
  padding-bottom: 0; }
.corporate-feature-title {
  color: #3B1312;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem);
  line-height: 1;
  margin-bottom: 0; }
.corporate-feature-text {
  color: #3B1312;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }

/*** CORPORATE STEPS ***/
.corporate-steps {
  background: linear-gradient(225deg, rgba(242, 229, 199, .1) 0%, rgba(242, 229, 199, 0) 66.48%), #3B1312;
  padding-top: 5rem;
  padding-bottom: 5rem; }
.corporate-steps-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(2.2rem, 4.5vw, 4.29rem); }
.corporate-steps-eyebrow img {
  width: 24px;
  height: 24px;
  flex-shrink: 0; }
.corporate-steps-eyebrow span {
  color: #F2E5C7;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 2.1px;
  text-transform: uppercase; }
.corporate-steps h2 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.corporate-steps-row {
  margin-top: clamp(4rem, 7.5vw, 10rem);
  --bs-gutter-x: 0; }
.corporate-step {
  border-left: 1px solid rgba(242, 229, 199, .1);
  padding-left: clamp(2.2rem, 4.5vw, 4.29rem);
  padding-right: clamp(2.2rem, 4.5vw, 4.29rem);}
.corporate-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(242, 229, 199, .05);
  border-radius: 5px;
  color: #F2E5C7;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase;
  margin-bottom: clamp(2.2rem, 4.5vw, 4.29rem); }
.corporate-step-title {
  color: #F2E5C7;
  font-size: clamp(1.2rem, 1.56vw, 2.14rem);
  line-height: 1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.corporate-step-text {
  color: #F2E5C7;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  max-width: 29.93rem;
  margin-bottom: 0; }

/*** CORPORATE QUESTIONS ***/
.corporate-questions {
  background-color: #F2E5C7;
  padding-top: 5rem;
  padding-bottom: 5rem; }
.corporate-questions h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  max-width: 37.14rem;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.corporate-questions-text {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  max-width: 27.36rem;
  margin-bottom: clamp(1.4rem, 1.5vw, 2.86rem); }

/*** CORPORATE CTA ***/
.cta,
.corporate-cta {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.cta-bg,
.corporate-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.cta-overlay ,
.corporate-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .5) 100%); }
.cta-lines,
.corporate-cta-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
  .cta-lines span,
.corporate-cta-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.cta-lines span:nth-child(1),
.corporate-cta-lines span:nth-child(1) {
  left: 20%; }
  .cta-lines span:nth-child(2),
.corporate-cta-lines span:nth-child(2) {
  left: 40%; }
.cta-lines span:nth-child(3),
.corporate-cta-lines span:nth-child(3) {
  left: 60%; }
.cta-lines span:nth-child(4),
.corporate-cta-lines span:nth-child(4) {
  left: 80%; }
.cta-container,
.corporate-cta-container {
  position: relative;
  z-index: 2;
  padding-top: 90px;
  padding-bottom: 90px; }
.cta h2,
.corporate-cta h2 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.cta p,
.corporate-cta p {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin: 0; }
/* Selector has to out-weigh ".corporate-cta p" above, which is (0,1,1) and would otherwise
   win on font-size and margin - the contact line is a <p> too. */
.corporate-cta p.corporate-cta-contact {
  color: #F2E5C7;
  font-size: clamp(.85rem, .73vw, 1rem);
  letter-spacing: 2.1px;
  text-transform: uppercase;
  width: 100%;
  margin-right: 0;
  margin-top: clamp(2.5rem, 3.13vw, 4.29rem);
  margin-bottom: 0; }
/* The address and number are links so they can be tapped on a phone, but they are set as
   plain text in the design - without this they take the browser's default blue underline. */
.corporate-cta-contact a {
  color: inherit;
  text-decoration: none; }
.corporate-cta-contact a:hover,
.corporate-cta-contact a:focus-visible {
  text-decoration: underline; }
.corporate-cta-sep {
  display: inline-block;
  margin-inline: .7em;
  opacity: .8; }

/*** FAQ HERO ***/
.faq-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.faq-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.faq-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 100%); }
.faq-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
.faq-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.faq-hero-lines span:nth-child(1) {
  left: 20%; }
.faq-hero-lines span:nth-child(2) {
  left: 40%; }
.faq-hero-lines span:nth-child(3) {
  left: 60%; }
.faq-hero-lines span:nth-child(4) {
  left: 80%; }
.faq-hero-container {
  position: relative;
  z-index: 2;
  padding-top: clamp(10rem, 12.55vw, 17.21rem);
  padding-bottom: clamp(2rem, 4.69vw, 6.43rem); }
.faq-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.faq-hero-text {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }

/*** CONTACT HERO ***/
/* Same image/overlay/lines build as .faq-hero, but centred, with the scroll arrow from
   the homepage hero leading down to the form. */
.contact-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.contact-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.contact-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 69.36%, rgba(59, 19, 18, .8) 100%); }
.contact-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
.contact-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.contact-hero-lines span:nth-child(1) {
  left: 20%; }
.contact-hero-lines span:nth-child(2) {
  left: 40%; }
.contact-hero-lines span:nth-child(3) {
  left: 60%; }
.contact-hero-lines span:nth-child(4) {
  left: 80%; }
.contact-hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(10rem, 12.55vw, 17.21rem);
  padding-bottom: clamp(2rem, 4.17vw, 5.71rem); }
.contact-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 6.86rem);
  line-height: 1;
  margin-bottom: clamp(1.25rem, 2.08vw, 2.86rem); }
.contact-hero-text {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  max-width: clamp(280px, 27.08vw, 37.14rem);
  margin-bottom: 0; }
.contact-hero-scroll {
  display: block;
  margin-top: clamp(2.5rem, 7.29vw, 10rem); }
.contact-hero-scroll img {
  display: block;
  width: 40px;
  height: 40px; }
.contact-hero-scroll:hover img,
.contact-hero-scroll:focus-visible img {
  opacity: .7; }

/*** CONTACT ***/
/* Two tones split down the middle of the viewport: the details sit on the page colour and
   the form on the lighter one. On desktop the section paints the split itself; stacked, the
   form column carries its own colour out to both edges of the screen. */
.contact {
  background-color: #F2E5C7;
  padding-top: clamp(4rem, 7.29vw, 10rem); }
.contact-detail {
  margin-bottom: clamp(2.5rem, 2.92vw, 4rem); }
.contact-detail:last-child {
  margin-bottom: 0; }
.contact-detail-label {
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem);
  color: #B8A68D;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase; }
.contact-detail-value {
  margin-bottom: 0;
  color: #3B1312;
  font-size: clamp(1.25rem, 1.25vw, 1.71rem);
  font-style: normal;
  line-height: 1.2; }
.contact-detail-value a {
  color: inherit;
  text-decoration: none; }
.contact-detail-value a:hover,
.contact-detail-value a:focus-visible {
  text-decoration: underline; }
.contact-detail .footer-social {
  margin-top: 0; }
.contact-form-col {
  background-color: #FAF5E9;
  box-shadow: 0 0 0 100vmax #FAF5E9;
  clip-path: inset(0 -100vmax);
  margin-top: clamp(4rem, 7.29vw, 10rem);
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.contact-form-title {
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem);
  color: #3B1312;
  font-family: "Parkinsans", sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.67vw, 2.29rem);
  line-height: 1; }
.contact-form-intro {
  margin-bottom: clamp(1.5rem, 2.08vw, 2.86rem);
  color: #3B1312;
  opacity: .8;
  font-size: 1.14rem;
  line-height: 1.6; }
.contact-label {
  display: block;
  margin-bottom: clamp(.5rem, .52vw, .71rem);
  color: #B8A68D;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .7px;
  text-transform: uppercase; }
.contact-input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem);
  border: 1px solid #B8A68D;
  border-radius: 12px;
  background-color: #fff;
  padding: 10px 20px;
  color: #3B1312;
  font-family: inherit;
  font-size: .93rem; }
.contact-input::placeholder {
  color: #3B1312;
  opacity: .4; }
.contact-input:focus {
  outline: 0;
  border-color: #3B1312; }
.contact-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('/assets/images/arrow-select-modal-dark.svg');
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 46px; }
.contact-textarea {
  min-height: 140px;
  padding-top: 16px;
  resize: vertical; }
.contact-row {
  --bs-gutter-x: 30px; }
.contact-callback {
  margin-top: clamp(.75rem, 1.56vw, 2.14rem);
  border-radius: 12px;
  background-color: rgba(59, 19, 18, .05);
  padding: clamp(.75rem, 1.04vw, 1.43rem); }
.contact-callback-toggle {
  opacity: 1; }
.contact-callback-fields {
  margin-top: clamp(.75rem, 1.04vw, 1.43rem); }
/* .row is display:flex, which beats the hidden attribute */
.contact-callback-fields[hidden] {
  display: none; }
.contact-callback-fields .contact-input {
  margin-bottom: 0; }
@media (max-width: 575.98px) {
  .contact-callback-fields .col-12 + .col-12 {
    margin-top: 20px; } }
.contact-smallprint {
  margin-block: clamp(.75rem, 1.56vw, 2.14rem);
  color: #B8A68D;
  font-size: .93rem;
  line-height: 1.4; }
.contact-smallprint a {
  color: #3B1312; }
.contact-submit {
  display: block;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 5px;
  background-color: #7C95A9;
  color: #F2E5C7;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.29rem;
  line-height: 1.4;
  transition: background-color .2s; }
.contact-submit:hover,
.contact-submit:focus-visible {
  background-color: #3B1312; }
/* the thank-you that replaces the contact and call back forms once sent; it takes the colour of
   the card it sits on, so it reads on the light contact form and the dark call back card alike */
.form-done {
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6; }
@media (min-width: 992px) {
  .contact {
    background: linear-gradient(90deg, #F2E5C7 50%, #FAF5E9 50%);
    padding-bottom: clamp(4rem, 7.29vw, 10rem); }
  .contact-form-col {
    background: none;
    box-shadow: none;
    clip-path: none;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0; } }

/*** CONTACT - LOOKING FOR SOMETHING ELSE ***/
/* Built on .cta for the image, overlay and lines; only the centred heading and the glass
   cards are its own. */
.contact-more .cta-overlay {
  background: linear-gradient(90deg, rgba(59, 19, 18, .8) 50%, rgba(59, 19, 18, .5) 100%); }
.contact-more-container {
  text-align: center;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.contact-more h2 {
  margin-bottom: clamp(1rem, 1.56vw, 2.14rem); }
.contact-more p.contact-more-text {
  width: 100%;
  margin-inline: auto; }
@media (min-width: 768px) {
  .contact-more p.contact-more-text {
    width: 50%; } }
@media (min-width: 1200px) {
  .contact-more p.contact-more-text {
    width: 23.64%; } }
.contact-more-cards {
  --bs-gutter-x: 30px;
  margin-top: clamp(2.5rem, 4.17vw, 5.71rem);
  text-align: left; }
.contact-more-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(242, 229, 199, .15);
  border-radius: 30px;
  background-color: rgba(242, 229, 199, .05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: clamp(2rem, 3.13vw, 4.29rem) clamp(1.75rem, 2.08vw, 2.86rem); }
.contact-more-card h3 {
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem);
  color: #F2E5C7;
  font-family: "Parkinsans", sans-serif;
  font-weight: 400;
  font-size: clamp(1.43rem, 1.25vw, 1.71rem);
  line-height: 1; }
.contact-more .contact-more-card p {
  margin: 0 0 clamp(.75rem, 1.56vw, 2.14rem);
  opacity: .8;
  font-size: 1.14rem; }
.contact-more-card a {
  margin-top: auto;
  color: #F2E5C7;
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.6; }
.contact-more-card a:hover,
.contact-more-card a:focus-visible {
  opacity: .7; }

/*** LET YOUR PROPERTY - HERO ***/
.lyp-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.lyp-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
/* darker down the left, where the heading sits, on top of the usual top-and-bottom fade */
.lyp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(270deg, rgba(59, 19, 18, 0) 57.21%, rgba(59, 19, 18, .8) 100%),
    linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 69.36%, rgba(59, 19, 18, .8) 100%); }
.lyp-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
.lyp-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.lyp-hero-lines span:nth-child(1) {
  left: 20%; }
.lyp-hero-lines span:nth-child(2) {
  left: 40%; }
.lyp-hero-lines span:nth-child(3) {
  left: 60%; }
.lyp-hero-lines span:nth-child(4) {
  left: 80%; }
.lyp-hero-container {
  position: relative;
  z-index: 2;
  padding-top: clamp(10rem, 17.76vw, 24.36rem);
  padding-bottom: clamp(3rem, 12.66vw, 17.36rem); }
.lyp-hero-eyebrow {
  color: #B8A68D;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 1.56vw, 2.14rem); }
.lyp-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 6.86rem);
  line-height: 1;
  margin-bottom: 0; }
.lyp-hero-text {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-hero-callback {
  color: #B8A68D;
  font-size: 1.29rem;
  line-height: 1.6;
  margin: clamp(1rem, 1.56vw, 2.14rem) 0 0; }
.lyp-hero-callback a {
  color: #F2E5C7;
  font-weight: 700; }
.lyp-hero-callback a:hover,
.lyp-hero-callback a:focus-visible {
  opacity: .8; }

/*** LET YOUR PROPERTY - WHY CHOOSE MERIDIAN ***/
/* the eyebrow is the compass one from the corporate page (.corporate-features-eyebrow) */
.lyp-why {
  background-color: #F2E5C7;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.lyp-why h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.lyp-why-text {
  margin-top: clamp(2rem, 4.17vw, 5.71rem); }
.lyp-why-text p {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem); }
.lyp-why-text p:last-child {
  margin-bottom: 0; }
@media (min-width: 992px) {
  .lyp-why-text {
    width: 70.5%; } }

/*** LET YOUR PROPERTY - STAY LENGTH ***/
.lyp-stay {
  background: linear-gradient(218.32deg, rgba(242, 229, 199, .1) 0%, rgba(242, 229, 199, 0) 66.48%), #3B1312;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
/* The dial is a 3x3 grid: the circle in the middle cell, a label on each side of it. The side
   columns are only as wide as their text, so all the spare room goes to the circle (up to the
   design's 383px), and the grid is centred in the 657px box the dial has in the design. */
.lyp-dial {
  display: grid;
  grid-template-columns: max-content minmax(0, 383px) max-content;
  justify-content: center;
  max-width: 46.93rem;
  align-items: center;
  gap: clamp(.75rem, 1.04vw, 1.43rem); }
.lyp-dial-label {
  color: #B8A68D;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap; }
.lyp-dial-top,
.lyp-dial-bottom {
  grid-column: 2;
  text-align: center; }
.lyp-dial-left {
  grid-column: 1;
  text-align: right; }
.lyp-dial-right {
  grid-column: 3; }
.lyp-dial-circle {
  position: relative;
  grid-column: 2;
  aspect-ratio: 1; }
.lyp-dial-circle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; }
.lyp-dial-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #F2E5C7;
  text-align: center; }
.lyp-dial-nights {
  margin-bottom: clamp(.5rem, .52vw, .71rem);
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1; }
.lyp-dial-to {
  margin-bottom: 0;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6; }
.lyp-stay h2 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.lyp-stay-text {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
@media (max-width: 575.98px) {
  .lyp-dial {
    gap: 12px; }
  .lyp-dial-label {
    font-size: .79rem; } }
@media (min-width: 992px) {
  .lyp-stay-text {
    width: 78.8%; } }

/*** LET YOUR PROPERTY - HOW IT WORKS ***/
.lyp-how {
  --lyp-step-gap: clamp(3rem, 5.21vw, 7.14rem);
  background-color: #F2E5C7;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.lyp-how h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.lyp-how-text {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
.lyp-steps {
  margin: 0;
  padding: 0;
  list-style: none; }
.lyp-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-step + .lyp-step {
  margin-top: var(--lyp-step-gap); }
/* the line down to the next number, stopping 10px short of both badges */
.lyp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: calc(10px - var(--lyp-step-gap));
  left: 20px;
  width: 1px;
  background-color: #3B1312;
  opacity: .1; }
.lyp-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(59, 19, 18, .05);
  color: #3B1312;
  font-size: .93rem;
  line-height: 1;
  letter-spacing: .65px; }
.lyp-step-title {
  color: #3B1312;
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.lyp-step-text {
  color: #3B1312;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
@media (max-width: 575.98px) {
  .lyp-step {
    column-gap: 20px; }
  .lyp-step-title {
    margin-bottom: 15px; } }
/* the heading stays in view while the steps scroll past it */
@media (min-width: 992px) {
  .lyp-how-intro {
    position: sticky;
    top: clamp(4rem, 7.29vw, 10rem); }
  .lyp-step-text {
    width: 71.2%; } }

/*** LET YOUR PROPERTY - OWNER GUIDE ***/
/* Built on .cta for the image, overlay and lines, like .contact-more. The eyebrow is the light
   compass one from the corporate steps (.corporate-steps-eyebrow). */
.lyp-guide .cta-overlay {
  background: linear-gradient(90deg, rgba(59, 19, 18, .8) 50%, rgba(59, 19, 18, .5) 100%); }
.lyp-guide-container {
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.lyp-guide .corporate-steps-eyebrow {
  margin-bottom: clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-guide h2 {
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.lyp-guide p.lyp-guide-text {
  margin: 0 0 clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-tips {
  border: 1px solid rgba(242, 229, 199, .15);
  border-radius: 30px;
  background-color: rgba(242, 229, 199, .05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: clamp(2rem, 3.13vw, 4.29rem); }
/* every tip sits in the same grid cell, so the card is as tall as the longest one and does not
   jump when they change */
.lyp-tips-slides {
  display: grid; }
.lyp-tip {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s; }
.lyp-tip.is-active {
  opacity: 1;
  visibility: visible; }
.lyp-guide p.lyp-tip-title {
  margin: 0 0 clamp(.75rem, 1.56vw, 2.14rem);
  color: #F2E5C7;
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1; }
.lyp-guide p.lyp-tip-text {
  margin: 0;
  opacity: .8; }
.lyp-tips-dots {
  display: flex;
  gap: 12px;
  margin-top: clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-tips-dot {
  position: relative;
  width: 60px;
  height: 40px;
  border: 0;
  padding: 0;
  background: none;
  opacity: .4;
  cursor: pointer;
  transition: opacity .3s; }
.lyp-tips-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 2px;
  background-color: #F2E5C7; }
.lyp-tips-dot.is-active,
.lyp-tips-dot:hover,
.lyp-tips-dot:focus-visible {
  opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lyp-tip {
    transition: none; } }
@media (min-width: 992px) {
  .lyp-tips {
    width: 84.4%; }
  .lyp-tips-slides {
    width: 88.5%; } }

/*** LET YOUR PROPERTY - REGISTER ***/
/* Built on .cta like .lyp-guide. The call-back form borrows the contact form's fields and
   button (.contact-label, .contact-input, .contact-submit) and dresses them for a dark card. */
.lyp-register .cta-overlay {
  background: linear-gradient(90deg, rgba(59, 19, 18, .8) 50%, rgba(59, 19, 18, .5) 100%); }
.lyp-register-container {
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.lyp-register h2 {
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.lyp-register p.lyp-register-text {
  margin: 0 0 clamp(1.5rem, 2.08vw, 2.86rem); }
.lyp-callback {
  border: 1px solid rgba(242, 229, 199, .15);
  border-radius: 30px;
  background-color: rgba(242, 229, 199, .05);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: clamp(2rem, 3.13vw, 4.29rem); }
.lyp-register p.lyp-callback-title {
  margin: 0 0 clamp(.75rem, 1.04vw, 1.43rem);
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1; }
.lyp-register p.lyp-callback-intro {
  margin: 0 0 clamp(1.5rem, 2.08vw, 2.86rem);
  opacity: .8; }
/* the thank-you after a call back is sent fills the card; ".cta p" would otherwise take
   half its width away with margin-right: 50% */
.lyp-register p.form-done {
  margin: 0; }
.lyp-callback .contact-input {
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem);
  border-color: rgba(242, 229, 199, .1);
  border-radius: 5px;
  background-color: rgba(242, 229, 199, .05);
  color: #F2E5C7; }
.lyp-callback .contact-input::placeholder {
  color: #F2E5C7; }
.lyp-callback .contact-input:focus {
  border-color: #F2E5C7;
  background-color: rgba(242, 229, 199, .1); }
.lyp-callback .contact-select {
  background-image: url('/assets/images/arrow-select.svg'); }
/* the open list is drawn by the browser on a light background, so the options go back to dark */
.lyp-callback .contact-select option {
  color: #3B1312; }
/* 40px above the button whatever the last field is. The field's 30px below and this collapse
   into the larger of the two, so this carries the whole 40px. */
.lyp-callback .contact-submit {
  margin-top: clamp(1.5rem, 2.08vw, 2.86rem); }
@media (min-width: 992px) {
  .lyp-callback {
    width: 84.4%; } }

/*** OWNER GUIDE ***/
/* The hero is .lyp-hero; the numbers on the cards are .lyp-step-badge from "How it works". */
/* Bootstrap's .breadcrumb, in the eyebrow's type: the link is light, the current page and the
   "/" Bootstrap puts between them stay sandstone */
.og-breadcrumb {
  --bs-breadcrumb-divider-color: #B8A68D;
  --bs-breadcrumb-item-active-color: #B8A68D;
  --bs-breadcrumb-item-padding-x: .5em; }
.og-breadcrumb a {
  color: #F2E5C7;
  text-decoration: none; }
.og-breadcrumb a:hover,
.og-breadcrumb a:focus-visible {
  text-decoration: underline; }
/* the compass is already cropped at the right-hand edge, so it just sits against it */
.og-content {
  background: #F2E5C7 url('/assets/images/content-bg.png') right 0 top 18.23vw / 33.54vw auto no-repeat;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.og-intro {
  text-align: center;
  margin-bottom: clamp(4rem, 7.29vw, 10rem); }
.og-intro h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin: 0 auto clamp(1.5rem, 2.08vw, 2.86rem); }
.og-intro p {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin: 0 auto; }
.og-card + .og-card {
  margin-top: clamp(4rem, 7.29vw, 10rem); }
.og-card-media {
  border-radius: 30px;
  background-color: rgba(59, 19, 18, .05);
  padding: clamp(1rem, 1.56vw, 2.14rem); }
.og-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 633;
  object-fit: cover;
  border-radius: 12px; }
.og-card-title {
  margin: clamp(.75rem, 1.56vw, 2.14rem) 0;
  color: #3B1312;
  font-family: "Parkinsans", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1.2; }
.og-card-text {
  margin-bottom: clamp(1.5rem, 2.08vw, 2.86rem); }
.og-card-text p {
  color: #3B1312;
  opacity: .8;
  font-size: 1rem;
  line-height: 2;
  margin-bottom: clamp(.75rem, 1.04vw, 1.43rem); }
.og-card-text p:last-child {
  margin-bottom: 0; }
.og-checklist {
  margin: 0;
  padding: 0;
  list-style: none; }
.og-checklist li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #3B1312;
  font-size: .93rem;
  line-height: 1;
  letter-spacing: .65px;
  text-transform: uppercase; }
.og-checklist li + li {
  margin-top: clamp(.75rem, 1.04vw, 1.43rem); }
.og-checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url('/assets/images/check.svg') center / contain no-repeat; }
@media (min-width: 992px) {
  .og-intro h2 {
    width: 55%; }
  .og-intro p {
    width: 40.6%; } }
@media (min-width: 1550px) {
  .og-intro h2 {
    width: 49%; } }

/*** ABOUT - HERO ***/
/* .lyp-hero with the plain top-to-bottom fade - no darker left edge on this one */
.about-hero .lyp-hero-overlay {
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 69.36%, rgba(59, 19, 18, .8) 100%); }

/*** ABOUT - A HOME, NOT A HOTEL ROOM ***/
/* The section is .lyp-why from "Let your property"; only the text under the heading differs,
   split into two columns here. The gutter is the 80px gap between them in the design. */
.about-why-cols {
  --bs-gutter-x: clamp(2rem, 4.17vw, 5.71rem);
  row-gap: clamp(.75rem, 1.04vw, 1.43rem);
  margin-top: clamp(2rem, 4.17vw, 5.71rem); }
.about-why-cols p {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }

/*** ABOUT - FACTS ***/
.about-facts {
  background: linear-gradient(204.14deg, rgba(242, 229, 199, .1) 0%, rgba(242, 229, 199, 0) 66.48%), #3B1312;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.about-facts .row {
  row-gap: clamp(2.5rem, 3.13vw, 4.29rem); }
.about-fact {
  color: #F2E5C7;
  text-align: center; }
.about-fact img {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto clamp(.75rem, 1.56vw, 2.14rem); }
.about-fact-label {
  margin-bottom: clamp(.25rem, .52vw, .71rem);
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6; }
.about-fact-value {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.67vw, 2.29rem);
  line-height: 1; }

/*** ABOUT - LIFE CAN BE UNPREDICTABLE ***/
/* The three columns are the corporate page's steps (.corporate-steps-row, .corporate-step and
   its badge, title and text), which are sized exactly the same; they sit on a dark background
   there, so only the colours are turned round for this light one. */
.about-life {
  background-color: #F2E5C7;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.about-life h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.about-life-text {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
.about-life .corporate-step {
  border-left-color: rgba(59, 19, 18, .1); }
/* the right-hand line is only drawn from 1024px, by .corporate-step:last-child further down */
.about-life .corporate-step:last-child {
  border-right-color: rgba(59, 19, 18, .1); }
.about-life .corporate-step-badge {
  background-color: rgba(59, 19, 18, .05);
  color: #3B1312; }
.about-life .corporate-step-title,
.about-life .corporate-step-text {
  color: #3B1312; }
/* 32px in this design, where the corporate steps top out at 30px */
.about-life .corporate-step-title {
  font-size: clamp(1.5rem, 1.67vw, 2.29rem); }

/*** ABOUT - WHAT'S IN EVERY HOME ***/
.about-amenities {
  background: linear-gradient(217.1deg, rgba(242, 229, 199, .1) 0%, rgba(242, 229, 199, 0) 66.48%), #3B1312;
  padding-top: clamp(4rem, 7.29vw, 10rem);
  padding-bottom: clamp(4rem, 7.29vw, 10rem); }
.about-amenities-intro {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4.17vw, 5.71rem); }
.about-amenities-intro h2 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.about-amenities-intro p {
  width: 100%;
  margin: 0 auto;
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6; }
@media (min-width: 768px) {
  .about-amenities-intro p {
    width: 50%; } }
@media (min-width: 1200px) {
  .about-amenities-intro p {
    width: 32.1%; } }
/* The same moving strip as .trusted-marquee on the corporate page: each row holds its list
   twice and slides by half its width, so the second copy lands where the first began and the
   loop has no seam. The second row runs the other way. Edges fade out like the design's mask. */
.about-amenities-marquee {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.56vw, 2.14rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.about-amenities-track {
  display: flex;
  width: max-content;
  animation: about-amenities 45s linear infinite; }
.about-amenities-row.is-reverse .about-amenities-track {
  animation-direction: reverse; }
.about-amenities-marquee:hover .about-amenities-track {
  animation-play-state: paused; }
@keyframes about-amenities {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } }
.about-amenities-group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none; }
.about-amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(3.5rem, 4.17vw, 5.71rem);
  margin-right: clamp(1rem, 1.56vw, 2.14rem);
  border-radius: 30px;
  background-color: rgba(242, 229, 199, .05);
  padding-inline: clamp(1.5rem, 2.08vw, 2.86rem);
  color: #B8A68D;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  white-space: nowrap;
  transition: color .2s; }
.about-amenity:hover {
  color: #F2E5C7; }
/* the icon is painted in the text colour through the svg, so it lights up with the text */
.about-amenity-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) {
  .about-amenities-track {
    animation: none; } }

/*** ABOUT - MANAGED BY ISLAND ESCAPES ***/
/* The homes underneath are the homepage's own section (.homes), as it is there, plus the top
   padding it needs on this page - it has none on the homepage, where the compass row starts it. */
.about-managed {
  background-color: #F2E5C7;
  padding-top: clamp(4rem, 7.29vw, 10rem); }
.about-managed-intro {
  text-align: center;
  margin-bottom: clamp(3rem, 6.25vw, 8.57rem); }
.about-managed-intro .corporate-features-eyebrow {
  justify-content: center;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem); }
.about-managed-intro h2 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
/* one card sits centred at half width; more wrap two to a row, still centred */
.about-managed-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 2.08vw, 2.86rem); }
.about-managed-card {
  width: 100%;
  border-radius: 30px;
  background-color: rgba(59, 19, 18, .05);
  padding: clamp(2rem, 4.17vw, 5.71rem);
  text-align: center; }
.about-managed-card img {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto clamp(1.5rem, 2.08vw, 2.86rem); }
.about-managed-card p {
  margin-bottom: 0;
  color: #3B1312;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6; }
.about-managed-divider {
  margin: clamp(4rem, 7.29vw, 10rem) 0 0;
  border: 0;
  border-top: 1px solid #3B1312;
  opacity: .1; }
.about-managed + .homes {
  padding-top: clamp(4rem, 7.29vw, 10rem); }
@media (min-width: 992px) {
  .about-managed-card {
    width: calc(50% - clamp(1.5rem, 2.08vw, 2.86rem) / 2); } }

/*** FAQ SEARCH ***/
.faq-search-wrap {
  max-width: clamp(280px, 24.27vw, 33.29rem);
  margin-bottom: 40px; }
/* stacked under the categories on smaller screens, so it spans the column like they do */
@media (max-width: 991.98px) {
  .faq-search-wrap {
    max-width: none; }
}
.faq-search {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 46px;
  background-color: rgba(255, 255, 255, .6);
  border: 1px solid #B8A68D;
  border-radius: 12px;
  padding-inline: 20px; }
.faq-search.has-value {
  background-color: #fff; }
.faq-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.faq-search-input,
.blog-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: #3B1312;
  font-size: .93rem;
  font-family: inherit; }
.faq-search-input:focus,
.blog-search-input:focus {
  outline: none; }
.faq-search-input::placeholder,
.blog-search-input::placeholder {
  color: #3B1312;
  opacity: .4; }
.faq-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: none;
  border: 0;
  padding: 0; }
.faq-search-clear img {
  width: 16px;
  height: 16px; }
.faq-search-count {
  display: none;
  color: #3B1312;
  opacity: .6;
  font-size: .93rem;
  line-height: 1;
  font-weight: 400;
  margin-top: 20px; }

/*** FAQ LINK ***/
.faq-item {
  position: relative; }

.faq-link {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  right: 47px;
  width: 35px;
  height: 35px;
  background: none;
  border: 0;
  padding: 0; }
.faq-question[aria-expanded="true"] ~ .faq-link {
  display: flex; }

/*** PROPERTY HEADER ***/
.page-property-detail .header {
  background-color: #3B1312; }
.property-header {
  background-color: #F2E5C7;
  padding-top: 10rem;
  padding-bottom: 1.5rem;  }
.property-header h1 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 20px; }
.property-location {
  color: #B8A68D;
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 0; }
.cont-head {
  border-top: 1px solid rgba(59, 19, 18, .1);
  border-bottom: 1px solid rgba(59, 19, 18, .1);
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 20px;
  padding-bottom: 20px; }
.property-header .listing-card-price {  
  margin: 0; }
.property-header-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  color: #3B1312;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase; }
.property-header-features img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.property-header-features span {
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.property-header-actions {
  display: inline-flex;
  gap: 20px; }
.property-header-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: #3B1312;
  opacity: .8;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase; }
.property-header-action img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.property-header-action:hover,
.property-header-action:focus {
  opacity: 1; }

/*** PROPERTY GALLERY ***/
.property-gallery {
  background-color: #F2E5C7;
  padding-bottom: clamp(3rem, 5vw, 5rem); }
.property-gallery-main {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1070 / 713;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer; }
.property-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover; }
.property-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%; }
.property-gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  flex: 1;
  aspect-ratio: 520 / 341;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer; }
.property-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; }
.property-gallery-all {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; }
.property-gallery-dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 3px; }
.property-gallery-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff; }
.property-gallery-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .8);
  color: #3B1312;
  font-weight: 500;
  line-height: 1.6;
  font-size: 1.14rem;
  padding: 11px 20px;
  border-radius: 5px; }


/*** 404 ***/
body.e404 {
  background-color: #2E0E0D; }
body.e404 h1 {
  color: #B8A68D;
  font-size: 3.5rem;
  margin: 2rem 0; }
body.e404 p,
body.e404 a {
  color: #B8A68D; }
body.e404 a:hover,
body.e404 a:focus {
  color: #F2E5C7; }
.fill-viewport {
  height: 100vh; }

/*** LEGALS ***/
.hero-legals {
  background-color: #2E0E0D;
  padding-top: 150px;
  padding-bottom: 50px; }
.hero-legals h1 {
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  color: #F2E5C7; }
.hero-legals .title {
  color: #B8A68D; 
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  letter-spacing: 0.65px;
  text-transform: uppercase;}
.legalsPage .cont {
  background-color: rgba(242, 229, 199, 0.5);
  padding: 50px 0; }
.legalsPage .cont h2 {
  line-height: 1;
  font-size: 25px;
  margin-top: 45px;
  margin-bottom: 15px; }
.legalsPage .cont h2:first-child {
  margin-top: 0; }
.legalsPage .cont h3 {
  line-height: 1;
  font-size: 19px;
  margin-top: 35px;
  margin-bottom: 15px; }
.legalsPage .cont ul  {
  padding-left: 15px; }
  
@media (max-width: 1199.98px) {
  .property-gallery-all-btn {
    font-size: .85rem;
    padding: 8px 14px; }
}

@media (max-width: 767.98px) {
  .property-top {
    display: flex;
    flex-direction: column; }
  .property-gallery {
    order: -1;
    padding-top: 10rem; }
  .property-header {
    padding-top: 0; }
}

/*** PROPERTY CONTENT ***/
.property-content {
  background-color: #F2E5C7;
  padding-bottom: 3.5rem; }
.property-content h2:first-child {
  margin-top: 0; }
.property-content h2 {
  color: #3B1312;
  font-weight: 400;
  font-size: clamp(2rem, 2vw, 2.29rem);
  line-height: 1;
  margin-top: clamp(1.5rem, 2.6vw, 3.4rem);
  margin-bottom: clamp(.75rem, 1.1vw, 1.5rem); }
.property-about h2 {
  margin-top: 0; }
.property-about p {
  color: #3B1312;
  opacity: .8;
  font-size: 1rem;
  line-height: 1.8; }
.property-included-list {
  list-style: none;
  margin: 0;
  padding: 0; }
.property-included-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid rgba(59, 19, 18, .1);
  padding-block: 20px;
  line-height: 1;
  font-weight: 400;
  color: #3B1312;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase; }
.property-included-list li:last-child {
  border-bottom: 1px solid rgba(59, 19, 18, .1); }
.property-included-list img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
/* The sidebar used to be the sticky element. With the calendar beneath it, a sticky box
   detaches from its flow position and rides down over its sibling, so the pair is wrapped
   and the wrapper sticks instead - they now travel together.
   The cap matters: stuck to the top of a short viewport, anything past the fold - the bottom
   of the calendar - was unreachable until you had scrolled the whole description. It only
   engages when the pair genuinely does not fit. */
.property-aside {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain; }
.property-sidebar {
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(242, 229, 199, 0.40) 0%, rgba(242, 229, 199, 0.40) 100%), #FFF;
  padding: 28px; }
.property-sidebar-tags {
  margin-top: 1.43rem; }
.property-sidebar .btn-view-details {
  margin-top: 10px; }

/*** GALLERY MODAL ***/
.gallery-modal .modal-content {
  border: 0;
  border-radius: 0;
  background-color: #F2E5C7; }
.gallery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 7vw, 150px); }
.gallery-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  color: #3B1312;
  font-size: 1rem;
  font-weight: 500; }
.gallery-modal-close img {
  width: 16px;
  height: 16px; }
.gallery-modal-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(59, 19, 18, .05);
  border: 0;
  border-radius: 5px; }
.gallery-modal-share img {
  width: 16px;
  height: 16px; }
.gallery-modal .modal-body {
  padding-inline: clamp(20px, 7vw, 150px);
  padding-bottom: 40px;
  overflow-y: auto; }
.gallery-modal-grid {
  row-gap: 20px; }
.gallery-modal-grid a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer; }
.gallery-modal-grid img {
  width: 100%;
  display: block;
  border-radius: 12px; }

/*** LISTINGS BAR ***/
.listings-bar {
  position: relative;
  z-index: 2;
  background-color: #3B1312;
  padding-block: 12px; }
.listing-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; }
.listing-select img {
  position: absolute;
  right: 20px;
  width: 8px;
  height: 4px;
  flex-shrink: 0; }
  .listing-select {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    background-color: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 12px;
    padding-inline: 10px;
    padding-right: 40px;
    white-space: nowrap;
}

.listing-select-label {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.7px; }
.listing-select-value {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1; }
.listing-select-dark .listing-select-label {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.65px;
  color: #F2E5C7; }
.listing-select-dark .listing-select-value {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.65px;
  color: #B8A68D; }
.btn-filters img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  flex-shrink: 0; }
.btn-filters {
  /* it is a <button>, so without this it renders the browser's default outset border */
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  background-color: rgba(255, 255, 255, .05);
  border-radius: 12px;
  padding-inline: 20px;
  color: #F2E5C7;
  font-size: .93rem;
  letter-spacing: .65px;
  white-space: nowrap; }
.btn-filters.active {
  border: 1px solid #F2E5C7; }
.btn-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #F2E5C7;
  color: #3B1312;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 0.45px;
  border-radius: 8px; }

/*** LISTINGS ***/
.listings {
  background-color: #F2E5C7;
  padding-top: 40px;
  padding-bottom: 5rem; }
.listings-meta {
  margin-bottom: 20px; }
.listings-count {
  color: #3B1312;
  opacity: .8;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 0; }
.listings-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px; }
.listing-sort {
  background-color: rgba(59, 19, 18, .05); }
.listing-sort .listing-select-label {
  color: #3B1312; }
.listing-sort .listing-select-value {
  opacity: .5;
  color: #3B1312; }
.listing-select-menu {
  min-width: 200px;
  background-color: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(59, 19, 18, .15);
  padding: 8px;
  margin-top: 8px !important; }
.listing-select-menu .dropdown-item {
  border-radius: 8px;
  padding: .6rem .75rem;
  color: #3B1312;
  opacity: .8;
  font-size: .93rem; }
.listing-select-menu .dropdown-item:hover,
.listing-select-menu .dropdown-item:focus {
  background-color: rgba(59, 19, 18, .05);
  opacity: 1; }
.listing-select-menu .dropdown-item.active {
  background-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 46px;
  background-color: rgba(59, 19, 18, .05);
  border-radius: 12px;
  padding: 3px; }
.view-toggle-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: 10px;
  padding-inline: 20px;
  color: #3B1312;
  opacity: .5;
  text-transform: uppercase;
  font-size: .93rem;
  letter-spacing: .65px; }
.view-toggle-btn.active {
  background-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }
.view-toggle-btn.active img {
  filter: brightness(0) invert(1); }

.active-filters {
  margin-bottom: 20px; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px; }
.filter-chip img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-weight: 400;
  gap: 10px;
  height: 40px;
  border: 1px solid #B8A68D;
  border-radius: 40px;
  padding-inline: 15px;
  color: #3B1312;
  font-size: .93rem;
  /* it is an <a>, so the browser underlines it unless told otherwise */
  text-decoration: none; }
.filter-chip:hover,
.filter-chip:focus {
  text-decoration: none;
  border-color: #3B1312; }
/* chips and the clear link share a row and sit on the same centre line */
.filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 15px; }
.filter-chips-clear {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0;
  color: #3B1312;
  opacity: .5;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-decoration: underline; }
.filter-chips-clear:hover,
.filter-chips-clear:focus {
  opacity: 1; }
.filter-chips-clear:hover {
  opacity: .8; }

.listing-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 2vw, 30px); }
.listing-card {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #F2E5C7;
  border-radius: 12px;
  padding: 20px; }
.listing-card-image {
  position: relative;
  flex: 0 0 32%;
  max-width: 32%;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 517 / 346; }
.listing-card-image .carousel,
.listing-card-image .carousel-inner,
.listing-card-image .carousel-item {
  height: 100%; }
.listing-card-image .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; }
.listing-card-image .listing-card-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px; }
/* The dots render at 4-6px to match the design, which is far too small to hit - a tap or a
   click lands between them and nothing appears to happen. This gives each one an invisible
   target around it: the full gap horizontally, so neighbouring targets meet without
   overlapping onto the wrong dot, and a generous band vertically where nothing competes. */
.listing-card-dots button {
  position: relative; }
.listing-card-dots button::after {
  content: '';
  position: absolute;
  left: -2.5px;
  right: -2.5px;
  top: -11px;
  bottom: -11px; }
/* Carousel arrows: hidden until the image is hovered, and never shown on touch where there
   is no hover state and the slide can be swiped instead. */
.listing-card-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(59, 19, 18, .2);
  opacity: 0;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out; }
/* sized explicitly so no photo rule in this container can stretch the chevron */
.listing-card-arrow img {
  width: 16px;
  height: 16px;
  object-fit: contain; }
.listing-card-arrow-prev { left: 14px; }
.listing-card-arrow-next { right: 14px; }
.listing-card-arrow:hover,
.listing-card-arrow:focus-visible {
  background-color: #fff;
  /* the centring translate has to be repeated or the button jumps down on hover */
  transform: translateY(-50%) scale(1.07); }
.listing-card-image:hover .listing-card-arrow,
.listing-card-arrow:focus-visible { opacity: 1; }
@media (hover: none) {
  .listing-card-arrow { display: none; }
}
.listing-card-dots button {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  backdrop-filter: blur(5px);
  opacity: .6; }
.listing-card-dots button:first-child,
.listing-card-dots button:last-child {
  width: 4px;
  height: 4px; }
.listing-card-dots button:not(:first-child):not(:last-child) {
  width: 6px;
  height: 6px; }
.listing-card-dots button.active {
  backdrop-filter: blur(0px);
  opacity: 1; }
.listing-card-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 8px; }
.listing-card-icon-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.listing-card-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  height: 40px;
  background-color: #fff;
  border: 0;
  border-radius: 5px;
  padding-inline: 20px;
  color: #7C95A9;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase; }
.listing-card-body {
  flex: 1;
  min-width: 280px;
  padding-bottom: 1rem; }
/* The title is a link so the card is reachable and crawlable, but the design draws it as
   plain heading text - without this it takes the browser's default blue underline. */
.listing-card-title a {
  color: inherit;
  text-decoration: none; }
.listing-card-title a:hover,
.listing-card-title a:focus-visible {
  text-decoration: underline; }
.listing-card-title {
  color: #3B1312;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem);
  margin-bottom: 10px; }
.listing-card-location {
  color: #B8A68D;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 0; }
.listing-card-features img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.listing-card-features {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(184, 166, 141, .25);
  border-bottom: 1px solid rgba(184, 166, 141, .25);
  padding-block: 14px;
  padding-inline: 10px;
  margin-top: 1.43rem;
  margin-bottom: clamp(.75rem, 1.56vw, 2.14rem);
  color: #3B1312;
  font-size: .93rem;
  letter-spacing: .65px; }
.listing-card-features span {
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.listing-card-text {
  color: #3B1312;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0; 
  padding-right: 28.5%;}
.listing-card-side {
  flex: 0 0 22%;
  border-radius: 12px;
  background: rgba(242, 229, 199, 0.40);
  padding: 20px; }
.listing-card-from {
  color: #B8A68D;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 5px; }
.listing-card-price {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 10px; }
.listing-card-price span {
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem); }
.listing-card-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px; }
.listing-card-tags img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }
.listing-card-tags span {
  display: flex;
  gap: 10px;
  color: #3B1312;
  font-size: .93rem;
  line-height: 1;
  letter-spacing: .65px;
  text-transform: uppercase; }
.btn-view-details {
  display: flex;
  width: 100%; }

.listing-banner {
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #F2E5C7;
  border-radius: 12px;
  padding: 20px; }
.listing-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(242, 229, 199, .4);
  border-radius: 12px;
  padding: 25px 20px 25px 25px; }
.listing-banner-inner > img {
  width: 40px;
  height: 40px;
  flex-shrink: 0; }
.listing-banner-text {
  flex: 1;
  min-width: 200px; }
.listing-banner-title {
  color: #3B1312;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem);
  margin-bottom: 0; }
.listing-banner-subtitle {
  color: #3B1312;
  opacity: .5;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 0; }

.listings-pagination {
  margin-top: clamp(40px, 3.5vw, 80px); }
.pagination-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; }
.pagination {
  gap: 5px;
  margin-bottom: 0; }
.pagination-next img {
  width: 12px;
  height: 7px; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(59, 19, 18, .05);
  color: #3B1312;
  opacity: .8;
  border: 0;
  border-radius: 5px;
  font-size: .93rem;
  letter-spacing: .65px; }
.pagination .page-link:hover,
.pagination .page-link:focus {
  color: #3B1312;
  background-color: rgba(59, 19, 18, .05);
  opacity: 1;
  box-shadow: none; }
.pagination .page-item.active .page-link {
  background-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
  background-color: #3B1312;
  color: #F2E5C7; }
.pagination-label {
  color: #3B1312;
  opacity: .5;
  font-size: .93rem;
  text-transform: uppercase;
  letter-spacing: .65px;
  margin-bottom: 0; }

/*** FILTERS MODAL ***/
.filters-modal {
  background: rgba(42, 26, 20, 0.40);
}
.filters-modal .modal-dialog {
  max-width: 560px; }
.filters-modal .modal-content {
  border: 0;
  border-radius: 12px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(242, 229, 199, 0.40) 0%, rgba(242, 229, 199, 0.40) 100%), #FFF;
  overflow: hidden; }
.filters-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  border-bottom: 1px solid rgba(59, 19, 18, .1); }
.filters-modal .modal-title {
  color: #3B1312;
  font-family: "Baskervville", serif;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(1.3rem, 1.9vw, 2.29rem);
  margin-bottom: 0; }
.filters-modal-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  line-height: 0; }
.filters-modal-close img {
  width: 34px;
  height: 34px; }
.filters-modal .modal-body {
  padding: 0 30px; }
.filters-section {
  padding-block: 30px;
  border-bottom: 1px solid rgba(59, 19, 18, .1); }
.filters-section-last {
  border-bottom: 0; }
.filters-section-title {
  color: #3B1312;
  font-size: 1.43rem;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 1.43rem; }
.filters-field {
  margin-bottom: 1.43rem; }
.filters-field:last-child {
  margin-bottom: 0; }
.filters-label {
  display: block;
  color: #B8A68D;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px; }
.filters-select img {
  width: 8px;
  height: 4px;
  flex-shrink: 0; }
.filters-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  line-height: 1;
  background-color: #fff;
  border: 1px solid #B8A68D;
  border-radius: 12px;
  padding-inline: 20px;
  color: #3B1312;
  font-size: .93rem; }
.filters-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  background-color: #fff;
  border: 1px solid #B8A68D;
  border-radius: 12px;
  padding-inline: 20px; }
.filters-date input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: #3B1312;
  font-size: .93rem;
  letter-spacing: .65px;
  padding: 0; }
.filters-date input:focus {
  outline: none; }
.filters-date img {
  width: 16px;
  height: 16px;
  flex-shrink: 0; }

.range-slider {
  position: relative;
  height: 18px;
  margin-bottom: 1.43rem; }
.range-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background-color: rgba(59, 19, 18, .1);
  border-radius: 12px; }
.range-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #3B1312;
  border-radius: 12px; }
.range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none; }
.range-input::-webkit-slider-runnable-track {
  background: none; }
.range-input::-moz-range-track {
  background: none; }
.range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #3B1312;
  border-radius: 18px;
  cursor: pointer; }
.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #3B1312;
  border-radius: 18px;
  cursor: pointer; }
.range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; }
.range-values-field {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  width: auto;
  background-color: #fff;
  border: 1px solid #B8A68D;
  border-radius: 12px;
  padding-inline: 20px; }
.range-values-field span {
  color: #3B1312;
  font-size: .93rem; }
.range-values-field input {
  width: auto;
  field-sizing: content;
  min-width: 0;
  border: 0;
  background: none;
  color: #3B1312;
  font-size: .93rem;
  padding: 0; }
.range-values-field input:focus {
  outline: none; }

.filters-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px; 
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(59, 19, 18, 0.1); }
.filters-stepper-row:last-child {
  margin-bottom: 0; }
.filters-stepper-label {
  color: #3B1312;
  font-size: .93rem; }
.stepper {
  display: flex;
  align-items: center;
  gap: 20px; }
.stepper-value {
  color: #3B1312;
  font-size: .93rem;
  min-width: 24px;
  text-align: center; }
.stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: transparent;
  border: 1px solid rgba(59, 19, 18, .4);
  border-radius: 40px; }
.stepper-btn:hover:not(:disabled),
.stepper-btn:focus:not(:disabled) {
  background-color: rgba(59, 19, 18, .05); }
.stepper-btn img {
  width: 12px;
  height: 12px; }
.stepper-btn:disabled {
  background: none;
  opacity: .4; }

.filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; }
.filters-chip {
  height: 40px;
  background: none;
  border: 1px solid #B8A68D;
  border-radius: 40px;
  padding-inline: 16px;
  color: #3B1312;
  opacity: .8;
  font-size: .93rem; }
.filters-chip.active {
  background-color: #3B1312;
  border-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }

.filters-segmented {
  display: inline-flex;
  max-width: 100%;
  gap: 3px;
  background-color: rgba(59, 19, 18, .05);
  border-radius: 12px;
  padding: 3px; }
.filters-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 40px;
  padding-inline: 16px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: #3B1312;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.65px;
  opacity: .8;
  font-size: .93rem;
  white-space: nowrap; }
@media (max-width: 767.98px) {
  .filters-segmented {
    display: flex;
    width: 100%; }
  .filters-segment {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis; }
}
.filters-segment.active {
  background-color: #3B1312;
  color: #F2E5C7;
  letter-spacing: normal;
  opacity: 1; }

.filters-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 1rem; }
.filters-check {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3B1312;
  opacity: .8;
  line-height: 1;
  font-size: .93rem;
  cursor: pointer; }
.filters-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0; }
.filters-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #B8A68D;
  border-radius: 5px; }
.filters-check-box img {
  display: none;
  width: 10px;
  height: 10px; }
.filters-check input:checked + .filters-check-box {
  background-color: #3B1312;
  border-color: #3B1312; }
.filters-check input:checked + .filters-check-box img {
  display: block; }

.filters-toggles {
  display: flex;
  flex-direction: column; }
.filters-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  border-bottom: 1px solid rgba(59, 19, 18, .1);
  color: #3B1312;
  opacity: .8;
  font-size: .93rem;
  cursor: pointer; }
.filters-toggle-row:last-child {
  border-bottom: 0; }
.filters-toggle-row:has(input:checked) {
  opacity: 1; }
.filters-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0; }
.filters-toggle-track {
  display: block;
  position: relative;
  width: 42px;
  height: 24px;
  background-color: rgba(59, 19, 18, .1);
  border-radius: 12px;
  transition: background-color .2s ease; }
.filters-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 18px;
  transition: transform .2s ease; }
.filters-toggle input:checked ~ .filters-toggle-track {
  background-color: #3B1312; }
.filters-toggle input:checked ~ .filters-toggle-track .filters-toggle-thumb {
  transform: translateX(18px); }

.filters-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 30px;
  border-top: 1px solid rgba(59, 19, 18, .1); }
.filters-clear-all {
  background: none;
  border: 0;
  color: #3B1312;
  opacity: .5;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-decoration: underline; }
.filters-clear-all:hover {
  opacity: .8; }
.btn-show-results {
  flex-shrink: 0; }

@media (max-width: 991.98px) {
  .listing-card-image {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem; }
  .listing-card-side {
    flex: 0 0 100%; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .listing-card {
    align-items: flex-start; }
  .listing-card-body {
    padding-block: 14px;
    padding-inline: 20px; }
  .listing-card-title {
    margin-bottom: 4px; }
  .listing-card-features {
    padding-block: 8px;
    margin-top: .5rem;
    margin-bottom: .7rem; }
  .listing-card-text {
    padding-right: 0; }
}


@media (min-width: 768px) {
  .container {
  padding-inline: 7vw; }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
  }
  .listing-card-body {
  flex: 1;
  min-width: 280px;
  padding-inline: clamp(30px, 2.5vw, 60px);
  padding-top: 25px;
  padding-bottom: 25px;}
.listings-toolbar {
  justify-content: flex-end; }
.filter-chips-clear {
  display: inline-block;
  margin-top: 0;
  margin-left: 10px; }
  .listing-banner-inner {
  justify-content: flex-start; }
  .cta p {
    margin-right: 50%; }
   p.corporate-cta-text {
  margin: 0;
}
  .feature-row {
    flex-direction: row;
    align-items: center; }
  .feature-row-desc {
    text-align: right; }
  
}

@media (min-width: 1024px) {
  .header .navbar-nav {
    gap: 15px; }
  .header .nav-link,
  .fav-link {
  font-size: 0.9rem!important; }
  .faq h2 {margin: 0; }
  .faq-list {
    margin-top: 0; }
    .faq-answer p {
      padding-right: 31%; }
  .listing-banner-text {
    align-items: center;
    display: flex; }
  .listing-banner-subtitle {
    margin-left: 30px; }
  .listing-select {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    height: 46px;
    background-color: rgba(255, 255, 255, .05);
    border: 0;
    border-radius: 12px;
    padding-inline: 20px;
    padding-right: 50px;
    white-space: nowrap; }
  .listing-select-dark .listing-select-label {
    font-size: 0.93rem; }
  .listing-select-dark .listing-select-value {
    font-size: 0.93rem; }
  .corporate-step:last-child {
    border-right: 1px solid rgba(242, 229, 199, .1); }
}

@media (min-width: 1200px) {
  .container {
  padding-inline: 7vw; }
  .px-15 {
  padding-left: 15px;
  padding-right: 15px; }
.mx-15 {
  margin-left: -15px;
  margin-right: -15px; }
.mt-26 {
  margin-top: 15px; }
  .header .navbar-nav {
    gap: 25px; }
  .header .nav-link,
  .fav-link {
  font-size: 1.15rem!important; }
.property-gallery-side {
  gap: 30px; }
.property-content {
  padding-bottom: 5rem;}
.homes {
   padding-bottom: 7.5rem;}
.compass {
  margin-bottom: 7.5rem;}
.header {
  padding: 45px 0; }
  .header .nav-link {
  font-size: 1.15rem; }
  .property-header {
  background-color: #F2E5C7;
  padding-top: 13rem;
  padding-bottom: 2rem;  }
  .corporate-trusted {
    padding-top: 200px; }
  .footer-legal {
    justify-content: flex-end; }
  .footer-webby {
    display: inline-block; }
  .footer-legal span {
    margin: 0 12px; }
    .listings {
  padding-top: 50px;
  padding-bottom: 7.5rem; }
  .listings-meta {
    margin-bottom: 30px; }
  .active-filters {
   margin-bottom: 30px; }
  .listing-card {
    padding: 30px; }
    .listing-banner {
  padding: 30px; }
  .listing-card-side {
    flex: 0 0 27%;
    padding: 30px; }
  .listing-card-price {
    margin-bottom: 20px; }
  .listing-card-tags {
    gap: 12px;
    margin-bottom: 20px; }
  .listing-card-actions {
    margin-bottom: 12px; }
    .listing-banner-inner {
  gap: 30px;
  padding: 40px 30px 40px 40px; }
  .listing-banner-subtitle {
  margin-left: 45px; }
  .corporate-features-eyebrow {
    display: flex;
    align-items: center;
    gap: 20px; }
  .corporate-steps-eyebrow {
    gap: 20px; }
  .faq-link {
    top: 20px;
    right: 59px;
    width: 40px;
    height: 40px; }
    .faq-search-wrap {
  margin-bottom: 60px; }
  .corporate-cta-container {
    padding-top: 150px;
    padding-bottom: 150px;  }
.listings,
.features,
.faq,
.corporate-container,
.corporate-features,
.corporate-steps,
.corporate-questions  {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;  }
.footer-bottom {
  padding-top: 25px;
  padding-bottom: 25px; }

   .corporate-feature-row {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;}
  .listing-card-body {
  padding-top: 35px;
  padding-bottom: 35px; }

  /*** LEGALS ***/
.hero-legals {
  background-color: #2E0E0D;
  padding-top: 190px;
  padding-bottom: 80px; }
.legalsPage .cont {
  padding: 100px 0; }
.legalsPage .cont h2 {
  font-size: 40px;
  margin-top: 55px;
  margin-bottom: 25px; }
.legalsPage .cont h2:first-child {
  margin-top: 0; }
.legalsPage .cont h3 {
  font-size: 25px;
  margin-top: 45px;
  margin-bottom: 20px; }
}


@media screen and (min-width: 1440px) {
  .header .navbar-nav {
    gap: 35px; }
}

@media screen and (min-width: 1920px) {
  .container {
  padding-inline: 150px; }
  .mt-26 {
  margin-top: 26px; }
  .header {
  padding: 60px 0; }
  .header .navbar-nav {
    gap: 56px; }
  .property-content {
  padding-bottom: 6rem; }
.homes {
   padding-bottom: 10rem; }
.compass {
  margin-bottom: 10rem; }
  .property-header {
  padding-top: 17.21rem;
  padding-bottom: 2.5rem; }
  .home-card-body {
    padding: 30px 30px 40px; }
  .faq-link {
    top: 30px; }
  .faq-category {
    padding: 16px 20px; }
  .faq-question {
    padding: 30px 12px 20px 0; }
  .corporate-trusted {
    padding-top: 360px; }
  .footer-legal span {
     margin: 0 15px; }
  .listing-selects {
    gap: 10px; }
  .listings-meta {
    margin-bottom: 40px; }
  .active-filters {
   margin-bottom: 40px; }
   .listings {
  padding-top: 60px;
  padding-bottom: 10rem; }
  .listing-card-price {
    margin-bottom: 30px; }
  .listing-card-tags {
    gap: 18px;
    margin-bottom: 30px; }
    .listing-card-actions {
    margin-bottom: 15px; }
    .listing-banner-subtitle {
  margin-left: 60px; }
  .listing-card-side {
    flex: 0 0 22%;
    padding: 30px; }
  .faq-search-wrap {
  margin-bottom: 80px; }
  .corporate-cta-container {
    padding-top: 240px;
    padding-bottom: 240px; }
  .listings,
.features,
.faq,
.corporate-container,
.corporate-features,
.corporate-steps,
.corporate-questions  {
  padding-top: 10rem;
  padding-bottom: 10rem;  }
  .footer-bottom {
  padding-top: 30px; 
  padding-bottom: 30px; }
    .corporate-feature-row {
  padding-top: 4.29rem;
  padding-bottom: 4.29rem; }
  .listing-card-body {
  padding-top: 50px;
  padding-bottom: 50px; }

  /*** LEGALS ***/
  .hero-legals {
    padding-top: 220px;
    padding-bottom: 100px; }
  .legalsPage .cont {
    padding: 120px 0; }
  .legalsPage .cont h2 {
    font-size: 50px;
    margin-top: 60px;
    margin-bottom: 30px; }
  .legalsPage .cont h3 {
    font-size: 32px;
    margin-top: 50px;
    margin-bottom: 25px; }
}

/*** /homes map view ***/
.listings-map {
  height: clamp(640px, 85vh, 1200px);
  border-radius: 12px;
  overflow: hidden;
  /* Leaflet gives its controls z-index 1000 - the same as a Bootstrap dropdown menu - and the
     map comes later in the document, so the zoom buttons and the attribution punched through
     an open Location or Sort menu. Giving the map its own stacking context at 0 keeps
     everything Leaflet draws inside it, below the menus, without touching Leaflet's own
     internal layering. */
  position: relative;
  z-index: 0; }
.listings-map .leaflet-container { font-family: inherit; }
.map-popup {
  display: block;
  min-width: 180px;
  color: #3B1312;
  text-decoration: none; }
.map-popup img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 8px; }
.map-popup-title { display: block; font-weight: 500; }
.map-popup-town  { display: block; color: #B8A68D; font-size: .85rem; }
.map-popup-price { display: block; margin-top: 4px; font-size: .85rem; }

/* Label for the search field - present for screen readers, but the design shows only the
   magnifier and the placeholder, so it is taken out of the visual flow rather than hidden
   with display:none (which would take it out of the accessibility tree too). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/*** Tables inside wysiwyg content (legal pages) ***/
/* .table-wrap is added by wrapTables() - a policy table is three columns of prose and will
   not fit a phone, so it scrolls sideways inside its own box rather than forcing the page
   to scroll. The shadow on the right edge hints there is more to see. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 30px 0;
  border-radius: 5px;
  background:
    linear-gradient(to right, rgba(242, 229, 199, 0) 0%, rgba(242, 229, 199, 0) 100%),
    linear-gradient(to right, rgba(59, 19, 18, .12), rgba(59, 19, 18, 0)) 100% 0 / 18px 100% no-repeat; }
.legalsPage .cont table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: #fff;
  font-size: clamp(.85rem, .9vw, 1rem); }
.legalsPage .cont table th,
.legalsPage .cont table td {
  padding: 14px 18px;
  border: 1px solid rgba(59, 19, 18, .12);
  vertical-align: top;
  text-align: left; }
.legalsPage .cont table th {
  background-color: #3B1312;
  color: #F2E5C7;
  font-weight: 500;
  line-height: 1.3; }
/* the CMS wraps cell text in <p>, which would otherwise add a blank line to every cell */
.legalsPage .cont table th p:last-child,
.legalsPage .cont table td p:last-child {
  margin-bottom: 0; }
.legalsPage .cont table th p,
.legalsPage .cont table td p {
  margin-bottom: 8px; }
.legalsPage .cont table tbody tr:nth-child(even) td {
  background-color: rgba(242, 229, 199, .35); }
.legalsPage .cont table tbody tr:hover td {
  background-color: rgba(242, 229, 199, .6); }
/* the editor's width="33%" attributes are honoured, but never below the min-width above */
.legalsPage .cont table td:empty {
  background-color: rgba(59, 19, 18, .02); }

/*** Formatted property description (formatPropertyDescription) ***/
.property-about .description-section,
.property-content .description-section {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.35vw, 1.5rem);
  line-height: 1.2;
  margin-top: 34px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(59, 19, 18, .12); }
.property-about .description-section:first-child,
.property-content .description-section:first-child {
  margin-top: 0; }
.property-about .description-heading,
.property-content .description-heading {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(.95rem, 1vw, 1.1rem);
  line-height: 1.3;
  margin-top: 18px;
  margin-bottom: 2px; }
/* the paragraph that belongs to a label sits directly under it, so it must not carry the
   usual gap or the pair reads as two unrelated blocks */
.property-about .description-heading + p,
.property-content .description-heading + p {
  margin-bottom: 0; }

/*** Share buttons ***/
.js-share { cursor: pointer; }
.js-share.is-shared { color: #7C95A9; }
/* the icon-only button in the gallery has no label to change, so it confirms with a tint */
.gallery-modal-share.is-shared { background-color: rgba(124, 149, 169, .18); }

/*** Favourites ***/
.fav-link {
  display: inline-flex;
  align-items: center;
  color: #F2E5C7;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.6;
  text-decoration: none;
  margin-right: 20px; }
/* the shared heart ships in the card blue; the header wants it in the nav cream */
.fav-link img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  filter: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(474%) hue-rotate(342deg) brightness(103%) contrast(91%); }
.fav-link-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: #F2E5C7;
  color: #3B1312;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .45px;
  line-height: 1; }
/* The card save button already sits in the accent blue, so a saved property has to invert -
   filled button, white label - to read as a state rather than a hover. */
.listing-card-icon-btn.js-fav.is-fav {
  background-color: #7C95A9;
  color: #fff; }
.listing-card-icon-btn.js-fav.is-fav img { filter: brightness(0) invert(1); }
/* the detail header's action is bare text, so saved reads as the full-strength brown */
.property-header-action.js-fav.is-fav {
  color: #3B1312;
  opacity: 1; }
/* buttons that carry both hearts swap outline for solid once saved */
.js-fav .js-fav-icon-on,
.js-fav.is-fav .js-fav-icon-off { display: none; }
.js-fav.is-fav .js-fav-icon-on { display: inline-block; }
/* shown when a search matches nothing, and on the favourites page before anything is saved */
.listings-empty {
  margin-bottom: 0;
  color: #3B1312;
  font-size: 1.14rem;
  line-height: 1.6; }
.listings-empty a {
  color: #7C95A9;
  text-decoration: underline; }

/*** ENQUIRY MODAL ***/
.enquiry-modal .modal-dialog {
  max-width: 760px; }
.enquiry-modal .modal-content {
  position: relative;
  border: 0;
  border-radius: 10px;
  background-color: #FAF3E2; }
.enquiry-modal .modal-body {
  padding: clamp(1.75rem, 3vw, 3rem); }
.enquiry-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: #F2E5C7;
  padding: 0; }
.enquiry-modal-close img {
  width: 14px;
  height: 14px; }
.enquiry-modal-title {
  color: #3B1312;
  font-size: clamp(1.5rem, 2.2vw, 2.28rem);
  line-height: 1.2;
  margin-bottom: .5rem; }
.enquiry-modal-intro {
  color: #6B5B4A;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem; }

/* the properties this enquiry is about, so nobody has to remember what they ticked */
.enquiry-properties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem; }
.enquiry-properties:empty {
  display: none; }
.enquiry-property {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E4D9BE;
  border-radius: 40px;
  background-color: #F2E5C7;
  padding: 6px 14px;
  color: #3B1312;
  font-size: .86rem;
  letter-spacing: .3px; }

.enquiry-errors {
  border: 1px solid #B4453F;
  border-radius: 6px;
  background-color: #FBEAE9;
  padding: 12px 16px 12px 32px;
  margin-bottom: 1.25rem;
  color: #8C2F2A;
  font-size: .93rem; }
.enquiry-errors ul {
  margin: 0;
  padding-left: 0;
  list-style: disc; }

.enquiry-label {
  display: block;
  margin-bottom: 6px;
  color: #3B1312;
  font-size: .86rem;
  letter-spacing: .65px;
  text-transform: uppercase; }
.enquiry-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #E4D9BE;
  border-radius: 6px;
  background-color: #fff;
  padding: 10px 14px;
  margin-bottom: 1rem;
  color: #3B1312;
  font-size: 1rem;
  font-family: inherit; }
.enquiry-input:focus {
  outline: 0;
  border-color: #7C95A9;
  box-shadow: 0 0 0 3px rgba(124, 149, 169, .25); }
.enquiry-textarea {
  min-height: 120px;
  resize: vertical; }
.enquiry-choice {
  border: 0;
  margin: 0 0 1rem;
  padding: 0; }
.enquiry-choice .enquiry-label {
  float: none;
  width: auto;
  min-height: 2.4em;
  padding: 0;
  line-height: 1.4; }
.enquiry-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }
.enquiry-radio {
  position: relative;
  display: inline-flex; }
/* kept in the tab order and reachable by keyboard - display:none would take it out of both */
.enquiry-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0; }
.enquiry-radio label {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid #B8A68D;
  border-radius: 40px;
  padding-inline: 22px;
  color: #3B1312;
  opacity: .8;
  font-size: .93rem;
  cursor: pointer; }
.enquiry-radio input:checked + label {
  background-color: #3B1312;
  border-color: #3B1312;
  color: #F2E5C7;
  opacity: 1; }
.enquiry-radio input:focus-visible + label {
  outline: 0;
  border-color: #7C95A9;
  box-shadow: 0 0 0 3px rgba(124, 149, 169, .25); }
.enquiry-smallprint {
  color: #6B5B4A;
  font-size: .86rem;
  line-height: 1.6; }
.enquiry-smallprint a {
  color: #7C95A9; }

/* off-screen rather than display:none - the bots worth catching skip anything hidden */
.enquiry-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden; }

.enquiry-done {
  text-align: center; }
.enquiry-done-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem; }
.enquiry-done-text {
  color: #6B5B4A;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem; }

/*** FAVOURITES SELECTION BAR ***/
.favourites-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2vw, 2.5rem); }
.favourites-selectall,
.listing-card-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #3B1312;
  font-size: .86rem;
  letter-spacing: .65px;
  text-transform: uppercase;
  cursor: pointer; }
.favourites-selectall input,
.listing-card-select input {
  width: 18px;
  height: 18px;
  accent-color: #3B1312;
  cursor: pointer; }
.favourites-bar .btn-view-details {
  width: auto;
  margin: 0; }
.favourites-bar .btn-view-details:disabled {
  opacity: .5;
  cursor: not-allowed; }

/* the tick sits over the top-left of the card's photo, clear of the card's own corner */
.listing-card-selectable {
  position: relative; }
.listing-card-select {
  position: absolute;
  top: 42px;
  left: 42px;
  z-index: 2;
  border-radius: 5px;
  background-color: #F2E5C7;
  box-shadow: 0 2px 8px rgba(59, 19, 18, .18);
  padding: 8px 14px; }

/* The location menu carries 4 regions and 24 towns, which is taller than most screens.
   Cap it and let it scroll rather than running off the bottom of the viewport. */
.listing-select-menu-scroll {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain; }
.listing-select-group {
  padding: .5rem .75rem .25rem;
  color: #6B5B4A;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase; }
.listing-select-menu .dropdown-divider {
  margin: .35rem .25rem;
  border-top-color: rgba(59, 19, 18, .12);
  opacity: 1; }
/* the first divider sits directly under "Anywhere" and would read as a stray line */
.listing-select-menu li:nth-child(2) .dropdown-divider {
  margin-top: .5rem; }

/* A native date input draws its own picker button, which sat next to the designer's calendar
   icon as a second one. Hide it and stretch its hit area across the field instead, so the
   icon shown is the designed one and clicking anywhere in the field opens the picker. */
.filters-date {
  position: relative; }
.filters-date input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer; }
/* the select uses the same shell as the fake button it replaced */
select.filters-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('/assets/images/arrow-select-dark.svg');
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 46px; }

/* Wrapping the panel in a <form> put an element between .modal-content and the header/body/
   footer, which broke the flex chain Bootstrap's modal-dialog-scrollable relies on: the body
   stopped scrolling and the footer fell below the viewport, taking Clear all and Show results
   with it. The form has to carry the same column layout the content used to. */
.filters-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden; }

/*** PROPERTY AVAILABILITY CALENDAR ***/
.property-calendar {
  margin-top: 14px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(242, 229, 199, .40) 0%, rgba(242, 229, 199, .40) 100%), #FFF;
  padding: 20px; }
.property-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: .75rem; }
.property-calendar-title {
  margin: 0;
  color: #3B1312;
  font-size: 1.15rem;
  line-height: 1.2; }
.property-calendar-nav {
  display: flex;
  gap: 6px; }
.property-calendar-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #E4D9BE;
  border-radius: 50%;
  background-color: #fff;
  padding: 0; }
.property-calendar-arrow img {
  width: 14px;
  height: 14px; }
.property-calendar-arrow:disabled {
  opacity: .35; }
.property-calendar-arrow:not(:disabled):hover {
  border-color: #3B1312; }

.property-calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; }
.property-calendar-caption {
  caption-side: top;
  padding-bottom: .5rem;
  color: #3B1312;
  font-size: .93rem;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-align: center; }
.property-calendar-grid th {
  padding-bottom: .5rem;
  color: #6B5B4A;
  font-size: .72rem;
  font-weight: 600;
  text-align: center; }
.property-calendar-grid th abbr {
  text-decoration: none;
  border: 0; }
.property-calendar-grid td {
  padding: 1px;
  text-align: center; }
.property-calendar-grid td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 50%;
  color: #3B1312;
  font-size: .86rem;
  line-height: 1; }
/* booked days are the point of the calendar, so they carry the only solid fill */
.property-calendar-grid td.is-booked span {
  background-color: #7C95A9;
  color: #fff; }
.property-calendar-grid td.is-past span {
  opacity: .35; }
.property-calendar-grid td.is-today span {
  box-shadow: inset 0 0 0 1px #3B1312; }

.property-calendar-key {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: .75rem 0 0;
  color: #6B5B4A;
  font-size: .8rem; }
.property-calendar-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0; }
.property-calendar-swatch-free {
  border: 1px solid #E4D9BE;
  background-color: #fff; }
.property-calendar-swatch-booked {
  background-color: #7C95A9;
  margin-left: 10px; }
.property-calendar-note {
  margin: .5rem 0 0;
  color: #6B5B4A;
  font-size: .8rem;
  line-height: 1.5; }

/*** COLLECTIONS INDEX ***/
.collections-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.collections-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.collections-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 100%); }
.collections-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
.collections-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.collections-hero-lines span:nth-child(1) {
  left: 20%; }
.collections-hero-lines span:nth-child(2) {
  left: 40%; }
.collections-hero-lines span:nth-child(3) {
  left: 60%; }
.collections-hero-lines span:nth-child(4) {
  left: 80%; }
.collections-hero-container {
  position: relative;
  z-index: 2;
  padding-top: clamp(10rem, 12.55vw, 17.21rem);
  padding-bottom: clamp(2rem, 4.69vw, 6.43rem); }
.collections-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.collections {
  background-color: #F2E5C7;
  padding-top: clamp(2.5rem, 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 5rem); }
.collections-intro {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.7;
  text-align: center;
  margin-bottom: clamp(2rem, 3vw, 3.5rem); }
.collections-intro p:last-child {
  margin-bottom: 0; }
.collections-empty {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  text-align: center;
  margin-bottom: 0; }

/*** COLLECTION TILES ***/
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(15px, 2vw, 30px); }
.collection-tile {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease-out, box-shadow .3s ease-out; }
.collection-tile:hover,
.collection-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(59, 19, 18, .15); }
.collection-tile-image {
  aspect-ratio: 517 / 346;
  background-color: #E4D9BE;
  overflow: hidden; }
.collection-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-out; }
.collection-tile:hover .collection-tile-image img {
  transform: scale(1.04); }
.collection-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: clamp(18px, 1.6vw, 26px); }
.collection-tile-title {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.7vw, 2rem);
  line-height: 1.2;
  margin-bottom: 0; }
.collection-tile-text {
  color: #6B5B4A;
  font-size: clamp(.95rem, 1vw, 1.14rem);
  line-height: 1.6;
  margin-bottom: 0; }
.collection-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  color: #7C95A9;
  font-weight: 700;
  font-size: clamp(.95rem, 1vw, 1.14rem); }
.collection-tile-link img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .3s ease-out; }
.collection-tile:hover .collection-tile-link img {
  transform: translateX(4px); }

/*** COLLECTION DETAIL ***/
.collection-hero {
  position: relative;
  overflow: hidden;
  background-color: #3B1312; }
.collection-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }
.collection-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(59, 19, 18, .8) 0%, rgba(59, 19, 18, .48) 100%); }
.collection-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; }
.collection-hero-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #F2E5C7;
  opacity: .1; }
.collection-hero-lines span:nth-child(1) {
  left: 20%; }
.collection-hero-lines span:nth-child(2) {
  left: 40%; }
.collection-hero-lines span:nth-child(3) {
  left: 60%; }
.collection-hero-lines span:nth-child(4) {
  left: 80%; }
.collection-hero-container {
  position: relative;
  z-index: 2;
  padding-top: clamp(10rem, 12.55vw, 17.21rem);
  padding-bottom: clamp(2rem, 4.69vw, 6.43rem); }
.collection-breadcrumb {
  margin-bottom: clamp(1rem, 1.5vw, 1.75rem); }
.collection-breadcrumb a {
  color: #B8A68D;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(.9rem, .95vw, 1.07rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none; }
.collection-breadcrumb a:hover,
.collection-breadcrumb a:focus {
  color: #F2E5C7;
  text-decoration: underline; }
.collection-hero h1 {
  color: #F2E5C7;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 4.57rem);
  line-height: 1.1;
  margin-bottom: 0; }
.collection-hero-text {
  color: #F2E5C7;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.6;
  margin-bottom: 0; }
.collection {
  background-color: #F2E5C7;
  padding-top: clamp(2.5rem, 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 5rem); }
.collection-copy {
  max-width: 860px;
  margin-inline: auto;
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.7;
  margin-bottom: clamp(2rem, 3vw, 3.5rem); }
.collection-copy h2,
.collection-copy h3 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw, 2.29rem);
  line-height: 1.2;
  margin-bottom: 1rem; }
.collection-copy p:last-child {
  margin-bottom: 0; }
.collection-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 3vw, 3.5rem); }

/*** BLOG ***/
/* The listing and the post page are built from the FAQ page's parts - .faq-hero, the
   category list, the search box and .cta are shared - so only what the FAQ page has no
   equivalent for lives here. */
.blog {
  background-color: #F2E5C7;
  padding-top: 5rem;
  padding-bottom: 5rem; }
/* the FAQ categories are <button>s; the blog's are links to real category pages */
.blog-category {
  text-decoration: none; }
.blog-category:hover,
.blog-category:focus-visible {
  color: #3B1312;
  opacity: 1; }
.blog-category.active:hover,
.blog-category.active:focus-visible {
  color: #F2E5C7; }
.blog-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px; }
.blog-search-clear img {
  width: 16px;
  height: 16px; }
.blog-search-count {
  color: #3B1312;
  opacity: .6;
  font-size: .93rem;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 0; }
.blog-empty {
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  margin-bottom: 0; }
.blog-empty a {
  color: inherit; }

/*** BLOG CARDS ***/
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(15px, 2vw, 30px); }
.blog-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease-out, box-shadow .3s ease-out; }
.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(59, 19, 18, .15); }
.blog-card-image {
  aspect-ratio: 517 / 346;
  background-color: #E4D9BE;
  overflow: hidden; }
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-out; }
.blog-card:hover .blog-card-image img {
  transform: scale(1.04); }
.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: clamp(18px, 1.6vw, 26px); }
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: #B8A68D;
  font-size: clamp(.75rem, .8vw, .93rem);
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0; }
.blog-card-title {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.5vw, 1.71rem);
  line-height: 1.2;
  margin-bottom: 0; }
.blog-card-text {
  color: #6B5B4A;
  font-size: clamp(.95rem, 1vw, 1.14rem);
  line-height: 1.6;
  margin-bottom: 0; }
.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  color: #7C95A9;
  font-weight: 700;
  font-size: clamp(.95rem, 1vw, 1.14rem); }
.blog-card-link img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .3s ease-out; }
.blog-card:hover .blog-card-link img {
  transform: translateX(4px); }

/*** BLOG POST ***/
.blog-breadcrumb-sep {
  color: #B8A68D;
  margin-inline: .5em; }
.blog-hero-meta {
  color: #B8A68D;
  font-size: clamp(.85rem, .9vw, 1rem);
  letter-spacing: 2.1px;
  text-transform: uppercase;
  margin-top: clamp(1rem, 1.5vw, 1.75rem);
  margin-bottom: 0; }
.blog-post-copy {
  max-width: 1100px;
  margin-inline: auto;
  color: #3B1312;
  font-size: clamp(1rem, 1.05vw, 1.43rem);
  line-height: 1.7; }
.blog-post-copy h2,
.blog-post-copy h3 {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw, 2.29rem);
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem; }
.blog-post-copy img {
  max-width: 100%;
  height: auto;
  border-radius: 12px; }
.blog-post-copy a {
  color: #3B1312; }
.blog-post-copy > :first-child {
  margin-top: 0; }
.blog-post-copy > :last-child {
  margin-bottom: 0; }
.blog-related {
  margin-top: clamp(3.5rem, 6vw, 7rem); }
.blog-related-title {
  color: #3B1312;
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: clamp(1.5rem, 2.5vw, 3rem); }