:root {
      --blue-dark: #274b79;
      --blue-medium: #607fa7;
      --gold-light: #FFE6A9;
      --gold-pale: #FFF6D4;
      --box-bg: #FFF8E8;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Helvetica Neue', sans-serif;
      color: #333;
      overflow-x: hidden;
    }

    header {
      background-color: var(--blue-medium);
      color: white;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2rem;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10;
    }

    .logo img {
      max-width: 300px;
      height: auto;
    }

    nav ul {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

	nav a,
	nav a:visited{
      text-decoration: none;
      color: #eeeeee;
    }
	
	nav a:hover,
		nav a:focus {
		color: #fff;
		text-decoration: underline;
		text-decoration-thickness: 2px;     /* or 3px for thicker underline */
		text-underline-offset: 4px;         /* distance between text and underline */
	}

/* Active page styling - assign class="active" in HTML */
	nav a.active {
		color: #fff;
		text-decoration: underline;
		text-decoration-thickness: 2px;     /* or 3px for thicker underline */
		text-underline-offset: 4px;         /* distance between text and underline */
	}

    .hamburger {
      display: none;
      font-size: 2rem;
      cursor: pointer;
    }

    .mobile-nav {
      position: fixed;
      top: 80px;
      left: -100%;
      width: 70%;
      height: 100%;
      background: rgba(39, 75, 121, 0.6);
      backdrop-filter: blur(4px);
      z-index: 9;
      transition: left 0.3s ease;
      padding: 4rem 2rem;
    }

    .mobile-nav.open {
      left: 0;
    }

    .mobile-nav a,
	.mobile-nav a:visited {
      display: block;
      color: white;
      text-decoration: none;
      margin-bottom: 1rem;
      font-size: 1.2rem;
      font-weight: bold;
    }

    .hero {
      margin-top: 100px;
      height: 600px;
      background: url('img/hero-letterbox.jpg') no-repeat center center;
      background-size: cover;
    }
	
a {
  color: #3A6FA3;
  text-decoration: none; /* optional: keeps it cleaner */
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: #274b79; /* your --blue-dark for a subtle darken on hover */
  text-decoration: underline; /* keeps it obvious it's a link */
}

a:visited {
  color: #3A6FA3; /* same as normal links */
}
    .section {
      position: relative;
      padding: 4rem 2rem;
	  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
    }
	
	h2 {
		text-align: center;
		margin: 1.5rem auto;
		color: #555;
	}
	
	.pointfive,
	.pointfive p {
		line-height: 1.5;
		margin-bottom: 1rem;
	}

    .section.alt {
      clip-path: polygon(0 0, 100% 3vw, 100% 100%,  0 100%);
    }

    .section-one {
      background: var(--gold-light);
      margin-top: -3vw;
    }

    .section-two {
      background: var(--gold-pale);
      margin-top: -3vw;
    }
	.twocol-wrapper {
		max-width: 960px;
		margin: 0 auto;
		padding: 0 2rem;  
	}


	h3 {
  display: flex;
  align-items: center;        /* Vertically center lines with text */
  justify-content: center;    /* Center the whole group horizontally */
  font-weight: bold;
  color: #454545;
  text-align: center;
  margin: 2rem 0;             /* Adjust spacing above/below as needed */
  gap: 1rem;                  /* Space between lines and text */
  transform: translateZ(0);   /* force layer promotion + pixel snap */
}

h3::before,
h3::after {
  content: "";
  flex: 1;                    /* Make lines expand to fill available space */
  height: 1px !important;     /* Thickness of the line */
  background-color: #333;     /* Line color */
  margin: 0 0.2rem;           /* Optional: adjust spacing from text */
  transform: translateZ(0);
}

    footer {
      background: var(--blue-dark);
      color: white;
      text-align: center;
      padding: 3rem 1rem;
      clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
      margin-top: -3vw;
    }
	footer p {
		padding: 2rem;
		line-height: 2;
		color: #ddd;
	}

    @media (max-width: 768px) {
      header {
        height: 80px;
      }
      .logo img {
        max-width: 260px;
      }
      .hero {
        margin-top: 80px;
        height: auto;
        aspect-ratio: 1500 / 800;
        background: url('img/hero-1200.jpg') no-repeat center center;
        background-size: cover;
      }
      nav ul {
        display: none;
      }
      .hamburger {
        display: block;
        color: white;
      }
	  footer p {
		padding: 1rem 0;
	  }
    }

    .content-wrapper {
		max-width: 960px;
		margin: 0 auto;
		padding: 0 2rem;
    }
	
	.threebox-wrapper {
		margin: 0 auto;
		padding: 4rem 1rem;
	}

    @media (max-width: 768px) {
      .content-wrapper {
        max-width: 100%;
        padding: 0.5rem 1rem;
      }
    }

    /* Swiper styles */
    .swiper {
		width: 100%;
		padding: 1rem 0;
		margin: 4rem 0; /* Adds space above and below */
		overflow: hidden;
		position: relative;
	}

    .swiper-wrapper {
      display: flex;
	  margin-bottom: 2rem;
    }

    .swiper-slide {
      width: 360px !important;
      flex-shrink: 0;
      margin-right: 10px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #333;
      opacity: 1;
    }
	.twocol {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 2rem auto;
}

.twocol img {
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.twocol.reverse {
  flex-direction: row-reverse;
}

.twocol .text {
  flex: 1;
  min-width: 250px;
}
.page-spacer {
  height: 100px;
}

@media (max-width: 768px) {
  .page-spacer {
    height: 80px;
  }
}
ul {
  list-style-position: inside;   /* makes bullets appear inside the padding area */
  padding-left: 0;               /* remove default padding */
  margin-left: 0;                /* optional, if there's a default margin */
}
p.top {
	padding-top: 12px;
}
.content-wrapper img {
  display: block;
  max-width: 960px;    /* limit to 960px */
  width: 100%;         /* scale down for mobile */
  height: auto;
  margin: 0 auto;      /* center the image */
}
.button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-align: center;
  min-width: 140px;
}

.btn.learn-more {
  background-color: var(--blue-medium);
  color: white;
}

.btn.book-now {
  background-color: #c7793b; /* Complementary warm orange to sandy tones */
  color: white;
}

.btn:hover {
  transform: scale(1.05);
}
#map { height: 500px; width: 100%; border: 1px solid #ccc; }
.corners {
	border-radius: 8px;
}
ul.spaced-list {
  list-style-type: disc;       /* keep default disc bullets */
  list-style-position: outside;
  padding-left: 1.5rem;        /* keeps bullets nicely indented */
  margin: 0;                   /* reset default ul margin */
}

ul.spaced-list li {
  margin-bottom: 10px;         /* space between list items */
}

/* Booking tiles grid */
.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; /* 20px */
  max-width: 960px;
  margin: 0 auto;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .booking-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.booking-card {
  background: var(--gold-pale);            /* contrasts with var(--gold-light) section */
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(39, 75, 121, 0.08); /* subtle edge for definition */
  box-shadow: 0 4px 12px rgba(204, 184, 135, 0.35); /* #CCB887 with transparency */
  transition: transform 0.2s, box-shadow 0.2s;
}

.booking-card:hover,
.booking-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(153, 124, 85, 0.45); /* #997C55 with transparency */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .booking-card { transition: none; }
  .booking-card:hover,
  .booking-card:focus-within { transform: none; }
}

/* Logo handling */
.booking-card img {
  display: block;
  margin: 0 auto 1rem;
  max-height: 80px;   /* keeps logos crisp but not huge */
  width: auto;
  max-width: 100%;     /* protect narrow screens */
  height: auto;
}

/* Text inside card */
.booking-card p {
  margin: 0.75rem auto 1rem;
  color: #555;
  line-height: 1.5;
  max-width: 48ch;
}

/* Button sizing within cards (reuses your .btn + .book-now) */
.booking-card .btn {
  width: 100%;
  max-width: 260px;
}