/*
Theme Name: Creatomatic WordPress Framework
Theme URI: https://www.creatomatic.co.uk/our-framework-for-wordpress/
Description: Client website theme
Author: Creatomatic Ltd
Author URI: https://www.creatomatic.co.uk
License URI: https://www.creatomatic.co.uk/terms-and-conditions/
Update URI: disabled
Version: 1.0.0

Colours being used:

*/

:root {
  --spacer-unit: 1vw;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  color: #3c3d26;
  background: #f7f7f3;
  font-size: clamp(16px, 1.19vw, 22px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  font-smooth: always;
}

h1,
h2,
h3,
h4 {
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  margin: 0;
  font-weight: 100;
  line-height: 1.15;
}

img.responsive {
  border: 0;
  max-width: 100%;
  height: auto;
}

figure.is-resized img {
  max-width: 100%;
}

iframe {
  max-width: 100%;
}

iframe img {
  max-width: inherit;
}

#google-map img {
  max-width: inherit;
}

.clearer,
.creatomatic-clearer {
  clear: both;
  height: 0;
}

*:focus {
  outline: none;
}

a {
  color: #3c3d26;
  text-decoration: none;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a:hover {
  text-decoration: none;
}

::selection,
::-moz-selection {
  background: #3c3d26;
  color: #fff;
}

.centred {
  margin: 0 auto;
  text-align: center;
  max-width: calc(94vw + 30px);
}

a.button-link,
.button-link,
a.wp-block-button__link,
.is-style-outline a.wp-block-button__link,
.contact-row button,
.wp-block-button__link:visited,
form.post-password-form input[type="submit"] {
  display: inline-block;
  text-transform: uppercase;
  border: 2px solid #843500;
  background: none;
  color: #fff;
  padding: 15px 24px;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  color: #3c3d26;
  text-align: center;
  cursor: pointer;
  min-width: 205px;
  border-radius: 0;
  letter-spacing: 2px;
  margin: 10px 0;
  font-weight: 500;
  font-size: 17px;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-appearance: none;
}

.contact-row button {
  min-width: 250px;
}

@-moz-document url-prefix() {
  a.button-link,
  .button-link,
  a.wp-block-button__link,
  .is-style-outline a.wp-block-button__link,
  .contact-row button,
  .wp-block-button__link:visited,
  form.post-password-form input[type="submit"] {
    font-weight: 300;
  }
}

.is-style-outline a.wp-block-button__link {
  background: none;
  color: #fff;
  border: 2px solid #fff;
}

@-moz-document url-prefix() {
  .is-style-outline a.wp-block-button__link {
    font-weight: 300;
  }
}

a.button-link:hover,
.button-link:hover,
a.wp-block-button__link:hover,
.contact-row button:hover,
form.post-password-form input[type="submit"]:hover {
  background: #843500;
  color: #fff;
  border: 2px solid #843500;
  cursor: pointer;
  opacity: 1 !important;
}

.is-style-outline a.wp-block-button__link:hover {
  color: #3c3d26;
  border: 2px solid #fff;
  background: #fff;
  opacity: 1 !important;
}

.social-icons-container {
  display: flex;
  gap: 5px;
  align-items: center;
}

a.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
  min-width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid #3c3d26;
  color: #3c3d26ad;
  border-radius: 50%;
  margin: 5px 5px 5px 5px;
  font-size: 20px;
  line-height: normal;
  text-align: center;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a.social-icon i {
  font-size: 20px;
  opacity: 0.85;
}

a.social-icon svg {
  width: 20px;
  height: auto;
}

a.social-icon svg path,
a.social-icon svg circle {
  fill: #3c3d26ad;
}

a.social-icon:hover {
  background: #3c3d26;
  color: #fff;
  opacity: 1 !important;
}

.social-icon:hover i {
  color: #fff !important;
}

/* ----- WORDPRESS OVERRIDES ----- */

.wp-block-cover,
.wp-block-cover-image {
  width: 93%;
  margin: 0 auto;
}

.full-width .wp-block-cover__inner-container {
  width: 1260px;
  max-width: 100%;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 4em;
}

.wp-block-media-text.xxx-bg {
  background: #ccc;
}

.wp-block-media-text.xxx-bg:before {
  content: none;
}

.wp-block-embed .wp-block-embed__wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.wp-block-embed .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.page-content a {
  color: #843500;
}

.page-content a:hover {
  opacity: 0.7;
}

/* ----- WORDPRESS OVERRIDES ----- */

/* Heading */

/* Top Bar */

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.16) 35%,
    rgba(33, 33, 33, 0.6) 100%
  );
}

/* Single post pages: same absolute overlay behaviour as the base .top-bar
   (needed so the scroll-driven translateY hide/show in script.js doesn't
   leave a static-flow gap behind it), just solid instead of transparent
   since there's no hero image underneath for it to sit over. .single-wrapper
   carries a matching margin-top below so page content isn't hidden under it. */
.top-bar.top-bar-solid {
  position: absolute;
}

.top-bar.top-bar-fixed {
  position: fixed;
  /* transform/opacity/transition are set inline by script.js for this one,
     not here - toggling them via a second class fought with itself (the
     browser cancels/redirects an in-progress transition when a class change
     retargets it moments later, which collapses the animation to whatever
     tiny bit of progress had already happened). Inline styles give JS a
     deterministic "before" frame to animate from in both directions. */
}

/* Same look as .top-bar-fixed (solid light bar, dark logo) but as the
   normal/standard state on single post pages - not the JS-controlled
   fixed-on-scroll behaviour, so no position/transform here. */
.top-bar.top-bar-fixed,
.top-bar.top-bar-solid {
  background: #f7f7f3;
}

.top-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 3vw;
  box-sizing: border-box;
}

/* Hamburger */

.mobile-nav-header {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  width: 55px;
  height: 45px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-header-bar {
  display: block;
  height: 3px;
  background: #fff;
  transition: background 0.3s;
}

.mobile-nav-header-bar-1 {
  width: 55px;
}

.mobile-nav-header-bar-2 {
  width: 35px;
}

/* Fallback for browsers that don't support flexbox gap (seen on iPad 2020
   Safari) - .mobile-nav-header's gap:9px above does nothing there, so the
   two bars sit flush against each other with no spacing. This only
   applies when gap itself isn't supported, so it doesn't double up with
   gap in browsers that do support it. */
@supports not (gap: 1px) {
  .mobile-nav-header-bar-1 {
    margin-bottom: 9px;
  }
}

.top-bar-fixed .mobile-nav-header-bar,
.top-bar-solid .mobile-nav-header-bar {
  background: #3c3d26;
}

/* Logo - dead centre of the bar regardless of hamburger/button width */

.header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 205px;
  max-width: 30vw;
}

.header-logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.top-bar-fixed .header-logo,
.top-bar-solid .header-logo {
  width: 185px;
}

.header-logo-img-dark {
  display: none;
}

.top-bar-fixed .header-logo-img-dark,
.top-bar-solid .header-logo-img-dark {
  display: block;
}

.top-bar-fixed .header-logo-img-light,
.top-bar-solid .header-logo-img-light {
  display: none;
}

.top-bar-fixed .top-bar-inner,
.top-bar-solid .top-bar-inner {
  padding: 25px 3vw;
  border-bottom: 1px solid #e3e5d6;
}

/* Top bar button */

.button-link.top-bar-button {
  margin: 0;
  border-color: #e3e5d6;
  background: rgba(33, 33, 33, 0.2);
  color: #fff;
  min-width: unset;
  padding: 17px 26px 13px;
}

.button-link.top-bar-button:hover {
  background: #fff;
  border-color: #fff;
  color: #3c3d26;
}

.top-bar-fixed .button-link.top-bar-button,
.top-bar-solid .button-link.top-bar-button {
  border-color: #843500;
  background: transparent;
  color: #3c3d26;
}

.top-bar-fixed .button-link.top-bar-button:hover,
.top-bar-solid .button-link.top-bar-button:hover {
  background: #843500;
  border-color: #843500;
  color: #fff;
}

/* Stay page sticky section nav - jumps to whichever blocks on the page
   have an HTML anchor set (see custom/stay_page_nav.php). Sits below the
   hero, then sticks to the top of the viewport on scroll. Its top offset
   is kept in sync with .top-bar's fixed-on-scroll state by script.js
   (inline style), so it settles directly under the fixed bar rather than
   overlapping it. */
.stay-page-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  -o-transition: 0.75s;
  -ms-transition: 0.75s;
  -moz-transition: 0.75s;
  -webkit-transition: 0.75s;
  transition: 0.75s;
}

/* Full-bleed background/border at every width, including the horizontal-
   scroll layout below 500px - a ::before sized to 100vw and re-centred
   with transform (not the old left/right/margin left/right-50vw combo,
   which only works when the element's own containing block already
   happens to be exactly viewport-width; nested inside .centred like this
   one is, that assumption doesn't hold and the box ends up mis-sized).
   transform's percentage is always relative to the pseudo-element's own
   box, so this holds regardless of nesting. Sits behind the real content
   (.centred > .stay-page-nav-list) via z-index: -1, scoped to this
   element's own stacking context (from position + z-index above), so it
   can't drop behind anything outside .stay-page-nav itself. */
.stay-page-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  background: #f7f7f3;
  border-top: 1px solid rgba(60, 61, 38, 0.3);
  border-bottom: 1px solid rgba(60, 61, 38, 0.3);
  box-sizing: border-box;
}

.stay-page-nav .stay-page-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
  height: 55px;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

.stay-page-nav-link {
  color: #3c3d26 !important;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
}

.stay-page-nav-link:hover,
.stay-page-nav-link.is-active {
  color: #843500 !important;
}

/* Menu Overlay */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #3c3d26;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  clip-path: circle(0% at 60px 55px);
  transition:
    opacity 0.6s ease,
    clip-path 0.7s ease;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.menu-overlay::-webkit-scrollbar {
  display: none;
}

.menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
  clip-path: circle(150% at 60px 55px);
}

.menu-overlay-inner {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 100px 2vw 60px;
}

.menu-overlay-close {
  position: absolute;
  top: 70px;
  left: 2vw;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-overlay-close-bar {
  display: block;
  width: 40px;
  height: 2px;
  background: #fff;
}

.menu-overlay-close-bar-1 {
  transform: translateY(9px) rotate(45deg);
  margin-left: -2px;
}

.menu-overlay-close-bar-2 {
  transform: translateY(2px) rotate(-45deg);
  margin-left: -2px;
}

.menu-overlay-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding-top: 40px;
}

.menu-overlay-content {
  flex: 1 1 50%;
  max-width: 500px;
  text-align: left;
}

.menu-overlay-nav ul {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}

.menu-overlay-nav li {
  margin: 0;
}

.menu-overlay-nav a {
  display: inline-block;
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  font-size: clamp(30px, 2.19vw, 32px);
  line-height: 52px;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}

.menu-overlay-nav a:hover {
  opacity: 0.6;
}

/* Parent items: children show in a column to the right of the top-level
   list, vertically centred on it. At 600px and below they become a
   click-to-open panel over the main menu instead (see MEDIA QUERIES and
   script.js, which also adds the arrow, Back button and parent link). */
.menu-overlay-nav > ul {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.menu-overlay-arrow {
  margin-left: 18px;
  font-size: 0.55em;
  vertical-align: middle;
  font-weight: 600 !important;
}

.menu-overlay-nav .sub-menu {
  position: absolute;
  top: 50%;
  left: 100%;
  margin: 0;
  /* Doubles as the hover bridge across the gap from the parent link. */
  padding-left: 60px;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transform: translate(12px, -50%);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s linear 0.35s;
}

.menu-overlay-nav li:hover > .sub-menu,
.menu-overlay-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

.menu-overlay-back-item,
.menu-overlay-parent-item {
  display: none;
}

.button-link.menu-overlay-button {
  margin: 10px 0 30px;
  border-color: #e3e5d6;
  background: none;
  color: #fff;
  min-width: 245px;
}

.button-link.menu-overlay-button:hover {
  background: #e3e5d6;
  border-color: #e3e5d6;
  color: #3c3d26;
}

.menu-overlay-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-overlay-contact a {
  color: #ffffffad;
  text-decoration: none;
  font-size: clamp(17.5px, 1.04vw, 20px);
}

.menu-overlay-contact a:hover {
  opacity: 0.7;
}

.menu-overlay-image {
  flex: 0 0 32%;
  max-width: 510px;
}

.menu-overlay-slide {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
}

.menu-overlay-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- CUSTOM CLASSES ----- */

.has-font-size-80-font-size {
  line-height: 1.1;
}

.remove-margin {
  margin: 0;
}

.remove-margin a,
.page-content-11 i {
  color: #3c3d26;
}

.ivypresto-font,
.has-ivypresto-display-font-family {
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  margin: 0;
  line-height: 1.15;
}

.has-beth-ellen-font-family {
  font-family: "beth-ellen", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  transform: rotate(-4deg);
  margin-bottom: 35px;
}

.has-cabin-font-family {
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
}

.short-content,
.medium-content,
.large-content,
.extra-long-content {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.medium-content {
  width: 700px;
}

.large-content {
  width: 900px;
}

.extra-long-content {
  width: 1020px;
}

.reduced-width {
  width: 86%;
  margin: 0 auto;
}

.has-text-align-left.short-content,
.has-text-align-left.medium-content,
.has-text-align-left.large-content,
.has-text-align-left.extra-long-content,
.is-content-justification-left.short-content,
.is-content-justification-left.medium-content,
.is-content-justification-left.large-content,
.is-content-justification-left.extra-long-content {
  margin-left: 0;
}

.remove-margins {
  margin-top: 0;
  margin-bottom: 0;
}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.light-green-bg,
.dark-green-bg {
  position: relative;
  z-index: 1;
}

.light-green-bg a {
  color: #3c3d26;
}

.dark-green-bg a,
.dark-green-bg {
  color: #fff;
}

.indent-content,
.is-content-justification-left.indent-content {
  margin-left: 4vw !important;
}

.light-green-bg:before,
.dark-green-bg:before {
  background: #e3e5d6;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 100%;
  z-index: -1;
  content: "";
}

.dark-green-bg:before {
  background: #3c3d26;
}

.column-dark-green-bg {
  background-color: #3c3d26;
  color: #fff;
}

.column-dark-green-bg a {
  color: #fff;
}

.full-width-media-text.wp-block-media-text figure.wp-block-media-text__media {
  --widthA: calc(100vw - 1260px);
  --widthB: calc(var(--widthA) / 2);
  width: calc(100% + var(--widthB));
  position: relative;
  left: calc(var(--widthB) * -1);
}

.full-width-media-text.wp-block-media-text.has-media-on-the-right
  figure.wp-block-media-text__media {
  --widthA: calc(100vw - 1260px);
  --widthB: calc(var(--widthA) / 2);
  width: calc(100% + var(--widthB));
  left: unset;
}

.wp-block-columns.full-width {
  gap: 0;
  margin-bottom: 0;
}

.wp-block-columns.full-width .column-dark-green-bg {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 1vw 2vw;
  padding-left: calc(3vw + 20px);
}

.wp-block-columns.full-width .column-dark-green-bg .wp-block-button__link {
  border: 2px solid #fff;
  color: #fff;
}

.wp-block-columns.full-width
  .column-dark-green-bg
  .wp-block-button__link:hover {
  background: #fff;
  color: #3c3c26;
}

.wp-block-columns.full-width .column-dark-green-bg .wp-block-group {
  max-width: 580px;
}

.wp-block-columns.full-width .wp-block-column .wp-block-cover {
  padding: 1vw 20px;
  width: 100%;
  height: 100%;
}

#sb_instagram {
  width: calc(100vw + 16px);
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

#sb_instagram.sbi_col_4 #sbi_images {
  grid-template-columns: unset !important;
  gap: 0 !important;
  width: 100%;
  padding: 2.5vw 0;
}

#sb_instagram #sbi_images .sbi_item {
  margin: 0 16px 0 0 !important;
}

