/* ============================================================
   Charter Heaven — July 4th Landing Page  (route: /lp/4th)
   Fully self-contained styles. Every selector is prefixed with
   `lp4-` and scoped under `.lp4` (set on <body>) so nothing here
   can collide with any other landing page / stylesheet.
   ============================================================ */

:root {
  --lp4-navy: #262e45;
  --lp4-navy-deep: #1b2236;
  --lp4-gold: #e5c170;
  --lp4-gold-grad: linear-gradient(135deg, #b38e3d 0%, #fdfab7 47%, #b38e3d 100%);
  --lp4-cream: #f6f5f1;
  --lp4-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lp4-container: 1200px;
}

/* ---- base (scoped to the page) ---- */
.lp4,
.lp4 *,
.lp4 *::before,
.lp4 *::after {
  box-sizing: border-box;
}

.lp4 {
  margin: 0;
  font-family: var(--lp4-font);
  color: var(--lp4-navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.lp4 img,
.lp4 svg {
  max-width: 100%;
}

/* ============================================================
   HEADER
   ============================================================ */
.lp4-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(12, 18, 28, 0.08);
  box-shadow: 0 6px 22px rgba(10, 22, 40, 0.08);
}

.lp4-header__inner {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  min-height: 76px;
}

.lp4-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.lp4-logo img {
  display: block;
  height: 56px;
  width: auto;
}

.lp4-header__cta {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers the sub-text under the button */
  gap: 6px;
}

.lp4-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lp4-navy);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: clamp(16px, 1.4vw, 21px);
  padding: 12px 26px;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(6, 22, 50, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}

.lp4-call-btn:hover {
  background: var(--lp4-navy-deep);
  transform: translateY(-1px);
}

.lp4-call-sub {
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lp4-navy);
}

/* phone icon inside the call button — mobile only */
.lp4-call-icon {
  display: none;
}

/* ============================================================
   HERO
   ============================================================ */
.lp4-hero-section {
  background: var(--lp4-cream);
  padding-bottom: 56px;
}

.lp4-hero {
  position: relative;
  width: 100%;
}

/* The background art (people + baked-in badges, flag, gold swoosh,
   fireworks) is a real <img>. We cap the height to a compact banner so
   the hero doesn't tower over the fold; object-fit keeps it filling the
   width and `object-position` is biased upward to retain the fireworks,
   badges and faces while trimming a little sky/foreground. */
.lp4-hero__bg {
  display: block;
  width: 100%;
  height: clamp(600px, 36vw, 700px);
  object-fit: cover;
  object-position: center 28%;
}

.lp4-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start; /* copy sits near the top, like the mockup */
}

/* legibility scrim — the image's left edge is already navy, this just
   guarantees the copy reads cleanly at any size. */
.lp4-hero__overlay::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.lp4-hero__inner {
  position: relative;
  z-index: 2;
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
  padding-top: clamp(48px, 4.5vw, 82px);
}

.lp4-hero__copy {
  max-width: 60%;
  color: #fff;
}

.lp4-hero__title {
  margin: 0;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 3.5vw, 58px);
}

.lp4-hero__sub {
  margin: 22px 0 0;
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 30px);
}

/* mobile-only line break in the hero subheading (shown < 640px) */
.lp4-br-mobile {
  display: none;
}

.lp4-accent {
  background: var(--lp4-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Headline stats — sit above the icon list as a distinct, bolder row,
   separated from it by a thin gold divider. */
.lp4-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(229, 193, 112, 0.4);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(16px, 1.7vw, 25px);
}

.lp4-highlight__stat {
  white-space: nowrap;
}

.lp4-highlight__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp4-gold);
}

.lp4-points {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 22px;
}

.lp4-point {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: clamp(16px, 1.55vw, 23px);
}

.lp4-point-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: block;
}

.lp4-hero-call {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin-top: 18px;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  border-radius: 10px;
  padding: 14px 32px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-hero-call:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-hero-call__top {
  display: block;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.lp4-hero-call__main {
  display: block;
  margin-top: 4px;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   FLOATING FORM CARD
   ============================================================ */
.lp4-form-wrap {
  position: relative;
  z-index: 5;
  width: min(1120px, calc(100% - 48px));
  margin: -72px auto 0; /* overlaps the bottom of the hero */
}

.lp4-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.18);
  padding: 32px 34px 30px;
}

.lp4-form-head {
  text-align: center;
  margin-bottom: 22px;
}

.lp4-form-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--lp4-navy);
}

