/* ============================================================
   Juniata Yacht — build stylesheet
   V2 "ocean-deep" direction (approved). Anchor: #123B31
   Note: concept file's #360f19ba burgundy overlay was NOT carried
   into this build — see README.md.
   ============================================================ */

:root {
  /* Universal Variables */
/* social brand colors */
    --fb: #1877F2;

/* Facebook blue */
    --ig-a: #833AB4;

/* Instagram gradient stops */
    --ig-b: #FD1D1D;
    --ig-c: #FCB045;

/* Typography & Layout Variables */
    --serif: Georgia, 'Times New Roman', serif;
    --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --maxw: 1120px;
    --radius: 14px;


  /* Option 1 Palette */
    --alt1-ocean: #123B31;
    --alt1-deep: #0B2924;
    --alt1-deep-2: #1e0101;
    --alt1-deep-3: #091E1A;

  /* Supporting Greens */
    --alt1-green: #1D4A3F;
    --alt1-green-2: #28584B;

  /* Brass & Gold */
    --alt1-brass: #ffba49;
    --alt1-brass-2: #D2B67D;

  /* Neutrals */
    --alt1-sand: #D6C6A7;
    --alt1-linen: #E9E0CD;
    --alt1-muted: #B9C4B9;

  /* Yacht Woodwork */
    --alt1-mahogany: #6A3E2D;



  /* Option 2 Palette */
    --alt2-ocean: #1A433A;
    --alt2-deep: #0A221E;
    --alt2-deep-2: #2A0B0B;
    --alt2-deep-3: #071714;

  /* Supporting Greens */
    --alt2-green: #275246;
    --alt2-green-2: #356356;

  /* Brass & Gold */
    --alt2-brass: #C9A25A;
    --alt2-brass-2: #B89354;

  /* Neutrals */
    --alt2-sand: #D7C9A8;
    --alt2-linen: #F0E7D4;
    --alt2-muted: #B6BDB1;

  /* Yacht Woodwork */
    --alt2-mahogany: #5A3428;


  /* Option 3 Palette */
    --alt3-ocean: #2F5D66;
    --alt3-deep: #18343A;
    --alt3-deep-2: #4A1D1D;
    --alt3-deep-3: #10252A;

  /* Supporting Greens */
    --alt3-green: #56715D;
    --alt3-green-2: #6C866F;

  /* Brass & Gold */
    --alt3-brass: #D6B56A;
    --alt3-brass-2: #C4A05C;

  /* Neutrals */
    --alt3-sand: #DDD0B1;
    --alt3-linen: #F4ECDD;
    --alt3-muted: #AEB8B1;

  /* Yacht Woodwork */
    --alt3-mahogany: #7A4836;


  /* Option 4 Palette */
    --alt4-ocean: #2A4E58;
    --alt4-deep: #1A2430;
    --alt4-deep-2: #5A1F1F;
    --alt4-deep-3: #0F1820;

  /* Supporting Greens */
    --alt4-green: #4E6258;
    --alt4-green-2: #61776C;

  /* Brass & Gold */
    --alt4-brass: #D9B15F;
    --alt4-brass-2: #C89A4A;

  /* Neutrals */
    --alt4-sand: #DFCFAE;
    --alt4-linen: #F7F0E3;
    --alt4-muted: #B7B7AE;

  /* Yacht Woodwork */
    --alt4-mahogany: #864A32;
  
  /* Option 5 Palette */
  --alt5-ocean: #203B4C;
  --alt5-deep: #18233F;
  --alt5-deep-2: #642D3C;
  --alt5-deep-3: #4A2230;

/* Supporting Greens */
  --alt5-green: #516D79;
  --alt5-green-2: #78959B;

/* Brass & Gold */
  --alt5-brass: #C6A15C;
  --alt5-brass-2: #D8BD82;

/* Neutrals */
  --alt5-sand: #F7EED5;
  --alt5-linen: #FFF6D9;
  --alt5-muted: #516D79;

/* Yacht Woodwork */
  --alt5-mahogany: #390D03;

  /* Option 1 Palette */
    --ocean: var(--alt1-ocean);
    --deep: var(--alt1-deep);
    --deep-2: var(--alt1-deep-2);
    --deep-3: var(--alt1-deep-3);

  /* Supporting Greens */
    --green: var(--alt1-green);
    --green-2: var(--alt1-green-2);

  /* Brass & Gold */
    --brass: var(--alt1-brass);
    --brass-2: var(--alt1-brass-2);

  /* Neutrals */
    --sand: var(--alt1-sand);
    --linen: var(--alt1-linen);
    --muted: var(--alt1-muted);

  /* Yacht Woodwork */
    --mahogony: var(--alt1-mahogany);

  }