#sb_instagram #sbi_images .slick-slide.sbi-slide-offset {
  margin-top: 2.9167vw !important;
}

/* Sliding Text */

.sliding-text-outer {
  padding-bottom: 100px;
  overflow: hidden;
  margin-top: 6vw;
}

/* The extra width here isn't safety-critical any more - script.js now
   translates this continuously and wraps it (modulo) once it's moved a
   full repeat's width, and the 6 repeats it's filled with (see
   SLIDING_TEXT_REPEATS in script.js) already overflow .sliding-text-outer
   by far more than this on their own, which is what actually keeps the
   track full as it slides. */
.sliding-text-scroll {
  width: calc(100% + 130px);
  height: 5vw;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sliding-text-repeat {
  font-size: 5vw;
  line-height: 5vw;
  font-weight: 100;
  text-transform: capitalize;
  color: #3c3d26;
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.sliding-text-repeat::after {
  content: "";
  display: inline-block;
  width: 0.5vw;
  height: 0.5vw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 1.75vw;
  flex-shrink: 0;
  margin-top: 0.5vw;
}

.sliding-text-repeat em {
  margin: 0 0.25em;
}

/* Gallery */

.gallery-slider {
  position: relative;
  padding-bottom: 90px;
  box-sizing: border-box;
}

/* Overrides the generic .full-width (symmetric 100vw breakout) applied by
   the block's own markup - left edge stays wherever it naturally sits in
   the content flow, only the right edge bleeds out to the viewport edge.
   Only works while .gallery-slider itself has no explicit width set (auto),
   as a block-level child of a horizontally-centred container. */
.gallery-slider.full-width {
  width: auto;
  position: relative;
  left: auto;
  right: auto;
  /* !important to beat .full-width's own !important margins - without it
     the slider bleeds out on both sides and its arrows end up off-screen. */
  margin-left: 0 !important;
  margin-right: calc(50% - 50vw) !important;
}

.gallery-slide {
  outline: none;
}

.gallery-slide img {
  display: block;
  height: 73vh;
  width: auto;
  max-width: none;
}

/* 20px total gap between slides: 10px margin on each slide, with the
   list compensated by the same amount so the edges and centring still
   land correctly with variable-width slides. */
.gallery-slider .slick-slide {
  margin: 0 10px;
}

.gallery-slider .slick-list {
  margin: 0 -10px;
}

.gallery-slider .slick-track {
  display: flex;
  align-items: center;
}

.gallery-arrow {
  position: absolute;
  bottom: 20px;
  z-index: 10;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 1px solid #3c3d26;
  background: transparent;
  color: #3c3d2678;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.3s,
    color 0.3s;
}

.gallery-arrow:hover {
  background: #3c3d26;
  color: #fff;
  opacity: 1;
}

.gallery-arrow i {
  font-weight: 600;
  font-size: 21px;
}

.gallery-arrow-prev {
  right: 130px;
}

.gallery-arrow-next {
  right: 58px;
  opacity: 1;
}

.gallery-arrow-next i {
  color: #3c3d2684;
}

.gallery-arrow:hover i {
  color: #fff !important;
  opacity: 1 !important;
}

/* Gallery - single slide mode: one image at a time, full width, with the
   arrows straddling its left/right edges (instead of stacked bottom-right)
   and dots centred underneath. Same .gallery-arrow look/icons throughout -
   only the position changes. */
.gallery-slider-single {
  padding-bottom: 0;
  margin-bottom: 0 !important;
}

.gallery-slider-single .gallery-slide {
  width: 100%;
}

.gallery-slider-single .gallery-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  display: block;
}

.gallery-slider-single .gallery-arrow {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: #f7f7f338;
}

.gallery-slider-single .gallery-arrow-prev {
  left: -70px;
  right: auto;
}

.gallery-slider-single .gallery-arrow-next {
  right: -74px;
}

.gallery-slider-single .gallery-arrow-next i {
  color: #3c3d2684;
}

.gallery-slider-single .gallery-arrow:hover {
  opacity: 1;
  background: #3c3d26;
}

.gallery-slider-dots {
  margin-top: 24px;
  text-align: center;
}

.single-content .gallery-slider-dots {
  margin-top: 15px;
}

.gallery-slider-dots ul {
  display: inline-flex;
  position: static;
  align-items: center;
  gap: 0;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-slider-dots li {
  display: block;
}

.gallery-slider-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e3e5d6;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.gallery-slider-dots li button:before {
  content: none;
}

.gallery-slider-dots li.slick-active button {
  background: #843500;
}

/* Features */

.features-block {
  background: #e3e5d6;
  padding: 4vw 4vw;
  box-sizing: border-box;
}

.features-heading {
  margin-bottom: 2.4vw;
}

/* Two independent lists side by side, not CSS column-count - revealing
   the extra features only grows the bottom of whichever list they're in,
   so nothing already visible has to reposition. column-count rebalances
   the whole layout the instant the hidden items switch on, before the
   opacity transition even starts, which is what made the reveal jump. */
.features-lists {
  display: flex;
  gap: 15vw;
}

.features-list {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style-type: "·  ";
  font-size: clamp(16px, 1.41vw, 26px);
  line-height: 32px;
}

.features-list li {
  margin-bottom: 20px;
}

.feature-hidden {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* Categorised features (see the "Categories" panel on this block) - never
   part of the default view, revealed the same "View all features" click
   as .feature-hidden above (see script.js). Each category is its own
   full-width row (flex column, not grid - there's nothing to arrange
   side by side here); its own features are what split into two columns,
   via .features-lists reused unchanged inside .features-category (see
   render_features_two_column_lists() in features.php). */
.features-categories {
  display: none;
  flex-direction: column;
  gap: 2vw;
  opacity: 0;
  margin-top: 2.4vw;
  transform: translateY(-8px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.features-category-name {
  margin: 0 0 1vw;
}

.features-view-all {
  display: inline-block;
  margin-top: 1vw;
  background: none;
  border: none;
  padding: 0;
  color: #843500;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

/* Sitewide: small dot marker for lists within page content */
.page-content ul {
  list-style-type: "·  ";
  margin: 0;
  padding-left: 20px;
}

.page-content ul li::marker {
  font-size: 1.6em;
}

/* Reviews */

.reviews-block {
  position: relative;
}

.reviews-header {
  margin-bottom: 2.3vw;
}

.reviews-eyebrow {
  display: block;
  font-weight: 400;
  color: #3c3d26;
  transform: rotate(-4deg);
  margin-bottom: 70px;
}

.reviews-heading {
  margin: 0;
  color: #3c3d26;
}

.review-slide {
  outline: none;
}

.review-quote {
  color: #3c3d26;
  line-height: 42px;
  max-width: 100%;
  width: 1250px !important;
}

.reviews-grid .review-quote {
  width: 100% !important;
}

.review-quote p {
  margin: 0 0 20px;
}

.review-quote p:last-child {
  margin-bottom: 0;
}

.review-meta {
  margin-top: 3.5vw;
  font-size: clamp(15.75px, 1vw, 18px);
  color: #3c3d26;
}

.review-meta span {
  margin: 6px;
}

.reviews-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviews-block-grid .reviews-bottom {
  display: none;
}

/* Slider mode */

.reviews-slider {
  margin-bottom: 0 !important;
}

.reviews-slider-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  order: 2;
}

.reviews-slider-dots {
  margin-right: 1.25vw;
}

.reviews-slider-dots ul {
  display: flex;
  position: static;
  align-items: center;
  gap: 0;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews-slider-dots li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-slider-dots li button {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e3e5d6;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.reviews-slider-dots li button:before {
  content: none;
}

.reviews-slider-dots li.slick-active button,
.reviews-slider-dots li button:hover {
  background: #843500;
}

/* Same look as the Gallery block's arrows (.gallery-arrow), just sitting
   inline next to the dots instead of absolutely positioned over a slide. */
.reviews-arrow-prev,
.reviews-arrow-next {
  position: static;
}

.reviews-arrow-next {
  opacity: 1;
}

.reviews-arrow-next i {
  color: #3c3d2684;
}

.reviews-view-all {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  color: #843500;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  order: 1;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.reviews-view-all:hover {
  color: #3c3d26;
}

/* Grid mode (slider toggled off) */

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* Timeline */

.timeline {
  position: relative;
  padding: 4vw 0 11vw;
  z-index: 1;
}

.timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #6c584c78;
  z-index: -1;
}

.timeline-cover-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  margin-bottom: 80px;
}

.timeline-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.timeline-post {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18vw;
  margin-bottom: 9vw;
  z-index: 1;
}

/* Sits right before a .timeline-post-images-below row for this same entry -
   that row carries the full gap down to the next entry instead. */
.timeline-post-tight {
  margin-bottom: 5vw;
}

.timeline-post:last-child {
  margin-bottom: 0;
}

.timeline-post-image-left {
  flex-direction: row-reverse;
}

.timeline-post-text,
.timeline-post-images {
  width: calc(50% - 30px);
}

.timeline-post-text {
}

/* .timeline-post-text keeps the full calc(50% - 30px) column (above) so the
   image column and the gaps either side of the centre line never move.
   The 650px cap + auto margin below lives on the inner wrapper so only the
   text content itself shrinks and hugs the centre line, leaving the indent
   on the outer edge. */
.timeline-post-text-inner {
  max-width: 630px;
}

.timeline-post-image-right .timeline-post-text-inner {
  margin-left: auto;
  margin-right: 0;
}

.timeline-post-image-left .timeline-post-text-inner {
  margin-left: 0;
  margin-right: auto;
}

.timeline-date {
  display: block;
  font-weight: 400;
  color: #3c3d26;
  transform: rotate(-4deg);
  margin-bottom: 40px;
}

.timeline-post-title {
  margin: 0 0 2vw;
  color: #3c3d26;
}

.timeline-post-content {
  color: #3c3d26;
}

.timeline-post-content p {
  margin: 0 0 20px;
}

.timeline-post-content p:last-child {
  margin-bottom: 0;
}

/* Marker sits on the centre line and points toward whichever side the
   text is on for this entry (never the images). */
.timeline-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #843500;
  z-index: 2;
}

.timeline-marker:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 3.75vw;
  height: 1px;
  background: #6c584c7a;
  transform: translateY(-50%);
}

.timeline-post-image-right .timeline-marker:before {
  right: 100%;
}

.timeline-post-image-left .timeline-marker:before {
  left: 100%;
}

.timeline-post-images,
.timeline-post-images-below {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.timeline-post-images-below.timeline-post-images-3 {
  gap: 4vw;
}

/* Three images drop to their own full-width line below the text instead
   of sitting in the side-by-side image column. */
.timeline-post-images-below {
  width: 100%;
  margin-bottom: 9vw;
}

.timeline-image {
  flex: 1;
  aspect-ratio: 7 / 9;
}

.timeline-post-images-1 .timeline-image {
  aspect-ratio: 10 / 7;
}

.timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two images: the one nearer the centre line sits slightly lower. */
.timeline-post-image-right .timeline-post-images-2 .timeline-image:first-child {
  margin-top: 60px;
}

.timeline-post-image-left .timeline-post-images-2 .timeline-image:last-child {
  margin-top: 3vw;
}

/* Three images: cascade diagonally, always rising away from the text and
   descending toward it.

   Text on the right (images row follows a .timeline-post-image-left post):
   highest on the left, lowest on the right. */
.timeline-post-image-left
  + .timeline-post-images-3
  .timeline-image:nth-child(1) {
  margin-top: -12vw;
}

.timeline-post-image-left
  + .timeline-post-images-3
  .timeline-image:nth-child(2) {
  margin-top: 0;
}

.timeline-post-image-left
  + .timeline-post-images-3
  .timeline-image:nth-child(3) {
  margin-top: 12vw;
}

/* Text on the left (images row follows a .timeline-post-image-right post):
   reversed - highest on the right, lowest on the left. */
.timeline-post-image-right
  + .timeline-post-images-3
  .timeline-image:nth-child(1) {
  margin-top: 12vw;
}

.timeline-post-image-right
  + .timeline-post-images-3
  .timeline-image:nth-child(2) {
  margin-top: 0vw;
}

.timeline-post-image-right
  + .timeline-post-images-3
  .timeline-image:nth-child(3) {
  margin-top: -12vw;
}

/* Images fade in on scroll (mirrors .text-flow-in's play-once pattern,
   see script.js) - direction depends on where an image sits: a single
   side-by-side image comes in from whichever side it's on, matching the
   alternating text/image layout it's part of. 2-3 images (which stack
   rather than sit single-file) and the full-width cover photo come in
   from the bottom instead, since there's no single side to attribute to
   a group. */
.timeline-image,
.timeline-cover-photo {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 0.8s ease,
    filter 0.8s ease,
    transform 0.8s ease;
}

.timeline-post-image-right .timeline-post-images-1 .timeline-image {
  transform: translateX(80px);
}

.timeline-post-image-left .timeline-post-images-1 .timeline-image {
  transform: translateX(-80px);
}

.timeline-post-images-2 .timeline-image,
.timeline-post-images-below .timeline-image,
.timeline-cover-photo {
  transform: translateY(80px);
}

/* Matches each directional rule's own selector (plus the in-view class)
   rather than just ".timeline-image-in-view" alone, so this always wins
   on specificity - a bare class selector here would lose to the 3-class
   directional rules above regardless of source order. */
.timeline-post-image-right
  .timeline-post-images-1
  .timeline-image.timeline-image-in-view,
.timeline-post-image-left
  .timeline-post-images-1
  .timeline-image.timeline-image-in-view,
.timeline-post-images-2 .timeline-image.timeline-image-in-view,
.timeline-post-images-below .timeline-image.timeline-image-in-view,
.timeline-cover-photo.timeline-image-in-view {
  transform: translate(0, 0);
}

.timeline-image-in-view {
  opacity: 1;
  filter: blur(0);
}

/* Switched off - only the timeline-date div should still animate in; the
   post title, post content text, and the post images/cover photo all
   used to fade/flow in on scroll too but shouldn't now. Forces each into
   its "arrived" end state permanently instead. Nothing removed -
   .timeline-post-text-inner's text-flow-in wrapper, script.js's word
   splitting, and the .timeline-image-in-view IntersectionObserver all
   keep running underneath; only the visual reveal is neutralised.
   !important since this is a deliberate on/off switch - delete this
   block to switch it back on. */
.timeline-post-title .text-flow-word,
.timeline-post-content .text-flow-word,
.timeline-image,
.timeline-cover-photo {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

.innstyle-calendar {
  max-width: 100%;
  width: 1300px;
  background: #f7f7f3;
  padding: 30px 30px 20px 30px;
  box-sizing: border-box;
}

.innstyle-results {
  max-width: 100%;
  width: 1300px;
  margin: 0 auto;
}

.innstyle-search {
  position: absolute;
  bottom: 50px;
  width: 1200px;
  max-width: calc(100% - 40px);
}

/* ----- CUSTOM CLASSES ENDS ----- */

/* ----- CUSTOM SHORTCODES ----- */

.custom-breadcrumbs {
  font-size: clamp(14px, 0.87vw, 16px);
  margin: 2vw 0 3vw;
}

.custom-breadcrumbs span,
.custom-breadcrumbs a {
  color: #3c3d2666;
  font-weight: 400;
}

.custom-breadcrumbs span {
  margin: 0 4px 0;
}

.custom-breadcrumbs a:hover {
  color: #3c3d26;
}

/* ----- CUSTOM SHORTCODES ENDS ----- */

/* ----- CUSTOM ANIMATION ----- */

.fade-right,
.fade-left,
.fade-down,
.fade-up {
  opacity: 0;
  transition-property:
    opacity,
    -webkit-transform;
  transition-property: opacity, transform;
  transition-property:
    opacity,
    transform,
    -webkit-transform;
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
  transition-timing-function: ease;
  transition-duration: 1s;
}

.fade-left {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}

.fade-down {
  transform: translate3d(0, -100px, 0);
}

.fade-up {
  transform: translate3d(0, 100px, 0);
}

.fade-right.creato-animate-active,
.fade-left.creato-animate-active,
.fade-down.creato-animate-active,
.fade-up.creato-animate-active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Switched off for now, scoped to actual page content only - same
   reasoning and pattern as the .text-flow-word/-whole kill switch
   above: forces the "arrived" end state permanently instead of the
   state IntersectionObserver's .creato-animate-active class would
   normally trigger (see script.js), so content just renders in place
   with no reveal effect. Fixed template usage outside .page-content,
   the underlying .fade-right/-left/-down/-up and .creato-animate-active
   styling, script.js's observer, and the block editor's "Custom Content
   Animation" toggles are all untouched - nothing here is removed, just
   visually neutralised. !important for the same reason as before - this is a
   deliberate, temporary, whole-feature on/off switch, not a one-off
   style. Delete this block to switch it back on. */
.page-content .fade-right,
.page-content .fade-left,
.page-content .fade-down,
.page-content .fade-up {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
}

.wp-block-media-text.creato-animate-media-text-from-left figure,
.wp-block-media-text.creato-animate-media-text-from-right figure,
.wp-block-media-text.creato-animate-media-text-from-bottom figure,
.wp-block-media-text.creato-animate-media-text-from-top figure,
.creato-animate-image-from-left figure,
.creato-animate-image-from-right figure,
.creato-animate-image-from-bottom figure,
.creato-animate-image-from-top figure,
figure.creato-animate-image-from-left,
figure.creato-animate-image-from-right,
figure.creato-animate-image-from-bottom,
figure.creato-animate-image-from-top,
.wp-block-cover.creato-animate-image-from-left img,
.wp-block-cover.creato-animate-image-from-right img,
.wp-block-cover.creato-animate-image-from-bottom img,
.wp-block-cover.creato-animate-image-from-top img {
  position: relative;
  overflow: hidden;
  -webkit-clip-path: inset(0px 100% 0px 0px);
  clip-path: inset(0px 100% 0px 0px);
  will-change: clip-path;
  transition: -webkit-clip-path 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: clip-path 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:
    clip-path 1s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    -webkit-clip-path 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.wp-block-cover.creato-animate-image-from-left img,
.wp-block-cover.creato-animate-image-from-right img,
.wp-block-cover.creato-animate-image-from-bottom img,
.wp-block-cover.creato-animate-image-from-top img {
  position: absolute;
}

.wp-block-media-text.creato-animate-media-text-from-right figure,
.creato-animate-image-from-right figure,
figure.creato-animate-image-from-right,
.wp-block-cover.creato-animate-image-from-right img {
  -webkit-clip-path: inset(0px 0px 0px 100%);
  clip-path: inset(0px 0px 0px 100%);
}

.wp-block-media-text.creato-animate-media-text-from-bottom figure,
.creato-animate-image-from-bottom figure,
figure.creato-animate-image-from-bottom,
.wp-block-cover.creato-animate-image-from-bottom img {
  -webkit-clip-path: inset(100% 0px 0px 0px);
  clip-path: inset(100% 0px 0px 0px);
}

.wp-block-media-text.creato-animate-media-text-from-top figure,
.creato-animate-image-from-top figure,
figure.creato-animate-image-from-top,
.wp-block-cover.creato-animate-image-from-top img {
  -webkit-clip-path: inset(0px 0px 100% 0px);
  clip-path: inset(0px 0px 100% 0px);
}

.wp-block-media-text.creato-animate-media-text-from-left.creato-animate-active
  figure,
.wp-block-media-text.creato-animate-media-text-from-right.creato-animate-active
  figure,
.wp-block-media-text.creato-animate-media-text-from-bottom.creato-animate-active
  figure,
.wp-block-media-text.creato-animate-media-text-from-top.creato-animate-active
  figure,
.creato-animate-image-from-left.creato-animate-active figure,
.creato-animate-image-from-right.creato-animate-active figure,
.creato-animate-image-from-bottom.creato-animate-active figure,
.creato-animate-image-from-top.creato-animate-active figure,
figure.creato-animate-image-from-right.creato-animate-active,
figure.creato-animate-image-from-left.creato-animate-active,
figure.creato-animate-image-from-top.creato-animate-active,
figure.creato-animate-image-from-bottom.creato-animate-active,
.wp-block-cover.creato-animate-image-from-left.creato-animate-active img,
.wp-block-cover.creato-animate-image-from-top.creato-animate-active img,
.wp-block-cover.creato-animate-image-from-right.creato-animate-active img,
.wp-block-cover.creato-animate-image-from-bottom.creato-animate-active img {
  -webkit-clip-path: inset(0px 0px 0px 0px);
  clip-path: inset(0px 0px 0px 0px);
}

.wp-block-media-text.creato-animate-media-text-from-left
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-right
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-bottom
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-top
  .wp-block-media-text__content {
  opacity: 0;
  position: relative;
  top: 50px;
  -ms-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  visibility: hidden;
}

.wp-block-media-text.creato-animate-media-text-from-left.creato-animate-active
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-right.creato-animate-active
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-bottom.creato-animate-active
  .wp-block-media-text__content,
.wp-block-media-text.creato-animate-media-text-from-top.creato-animate-active
  .wp-block-media-text__content {
  opacity: 1;
  position: relative;
  top: 0px;
  visibility: visible;
}

/* ----- CUSTOM ANIMATION ENDS ----- */

/* Search */

.ui-autocomplete {
  padding: 0;
  top: 45px;
  width: 200px;
  background: #262626;
  color: #fff;
  z-index: 400;
  box-shadow: none;
  border: none !important;
  font-size: 16px;
  margin: 0;
  left: 0;
  list-style: none outside none;
  z-index: 9999;
}

.ui-menu-item {
  padding: 5px 5%;
}

.ui-menu-item:hover {
  color: #fff;
  background: #16348e;
  cursor: pointer;
  margin: 0;
}

.creato_search_loading {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 8px;
  left: 82%;
}

.creato_search_loading.active {
  background: url("images/loading.gif") no-repeat right center;
}

/* V2 Search */

.v2-search-results-switches {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 50px;
  margin: 40px 0;
  padding: 0;
}

.v2-search-results-switches li {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}

.v2-search-results-switches li span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.25px;
  color: #2f3c5b;
  position: relative;
}

.v2-search-results-switches li span::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: #b2c4d4;
  width: 0;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  -moz-transition: 0.8s;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.v2-search-results-switches li.active span::before,
.v2-search-results-switches li:hover span::before {
  width: 100%;
}

.v2-search-results-tab.props .smart-search-page-results-section-inner {
  display: grid;
  grid-template-columns: calc(33.34% - 20px) calc(33.33% - 20px) calc(
      33.33% - 20px
    );
  gap: 30px 30px;
  margin-bottom: 0;
}

.v2-search-results-tab.posts .smart-search-page-results-section-inner {
  grid-template-columns: calc(33.34% - 20px) calc(33.33% - 20px) calc(
      33.33% - 20px
    );
  display: grid;
  gap: 30px;
}

.v2-search-results-tab.pages .smart-search-page-results-section-inner {
  grid-template-columns: calc(33.34% - 20px) calc(33.33% - 20px) calc(
      33.33% - 20px
    );
  display: grid;
  gap: 30px;
}

.v2-search-results-empty {
  text-align: center;
  font-size: 20px;
  margin: 30px 0;
  font-weight: 500;
}

.v2-search-results-tab {
  display: none;
}

.v2-search-results-tab.active {
  display: block;
}

/* Body */

.page-wrapper {
  width: 100%;
  overflow: hidden;
  overflow: clip;
}

.page-content {
  width: calc(100% - 40px);
  margin: 0px 20px;
  text-align: left;
}

.creato_block-container {
  display: inline-block;
  width: 100%;
}

.creato_block-container-header {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.creato_block-container-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.creato_block-container-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}

.creato_block-container-arrows i {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid;
  position: relative;
}

.creato_block-container-arrows i:hover {
  cursor: pointer;
}

.creato_block-container-arrows i::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.creato_block-container-listings {
  display: inline-block;
  width: 100%;
}

/* creato_block grid */

.creato_block-container .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 100%;
}

.creato_block-container .grid .creato_block-listing {
  width: 100%;
  margin: 0;
}

.creato_block-container.creato_block-container-1-columns .grid {
  grid-template-columns: calc(33.34% - 14px) calc(33.33% - 13px) calc(
      33.33% - 13px
    );
}

.creato_block-container.creato_block-container-2-columns .grid {
  grid-template-columns: calc(50% - 10px) calc(50% - 10px);
}

.creato_block-container.creato_block-container-3-columns .grid {
  grid-template-columns: calc(33.34% - 14px) calc(33.33% - 13px) calc(
      33.33% - 13px
    );
}

.creato_block-container.creato_block-container-4-columns .grid {
  grid-template-columns:
    calc(25% - 15px) calc(25% - 15px) calc(25% - 15px)
    calc(25% - 15px);
}

.creato_block-container.creato_block-container-5-columns .grid {
  grid-template-columns:
    calc(20% - 16px) calc(20% - 16px) calc(20% - 16px)
    calc(20% - 16px) calc(20% - 16px);
}

.creato_block-listing-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}

.creato_block-listing-image-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.creato_block-listing.creato-block-image-background-true {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}

.creato_block-listing.creato-block-image-background-true
  .creato_block-listing-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* end creato_block grid */

/* creato_block slider */

.creato_block-container .slider .creato_block-listing {
  margin-right: 20px;
}

/* end creato_block slider */

.creato_block-listing {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Video Shortcode */

.video-outer {
  width: 100vw;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.video-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #21212199;
  z-index: 1;
  top: 0;
  left: 0;
}

.no-overlay .video-overlay {
  background: none;
}

.vimeo-video {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 100%;
  min-width: 100%;
}

.video-overlay {
  width: 100%;
  height: 100%;
  background: #21212199;
  z-index: 1;
}

.video-image {
  height: 100vh;
  height: 100dvh;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: top center;
  min-height: 550px;
}

.video {
  margin: auto;
  position: absolute;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-outer .video-content,
.video-image .video-content {
  position: absolute;
  /* top/right/bottom/left fallback for browsers that don't support the
     inset shorthand (seen on iPad 2020 Safari) - inset:0 overrides them
     in browsers that do support it, so this is a no-op there. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.video-outer .video-content h3,
.video-image .video-content h3 {
  color: #fff;
  font-family: "Helvetica", "Arial", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  margin-bottom: 12px;
}

.video-outer .video-content h1,
.video-image .video-content h1 {
  color: #fff;
  font-weight: 100;
  position: relative;
  top: -1vw;
}

.video-outer .video-content h1 em,
.video-image .video-content h1 em {
  margin: 0 0.05em;
}

.video-outer .video-content .button-link,
.video-image .video-content .button-link {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 13px 26px 13px;
  text-shadow: none;
  margin-top: 20px;
}

.video-outer .video-content .button-link:after,
.video-image .video-content .button-link:after {
  display: none;
}

.video-outer .video-content .button-link:hover,
.video-image .video-content .button-link:hover {
  background: #fff;
  border: 1px solid #69bdd2;
  color: #69bdd2;
}

.vimeo-video iframe {
  z-index: -1;
  overflow: hidden;
}
/*
.video-outer .sc-main-search-outer {
	position: static;
}
*/

/* Home page intro animation - see includes/home-page-animation.php, which
   sets the fade-out's animation-duration/-delay inline, timed off a few
   variables there so changing them doesn't need retuning by hand. The
   overlay (background + quote) appears straight away with no entrance
   animation, holds fully visible, then dissolves out as one piece.
   visibility:hidden + pointer-events:none land on the fade-out's final
   keyframe (animation-fill-mode:forwards keeps them applied after it
   finishes) so it stops blocking clicks without needing JS to time that
   separately - script.js only removes the element outright afterwards,
   as a tidy-up. */
.home-page-animation-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3c3d26;
  background-image: url("images/green-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation-name: home-animation-fade-out;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.home-page-animation-inner {
  max-width: 900px;
  padding: 0 30px;
  box-sizing: border-box;
}

.home-page-animation-quote {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 50px;
}

@keyframes home-animation-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Reusable version of the above word-flow-in effect. Two ways to apply it:
   - Heading/Paragraph blocks: tick "Flow in on scroll" in the block's own
     Inspector panel (see custom/text-flow-toggle.js) rather than editing
     this file.
   - Fixed template/block markup that isn't user-editable (content block
     subheadings, review/timeline eyebrows and dates, index/single page
     titles, etc.) - "text-flow-in" is added straight into the PHP output.
   Either way, script.js finds every .text-flow-in element on the page,
   wraps each word of its text in a .text-flow-word span (any bold/italic/
   links inside are left alone - only the actual text nodes get split),
   then reveals it word-by-word once the element scrolls into view (each
   element only plays once). Elements with no text to split (an image
   wrapper, say) fall back to .text-flow-whole below, revealing as one
   piece instead. Faster/lighter than the home intro's version (shorter
   blur, smaller drift, quicker stagger) since this runs inline in page
   content rather than as a single full-screen moment. */
.text-flow-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-16px);
  animation: text-flow-word-in 2s ease forwards;
  animation-play-state: paused;
}

.text-flow-in.text-flow-in-visible .text-flow-word {
  animation-play-state: running;
}

/* Fallback for a .text-flow-in target with no text to split into words
   (e.g. .overlapping-images-small, an image wrapper) - script.js adds
   this class when it finds none, and the element itself flows in as one
   piece using the same animation instead. */
.text-flow-in.text-flow-whole {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-16px);
  animation: text-flow-word-in 1.2s ease forwards;
  animation-play-state: paused;
}

.text-flow-in.text-flow-in-visible.text-flow-whole {
  animation-play-state: running;
}

@keyframes text-flow-word-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* Switched off for the overlapping-images block's small image and the
   content-block heading - both get "text-flow-in" hardcoded straight into
   their PHP output (overlapping-images.php, content-block.php), so unlike
   the Heading/Paragraph blocks' Inspector toggle there's no per-instance
   way to turn this off; scoping the kill switch to these two components
   is the equivalent. Forces the "arrived" end state permanently instead
   of the paused-until-scrolled-into-view start state. Nothing here is
   removed, just visually neutralised - the underlying .text-flow-word/
   -whole styling, the keyframes, and script.js's word-splitting/observer
   all keep running as before. !important since this is a deliberate
   whole-component on/off switch rather than a one-off style - delete
   this block to switch it back on. */
.overlapping-images-small.text-flow-in.text-flow-whole,
.content-block-title.text-flow-in .text-flow-word {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

.schema-faq-section {
  border-bottom: 1px solid #3c3d2642;
}

.schema-faq-section:last-child {
  border-bottom: none;
}

.schema-faq-question {
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  font-style: normal;
  line-height: 1.3;
  font-size: clamp(22px, 2.08vw, 40px);
  color: #3c3d26;
  padding: 35px 60px 35px 12px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

/* Icon is injected by script.js (a real fa-{name} class, not this ::after -
   the FontAwesome Kit here renders via SVG+JS, so a raw content codepoint
   never actually shows anything). */
.schema-faq-icon {
  position: absolute;
  right: 0;
  top: 50%;
  color: #3c3d26;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform 0.5s;
}

/* A "+" rotated 45deg reads as a close "x" - avoids needing a second icon
   for the open state. */
.schema-faq-answer-open .schema-faq-icon {
  transform: translateY(-50%) rotate(45deg);
}

.schema-faq-answer {
  display: none;
  padding: 0 60px 15px 12px;
  font-size: clamp(16px, 1.19vw, 22px);
  line-height: 1.5;
  color: #3c3d26;
}

/* Core Accordion block - styled to match the FAQ block above. WordPress
   handles the open/close itself; script.js swaps its text "+" for the
   same FontAwesome icon the FAQ uses. */
.wp-block-accordion-item {
  border-bottom: 1px solid #3c3d2642;
}

.wp-block-accordion-item:last-child {
  border-bottom: none;
}

.wp-block-accordion-heading {
  margin: 0;
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  font-style: normal;
  line-height: 1.3;
  font-size: clamp(22px, 2.08vw, 40px);
  color: #3c3d26;
}

.wp-block-accordion-heading__toggle {
  position: relative;
  padding: 35px 60px 35px 12px;
  text-align: left;
  color: #3c3d26;
}

.wp-block-accordion-heading__toggle:hover
  .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

.wp-block-accordion-heading__toggle-icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: auto;
  height: auto;
  color: #3c3d26;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.5s;
}

.wp-block-accordion-item.is-open
  > .wp-block-accordion-heading
  .wp-block-accordion-heading__toggle-icon {
  transform: translateY(-50%) rotate(45deg);
}

.wp-block-accordion-panel {
  padding: 0 60px 15px 12px;
  font-size: clamp(16px, 1.19vw, 22px);
  line-height: 1.5;
  color: #3c3d26;
}

.wp-block-accordion-panel > :first-child {
  margin-top: 0;
}

/* Undoes the collapse that hidden="until-found" applies, just while
   script.js slides a panel shut. */
.wp-block-accordion-panel.is-closing[hidden] {
  content-visibility: visible !important;
  padding: 0 60px 15px 12px !important;
}

/* FAQ Tabs */

.faq-tabs {
  max-width: 1100px;
  margin: 0 auto;
}

/* Nav bar isn't part of the saved markup - script.js builds it from each
   .faq-tab's data-tab-label and only then hides the non-active panels
   (see .faq-tabs-js-ready below), so the FAQs stay fully visible,
   stacked, if JS ever fails to load. Same bordered-pill look as
   .blog-filter-link for visual consistency with the site's other
   category/filter switcher. */
.faq-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: center;
}

.faq-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e3e5d6;
  background: none;
  color: #3c3d26;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  padding: 15px 24px;
  min-width: 165px;
  cursor: pointer;
  transition: 0.3s;
}