.lp4-form-sub {
  margin: 8px auto 0;
  max-width: 640px;
  font-weight: 600;
  font-size: 15px;
  color: #4a4a4a;
}

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

.lp4-field {
  min-width: 0;
}

.lp4-field input {
  width: 100%;
  height: 52px;
  border: 1px solid #e6e6e6;
  background: #f4f4f5;
  border-radius: 8px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1b1b1b;
}

.lp4-field input::placeholder {
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.lp4-field input:focus {
  outline: none;
  border-color: #c9a24a;
  background: #fff;
}

.lp4-field input[readonly] {
  color: #6a6a6a;
  cursor: default;
}

.lp4-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.lp4-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 16px 46px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-submit .lp4-arrow {
  font-size: 0.85em;
}

/* ============================================================
   CTA shine sweep (matches the rest of the site's buttons)
   ============================================================ */
.lp4-call-btn,
.lp4-hero-call,
.lp4-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lp4-call-btn::after,
.lp4-hero-call::after,
.lp4-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: lp4Shine 1.5s ease-in-out infinite alternate;
}

@keyframes lp4Shine {
  from {
    left: -150%;
  }
  to {
    left: 150%;
  }
}

/* ============================================================
   DESKTOP  (>= 993px)
   Show the full banner at natural scale (not zoomed) and let the form
   overlap its lower portion, so the art reads in the margins around the
   form like the design. The overlap is vw-proportional so it tracks the
   banner height across widths.
   ============================================================ */
@media (min-width: 993px) {
  .lp4-hero__bg {
    height: clamp(580px, 46vw, 880px);
    object-position: center 32%;
  }

  .lp4-form-wrap {
    /* Overlap grows with width so the form rides up under tall banners on big
       monitors (no large empty band above it), but is floored small near
       ~1280px (where the banner is at its min height) so it never covers the
       hero CTA, and capped so ultra-wide screens don't pull it up over the CTA. */
    margin-top: clamp(-228px, calc(-40vw + 545px), -48px);
  }
}

/* ============================================================
   TABLET  (641px – 992px)  — desktop banner art still used
   ============================================================ */
@media (max-width: 992px) {
  .lp4-hero__copy {
    max-width: 58%;
  }

  .lp4-form-wrap {
    margin-top: -64px;
  }
}

/* ============================================================
   MOBILE  (<= 640px)
   Stacked header (centered logo + full-bleed gold call bar) and a
   left-aligned hero whose copy flows from the top over the portrait
   art (height driven by the copy, art covers behind it).
   ============================================================ */