/* Tis is added for the submenu aspect */

/* Base navigation styling */
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
  /* background-color: #333; */
}

.menu a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hide the sub-menu by default */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 160px;
  z-index: 1000;
}

/* Style each item inside the sub-menu */
.submenu li {
  display: block;
}

/* Show sub-menu on hover */
.dropdown:hover .submenu {
  display: block;
}

/* Optional hover effect for links */
.submenu a:hover {
  background-color: #555;
}



























* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--linen);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: min(var(--maxw), 92vw);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brass);
  color: var(--deep);
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--brass-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Top utility bar — socials, centered ---------- */
.social-bar {
  background: var(--deep-3);
  border-bottom: 1px solid rgba(231, 221, 197, .12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
}

/* ---------- Social pills — brand colors ---------- */
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .2s, filter .2s;
}

.social-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.social-pill svg {
  width: 15px;
  height: 15px;
  fill: #fff;
  flex-shrink: 0;
}

/* Facebook = blue; Instagram = its purple→pink→orange gradient */
.social-facebook {
  background: var(--fb);
}

.social-instagram {
  background: linear-gradient(135deg, var(--ig-a) 0%, var(--ig-b) 55%, var(--ig-c) 100%);
}

/* smaller pills used inside cards (contact page) */
.social-pill-sm {
  padding: 6px 14px;
  font-size: 10px;
}

/* ---------- Sticky header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 41, 36, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(231, 221, 197, .22);
}

.header-inner {
  width: min(var(--maxw), 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  height: 48px;
  width: auto;
  display: block;
}

.compass {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--brass);
  color: var(--sand);
  border-radius: 50%;
  font: 19px var(--serif);
  flex-shrink: 0;
}

.logo strong {
  display: block;
  color: #F1EADB;
  font: 20px/1 var(--serif);
  letter-spacing: .16em;
}

.logo small {
  display: block;
  margin-top: 4px;
  color: #D1C4A7;
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.nav a {
  color: #EEE8DB;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--brass-2);
}

.nav a[aria-current="page"] {
  color: var(--brass-2);
  border-bottom-color: var(--brass);
}

/* ---------- Buttons ---------- */
.button {
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 10px;
  font-weight: 700;
  color: var(--linen);
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  white-space: nowrap;

}

.button:hover {
  transform: translateY(-1px);
}

.button-gold {
  color: #e3eadb;
}

.button-gold:hover {
  background: var(--brass-2);
  border-color: var(--brass-2);
}

.button-clear {
  color: #F1EADB;
  background: rgba(8, 31, 26, .32);
}

.button-clear:hover {
  background: rgba(8, 31, 26, .6);
  border-color: var(--sand);
}

.button-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 9px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(100deg,rgba(9, 30, 26, .93) 0%,
      rgba(9, 30, 26, .72) 42%,
      rgba(9, 30, 26, .15) 75%,
      rgba(9, 30, 26, .05) 100%),
    url('../images/boat-traveling.webp');

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  background-color: var(--deep-2);
}

.hero-inner {
  position: relative;
  padding: 96px 0 72px;
  max-width: 640px;
}

.kicker {
  color: var(--brass);
  font-size: 1.0rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 18px;
}

.hero-bg-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 28, 24, .94) 0%, rgba(8, 34, 28, .78) 36%, rgba(9, 37, 31, .28) 72%, rgba(9, 37, 31, .12) 100%), linear-gradient(0deg, rgba(7, 28, 24, .68) 0%, transparent 43%);
}