.faq-tab-button:hover,
.faq-tab-button.active {
  border-color: #843500;
}

.faq-tabs-js-ready .faq-tab:not(.active) {
  display: none;
}

/* Fade handled in script.js via opacity, timed against this duration -
   display can't itself transition, so the old panel fades out first,
   then swaps to display:none the instant the new one fades in. */
.faq-tabs-js-ready .faq-tab {
  transition: opacity 0.3s ease;
}

.dark-green-bg .faq-tab-button,
.dark-green-bg .schema-faq-question,
.dark-green-bg .schema-faq-icon,
.dark-green-bg .schema-faq-answer,
.dark-green-bg .wp-block-accordion-heading,
.dark-green-bg .wp-block-accordion-heading__toggle,
.dark-green-bg .wp-block-accordion-heading__toggle-icon,
.dark-green-bg .wp-block-accordion-panel {
  color: #fff;
}

.dark-green-bg .schema-faq-section,
.dark-green-bg .wp-block-accordion-item {
  border-bottom: 1px solid #fff;
}

.dark-green-bg .wp-block-accordion-item:last-child {
  border-bottom: none;
}

/* Index */

#sidebar {
  text-align: right;
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
}

#sidebar ul li {
  list-style: none;
}

#sidebar select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 2px solid #000;
  padding: 9px 38px 9px 20px;
  border-radius: 25px;
  width: 200px;
  text-transform: capitalize;
  color: #000;
  font-weight: 400;
  background-repeat: no-repeat !important;
  background-position: 90% center !important;
  background-size: auto 11px !important;
  cursor: pointer;
  font-size: 14px;
  background: #fff url(images/select-dropdown.svg);
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
}