@media (max-width: 640px) {
  /* ---- Header: centered logo, full-width gold call bar ---- */
  .lp4-header__inner {
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    min-height: 0;
  }

  .lp4-logo {
    align-self: center;
    padding: 12px 0 10px;
  }

  .lp4-logo img {
    height: 50px;
  }

  .lp4-header__cta {
    width: 100%;
    align-items: stretch;
    gap: 0;
  }

  .lp4-call-sub {
    display: none; /* not shown on the mobile design */
  }

  .lp4-call-icon {
    display: inline-flex;
    font-size: 0.9em;
  }

  .lp4-call-btn {
    width: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: var(--lp4-gold-grad);
    color: var(--lp4-navy);
    padding: 13px 16px;
    gap: 9px;
    font-size: clamp(16px, 4.6vw, 20px);
  }

  /* The mobile art has the navy hero + gold swoosh in the top ~68% and a
     warm-white area (#f9faf7) baked into the bottom for the form. Match
     the section to that white and show the art down through the swoosh. */
  .lp4-hero-section {
    background: #f9faf7;
    padding-bottom: 40px;
  }

  /* Tall enough (vw-tied to the image ratio) that the gold swoosh at ~64-68%
     of the art falls INSIDE the hero — so it shows behind/around the form
     instead of being hidden under the white section background.
     The px floor keeps the navy area tall enough for the (non-scaling) copy
     on narrow phones, so the CTA button never slides under the form card.
     object-fit scales the art to width, so the swoosh stays put and the
     extra height just reveals more of the baked warm-white band. */
  .lp4-hero {
    height: max(155vw, 610px);
  }

  .lp4-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .lp4-hero__overlay {
    position: absolute; /* copy overlays the top; hero height set above */
    inset: 0;
    display: block;
  }

  /* dark behind the copy at the top, fading away so the gold swoosh /
     flag / stars stay bright in the band the form sits on */
  .lp4-hero__overlay::before {
    background: linear-gradient(
      180deg,
      rgba(20, 28, 48, 0.9) 0%,
      rgba(20, 28, 48, 0.6) 36%,
      rgba(20, 28, 48, 0.2) 58%,
      rgba(20, 28, 48, 0) 78%
    );
  }

  .lp4-hero__inner {
    width: 100%;
    margin: 0;
    /* generous spacing so the copy fills the navy hero down to the swoosh */
    padding: 40px 22px 24px;
  }

  .lp4-hero__copy {
    max-width: 100%;
    text-align: left;
  }

  /* big headline that fills the navy hero, like the design */
  .lp4-hero__title {
    font-size: clamp(28px, 8.4vw, 38px);
    line-height: 1.1;
    overflow-wrap: break-word;
  }

  .lp4-hero__sub {
    margin-top: 22px;
    font-size: clamp(21px, 6.2vw, 28px);
  }

  .lp4-br-mobile {
    display: inline;
  }

  /* stack the two headline stats so the long price range never overflows */
  .lp4-highlight {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 20px;
    padding-bottom: 14px;
    font-size: clamp(18px, 5vw, 22px);
  }

  .lp4-highlight__stat {
    white-space: normal;
  }

  .lp4-highlight__dot {
    display: none;
  }

  .lp4-points {
    justify-items: start;
    margin-top: 26px;
    gap: 22px;
  }

  .lp4-point {
    justify-content: flex-start;
    font-size: clamp(17px, 4.8vw, 20px);
  }

  .lp4-point-icon {
    width: 26px;
    height: 26px;
  }

  .lp4-hero-call {
    display: block;
    width: 100%;
    margin-top: 24px;
  }

  .lp4-hero-call__main {
    font-size: clamp(22px, 6.6vw, 28px);
  }

  /* Form top tracks the swoosh band (vw-proportional) and overlaps its lower
     edge, so the gold curve shows above/around the form instead of being
     covered or hidden under white. */
  .lp4-form-wrap {
    width: calc(100% - 28px);
    margin: -7vw auto 0;
  }

  .lp4-form-card {
    padding: 26px 20px 24px;
  }

  .lp4-form-title {
    text-transform: none; /* Title Case on mobile, per the design */
    font-size: clamp(22px, 6.4vw, 28px);
  }

  /* NAME + EMAIL full width; PHONE + SERVICE share a row, per the design */
  .lp4-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .lp4-form-grid .lp4-field:nth-child(1),
  .lp4-form-grid .lp4-field:nth-child(2) {
    grid-column: 1 / -1;
  }

  /* the readonly "SERVICE: JULY 4TH" sits in a narrow column — shrink it
     so the full label fits without clipping */
  .lp4-field input[readonly] {
    font-size: 13px;
    letter-spacing: 0;
    padding: 0 10px;
  }

  .lp4-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   YACHTS / FLEET SECTION  (carousel)
   Adapted from the shared `.section--yachts` component so it stays
   self-contained on this page. Every rule is scoped under
   `.section--yachts`, so these generic class names can't collide
   with the lp4- system or anything else.
   ============================================================ */
.section--yachts {
  background: var(--lp4-cream);
  padding: 78px 0 72px;
}

.section--yachts .container {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
}

/* Header */
.section--yachts .section__header {
  text-align: center;
  margin-bottom: 48px;
}

.section--yachts .section__title {
  font-family: var(--lp4-font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin: 0;
  color: var(--lp4-navy);
  text-wrap: balance; /* even, premium line breaks when it wraps */
}

/* Desktop: force the headline onto a single line */
@media (min-width: 1024px) {
  .section--yachts .section__title {
    white-space: nowrap;
  }
}

.section--yachts .yacht-star {
  color: #c79a3b;
  font-size: 0.72em;
  vertical-align: 0.12em;
  margin: 0 0.45em;
}

.section--yachts .section__sub {
  font-family: var(--lp4-font);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  color: #5c6b80;
  margin: 14px 0 0;
}

/* Carousel */
.section--yachts .carousel {
  width: 100%;
}

.section--yachts .yachts__track {
  display: flex;
  gap: 80px;
  padding: 0 10vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.section--yachts .yachts__track::-webkit-scrollbar {
  display: none;
}

.section--yachts .yachts__track.is-dragging {
  cursor: grabbing;
}

/* Slide */
.section--yachts .yacht {
  min-width: 78vw;
  max-width: 1100px;
  scroll-snap-align: center;
}

/* Media grid */
.section--yachts .yacht__media {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  gap: 16px;
  align-items: stretch;
}

.section--yachts .yacht__image {
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: block;
  width: 100%;
}

.section--yachts .yacht__image--main {
  height: 420px;
  border-radius: 18px;
}

.section--yachts .yacht__thumbs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section--yachts .yacht__image--thumb {
  height: 200px;
  border-radius: 14px;
}

/* Footer */
.section--yachts .yacht__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 22px;
}

.section--yachts .yacht__text {
  max-width: 720px;
}

.section--yachts .yacht__title {
  font-family: var(--lp4-font);
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--lp4-navy);
}

.section--yachts .yacht__subtitle {
  font-family: var(--lp4-font);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--lp4-navy);
}