h1,
.h-display {
  font-family: var(--serif);
  color: #F4EDE0;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 20px;
  text-wrap: balance;
}

.lede {
  font-size: 1.05rem;
  color: var(--linen);
  max-width: 54ch;
  margin: 0 0 28px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Facts ribbon ---------- */
.ribbon {
  border-block: 1px solid rgba(231, 221, 197, .2);
  background: var(--deep-2);
}

.ribbon-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 22px 0;
}

.fact strong {
  display: block;
  font: 28px/1.1 var(--serif);
  color: var(--brass-2);
}

.fact span {
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.section-alt {
  background: var(--deep-2);
}

.section-ocean {
  background: var(--ocean);
}

.services-intro {
  background-image:
    linear-gradient(100deg, rgba(9, 30, 26, .53), rgba(9, 30, 26, .43)),
    url('../images/group-cruise.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-intro {
  background-image:
    linear-gradient(100deg, rgba(9, 30, 26, .53), rgba(9, 30, 26, .43)),
    url('../images/about-intro.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-intro {
  background-image:
    linear-gradient(100deg, rgba(9, 30, 26, .53), rgba(9, 30, 26, .43)),
    url('../images/say-ahoy.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

h2,
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: #F4EDE0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 14px;
  text-wrap: balance;
}

h3,
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: #ffae00;
  font-size: 1.35rem;
  margin: 0 0 10px;
}

.muted {
  color: var(--muted);
}

.text-link {
  color: var(--brass-2);
  text-decoration: none;
  letter-spacing: .04em;
}

.text-link:hover {
  color: #fff;
  text-decoration: underline;
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split.reverse> :first-child {
  order: 2;
}

.figure {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(231, 221, 197, .25);
  box-shadow: 0px 8px 23px rgb(0 0 0 / 71%);
}

.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 8/5;
}

.figure figcaption {
  font-size: 11px;
  color: var(--muted);
  padding: 8px 4px 0;
  background: transparent;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

.card {
  background: var(--green);
  border: 1px solid rgb(231 221 197 / 72%);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: -1px 1px 10px rgb(18 216 61 / 35%);
}

.card p {
  margin: 0;
  color: #DCD6C6;
  font-size: .95rem;
}

.card .text-link {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 700;
}

.card-kicker {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-2);
  font-weight: 700;
}

.card-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/signature.webp') center / cover no-repeat;
}

.wedding-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/wedding.webp') center / cover no-repeat;
}

.gift-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/gift-cert.webp') center / cover no-repeat;
}

/* ---------- Rates ---------- */
.rate-card {
  position: relative;
  padding-top: 30px;
}

.rate-card .badge {
  position: absolute;
  top: -13px;
  left: 22px;
  background: var(--brass);
  color: #102C25;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.occasions-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/gallery-1.webp') center / cover no-repeat;
}

.gift-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/gift-cert.webp') center / cover no-repeat;
}

.crew-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/boat-owners.webp') center / cover no-repeat;
}

.signature-img {
  background: linear-gradient(180deg, rgba(9, 30, 26, .68), rgba(9, 30, 26, .84)),
    url('../images/signature.webp') center / cover no-repeat;
}

.rate {
  font: 44px/1 var(--serif);
  color: #F4EDE0;
}

.rate small {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: .05em;
}

.includes {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: .92rem;
  color: #DCD6C6;
}

.includes li {
  padding: 4px 0 4px 22px;
  position: relative;
}

.includes li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  color: var(--brass);
}

/* ---------- Cruise Pricing & Breakdown Block ---------- */
.pricing-block {
  margin-top: 26px;
  background: var(--deep-2);
  border: 1px solid rgba(210, 182, 125, .36);
  border-top: 3px solid var(--brass-2);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

.pricing-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 16px;
}

.pricing-eyebrow {
  display: block;
  color: var(--brass-2);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}

.pricing-title {
  font-family: var(--serif);
  font-weight: 400;
  color: #F4EDE0;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  margin: 0;
}

.pricing-sub {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

.pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(231, 221, 197, .2);
  border-radius: 10px;
  background: rgba(7, 25, 21, .55);
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

.pricing-table th,
.pricing-table td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(231, 221, 197, .14);
}