.pagination {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  margin: 20px 0;
  text-align: center;
}

.pagination a.page-numbers,
.pagination span.current {
  display: inline-block;
  width: 20px;
  text-align: center;
  color: #000;
}

.pagination span.current,
.pagination a.page-numbers:hover,
.pagination a.prev:hover,
.pagination a.next:hover {
  color: #00b6ed;
}

.pagination a.prev,
.pagination a.next {
  width: auto;
  padding: 0 3px;
}

/* News */

.no-posts {
  text-align: center;
  font-size: clamp(30px, 3.12vw, 60px);
  margin: 100px 0 150px;
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  line-height: 1.15;
}

.index-header {
  align-items: center;
  background-image: url("images/green-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: hidden;
  overflow: clip;
  padding: 1em;
  position: relative;
  min-height: 400px;
  aspect-ratio: unset;
  height: 32vw;
}

.index-header h1 {
  margin-top: 30px;
}

.index-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #21212157;
  z-index: 0;
}

.index-header.full-width .wp-block-cover__inner-container {
  z-index: 9;
  color: #fff;
}

.index-content {
  margin-bottom: 60px;
}

.archive-news-outer {
  display: grid;
  grid-template-columns: calc(33.34% - 14px) calc(33.33% - 13px) calc(
      33.33% - 13px
    );
  gap: 30px 20px;
  margin: 40px 0;
}

.archive-news {
  display: inline-block;
  width: 100%;
  margin: 0;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 10px 0 3vw;
}

.blog-filters #sidebar,
.blog-filters #sidebar ul,
.blog-filters .wp-block-categories-list {
  display: contents;
}

.blog-filters .wp-block-categories-list {
  display: flex !important;
  gap: 20px;
}

.blog-filter-link,
.blog-filters .cat-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e3e5d6;
  color: #3c3d26;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  text-decoration: none;
  padding: 15px 24px;
  min-width: 135px;
  transition: 0.3s;
}

.blog-filter-link:hover,
.blog-filters .cat-item a:hover {
  background: none;
  border: 2px solid #843500;
  opacity: 1;
}

.blog-filter-link-active,
.blog-filters .current-cat a {
  background: none;
  border: 2px solid #843500;
  color: #3c3d26;
}

/* Featured post - always the latest post, spans the full content width,
   whole card is one link. */
.blog-featured-post {
  display: grid;
  grid-template-columns: 1032fr 728fr;
  align-items: stretch;
  background: #e3e5d6;
  color: inherit;
  margin-bottom: 6vw;
  margin-top: 4vw;
  opacity: 1 !important;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.blog-featured-post:hover .button-link {
  background: #843500;
  color: #fff;
}

.blog-featured-post-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1032 / 728;
  max-width: 100%;
}

.blog-featured-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-featured-post:hover .blog-featured-post-image img {
  transform: scale(1.05);
}

.blog-featured-post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4vw 5vw;
}

.blog-featured-post-eyebrow {
  display: block;
  font-weight: 400;
  color: #3c3d26;
  transform: rotate(-4deg);
  margin-bottom: 15px;
}

.blog-featured-post-title {
  margin: 0 0 2vw;
  color: #3c3d26;
}

.blog-featured-post-content .content-block-item-meta {
  display: none;
}

.blog-featured-post-excerpt {
  color: #3c3d26;
  margin: 0 0 30px;
}

.blog-featured-post-button {
  pointer-events: none;
}

.blog-load-more {
  display: flex;
  justify-content: center;
  margin: 6vw 0 8vw;
}

#blog-load-more-button {
  min-width: 245px;
}

.single-content {
  max-width: 100%;
  width: 1100px;
  margin: 0 auto;
}

.index-content .content-block-columns-3 .content-block-items {
  gap: 4vw 35px;
}