.section--yachts .yacht__desc {
  font-family: var(--lp4-font);
  font-size: 16px;
  font-style: italic; /* "best for ..." line, like the design */
  margin: 0;
  color: #5c6b80;
}

/* Button (scoped so it won't affect anything else) */
.section--yachts .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.section--yachts .btn--primary {
  font-family: var(--lp4-font);
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.section--yachts .btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.section--yachts .btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.section--yachts .btn__icon-img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Indicators */
.section--yachts .carousel__indicators {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

.section--yachts .indicator {
  width: 56px;
  height: 3px;
  background: #e6e6e6;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease;
}

.section--yachts .indicator.is-active {
  background: var(--lp4-navy);
}

/* Mobile */
@media (max-width: 768px) {
  .section--yachts {
    padding: 52px 0;
  }

  .section--yachts .section__header {
    margin-bottom: 32px;
  }

  .section--yachts .yachts__track {
    gap: 24px;
    padding: 0 8vw;
  }

  .section--yachts .yacht {
    min-width: 84vw;
    max-width: 84vw;
  }

  .section--yachts .yacht__media {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .section--yachts .yacht__image--main,
  .section--yachts .yacht__image--thumb {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .section--yachts .yacht__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .section--yachts .yacht__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 14px;
  }

  .section--yachts .yacht__title {
    /* keep the yacht name on a single line; shrink just enough on small phones */
    font-size: clamp(13px, 4.5vw, 22px);
    white-space: nowrap;
  }

  .section--yachts .yacht__subtitle {
    font-size: 15px;
  }

  .section--yachts .yacht__desc {
    font-size: 14px;
  }

  .section--yachts .carousel__indicators {
    display: none;
  }
}

/* ============================================================
   WHY BOOK WITH US  (image left + 2x3 feature grid)
   ============================================================ */
.lp4-why {
  background: #ffffff;
  padding: 84px 0;
}

.lp4-why__inner {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  column-gap: 56px;
  align-items: stretch; /* image fills the content's height */
}

/* image = row 1 col 1, content = row 1 col 2, button = row 2 col 2,
   so the image spans from the eyebrow down to the last bullet (not the button) */
.lp4-why__media {
  grid-column: 1;
  grid-row: 1;
}

.lp4-why__content {
  grid-column: 2;
  grid-row: 1;
}

.lp4-why__media img {
  display: block;
  /* transparent collage: show the whole image with no side cropping. it fills
     the column height; the clear top/bottom edges blend into the white section */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lp4-why__eyebrow {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #6b7588; /* WCAG AA on white/cream (>=4.5:1) */
}

.lp4-why__title {
  margin: 0 0 36px;
  font-weight: 800;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--lp4-navy);
}

/* forced line break is mobile-only; desktop/tablet wrap naturally */
.lp4-why__br {
  display: none;
}

.lp4-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 38px;
}

.lp4-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.lp4-feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lp4-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lp4-feature__icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.lp4-feature__title {
  margin: 2px 0 7px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: var(--lp4-navy);
}

.lp4-feature__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5c6b80;
}

.lp4-why__btn {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 15px 42px;
  border-radius: 10px;
  text-decoration: none;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-why__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-why__btn .lp4-arrow {
  font-size: 0.85em;
}

/* tablet: stack image over content */
@media (max-width: 960px) {
  .lp4-why {
    padding: 64px 0;
  }
  .lp4-why__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 36px;
  }
  /* reset the desktop row/column placement so they stack in source order */
  .lp4-why__media,
  .lp4-why__content,
  .lp4-why__btn {
    grid-column: 1;
    grid-row: auto;
  }
  .lp4-why__media img {
    height: auto;
    max-width: 560px;
    margin: 0 auto;
  }
  .lp4-why__btn {
    margin-top: 8px;
  }
}

/* mobile: single-column feature list */
@media (max-width: 600px) {
  .lp4-why {
    padding: 50px 0;
  }
  .lp4-why__title {
    margin-bottom: 28px;
    font-size: clamp(21px, 6.2vw, 30px); /* smaller so it fits 2 lines */
  }
  /* show the controlled break -> exactly 2 lines on phones */
  .lp4-why__br {
    display: inline;
  }
  .lp4-why__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .lp4-why__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   VIP CHARTER BANNER  (full-width strip above "Why Book With Us")
   ============================================================ */
.lp4-vip {
  position: relative;
  z-index: 1; /* keeps the over-sized badge above the neighbouring sections */
  background: var(--lp4-navy) url("../img/4th/vip-bg.webp") center / cover no-repeat;
}

.lp4-vip__inner {
  width: min(1400px, calc(100% - 56px));
  margin: 0 auto;
  /* fixed height (not min-height) so the over-sized badge overflows the
     banner instead of stretching it taller */
  height: clamp(168px, 10.6vw, 206px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 58px);
  padding: 0;
}

/* Title (left) */
.lp4-vip__title {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap; /* keep each line ("PRIVATE YACHT") on a single row */
  flex: 0 0 auto;
}

.lp4-vip__t-lg {
  font-size: clamp(30px, 2.9vw, 54px);
  letter-spacing: -0.01em;
}

.lp4-vip__t-gold {
  margin-top: 3px;
  font-size: clamp(22px, 2.2vw, 40px);
  background: var(--lp4-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp4-vip__t-md {
  font-size: clamp(22px, 2.2vw, 40px);
}

/* Badge (center) — over-sized so it pops out past the banner, like the design */
.lp4-vip__badge {
  position: relative;
  z-index: 2;
  width: clamp(210px, 16.2vw, 286px);
  height: auto;
  flex: 0 0 auto;
}

/* Features (2 x 2) */
.lp4-vip__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.3vw, 22px) clamp(22px, 2.8vw, 54px);
}

.lp4-vip__feat {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(12px, 0.95vw, 16px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lp4-vip__feat img {
  width: clamp(38px, 3vw, 48px);
  height: auto;
  flex: 0 0 auto;
}

/* ---- mobile: portrait banner, stacked & centered ---- */
@media (max-width: 760px) {
  .lp4-vip {
    background-image: url("../img/4th/vip-bg-mobile.webp");
    background-position: center top;
  }
  .lp4-vip__inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 5vw, 32px);
    width: calc(100% - 36px); /* wider than the desktop container */
    height: auto; /* override the desktop fixed height so stacked content fits */
    min-height: 0;
    padding: 46px 0;
    text-align: center;
  }
  .lp4-vip__title {
    align-items: center;
    line-height: 1.02;
  }
  .lp4-vip__t-lg {
    font-size: clamp(44px, 15vw, 74px);
  }
  .lp4-vip__t-gold,
  .lp4-vip__t-md {
    font-size: clamp(26px, 9.3vw, 46px);
  }
  .lp4-vip__badge {
    width: clamp(165px, 50vw, 226px);
  }
  /* wide, left-aligned feature list (icons form a left column) */
  .lp4-vip__feats {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4.6vw, 22px);
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .lp4-vip__feat {
    justify-content: flex-start;
    gap: clamp(13px, 3.6vw, 18px);
    text-align: left;
    white-space: normal;
    font-size: clamp(15px, 4.7vw, 21px);
  }
  .lp4-vip__feat img {
    width: clamp(48px, 13.5vw, 60px);
  }
}

/* ============================================================
   LIMITED AVAILABILITY CTA  (yacht + fireworks night banner)
   ============================================================ */
.lp4-cta {
  position: relative;
  background: var(--lp4-navy);
}

.lp4-cta__bg img {
  display: block;
  width: 100%;
  height: clamp(440px, 31.5vw, 606px);
  object-fit: cover;
  object-position: center;
}

.lp4-cta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.lp4-cta__inner {
  width: min(1340px, calc(100% - 56px));
  margin: 0 auto;
}

.lp4-cta__content {
  max-width: 48%;
  color: #fff;
}

.lp4-cta__eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 22px;
  padding-top: 13px;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lp4-gold);
}

