/* =====================================================
   SHIP HAPPENS TOURS - ORGANIZED CSS
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --navy: #00287E;
  --aqua: #00bcd4;
  --bright-aqua: #00e5ff;
  --seafoam: #8ee8e2;
  --soft-seafoam: #dffcff;
  --coastal-teal: #20b2ab;
  --deep-teal: #067898;
  --sand: #f8f6f2;
  --white: #ffffff;
  --dark: #061b33;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  color: var(--navy);
  overflow-x: hidden;
  background: #ffffff;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 550px;
  height: 520px;
  background-image: url("icons/dolphin2.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
}

body::before {
  right: -30px;
  top: 30px;
  transform: scaleX(-1);
}

body::after {
  left: -30px;
  top: 520px;
  transform: rotate(-8deg);
}
.bg-dolphin {
  position: fixed;

  width: 180px;

  top: 130px;
  left: 35%;

  transform: translateX(-50%);

  opacity: 0.22;

  pointer-events: none;

  z-index: 1;
}

.page-wrap {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.site-header {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto 10px;
  padding: 10px;
  text-align: center;
  border-radius: 0 0 26px 26px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #1395A1 25%, #1395A1 45%, #20B2AB 70%, #067898 100%);
  box-shadow: 0 12px 26px rgba(0, 40, 126, 0.18);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 0 26px 26px;
  padding: 3px;
  background: linear-gradient(100deg, var(--aqua), var(--navy));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.logo-about {
  width: 600px;
  max-width: 100%;
  height: 250px;
  display: block;
  margin: 0 auto;
  border-radius: 0 0 26px 26px;
}
.tour-top-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 20px 10px !important;
  box-sizing: border-box !important;
}

.header-center {
  max-width: 500px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.page-title-img {
  margin: 0 auto 8px !important;
}

.header-tagline {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* HERO IMAGE SCALING FIX */
.intro-hero,
.home-hero {
  width: 92% !important;
  max-width: 1100px !important;
  margin: 20px auto 35px !important;
  min-height: 380px !important;
  max-height: 420px !important;
  border-radius: 20px !important;
  border: 3px solid var(--sign-turquoise, #009cb0) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 30px 20px !important;
  box-sizing: border-box !important;
  background-size: cover !important;
  background-position: center !important;
}

.home-hero img,
.intro-hero img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 350px !important;
  object-fit: contain !important;
}
.header-logo {
  width: 240px;
  margin-bottom: 8px;
}
.header-tagline {
  margin-top: 10px;
  margin-bottom: 0;

  font-family: "Dancing Script", cursive !important;

  font-size: 1rem !important;

  font-weight: 700;

  color: #082b63;

  text-align: center;

  text-shadow:
    0 2px 6px rgba(255,255,255,0.7);

  letter-spacing: 0.5px;

  line-height: 1.2;
}

/* HEADER */

.tour-top-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 255px;
  padding: 25px 5% 35px;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: end;
  background: transparent;
  z-index: 1;
}

.header-left,
.header-center,
.header-right {
  position: relative;
  z-index: 2;
}

.header-left {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  padding-left: 120px;
}


.header-center {
  text-align: center;
  align-self: center;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title-row h4 {
  margin: 0;

  font-size: 1rem;

  font-weight: 600;

  color: #082b63;

  text-shadow:
    0 2px 6px rgba(255,255,255,0.7);

  letter-spacing: -0.5px;
}
.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.title-row span {
  width: 110px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,160,255,0.25) 15%,
    rgba(0,40,126,0.65) 50%,
    rgba(0,160,255,0.25) 85%,
    transparent 100%
  );
  transform: skewX(-35deg);
  box-shadow: 0 0 8px rgba(0,180,255,0.15);
}

.page-title-img {
  width: 300px !important;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

.title-divider {
  margin-top: 12px;
  font-size: 2rem;
  color: #0c3f75;
  letter-spacing: 6px;
}

.nav-phone {
  margin-left: 40px;
  font-size: 18px;
  font-weight: 900;
  color: #082b63;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 1px;
}

.anchor-icon {
  width: 75px;
  height: auto;
  margin-bottom: 3px;
}

.tour-subtitle {
  color: #264c7d;
  margin: 14px 0 0;
  font-size: 1.05rem;
}

.header-right {
  text-align: right;
  align-self: end;
  padding-bottom: 12px;
}

.main-nav,
.tours-page,
.tours-page-hero,
.tour-detail,
.tour-info-box {
  position: relative;
  z-index: 2;
}

/* NAV */


/* ==========================================
   SHIP HAPPENS - KEY WEST WOODEN NAVIGATION
========================================== */

.main-nav {
  width: 96%;
  max-width: 1400px;
  margin: 48px auto 25px;
  padding: 12px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.main-nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.main-nav a::before {
  display: none;
}



.main-nav img {
  display: block;
  width: 145px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(2px 5px 4px rgba(0,0,0,0.2));
}

.main-nav .contact-link {
  padding: 10px 15px;
  color: #075b61;
  font-weight: 800;
  font-size: 16px;
}

.main-nav .contact-link:hover {
  color: #d56c78;
}

/* Phone is positioned OUTSIDE and ABOVE the sign row. */
.main-nav .nav-phone {
  position: absolute;
  top: -34px;
  right: 115px;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: #075b61;
  white-space: nowrap;
}
/* DARKEN FOOTER WOOD FOR BETTER CONTRAST */

.holy-footer {
    background-image:
        linear-gradient(
            rgba(0, 25, 35, 0.30),
            rgba(0, 25, 35, 0.30)
        ),
        url("images/footer.png");
}
/* TABLET */

@media (max-width: 900px) {
  .main-nav img {
    width: 125px;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .main-nav {
    width: 100%;
    gap: 8px;
    padding: 10px;
    margin: 42px auto 20px;
  }

  .main-nav img {
    width: 105px;
  }

  .main-nav .nav-phone {
    top: -30px;
    right: 22px;
    width: auto;
    margin: 0;
    font-size: 15px;
    text-align: right;
  }
}

.main-nav a:hover,
.main-nav a:focus-visible {
  background: transparent;
  color: inherit;
  box-shadow: none;
  transform: translateY(-5px) rotate(-2deg);
}

.main-nav .nav-book {
  background: transparent;
  color: inherit;
}

/* BUTTONS */

.hero-btn,
.tour-btn,
button {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 6px;
  border: none;
  background: linear-gradient(180deg, #f8ffff 0%, #bfeeed 45%, #7edfd9 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
  transition: all 0.25s ease;
  cursor: pointer;
  width: auto !important;
}

.hero-btn:hover,
.tour-btn:hover,
button:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

.hero-btn::before,
.tour-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 70%;
  height: 100%;
  background: linear-gradient(180deg, #f8ffff 0%, #b9f2ef 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}

.hero-btn:hover::before,
.tour-btn:hover::before {
  animation: shimmer 0.8s ease;
}

/* HOME HERO */

.intro-hero {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto 40px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;

  align-items: center;

  padding: 10px 20px 30px;

  position: relative;
  z-index: 1;
}

.intro-text {
  padding-left: 20px;
}
.home-hero {
  min-height: 85vh;
  background:
    linear-gradient(rgba(0,40,126,0.10), rgba(0,40,126,0.18)),
    url("images/hero.png");
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 120px 20px 80px;
}

.hero-overlay {
	display: none !important;
  background: transparent;
  padding: 0;
  max-width: 900px;
  text-align: center;
  position: relative;
  top: -100px;
}

.hero-overlay h1 {
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: white;
  text-shadow: 0 5px 18px rgba(0,0,0,0.55);
  margin-bottom: 8px;
}


.hero-tagline {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: white;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

.hero-location,
.hero-copy {
  color: white;
  font-size: 1.1rem;
  text-shadow: 0 3px 10px rgba(0,0,0,0.45);
}
.hero-sign{
    position:absolute;

    right:-1%;
    bottom:-40px;

    width:240px;

    z-index:6;

    filter:
      drop-shadow(0 10px 15px rgba(0,0,0,.3));
}
.hero-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 34px;
  background: #00e5ff;
  color: #00287E;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.hero-btn:hover {
  background: white;
}

.trust-list {
  columns: 2;
  padding-left: 22px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.85;
  font-weight: 700;
}

.intro-image {
  text-align: center;
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.intro-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  padding: 3px;
  background: linear-gradient(135deg, var(--bright-aqua), var(--navy));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.intro-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 26px;
  border: 4px solid var(--navy);
  box-shadow: 0 20px 45px rgba(0,0,0,0.23);
}

/* OUR TOURS PAGE */
.home-tours {
  width: 90%;
  max-width: 1200px;
  margin: 18px auto 60px;
  text-align: center;
}

.section-kicker {
  margin: 0;
  color: var(--aqua);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 14px;
}

.home-tours h2 {
  margin: 5px 0 28px;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.home-tour-grid {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.home-tour-card {
  width: 350px;
  min-height: 400px;
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 32px rgba(0,0,0,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.home-tour-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 3px;
  background: linear-gradient(135deg, var(--bright-aqua), var(--navy));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.home-tour-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 46px rgba(0,0,0,0.28);
}

.home-tour-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 24px 24px 0 0;
}

.home-tour-content {
  padding: 18px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  flex: 1;
}
.home-tour-card p {
  min-height: 60px;
}
.home-tour-card h3 {
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 900;
}

.home-tour-card p {
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 16px;
  color: #12356f;
}

.home-tour-btn::after {
  content: " →";
  
}

.home-tour-card.selected {
  background: var(--navy);
  color: white;
}


.tours-page {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.tours-page-hero {
  text-align: center;
  margin: 30px auto 35px;
}

.tours-page-hero p {
  font-size: 18px;
  font-weight: 700;
  color: #35507c;
}

.choose-title {
  font-size: clamp(32px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 10px;
  color: #082b63;
  -webkit-text-stroke: 1px rgba(0,40,126,0.35);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.75),
    0 2px 4px rgba(0,40,126,0.12);
  position: relative;
}

.tour-detail {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 24px auto;
  padding: 12px;
  max-width: 920px;
  background: rgba(255,255,255,0.78);
  border-radius: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  transition: 0.35s ease;
}

.tour-detail:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.16);
}

.tour-detail::before,
.tour-info-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(0,229,255,0.65), rgba(0,40,126,0.65));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tour-detail > img {
  width: 42%;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
}

.tour-detail.reverse {
  flex-direction: row-reverse;
}

.reverse-text {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.reverse-text .tour-content {
  width: 100%;
  justify-content: flex-start;
}

.tour-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
   flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 18px;
}

.tour-content h2 {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--navy);
}

.tour-content p {
  font-size: 15px;
  line-height: 1.5;
  color: #28446f;
  margin: 0 0 10px;
  min-height: 60px;
}

.tour-icons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.tour-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
}

.tour-icon img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  margin-bottom: 5px;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

.tour-icon span {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
}

.recommend-row {
  margin: 0 0 10px;
}

.recommend-row span {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--navy);
}

.mini-items {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #35548f;
}

.tour-btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 10px 18px;
}

.tour-info-section {
  max-width: 900px;
  margin: 35px auto;
  padding: 0 20px;
  text-align: center;
  color: var(--navy);
}

.info-divider {
  width: 65%;
  max-width: 520px;
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,40,126,0.3),
    transparent
  );
}

.tour-info-section h4,
.tour-info-section h5,
.tour-info-section h3 {
  margin-bottom: 10px;
}

.tour-info-section p {
  margin-bottom: 12px;
  line-height: 1.5;
  font-size: 0.65rem;
}

.tour-info-section ul {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  list-style: disc;
  padding: 0;
  margin: 18px auto;
}