.pricing-table th:first-child,
.pricing-table td:first-child {
  text-align: left;
  padding-left: 18px;
}

.pricing-table thead th {
  background: rgba(18, 59, 49, .85);
  color: var(--sand);
  font-size: 10px;
  line-height: 1.35;
  vertical-align: bottom;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(210, 182, 125, .32);
}

.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table tbody tr:hover {
  background: rgba(210, 182, 125, .06);
}

.pricing-table tbody th {
  font-weight: 700;
  color: #F4EDE0;
}

.pricing-table .cruise-sub {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  color: var(--muted);
  margin-top: 2px;
}

.pricing-table td {
  color: #E4DECE;
}

.pricing-table .price-base {
  color: #F4EDE0;
  font-weight: 700;
}

.pricing-table .price-addon {
  color: var(--brass-2);
  font-weight: 600;
}

.pricing-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.pricing-detail-card {
  background: rgba(9, 30, 26, .48);
  border: 1px solid rgba(231, 221, 197, .18);
  border-radius: 10px;
  padding: 15px 18px;
}

.pricing-detail-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 6px;
}

.pricing-detail-top h4 {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--brass);
  margin: 0;
}

.pricing-range {
  font-size: .82rem;
  font-weight: 700;
  color: #F4EDE0;
  letter-spacing: .03em;
}

.pricing-timing {
  margin: 0 0 6px;
  font-size: .84rem;
  color: var(--sand);
  font-weight: 600;
}

.pricing-includes-note {
  margin: 0;
  font-size: .88rem;
  color: #DCD6C6;
}

.policy {
  margin-top: 22px;
  border: 1px solid rgba(231, 221, 197, .25);
  border-left: 4px solid var(--brass);
  border-radius: 10px;
  padding: 18px 20px;
  background: rgba(9, 30, 26, .35);
  font-size: .92rem;
}

.policy strong {
  color: var(--sand);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
}

.policy ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #DCD6C6;
}

.policy li {
  margin: 4px 0;
}

/* ---------- Forms ---------- */
.form-panel {
  background: var(--ocean);
  border: 1px solid rgba(231, 221, 197, .25);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 1px 13px 11px 0px rgb(0 0 0 / 54%);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

label,
.label {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
}

label .opt {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: none;
}

input,
select,
textarea {
  width: 100%;
  background: var(--deep);
  color: var(--linen);
  border: 1px solid rgba(231, 221, 197, .3);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
}

input::placeholder,
textarea::placeholder {
  color: #8FA392;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--brass);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

.checklist {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(9, 30, 26, .4);
  border: 1px solid rgba(231, 221, 197, .18);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--linen);
  font-weight: 400;
}

.check input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--brass);
}

.check small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.hp {
  position: absolute !important;
  left: -9999px !important;
  height: 0;
  overflow: hidden;
}

.form-note {
  font-size: .8rem;
  color: var(--muted);
  margin: 10px 0 0;
  min-height: 1.2em;
}

.form-note strong {
  color: var(--sand);
}

.form-privacy {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- Visit Our Friends (cross-promo) ---------- */
.friends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.friend {
  border: 1px solid rgba(231, 221, 197, .2);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--deep-2);
  color: var(--linen);
  text-decoration: none;
  display: block;
  transition: border-color .2s, transform .2s;
}

.friend:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}

/* Photo-backed partner cards. Swap the image URL here when new photos arrive. */
.friend-image {
  background-color: var(--deep-2);
  background-image: linear-gradient(180deg, rgb(9 30 26 / 40%), rgba(9, 30, 26, .88)), var(--friend-image);
  background-size: cover;
  background-position: center;
}

.friend-michelle {
  --friend-image: url('../images/michelle.webp');
  background-position: center 38%;
}

.friend-waterfront {
  --friend-image: url('../images/google.png');
}

.friend-partner {
  --friend-image: url('../images/boro-dock.webp');
  min-height: 100%;
}

.friend-partner strong {
  display: inline-block;
  margin-top: 10px;
  color: var(--linen);
}