/* gold-gradient rule above the eyebrow, spanning the label width */
.lp4-cta__eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--lp4-gold-grad);
}

.lp4-cta__title {
  margin: 0 0 22px;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 47px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.lp4-cta__text {
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
}

.lp4-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.lp4-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-cta__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-cta__btn .lp4-arrow {
  font-size: 0.82em;
}

.lp4-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border-radius: 10px;
  border: 1.5px solid rgba(212, 178, 96, 0.85); /* gold outline */
  background: rgba(8, 16, 38, 0.28);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.lp4-cta__badge:hover {
  transform: translateY(-1px);
  border-color: var(--lp4-gold);
}

.lp4-cta__star {
  color: var(--lp4-gold);
  font-size: 1.4em;
  line-height: 1;
}

/* ---- mobile: portrait bg (scene on top), content over the lower navy ---- */
@media (max-width: 760px) {
  .lp4-cta__bg img {
    height: auto;
  }
  .lp4-cta__overlay {
    align-items: flex-end;
  }
  .lp4-cta__inner {
    width: calc(100% - 44px);
    padding-bottom: 8%;
  }
  .lp4-cta__content {
    max-width: 100%;
  }
  .lp4-cta__title {
    font-size: clamp(30px, 8.6vw, 46px);
  }
  .lp4-cta__text {
    font-size: clamp(15px, 4vw, 18px);
    max-width: 100%;
  }
  .lp4-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .lp4-cta__btn,
  .lp4-cta__badge {
    justify-content: center;
    font-size: 16px;
  }
}

/* ============================================================
   GOOGLE REVIEWS  (3 cards + trust-stats row)
   ============================================================ */
.lp4-reviews {
  background: #ffffff;
  padding: 84px 0;
}

.lp4-reviews__inner {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
}

.lp4-reviews__eyebrow {
  margin: 0 0 14px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #6b7588; /* WCAG AA on white/cream (>=4.5:1) */
}

.lp4-reviews__title {
  margin: 0 0 50px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--lp4-navy);
}