/* .top-bar-solid is position: absolute (like every other .top-bar state),
   so it doesn't reserve any space in normal flow - push the single-post
   content down by its rendered height so it isn't hidden underneath it. */
.single-wrapper {
  margin-top: 140.5px;
}

.single-wrapper .custom-breadcrumbs {
  text-align: left;
}

/* Single post header - title, category/date, optional featured image.
   Sits outside .single-content, above it. */
.single-post-header {
  max-width: 100%;
  width: 1100px;
  margin: 6vw auto 0;
  text-align: center;
}

.single-post-header h1 {
  margin: 0 0 20px;
}

.single-post-header-meta {
  justify-content: center;
}

.single-featured-image {
  max-width: 1460px;
  width: 100%;
  margin: 5vw auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-sizing: border-box;
}

.single-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Share row */

.single-post-share {
  max-width: 100%;
  width: 100%;
  margin: 60px 0 0;
  padding-top: 28px;
  border-top: 1px solid #3c3d2633;
}

.single-post-content {
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 1140px;
  width: 100%;
  text-align: left;
  margin: 0 auto;
}

.single-post-share-title {
  color: #3c3d26;
  margin-bottom: 20px;
  font-weight: 500;
}

.single-post-share-icons {
  display: flex;
  gap: 18px;
}

.single-post-share-icons a,
.single-post-share-icons button {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #3c3d264a;
  border-radius: 50%;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.single-post-share-icons a i,
.single-post-share-icons button i {
  font-size: 18px;
  color: #3c3d26;
}

.single-post-share-icons a:hover,
.single-post-share-icons button:hover {
  background: #3c3d26;
}

.single-post-share-icons a:hover i,
.single-post-share-icons button:hover i {
  color: #fff;
}

.single-post-share-copy.is-copied i:before {
  content: "\f00c"; /* fa-check */
}

/* Related posts - full-width background, constrained content inside,
   same pattern as .footer > .centred. Reuses the Content Block for the
   actual cards. */
.single-related-posts {
  width: 100%;
  background-color: #e3e5d6;
  margin-top: 5vw;
  padding: 7vw 0 8vw;
  box-sizing: border-box;
}

/* Error Page */

.error-page .custom-breadcrumbs {
  display: none;
}

/* Map */

.map-container,
#google-map,
#contact-map {
  width: 100%;
}

#google-map,
#contact-map {
  height: 35vw;
  width: 100%;
  float: left;
}

/* Contact Form */

.creato_cf_main {
  width: 1000px;
  text-align: left;
  max-width: 100%;
}

.creato_cf_main h2 {
  margin-bottom: 30px;
}

.form_title {
  font-size: clamp(43.75px, 2.6vw, 50px);
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  margin-bottom: 40px;
}

.creato_cf_booking-extras .form_title {
  margin-bottom: 10px;
}

.creato_cf_booking-extras .form_desc {
  margin-bottom: 18px;
}

.contact-row {
  width: 100%;
  display: inline-block;
  margin-bottom: 28px;
}

.contact-row label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin-bottom: 11px;
}

.contact-row input[type="text"],
.contact-row input[type="date"],
.contact-row textarea,
.contact-row select {
  border: 1px solid #fff;
  padding: 23px 18px;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  -webkit-appearance: none;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  box-sizing: border-box;
}

.contact-row select {
  background-image: url("images/dropdown-arrow.svg");
  background-size: 14px;
  background-position: top 50% right 10px;
  background-repeat: no-repeat;
}

/* Wraps a pair of contact-row fields (see creato_cf_before_contact_email_main /
   creato_cf_after_contact_number_main, and creato_cf_before_contact_email_booking_extras,
   in functions.php) so they sit side by side instead of stacking like the
   other contact-row fields. Used for Email + Phone on the main contact
   form and the Booking Extras form. */
.contact-row-pair {
  display: flex;
  gap: 30px;
}

.contact-row-pair .contact-row-contact_email,
.contact-row-pair .contact-row-contact_number {
  width: 50%;
}

.contact-row-contact_terms label,
.contact-row-contact_marketing_consent label {
  font-size: 17px;
  display: inline-block;
}

.contact-row-contact_terms label:first-child,
.contact-row-contact_marketing_consent label:first-child {
  display: none;
}

.message {
  color: #545454;
  display: inline-block;
  width: 94%;
  padding: 15px 2%;
  margin: 20px 1%;
  border: 1px solid #545454;
  font-size: 16px;
}

.contact-row-contact_marketing_consent {
  margin-bottom: 10px;
}

/* Password Protected Pages */

/* .top-bar-solid doesn't reserve space in flow (see .single-wrapper), so the
   top margin here clears it. */
form.post-password-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 200px auto 100px;
  padding: 50px 40px;
  background: #f7f7f3;
  text-align: left;
}

form.post-password-form p {
  margin: 0 0 20px;
}

form.post-password-form p:last-of-type {
  margin-bottom: 0;
}

form.post-password-form label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}

form.post-password-form input[name="post_password"] {
  box-sizing: border-box;
  border: 1px solid #3c3d26;
  background: #fff;
  padding: 15px 18px;
  margin: 0;
  width: 320px;
  max-width: 100%;
  font-size: 16px;
  color: #000;
  border-radius: 0;
}

/* Reserves a left column for the checkbox and pulls it out of normal flow
   with absolute positioning, rather than splitting the checkbox and text
   into flex items - the Privacy Policy checkbox's text has a <a>Privacy
   Policy</a> link partway through it, and flexbox would turn that link
   into its own separate flex item rather than keeping it inline with the
   surrounding text, breaking the sentence's wrapping apart (tried and
   reverted). Keeping the text in normal inline flow means a link inside
   it still wraps naturally, while every line - first or wrapped - starts
   at padding-left, clear of the checkbox, instead of wrapped lines
   dropping back to the label's left edge underneath it.
   .contact-row-contact_terms label / .contact-row-contact_marketing_consent
   label above sets display:inline-block at 2-class specificity - matching
   that here (rather than the 1-class .contact-terms alone) so this wins
   and actually overrides it. */
.contact-row[hidden],
.contact-row-pair[hidden],
.booking-breakfast-pair[hidden] {
  display: none !important;
}

.contact-row-booking_extras .contact-terms {
  display: block;
  position: relative;
  padding-left: 33px;
  font-size: 17px;
  margin-bottom: 14px;
}

.contact-row-contact_terms .contact-terms,
.contact-row-contact_marketing_consent .contact-terms {
  display: block;
  position: relative;
  padding-left: 33px;
  box-sizing: border-box;
}

.contact-terms input[type="checkbox"] {
  position: absolute;
  top: 4px;
  left: 0;
  margin: 0;
}

form.post-password-form input[type="submit"] {
  margin-top: 30px;
}

/* Content Block */

.content-block-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 3vw;
}

/* Duplicate of the header's archive-link - hidden here, swaps places with
   the header copy at 600px and below (see MEDIA QUERIES section), where
   it shows below the grid/slider instead and spans full width. Needs the
   "a" type selector to match a.button-link's own specificity (type +
   class) above - a class-only selector here would lose to it regardless
   of source order. */
a.content-block-archive-link-bottom {
  display: none;
}

.content-block-subheading {
  display: block;
  font-weight: 400;
  color: #3c3d26;
  transform: rotate(-4deg);
  margin-bottom: 35px;
  text-align: left;
}

.content-block-title {
  margin: 0;
  color: #3c3d26;
}

.content-block-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.content-block-columns-1 .content-block-items {
  grid-template-columns: 1fr;
  gap: 20px;
}

.content-block-columns-2 .content-block-items {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.content-block-columns-3 .content-block-items {
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.content-block-columns-4 .content-block-items {
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.content-block-item {
  display: block;
  color: inherit;
}

a.content-block-item:hover {
  opacity: 1;
}

/* Posts cards: image, then category/date meta, then title. No excerpt, no button. */

.content-block-item-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.content-block-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.content-block-item:hover .content-block-item-image img {
  transform: scale(1.05);
}

.content-block-item-content {
  padding-top: 25px;
  text-align: left;
}

.content-block-item-meta {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  opacity: 0.8;
  color: #3c3d26;
  margin-bottom: 10px;
  gap: 7px;
}

.content-block-item-meta > *:not(:last-child)::after {
  content: "\00a0\00b7\00a0";
  margin-left: 7px;
}

.content-block-item-title {
  margin: 0;
  line-height: 1.2;
}

.content-block-item-title.has-cabin-font-family {
  font-weight: 500;
}

/* Pages cards: background image + overlay, title only, arrow on hover. */

.content-block-item-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #3c3d26;
}

.content-block.content-block-columns-2.full-width .content-block-item-bg {
  aspect-ratio: 3 / 2;
}

.content-block-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #21212120 0%, #21212180 100%);
  pointer-events: none;
}

.content-block-item-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
}

.content-block-item-footer .content-block-item-title {
  color: #fff;
  font-weight: 100;
}

.content-block-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.content-block-item-arrow i {
  font-weight: 600;
}

.content-block-item:hover .content-block-item-arrow {
  opacity: 1;
}

/* 2 columns gives each card much more room, so the title and arrow both
   step up a size - matching has-font-size-60 / has-font-size-26 exactly.
   !important needed: WP's has-font-size-30-font-size utility class (still
   present on the title markup) is itself emitted with !important. */
.content-block-columns-2 .content-block-item-title {
  font-size: clamp(40px, 3.19vw, 60px) !important;
}

.content-block-columns-2 .content-block-item-arrow {
  width: 75px;
  height: 75px;
  min-width: 75px;
}

.content-block-columns-2 .content-block-item-arrow i {
  font-size: clamp(20px, 1.41vw, 26px);
  font-weight: 600;
  opacity: 0.6;
}

.content-block-columns-2 .content-block-item-footer {
  bottom: 2vw;
  left: 2vw;
  box-sizing: border-box;
  width: calc(100% - 4vw);
}

/* Slick (mobile slider) theming */

.content-block-items.slick-slider {
  display: block;
}

.content-block-items.slick-slider .content-block-item {
  margin: 0 10px;
}

.content-block-items.slick-slider .slick-dots li button {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /*background: #e3e5d6;*/
  opacity: 1;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.content-block-items.slick-slider .slick-dots li button:before {
  color: #c3c5b3;
  font-size: 26px;
  opacity: 1;
}

.content-block-items.slick-slider .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #843500;
}

.content-block-items.slick-slider .slick-prev:before,
.content-block-items.slick-slider .slick-next:before {
  color: #3c3d26;
}

/* Overlapping Images */

.overlapping-images {
  position: relative;
  width: 100%;
  margin: 20px 0 60px;
}

/* .overlapping-images-frame is the sizing/positioning box (75% width,
   pushed to whichever side reserves the overlap gutter). It carries no
   overflow clipping of its own, so the small image can protrude past the
   large image's edge while both stay within the frame's 75%-width box -
   which itself never exceeds the outer wrapper. The large and small
   images size/position themselves as percentages of this frame, not of
   the outer wrapper - the frame is their real containing block since
   they're both direct children of it. */
.overlapping-images-frame {
  position: relative;
  width: 75%;
}

.overlap-center-left .overlapping-images-frame,
.overlap-bottom-left .overlapping-images-frame {
  margin-left: auto;
}

.overlap-center-right .overlapping-images-frame,
.overlap-bottom-right .overlapping-images-frame {
  margin-right: auto;
}

.overlapping-images-large {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
}