.tour-info-section li {
  font-size: 0.65rem;
  margin-left: 18px;
}
.home-tour-content .tour-btn {
  align-self: center;
  margin-top: auto;
}
.badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 7px 13px;
  background: linear-gradient(135deg, #ffffff, #7fefff);
  color: var(--navy);
  border: 2px solid var(--white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

/* BOOKING PAGE */

.step {
  display: none;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.step.active {
  display: block;
}

.booking-options {
  display: grid;
  grid-template-columns: repeat(2, 280px);
  justify-content: center;
  gap: 28px;
  padding: 20px;
}

.booking-card {
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  padding: 15px;
  border-radius: 20px;
  text-align: center;
  width: 260px;
  border: 1px solid #eee;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  transition: all 0.25s ease;
}

.booking-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.booking-card.selected,
.day-btn.selected {
  background: var(--navy) !important;
  color: white !important;
  border: 3px solid #2da7c1 !important;
}

.booking-card h3 {
  margin: 5px 0 10px;
  font-size: 1.1rem;
  font-weight: 900;
}

.booking-card img {
  display: block;
  margin: 0 auto 10px;
  width: 100%;
  max-width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
}

.booking-card p {
  font-weight: 800;
  margin: 8px 0 0;
}

.booking-card.selected .selected-label {
  visibility: visible !important;
  display: block !important;
  color: #7fefff !important;
  margin-top: 10px;
}

.booking-card:not(.selected) .selected-label {
  visibility: hidden !important;
}

.booking-container input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  padding: 10px 5px;
  font-size: 14px;
  background: transparent;
  outline: none;
}

.booking-container input:focus {
  border-bottom: 2px solid var(--aqua);
}


#step-1 > div {
  max-width: 1100px !important;
  padding: 34px !important;
}


#progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 30px auto 35px;
  width: fit-content;
}
#month-label {
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin: 18px auto;
  text-align: center;
}

#days-grid {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  justify-content: center;
  gap: 0;
  margin: 20px auto;
  border: 1px solid rgba(0,40,126,0.18);
  border-radius: 16px;
  overflow: hidden;
  width: fit-content;
  background: white;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

.calendar-day-name {
  background: linear-gradient(180deg, #eaffff, #bff3f0);
  color: var(--navy);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 4px;
  border-right: 1px solid rgba(0,40,126,0.14);
  border-bottom: 1px solid rgba(0,40,126,0.14);
  text-align: center;
}

.calendar-blank {
  height: 58px;
  border-right: 1px solid rgba(0,40,126,0.10);
  border-bottom: 1px solid rgba(0,40,126,0.10);
  background: rgba(248,248,248,0.75);
}

.day-btn {
  width: 80px;
  height: 58px;
  border: none;
  border-right: 1px solid rgba(0,40,126,0.10);
  border-bottom: 1px solid rgba(0,40,126,0.10);
  background: white;
  color: var(--navy);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.day-btn:hover {
  background: var(--soft-seafoam);
}

.day-btn.selected {
  background: var(--navy) !important;
  color: white !important;
  border: 2px solid var(--aqua) !important;
  transform: scale(1.03);
}
.progress-step {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.progress-step.step-waiting {
  background: #e5e7eb;
  color: var(--navy);
}

.progress-step.step-active {
  background: var(--aqua);
  color: white;
}

.progress-step.step-done {
  background: var(--navy);
  color: white;
}
/* BOOKING DETAILS CARD */
#progress-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  margin: 35px auto 50px;
  position: relative;
}

.progress-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* LINE CONNECTORS */
.progress-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 62px;

  width: 55px;
  height: 4px;

  background: linear-gradient(
    90deg,
    #7fefff,
    #d9d9d9
  );

  border-radius: 20px;
}
.progress-item span {
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}
.details-card {
  width: 90%;
  max-width: 1200px;
  margin: 25px auto;
  padding: 32px;
  background: rgba(255,255,255,0.88);
  border-radius: 25px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.13);
  border: 2px solid rgba(0,188,212,0.28);
  text-align: center;
}

.details-card h2 {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}

.details-intro {
  font-size: 15px;
  font-weight: 600;
  color: #31527f;
  margin-bottom: 28px;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: left;
}

.details-fields,
.details-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.details-card label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: 0.7px;
}

.details-card input,
.details-card select,
.details-card textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid rgba(0,40,126,0.18);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  color: var(--navy);
  background: white;
  outline: none;
}

.details-card input:focus,
.details-card select:focus,
.details-card textarea:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 4px rgba(0,188,212,0.12);
}

.details-card textarea {
  min-height: 230px;
  resize: vertical;
}

.details-card .tour-btn {
  margin: 28px auto 0;
  display: inline-block;
}
.form-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: end;
  margin-bottom: 22px;
}

.icon-bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e9ffff, #bff3f0);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(0,188,212,0.18);
}

.input-wrap {
  display: flex;
  flex-direction: column;
}

.input-wrap label,
.notes-title-row label {
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: 0.8px;
}

.input-wrap input,
.input-wrap select {
  height: 54px;
  border-radius: 14px;
  border: 2px solid rgba(0,40,126,0.16);
  background: white;
  padding: 0 18px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  color: var(--navy);
  outline: none;
}

.input-wrap input:focus,
.input-wrap select:focus,
.details-notes textarea:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 4px rgba(0,188,212,0.12);
}

.notes-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.details-notes textarea {
  width: 100%;
  min-height: 280px;
  border-radius: 16px;
  border: 2px solid rgba(0,40,126,0.16);
  background: white;
  padding: 18px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  color: var(--navy);
  resize: vertical;
  outline: none;
}
@media (max-width: 700px) {

  .details-grid {
    grid-template-columns: 1fr;
  }

  .details-card {
    padding: 24px 18px;
  }

  .details-card h2 {
    font-size: 34px;
  }

}
/* CONTACT PAGE */