.lp4-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.lp4-review {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(10, 22, 40, 0.09);
  padding: 32px 30px;
}

.lp4-review__stars {
  margin-bottom: 18px;
  color: var(--lp4-gold);
  font-size: 19px;
  letter-spacing: 4px;
}

.lp4-review__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #5c6b80;
}

.lp4-review__name {
  margin: 0;
  font-weight: 800;
  font-size: 15px;
  color: var(--lp4-navy);
}

/* trust stats row */
.lp4-reviews__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 56px;
}

.lp4-rev-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 38px;
}

.lp4-rev-stat:not(:last-child) {
  border-right: 1px solid #e6e8ec;
}

.lp4-rev-stat__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.lp4-rev-stat__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.28;
  color: #5c6b80;
  max-width: 152px;
}

.lp4-rev-stat__text strong {
  display: block;
  font-weight: 800;
  color: var(--lp4-navy);
}

@media (max-width: 860px) {
  .lp4-reviews {
    padding: 56px 0;
  }
  .lp4-reviews__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 520px;
    margin: 0 auto;
  }
  /* 2 x 2 stat grid, no dividers, People stat first (matches mobile design) */
  .lp4-reviews__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 28px;
    margin: 40px auto 0;
    max-width: 480px;
  }
  .lp4-rev-stat {
    padding: 0;
    gap: 12px;
    justify-content: flex-start;
  }
  /* drop the desktop vertical dividers in the 2x2 grid */
  .lp4-rev-stat:not(:last-child) {
    border-right: 0;
  }
  .lp4-rev-stat:nth-child(2) {
    order: -1; /* "1,000+ Happy Guests" moves to the top-left */
  }
  .lp4-rev-stat__icon {
    width: 38px;
    height: 38px;
  }
  .lp4-rev-stat__text {
    max-width: none;
  }
}

/* ============================================================
   4TH OF JULY GALLERY  (6-card image grid + book button)
   ============================================================ */
.lp4-gallery {
  background: #ffffff;
  padding: 84px 0;
}

.lp4-gallery__inner {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
}

.lp4-gallery__eyebrow {
  margin: 0 0 14px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #6b7588; /* WCAG AA on white/cream (>=4.5:1) */
}

.lp4-gallery__title {
  margin: 0 0 50px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--lp4-navy);
}

.lp4-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 32px;
}

.lp4-gallery__card {
  margin: 0;
  /* 2 per row -> balanced 2x2 grid for the four cards */
  flex: 0 1 calc((100% - 32px) / 2);
}

.lp4-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1128;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(10, 22, 40, 0.14);
}

.lp4-gallery__card-title {
  margin: 20px 0 8px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--lp4-navy);
}

.lp4-gallery__card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5c6b80;
}

.lp4-gallery__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* gold "BOOK JULY 4TH" button (matches the brand gold buttons) */
.lp4-gallery__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 8px;
  text-decoration: none;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-gallery__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-gallery__btn .lp4-arrow {
  font-size: 0.82em;
}