.overlapping-images-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlapping-images-small {
  position: absolute;
  width: 50%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.overlapping-images-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlap-center-left .overlapping-images-small {
  top: 25%;
  left: -35%;
}

.overlap-center-right .overlapping-images-small {
  top: 25%;
  right: -25%;
}

.overlap-bottom-left .overlapping-images-small {
  bottom: -19%;
  left: -25%;
}

.overlap-bottom-right .overlapping-images-small {
  bottom: -19%;
  right: -25%;
}

.overlapping-images-small-landscape.overlap-center-left
  .overlapping-images-small {
  aspect-ratio: 14 / 10;
  top: 16%;
  width: 120%;
  left: -35%;
}

.overlapping-images-small-landscape.overlap-center-right
  .overlapping-images-small {
  aspect-ratio: 14 / 10;
  top: 16%;
  width: 120%;
  left: unset;
  right: -35%;
}

.overlapping-images-small-landscape.overlap-bottom-left
  .overlapping-images-small {
  aspect-ratio: 14 / 10;
  bottom: -9%;
  left: -20%;
  width: 70%;
}

.overlapping-images-small-landscape.overlap-bottom-right
  .overlapping-images-small {
  aspect-ratio: 14 / 10;
  bottom: -9%;
  left: unset;
  width: 70%;
  right: -25%;
}

/* Decorative Background Assets (foliage illustrations on columns/spacers/groups/headings) */

.deco-fir,
.deco-branch,
.deco-bush {
  position: relative;
  isolation: isolate;
}

.deco-fir::after,
.deco-branch::after,
.deco-bush::after {
  content: "";
  position: absolute;
  width: 12vw;
  min-width: 120px;
  max-width: 220px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  z-index: -1;
  /* Falls back to center-right until a Decorative Position is chosen */
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.deco-fir::after {
  aspect-ratio: 13 / 16;
  background-image: url(images/deco-fir.svg);
}

.deco-branch::after {
  aspect-ratio: 15 / 15;
  background-image: url(images/deco-branch.svg);
}

.deco-bush::after {
  aspect-ratio: 12 / 12;
  background-image: url(images/deco-bush.png);
}

/* Gentle infinite sway, like these are catching a breeze. Animates the
   standalone rotate/translate properties rather than `transform` -
   `transform` itself is already doing the actual positioning above (and,
   for the top-right branch, a rotate+flip), and a `transform` set inside
   @keyframes would replace that outright rather than add to it. rotate/
   translate compose alongside transform instead, so the positioning stays
   untouched underneath the sway. Slightly different duration/delay per
   asset so multiple on one page don't all sway in lockstep. */
/* Sway animation disabled - keyframes/rules left in place below to switch
   back on later, just uncomment this block. */
/*
.deco-fir::after,
.deco-branch::after,
.deco-bush::after {
  animation: deco-sway 7s ease-in-out infinite;
}

.deco-branch::after {
  animation-duration: 6s;
}

.deco-bush::after {
  animation-duration: 8s;
  animation-delay: -3s;
}
*/

@keyframes deco-sway {
  0%,
  100% {
    translate: -8px 0;
    rotate: -3deg;
  }
  50% {
    translate: 8px 0;
    rotate: 3deg;
  }
}

.short-content.deco-pos-top-right::after,
.medium-content.deco-pos-top-right::after,
.large-content.deco-pos-top-right::after,
.extra-large-content.deco-pos-top-right::after {
  top: 0;
  bottom: auto;
  right: -8vw;
  transform: none;
}

.deco-pos-top-right.deco-branch::after {
  transform: rotate(-10deg) rotateY(180deg);
  top: -2vw;
}

.short-content.deco-pos-center-right::after,
.medium-content.deco-pos-center-right::after,
.large-content.deco-pos-center-right::after,
.extra-large-content.deco-center-top-right::after {
  top: 50%;
  bottom: auto;
  right: -8vw;
  transform: translateY(-50%);
}

.short-content.deco-pos-bottom-right::after,
.medium-content.deco-pos-bottom-right::after,
.large-content.deco-pos-bottom-right::after,
.extra-large-content.deco-bottom-top-right::after {
  top: auto;
  bottom: 0;
  right: -8vw;
  transform: none;
}

/* Footer */

.footer {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #3c3d26;
  color: #fff;
  position: relative;
  z-index: 1000;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("images/footer-texture.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.footer.creato-animate-active::before {
  opacity: 1;
}

.footer > .centred {
  position: relative;
  z-index: 1;
}

.footer-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 90px 20px 50px;
  text-align: left;
}

a.footer-logo {
  display: block;
  width: 295px;
  max-width: 100%;
  margin: 0 auto 70px;
}

a.footer-logo img,
a.footer-logo svg {
  width: 100%;
  display: block;
}

.footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 50px 0;
}

.footer-signup {
  flex: 1 1 calc(50% - 40px);
  /* Flex items default to min-width:auto, which floors shrinking at the
     item's own content's intrinsic minimum width rather than 0 - the
     630px-wide newsletter form inside pushes that floor well past where
     .footer-links (whose content wraps more readily) hits its own, so
     .footer-signup was staying put and .footer-links was absorbing the
     whole narrowing range alone instead of both shrinking together. */
  min-width: 0;
  padding-right: 40px;
  padding-top: 82px;
  max-width: 100%;
}

.footer-quote {
  margin-bottom: 25px;
  font-size: clamp(17px, 2vw, 24px);
  margin-top: 40px;
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  font-style: italic;
  width: 670px;
  line-height: 1.2;
  max-width: 100%;
}

.footer-signup-title {
  font-family: "ivypresto-display", "Helvetica", "Arial", serif;
  font-weight: 100;
  font-size: clamp(26px, 2.7vw, 48px);
  line-height: 1.1;
  margin: 0 0 28px;
}

.footer-signup-title em {
  font-style: italic;
}

.footer-signup-text {
  font-size: clamp(14px, 1.09vw, 17px);
  margin: 0 0 40px;
  width: 450px;
  max-width: 100%;
}

.footer-signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 100%;
  width: 630px;
}

.footer-signup-input {
  flex: 1 1 220px;
  min-width: 180px;
  box-sizing: border-box;
  background: #595b44;
  color: #fff;
  padding: 16px 18px;
  font-size: clamp(16px, 1.04vw, 20px);
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  border: 1px solid #595b44;
}

.footer-signup-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.footer-signup-submit {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 16px 37px;
  font-size: clamp(16px, 0.89vw, 17px);
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.footer-signup-submit:hover {
  background: #843500;
  color: #fff;
  border: 2px solid #843500;
}

/* The newsletter */
.footer-signup .emailoctopus-form-row.form-group {
  display: contents;
}

.mastfoot {
  display: none !important;
}

.footer-signup .form-container,
.footer-signup .emailoctopus-form-wrapper {
  margin: 0 !important;
}

.footer-signup .inline-container,
[data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"].inline-container,
.footer-signup
  [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"].inline-container {
  max-width: 100% !important;
  width: 630px;
}

.footer-signup
  [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"]
  .emailoctopus-error-message,
[data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"]
  .emailoctopus-success-message {
  background: #fff !important;
}

.footer-signup
  [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"]
  .form-container {
  max-width: 100% !important;
  width: 630px;
}

.footer-signup .emailoctopus-form .main-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 100%;
  width: 630px;
}

.footer-signup .inline-container .emailoctopus-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 180px;
  height: auto;
  box-sizing: border-box;
  background: #595b44;
  color: #fff;
  padding: 16px 18px;
  font-size: clamp(16px, 1.04vw, 20px);
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  border: 1px solid #595b44;
  border-radius: 0;
  line-height: 1;
  height: 57px;
}

.footer-signup .emailoctopus-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.footer-signup .inline-container .emailoctopus-form input[type="submit"] {
  /* EmailOctopus's own stylesheet sets flex-grow:1 on this (the static
     .footer-signup-submit button above has no flex-grow set at all, so
     it defaults to 0) - left alone, it competes with the email input for
     the row's leftover space instead of just sizing to its own label
     text, which is what was making it wider (and the input narrower)
     than the row above even once both buttons say "Sign up". */
  flex: 0 0 auto;
  width: auto;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 16px 37px;
  font-size: clamp(16px, 0.89vw, 17px);
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  white-space: nowrap;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  margin: 0 !important;
  height: 57px;
}

.footer-signup .inline-container .emailoctopus-form input[type="submit"]:hover {
  background: #843500;
  color: #fff;
  border: 2px solid #843500;
}

.footer-links {
  flex: 1 1 50%;
  /* Same reasoning as .footer-signup's min-width above - matches it so
     both shrink together rather than one absorbing all the narrowing. */
  min-width: 0;
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  padding-top: 90px;
  padding-bottom: 10vw;
}

.footer-links-inner {
  display: flex;
  gap: 40px 60px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  width: 630px;
  float: right;
}

.footer-menu-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 32px;
}

.footer-menu ul {
  padding: 0;
  margin: 0;
}

.footer-menu ul li {
  list-style: none;
  display: block;
  margin-bottom: 10px;
}

.footer-menu ul li a {
  display: block;
  width: fit-content;
  font-size: clamp(16px, 1.09vw, 20px);
}

.footer-contact a,
.footer-address {
  display: block;
  opacity: 0.9;
  margin-bottom: 6px;
}

.footer-address {
  opacity: 0.85;
  line-height: 1.5;
  margin: 10px 0 20px;
}

.footer a {
  color: #fff;
}

.footer a:hover {
  opacity: 0.7;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #e3e5d6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  opacity: 1;
}

.footer-social a i {
  font-size: 20px;
  opacity: 0.85;
}

.footer-left ul,
.credit-link ul {
  margin: 0;
  padding: 0;
}

.footer-left ul li,
.credit-link ul li {
  list-style: none outside none;
  display: inline;
}

.credit-link ul li:not(:last-child)::after {
  content: "\00a0\00b7\00a0";
}

.credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  font-size: clamp(14px, 0.94vw, 18px);
  gap: 10px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 25px;
}

.credit-left,
.credit-center,
.credit-right {
  opacity: 0.7;
}

.credit-left {
  justify-self: start;
}

.credit-center {
  justify-self: center;
  text-align: center;
}

.credit-right {
  justify-self: end;
  text-align: right;
}

.credit-link,
.credit-left span {
  display: inline-block;
}

/* General Woocommerce */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce{
	display: inline-block;
	width: 100%;
}

#sidebar{
	float: left;
	width: 20%;
	margin-top: 40px;
}

#sidebar ul{
	margin: 0;
	padding: 0;
}

#sidebar ul li{
	list-style: none outside none;
	margin-bottom: 5px;
}

#sidebar a{
	color: #6C6D6D;
}

#sidebar .widget{
	margin-bottom: 20px;
}

#primary{
	margin: 0 auto;
	text-align: center;
	max-width: 1200px;
	width:98%
}

.woocommerce .main-content{
	text-align: left;
}

.woocommerce .woocommerce-breadcrumb{
	text-align: left;
	font-size: 12px;
	display: inline-block;
	width: 100%;
	margin: 80px 0 20px 0;
	color: #BFBFBF;
}

.woocommerce .woocommerce-breadcrumb a{
	color: #BFBFBF;
}

mark.count{
	display: none;
}

/* End General */

/* Woocommerce Buttons */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
#sidebar a.button,
.woocommerce div.product form.cart .button,
.woocommerce input#wc_lost_license_btn,
.woocommerce button.button.alt{
	display: inline-block;
	text-transform: uppercase;
	border: none;
	background: #ccc;
	color: #fff;
	padding: 10px 15px !important;
	text-align: center;
	margin: 10px 0;
	font-size: 16px;
	border-radius: 0px;
	font-weight: 200;
	white-space: inherit;
	max-width: 90%;
	font-weight: bold;
	-webkit-appearance:none;
	  -o-transition:.5s;
	  -ms-transition:.5s;
	  -moz-transition:.5s;
	  -webkit-transition:.5s;
	  transition:.5s;
}

#sidebar a.button{
	margin: 10px 1%;
	width: 43%;
	padding: 5px 1% !important;
	font-size: 14px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
#sidebar a.button:hover,
.woocommerce input.button:disabled,
.woocommerce input.button.alt:hover,
.woocommerce input#wc_lost_license_btn:hover,
.woocommerce button.button.alt:hover{
	background: #545454;
	color: #fff;
	cursor: pointer;
}

/* End Buttons */

/* Archive Products/Categories */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce ul.products li.product-category h2{
	text-align: center;
	font-size: 16px;
}

.woocommerce ul.products li.product .price{
	color: #545454;
	font-size: 18px;
	display: none;
}

.woocommerce div.product p.price, .woocommerce div.product span.price{
	color: #545454;
	font-size: 20px;
}

.woocommerce div.product .woocommerce-variation-price span.price{
	font-size: 30px;
	color: #545454;
	font-weight: bold;
	margin-bottom: 20px;
}

.woocommerce span.onsale{
	background: #545454;
}

.woocommerce ul.products li.product .price del{
	display: inline-block;
}

/* End Archive Styling */

/* Single Product */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images{
	text-align: left;
}

.woocommerce .summary{
	text-align: left;
	color: #545454;
}

.woocommerce div.product h1.product_title{
	color: #545454;
}

.woocommerce .summary p.price{
	font-size: 26px;
	margin: 0 0 20px 0;
}

.woocommerce .quantity .qty{
	background: none;
	color: #545454;
	font-size: 18px;
	padding: 6px 2px;
	border: 1px solid #545454;
	margin: 10px 10px 0 0;
}

.woocommerce div.product p.stock{
	
}

.woocommerce .summary form .form-row{
	margin: 0;
	padding: 0;
}

.woocommerce div.product form.cart .variations select{
	font-family: 'Montserrat', 'Helvetica', 'Arial', serif;
	font-size: 14px;
	background: #fff;
	-webkit-appearance:none;
	border-radius: 0;
	color: #545454;
	padding: 10px;
	border: 1px solid #545454;
}

.woocommerce div.product form.cart .button{
	padding: 10px 15px !important;
}

.woocommerce .product_meta{
	font-size: 14px;
}

.woocommerce span.sku_wrapper{
	
}

.woocommerce section.related{
	display: inline-block;
	width: 100%;
}

.woocommerce section.related h2{
	text-align: center;
	margin-bottom: 20px;
}


.woocommerce-message, .woocommerce-info {
	text-align: left;
}

.woocommerce .woocommerce-message .button{
	margin: 0;
	padding: 10px 15px !important;
}

.woocommerce div.product div.images {
	width: 47%;
	margin-left: 1%;
}

.woocommerce .woocommerce-ordering select {
    padding: 8px 0%;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	font-size: 12px;
	font-family: 'Montserrat', 'Helvetica', 'Arial', serif;
	float: right;
	margin-right: 1%;
	width: 100%;
}

.single_add_to_cart_button {
	
}

/* End Single Product */

/* Woocommerce Tabs */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce-tabs{
	text-align: left;
	margin: 40px 0;
	display: inline-block;
	width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
	border-radius: 0;
	border: none;
	margin: 0 5px 5px 0;
	color: #545454;
	text-transform: uppercase;
	font-weight: 800;
	background: #ccc;
	border: 1px solid #ccc;
	border-bottom: none;
	  -o-transition:.5s;
	  -ms-transition:.5s;
	  -moz-transition:.5s;
	  -webkit-transition:.5s;
	  transition:.5s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li.active{
	background: #fff;
	color: #ccc;
	margin-bottom: 0;
	padding-bottom: 5px;

}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
	color: #ccc;
}
	
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a {
	color: #ccc;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	padding: 10px 10px;
	font-size: 16px;
	color: #fff;
}

.woocommerce div.product .woocommerce-tabs .panel{
	width: 94%;
	padding: 30px 3%;
	background: #fff;
	border: 1px solid #ccc;
	margin-top: -1px;
	float: left;
}

/* end of tabs */

/* Basket */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce table.cart td.actions .input-text, .woocommerce form.checkout_coupon .form-row input.input-text{
	float: left;
	width: 150px;
	padding: 3px 10px;
	font-size: 16px;
	font-family: 'Montserrat', 'Helvetica', 'Arial', serif;
	margin: 10px 10px 10px 0;
	-webkit-appearance:none;
}