.friend .friend-tag {
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  -webkit-text-stroke: 1px #000000;
  text-shadow: -1px 1px 3px #ffffff;
}

.friend h3 {
  margin: 10px 0 6px;
  font-size: 1.1rem;
}

.friend p {
  margin: 0;
  font-size: .87rem;
  color: var(--muted);
}

.friend-open {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 132px;
  border-style: solid;
  border-color: rgba(231, 221, 197, .35);
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.gallery-item {
  display: block;
  padding: 0;
  border: 1px solid rgba(231, 221, 197, .2);
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--deep-2);
  aspect-ratio: 4/3;
  transition: transform .2s, border-color .2s;
}

.gallery-item:hover {
  transform: scale(1.02);
  border-color: var(--brass);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 15, 12, .92);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 4vh 4vw;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 74vh;
  border-radius: 10px;
  border: 1px solid rgba(231, 221, 197, .3);
}

.lightbox-caption {
  color: var(--sand);
  font-size: .85rem;
  letter-spacing: .05em;
  text-align: center;
}

.lightbox-btn {
  position: absolute;
  background: rgba(9, 30, 26, .7);
  color: var(--linen);
  border: 1px solid rgba(231, 221, 197, .35);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
}

.lightbox-close {
  top: 18px;
  right: 20px;
}

.lightbox-prev {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(180deg, rgb(9 30 26 / 35%), rgba(9, 30, 26, .84)), url(../images/portrait.webp) center 58% / cover no-repeat, var(--ocean);
  border-block: 1px solid rgba(231, 221, 197, .2);
}

.cta-banner .container {
  position: relative;
  z-index: 1;
}

/* ---------- Footer ---------- */
.footer {
  background: #1e0101;
  border-top: 1px solid rgba(231, 221, 197, .22);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  padding: 48px 0 24px;
}

.footer h4 {
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer a {
  color: #E4DECE;
  text-decoration: none;
  font-size: .92rem;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(231, 221, 197, .18);
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(231, 221, 197, .4);
  display: grid;
  place-items: center;
  transition: border-color .2s, background .2s;
}

.footer-social a:hover {
  border-color: var(--brass);
  background: rgba(183, 149, 93, .15);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}

/* brand-tinted footer circles */
.footer-social .social-facebook {
  background: var(--fb);
  border-color: var(--fb);
}

.footer-social .social-instagram {
  background: linear-gradient(135deg, var(--ig-a) 0%, var(--ig-b) 55%, var(--ig-c) 100%);
  border-color: transparent;
}

.footer-social .social-facebook:hover,
.footer-social .social-instagram:hover {
  filter: brightness(1.1);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid rgba(231, 221, 197, .18);
  font-size: .78rem;
  color: var(--muted);
}

/* ---------- Mobile sticky action bar (phone only) ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(9, 30, 26, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(231, 221, 197, .3);
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 9px;
  text-decoration: none;
  color: var(--sand);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.mobile-bar a:hover,
.mobile-bar a:active {
  color: var(--brass-2);
}

.mobile-bar svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-bar .mb-book {
  color: var(--brass-2);
}

/* ---------- Hamburger ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(231, 221, 197, .4);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  color: var(--linen);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split.reverse> :first-child {
    order: 0;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 64px;
  }

  /* room for sticky mobile bar */
  .mobile-bar {
    display: grid;
  }

  .header .button-gold {
    display: none;
  }

  /* Book Now lives in the mobile bar */
  .nav-toggle {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--deep-2);
    border-bottom: 1px solid rgba(231, 221, 197, .25);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 5vw 16px;
  }

  .nav a {
    padding: 13px 6px;
    font-size: 11px;
    border-bottom: 1px solid rgba(231, 221, 197, .12);
  }

  .nav a[aria-current="page"] {
    border-bottom-color: var(--brass);
  }

  .header-inner {
    position: relative;
  }

  .header.nav-open .nav {
    display: flex;
  }

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

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

  .ribbon-inner {
    gap: 14px;
  }

  .fact strong {
    font-size: 22px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    padding-top: 36px;
  }

  .hero-inner {
    padding: 72px 0 56px;
  }
}