@media (max-width: 860px) {
  .lp4-gallery {
    padding: 56px 0;
  }
  .lp4-gallery__title {
    margin-bottom: 36px;
  }
  .lp4-gallery__grid {
    gap: 30px 22px;
  }
  .lp4-gallery__card {
    flex-basis: calc((100% - 22px) / 2);
  }
  .lp4-gallery__card-title {
    font-size: 18px;
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  .lp4-gallery__grid {
    gap: 30px;
    max-width: 460px;
    margin: 0 auto;
  }
  .lp4-gallery__card {
    flex-basis: 100%;
  }
  .lp4-gallery__cta {
    margin-top: 44px;
  }
  .lp4-gallery__btn {
    width: 100%;
    max-width: 460px;
    justify-content: center;
  }
}

/* ============================================================
   EXCLUSIVELY SERVING MIAMI  (service-area cards + map)
   ============================================================ */
.lp4-areas {
  background: var(--lp4-cream);
  padding: 90px 0;
}

.lp4-areas__inner {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "cards";
  gap: 34px;
  align-items: stretch;
}

.lp4-areas__head {
  grid-area: head;
}

.lp4-areas__eyebrow {
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #5c6b80; /* WCAG AA (5.0:1) on the cream section background */
}

.lp4-areas__title {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--lp4-navy);
}

.lp4-areas__lead {
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #5c6b80;
}

.lp4-areas__cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 22px;
  justify-content: start;
}

.lp4-area-card {
  border: 3px solid #07172A;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  padding: 22px 22px;
}

.lp4-area-card--wide {
  grid-column: auto;
}

.lp4-area-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* card holds only the county name now (no city list) -> no trailing gap */
.lp4-area-card__head:last-child {
  margin-bottom: 0;
}

.lp4-area-card__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.lp4-area-card__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.2;
  color: var(--lp4-navy);
}

.lp4-area-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: 14px;
}

.lp4-area-card__list--3 {
  column-count: 2;
}

.lp4-area-card__list li {
  break-inside: avoid;
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.3;
  color: #5c6b80;
}

.lp4-area-card__list li:last-child {
  margin-bottom: 0;
}

.lp4-areas__map {
  grid-area: map;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: 0 18px 46px rgba(10, 22, 40, 0.16);
}

.lp4-areas__map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 980px) {
  .lp4-areas__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "cards";
    gap: 28px;
  }
}

@media (max-width: 620px) {
  .lp4-areas {
    padding: 56px 0;
  }
  .lp4-areas__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lp4-area-card__list--3 {
    column-count: 2;
  }
}

/* ============================================================
   GET YOUR QUOTE  (gold-framed split form: image | form | image)
   ============================================================ */
.lp4-quote {
  background: var(--lp4-cream);
  padding: 72px 0;
}

.lp4-quote__frame {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  background: var(--lp4-gold-grad);
  border-radius: 28px;
  padding: 5px; /* gold frame thickness */
  box-shadow: 0 26px 60px rgba(10, 22, 40, 0.18);
}

.lp4-quote__panels {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

/* ---- image side panels ---- */
.lp4-quote__side {
  min-height: 560px;
}

.lp4-quote__side-inner {
  position: relative;
  height: 100%;
}

.lp4-quote__side-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp4-quote__side-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 38px 34px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(8, 14, 28, 0.84) 0%,
    rgba(8, 14, 28, 0.4) 36%,
    rgba(8, 14, 28, 0) 64%
  );
}

.lp4-quote__side-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.12;
}