.contact-hero {
  width: 80%;
  max-width: 1400px;
  min-height: 460px;
  margin: 30px auto;
  position: relative;
  background-image: url("waterlogo.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: 38px;
  box-shadow:
    0 0 0 2px rgba(64,214,216,0.30),
    0 18px 35px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 35px 0 35px 70px;
  overflow: hidden;
}

.contact-overlay {
  width: 500px;
  padding: 24px 28px;
  border-radius: 24px;
  margin-left: auto;
  margin-right: 60px;
  background: rgba(255,255,255,0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.contact-overlay h2 {
  font-family: "Dancing Script", cursive;
  color: #32aeb8;
  font-size: 54px;
  line-height: 1;
  margin: 0 0 8px;
  font-weight: 700;
}

.contact-overlay p {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  margin: 18px auto;
}

.contact-info {
  text-align: center;
  margin: 30px auto;
  max-width: 600px;
}

.contact-form {
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  font-family: "Dancing Script", cursive;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border-radius: 10px;
  border: 2px solid var(--navy);
}

.contact-form button {
  padding: 8px 18px;
}

/* WAVE */

.wave-divider {
  width: 30%;
  margin: 0 auto 12px;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 15px;
}

/* ABOUT PAGE */

.about-hero {
  width: 80%;
  max-width: 1400px;
  min-height: 460px;
  margin: 30px auto;
  background-image: url("waterlogoarial.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: 38px;
  box-shadow:
    0 0 0 2px rgba(64,214,216,0.30),
    0 18px 35px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 35px 0 35px 70px;
  overflow: hidden;
}

.about-overlay {
  width: 520px;
  padding: 28px 30px;
  border-radius: 24px;
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.about-overlay h2 {
  font-family: "Dancing Script", cursive;
  color: #32aeb8;
  font-size: 54px;
  line-height: 1;
  margin: 0 0 8px;
  font-weight: 700;
}

.about-overlay p {
  color: var(--navy);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  margin: 18px auto;
}

.about-cta h2 {
  font-family: "Poppins", Arial, sans-serif;
  color: var(--navy);
  font-size: 28px;
  line-height: 1.10;
  margin-top: 24px;
}

.mini-wave {
  width: 115px;
  margin: 8px auto 22px;
}

.mini-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.mini-wave path {
  fill: none;
  stroke: #35c2cb;
  stroke-width: 4;
  stroke-linecap: round;
}

.about-cta p {
  margin-bottom: 18px;
}

/* FOOTER */
.holy-footer {
  position: relative;

  min-height: 170px;

  background-image:
  
    url("images/footer.png");

  background-size: cover;

  background-position: center top;

  background-repeat: no-repeat;

  padding: 18px 10px 14px;

  overflow: hidden;

  border-top: 3px solid rgba(255,255,255,0.4);

  box-shadow:
    0 -6px 18px rgba(0,0,0,0.06);
}

.footer-overlay {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: auto;
  text-align: center;
}

.footer-quote {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: #00287E;
  margin: 0 0 8px;
  text-shadow:
    0 2px 8px rgba(255,255,255,0.9),
    0 0 12px rgba(0,229,255,0.3);
}

.footer-copy {
  font-size: 0.9rem;
  color: #00287E;
  margin: 0;
}

/* ANIMATION */

@keyframes shimmer {
  0% { left: -80%; }
  100% { left: 130%; }
}

/* TABLET */

@media (max-width: 900px) {
  .intro-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .trust-list {
    columns: 1;
    text-align: left;
    display: inline-block;
  }

  .tour-detail,
  .tour-detail.reverse {
    flex-direction: column;
  }

  .tour-detail > img {
    width: 100%;
    height: 260px;
  }

  .tour-content h2 {
    font-size: 30px;
  }

  .tour-icons {
    justify-content: center;
  }

  .tour-btn {
    align-self: center;
  }

  .about-hero {
    justify-content: center;
    text-align: center;
    padding: 30px;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .site-header,
  .main-nav,
  .page-wrap,
  .tours {
    width: 94%;
  }

  .logo {
    width: 260px;
  }

  .site-header p {
    font-size: 15px;
  }

  .main-nav {
    gap: 8px;
    padding: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 42px auto 20px;
  }

  .intro-text h3 {
    font-size: 34px;
  }

  .hero-copy {
    font-size: 16px;
  }

  .tour-card {
    width: 100%;
    max-width: 370px;
    min-height: 430px;
  }

  .tour-card img {
    height: 260px;
  }

  .tours h2 {
    font-size: 32px;
  }

 @media (max-width: 700px) {

  .booking-options {
    grid-template-columns: 1fr;
  }

}
  .booking-card {
    width: 90%;
    max-width: 320px;
  }

  .wave-divider {
    width: 60%;
  }

  .about-hero {
    width: 94%;
    min-height: 520px;
    padding: 20px;
  }

  .about-overlay {
    padding: 24px 18px;
  }

  .about-overlay h2 {
    font-size: 34px;
  }

  .about-overlay p {
    font-size: 15px;
    line-height: 1.65;
  }
}
/* FOOTER BACKGROUND: display the full wide artwork */
.holy-footer {
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 1;
  background-image: url("images/footer.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .holy-footer {
    aspect-ratio: auto;
    min-height: 320px;
    background-size: 100% 100%;
  }
}


/* =========================================================
   SHIP HAPPENS: ACTUAL ARTWORK ONLY — NO CSS ROPE OR FAKE CARDS
   ========================================================= */
.keywest-lower-section {
  position: relative;
  isolation: isolate;
  background: #f7f5ef url("images/background.png") center top / cover repeat-y;
  padding: 45px 16px 55px;
}
.keywest-lower-section .home-tour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 32px);
  width: min(96%, 1250px);
  margin: 0 auto 42px;
  padding: 0;
  align-items: start;
}
.keywest-lower-section .home-tour-card,
.keywest-lower-section .home-tour-card:hover {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  aspect-ratio: auto;
  background: none !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.keywest-lower-section .home-tour-card::before,
.keywest-lower-section .home-tour-card::after { content: none !important; display: none !important; }
.keywest-lower-section .home-tour-card img.tour-card-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.keywest-lower-section .home-tour-card .tour-btn {
  position: static;
  display: inline-block;
  align-self: center;
  width: min(82%, 270px) !important;
  margin: 8px auto 0;
  padding: 11px 8px;
  border: 2px solid #0a6879;
  border-radius: 5px;
  background: linear-gradient(#1b9baa, #086d80);
  box-shadow: 0 4px 0 #075263, 0 8px 14px rgba(0,0,0,.18);
  color: white;
  font-size: clamp(11px, 1.1vw, 15px);
  text-align: center;
  white-space: nowrap;
  transform: none;
}
.keywest-lower-section .home-tour-card .tour-btn:hover { background: #075568; color: white; transform: translateY(-2px); }
.keywest-lower-section .holy-footer {
  width: min(96%, 1400px);
  aspect-ratio: 3 / 1;
  min-height: 0;
  margin: 0 auto;
  padding: 6% 12% 7%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url("images/footer.png") center / 100% 100% no-repeat;
  overflow: hidden;
}
.keywest-lower-section .holy-footer::before,
.keywest-lower-section .holy-footer::after { content: none !important; display: none !important; }
.keywest-lower-section .footer-quote,
.keywest-lower-section .footer-copy,
.keywest-lower-section .footer-socials a { color: #fff8e8; }
.keywest-lower-section .footer-socials { display: flex; justify-content: center; gap: 18px; margin: 12px 0; }
@media (max-width: 850px) {
  .keywest-lower-section .home-tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 570px) {
  .keywest-lower-section { padding: 25px 10px 35px; }
  .keywest-lower-section .home-tour-grid { grid-template-columns: 1fr; max-width: 390px; }
  .keywest-lower-section .home-tour-card .tour-btn { font-size: 14px; }
  .keywest-lower-section .holy-footer { width: 100%; aspect-ratio: auto; min-height: 240px; padding: 55px 12% 50px; background-size: cover; }
  .keywest-lower-section .footer-quote { font-size: 1.05rem; }
}

/* FIX: Old button shimmer was positioned against the entire tour card,
   creating huge diagonal aqua panels over the card artwork. */
.keywest-lower-section .home-tour-card .tour-btn::before,
.keywest-lower-section .home-tour-card .tour-btn::after {
  content: none !important;
  display: none !important;
}
/* Keep the decorative dolphin watermarks off the new wooden backdrop. */
body::before,
body::after,
.bg-dolphin { display: none !important; }

/* Custom illustrated reserve signs — keep original artwork untouched */
.keywest-lower-section .home-tour-card .reserve-art-link {
  display: block; width: min(82%, 290px); margin: 8px auto 0;
  text-decoration: none; transition: transform .2s ease;
}
.keywest-lower-section .home-tour-card .reserve-art-link:hover,
.keywest-lower-section .home-tour-card .reserve-art-link:focus-visible {
  transform: translateY(-4px);
}
.keywest-lower-section .home-tour-card img.reserve-art-img {
  display: block; width: 100%; height: auto; max-height: none;
  object-fit: contain; border: 0; border-radius: 0; box-shadow: none;
}


/* ============================================================
   FOOTER: Three-column layout matching the original artwork
   Keep the footer.png illustration exactly as supplied.
   ============================================================ */
.keywest-lower-section .holy-footer {
  width: min(100%, 1400px);
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  background: url("images/footer.png") center / 100% 100% no-repeat;
  overflow: hidden;
}
.keywest-lower-section .footer-overlay {
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: 3 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5.2% 13% 4.2%;
  text-align: left;
}
.keywest-lower-section .footer-columns {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr 1.05fr;
  gap: clamp(12px, 2.5vw, 38px);
  align-items: start;
}
.keywest-lower-section .footer-column { min-width: 0; color: #fff9ed; }
.keywest-lower-section .footer-column h2 {
  margin: 0 0 12px;
  font-family: "Dancing Script", cursive;
  font-size: clamp(18px, 2.5vw, 33px);
  line-height: 1.12;
  font-weight: 700;
  color: #fff9ed;
  text-shadow: 0 2px 3px rgba(0,0,0,.24);
}
.keywest-lower-section .footer-column p,
.keywest-lower-section .footer-column li {
  margin: 0 0 7px;
  font-size: clamp(10px, 1.08vw, 14px);
  line-height: 1.45;
  color: #fff9ed;
}
.keywest-lower-section .footer-links ul { list-style: none; margin: 0; padding: 0; }
.keywest-lower-section .footer-links li::before {
  content: "✦"; color: #f6e0bb; margin-right: 9px;
}
.keywest-lower-section .footer-column a,
.keywest-lower-section .footer-column a:visited {
  color: #fff9ed;
  text-decoration: none;
}
.keywest-lower-section .footer-column a:hover,
.keywest-lower-section .footer-column a:focus-visible {
  color: #ffdd98; text-decoration: underline;
}
.keywest-lower-section .footer-contact p i { width: 19px; margin-right: 5px; }
.keywest-lower-section .footer-socials {
  display: flex; justify-content: flex-start; gap: 18px; margin: 10px 0 0;
}
.keywest-lower-section .footer-socials a { font-size: clamp(18px, 2vw, 26px); }
.keywest-lower-section .footer-about p { max-width: 230px; }
.keywest-lower-section .footer-bottom { text-align: center; }
.keywest-lower-section .footer-quote {
  margin: 0 0 3px;
  font-family: "Dancing Script", cursive;
  font-size: clamp(16px, 2.1vw, 29px);
  line-height: 1.2;
  color: #fff9ed;
  text-shadow: 0 2px 3px rgba(0,0,0,.22);
}
.keywest-lower-section .footer-copy {
  margin: 0; color: #fff9ed; font-size: clamp(9px, .9vw, 12px);
}
@media (max-width: 700px) {
  .keywest-lower-section .holy-footer {
    background-size: 100% 100%;
    min-height: 460px;
  }
  .keywest-lower-section .footer-overlay {
    aspect-ratio: auto;
    min-height: 460px;
    padding: 55px 13% 40px;
  }
  .keywest-lower-section .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
  .keywest-lower-section .footer-column h2 { font-size: 22px; }
  .keywest-lower-section .footer-column p,
  .keywest-lower-section .footer-column li { font-size: 11px; }
  .keywest-lower-section .footer-about { grid-column: 1 / -1; text-align: center; }
  .keywest-lower-section .footer-about p { max-width: none; }
  .keywest-lower-section .footer-quote { font-size: 18px; }
}


/* SHIP HAPPENS: footer content arranged around merchandise */
.keywest-lower-section .pre-footer-saying {
  max-width: 1200px; margin: 30px auto 12px; padding: 0 18px;
  text-align: center; color: #063d60; font-family: "Dancing Script", cursive;
  font-size: clamp(23px, 3vw, 40px); font-weight: 700; line-height: 1.25;
}
.keywest-lower-section .holy-footer {
  background-image: url("images/footer.png");
  background-color: transparent;
}
.keywest-lower-section .footer-overlay {
  aspect-ratio: 3 / 1; padding: 6% 14% 5%;
}
.keywest-lower-section .footer-columns {
  grid-template-columns: 0.85fr 1.4fr 1fr;
  gap: clamp(10px, 2vw, 30px);
}
.keywest-lower-section .footer-links li::before { content: none; }
.keywest-lower-section .footer-links li {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.keywest-lower-section .footer-links li img {
  width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px;
}
.keywest-lower-section .footer-contact { padding-top: 17px; }
.keywest-lower-section .footer-contact p { overflow-wrap: anywhere; }
.keywest-lower-section .footer-copy {
  text-align: center; margin-top: auto; color: #fff9ed;
}
@media (max-width: 700px) {
  .keywest-lower-section .footer-overlay { aspect-ratio: auto; padding: 55px 12% 42px; }
  .keywest-lower-section .footer-columns { grid-template-columns: 1fr 1.4fr; }
  .keywest-lower-section .footer-merch-space { display: none; }
  .keywest-lower-section .footer-contact { padding-top: 8px; }
}

/* OCTOBER FOOTER FINISHING TOUCHES */
.keywest-lower-section .pre-footer-saying {
  display: block;
  width: min(100%, 1200px);
  margin: 24px auto 20px;
  padding: 0 20px;
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-size: clamp(27px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.3;
  color: #00287e;
}
.keywest-lower-section .footer-links h2 {
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 700;
}
.keywest-lower-section .footer-links a {
  font-family: "Poppins", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
}
.keywest-lower-section .footer-links { padding-left: clamp(8px, 2vw, 32px); }
.keywest-lower-section .footer-contact p { font-size: clamp(11px, 1.05vw, 15px); }
.keywest-lower-section .footer-overlay { display: flex; flex-direction: column; }
.keywest-lower-section .footer-copy {
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) {
  .keywest-lower-section .pre-footer-saying { margin: 20px auto 16px; }
  .keywest-lower-section .footer-links { padding-left: 0; }
}

/* Six real seashell PNGs and final footer positioning */
.keywest-lower-section .pre-footer-saying {
  font-size: clamp(22px, 2.45vw, 36px);
  max-width: 1500px;
  margin: 24px auto 20px;
}
.keywest-lower-section .footer-links {
  padding-left: clamp(18px, 3.3vw, 54px);
}
.keywest-lower-section .footer-contact {
  padding-left: clamp(8px, 1.1vw, 18px);
}
.keywest-lower-section .footer-links li img {
  width: 22px; height: 22px; flex: 0 0 22px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .keywest-lower-section .footer-links { padding-left: 0; }
  .keywest-lower-section .footer-contact { padding-left: 0; }
}


/* FINAL SMALL FOOTER ADJUSTMENTS — artwork remains unchanged */
@media (min-width: 701px) {
  .keywest-lower-section .footer-links {
    padding-left: clamp(26px, 4vw, 65px);
  }
  .keywest-lower-section .footer-contact {
    padding-left: clamp(14px, 1.8vw, 29px);
  }
}
.keywest-lower-section .footer-links li,
.keywest-lower-section .footer-links a {
  font-size: clamp(12px, 1.2vw, 16px);
}
.keywest-lower-section .footer-contact p,
.keywest-lower-section .footer-contact a {
  font-size: clamp(12px, 1.2vw, 16px);
}
.keywest-lower-section .pre-footer-saying {
  position: relative;
  top: 8px;
  color: #06475b; /* dark teal matching the footer wood */
}
@media (max-width: 700px) {
  .keywest-lower-section .pre-footer-saying { top: 4px; }
}


/* ============================================================
   SHIP HAPPENS — COMPLETE HERO IMAGE, NO CROPPING
   Preserve the original artwork and all other site sections.
   ============================================================ */
.intro-hero.home-hero {
  width: 92% !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1704 / 923;
  padding: 0 !important;
  margin: 20px auto 35px !important;
  background-image: url("images/hero.png") !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* OCT 13: smaller hero and sunset-orange cursive slogan */
@media (min-width: 701px) {
  .intro-hero.home-hero {
    width: 82% !important;
    max-width: 1050px !important;
  }
}
.keywest-lower-section .pre-footer-saying {
  color: #e87528 !important;
}

/* OCT 13: modestly smaller tour artwork on desktop only */
@media (min-width: 851px) {
  .keywest-lower-section .home-tour-grid {
    width: min(85%, 1060px);
    gap: clamp(12px, 2vw, 25px);
  }
}

/* OCT 13 — Continuous original wood background across site */
html { background: #f7f5ef url("images/background.png") center top / 100% auto repeat-y; }
body { background: transparent !important; }
.keywest-lower-section {
  background: transparent !important;
}
/* Keep artwork and layout intact; only remove section background seam. */

/* OCT 13 — Match cursive above navigation to sunset orange */
.header-tagline { color: #e87528 !important; }

/* OCT 13 — Wider hero, orange top cursive, phone inset */
@media (min-width: 701px) {
  .intro-hero.home-hero {
    width: 88% !important;
    max-width: 1120px !important;
  }
  .main-nav .nav-phone { right: 155px; }
}
.header-tagline { color: #e87528 !important; }
@media (max-width: 600px) {
  .main-nav .nav-phone { right: 35px; }
}

/* OCT 13 — FINAL: hero aligned with footer; tagline above navigation */
.intro-hero.home-hero {
  width: 96% !important;
  max-width: 1400px !important;
}
.tour-top-header {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.header-tagline {
  font-family: "Dancing Script", cursive !important;
  font-size: clamp(26px, 3.1vw, 44px) !important;
  line-height: 1.15 !important;
  color: #e87528 !important;
  margin: 6px auto 0 !important;
  text-align: center !important;
}
.main-nav {
  margin-top: 8px !important;
}
@media (max-width: 600px) {
  .intro-hero.home-hero { width: 96% !important; }
  .header-tagline { font-size: clamp(23px, 6vw, 32px) !important; }
  .main-nav { margin-top: 12px !important; }
}

/* OCT 13 — Two-line orange header slogan and readable footer lettering */
.header-tagline {
  max-width: 540px !important;
  width: 100% !important;
  padding: 0 12px !important;
  text-wrap: balance;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.12 !important;
}
@media (min-width: 701px) {
  .keywest-lower-section .footer-links {
    padding-left: clamp(45px, 5.8vw, 88px) !important;
  }
  .keywest-lower-section .footer-contact {
    padding-left: clamp(30px, 3.2vw, 50px) !important;
  }
  .keywest-lower-section .footer-links li,
  .keywest-lower-section .footer-links a,
  .keywest-lower-section .footer-contact p,
  .keywest-lower-section .footer-contact a {
    font-size: clamp(15px, 1.4vw, 19px) !important;
    line-height: 1.35;
  }
  .keywest-lower-section .footer-links h2 {
    font-size: clamp(23px, 2.1vw, 29px) !important;
  }
}
@media (max-width: 700px) {
  .header-tagline { max-width: 330px !important; font-size: clamp(24px, 6vw, 32px) !important; }
  .keywest-lower-section .footer-links li,
  .keywest-lower-section .footer-links a,
  .keywest-lower-section .footer-contact p,
  .keywest-lower-section .footer-contact a { font-size: 13px !important; }
}

/* OCT 13 — Nudge footer text a little farther right; keep artwork intact */
@media (min-width: 701px) {
  .keywest-lower-section .footer-links {
    padding-left: clamp(63px, 7.1vw, 106px) !important;
  }
  .keywest-lower-section .footer-contact {
    padding-left: clamp(48px, 4.5vw, 68px) !important;
  }
}

/* OCT 13 — Lift copyright clear of bottom rope and make it readable */
.keywest-lower-section .holy-footer .footer-copy {
  font-size: clamp(15px, 1.3vw, 19px) !important;
  line-height: 1.35 !important;
  transform: translateY(-24px);
  padding-top: 0 !important;
}
@media (max-width: 700px) {
  .keywest-lower-section .holy-footer .footer-copy {
    font-size: 14px !important;
    transform: translateY(-12px);
  }
}

/* OCT 13 — FINAL HEADER ONLY: wider logo, smaller orange slogan, phone right */
.tour-top-header .header-center {
  max-width: 680px !important;
}
.tour-top-header .page-title-img {
  width: 510px !important;
  max-width: 100% !important;
  height: auto !important;
}
.tour-top-header .header-tagline {
  width: max-content !important;
  max-width: 100% !important;
  padding: 0 6px !important;
  font-size: clamp(16px, 1.8vw, 24px) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  color: #e87528 !important;
}
.main-nav .nav-phone {
  right: 28px !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}
@media (max-width: 700px) {
  .tour-top-header .header-center { max-width: 100% !important; }
  .tour-top-header .page-title-img { width: min(92vw, 510px) !important; }
  .tour-top-header .header-tagline {
    font-size: clamp(11px, 3.1vw, 18px) !important;
    letter-spacing: 0 !important;
  }
  .main-nav .nav-phone { right: 12px !important; font-size: 18px !important; }
}


/* =========================================================
   MAGIC LAYOUT — unified rope and responsive sizing
   Keep your existing graphics and image file paths intact.
   ========================================================= */
html { background-color: #064f59; }
body { isolation: isolate; }
.tour-top-header .page-title-img { width: min(540px, 92vw) !important; }
.main-nav { max-width: 1250px; }
.intro-hero.home-hero {
  width: min(94%, 1180px) !important;
  max-width: 1180px !important;
  margin: 22px auto 0 !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  overflow: visible !important;
}
/* Real rope PNG floats above the hero photograph. */
.intro-hero.home-hero::after,
.keywest-lower-section .home-tour-card::after {
  content: "" !important;
  position: absolute;
  inset: -5px;
  background: url("images/rope-frame.png") center / 100% 100% no-repeat;
  z-index: 5;
  pointer-events: none;
}
.rope-bridge {
  width: min(78%, 780px);
  height: clamp(45px, 8vw, 90px);
  margin: -8px auto -5px;
  position: relative;
  z-index: 3;
  background: url("images/rope-connector.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.keywest-lower-section { padding-top: 8px !important; }
.keywest-lower-section .home-tour-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(94%, 1120px) !important;
  max-width: 1120px !important;
  gap: clamp(14px, 2.5vw, 28px) !important;
  margin: 0 auto !important;
  align-items: start !important;
}
.keywest-lower-section .home-tour-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 8px 15px !important;
  background: rgba(4,68,77,.36) !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 20px rgba(0,0,0,.14) !important;
  overflow: visible !important;
}
.keywest-lower-section .home-tour-card::before { content: none !important; display: none !important; }
.keywest-lower-section .home-tour-card img.tour-card-art {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  border-radius: 11px !important;
}
.keywest-lower-section .home-tour-card .reserve-art-link {
  width: min(88%, 270px) !important;
  margin: 12px auto 0 !important;
}
.rope-bridge-bottom { transform: scaleX(-1); margin: 4px auto -5px; }
.keywest-lower-section .pre-footer-saying {
  margin: 4px auto 22px !important;
  color: #fff0d8 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.keywest-lower-section .holy-footer {
  width: min(94%, 1180px) !important;
  margin: 0 auto 30px !important;
  background-size: 100% 100% !important;
}
@media (max-width: 850px) {
 .keywest-lower-section .home-tour-grid {
   grid-template-columns: repeat(2, minmax(0,1fr)) !important;
   max-width: 740px !important;
 }
 .keywest-lower-section .home-tour-card:last-child { grid-column: 1 / -1; width: min(100%, 350px) !important; justify-self: center; }
}
@media (max-width: 600px) {
 .main-nav .nav-phone { position: static !important; width: 100% !important; text-align: center !important; margin: 4px auto !important; }
 .intro-hero.home-hero { width: 94% !important; }
 .rope-bridge { width: 90%; height: 52px; }
 .keywest-lower-section .home-tour-grid { grid-template-columns: 1fr !important; width: min(90%, 390px) !important; }
 .keywest-lower-section .home-tour-card:last-child { grid-column: auto; width: 100% !important; }
 .keywest-lower-section .holy-footer { width: 96% !important; background-size: cover !important; }
}


/* =========================================================
   OCTOBER 15 — careful homepage adjustments
   All artwork remains external in images/.
   ========================================================= */
.intro-hero.home-hero {
  width: min(90%, 950px) !important;
  max-width: 950px !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 11 / 4.2;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
.tour-top-header .page-title-img {
  width: min(540px, 92vw) !important;
  max-width: 100% !important;
  height: auto !important;
}
.keywest-lower-section .home-tour-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(92%, 1120px) !important;
}
.keywest-lower-section .home-tour-card img.tour-card-art {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  height: auto !important;
  border-radius: 0 !important;
}
.keywest-lower-section .home-tour-card img.reserve-art-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.keywest-lower-section .home-tour-card:last-child {
  grid-column: auto !important;
  width: 100% !important;
}
.tour-card-text {
  text-align: center;
  padding: 8px 16px 2px;
  color: #fff9ec;
}
.tour-card-text h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.2;
  color: inherit;
}
.tour-card-text p,
.keywest-lower-section .home-tour-card .tour-card-text p {
  margin: 0;
  min-height: 0;
  font-size: clamp(13px, 1.35vw, 16px);
  line-height: 1.5;
  color: inherit;
}
@media (max-width: 650px) {
  .intro-hero.home-hero {
    width: 94% !important;
    aspect-ratio: 11 / 5.2;
  }
  .keywest-lower-section .home-tour-grid {
    grid-template-columns: 1fr !important;
    width: min(92%, 520px) !important;
  }
}

/* Realistic matching rope connectors — preserve original proportions */
.rope-bridge {
  width: min(90%, 900px) !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  background-image: url("images/rope-connector.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: -30px auto -40px !important;
}
.rope-bridge-bottom {
  transform: scaleX(-1);
  margin: -30px auto -40px !important;
}
@media (max-width: 600px) {
  .rope-bridge {
    width: 95% !important;
    height: auto !important;
    margin: -15px auto -20px !important;
  }
}


/* FINAL: two small vertical hanging rope connections, left and right.
   Override earlier full-width rope-bridge styles without touching artwork. */
.rope-bridge,
.rope-bridge.rope-bridge-bottom {
  position: relative !important;
  display: block !important;
  width: min(90%, 950px) !important;
  height: 135px !important;
  aspect-ratio: auto !important;
  margin: -28px auto -28px !important;
  padding: 0 !important;
  background: none !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 3 !important;
  pointer-events: none;
}
.rope-bridge::before,
.rope-bridge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 185px;
  height: 120px;
  background: url("images/rope-connector.png") center / contain no-repeat;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.18));
}
.rope-bridge::before { left: -30px; }
.rope-bridge::after  { right: -30px; transform: translateY(-50%) rotate(-90deg); }
@media (max-width: 600px) {
  .rope-bridge,
  .rope-bridge.rope-bridge-bottom {
    width: 90% !important;
    height: 100px !important;
    margin: -16px auto -16px !important;
  }
  .rope-bridge::before,
  .rope-bridge::after { width: 140px; height: 90px; }
  .rope-bridge::before { left: -38px; }
  .rope-bridge::after { right: -38px; }
}


/* OCT 15: outer board-to-board rope placement.
   Keep the ropes outside the centered hero and tour-card artwork. */
.rope-bridge,
.rope-bridge.rope-bridge-bottom {
  width: 100% !important;
  max-width: none !important;
  height: 155px !important;
  margin: -38px auto -38px !important;
  z-index: 4 !important;
}
.rope-bridge::before,
.rope-bridge::after {
  width: clamp(220px, 19vw, 310px) !important;
  height: 155px !important;
  top: 50% !important;
  background-size: contain !important;
}
.rope-bridge::before {
  left: max(-35px, calc(4vw - 85px)) !important;
  transform: translateY(-50%) rotate(90deg) !important;
}
.rope-bridge::after {
  right: max(-35px, calc(4vw - 85px)) !important;
  transform: translateY(-50%) rotate(-90deg) !important;
}
@media (max-width: 650px) {
  .rope-bridge,
  .rope-bridge.rope-bridge-bottom {
    height: 110px !important;
    margin: -22px auto -22px !important;
  }
  .rope-bridge::before,
  .rope-bridge::after {
    width: 160px !important;
    height: 105px !important;
  }
  .rope-bridge::before { left: -46px !important; }
  .rope-bridge::after { right: -46px !important; }
}


/* ==========================================================
   OCT 16 — THREE TARGETED HOMEPAGE ADJUSTMENTS
   1. Repeat sandy background behind separate wooden planks
   2. Lower whole page content by 3/4 CSS inch (72px)
   3. Move footer text right, leaving footer image untouched
   ========================================================== */
html {
  background-color: #f8f6f0 !important;
  background-image: url("images/sand-bg.png") !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: auto !important;
}
body {
  background: transparent !important;
  padding-top: 72px;
}
@media (min-width: 701px) {
  .keywest-lower-section .footer-links {
    padding-left: clamp(88px, 9.2vw, 132px) !important;
  }
  .keywest-lower-section .footer-contact {
    padding-left: clamp(73px, 6.5vw, 96px) !important;
  }
}
/* Keep narrow screens readable, without pushing text off the board. */
@media (max-width: 700px) {
  body { padding-top: 72px; }
}

/* OCT 16 FIX: restore original blue plank artwork OVER sandy page */
html {
  background: #f8f6f0 url("images/sand-bg.png") left top / auto repeat !important;
}
body { background: transparent !important; }
.keywest-lower-section {
  background: url("images/background.png") center top / 100% auto repeat-y !important;
}
/* The sand remains visible outside the plank artwork; the original
   background.png artwork stays in place rather than being removed. */


/* ==========================================================
   OCT 16 — ORIGINAL BLUE PLANK BEHIND HEADER + NAV
   Uses the same background.png as the lower section.
   Sand remains the full-page background.
   ========================================================== */
.top-plank-section {
  position: relative;
  width: min(100%, 1650px);
  margin: 0 auto 18px;
  padding: 12px clamp(20px, 5vw, 85px) 34px;
  background-image: url("images/background.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  isolation: isolate;
}
.top-plank-section .tour-top-header {
  min-height: 180px;
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}
.top-plank-section .main-nav {
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  padding-bottom: 16px;
}
.top-plank-section .header-tagline {
  color: #ffad67 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.75) !important;
}
.top-plank-section .main-nav .nav-phone {
  color: #ffffff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
  right: 25px !important;
}
@media (max-width: 700px) {
  .top-plank-section {
    padding: 14px 7% 28px;
    background-size: 100% 100%;
  }
  .top-plank-section .tour-top-header { min-height: 125px; }
  .top-plank-section .main-nav { margin-top: 18px !important; }
  .top-plank-section .main-nav .nav-phone {
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    margin: 10px auto 0 !important;
  }
}


/* ==========================================================
   OCT 17 — SAFE FRONT ALIGNMENT PASS
   Only front plank, hero, decorative overlays and spacing.
   Keep all original artwork, cards and footer intact.
   ========================================================== */

/* Logo: a small reduction from the prior 540px maximum. */
.top-plank-section .tour-top-header .page-title-img {
  width: min(490px, 90vw) !important;
}

/* Bring the navigation signs higher onto the top plank. */
.top-plank-section .main-nav {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-bottom: 8px !important;
}
.top-plank-section {
  margin-bottom: 0 !important;
  padding-bottom: 18px !important;
}

/* Remove only CSS-drawn decorative overlays, not original PNG art. */
.intro-hero.home-hero::after,
.keywest-lower-section .home-tour-card::after,
.keywest-lower-section .home-tour-card::before {
  content: none !important;
  display: none !important;
}

/* Remove the tinted gradient over the hero photograph. */
.intro-hero.home-hero {
  background-image: url("images/hero.png") !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Compress empty vertical space while preserving rope connectors. */
.rope-bridge,
.rope-bridge.rope-bridge-bottom {
  height: 70px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin-top: -12px !important;
  margin-bottom: -12px !important;
}
.rope-bridge::before,
.rope-bridge::after {
  height: 70px !important;
}
.keywest-lower-section {
  padding-top: 0 !important;
}

@media (max-width: 700px) {
  .top-plank-section .tour-top-header .page-title-img {
    width: min(440px, 88vw) !important;
  }
  .top-plank-section .main-nav { margin-top: 10px !important; }
  .rope-bridge,
  .rope-bridge.rope-bridge-bottom { height: 48px !important; margin-top: -8px !important; margin-bottom: -8px !important; }
  .rope-bridge::before,
  .rope-bridge::after { height: 48px !important; }
}

/* OCT 17 — V2: tighter layout, no dark hover, real top rope connectors */
body { padding-top: 30px !important; }
.top-plank-section { padding-top: 4px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; }
.top-plank-section .tour-top-header { min-height: 145px !important; padding-top: 0 !important; }
.top-plank-section .tour-top-header .page-title-img { width: min(440px, 88vw) !important; }
.top-plank-section .main-nav { margin-top: -4px !important; padding-top: 0 !important; padding-bottom: 3px !important; }
/* Keep tour images bright and stationary even when hovered. */
.keywest-lower-section .home-tour-card,
.keywest-lower-section .home-tour-card:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
.keywest-lower-section .home-tour-card img.tour-card-art,
.keywest-lower-section .home-tour-card:hover img.tour-card-art {
  filter: none !important;
  opacity: 1 !important;
}
.intro-hero.home-hero { margin-top: -12px !important; margin-bottom: 0 !important; }
/* Two real PNG ropes connecting the bottom of the top plank to the hero. */
.top-to-hero-ropes {
  position: relative;
  width: min(94%, 1100px);
  height: 64px;
  margin: -18px auto -34px;
  z-index: 6;
  pointer-events: none;
}
.top-to-hero-ropes::before,
.top-to-hero-ropes::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 88px;
  height: 112px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.top-to-hero-ropes::before { left: 4%; background-image: url("images/rope-connector.png"); }
.top-to-hero-ropes::after { right: 4%; background-image: url("images/rope-connector.png"); }
@media (max-width: 700px) {
  body { padding-top: 15px !important; }
  .top-plank-section .tour-top-header { min-height: 115px !important; }
  .top-plank-section .tour-top-header .page-title-img { width: min(350px, 84vw) !important; }
  .top-plank-section .main-nav { margin-top: 4px !important; }
  .top-to-hero-ropes { height: 42px; margin: -10px auto -22px; }
  .top-to-hero-ropes::before, .top-to-hero-ropes::after { width: 50px; height: 72px; }
}

/* =========================================================
   OCT 17 — SCREENSHOT REVIEW: V3 CONTROLLED REFINEMENTS
   All changes scoped to the homepage. Original art preserved.
   ========================================================= */
/* Keep the entire blue header plank, but tighten its internal layout. */
@media (min-width: 701px) {
  .top-plank-section { padding-bottom: 14px !important; }
  .top-plank-section .tour-top-header { min-height: 0 !important; padding-bottom: 0 !important; }
  .top-plank-section .tour-top-header .page-title-img { width: min(405px, 80vw) !important; }
  .top-plank-section .header-tagline { margin-top: 2px !important; margin-bottom: 0 !important; }
  .top-plank-section .main-nav { margin-top: -14px !important; margin-bottom: 0 !important; padding-bottom: 8px !important; gap: 8px !important; }
  .top-plank-section .main-nav img { width: clamp(104px, 8.5vw, 137px) !important; }
  .top-plank-section .main-nav .nav-phone { top: -33px !important; right: 7% !important; }
}
/* Hero closer to the wood, with the two ropes crossing the join. */
.top-to-hero-ropes { height: 45px; margin: -22px auto -30px; }
.top-to-hero-ropes::before, .top-to-hero-ropes::after { top: -10px; height: 104px; }
.intro-hero.home-hero { margin-top: -8px !important; margin-bottom: -8px !important; }
/* Bright photos, no hover tint or dark wash. */
.intro-hero.home-hero,
.intro-hero.home-hero:hover { background-image: url("images/hero.png") !important; filter: none !important; opacity: 1 !important; }
.keywest-lower-section .home-tour-card,
.keywest-lower-section .home-tour-card:hover,
.keywest-lower-section .home-tour-card:focus-within { background: transparent !important; background-image: none !important; filter: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }
.keywest-lower-section .home-tour-card img.tour-card-art,
.keywest-lower-section .home-tour-card:hover img.tour-card-art { filter: none !important; opacity: 1 !important; transform: none !important; }
/* The decorative connector should not reserve a large blank block. */
.rope-bridge:not(.rope-bridge-bottom) { height: 35px !important; margin-top: -14px !important; margin-bottom: -8px !important; }
.keywest-lower-section { padding-top: 0 !important; }
/* Image is missing from the provided files: readable sign-style Contact fallback. */
.main-nav .contact-sign-fallback { display: inline-flex; align-items: center; justify-content: center; min-width: 118px; min-height: 42px; padding: 5px 13px; border-radius: 5px; border: 2px solid #b5e7d5; background: linear-gradient(135deg,#0b858e,#07506a); color: #fff8e6; font: 800 17px 'Poppins',sans-serif; letter-spacing: .4px; box-shadow: 2px 4px 5px rgba(0,0,0,.25); }
/* Footer contact: allow the long email to fit without splitting in the middle. */
@media (min-width: 1000px) {
  .keywest-lower-section .footer-contact { padding-left: 12px !important; }
  .keywest-lower-section .footer-contact a[href^="mailto:"] { white-space: nowrap !important; font-size: clamp(13px,1.05vw,16px) !important; letter-spacing: -.35px; }
}
@media (max-width: 700px) {
  .top-plank-section .tour-top-header .page-title-img { width: min(330px, 82vw) !important; }
  .top-plank-section .main-nav { margin-top: 0 !important; }
  .top-to-hero-ropes { height: 38px; margin: -12px auto -22px; }
  .main-nav .contact-sign-fallback { min-width: 95px; font-size: 14px; }
  .keywest-lower-section .footer-contact a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* OCT 17 V4 — ONLY TWO PROPORTION FIXES */
@media (min-width: 701px) {
  /* Make the top plank graphic extend as wide as the lower plank artwork. */
  .top-plank-section {
    width: 100% !important;
    max-width: none !important;
    background-size: 100% 100% !important;
  }
  /* Smaller tour cards while retaining the two-column layout. */
  .keywest-lower-section .home-tour-grid {
    width: min(88%, 900px) !important;
    max-width: 900px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .keywest-lower-section .home-tour-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* OCT 17 V6: screenshot wording and focused proportional adjustments */
@media (min-width: 701px) {
  /* Artwork has inset/irregular ends: scale the art, not the entire page. */
  .top-plank-section {
    width: 100% !important;
    max-width: none !important;
    background-size: 114% 100% !important;
    background-position: center center !important;
  }
  .keywest-lower-section .home-tour-grid {
    width: min(88%, 620px) !important;
    max-width: 620px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .keywest-lower-section .home-tour-card {
    width: 100% !important;
    max-width: none !important;
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .home-tour-grid {
    width: min(90%, 340px) !important;
    grid-template-columns: 1fr !important;
  }
}

/* OCT 17 V7 — preserve approved card size; move cards down.
   Match header plank artwork scaling to lower plank artwork. */
@media (min-width: 701px) {
  .top-plank-section {
    width: 100% !important;
    max-width: none !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
  .keywest-lower-section .home-tour-grid {
    padding-top: 65px !important;
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .home-tour-grid { padding-top: 30px !important; }
}

/* V8: Tour titles and lettering only; preserve approved card size and positions. */
.keywest-lower-section .tour-card-text {
  text-align: center !important;
  padding: 8px 5px 4px !important;
}
.keywest-lower-section .tour-card-text h2 {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(18px, 1.8vw, 25px) !important;
  letter-spacing: .25px !important;
  line-height: 1.25 !important;
  min-height: 1.25em !important;
  margin: 0 0 5px !important;
  color: #fff9ed !important;
  text-shadow: 1px 2px 2px rgba(0,0,0,.32) !important;
}
.keywest-lower-section .tour-card-text p,
.keywest-lower-section .home-tour-card .tour-card-text p {
  font-family: "Dancing Script", cursive !important;
  font-weight: 700 !important;
  font-size: clamp(17px, 1.5vw, 22px) !important;
  line-height: 1.22 !important;
  color: #fff9ed !important;
  text-shadow: 1px 2px 2px rgba(0,0,0,.35) !important;
}


/* V9 — fun sign-inspired headings and lower hero; card dimensions unchanged. */
.keywest-lower-section .tour-card-text h2 {
  font-family: "Bangers", Impact, "Arial Black", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(21px, 2.05vw, 29px) !important;
  letter-spacing: 1.1px !important;
  line-height: 1.12 !important;
  color: #fff9e9 !important;
  text-shadow: 2px 3px 1px rgba(1,33,46,.6) !important;
}
/* Increase the space above the hero by 36px. */
.intro-hero.home-hero { margin-top: 28px !important; }
@media (max-width: 700px) {
  .intro-hero.home-hero { margin-top: 12px !important; }
}


/* V10 — screenshot-guided full-page alignment; preserve approved card dimensions */
@media (min-width: 701px) {
  /* Reserve a readable line between logo and illustrated navigation. */
  .top-plank-section .tour-top-header { padding-bottom: 12px !important; }
  .top-plank-section .header-tagline {
    position: relative !important;
    z-index: 8 !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    font-size: clamp(19px, 1.65vw, 24px) !important;
  }
  .top-plank-section .main-nav {
    margin-top: 10px !important;
    padding-top: 5px !important;
    margin-bottom: 0 !important;
  }
  .top-plank-section { padding-bottom: 20px !important; }
  /* Avoid moving the art itself: match the header background's sizing to the lower planks. */
  .top-plank-section { background-size: 100% auto !important; background-position: center center !important; }
  /* Lower hero with its two rope connectors, not the hero alone. */
  .top-to-hero-ropes { margin-top: -7px !important; margin-bottom: -30px !important; }
  .intro-hero.home-hero { margin-top: 28px !important; }
  /* Approved 620px grid stays unchanged; give each plank's content breathing room. */
  .keywest-lower-section .home-tour-grid { row-gap: 56px !important; padding-top: 85px !important; }
}
/* Make title and description align consistently beneath each photo. */
.keywest-lower-section .tour-card-text { padding: 8px 3px 2px !important; }
.keywest-lower-section .tour-card-text h2 { margin-bottom: 8px !important; }
.keywest-lower-section .tour-card-text p { min-height: 2.45em !important; margin: 0 !important; }
.keywest-lower-section .home-tour-card .reserve-art-link { margin-top: 12px !important; }
/* Avoid breaking the contact address across arbitrary letters. */
.keywest-lower-section .footer-contact a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .top-plank-section .header-tagline { white-space: normal !important; text-wrap: balance !important; position: relative !important; z-index: 8 !important; margin-bottom: 10px !important; }
  .top-plank-section .main-nav { margin-top: 12px !important; }
  .top-to-hero-ropes { margin-top: 0 !important; }
  .keywest-lower-section .home-tour-grid { padding-top: 42px !important; row-gap: 30px !important; }
}

/* V11 — TOP PLANK ONLY. All other sections stay exactly as in V10. */
@media (min-width: 701px) {
  /* Keep the header art and its natural silhouette unchanged. */
  .top-plank-section .main-nav .nav-phone {
    top: -42px !important;
    right: 4.5% !important;
    font-size: 17px !important;
  }
  /* Shorten the hanging rope tails and bring them toward the hero frame. */
  .top-to-hero-ropes::before,
  .top-to-hero-ropes::after {
    top: -6px !important;
    width: 82px !important;
    height: 94px !important;
  }
  .top-to-hero-ropes::before { left: 7% !important; }
  .top-to-hero-ropes::after { right: 7% !important; }
}

/* V13 — Natural-size plank edges: original artwork is 2048 x 744.
   Preserve its 2.7527:1 proportions; give the section enough height
   so neither the top nor bottom edge can be cropped. */
@media (min-width: 701px) {
  body .top-plank-section {
    width: min(100%, 1650px) !important;
    max-width: 1650px !important;
    min-height: min(36.328125vw, 599.41px) !important;
    background-image: url("images/background.png") !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding-top: clamp(42px, 4vw, 70px) !important;
    padding-bottom: clamp(48px, 5vw, 80px) !important;
  }
}
@media (max-width: 700px) {
  body .top-plank-section {
    background-image: url("images/background.png") !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* V14 — tiny tour-card size reduction; lower ONLY the second row.
   Preserve V13 plank, header, hero, ropes, typography, and footer. */
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-grid {
    width: min(88%, 605px) !important;
    max-width: 605px !important;
  }
  .keywest-lower-section .home-tour-card:nth-child(n+3) {
    position: relative !important;
    top: 12px !important;
  }
}

/* V15 — small refinements only: reserve signs 7% smaller, bottom row 8px lower. */
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-card .reserve-art-link {
    width: min(81%, 251px) !important;
  }
  .keywest-lower-section .home-tour-card:nth-child(n+3) {
    top: 20px !important; /* V14 was 12px: +8px only */
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .home-tour-card .reserve-art-link {
    width: min(76%, 235px) !important;
  }
}

/* V16: lower only the bottom pair a little more; all sizes remain V15. */
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-card:nth-child(n+3) {
    top: 34px !important; /* 14px below V15 */
  }
}


/* V17 — precise independent alignment. V16 bottom row remains locked. */
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-card:nth-child(-n+2) {
    position: relative !important;
    top: -15px !important;
  }
  /* Preserve V16 position for Island and Sunset. */
  .keywest-lower-section .home-tour-card:nth-child(n+3) { top: 34px !important; }
}
/* Orange script above footer; keep plank and rope art intact. */
.keywest-lower-section .pre-footer-saying {
  color: #e57d3c !important;
  text-shadow: 1px 2px 2px rgba(65,35,18,.22) !important;
}
/* Add breathing room before footer without moving any cards. */
.keywest-lower-section .holy-footer { margin-top: 24px !important; }
/* Sign-inspired heading, same font as the four tour names. */
.keywest-lower-section .footer-links h2 {
  font-family: "Bangers", Impact, "Arial Black", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  font-size: clamp(21px, 2vw, 28px) !important;
}
/* Keep footer details legible and avoid splitting email in the middle. */
.keywest-lower-section .footer-contact a[href^="mailto:"] {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(10px, 1vw, 14px) !important;
}
.keywest-lower-section .footer-contact p { overflow-wrap: normal !important; }
/* Copyright lives after </footer>, beneath the image's bottom rope. */
.keywest-lower-section > .footer-copy-below-rope {
  display: block !important;
  position: relative !important;
  transform: none !important;
  margin: 8px auto 26px !important;
  padding: 0 12px !important;
  text-align: center !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  color: #07566c !important;
  line-height: 1.5 !important;
}
@media (max-width: 700px) {
  .keywest-lower-section .holy-footer { margin-top: 15px !important; }
  .keywest-lower-section .footer-contact a[href^="mailto:"] {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* V18 — only the three requested finishing touches. */
/* The rope frame is already part of hero.png; remove CSS gloss/shadow
   around the rectangular image without changing its dimensions or placement. */
.intro-hero.home-hero,
.intro-hero.home-hero:hover {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  filter: none !important;
}
/* Copyright is now OUTSIDE the wood-backed section, on the sandy page. */
body > .footer-copy-below-rope {
  display: block !important;
  position: relative !important;
  z-index: 4 !important;
  width: fit-content !important;
  max-width: 95% !important;
  margin: 12px auto 26px !important;
  padding: 3px 12px !important;
  color: #07566c !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-shadow: none !important;
  transform: none !important;
}
/* Move just the footer phone number down slightly, not the other details. */
.keywest-lower-section .footer-contact > p:first-child {
  position: relative !important;
  top: 5px !important;
}

/* V19: copyright below the white rope, but ON the blue footer plank. */
.keywest-lower-section .holy-footer { position: relative !important; }
.keywest-lower-section .holy-footer > .footer-copy-below-rope {
  display: block !important;
  position: absolute !important;
  bottom: 4.5% !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  color: #ffffff !important;
  font: 600 clamp(12px, 1.1vw, 16px)/1.35 "Poppins", Arial, sans-serif !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55) !important;
  z-index: 6 !important;
}
/* Separate the contact details from the Quick Links heading. */
@media (min-width: 701px) {
  .keywest-lower-section .footer-contact {
    position: relative !important;
    left: 38px !important;
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .footer-contact { left: 0 !important; }
  .keywest-lower-section .holy-footer > .footer-copy-below-rope { bottom: 2.5% !important; }
}


/* V20 — footer-only refinements; wood art and tour cards unchanged. */
/* Coral-pink cursive above the footer. */
.keywest-lower-section .pre-footer-saying {
  color: #ee8c9f !important;
  text-shadow: 1px 2px 2px rgba(65,35,18,.22) !important;
}
/* Neat vertical divider between Quick Links and contact details. */
@media (min-width: 701px) {
  .keywest-lower-section .footer-contact {
    border-left: 1px solid rgba(255,249,237,.72);
    padding-left: clamp(14px, 1.5vw, 24px) !important;
    padding-top: 10px !important;
  }
  .keywest-lower-section .footer-contact > p:first-child {
    top: 0 !important;
  }
  .keywest-lower-section .footer-contact p {
    margin-bottom: 11px !important;
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .footer-contact {
    border-left: 0;
    padding-left: 0 !important;
  }
}

/* V21 — move pink script BELOW footer artwork, with copyright beneath it. */
.keywest-lower-section .holy-footer {
  margin-bottom: 0 !important;
}
.keywest-lower-section > .pre-footer-saying {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: block !important;
  width: min(94%, 1180px) !important;
  margin: 12px auto 5px !important;
  padding: 0 12px !important;
  text-align: center !important;
  color: #ee8c9f !important;
  z-index: 3 !important;
}
.keywest-lower-section > .footer-copy-below-rope {
  display: block !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: fit-content !important;
  max-width: 95% !important;
  margin: 0 auto 30px !important;
  padding: 0 12px !important;
  text-align: center !important;
  color: #07566c !important;
  font: 600 14px/1.5 "Poppins", Arial, sans-serif !important;
  text-shadow: none !important;
  z-index: 3 !important;
}

/* V22 — lower the entire footer image and its links together.
   No changes to plank artwork, colors, tour cards, or the pink script. */
.keywest-lower-section .holy-footer {
  margin-top: 72px !important;
}
@media (max-width: 700px) {
  .keywest-lower-section .holy-footer { margin-top: 45px !important; }
}


/* V24 — copyright on sand beneath footer plank; no other elements changed. */
.keywest-lower-section > .footer-copy.footer-copy-below-rope {
  margin-top: 132px !important;
  margin-bottom: 40px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(38, 26, 15, .85) !important;
}


/* OCT 17 — VERTICAL OUTER ROPE CONNECTORS ONLY.
   Reuse the same natural rope artwork already used above the hero.
   No plank, card, footer or section positions are changed. */
.rope-bridge::before,
.rope-bridge::after {
  width: clamp(46px, 5.5vw, 86px) !important;
  height: 145px !important;
  top: 50% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.2)) !important;
}
.rope-bridge::before {
  left: 3.5% !important;
  background-image: url("images/rope-connector.png") !important;
}
.rope-bridge::after {
  right: 3.5% !important;
  background-image: url("images/rope-connector.png") !important;
}
@media (max-width: 700px) {
  .rope-bridge::before,
  .rope-bridge::after {
    width: clamp(32px, 7vw, 48px) !important;
    height: 90px !important;
  }
  .rope-bridge::before { left: 2% !important; }
  .rope-bridge::after { right: 2% !important; }
}


/* V26 — gently curved, thicker REAL rope artwork between lower planks.
   Keep the existing gap and every plank/card/footer position unchanged. */
@media (min-width: 701px) {
  .keywest-lower-section .rope-bridge-bottom {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }
  .keywest-lower-section .rope-bridge-bottom::before,
  .keywest-lower-section .rope-bridge-bottom::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    width: clamp(85px, 8vw, 125px) !important;
    height: 190px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: translateY(-50%) !important;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,.2)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .keywest-lower-section .rope-bridge-bottom::before {
    left: 3% !important;
    background-image: url("images/rope-connector.png") !important;
  }
  .keywest-lower-section .rope-bridge-bottom::after {
    right: 3% !important;
    background-image: url("images/rope-connector.png") !important;
  }
  .keywest-lower-section .home-tour-grid,
  .keywest-lower-section .holy-footer {
    position: relative !important;
    z-index: 2 !important;
  }
}


/* V27 — ONE matching cream rope image for the lower connectors.
   Header-to-hero ropes remain unchanged; no plank/card/footer movement. */
@media (min-width: 701px) {
  /* Hero to first tour plank, and second tour plank to footer. */
  .rope-bridge::before,
  .rope-bridge::after,
  .keywest-lower-section .rope-bridge-bottom::before,
  .keywest-lower-section .rope-bridge-bottom::after {
    background-image: url("images/rope-connector.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 110px !important;
    height: 170px !important;
    transform: translateY(-50%) !important;
  }
  .rope-bridge::before,
  .keywest-lower-section .rope-bridge-bottom::before { left: 3% !important; }
  .rope-bridge::after,
  .keywest-lower-section .rope-bridge-bottom::after { right: 3% !important; }

  /* Matching pair between the two tour plank rows. */
  .keywest-lower-section .home-tour-grid {
    position: relative !important;
    isolation: isolate;
  }
  .keywest-lower-section .home-tour-grid::before,
  .keywest-lower-section .home-tour-grid::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    width: 110px !important;
    height: 170px !important;
    background: url("images/rope-connector.png") center / contain no-repeat !important;
    transform: translateY(-50%) !important;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,.2));
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .keywest-lower-section .home-tour-grid::before { left: calc(50% - 46vw) !important; }
  .keywest-lower-section .home-tour-grid::after { right: calc(50% - 46vw) !important; }
  .keywest-lower-section .home-tour-card { z-index: 1 !important; }
}
@media (max-width: 700px) {
  .rope-bridge::before,
  .rope-bridge::after {
    background-image: url("images/rope-connector.png") !important;
    background-size: contain !important;
  }
}


/* ============================================================
   V28 — PROPORTIONAL ARTWORK SCALE + RESPONSIVE SAFEGUARDS
   Keep existing typography, tour cards, ropes, and footer content.
   ============================================================ */
@media (min-width: 701px) {
  /* Artwork original aspect ratio: 2048 / 744. Limit its desktop span. */
  body .top-plank-section {
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
    min-height: 0 !important;
    aspect-ratio: 2048 / 744;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-size: 100% 100% !important;
  }
  /* Plank backgrounds no longer stretch wider than their natural proportions. */
  body .keywest-lower-section {
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
    margin-inline: auto !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
  }
  /* Retain footer's authored artwork dimensions; prevent it from overflowing. */
  .keywest-lower-section .holy-footer { max-width: 100% !important; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  /* Let the header content determine height at narrower desktop sizes. */
  body .top-plank-section { aspect-ratio: auto; min-height: 0 !important; background-size: 100% 100% !important; }
  .top-plank-section .main-nav { gap: 5px !important; }
  .top-plank-section .main-nav img { width: clamp(82px, 9vw, 110px) !important; }
  .top-plank-section .main-nav .nav-phone { right: 4% !important; }
}
@media (max-width: 700px) {
  body .top-plank-section,
  body .keywest-lower-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  /* No horizontal clipping on phones; content drives section height. */
  body .top-plank-section {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background-size: 100% 100% !important;
  }
  body .keywest-lower-section { background-size: 100% auto !important; background-repeat: repeat-y !important; }
  .top-plank-section .main-nav { max-width: 100% !important; }
  .keywest-lower-section .home-tour-grid { max-width: 100% !important; }
  .keywest-lower-section .home-tour-card img { max-width: 100% !important; }
  .keywest-lower-section .holy-footer { max-width: 100% !important; }
}


/* V29 — REMOVE EXTRA COPYRIGHT PLANK, PRESERVE THE REAL FOOTER.
   The repeated background is still needed for both tour-card rows.
   Cover only its unwanted final repetition beneath the real footer. */
.keywest-lower-section {
  padding-bottom: 0 !important;
}
.keywest-lower-section > .pre-footer-saying {
  margin-bottom: 0 !important;
  padding-bottom: 22px !important;
}
/* The end cap sits over the repeating background after the footer. */
.keywest-lower-section > .pre-footer-saying::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -6px;
  width: 100vw;
  height: calc(100% + 20px);
  transform: translateX(-50%);
  background: #ecd9bd;
  pointer-events: none;
}
.site-copyright-strip {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 12px 16px 35px;
  text-align: center;
  background: #ecd9bd;
}
.site-copyright-strip .footer-copy-below-rope {
  position: static !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #07566c !important;
  font: 600 14px/1.5 "Poppins", Arial, sans-serif !important;
  text-shadow: none !important;
}


/* V31 — footer script ON the real plank; no artificial bottom strip.
   The existing artwork and all tour-card positions are preserved. */
.keywest-lower-section { padding-bottom: 0 !important; }
.keywest-lower-section .holy-footer { position: relative !important; }
.keywest-lower-section .holy-footer > .pre-footer-saying {
  position: absolute !important;
  left: 5% !important; right: 5% !important;
  top: auto !important; bottom: 4.2% !important;
  width: 90% !important;
  margin: 0 !important; padding: 0 !important;
  transform: none !important;
  z-index: 8 !important;
  color: #ee8c9f !important;
  text-align: center !important;
  font-family: "Dancing Script", cursive !important;
  font-size: clamp(15px, 2vw, 28px) !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.75) !important;
}
.keywest-lower-section .holy-footer > .footer-copy-below-rope {
  position: absolute !important;
  top: auto !important; bottom: 0.8% !important;
  left: 0 !important; right: 0 !important;
  display: block !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
  transform: none !important;
  text-align: center !important;
  color: #fff8e8 !important;
  font: 500 clamp(10px, .9vw, 13px)/1.2 "Poppins", sans-serif !important;
  z-index: 8 !important;
}
/* Extend the existing rope artwork into the wood instead of leaving floating ends. */
@media (min-width: 701px) {
  .top-to-hero-ropes::before, .top-to-hero-ropes::after {
    top: -34px !important; height: 146px !important;
  }
  .rope-bridge:not(.rope-bridge-bottom)::before,
  .rope-bridge:not(.rope-bridge-bottom)::after { height: 185px !important; }
}
@media (max-width: 700px) {
  .keywest-lower-section .holy-footer > .pre-footer-saying {
    bottom: 5% !important; font-size: clamp(12px, 3vw, 17px) !important;
  }
  .keywest-lower-section .holy-footer > .footer-copy-below-rope { bottom: 1% !important; }
}


/* V32 — rope alignment only. No plank, card, or footer resizing.
   Top connectors tuck into the header; hero-to-tours ropes move
   inward to meet the hero frame instead of floating in open sand. */
@media (min-width: 701px) {
  .top-to-hero-ropes::before,
  .top-to-hero-ropes::after {
    top: -54px !important;
    height: 166px !important;
  }
  .rope-bridge:not(.rope-bridge-bottom)::before {
    left: 19% !important;
  }
  .rope-bridge:not(.rope-bridge-bottom)::after {
    right: 19% !important;
  }
  /* Leave the matching outer tour-to-tour and tour-to-footer ropes
     in their current locations: they already meet both blue planks. */
}

/* V33 — tuck rope ends BEHIND the actual artwork, not across its face.
   Rope images, positions, section dimensions and artwork remain unchanged. */
@media (min-width: 701px) {
  .top-plank-section { position: relative !important; z-index: 3 !important; }
  .top-to-hero-ropes { position: relative !important; z-index: 1 !important; }
  .intro-hero.home-hero { position: relative !important; z-index: 3 !important; }
  .rope-bridge:not(.rope-bridge-bottom) { position: relative !important; z-index: 1 !important; }
  .keywest-lower-section { position: relative !important; z-index: 2 !important; }
}

/* V36 — ONLY right connector between the two tour planks.
   The previous V35 value duplicated V27, so it moved nothing.
   Increase right offset by 24px to move this rope LEFT. */
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-grid::after {
    right: calc(50% - 46vw + 24px) !important;
  }
}

/* V38 — HERO ONLY: about 10% wider, maintaining its proportions.
   All rope connectors, navigation, tour cards and footer unchanged. */
@media (min-width: 701px) {
  .intro-hero.home-hero {
    width: min(94%, 1050px) !important;
    max-width: 1050px !important;
  }
}

/* V39 — Navigation sign images only: a modest size increase.
   No changes to ropes, planks, hero, phone, or footer. */
@media (min-width: 901px) {
  .main-nav img { width: 160px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .main-nav img { width: 135px !important; }
}
@media (max-width: 600px) {
  .main-nav img { width: 112px !important; }
}


/* V40 — Three requested refinements only. */
.top-plank-section .header-tagline {
  color: #ffffff !important;
  font-size: clamp(26px, 2.8vw, 38px) !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.65) !important;
}
@media (min-width: 1101px) {
  .top-plank-section .main-nav img { width: 178px !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .top-plank-section .main-nav img { width: clamp(105px, 11vw, 140px) !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .top-plank-section .main-nav img { width: 140px !important; }
}
@media (max-width: 600px) {
  .top-plank-section .main-nav img { width: 118px !important; }
  .top-plank-section .header-tagline { font-size: clamp(24px, 6vw, 32px) !important; }
}
@media (min-width: 701px) {
  .keywest-lower-section .home-tour-card .reserve-art-link {
    width: min(70%, 215px) !important;
  }
}
@media (max-width: 700px) {
  .keywest-lower-section .home-tour-card .reserve-art-link {
    width: min(68%, 205px) !important;
  }
}

/* V41 — restore original nav proportions and white footer script. */
.top-plank-section .main-nav {
  margin-top: 36px !important; /* previously 48px: raise by 12px */
  column-gap: 8px !important;
}
@media (min-width: 901px) {
  .top-plank-section .main-nav img { width: 145px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .top-plank-section .main-nav img { width: 125px !important; }
}
@media (max-width: 600px) {
  .top-plank-section .main-nav img { width: 105px !important; }
  .top-plank-section .main-nav { margin-top: 0 !important; }
}
.keywest-lower-section .holy-footer > .pre-footer-saying {
  color: #ffffff !important;
}

/* V42 — new John's Pass hero: preserve full artwork without cropping. */
.intro-hero.home-hero {
  background-image: url("images/hero.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  aspect-ratio: 1704 / 923 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
}


/* V43 — David preview: hero slightly wider and closer to top plank.
   No changes to navigation, ropes, tour cards, or footer. */
@media (min-width: 701px) {
  .intro-hero.home-hero {
    width: min(96%, 1160px) !important;
    max-width: 1160px !important;
    margin-top: -15px !important;
  }
}

/* V44 — Move navigation signs upward only; leave everything else unchanged. */
@media (min-width: 601px) {
  .top-plank-section .main-nav { margin-top: 12px !important; }
}

/* V45 — Gentle hero adjustment: slightly wider and shorter, no cropping.
   Keep navigation and rope layout untouched. */
@media (min-width: 701px) {
  .intro-hero.home-hero {
    width: min(96%, 1180px) !important;
    max-width: 1180px !important;
    aspect-ratio: 1.95 / 1 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
}

/* V46 — raise navigation signs visually, without shifting hero or ropes. */
@media (min-width: 601px) {
  .top-plank-section .main-nav {
    transform: translateY(-28px) !important;
  }
}

/* V47 — slogan swap only; preserve navigation, hero and rope positions. */
.between-hero-tour-saying {
  font-family: "Dancing Script", cursive;
  font-size: clamp(24px, 3vw, 39px);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 40, 70, 0.95), 0 4px 9px rgba(0, 40, 70, 0.65);
  margin: 10px auto 4px;
  padding: 0 12px;
  position: relative;
  z-index: 4;
}


/* ==========================================================
   OCT 18 — FOUR TOURS ON ONE WOODEN PLANK
   Keep the original tour artwork, buttons, footer and hero.
   ========================================================== */
@media (min-width: 1001px) {
  .keywest-lower-section .home-tour-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
    gap: clamp(8px, 1.1vw, 18px) !important;
    padding: 65px 6% 60px !important;
    margin: 0 auto 20px !important;
    background: url("images/background.png") center center / 100% 100% no-repeat !important;
  }
  .keywest-lower-section .home-tour-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: auto !important;
  }
  /* No ropes between tour rows, because there is only one row. */
  .keywest-lower-section .home-tour-grid::before,
  .keywest-lower-section .home-tour-grid::after {
    display: none !important;
  }
  .keywest-lower-section {
    background: transparent !important;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .keywest-lower-section .home-tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* UPDATE 02 — restore the footer's blue wooden plank artwork. */
body .keywest-lower-section .holy-footer {
  background-image: url("images/footer.png") !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  width: min(100%, 1450px) !important;
  min-height: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 700px) {
  body .keywest-lower-section .holy-footer {
    min-height: 350px !important;
    background-size: 100% 100% !important;
  }
}

/* UPDATE 03: Align Island and Sunset with Sandbar and Dolphin. */
@media (min-width: 1001px) {
  .keywest-lower-section .home-tour-card:nth-child(n+3) {
    top: -15px !important;
    transform: none !important;
  }
  .keywest-lower-section .home-tour-card:nth-child(-n+2) {
    top: -15px !important;
  }
}

/* UPDATE 03: Restore the separate BLUE WOOD PLANK behind the
   footer contents. footer.png itself is kept as-is. */
body .keywest-lower-section .holy-footer {
  isolation: isolate !important;
  background-image: url("images/footer.png") !important;
}
body .keywest-lower-section .holy-footer::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("images/background.png") center / 100% 100% no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* UPDATE 04: Keep footer.png (sign, merch, and footer composition)
   visible in FRONT of the footer's wood background. */
body .keywest-lower-section .holy-footer::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
body .keywest-lower-section .holy-footer {
  isolation: auto !important;
  background-image: url("images/footer.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* UPDATE 05: Wood under the original footer image, not over it. */
body .keywest-lower-section .holy-footer {
 background-image: url("images/footer.png"), url("images/background.png") !important;
 background-position: center center, center center !important;
 background-size: 100% 100%, 100% 100% !important;
 background-repeat: no-repeat, no-repeat !important;
}

/* UPDATE 06 — TOP PLANK ONLY: match the other sections' scale.
   Preserve the logo, navigation graphics, hero, tours and footer. */
@media (min-width: 1001px) {
  body .top-plank-section {
    width: min(96%, 1180px) !important;
    max-width: 1180px !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 12px 24px 20px !important;
    background-size: 100% 100% !important;
    margin-inline: auto !important;
  }
  body .top-plank-section .tour-top-header {
    min-height: 0 !important;
    padding: 8px 10px 0 !important;
  }
  body .top-plank-section .main-nav {
    width: 100% !important;
    margin: 12px auto 0 !important;
    padding: 0 8px 8px !important;
    transform: none !important;
    gap: 6px !important;
  }
  body .top-plank-section .main-nav img {
    width: clamp(105px, 10vw, 135px) !important;
  }
  body .top-plank-section .tour-top-header .page-title-img {
    width: min(330px, 90%) !important;
  }
  body .top-plank-section .header-tagline {
    font-size: clamp(21px, 2.1vw, 29px) !important;
  }
}

/* UPDATE 07 — MATCHING WIDE, LOW WOODEN PLANKS (DESKTOP ONLY) */
@media (min-width: 1001px) {
  body .top-plank-section,
  body .keywest-lower-section .home-tour-grid,
  body .keywest-lower-section .holy-footer {
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .top-plank-section {
    padding: 8px 30px 12px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background-size: 100% 100% !important;
  }
  body .top-plank-section .tour-top-header {
    padding: 4px 10px 0 !important;
    min-height: 0 !important;
  }
  body .top-plank-section .main-nav { margin: 6px auto 0 !important; padding-bottom: 4px !important; }
  body .keywest-lower-section .home-tour-grid {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  body .keywest-lower-section .holy-footer {
    min-height: 300px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background-size: 100% 100%, 100% 100% !important;
  }
}

/* UPDATE 08 — equal desktop widths for header plank, hero, tours, footer.
   Top plank gets the same broad, low profile as the tour plank.
   Do not alter tour cards or footer artwork. */
@media (min-width: 1001px) {
  body .top-plank-section,
  body .intro-hero.home-hero,
  body .keywest-lower-section .home-tour-grid,
  body .keywest-lower-section .holy-footer {
    width: min(96%, 1450px) !important;
    max-width: 1450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body .top-plank-section {
    aspect-ratio: 3.05 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5% 3% 3% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background-size: 100% 100% !important;
  }
  body .intro-hero.home-hero {
    max-height: none !important;
  }
}

/* UPDATE 09 — restore logo and match the four section widths.
   Remove the oversized 3.05:1 header aspect ratio from Update 08. */
@media (min-width: 1001px) {
  body .top-plank-section,
  body .intro-hero.home-hero,
  body .keywest-lower-section .home-tour-grid,
  body .keywest-lower-section .holy-footer {
    width: min(96%, 1100px) !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  body .top-plank-section {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 24px 20px !important;
    display: block !important;
    overflow: visible !important;
    background-size: 100% 100% !important;
  }
  body .top-plank-section .tour-top-header {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 10px 0 !important;
    overflow: visible !important;
    align-items: center !important;
  }
  body .top-plank-section .header-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 500px !important;
  }
  body .top-plank-section .page-title-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 300px !important;
    max-width: 90% !important;
    height: auto !important;
    position: relative !important;
  }
  body .top-plank-section .main-nav {
    margin: 6px auto 0 !important;
    padding: 0 8px 6px !important;
    width: 100% !important;
  }
  body .intro-hero.home-hero {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1100 / 570 !important;
    max-height: none !important;
    padding: 0 !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* UPDATE 10 — small footer adjustment; all other artwork stays put. */
@media (min-width: 1001px) {
  /* Footer artwork was visually a touch narrower than the tour plank. */
  body .keywest-lower-section .holy-footer {
    width: min(96%, 1170px) !important;
    max-width: 1170px !important;
    margin-inline: auto !important;
    background-position: center center !important;
  }
  /* Pull the two dangling connectors inward toward the wood edges. */
  body .keywest-lower-section .rope-bridge-bottom::before {
    left: 15% !important;
  }
  body .keywest-lower-section .rope-bridge-bottom::after {
    right: 15% !important;
  }
}

/* UPDATE 11: remove extra slogan below hero; raise navigation onto header wood. */
.between-hero-tour-saying { display: none !important; }
@media (min-width: 1001px) {
  body .top-plank-section .main-nav {
    margin-top: -12px !important;
    transform: translateY(-12px) !important;
    position: relative !important;
    z-index: 3 !important;
  }
}

/* FINAL HEADER POLISH — preserves all existing artwork and footer. */
@media (min-width: 1001px) {
  body .top-plank-section .header-tagline {
    position: relative !important;
    top: -12px !important;
    margin-bottom: 15px !important;
  }
  body .top-plank-section .main-nav {
    transform: translate(22px, -12px) !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .top-plank-section .header-tagline { margin-bottom: 14px !important; }
  .top-plank-section .main-nav { gap: 10px !important; }
}


/* FOOTER SCRIPT ONLY — raise cursive without moving footer artwork. */
body .keywest-lower-section .holy-footer > .pre-footer-saying {
  bottom: 10% !important;
}
@media (max-width: 700px) {
  body .keywest-lower-section .holy-footer > .pre-footer-saying {
    bottom: 11% !important;
  }
}


/* DOCK PILINGS PREVIEW — isolated, easy to reposition or remove. */
body .keywest-lower-section { position: relative !important; isolation: isolate; }
body .keywest-lower-section > .dock-piling {
  position: absolute;
  display: block;
  width: clamp(75px, 9vw, 132px);
  height: auto;
  top: 11%;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
}
body .keywest-lower-section > .dock-piling-left { left: max(0px, calc(50% - 690px)); }
body .keywest-lower-section > .dock-piling-right { right: max(0px, calc(50% - 690px)); }
body .keywest-lower-section > .home-tour-grid,
body .keywest-lower-section > .holy-footer { position: relative; z-index: 2; }
@media (max-width: 1000px) {
  body .keywest-lower-section > .dock-piling { width: 8vw; min-width: 35px; top: 18%; }
  body .keywest-lower-section > .dock-piling-left { left: 0; }
  body .keywest-lower-section > .dock-piling-right { right: 0; }
}
@media (max-width: 600px) {
  body .keywest-lower-section > .dock-piling { display: none; }
}

/* DOCK MOORING TEST — only rope overlays; footer and tour artwork unchanged. */
/* Remove the two old dangling noodles below the tour plank. */
body .keywest-lower-section .rope-bridge-bottom::before,
body .keywest-lower-section .rope-bridge-bottom::after { content: none !important; display: none !important; }
body .keywest-lower-section > .real-dock-rope {
  position: absolute !important;
  width: clamp(145px, 19vw, 300px) !important;
  height: auto !important;
  top: 23% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 3px 2px rgba(40,25,12,.28));
}
body .keywest-lower-section > .real-dock-rope-left { left: max(3%, calc(50% - 690px)) !important; }
body .keywest-lower-section > .real-dock-rope-right { right: max(3%, calc(50% - 690px)) !important; }
@media (max-width: 1000px) {
  body .keywest-lower-section > .real-dock-rope { top: 25% !important; width: 21vw !important; }
  body .keywest-lower-section > .real-dock-rope-left { left: 2% !important; }
  body .keywest-lower-section > .real-dock-rope-right { right: 2% !important; }
}
@media (max-width: 600px) {
  body .keywest-lower-section > .real-dock-rope { display: none !important; }
}

/* SECOND MATCHING MOORING ROPES — independent position controls */
body .keywest-lower-section > .real-dock-rope-left2 {
  top: 28% !important;
  left: max(3%, calc(50% - 690px)) !important;
}
body .keywest-lower-section > .real-dock-rope-right2 {
  top: 28% !important;
  right: max(3%, calc(50% - 690px)) !important;
}
@media (max-width: 1000px) {
  body .keywest-lower-section > .real-dock-rope-left2 { top: 30% !important; left: 2% !important; }
  body .keywest-lower-section > .real-dock-rope-right2 { top: 30% !important; right: 2% !important; }
}

/* EXTRA PILINGS FOR TOP AND FOOTER PLANKS — 2026-10-18
   Decorative overlays only. Original art and all links are unchanged. */
body .top-plank-section { position: relative !important; overflow: visible !important; }
body .top-plank-section > .extra-piling {
  position: absolute !important; width: clamp(38px, 5.8vw, 86px) !important;
  height: auto !important; top: 16% !important; z-index: 2 !important;
  pointer-events: none !important;
}
body .top-plank-section > .extra-piling-top-left { left: -3% !important; }
body .top-plank-section > .extra-piling-top-right { right: -3% !important; }
body .keywest-lower-section .holy-footer { overflow: visible !important; }
body .keywest-lower-section .holy-footer > .extra-piling {
  position: absolute !important; width: clamp(40px, 6vw, 90px) !important;
  height: auto !important; top: 3% !important; z-index: 3 !important;
  pointer-events: none !important;
}
body .keywest-lower-section .holy-footer > .extra-piling-footer-left { left: -4% !important; }
body .keywest-lower-section .holy-footer > .extra-piling-footer-right { right: -4% !important; }
@media (max-width: 700px) {
  body .top-plank-section > .extra-piling,
  body .keywest-lower-section .holy-footer > .extra-piling { display: none !important; }
}

/* CONTINUOUS DOCK: one uninterrupted piling on each side, from top plank to footer. */
body .continuous-dock-wrap { position:relative; isolation:isolate; }
body .continuous-dock-wrap > .continuous-piling {
  position:absolute; top:auto; bottom:0; height:auto;
  width:clamp(110px,11vw,160px); z-index:5; pointer-events:none;
  object-fit:contain; filter:drop-shadow(3px 5px 5px rgba(0,0,0,.22));
}
body .continuous-dock-wrap > .continuous-piling-left { left:max(0px,calc(50% - 685px)); }
body .continuous-dock-wrap > .continuous-piling-right { right:max(0px,calc(50% - 685px)); }
body .continuous-dock-wrap .top-plank-section,
body .continuous-dock-wrap .keywest-lower-section { isolation:auto !important; }
/* Hide earlier individual post decorations, retaining the four rope overlays. */
body .continuous-dock-wrap .extra-piling,
body .continuous-dock-wrap .dock-piling { display:none !important; }
@media (max-width:700px) { body .continuous-dock-wrap > .continuous-piling { display:none; } }

/* SHIP HAPPENS — STACKED PILING TEST (undecorated extensions) */
/* All segments share the same width and preserve their original aspect ratio. */
body .continuous-dock-wrap { --piling-width: clamp(110px, 11vw, 160px); --piling-height: calc(var(--piling-width) * 1024 / 360); }
body .continuous-dock-wrap > .continuous-piling,
body .continuous-dock-wrap > .piling-extension {
  width: var(--piling-width) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}
body .continuous-dock-wrap > .piling-extension {
  position: absolute;
  display: block;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(3px 5px 5px rgba(0,0,0,.22));
}
body .continuous-dock-wrap > .piling-extension-left { left: max(0px, calc(50% - 685px)); }
body .continuous-dock-wrap > .piling-extension-right { right: max(0px, calc(50% - 685px)); }
/* Place piece 2 immediately above the decorated base, then 3, 4, and 5. */
body .continuous-dock-wrap > .piling-extension-2 { bottom: calc(var(--piling-height) * 1 - 3px); }
body .continuous-dock-wrap > .piling-extension-3 { bottom: calc(var(--piling-height) * 2 - 6px); }
body .continuous-dock-wrap > .piling-extension-4 { bottom: calc(var(--piling-height) * 3 - 9px); }
body .continuous-dock-wrap > .piling-extension-5 { bottom: calc(var(--piling-height) * 4 - 12px); }
@media (max-width: 700px) {
  body .continuous-dock-wrap > .piling-extension { display: none !important; }
}


/* FINAL DOCK ALIGNMENT — move all piling segments together, no image edits. */
@media (min-width: 701px) {
  body .continuous-dock-wrap > .continuous-piling-left,
  body .continuous-dock-wrap > .piling-extension-left {
    left: max(0px, calc(50% - 645px)) !important;
  }
  body .continuous-dock-wrap > .continuous-piling-right,
  body .continuous-dock-wrap > .piling-extension-right {
    right: max(0px, calc(50% - 645px)) !important;
  }
  /* Hide the rope tail protruding beyond the right piling. */
  body .keywest-lower-section > .real-dock-rope-right {
    clip-path: inset(0 12% 0 0);
  }
}

/* OCT 19 — CLOSE THE SAND GAP BETWEEN TOURS AND FOOTER.
   Desktop only: leave the wooden artwork, rope assets and piling offsets alone. */
@media (min-width: 1001px) {
  body .keywest-lower-section > .holy-footer {
    margin-top: -100px !important;
  }
}