.woocommerce table.shop_table{
	border: 1px solid #ccc;
	font-size: 14px;
	background: #fff;
	border-radius: 0;
}

.woocommerce table img{
	width: 50px;
	height: auto;
}

.woocommerce td.product-name dl.variation p{
	margin: 0;
}

.woocommerce table.cart td.actions .input-text{
	border: 1px solid #ccc;
	background: none;
	color: #545454;
	padding: 9px 10px;
	width: 200px;
}

.woocommerce table.cart td.actions .input-text::placeholder{
	color: #545454;
}

.woocommerce table.shop_table td, .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{
	border-top: 1px solid #ccc;
}

/* End Basket */

/* Checkout Page */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce form .form-row-last {
    width: 46%;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{
	padding: 10px;
	font-size: 16px;
	font-family: 'Montserrat', 'Helvetica', 'Arial', serif;
	border: 1px solid #ccc;
	color: #545454;
	background: #fff;
	-webkit-appearance:none;
}

.woocommerce form .form-row input.input-text::placeholder{
	color: #ccc;
}

.woocommerce form.checkout_coupon .form-row input.input-text{
	width: 100%;
	padding: 7px 10px;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment{
	border-radius: 0;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
	width: 100%;
	margin: 20px 0%;
}

.woocommerce .woocommerce-checkout{
	width: 600px;
	margin: 0 auto;
	max-width: 96%;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: #ccc;
}

/* End Checkout */

/* My Account */

/* Remove to set live - Copy this line, find and replace with a blank

.woocommerce nav.woocommerce-MyAccount-navigation{
	display: inline-block;
	width: 100%;
	text-align: center;
	background: #545454;
}

.woocommerce nav.woocommerce-MyAccount-navigation ul{
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-MyAccount-navigation ul li{
	list-style: none outside none;
	display: inline;
}

.woocommerce nav.woocommerce-MyAccount-navigation ul li a{
	padding: 10px 15px;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	font-size: 14px;
}

.woocommerce nav.woocommerce-MyAccount-navigation ul li a:hover, .woocommerce nav.woocommerce-MyAccount-navigation ul li.is-active a{
	opacity: 0.5;
}

/* End My Account */

/* Woocommerce Mobile */

/* Remove to set live - Copy this line, find and replace with a blank

@media (max-width: 970px) {

	
	.woocommerce .woocommerce-breadcrumb {
	    width: 98%;
	    margin: 10px 1% 20px 1%;
	}
	
	.woocommerce div.product div.summary {
		width: 47%;
		margin-right:1%;
	}
	
	.woocommerce-tabs {
	    margin: 40px 1%;
	    width: 98%;
	}
	
	.page-tabs-overlay h3 {
	    font-size: 28px;
    }
	
}


@media (max-width: 768px) {

	.woocommerce div.product div.images {
	    width: 94%;
	    margin: 0 3%;
	}
	
	.woocommerce div.product div.summary {	
	    width: 94%;
	    margin: 20px 3% 0;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
	    padding: 0 1%;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	    font-size: 14px;
    }
    

}

@media (max-width: 500px) {

	.page-tabs-overlay h3 {
	    font-size: 24px;
	}
	
	.woocommerce .woocommerce-breadcrumb {
	    margin: 80px 1% 20px 1%;
	}
	
	.woocommerce div.product h1.product_title {
	    font-size: 26px;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
	    width: 97.5% !important;
	    margin: 0 !important;
	    padding: 3px 1% !important;
	}
	
	.woocommerce div.product .woocommerce-tabs .panel {
	    width: 93.5% !important;
	}
	
	.woocommerce form .form-row {
	    padding: 3px 1% !important;
	}
	
	.woocommerce form .form-row-first, .woocommerce form .form-row-last {
    	width: 98%;
	}
	
	.woocommerce-privacy-policy-text p {
		font-size: 12px;
	}
	
}

/* End Woocommerce Mobile */

/* Specific Fixes and things in the core */

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

/* Cookie notification styling */

.wc_privacy_notice {
  position: fixed;
  bottom: 0px;
  width: 90%;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-top: 1px solid #000;
  box-shadow: 0px 0px 2px #000;
  padding: 10px 10px;
  font-size: 13px;
  z-index: 10000;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 800px;
  border-radius: 10px 10px 0 0;
}

.wc_privacy_text {
  float: left;
  width: 100%;
}

.wc_privacy_text strong {
  float: left;
  font-size: 12px;
}

.wc_privacy_policy_buttons {
  float: right;
}

.reveal_privacy_options,
.wc_privacy_policy_buttons button,
.wc_privacy_submit {
  display: inline-block;
  padding: 5px 20px;
  margin-left: 10px;
  border-radius: 20px;
  -webkit-appearance: none;
  line-height: normal;
  border: none;
  font-size: 11px;
  font-family: "Cabin", "Helvetica", "Arial", sans-serif;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #fff;
  background: #000;
}

span.reveal_privacy_options_hide {
  display: none;
}

.reveal_privacy_options:hover,
.wc_privacy_policy_buttons button:hover,
.wc_privacy_submit:hover {
  opacity: 0.8;
  cursor: pointer;
}

.wc_reveal_options {
  float: left;
  width: 100%;
  padding: 10px 0;
  display: none;
  text-align: left;
  font-size: 11px;
}

.wc_privacy_option {
  float: left;
  background: #efefef;
  padding: 5px 10px;
  margin: 0 10px 0 0;
  width: calc(25% - 30px);
  text-align: center;
}

.page-content .wc_reveal_options {
  float: none;
  display: block;
}

.page-content .wc_privacy_notice {
  position: relative;
  display: inline-block !important;
  border: 1px solid #999;
  width: calc(100% - 42px);
  padding: 20px;
  background: #fff;
  color: #1c2342;
  z-index: 0;
  margin: 10px 0px 50px 0px;
  animation: slideDown 0 ease forwards;
  -webkit-animation: slideDown 0 ease forwards;
  -moz-animation: slideDown 0 ease forwards;
  -o-animation: slideDown 0 ease forwards;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
}

.page-content .wc_privacy_notice .wc_privacy_text strong {
  width: inherit;
}

.page-content .wc_reveal_options .wc_privacy_submit {
  margin-top: 10px;
  margin-left: 0 !important;
}

/* ----- MEDIA QUERIES ----- */

@media (prefers-reduced-motion: reduce) {
  .deco-fir::after,
  .deco-branch::after,
  .deco-bush::after {
    animation: none;
  }
}

@media (max-width: 1400px) {
  .deco-fir::after,
  .deco-branch::after,
  .deco-bush::after {
    opacity: 0.15;
  }

  .reduced-width {
    width: 100%;
  }

  .wp-block-cover.full-width {
    width: 100vw;
  }

  .wp-block-cover,
  .wp-block-cover-image {
    width: 100%;
  }

  .footer-links-inner,
  .footer-signup-form,
  .footer-signup-text {
    width: 100%;
  }
}

@media (max-aspect-ratio: 1/1) {
  :root {
    --spacer-unit: 1vh;
  }
}

@media (max-width: 1300px) {
  .full-width-media-text.wp-block-media-text figure.wp-block-media-text__media {
    width: calc(100% + 20px);
    left: calc(-20px);
  }

  .full-width-media-text.wp-block-media-text.has-media-on-the-right
    figure.wp-block-media-text__media {
    width: calc(100% + 20px);
  }

  .header-logo {
    width: 165px;
  }

  .button-link.top-bar-button {
    padding: 13px 23px 10px;
    font-size: 15px;
  }

  .gallery-slider-single {
    width: calc(100% - 100px);
    margin: 0 auto;
  }

  .gallery-slider.full-width .gallery-arrow-next {
    right: 40px;
  }

  .gallery-slider.full-width .gallery-arrow-prev {
    right: 110px;
  }
}

@media (max-width: 1000px) {
  .review-quote {
    line-height: 32px;
  }

  /* Hidden from here (rather than 900px) so there's room for the
     sub-menu column that opens to the right of the menu. */
  .menu-overlay-content,
  .menu-overlay-image {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .menu-overlay-image {
    display: none;
  }

  .creato_block-container.creato_block-container-5-columns .grid {
    grid-template-columns:
      calc(25% - 15px) calc(25% - 15px) calc(25% - 15px)
      calc(25% - 15px);
  }

  .page-content .wp-block-cover.full-width:first-child {
    height: 32vw;
    min-height: 400px !important;
  }

  .single-content {
    width: calc(100% - 40px);
    margin: 0px 20px;
  }

  .gallery-slider.full-width .gallery-slide img {
    max-height: 50vw;
  }

  .reviews-eyebrow {
    margin-bottom: 40px;
  }

  .content-block.content-block-columns-2.full-width .content-block-item-bg {
    aspect-ratio: 1/1;
  }
}

@media (max-width: 900px) {
  .stay-page-nav .centred {
    max-width: 100%;
    padding: 0 20px;
  }

  /* Gap/font reduce here first; the 500px block below layers the
     horizontal-scroll behaviour itself on top of these same values. */
  .stay-page-nav .stay-page-nav-list {
    gap: 25px;
    height: 60px;
  }

  .stay-page-nav-link {
    font-size: 15px;
  }

  .blog-featured-post {
    grid-template-columns: 1fr;
  }

  .blog-featured-post-image {
    aspect-ratio: 4 / 3;
  }

  .blog-featured-post-content {
    padding: 30px;
  }

  .timeline-line,
  .timeline-marker {
    display: none;
  }

  .timeline-post,
  .timeline-post-image-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 60px;
  }

  .timeline-post-text,
  .timeline-post-images {
    width: 100%;
  }

  .timeline-post-text-inner {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .timeline-post-images-2 .timeline-image,
  .timeline-post-image-left + .timeline-post-images-3 .timeline-image,
  .timeline-post-image-right + .timeline-post-images-3 .timeline-image {
    margin-top: 0;
  }

  .timeline-post-tight {
    margin-bottom: 30px;
  }

  .timeline-post-images-below {
    margin-bottom: 60px;
  }

  .menu-overlay-columns {
    padding-top: 60px;
  }

  .footer-links {
    flex-direction: column;
    gap: 40px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 40px;
  }

  .footer-signup .inline-container,
  [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"].inline-container,
  .footer-signup
    [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"].inline-container,
  .footer-signup
    [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"]
    .form-container,
  .footer-signup .emailoctopus-form .main-form {
    width: 100%;
  }

  .footer-links-inner {
    gap: 40px;
    justify-content: space-around;
    max-width: 100%;
  }

  .content-block-columns-3 .content-block-items,
  .content-block-columns-4 .content-block-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Visually 2 columns now too, so match the same title/arrow sizing
     used when the block is explicitly set to 2 columns. */
  .content-block-columns-3 .content-block-item-title,
  .content-block-columns-4 .content-block-item-title {
    font-size: clamp(30px, 3.19vw, 60px) !important;
    font-weight: 300;
  }

  .content-block-columns-3 .content-block-item-arrow,
  .content-block-columns-4 .content-block-item-arrow {
    width: 75px;
    height: 75px;
    min-width: 75px;
  }

  .content-block-columns-3 .content-block-item-arrow i,
  .content-block-columns-4 .content-block-item-arrow i {
    font-size: clamp(20px, 1.41vw, 26px);
  }

  .footer-columns {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .footer-signup {
    padding-top: 0;
    padding-right: 0;
  }

  a.footer-logo {
    display: block;
    width: 140px;
    margin-bottom: 45px;
  }

  .footer-inner {
    padding: 60px 20px 50px;
  }

  .single-featured-image {
    width: calc(100% - 40px);
    margin: 30px 20px 40px;
  }

  .timeline-post-images-below.timeline-post-images-3 {
    margin-top: 13vw;
  }

  .timeline-cover-photo {
    margin-bottom: 20px;
  }

  :where(.wp-block-columns.is-layout-flex) {
    gap: 2.5em;
  }

  .footer-quote {
    text-align: center;
    width: 670px;
    margin: 40px auto 0;
  }
}

@media (max-width: 850px) {
  .creato_block-container.creato_block-container-4-columns .grid,
  .creato_block-container.creato_block-container-5-columns .grid {
    grid-template-columns: calc(33.34% - 14px) calc(33.33% - 13px) calc(
        33.33% - 13px
      );
  }

  .button-link.top-bar-button {
    font-size: 14px;
    padding: 15px 15px 12px;
  }

  a.button-link,
  .button-link,
  a.wp-block-button__link,
  .is-style-outline a.wp-block-button__link,
  .contact-row button,
  .wp-block-button__link:visited,
  form.post-password-form input[type="submit"] {
    font-size: 15px;
    min-width: 185px;
  }

  #google-map,
  #contact-map {
    height: 400px;
  }

  .single-related-posts .content-block {
    width: calc(100% - 40px);
    padding: 0 20px;
  }

  .gallery-slider.full-width .slick-list {
    margin: 0;
  }
}

@media (max-width: 781px) {
  .wp-block-columns.full-width .column-dark-green-bg {
    padding: 30px 20px 40px;
  }

  .indent-content,
  .is-content-justification-left.indent-content {
    margin-left: 0vw !important;
  }

  .home-page-animation-quote {
    font-size: 40px;
  }

  .short-content,
  .medium-content,
  .large-content,
  .extra-long-content {
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .menu-overlay-nav a {
    line-height: 55px;
  }

  .menu-overlay-image {
    width: 100%;
  }

  a.footer-logo {
    width: 170px;
    margin-bottom: 40px;
  }

  .footer-signup-title {
    font-size: 32px;
  }

  .credit {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .credit-left,
  .credit-center,
  .credit-right {
    justify-self: center;
    text-align: center;
  }

  .mobile-slider .creato_block-container-listings .grid .creato_block-listing {
    margin: 10px 20px 10px 0;
  }

  .mobile-slider
    .creato_block-container-listings
    .grid
    .creato_block-listing:nth-child(2n + 1),
  .mobile-slider
    .creato_block-container-listings
    .grid
    .creato_block-listing:nth-child(3n + 1),
  .mobile-slider
    .creato_block-container-listings
    .grid
    .creato_block-listing:nth-child(4n + 1) {
    clear: none;
  }

  .creato_block-container.creato_block-container-3-columns .grid,
  .creato_block-container.creato_block-container-4-columns .grid,
  .creato_block-container.creato_block-container-5-columns .grid,
  .archive-news-outer {
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  }

  .creato_block-container.creato_block-container-3-columns
    .grid
    .creato_block-listing:last-child,
  .creato_block-container.creato_block-container-5-columns
    .grid
    .creato_block-listing:last-child {
    grid-column: span 2;
  }

  .button-link.top-bar-button {
    display: none;
  }

  .header-logo {
    width: 140px;
  }

  .top-bar-inner {
    padding: 25px 3vw;
  }

  .footer-signup {
    text-align: center;
  }

  .footer-signup-text {
    width: 100%;
  }

  .sliding-text-outer {
    padding-bottom: 50px;
  }

  .blog-filter-link,
  .blog-filters .cat-item a {
    min-width: max-content;
  }

  .index-content .content-block-columns-3 .content-block-items {
    gap: 4vw 20px;
  }

  .features-list li {
    margin-bottom: 0px;
  }

  .features-view-all {
    margin-top: 20px;
    font-size: 16px;
  }

  .features-lists {
    gap: 3vw;
  }

  .faq-tab-button {
    min-width: max-content;
  }
}

@media (max-width: 640px) {
  #sb_instagram,
  #sb_instagram.sbi_width_resp {
    width: calc(100vw + 16px) !important;
  }
}

@media (max-width: 600px) {
  .single-wrapper {
    margin-top: 126px;
  }

  .content-block-header .archive-link {
    display: none;
  }

  a.content-block-archive-link-bottom {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 25px;
  }

  /* index.php's blog grid isn't a Content Block instance, so it has no
     header archive-link to hide/duplicate - but its own "View more"
     button sits below the grid already, so it just needs to span full
     width here too, matching .content-block-archive-link-bottom. */
  #blog-load-more-button {
    width: 100%;
    box-sizing: border-box;
  }

  form.post-password-form {
    margin: 130px auto 60px;
    padding: 30px 20px;
  }

  form.post-password-form input[name="post_password"] {
    width: 100%;
  }

  .contact-row-pair {
    flex-direction: column;
    gap: 0;
  }

  .contact-row-pair .contact-row-contact_email,
  .contact-row-pair .contact-row-contact_number {
    width: 100%;
  }

  .button-link.top-bar-button {
    min-width: 0;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .wp-block-media-text .wp-block-media-text__content {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 0;
    padding-right: 0;
  }

  .cookie-banner {
    width: 60px !important;
    height: 60px !important;
  }

  .cookie-banner i {
    font-size: 18px !important;
  }

  .full-width-media-text.wp-block-media-text figure.wp-block-media-text__media {
    width: calc(100% + 40px);
  }

  .full-width-media-text.wp-block-media-text.has-media-on-the-right
    figure.wp-block-media-text__media {
    width: calc(100% + 40px);
    left: -20px;
  }

  .wc_privacy_option {
    width: calc(50% - 30px);
    margin-top: 5px;
  }

  .video-outer .video-content h1,
  .video-image .video-content h1 {
    top: -35vw;
    font-size: 35px !important;
  }

  .button-link.menu-overlay-button {
    min-width: max-content;
    font-size: 14px;
  }

  .full-width .wp-block-cover__inner-container figure {
    max-width: 50vw;
  }

  .innstyle-search {
    bottom: 20px;
  }

  .content-block-item-bg {
    border-radius: 0;
  }

  /* Pages-mode Content Blocks with 3 or fewer items - see
     creato_content_block_slider() in script.js, which adds this class
     instead of initialising the slider for these. Still carries
     whichever .content-block-columns-N the editor chose, so this needs
     to win over that base grid-template-columns. */
  .content-block-items.content-block-mobile-grid {
    grid-template-columns: 100%;
    gap: 30px;
    margin: 0;
  }

  .content-block-items.slick-slider {
    width: calc(100% + 30px);
    margin-bottom: 90px;
  }

  .content-block-items.slick-slider .slick-list {
    padding-right: 22vw;
  }

  .content-block-items.slick-slider .slick-dots {
    padding: 0;
    width: calc(100% - 30px);
    bottom: -45px;
  }

  .content-block-items.slick-slider .content-block-item-title,
  .content-block-display-posts .content-block-item-title {
    font-size: 32px !important;
  }

  .content-block-items.slick-slider .content-block-item-meta,
  .content-block-display-posts .content-block-item-meta {
    gap: 3px;
  }

  .content-block-items.slick-slider
    .content-block-item-meta
    > *:not(:last-child)::after,
  .content-block-display-posts
    .content-block-item-meta
    > *:not(:last-child)::after {
    margin-left: 3px;
  }

  .content-block-columns-2 .content-block-item-footer {
    bottom: 0;
    width: 100%;
  }

  #sb_instagram #sbi_images .slick-slide.sbi-slide-offset {
    margin-top: 2vw !important;
  }

  #sb_instagram #sbi_images .sbi_item {
    margin: 0 10px 0 0 !important;
  }

  a.footer-logo {
    display: none;
  }

  .footer-links-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-menu {
    width: 100%;
  }

  .footer-menu ul li {
    text-align: center;
  }

  .footer-menu ul li a {
    display: inline-block;
  }

  .footer-contact {
    width: 100%;
  }

  .footer-menu-title {
    margin-bottom: 15px;
  }

  .social-icons-container {
    justify-content: center;
  }

  .page-content-11 .social-icons-container {
    justify-content: left;
  }

  .credit {
    gap: 0 20px;
  }

  .footer-signup-input {
    flex: 1 1 100%;
  }

  .footer-signup-submit {
    width: 100%;
  }

  .blog-filters {
    margin: 50px 0 30px;
  }

  .gallery-slider-single .gallery-arrow {
    width: 45px;
    height: 45px;
  }

  .gallery-slider-single .gallery-arrow i {
    font-size: 17px;
  }

  .gallery-slider-single .gallery-arrow-prev {
    left: -55px;
  }

  .gallery-slider-single .gallery-arrow-next {
    right: -55px;
  }

  .single-wrapper .custom-breadcrumbs {
    margin: 2vw 10px 20px;
  }

  .gallery-slider.full-width .gallery-arrow-prev {
    right: 90px;
  }

  .gallery-slider.full-width .gallery-arrow-next {
    right: 20px;
  }

  .page-content-11 .deco-bush::after {
    top: 75%;
  }

  .custom-breadcrumbs {
    margin: 20px 0 25px;
  }

  :where(.wp-block-columns.is-layout-flex) {
    gap: 2em;
  }

  .timeline-post-title {
    margin: 0 0 20px;
  }

  .home-page-animation-quote {
    font-size: 26px;
  }

  .remove-spacer {
    display: none;
  }

  .remove-gap {
    gap: 0;
  }

  .stay-page-nav .stay-page-nav-list {
    gap: 11px;
  }

  .top-bar-fixed .top-bar-inner,
  .top-bar-solid .top-bar-inner {
    padding: 15px 20px;
  }

  .menu-overlay-inner {
    padding: 50px 20px 60px;
  }

  .menu-overlay-close {
    left: 20px;
    top: 30px;
  }

  .menu-overlay-nav a {
    line-height: 45px;
  }

  /* Sub-menus become a panel layered over the whole menu column, opened
     by tapping the parent (script.js adds .is-open) rather than on hover. */
  .menu-overlay-content {
    position: relative;
  }

  .menu-overlay-nav > ul {
    position: static;
    width: auto;
  }

  .menu-overlay-nav .sub-menu {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: auto;
    padding-left: 0;
    background: #3c3d26;
    transform: translateX(20px);
  }

  .menu-overlay-nav li:hover > .sub-menu,
  .menu-overlay-nav li:focus-within > .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition:
      opacity 0.35s ease,
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .menu-overlay-nav li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .menu-overlay-back-item,
  .menu-overlay-parent-item {
    display: block;
  }

  .menu-overlay-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 15px;
    padding: 0;
    background: none;
    border: none;
    color: #ffffffad;
    font-family: "Cabin", "Helvetica", "Arial", sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
  }
}

@media (max-width: 500px) {
  /* .gallery-slide img sizes itself by height (see base rule + the
     max-height:50vw override at 1000px and below), with width following
     naturally from each image's own aspect ratio - there's no slidesToShow
     count to change for the variable-width Slick setup in script.js.
     Raising max-height here makes each slide wider, so 2 sit fully
     visible at this width (with the usual peek of the next one) instead
     of 3. */
  .gallery-slider.full-width .gallery-slide img {
    max-height: 75vw;
  }

  .index-content .content-block-columns-3 .content-block-items {
    grid-template-columns: 100%;
    gap: 50px 20px;
  }

  .single-wrapper {
    margin-top: 100px;
  }

  .single-related-posts {
    margin-top: 40px;
    padding: 60px 0 80px;
  }

  .stay-page-nav .centred {
    padding: 0;
  }

  .stay-page-nav {
    margin-left: -20px;
    width: calc(100% + 40px);
  }

  /* Nav items can go off the edge here - the row scrolls horizontally
     rather than wrapping onto extra lines. script.js keeps whichever
     item is active scrolled into view as the page scrolls, so the user
     can always see roughly where they are without scrolling manually. */
  .stay-page-nav .stay-page-nav-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 30px;
    height: 60px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .stay-page-nav .stay-page-nav-list::-webkit-scrollbar {
    display: none;
  }

  .stay-page-nav-link {
    flex: 0 0 auto;
    font-size: 15px;
    white-space: nowrap;
  }

  .stay-page-nav .stay-page-nav-list li:first-of-type {
    padding-left: 20px;
  }

  .stay-page-nav .stay-page-nav-list li:last-of-type {
    padding-right: 20px;
  }

  .features-lists {
    flex-direction: column;
    gap: 0;
    padding-left: 20px;
  }

  .features-list {
    display: contents;
  }

  .feature-hidden {
    order: 1;
  }

  .features-categories {
    gap: 20px;
    padding-left: 20px;
  }

  /* .features-lists is reused unchanged inside each category (see
     render_features_two_column_lists() in features.php), so it'd
     otherwise inherit the same 20px indent a second time here - .features-categories
     already applies it once, to keep each category's heading and list
     aligned together. */
  .features-categories .features-lists {
    padding-left: 0;
  }

  .features-block {
    padding: 30px 30px;
  }

  .review-quote {
    margin: 20px 0 30px;
  }

  .reviews-eyebrow {
    margin-bottom: 20px;
  }

  .reviews-slider-controls {
    order: 1;
  }

  .reviews-bottom {
    flex-direction: column;
    margin-top: 40px;
    gap: 20px;
  }

  .reviews-bottom > * {
    width: 100%;
  }

  .faq-tabs-nav {
    flex-direction: column;
    gap: 0;
  }

  .faq-tab-button {
    width: 100%;
    min-width: 0;
    border: none;
    border-bottom: 2px solid #e3e5d6;
  }

  .faq-tab-button:hover,
  .faq-tab-button.active {
    border-bottom-color: #843500;
  }

  .content-block-items.slick-slider .slick-dots li button:before {
    font-size: 20px;
  }

  .content-block-items.slick-slider .slick-dots li {
    width: 15px;
  }

  .overlap-bottom-left .overlapping-images-small {
    left: -30%;
  }

  .stay-page-nav .stay-page-nav-list {
    gap: 25px;
  }

  .sliding-text-repeat {
    font-size: 7vw;
    line-height: 7vw;
  }

  .sliding-text-scroll {
    height: 7vw;
  }

  .features-category-name {
    margin: 10px 0 1vw;
  }
}

@media (max-width: 450px) {
  .creato_block-container.creato_block-container-2-columns .grid,
  .creato_block-container.creato_block-container-3-columns .grid,
  .creato_block-container.creato_block-container-4-columns .grid,
  .creato_block-container.creato_block-container-5-columns .grid,
  .archive-news-outer {
    grid-template-columns: 100%;
  }

  .creato_block-container.creato_block-container-3-columns
    .grid
    .creato_block-listing:last-child,
  .creato_block-container.creato_block-container-5-columns
    .grid
    .creato_block-listing:last-child {
    grid-column: span 1;
  }

  .content-block-items.slick-slider .content-block-item-title,
  .content-block-display-posts .content-block-item-title {
    font-size: 28px !important;
  }
}

@media (max-width: 410px) {
  /* Both the static "Sign up" row and the real EmailOctopus row above -
     flex-direction switches their main axis to vertical, so flex-basis
     (220px on the input) would otherwise end up sizing height instead of
     width; flex:none clears that out in favour of the explicit
     width:100% below, which sizes them on the (now cross-axis) width as
     expected. */
  .footer-signup-form,
  .footer-signup .emailoctopus-form .main-form {
    flex-direction: column;
  }

  .footer-signup-input,
  .footer-signup-submit,
  .footer-signup .inline-container .emailoctopus-form input[type="email"],
  .footer-signup .inline-container .emailoctopus-form input[type="submit"] {
    flex: none;
    width: 100%;
  }

  .footer-signup
    [data-form="10a204ce-ac5d-11f1-b461-09e8b4d9622c"]
    .emailoctopus-form
    [eo-form-fields-container] {
    width: 100%;
  }
}

@media (max-width: 400px) {
}

@media (max-width: 350px) {
  .wc_privacy_text strong {
    width: 90px;
    text-align: left;
  }

  .wc_privacy_policy_buttons {
    margin-top: 5px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  select::-ms-expand {
    display: none;
  }
}