.lp4-quote__side-text {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- center form ---- */
.lp4-quote__form-col {
  background: #fff;
  padding: clamp(28px, 3vw, 46px) clamp(22px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp4-quote__title {
  margin: 0 0 26px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 36px);
  color: var(--lp4-navy);
}

.lp4-quote__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.lp4-quote__field {
  margin-bottom: 14px;
}

.lp4-quote__row .lp4-quote__field {
  margin-bottom: 0;
}

.lp4-quote__field input {
  width: 100%;
  height: 52px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--lp4-navy);
  background: #fff;
}

.lp4-quote__field input::placeholder {
  color: #8a93a3;
}

/* read-only "SERVICE: JULY 4TH" field — mirrors the hero form */
.lp4-quote__field input[readonly] {
  color: #6a6a6a;
  cursor: default;
}

.lp4-quote__field input:focus {
  outline: none;
  border-color: #c9a24a;
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}

.lp4-quote__btn {
  width: 100%;
  margin-top: 4px;
  border: none;
  border-radius: 8px;
  padding: 17px;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-quote__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-quote__note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #6b7588; /* WCAG AA (4.64:1) on white */
}

/* ---- responsive: stack into separate cards (image / form / image) ---- */
@media (max-width: 900px) {
  .lp4-quote {
    padding: 48px 0;
  }
  /* keep the SINGLE gold frame; just stack the three panels vertically.
     The frame stays rounded only at the very top & bottom, so the images
     curve at the outer corners and the gold runs as straight lines down
     the sides and across the top & bottom of the form. */
  .lp4-quote__panels {
    grid-template-columns: 1fr;
  }
  .lp4-quote__side {
    min-height: 320px;
  }
  .lp4-quote__side-body {
    padding: 30px 24px;
  }
}

/* keep Full Name / Email side-by-side on mobile (matches the Figma);
   just tighten the gap on the narrowest screens */
@media (max-width: 480px) {
  .lp4-quote__row {
    gap: 10px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.lp4-footer {
  position: relative;
  background: #0e1729;
}

/* gold gradient line across the top */
.lp4-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b38e3d 0%, #fdfab7 50%, #b38e3d 100%);
}

.lp4-footer__inner {
  width: min(var(--lp4-container), calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
}

.lp4-footer__logo {
  display: inline-flex;
  flex: 0 0 auto;
}

.lp4-footer__logo img {
  display: block;
  height: 62px;
  width: auto;
}

.lp4-footer__copy {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
}

.lp4-footer__sep {
  margin: 0 12px;
  color: rgba(255, 255, 255, 0.38);
}

.lp4-footer__link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s ease;
}

.lp4-footer__link:hover {
  color: var(--lp4-gold);
}

@media (max-width: 760px) {
  .lp4-footer__inner {
    flex-direction: column;
    gap: 24px;
    padding: 34px 0;
  }
  .lp4-footer__logo img {
    height: 84px;
  }
  .lp4-footer__copy {
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
  }
  /* each part on its own line; drop the "|" separator on mobile */
  .lp4-footer__copy .lp4-footer__line {
    display: block;
  }
  .lp4-footer__copy .lp4-footer__sep {
    display: none;
  }
}

/* ============================================================
   FORM-FILL MODAL  (call CTAs open this on desktop/tablet)
   ============================================================ */
.lp4-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lp4-modal[hidden] {
  display: none;
}

.lp4-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 28, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: lp4-modal-fade 180ms ease-out;
}

.lp4-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid rgba(212, 178, 96, 0.4);
  border-radius: 16px;
  padding: 38px 34px 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  animation: lp4-modal-pop 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.lp4-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #5c6b80; /* WCAG-compliant contrast on white */
  cursor: pointer;
  padding: 2px 6px;
}

.lp4-modal__close:hover {
  color: var(--lp4-navy);
}

.lp4-modal__title {
  margin: 0 0 8px;
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  color: var(--lp4-navy);
}

.lp4-modal__sub {
  margin: 0 0 22px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #5c6b80;
}

.lp4-modal__form {
  display: grid;
  gap: 12px;
}

.lp4-modal__form input {
  width: 100%;
  height: 52px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--lp4-navy);
  background: #fff;
}

.lp4-modal__form input::placeholder {
  color: #8a93a3;
}

.lp4-modal__form input:focus {
  outline: none;
  border-color: #c9a24a;
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}

.lp4-modal__submit {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  padding: 16px;
  background: var(--lp4-gold-grad);
  color: var(--lp4-navy);
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lp4-modal__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.lp4-modal__captcha {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.lp4-modal__captcha-error {
  margin: 2px 0 0;
  text-align: center;
  color: #d23b3b;
  font-size: 13px;
  font-weight: 600;
}

/* The reCAPTCHA checkbox is a fixed 302px; scale it down so it never
   overflows the modal on narrow phones. */
@media (max-width: 480px) {
  .lp4-modal__dialog {
    padding: 34px 18px 26px;
  }
}
@media (max-width: 400px) {
  .lp4-modal__captcha {
    transform: scale(0.86);
    transform-origin: center top;
    margin-bottom: -8px;
  }
}
@media (max-width: 344px) {
  .lp4-modal__captcha {
    transform: scale(0.76);
  }
}

.lp4-modal__phone {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: #5c6b80;
}

.lp4-modal__phone strong {
  color: var(--lp4-navy);
}

@keyframes lp4-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lp4-modal-pop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}