/* ===== generated by tools/family-css.py from css/proposal.css — do not edit ===== */
/* Bachelorette — rebuilt from mockups/bachelorette-mockup.png.
   Hot pink, handwritten accents, bold condensed headings, cream canvas. */
:root {
  --pink: #3fd1eb;
  --pink-dark: #23b7d1;
  --cream: #faf6f2;
  --black: #111;
  --text: #353535;
  --script: "Sacramento", cursive;
  --sans: "Montserrat", Arial, sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --wrap: 1300px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 95px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font: 14px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.modal-open {
  overflow: hidden;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  color: inherit;
  background: transparent;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  object-fit: cover;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: min(calc(100% - 96px), var(--wrap));
  margin-inline: auto;
}
.section {
  padding-block: 62px;
}
.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  z-index: 100;
  background: white;
  padding: 12px;
}
.skip:focus {
  top: 12px;
}
/* Squared party buttons, as in the original reference. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 44px;
  padding: 14px 28px;
  color: white;
  background: var(--pink);
  border: 1px solid var(--pink);
  border-radius: 1px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transition:
    background 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
}
.btn > span {
  font-size: 19px;
  line-height: 1;
  font-weight: 500;
}
.btn:hover {
  background: var(--pink-dark);
  border-color: var(--pink-dark);
  transform: translateY(-3px);
  box-shadow: 0 9px 25px #3fd1eb28;
}
.btn:active {
  transform: translateY(0);
}
.btn-dark {
  background: var(--black);
  border-color: var(--black);
}
.btn-outline {
  background: transparent;
  color: var(--pink);
  border-color: var(--pink);
}
.btn-outline:hover {
  color: white;
}
.section-title {
  text-align: center;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 40px;
}
h2 em {
  font-style: normal;
  color: var(--pink);
}
/* Floating white header; black-on-white after scrolling. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  color: white;
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.header-inner {
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: height 0.3s;
}
.site-header.scrolled {
  background: #fffaf7f5;
  color: var(--black);
  box-shadow: 0 2px 18px #0000000d;
  backdrop-filter: blur(16px);
}
.site-header.scrolled .header-inner {
  height: 78px;
}
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.brand-mark {
  width: 70px;
  height: 20px;
  fill: currentColor;
}
.brand > span {
  font-family: Georgia, serif;
  font-size: 21px;
  letter-spacing: 0.17em;
  line-height: 1.15;
}
.brand small {
  font-size: 6px;
  letter-spacing: 0.34em;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav > a {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: relative;
  padding-block: 10px;
}
.nav > a:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 100%;
  height: 2px;
  background: var(--pink);
  transition: right 0.3s;
}
.nav > a:hover:after,
.nav-current:after {
  right: 0 !important;
}
.nav .btn {
  padding: 12px 24px;
  min-height: 39px;
  font-size: 10px;
}
.menu-toggle {
  display: none;
}
.reading-progress {
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pink);
  position: absolute;
  bottom: 0;
  left: 0;
}
/* Original hero composition: party photo, pink script, white Anton title. */
.hero {
  position: relative;
  min-height: 690px;
  height: min(780px, 56vw);
  background: #0c1c24;
  isolation: isolate;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  padding: 136px 0 110px;
}
.hero-media {
  position: absolute;
  inset: -18px 0 -18px 22%;
  z-index: -3;
  will-change: transform;
  mask-image: linear-gradient(90deg, transparent, black 18%);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-position: 50% 42%;
  animation: photo-enter 1.5s ease-out both;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      #0c1c24 0%,
      #0c1c24ed 15%,
      #0c1c24b0 29%,
      #0c1c2452 42%,
      #0c1c2400 58%
    ),
    linear-gradient(
      180deg,
      #07172275,
      transparent 30%,
      transparent 85%,
      #0b1c2450
    );
}
.hero-copy {
  max-width: 540px;
}
.hero-kicker {
  font-size: 8px;
  letter-spacing: 0.17em;
  color: #ffffffa8;
  margin-bottom: 21px;
  animation: copy-enter 0.8s 0.1s both;
}
.hero h1 {
  font-weight: 400;
}
.hero-script {
  display: block;
  font-family: var(--script);
  font-size: clamp(70px, 7.9vw, 112px);
  font-weight: 700;
  line-height: 0.98;
  color: #48dbf5;
  letter-spacing: -0.055em;
  animation: copy-enter 1s 0.2s both;
  text-shadow: 0 2px 20px #0002;
}
.hero-display {
  display: block;
  font-family: var(--display);
  font-size: clamp(65px, 6.5vw, 94px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  animation: copy-enter 1s 0.35s both;
}
.hero-lead {
  margin-top: 30px;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.5;
  text-transform: uppercase;
  font-weight: 600;
  animation: copy-enter 1s 0.45s both;
}
.hero-sub {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  animation: copy-enter 1s 0.55s both;
}
.hero-copy > .btn {
  margin-top: 24px;
  animation: copy-enter 1s 0.65s both;
}
.hero-heart {
  position: absolute;
  top: 22%;
  left: 36%;
  width: 50px;
  height: 50px;
  color: #6fe3f8;
  transform: rotate(-12deg);
  animation: heart-pop 1.2s 0.8s both;
}
.hero-heart path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 1.5s 0.5s forwards;
}
.hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 87px;
  z-index: 2;
}
.hero-curve-brush {
  fill: var(--pink);
}
.hero-curve-fill {
  fill: var(--cream);
}
/* Six benefits and the compact three-photo story from the reference. */
.perks {
  padding: 4px 0 35px;
}
.perks-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
}
.perks li {
  text-align: center;
}
.perk-icon {
  width: 37px;
  height: 37px;
  color: var(--pink);
  margin: 0 auto 14px;
  transition: transform 0.3s;
}
.perks li:hover .perk-icon {
  transform: translateY(-5px);
}
.perks p {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--black);
  text-transform: uppercase;
}
.experience {
  padding-top: 38px;
}
.experience-grid {
  display: grid;
  grid-template-columns: 1fr 2.65fr;
  gap: 45px;
}
.experience-copy h2 {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--black);
}
.heart-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-size: 26px;
  width: 170px;
  line-height: 1;
  margin: 17px 0;
}
.heart-rule span {
  height: 1px;
  background: #3fd1eb66;
  flex: 1;
}
.heart-rule span:first-child {
  flex: 0.2;
}
.experience-copy > p {
  font-size: 12px;
  line-height: 1.85;
  max-width: 270px;
}
.experience-copy > .btn {
  margin-top: 24px;
}
.experience-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}
.experience-card {
  text-align: center;
}
.photo-frame {
  border-radius: 5px;
  overflow: hidden;
}
.photo-frame img {
  width: 100%;
  height: clamp(200px, 19.5vw, 290px);
  transition: transform 0.7s;
}
.experience-card:hover img {
  transform: scale(1.065);
}
.experience-card h3 {
  margin-top: 17px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--black);
  text-transform: uppercase;
}
.experience-card p {
  font-size: 10px;
  margin-top: 5px;
}
/* Watercolour package cards, with original flamingo and balloon artwork. */
.packages {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 24px;
  padding-bottom: 35px;
}
.packages .wrap {
  position: relative;
  z-index: 2;
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  max-width: 1100px;
  margin: auto;
}
.package {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 33px 31px 27px;
  border: 1px solid #e7f7fa;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 0 0, #c0f1f95c, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #def4f861, transparent 55%), #fffcf780;
  transition:
    box-shadow 0.35s,
    transform 0.35s;
}
.package:before {
  content: "";
  position: absolute;
  inset: -7px -4px;
  z-index: -1;
  background: linear-gradient(125deg, #e1fafe5c, transparent 48%, #d2f6fc36);
  clip-path: polygon(
    2% 6%,
    14% 3%,
    16% 0,
    36% 2%,
    46% 0,
    64% 2%,
    81% 0,
    98% 4%,
    96% 26%,
    100% 40%,
    97% 64%,
    100% 84%,
    96% 99%,
    79% 97%,
    60% 100%,
    31% 97%,
    9% 100%,
    2% 96%,
    4% 72%,
    0 58%,
    3% 35%
  );
}
.package:hover {
  transform: translateY(-7px);
  box-shadow: 0 17px 35px #359cae14;
}
.package-featured {
  border: 1.5px solid var(--pink);
  background: #fffdfb;
  box-shadow: 0 7px 22px #3fd1eb10;
}
.package-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  color: white;
  background: #111;
  border-radius: 30px;
  padding: 5px 23px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.package-doodle {
  position: absolute;
  top: 15px;
  right: 15px;
  color: var(--pink);
  font-size: 31px;
  line-height: 1;
  transform: rotate(14deg);
}
.package h3 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--black);
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 4px;
}
.package-duration {
  text-align: center;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #807179;
  margin-top: 9px;
}
.package ul {
  margin-top: 24px;
  margin-bottom: 25px;
}
.package li {
  padding: 4px 0 4px 22px;
  position: relative;
  font-size: 11px;
  line-height: 1.6;
}
.package li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  border: 1px solid var(--pink);
  border-radius: 50%;
  color: var(--pink);
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  font-size: 8px;
  line-height: 1;
}
.package-bottom {
  margin-top: auto;
  text-align: center;
}
.package-price > span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 1.4;
}
.package-price strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1.2;
}
.package-price small {
  display: block;
  font-size: 8px;
  color: #7d6b73;
  margin-top: 4px;
}
.package-bottom .btn {
  margin-top: 18px;
  width: 100%;
  font-size: 10px;
  padding-inline: 12px;
  min-height: 40px;
}
.party-flamingo,
.party-balloon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: float 5s ease-in-out 3;
}
.party-flamingo {
  width: 135px;
  left: -20px;
  bottom: 26px;
}
.party-balloon {
  width: 166px;
  right: -8px;
  bottom: 18px;
  animation-delay: -2s;
}
.price-note {
  text-align: center;
  font-size: 9px;
  margin-top: 27px;
  color: #786e71;
}
/* Six circular add-ons with handwritten captions. */
.addons {
  padding-top: 32px;
  padding-bottom: 40px;
}
.addons-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px;
  max-width: 1130px;
  margin-inline: auto;
}
.addon {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
}
.addon-photo {
  position: relative;
  display: block;
  width: min(100%, 124px);
  aspect-ratio: 1;
  margin: auto;
}
.addon-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.addon-photo b {
  position: absolute;
  bottom: 1px;
  right: 2px;
  width: 25px;
  height: 25px;
  background: var(--cream);
  border: 1px solid #3fd1eb7a;
  color: var(--pink);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  display: grid;
  place-items: center;
  transition:
    background 0.3s,
    color 0.3s;
}
.addon:hover img {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px #3fd1eb22;
}
.addon[aria-pressed="true"] img {
  box-shadow: 0 0 0 4px var(--pink);
}
.addon[aria-pressed="true"] b {
  background: var(--pink);
  color: white;
}
.addon-name {
  display: block;
  font:
    23px/1.3 "Yellowtail",
    cursive;
  color: var(--black);
  margin-top: 16px;
}
.addons-bottom {
  text-align: center;
  margin-top: 22px;
}
.addons-bottom > p {
  font-size: 10px;
  color: #87717a;
  min-height: 18px;
  margin-bottom: 13px;
}
/* Pink memory strip with gallery controls and native modal enlargement. */
.memories {
  background: #e8f9fc;
  padding-block: 34px;
}
.memories .section-title {
  margin-bottom: 28px;
}
.memories-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 23px;
}
.memory-note {
  padding: 21px;
  background: var(--cream);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 225px;
}
.memory-hearts {
  color: var(--pink);
  font-size: 21px;
  letter-spacing: 3px;
  line-height: 1.1;
}
.memory-note p {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 16px;
}
.memory-note em {
  font: 24px/1.2 var(--script);
  color: var(--pink);
  display: inline-block;
  margin-top: 5px;
}
.memory-note > span:last-of-type {
  font-size: 10px;
  margin-top: 12px;
}
.memory-open {
  padding: 8px 0 0;
  margin-top: auto;
  font-size: 9px;
  font-weight: 700;
  color: var(--pink);
  text-align: left;
}
.memory-open span {
  margin-left: 12px;
}
.gallery-shell {
  min-width: 0;
}
.gallery-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar {
  display: none;
}
.gallery-track li {
  flex: 0 0 calc((100% - 36px) / 4);
  scroll-snap-align: start;
  min-width: 140px;
}
.gallery-photo {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.gallery-photo img {
  width: 100%;
  height: 225px;
  transition: transform 0.6s;
}
.gallery-photo:hover img {
  transform: scale(1.075);
}
.gallery-photo > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: white;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.gallery-photo:hover > span,
.gallery-photo:focus-visible > span {
  opacity: 1;
  transform: none;
}
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.gallery-controls > span {
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #638f97;
}
.gallery-controls > div {
  display: flex;
  gap: 7px;
}
.gallery-controls button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink);
  color: white;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: background 0.2s;
}
.gallery-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.gallery-controls button:hover:enabled {
  background: var(--pink-dark);
}
/* Final full-bleed yacht banner and playful pink splat from the reference. */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #103344;
  color: white;
}
.closing-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  object-position: 55% 50%;
}
.closing-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    90deg,
    #0d2537b8 0%,
    #0d253773 38%,
    #0d253715 70%
  );
}
.closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  min-height: 285px;
  padding-block: 35px;
}
.closing h2 {
  font-size: clamp(27px, 3.5vw, 46px);
  line-height: 1.15;
  text-transform: uppercase;
  font-weight: 700;
}
.closing h2 > span {
  display: block;
  text-transform: none;
  color: #55def6;
  font: clamp(39px, 4.4vw, 64px)/1.15 var(--script);
  margin-top: 2px;
}
.closing .btn {
  margin-top: 22px;
}
.closing-splat {
  position: relative;
  flex-shrink: 0;
  width: 238px;
  height: 238px;
  transform: rotate(9deg);
  transition: transform 0.5s;
}
.closing-splat:hover {
  transform: rotate(0);
}
.closing-splat-shape {
  width: 100%;
  height: 100%;
  fill: var(--pink);
}
.closing-splat-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  font: 18px/1.35 var(--display);
  text-transform: uppercase;
}
.closing-splat-text .is-lg {
  font-size: 24px;
}
/* Compact black footer. */
footer {
  background: #050505;
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.3fr;
  gap: 45px;
  padding-block: 38px;
}
.footer-brand .brand-mark {
  width: 76px;
}
.footer-brand > p {
  font-size: 8px;
  color: #939393;
  margin-top: 16px;
}
.socials {
  display: flex;
  gap: 16px;
  margin-top: 15px;
  font-size: 9px;
}
.socials a:first-child {
  color: #59dbf2;
}
.footer-grid h2 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: 0.07em;
}
.footer-grid > div > a:not(.brand),
.footer-grid > div > p:not(.footer-brand p) {
  display: block;
  color: #b5b5b5;
  font-size: 10px;
  line-height: 1.8;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.footer-grid a:hover {
  color: var(--pink);
}
.footer-enquiry {
  font-size: 10px;
  color: #59dbf2;
  padding: 12px 0 0;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ffffff19;
  padding-block: 18px;
  font-size: 8px;
  color: #828282;
}
/* The enquiry stays in a dialog so the original landing rhythm is preserved. */
dialog::backdrop {
  background: #09121bd9;
  backdrop-filter: blur(5px);
}
.booking-dialog {
  background: var(--cream);
  color: var(--text);
  padding: 38px;
  width: min(600px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  border: 0;
  border-top: 4px solid var(--pink);
  border-radius: 5px;
}
.dialog-close {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 28px;
  width: 35px;
  height: 35px;
  line-height: 1;
  z-index: 2;
}
.booking-intro > p {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #58909a;
  font-weight: 600;
}
.booking-intro h2 {
  font: 32px/1.2 var(--display);
  text-transform: uppercase;
  color: var(--black);
  margin: 13px 0 7px;
  font-weight: 400;
}
.booking-intro > span {
  font-size: 11px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 25px;
}
label {
  font-size: 10px;
  font-weight: 600;
  display: block;
}
.full {
  grid-column: 1/-1;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  background: white;
  color: var(--text);
  border: 1px solid #e1e9eb;
  border-radius: 2px;
  font-size: 12px;
  margin-top: 7px;
  padding: 11px 10px;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: #96818a;
  font-size: 11px;
}
#selected-extras {
  font-size: 10px;
  color: #5e939c;
  margin: 18px 0;
}
#enquiry-form > .btn {
  width: 100%;
}
.form-note,
#form-status {
  font-size: 9px;
  line-height: 1.7;
  margin-top: 13px;
  color: #85747a;
}
#email-draft {
  margin-top: 16px;
}
.booking-whatsapp {
  display: block;
  text-align: center;
  margin-top: 15px;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lightbox {
  inset: 0;
  margin: 0;
  border: 0;
  background: #0d1722f5;
  color: white;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  padding: 65px;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox figure {
  width: 100%;
  max-width: 850px;
  text-align: center;
}
.lightbox figure img {
  width: 100%;
  height: 75dvh;
  object-fit: contain;
}
.lightbox figcaption {
  font-size: 11px;
  margin-top: 15px;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink);
  color: white;
  font-size: 20px;
}
.lightbox-prev {
  left: 15px;
}
.lightbox-next {
  right: 15px;
}
.lightbox .dialog-close {
  top: 15px;
  right: 20px;
}
/* Progressive enhancement: content remains visible without JavaScript. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--delay, 0ms),
    transform 0.7s var(--delay, 0ms);
}
.motion [data-reveal].visible {
  opacity: 1;
  transform: none;
}
@keyframes copy-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes photo-enter {
  from {
    transform: scale(1.055);
  }
  to {
    transform: scale(1);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes heart-pop {
  from {
    opacity: 0;
    transform: rotate(-20deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
}
@keyframes float {
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}
@media (min-width: 1550px) {
  .hero {
    height: 800px;
  }
  .hero-media {
    left: 25%;
  }
}
@media (max-width: 1150px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .nav {
    gap: 21px;
  }
  .nav > a {
    font-size: 9px;
  }
  .brand > span {
    font-size: 18px;
  }
  .hero {
    min-height: 650px;
  }
  .hero-script {
    font-size: 89px;
  }
  .hero-display {
    font-size: 78px;
  }
  .hero-heart {
    left: 38%;
    top: 21%;
    width: 40px;
  }
  .experience-grid {
    gap: 27px;
    grid-template-columns: 1fr 2.5fr;
  }
  .experience-copy > p {
    font-size: 11px;
  }
  .experience-copy h2 {
    font-size: 20px;
  }
  .experience-cards {
    gap: 12px;
  }
  .photo-frame img {
    height: 220px;
  }
  .package-grid {
    gap: 25px;
    max-width: 900px;
  }
  .package {
    padding: 28px 23px 24px;
  }
  .package h3 {
    font-size: 22px;
  }
  .party-flamingo {
    left: -30px;
    width: 100px;
  }
  .party-balloon {
    right: -24px;
    width: 120px;
  }
  .addons-grid {
    gap: 23px;
  }
  .addon-name {
    font-size: 20px;
  }
  .memories-layout {
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 18px;
  }
  .gallery-track li {
    flex-basis: calc((100% - 24px) / 3);
  }
  .footer-grid {
    gap: 25px;
  }
}
@media (max-width: 900px) {
  .nav {
    gap: 14px;
  }
  .nav > a {
    font-size: 8px;
  }
  .nav .btn {
    font-size: 8px;
    padding: 11px 15px;
  }
  .header-inner {
    gap: 20px;
  }
  .hero-media {
    left: 12%;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #0c1c24ef, #0c1c24ba 24%, #0c1c2430 65%),
      linear-gradient(180deg, #0c1c2470, transparent 35%);
  }
  .hero-script {
    font-size: 80px;
  }
  .hero-display {
    font-size: 72px;
  }
  .experience-grid {
    grid-template-columns: 1fr;
  }
  .experience-copy {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0 30px;
    align-items: start;
  }
  .experience-copy h2 {
    font-size: 24px;
  }
  .experience-copy > .heart-rule {
    grid-column: 1;
    grid-row: 2;
  }
  .experience-copy > p {
    grid-column: 2;
    grid-row: 1/3;
    max-width: none;
    font-size: 12px;
  }
  .experience-copy > .btn {
    justify-self: start;
    margin-top: 0;
  }
  .photo-frame img {
    height: 260px;
  }
  .experience-card h3 {
    font-size: 12px;
  }
  .experience-card p {
    font-size: 11px;
  }
  .package-grid {
    gap: 18px;
  }
  .package {
    padding: 29px 18px 22px;
  }
  .package h3 {
    font-size: 21px;
  }
  .package-doodle {
    font-size: 24px;
    right: 9px;
    top: 10px;
  }
  .package li {
    font-size: 10px;
    padding-left: 19px;
  }
  .package-badge {
    font-size: 8px;
    padding-inline: 17px;
  }
  .addons-grid {
    gap: 15px;
  }
  .addon-name {
    font-size: 19px;
  }
  .party-flamingo,
  .party-balloon {
    opacity: 0.55;
  }
  .closing-splat {
    width: 190px;
    height: 190px;
  }
  .closing-splat-text {
    font-size: 14px;
  }
  .closing-splat-text .is-lg {
    font-size: 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:nth-child(even) {
    padding-left: 15px;
  }
}
@media (max-width: 700px) {
  html {
    scroll-padding-top: 80px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .section {
    padding-block: 42px;
  }
  .header-inner {
    height: 86px;
  }
  .site-header.scrolled .header-inner {
    height: 70px;
  }
  .brand > span {
    font-size: 18px;
  }
  .brand-mark {
    width: 57px;
    height: 18px;
  }
  .brand small {
    font-size: 5px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
  }
  .menu-toggle span {
    width: 24px;
    height: 2px;
    background: currentColor;
    transition:
      transform 0.25s,
      opacity 0.25s;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .site-header.menu-open {
    background: var(--cream);
    color: var(--black);
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 20px;
    background: var(--cream);
    color: var(--black);
    box-shadow: 0 18px 25px #0002;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }
  .nav.open {
    display: flex;
  }
  .nav > a {
    font-size: 12px;
    padding: 10px;
  }
  .nav .btn {
    font-size: 11px;
    min-height: 44px;
  }
  .hero {
    height: 780px;
    min-height: 690px;
    max-height: none;
    padding: 143px 0 100px;
    align-items: start;
  }
  .hero-media {
    inset: -15px -16% -15px 0;
  }
  .hero-media img {
    object-position: 58% center;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #0b1b27e0, #0b1b2780 50%, #0b1b2720),
      linear-gradient(180deg, #0b1b2759 0%, transparent 35%, #0b1b2770 85%);
  }
  .hero-kicker {
    font-size: 6px;
    letter-spacing: 0.14em;
    margin-bottom: 24px;
  }
  .hero-script {
    font-size: clamp(63px, 12vw, 86px);
    letter-spacing: -0.065em;
  }
  .hero-display {
    font-size: clamp(64px, 11vw, 80px);
    margin-top: 6px;
  }
  .hero-lead {
    font-size: 17px;
    margin-top: 27px;
  }
  .hero-sub {
    font-size: 12px;
    margin-top: 19px;
  }
  .hero-copy > .btn {
    margin-top: 25px;
  }
  .hero-heart {
    left: auto;
    right: 25px;
    top: 118px;
    width: 35px;
    height: 35px;
  }
  .hero-curve {
    height: 48px;
  }
  .perks {
    padding: 7px 0 20px;
  }
  .perks-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 12px;
  }
  .perk-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
  }
  .perks p {
    font-size: 7px;
  }
  .experience-grid {
    gap: 26px;
  }
  .experience-copy {
    display: block;
  }
  .experience-copy h2 {
    font-size: 25px;
  }
  .experience-copy > p {
    font-size: 12px;
    max-width: 440px;
  }
  .experience-copy .heart-rule {
    margin-block: 15px;
  }
  .experience-copy > .btn {
    margin-top: 20px;
  }
  .experience-cards {
    gap: 10px;
  }
  .photo-frame img {
    height: 190px;
  }
  .experience-card h3 {
    font-size: 9px;
    margin-top: 12px;
  }
  .experience-card p {
    font-size: 8px;
    line-height: 1.5;
  }
  .section-title {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .packages {
    padding-top: 20px;
    padding-bottom: 22px;
  }
  .package-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 30px;
    padding-inline: 10px;
  }
  .package {
    padding: 30px;
  }
  .package h3 {
    font-size: 27px;
  }
  .package-doodle {
    right: 22px;
    top: 20px;
    font-size: 29px;
  }
  .package-duration {
    font-size: 9px;
  }
  .package ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 13px;
    margin-block: 22px;
  }
  .package li {
    font-size: 10px;
  }
  .package li:before {
    top: 8px;
  }
  .package-price strong {
    font-size: 33px;
  }
  .package-bottom .btn {
    max-width: 250px;
    font-size: 11px;
    min-height: 44px;
  }
  .package-badge {
    font-size: 9px;
  }
  .party-flamingo {
    left: -30px;
    bottom: auto;
    top: 25%;
    width: 110px;
    opacity: 0.8;
  }
  .party-balloon {
    right: -20px;
    bottom: 60px;
    width: 125px;
    opacity: 0.8;
  }
  .price-note {
    font-size: 8px;
    max-width: 290px;
    margin-inline: auto;
  }
  .addons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 17px;
  }
  .addon-photo {
    width: 100px;
  }
  .addon-name {
    font-size: 19px;
    margin-top: 12px;
  }
  .addon-photo b {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
  .addons-bottom > p {
    font-size: 9px;
  }
  .memories {
    padding-block: 33px;
  }
  .memories-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .memory-note {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 15px;
    padding: 20px;
  }
  .memory-hearts {
    grid-column: 1;
    grid-row: 1;
  }
  .memory-note > p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 11px;
  }
  .memory-note em {
    font-size: 21px;
  }
  .memory-note > span:last-of-type {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: center;
    font-size: 9px;
  }
  .memory-open {
    grid-column: 2;
    grid-row: 3;
  }
  .gallery-track li {
    flex-basis: calc((100% - 12px) / 2);
    min-width: 0;
  }
  .gallery-photo img {
    height: 225px;
  }
  .gallery-photo > span {
    opacity: 1;
    transform: none;
  }
  .gallery-controls button {
    width: 36px;
    height: 36px;
  }
  .closing-inner {
    padding-block: 35px;
    gap: 15px;
    min-height: 275px;
  }
  .closing h2 {
    font-size: 25px;
  }
  .closing h2 > span {
    font-size: 39px;
  }
  .closing-splat {
    width: 115px;
    height: 115px;
    margin-right: -10px;
  }
  .closing-splat-text {
    font-size: 8px;
  }
  .closing-splat-text .is-lg {
    font-size: 12px;
  }
  .closing .btn {
    font-size: 10px;
    padding: 13px 20px;
  }
  .closing-photo {
    object-position: 63% center;
  }
  .footer-grid {
    gap: 30px 20px;
    padding-block: 32px;
  }
  .footer-grid > div:nth-child(even) {
    padding-left: 0;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .footer-grid > div > a:not(.brand),
  .footer-grid > div > p:not(.footer-brand p) {
    font-size: 10px;
  }
  .footer-bottom {
    font-size: 7px;
    align-items: start;
  }
  .footer-bottom p {
    max-width: 220px;
  }
  .footer-bottom > a {
    white-space: nowrap;
  }
  .booking-dialog {
    padding: 30px 22px;
    max-height: calc(100dvh - 24px);
  }
  .booking-intro > p {
    font-size: 7px;
  }
  .booking-intro h2 {
    font-size: 29px;
  }
  .form-grid {
    gap: 14px 12px;
  }
  .booking-intro > span {
    font-size: 10px;
  }
  .lightbox {
    padding: 60px 45px;
  }
  .lightbox figure img {
    height: 65dvh;
  }
  .lightbox-prev,
  .lightbox-next {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
  .lightbox-prev {
    left: 8px;
  }
  .lightbox-next {
    right: 8px;
  }
  .lightbox figcaption {
    font-size: 9px;
  }
}
@media (max-width: 390px) {
  .hero {
    height: 735px;
  }
  .hero-script {
    font-size: 61px;
  }
  .hero-display {
    font-size: 65px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-kicker {
    font-size: 5.5px;
  }
  .hero-heart {
    right: 21px;
    top: 113px;
    width: 30px;
  }
  .photo-frame img {
    height: 150px;
  }
  .experience-card p {
    font-size: 7px;
  }
  .package {
    padding: 28px 23px;
  }
  .package ul {
    grid-template-columns: 1fr;
  }
  .package li {
    font-size: 11px;
  }
  .closing-splat {
    display: none;
  }
  .closing h2 {
    font-size: 28px;
  }
  .closing h2 > span {
    font-size: 45px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .addon-name {
    font-size: 17px;
  }
  .addon-photo {
    width: 87px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .motion [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .hero-heart path {
    stroke-dashoffset: 0;
  }
  .hero-media {
    transform: none !important;
  }
}


/* ===== generated from css/bride-refinement.css — proposal palette ===== */
/* Refinement of the approved pink / black direction. Original typefaces,
   photography and curved transitions remain the visual foundation. */
:root {
  --pink: #3cd3ee;
  --pink-dark: #1eb4cf;
}
.section {
  padding-block: 82px;
}
.section-title {
  font-size: clamp(27px, 2.8vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 48px;
}
.btn {
  min-height: 50px;
  padding: 17px 28px;
  font-size: 12px;
  letter-spacing: 0.045em;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    #fff3 48%,
    transparent 70%
  );
  translate: -130% 0;
  transition: translate 0.65s;
  pointer-events: none;
}
.btn:hover:after {
  translate: 130% 0;
}
.btn > span {
  transition: translate 0.3s;
}
.btn:hover > span {
  translate: 3px -3px;
}
.nav > a {
  font-size: 12px;
}
.nav .btn {
  font-size: 11px;
  min-height: 44px;
}
.nav {
  gap: clamp(17px, 2vw, 30px);
}
.hero {
  min-height: 760px;
  height: min(880px, 62vw);
  padding-bottom: 115px;
}
.hero-kicker {
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.12em;
}
.hero-script {
  font-size: clamp(79px, 8.2vw, 120px);
}
.hero-display {
  font-size: clamp(76px, 7.1vw, 102px);
}
.hero-lead {
  font-size: clamp(20px, 1.7vw, 25px);
  margin-top: 28px;
}
.hero-sub {
  font-size: 16px;
  line-height: 1.65;
}
.hero-copy > .btn {
  margin-top: 26px;
  min-height: 53px;
  font-size: 13px;
  padding-inline: 32px;
}
.hero-curve {
  height: 100px;
}
.hero-heart {
  width: 61px;
  height: 61px;
  left: 37%;
  top: 21%;
}
.hero-media img {
  animation: photo-enter 1.5s ease-out both;
}
.perks {
  padding: 12px 0 55px;
}
.perks-grid {
  gap: 23px;
}
.perk-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 17px;
}
.perks p {
  font-size: 11px;
  line-height: 1.7;
  font-weight: 600;
}
.perks li {
  padding: 8px 0;
}
.perks li.visible .perk-icon {
  animation: icon-arrival 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Full-size photographs replace the little framed thumbnail row. */
.experience {
  padding-top: 38px;
  padding-bottom: 96px;
}
.experience-grid {
  display: block;
}
.experience-copy {
  display: grid;
  grid-template-columns: 1.05fr 1fr auto;
  gap: 20px 46px;
  align-items: center;
  margin-bottom: 44px;
}
.experience-copy h2 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.23;
  letter-spacing: -0.025em;
}
.experience-copy > p {
  font-size: 15px;
  line-height: 1.9;
  max-width: 440px;
}
.experience-copy > .btn {
  margin: 0;
  white-space: nowrap;
}
.heart-rule {
  display: none;
}
.experience-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.photo-frame {
  position: relative;
  border-radius: 22px;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 0.83;
  background: #153746;
  box-shadow: 0 24px 45px -30px #102b3b60;
  transition:
    border-radius 0.6s,
    box-shadow 0.6s;
}

.photo-frame:after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, #081d2aab);
  pointer-events: none;
}
.photo-frame img {
  width: 100%;
  height: 112%;
  max-width: none;
  position: absolute;
  top: -6%;
  left: 0;
  translate: 0 var(--image-shift, 0px);
  transition: transform 0.7s;
  transform: scale(1);
}
.experience-card:hover img {
  transform: scale(1.065);
}
.experience-card:hover .photo-frame {
  box-shadow: 0 28px 45px -25px #23829346;
}
.photo-index {
  position: absolute;
  top: 23px;
  left: 24px;
  z-index: 3;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.07em;
  font-weight: 600;
  text-shadow: 0 2px 8px #0008;
}

.photo-caption {
  position: absolute;
  bottom: 29px;
  left: 27px;
  right: 22px;
  z-index: 2;
  text-align: left;
  color: #fff;
}
.photo-caption h3 {
  font: 400 clamp(28px, 3vw, 42px)/1.15 var(--display);
  color: white;
  letter-spacing: 0.005em;
  margin: 0;
  text-transform: uppercase;
}
.photo-caption p {
  font-size: 12px;
  color: #fff;
  line-height: 1.5;
  margin-top: 9px;
  max-width: 230px;
}
/* Airier package styling without the old faux watercolour boxes. */
.packages {
  padding-top: 18px;
  padding-bottom: 50px;
}
.package-grid {
  gap: 25px;
  max-width: 1160px;
  padding-top: 10px;
}
.package {
  padding: 40px 31px 30px;
  background: linear-gradient(155deg, #fff 20%, #ebfbfe);
  border: 1px solid #e1f3f6;
  border-radius: 22px;
  box-shadow: 0 14px 50px -30px #1a859826;
  overflow: visible;
}
.package:before {
  display: none;
}
.package-featured {
  border: 2px solid var(--pink);
  background: linear-gradient(155deg, #ebfbfe, #fff 55%);
  box-shadow: 0 17px 50px -27px #3cd3ee66;
}
.package:hover {
  transform: translateY(-9px);
  box-shadow: 0 26px 55px -26px #359cae30;
}
.package h3 {
  font-size: 30px;
}
.package-duration {
  font-size: 11px;
  margin-top: 12px;
  letter-spacing: 0.06em;
}
.package-doodle {
  font-size: 34px;
  top: 21px;
  right: 22px;
}
.package-badge {
  padding: 8px 24px;
  font-size: 11px;
}
.package ul {
  margin-top: 28px;
  margin-bottom: 30px;
}
.package li {
  font-size: 13px;
  padding: 6px 0 6px 24px;
}
.package li:before {
  top: 10px;
  width: 14px;
  height: 14px;
  font-size: 9px;
}
.package-price > span {
  font-size: 11px;
}
.package-price strong {
  font-size: 39px;
}
.package-price small {
  font-size: 10px;
  margin-top: 7px;
}
.package-bottom .btn {
  min-height: 49px;
  font-size: 12px;
  margin-top: 23px;
}
.price-note {
  font-size: 11px;
  margin-top: 30px;
}
.party-flamingo {
  width: 151px;
  left: -25px;
  bottom: 55px;
}
.party-balloon {
  width: 165px;
  right: -19px;
  bottom: 40px;
}
.addons {
  padding-top: 45px;
  padding-bottom: 70px;
}
.addons-grid {
  max-width: 1220px;
  gap: 26px;
}
.addon-photo {
  width: min(100%, 155px);
}
.addon-photo img {
  box-shadow: 0 10px 30px -16px #2b748166;
}
.addon-photo b {
  width: 34px;
  height: 34px;
  font-size: 23px;
  bottom: 2px;
  right: 0;
  border: 2px solid var(--cream);
  background: white;
}
.addon-name {
  font-size: 28px;
  margin-top: 18px;
}
.addons-bottom {
  margin-top: 30px;
}
.addons-bottom > p {
  font-size: 12px;
  margin-bottom: 19px;
}
/* Larger, edge-to-edge memory images, with a restrained curved rhythm. */
.memories {
  padding-block: 65px;
  background: linear-gradient(145deg, #ecfafc, #e5f9fd);
}
.memories-layout {
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 35px;
  align-items: center;
}
.memory-note {
  padding: 0;
  background: transparent;
  min-height: 290px;
  border-radius: 0;
}
.memory-hearts {
  font-size: 30px;
  letter-spacing: 5px;
}
.memory-note p {
  font-size: 18px;
  line-height: 1.6;
  margin-top: 24px;
}
.memory-note em {
  font-size: 35px;
  line-height: 1.2;
  margin-top: 10px;
}
.memory-note > span:last-of-type {
  font-size: 13px;
  line-height: 1.8;
  margin-top: 21px;
}
.memory-open {
  font-size: 12px;
  padding: 20px 0 0;
}
.gallery-track {
  gap: 18px;
  align-items: center;
  padding: 12px 0 14px;
}
.gallery-track li {
  flex-basis: calc((100% - 36px) / 3);
  min-width: 190px;
}
.gallery-photo {
  border-radius: 22px;
}

.gallery-photo img {
  height: 305px;
}

.gallery-photo > span {
  opacity: 1;
  transform: none;
  width: 39px;
  height: 39px;
  bottom: 14px;
  right: 14px;
  font-size: 23px;
  box-shadow: 0 4px 12px #0002;
}
.gallery-controls > span {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.gallery-controls button {
  width: 42px;
  height: 42px;
  font-size: 22px;
}
.gallery-controls > div {
  gap: 10px;
}
.closing-inner {
  min-height: 355px;
}
.closing h2 {
  font-size: clamp(31px, 4vw, 54px);
}
.closing h2 > span {
  font-size: clamp(46px, 5vw, 72px);
}
.closing-splat {
  width: 255px;
  height: 255px;
}
.closing-splat-text {
  font-size: 20px;
}
.closing-splat-text .is-lg {
  font-size: 27px;
}
.closing-photo {
  height: 112%;
  top: -6%;
  translate: 0 var(--image-shift, 0px);
}
.footer-grid {
  padding-block: 48px;
}
.footer-grid h2 {
  font-size: 12px;
}
.footer-grid > div > a:not(.brand),
.footer-grid > div > p:not(.footer-brand p) {
  font-size: 12px;
}
.footer-brand > p,
.socials,
.footer-enquiry {
  font-size: 11px;
}
.footer-bottom {
  font-size: 10px;
}
/* Keep the original reveal and hover animations from bride.css.
   Hover elevation must override the reveal's final transform. */
.motion .package.visible:hover {
  transform: translateY(-7px);
}
@keyframes icon-arrival {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1150px) {
  .nav > a {
    font-size: 10px;
  }
  .nav {
    gap: 19px;
  }
  .hero {
    min-height: 710px;
  }
  .hero-script {
    font-size: 90px;
  }
  .hero-display {
    font-size: 82px;
  }
  .hero-sub {
    font-size: 15px;
  }
  .hero-heart {
    left: 40%;
    width: 47px;
  }
  .experience-copy {
    grid-template-columns: 1fr 1fr;
    gap: 20px 35px;
  }
  .experience-copy > .btn {
    justify-self: start;
  }
  .experience-copy > p {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 14px;
  }
  .experience-copy h2 {
    font-size: 30px;
  }
  .experience-cards {
    gap: 20px;
  }
  .photo-frame {
    aspect-ratio: 0.76;
  }
  .photo-caption {
    left: 22px;
    bottom: 25px;
  }
  .photo-caption p {
    font-size: 11px;
  }
  .package {
    padding: 35px 23px 26px;
  }
  .package h3 {
    font-size: 27px;
  }
  .package li {
    font-size: 12px;
  }
  .package-doodle {
    right: 14px;
    top: 16px;
    font-size: 27px;
  }
  .package-badge {
    font-size: 10px;
  }
  .addon-name {
    font-size: 24px;
  }
  .memories-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 25px;
  }
  .gallery-track li {
    flex-basis: calc((100% - 18px) / 2);
  }
  .perk-icon {
    width: 43px;
    height: 43px;
  }
  .perks p {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  .section {
    padding-block: 48px;
  }
  .hero {
    min-height: 735px;
    height: 780px;
    padding-top: 142px;
  }
  .hero-kicker {
    font-size: 8px;
    max-width: 280px;
  }
  .hero-script {
    font-size: clamp(65px, 12vw, 85px);
  }
  .hero-display {
    font-size: 74px;
  }
  .hero-lead {
    font-size: 19px;
  }
  .hero-sub {
    font-size: 15px;
  }
  .hero-heart {
    left: auto;
    right: 24px;
    top: 108px;
    width: 37px;
  }
  .hero-curve {
    height: 58px;
  }
  .hero-copy > .btn {
    font-size: 12px;
  }
  .nav > a {
    font-size: 13px;
  }
  .nav .btn {
    font-size: 12px;
  }
  .perks {
    padding-bottom: 20px;
  }
  .perks-grid {
    gap: 20px 12px;
  }
  .perk-icon {
    width: 39px;
    height: 39px;
  }
  .perks p {
    font-size: 9px;
  }
  .experience-copy {
    display: block;
    margin-bottom: 30px;
  }
  .experience-copy h2 {
    font-size: 30px;
  }
  .experience-copy > p {
    font-size: 14px;
    margin-top: 20px;
    line-height: 1.8;
  }
  .experience-copy > .btn {
    margin-top: 22px;
  }
  .experience-cards {
    display: flex;
    gap: 17px;
    overflow-x: auto;
    padding: 0 0 22px;
    scroll-snap-type: x mandatory;
  }
  .experience-card {
    flex: 0 0 80%;
    min-width: 0;
    scroll-snap-align: center;
  }
  .experience-card:nth-child(n) {
    padding-top: 0;
  }
  .photo-frame {
    aspect-ratio: 0.86;
  }
  .photo-caption h3 {
    font-size: 34px;
  }
  .photo-caption p {
    font-size: 13px;
  }
  .section-title {
    font-size: 28px;
    margin-bottom: 35px;
  }
  .package-grid {
    gap: 32px;
    padding-top: 8px;
  }
  .package {
    padding: 33px 27px;
  }
  .package h3 {
    font-size: 30px;
  }
  .package li {
    font-size: 12px;
  }
  .package-duration {
    font-size: 11px;
  }
  .package-bottom .btn {
    font-size: 12px;
  }
  .addon-photo {
    width: min(100%, 110px);
  }
  .addon-photo b {
    width: 29px;
    height: 29px;
    font-size: 20px;
  }
  .addon-name {
    font-size: 23px;
  }
  .addons-grid {
    gap: 26px 16px;
  }
  .addons-bottom > p {
    font-size: 11px;
  }
  .memories-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .memory-note {
    display: block;
    min-height: 0;
    text-align: center;
  }
  .memory-note p {
    margin-top: 12px;
    font-size: 18px;
  }
  .memory-note em {
    font-size: 34px;
  }
  .memory-note > span:last-of-type {
    display: block;
    margin-top: 13px;
    font-size: 13px;
  }
  .memory-open {
    padding-top: 15px;
  }
  .gallery-track li {
    min-width: 190px;
  }
  .gallery-photo img {
    height: 285px;
  }

  .gallery-controls > span {
    font-size: 8px;
  }
  .closing-inner {
    min-height: 310px;
  }
  .closing-splat {
    width: 115px;
    height: 115px;
  }
  .closing-splat-text {
    font-size: 9px;
  }
  .closing-splat-text .is-lg {
    font-size: 12px;
  }
  .closing h2 {
    font-size: 27px;
  }
  .closing h2 > span {
    font-size: 42px;
  }
  .footer-grid > div > a:not(.brand),
  .footer-grid > div > p:not(.footer-brand p) {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion .experience-card .photo-caption {
    transform: none;
    translate: none;
    opacity: 1;
  }
  .motion .experience-card .photo-frame {
    clip-path: none;
  }
  .photo-frame img,
  .closing-photo {
    translate: none;
  }
  .hero-media img,
  .perks li.visible .perk-icon {
    animation: none;
  }
  .btn:after {
    display: none;
  }
}

/* Intro card + expandable, swipeable experience strip. */
.experience-row {
  display: grid;
  grid-template-columns: 23% minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.experience-intro {
  min-height: 320px;
  height: 100%;
  max-height: 360px;
  border: 1px solid #e6f3f5;
  border-radius: 22px;
  background: linear-gradient(150deg, #fff, #ebfbfe);
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.intro-heart {
  font: 46px/1 var(--script);
  color: var(--pink);
}
.intro-script {
  font: 29px/1.18 var(--script);
  font-weight: 700;
  color: var(--pink);
  margin-top: 10px;
}
.experience-intro .heart-rule {
  display: flex;
  width: 110px;
  margin: 15px 0;
  font-size: 22px;
}
.experience-intro > p:not(.intro-script) {
  font-size: 12px;
  line-height: 1.8;
}
.experience-intro .btn {
  margin-top: auto;
  font-size: 10px;
  min-height: 41px;
  padding: 12px 18px;
  gap: 14px;
}
.experience-carousel {
  min-width: 0;
}
.experience-cards {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
  align-items: stretch;
}
.experience-cards::-webkit-scrollbar {
  display: none;
}
.experience-cards.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.experience-cards .experience-card {
  flex: 0 0 calc((100% - 34px) / 3);
  min-width: 0;
  padding: 0;
  scroll-snap-align: start;
}
.experience-cards .photo-frame {
  height: 320px;
  aspect-ratio: auto;
  border-radius: 22px;
}
.experience-cards .photo-caption {
  left: 18px;
  right: 14px;
  bottom: 23px;
}
.experience-cards .photo-caption h3 {
  font-size: 27px;
}
.experience-cards .photo-caption p {
  font-size: 11px;
  line-height: 1.5;
}
.experience-cards .photo-index {
  left: 18px;
  top: 20px;
  font-size: 11px;
}
.experience-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.experience-controls > span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6097a1;
}
.experience-controls > div {
  display: flex;
  gap: 9px;
}
.experience-controls button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid #3fd1eb55;
  border-radius: 50%;
  color: var(--pink);
  font-size: 23px;
  transition:
    background 0.2s,
    color 0.2s;
}
.experience-controls button:hover:enabled {
  background: var(--pink);
  color: white;
}
.experience-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Base charter prices are separate from all custom party additions. */
.charter-explainer,
.addons-intro {
  max-width: 690px;
  margin: -23px auto 35px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #6d5660;
}
.charter-tagline {
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  margin-top: 15px;
  color: #547a81;
}
.charter-extras-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--pink);
  margin-top: 14px;
}
.yacht-detail-link {
  display: block;
  font-size: 11px;
  margin-top: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #49747c;
}
.price-note {
  max-width: 840px;
  margin-inline: auto;
  line-height: 1.8;
}
.price-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.all-yachts {
  text-align: center;
  margin-top: 17px;
  font-size: 12px;
  font-weight: 600;
}
.all-yachts a {
  border-bottom: 1px solid var(--pink);
  padding-bottom: 5px;
}
/* Dense pink line-icon extras: six columns, three rows on desktop. */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 1200px;
}
.addons-grid .addon {
  height: 128px;
  border: 1px solid #e5f2f4;
  border-radius: 13px;
  position: relative;
  background: #ebfbfe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 10px;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
}
.addons-grid .addon:hover {
  background: #ebfbfe;
  border-color: #a5e4f0;
  transform: translateY(-3px);
}
.addons-grid .addon[aria-pressed="true"] {
  background: #edfbfd;
  border-color: var(--pink);
}
.extra-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--pink);
  transition: transform 0.3s;
}
.addon:hover .extra-icon {
  transform: translateY(-2px);
}
.addons-grid .addon-name {
  font: 600 11px/1.45 var(--sans);
  color: #375358;
  margin: 0;
  max-width: 120px;
}
.extra-plus {
  position: absolute;
  right: 9px;
  top: 7px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  color: var(--pink);
}
.addon[aria-pressed="true"] .extra-plus {
  font-size: 17px;
}
.addons-bottom .extras-quote-note {
  font-size: 10px;
  color: #8b737d;
  margin: 16px 0 0;
}
/* The perk symbols animate whenever their section is visible; motion can be paused. */
.perk-icon g {
  transform-box: fill-box;
  transform-origin: center;
  animation: perk-sway 3.2s ease-in-out infinite;
  animation-play-state: paused;
}
.perks.icons-running .perk-icon g {
  animation-play-state: running;
}
.perks li:nth-child(2n) .perk-icon g {
  animation-name: perk-bounce;
  animation-duration: 2.8s;
  animation-delay: -0.6s;
}
.perks li:nth-child(3n) .perk-icon g {
  animation-name: perk-pulse;
  animation-duration: 3.5s;
  animation-delay: -1.3s;
}
.perk-motion-control {
  text-align: right;
  margin-top: 12px;
}
#perk-motion {
  font-size: 9px;
  padding: 5px 0;
  color: #6b959d;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes perk-sway {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes perk-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes perk-pulse {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.06);
  }
}
@media (min-width: 1500px) {
  .experience-intro,
  .experience-cards .photo-frame {
    height: 355px;
  }
  .experience-intro {
    min-height: 355px;
  }
  .intro-script {
    font-size: 34px;
  }
  .experience-intro > p:not(.intro-script) {
    font-size: 13px;
  }
  .experience-cards .photo-caption h3 {
    font-size: 32px;
  }
}
@media (max-width: 1100px) {
  .experience-row {
    grid-template-columns: 23% minmax(0, 1fr);
    gap: 17px;
  }
  .experience-intro {
    padding: 20px 17px;
    max-height: 320px;
  }
  .intro-script {
    font-size: 26px;
  }
  .experience-intro > p:not(.intro-script) {
    font-size: 11px;
  }
  .experience-intro .btn {
    font-size: 9px;
    padding-inline: 12px;
  }
  .experience-cards {
    gap: 12px;
  }
  .experience-cards .experience-card {
    flex-basis: calc((100% - 24px) / 3);
  }
  .experience-cards .photo-caption h3 {
    font-size: 24px;
  }
  .experience-cards .photo-caption {
    left: 13px;
  }
  .experience-cards .photo-caption p {
    font-size: 10px;
  }
}
@media (max-width: 850px) {
  .experience-row {
    grid-template-columns: 205px minmax(0, 1fr);
  }
  .experience-cards .experience-card {
    flex-basis: calc((100% - 12px) / 2);
  }
  .addons-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .experience-row {
    display: block;
  }
  .experience-intro {
    height: auto;
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 20px;
    margin-bottom: 20px;
    padding: 22px;
  }
  .intro-heart {
    display: none;
  }
  .intro-script {
    margin: 0;
    font-size: 27px;
  }
  .experience-intro .heart-rule {
    display: none;
  }
  .experience-intro > p:not(.intro-script) {
    font-size: 11px;
    grid-column: 2;
    grid-row: 1/3;
  }
  .experience-intro .btn {
    justify-self: start;
    min-height: 40px;
  }
  .experience-cards .experience-card {
    flex-basis: 75%;
  }
  .experience-cards .photo-frame {
    height: 335px;
  }
  .experience-cards .photo-caption h3 {
    font-size: 32px;
  }
  .experience-cards .photo-caption p {
    font-size: 12px;
  }
  .addons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .addons-grid .addon {
    height: 117px;
    padding: 16px 7px;
    gap: 10px;
  }
  .extra-icon {
    width: 31px;
    height: 31px;
  }
  .addons-grid .addon-name {
    font-size: 10px;
  }
  .charter-explainer,
  .addons-intro {
    font-size: 12px;
    margin-top: -17px;
  }
  .package h3 {
    font-size: 30px;
  }
  .perk-motion-control {
    margin-top: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .perk-icon g {
    animation: none !important;
  }
  .perk-motion-control {
    display: none;
  }
  .addons-grid .addon,
  .extra-icon {
    transition: none;
  }
}
/* Keep breathing room around the intro card's call to action. */
.experience-intro .intro-heart {
  font-size: 34px;
}
.experience-intro .intro-script {
  font-size: 24px;
  line-height: 1.18;
  margin-top: 8px;
}
.experience-intro .heart-rule {
  font-size: 17px;
  margin: 10px 0;
}
.experience-intro > p:not(.intro-script) {
  line-height: 1.7;
}
.experience-intro .btn {
  margin-top: auto;
  flex-shrink: 0;
}


/* ==========================================================================
   PROPOSAL — overrides on top of the generated base
   The display face is a serif here, not a condensed grotesque, so the
   headline sizing and tracking are retuned to match.
   ========================================================================== */

:root {
  --gold: #c9a227;
  --gold-light: #e3c56b;
  --rose-soft: #b3d9e0;
}

.hero-display {
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.02;
}

.section-title,
.closing h2,
.package h3 { letter-spacing: .03em; }

.hero-script,
.intro-script,
.closing h2 span { letter-spacing: .01em; }

/* champagne accents */
.package-featured { border-color: var(--gold); box-shadow: 0 20px 48px rgba(200, 150, 31, .18); }
.package-featured .package-doodle { color: var(--gold); }
.quote__stars, .package-price strong { color: var(--pink-dark); }

/* --- self-drawing ring (experience intro) -------------------------------- */
.intro-ring { width: 78px; height: 58px; margin: 0 auto 6px; color: var(--gold); display: block; }

.intro-ring path,
.intro-ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 240);
  stroke-dashoffset: var(--len, 240);
}

.intro-ring.is-drawn path,
.intro-ring.is-drawn circle { animation: ring-draw 1.6s cubic-bezier(.3,.7,.3,1) forwards; }
.intro-ring.is-drawn circle { animation-delay: .35s; }

@keyframes ring-draw { to { stroke-dashoffset: 0; } }

/* --- champagne shimmer on the primary button ----------------------------- */
.btn { position: relative; overflow: hidden; }

.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255,.4), transparent);
  transform: skewX(-18deg);
  animation: btn-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

.btn-outline::after, .btn-dark::after { display: none; }

@keyframes btn-shimmer {
  0%, 64%   { left: -60%; }
  93%, 100% { left: 125%; }
}

/* --- gold seal replaces the pink splat ----------------------------------- */
.closing-splat-shape { fill: var(--gold); }

.closing-splat-text {
  font-family: var(--script);
  text-transform: none;
  letter-spacing: .01em;
}

.closing-splat-text .is-lg { font-size: 1.5em; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none; display: none; }
  .intro-ring path, .intro-ring circle { stroke-dashoffset: 0; }
}

/* --- real brand logo (330x60 artwork, as on dreamwavecyprus.com) ---------- */
.brand-mark {
  width: 198px;
  height: 36px;          /* live site renders it at exactly this size */
  fill: currentColor;
}

.brand { display: inline-flex; align-items: center; }

footer .brand-mark { width: 176px; height: 32px; }

@media (max-width: 680px) {
  .brand-mark { width: 150px; height: 27px; }
}

/* --- yacht packages: swipeable track, every card in the Azimut 42 style --- */
/* Cards are generated by tools/yachts.js from the main site's prices. */
.package-carousel {
  max-width: 1160px;
  margin: 0 auto;
}
.package-track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  /* room for the hover lift and the shadow, which overflow would clip */
  padding: 14px 4px 56px;
  margin: -14px -4px -42px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  align-items: stretch;
}
.package-track::-webkit-scrollbar { display: none; }
.package-track:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 24px; }
.package-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.package-track.is-dragging .package { pointer-events: none; }
.package-track .package {
  flex: 0 0 calc((100% - 50px) / 3);
  scroll-snap-align: start;
  padding: 0;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 16px 34px -14px rgba(200, 150, 31, 0.28);
}
.package-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ddf7fc;
}
.package-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.package:hover .package-photo img { transform: scale(1.04); }
.package-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px 31px 30px;
}
.package-track .package-doodle {
  top: 26px;
  right: 22px;
  font-size: 22px;
}
.package-body .package-bottom { margin-top: auto; }
.package-body ul { text-align: left; }
.package-controls { margin-top: 26px; }

@media (max-width: 980px) {
  .package-track .package { flex-basis: calc((100% - 25px) / 2); }
}
@media (max-width: 640px) {
  .package-track { gap: 16px; }
  .package-track .package { flex-basis: 84%; }
  .package-body { padding: 26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .package-photo img { transition: none; }
  .package:hover .package-photo img { transform: none; }
}

/* --- 2026-10-01 visual pass ----------------------------------------------- */
/* Footer logo: the old .footer-brand rule (76px) out-ranked `footer .brand-mark`. */
.footer-brand .brand-mark { width: 176px; height: 32px; }

/* Hero: the new photo is a <picture>; a slow drift keeps the sunset alive.
   `scale` is separate from the parallax `translate` in proposal.js. */
.hero-media picture { display: contents; }
.hero-media img {
  object-position: 50% 50%;
  animation:
    photo-enter 1.5s ease-out both,
    hero-drift 26s ease-in-out 1.5s infinite alternate;
}
@keyframes hero-drift {
  from { scale: 1; }
  to   { scale: 1.07; }
}


/* --- a real yes: the proposal video ---------------------------------------- */
.real-yes {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #f6ece9;
  background:
    radial-gradient(ellipse 60% 70% at 18% 40%, #3fd1eb42, transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 90%, #c9a22726, transparent 70%),
    linear-gradient(160deg, #0c1c24 0%, #1d1820 55%, #102d32 100%);
}
.real-yes::before {
  /* faint sea-glint lines */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(170deg, transparent 0 46px, #ffffff06 46px 47px);
  pointer-events: none;
}
.real-yes-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  max-width: 1080px;
}
.real-yes-phone {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 38px;
  padding: 10px;
  background: linear-gradient(145deg, #253b3f, #120d10);
  box-shadow:
    0 0 0 1px #ffffff14,
    0 40px 80px -30px #000,
    0 0 90px -20px #3fd1eb66;
  rotate: -2.5deg;
  transition: rotate 0.6s ease;
}
.real-yes-phone:hover { rotate: 0deg; }
.real-yes-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 29px;
  background: #0c1c24;
}
.real-yes-phone figcaption {
  position: absolute;
  left: 50%;
  bottom: -38px;
  translate: -50% 0;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bcdbe0;
}
.real-yes-sound {
  position: absolute;
  right: 22px;
  bottom: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #ffffff55;
  background: #0c1c2499;
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.real-yes-sound:hover { background: var(--pink); border-color: var(--pink); }
.real-yes-sound .real-yes-sound-off,
.real-yes-sound[aria-pressed="true"] .real-yes-sound-on { display: none; }
.real-yes-sound[aria-pressed="true"] .real-yes-sound-off { display: inline; }
.real-yes-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.real-yes h2 {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}
.real-yes h2 span { display: block; }
.real-yes h2 em {
  display: block;
  margin-top: 6px;
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  font-size: 1.05em;
  color: var(--pink);
}
.real-yes-steps {
  list-style: none;
  margin: 38px 0 40px;
  padding: 0;
  border-left: 1px solid #ffffff22;
}
.real-yes-steps li {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 12px 0 12px 26px;
  font-size: 16px;
  line-height: 1.55;
  color: #baced2;
  transition: color 0.4s ease;
}
.real-yes-steps li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #354b4f;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.real-yes-steps b {
  flex: none;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--gold-light);
}
.real-yes-steps li.is-now { color: #fff; }
.real-yes-steps li.is-now::before {
  background: var(--pink);
  box-shadow: 0 0 0 6px #3fd1eb33;
}

@media (max-width: 820px) {
  .real-yes { padding: 80px 0 90px; }
  .real-yes-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .real-yes-phone { width: min(300px, 78vw); }
  .real-yes-copy { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
  .real-yes-phone { rotate: none; transition: none; }
}

/* Closing: the sunset photo is brighter than the old strip; keep the script legible. */
.closing-shade {
  background:
    linear-gradient(90deg, #0c1c24f0 0%, #0c1c24c4 38%, #0c1c2440 70%, transparent 100%),
    linear-gradient(0deg, #0c1c2499, transparent 60%);
}
@media (max-width: 700px) {
  /* keep the sun out from behind the headline on narrow screens */
  .closing-photo { object-position: 40% 50%; }
  .closing-shade { background: linear-gradient(180deg, #0c1c2470, #0c1c24b0 70%); }
}

/* Package cards, compact (2026-10-02): were 366x900 px on desktop. Four per
   view on wide screens, shorter photo, tighter type and spacing. */
.package-carousel { max-width: 1200px; }
.package-track { gap: 18px; }
.package-track .package { flex-basis: calc((100% - 54px) / 4); border-radius: 18px; }
.package-track .package-photo { aspect-ratio: 16 / 10; }
.package-track .package-body { padding: 20px 20px 22px; }
.package-track .package-doodle { top: 16px; right: 14px; font-size: 16px; }
.package-track .package h3 { font-size: 21px; line-height: 1.15; }
.package-track .package-duration { margin-top: 8px; font-size: 10px; }
.package-track .charter-tagline { margin-top: 6px; font-size: 11px; }
.package-track .package ul { margin: 14px 0 16px; }
.package-track .package li { font-size: 12px; padding: 3px 0 3px 22px; }
.package-track .package li:before { top: 6px; }
.package-track .package-price > span { font-size: 10px; }
.package-track .package-price strong { font-size: 30px; }
.package-track .package-price small { margin-top: 4px; }
.package-track .charter-extras-note { margin-top: 8px; font-size: 10px; }
.package-track .package-bottom .btn { min-height: 42px; margin-top: 14px; font-size: 11px; }
.package-track .yacht-detail-link { margin-top: 11px; }

@media (max-width: 1100px) {
  .package-track .package { flex-basis: calc((100% - 36px) / 3); }
}
@media (max-width: 820px) {
  .package-track .package { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 560px) {
  .package-track .package { flex-basis: 72%; }
}
/* an older breakpoint turns .package ul into two columns; never inside the track */
.package-track .package ul { display: block; }

/* ===== 2026-10-02 redesign pass ============================================
   One thread through the page: champagne, sunset light, a gold hairline. */

/* Hero wave: the brush stroke is gone; a gold hairline draws along the crest. */
.hero-curve-line {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px #e3c56bcc);
  animation: line-draw 2.4s cubic-bezier(.6, .1, .2, 1) .5s forwards;
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }

/* Champagne bubbles + sun glints (replace the falling petals). */
.hero-fx,
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.hero-fx { z-index: 2; }
.bubbles { z-index: 0; }
.closing .bubbles { z-index: -1; }
.bubble {
  position: absolute;
  bottom: -16px;
  border-radius: 50%;
  border: 1px solid #fff6e2cc;
  background: radial-gradient(circle at 32% 30%, #fff 0 16%, #fff3d659 40%, #ffe9b01a 70%);
  box-shadow: 0 0 8px #ffe9b073, inset 0 0 3px #ffffff80;
  opacity: 0;
  animation-name: bubble-rise, bubble-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
@keyframes bubble-rise {
  0%   { translate: 0 0; opacity: 0; }
  10%  { opacity: .85; }
  80%  { opacity: .5; }
  100% { translate: 0 calc(-100cqh - 30px); opacity: 0; }
}
@keyframes bubble-sway {
  from { transform: translateX(calc(var(--sway) * -1)); }
  to   { transform: translateX(var(--sway)); }
}
.glint {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  filter: drop-shadow(0 0 4px #fff4d6);
  scale: 0;
  animation: glint 4s ease-in-out infinite;
}
@keyframes glint {
  0%, 62%, 100% { scale: 0; rotate: 0deg; opacity: 0; }
  76% { scale: var(--s, 1); rotate: 45deg; opacity: 1; }
  90% { scale: 0; rotate: 90deg; opacity: 0; }
}
.is-offscreen .bubble,
.is-offscreen .heart-float,
.is-offscreen .glint,
.ribbon.is-offscreen .ribbon-track { animation-play-state: paused; }

/* Moving ribbon between the perks and the story. */
.ribbon {
  overflow: hidden;
  padding: 26px 0 30px;
  border-block: 1px solid #c9a22733;
  background: linear-gradient(90deg, #ebfbfe, var(--cream) 30%, var(--cream) 70%, #ebfbfe);
}
.ribbon-track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  width: max-content;
  animation: ribbon 46s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon span {
  font: 800 clamp(34px, 5vw, 70px)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--black);
  white-space: nowrap;
}
.ribbon span:nth-of-type(2n) {
  color: transparent;
  -webkit-text-stroke: 1.3px var(--black);
}
.ribbon em {
  font: 400 clamp(40px, 5.8vw, 84px)/1 var(--script);
  font-style: normal;
  color: var(--pink);
  white-space: nowrap;
  padding-inline: .1em;
}
.ribbon i {
  font-style: normal;
  font-size: clamp(16px, 2vw, 26px);
  color: var(--gold);
}
@keyframes ribbon { to { translate: -50% 0; } }

/* Gold-edged waves into and out of the dark video section. */
.real-yes { padding: clamp(110px, 12vw, 170px) 0; }
.section-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(36px, 5.5vw, 80px);
  z-index: 1;
  pointer-events: none;
}
.section-wave--top { top: -1px; }
.section-wave--bottom { bottom: -1px; }
.section-wave-fill { fill: var(--cream); }
.section-wave-line {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #e3c56b99);
}
.real-yes-grid { z-index: 2; }

/* Cards (frame + photo together) open upward from the bottom with a soft
   arc, every time they scroll or are swiped into view (classes set by
   proposal.js). The experience frames are clipped through .unveil-inner so
   the frame itself stays observable for bride.js's scroll parallax. */
.will-unveil:not(.unveil-wrapped),
.unveil-wrapped > .unveil-inner {
  clip-path: inset(100% 0 0 0 round 50% 50% 0 0);
  transition: clip-path 1.15s cubic-bezier(.2, .7, .1, 1);
}
.will-unveil.is-unveiled:not(.unveil-wrapped),
.unveil-wrapped.is-unveiled > .unveil-inner {
  clip-path: inset(0 round var(--unveil-r, 22px));
}
.will-unveil img {
  scale: 1.18;
  transition:
    scale 1.7s cubic-bezier(.2, .7, .1, 1),
    transform .7s ease;
}
.will-unveil.is-unveiled img { scale: 1; }
.gallery-photo.will-unveil { --unveil-r: 22px; }
.package-photo.will-unveil { --unveil-r: 0px; }
.unveil-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* the frame's dark fill and shadow would show as a grey sheet before the
   card opens; the bottom gradient moves into the clipped layer */
.unveil-wrapped { background: transparent; }
.unveil-wrapped:not(.is-unveiled) { box-shadow: none; }
.unveil-wrapped.is-unveiled { animation: frame-shadow-in 1.2s ease; }
@keyframes frame-shadow-in { from { box-shadow: 0 0 0 transparent; } }
.unveil-wrapped::after { display: none; }
.unveil-inner::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 1;
  background: linear-gradient(transparent, #081d2aab);
  pointer-events: none;
}

/* Gold light sweeping over a yacht photo on hover. */
.package-photo { position: relative; }
.package-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffecbe8c 48%, transparent 66%);
  translate: -120% 0;
  transition: translate .9s ease;
  pointer-events: none;
}
.package:hover .package-photo::after { translate: 120% 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-curve-line { animation: none; stroke-dashoffset: 0; }
  .hero-fx, .bubbles { display: none; }
  .ribbon-track { animation: none; }
  .package-photo::after { display: none; }
}
/* on the dark sections bubbles read as champagne, not grey marbles */
.bubbles .bubble {
  border-color: #f0d68ab3;
  background: radial-gradient(circle at 32% 30%, #fffaf0 0 14%, #e3c56b47 42%, #e3c56b0d 72%);
  box-shadow: 0 0 10px #e3c56b59;
}

/* on phones the sea band sits behind the copy; glints would read as stray marks */
@media (max-width: 700px) { .glint { display: none; } }

/* Hero: outline hearts drift up (replaces bubbles + glints there). */
.heart-float {
  position: absolute;
  bottom: -40px;
  opacity: 0;
  animation-name: heart-rise, heart-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
  filter: drop-shadow(0 0 4px #0c1c2440);
}
.heart-float svg { display: block; width: 100%; height: auto; overflow: visible; }
.heart-float path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
@keyframes heart-rise {
  0%   { translate: 0 0; opacity: 0; }
  12%  { opacity: .85; }
  75%  { opacity: .6; }
  100% { translate: 0 calc(-100cqh - 60px); opacity: 0; }
}
@keyframes heart-sway {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(calc(var(--tilt) * -1)); }
  to   { transform: translateX(var(--sway)) rotate(var(--tilt)); }
}

/* ===== 2026-10-02 SEO pass ================================================ */
/* The keyword line now lives inside the H1; it must look exactly like the
   old paragraph above it. */
.hero h1 .hero-kicker { display: block; }

/* Where to propose in Cyprus */
.spots { padding-top: 40px; }
.spots-intro,
.faq-more {
  max-width: 690px;
  margin: -12px auto 34px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #6d5660;
}
.spots-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.spot {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid #e1f3f6;
  border-radius: 22px;
  background: linear-gradient(155deg, #fff 30%, #ebfbfe);
  box-shadow: 0 14px 40px -32px #1a859840;
  transition: transform .4s ease, box-shadow .4s ease;
}
.spot:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px #359cae40; }
.spot-no {
  display: block;
  font: 500 38px/1 var(--display);
  color: var(--gold);
}
.spot h3 {
  margin-top: 14px;
  font: 600 21px/1.15 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--black);
}
.spot p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6d5660;
}

/* FAQ */
.faq-wrap { max-width: 860px; }
.faq-list { border-top: 1px solid #d1ebf0; }
.faq-item { border-bottom: 1px solid #d1ebf0; }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  font: 600 16px/1.4 var(--sans);
  color: var(--black);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #3fd1eb55;
  border-radius: 50%;
  font: 400 20px/1 var(--sans);
  color: var(--pink);
  transition: rotate .3s ease, background .3s ease, color .3s ease;
}
.faq-item[open] summary::after { rotate: 45deg; background: var(--pink); color: #fff; }
.faq-item summary:hover { color: var(--pink-dark); }
.faq-item p {
  padding: 0 52px 22px 4px;
  font-size: 14.5px;
  line-height: 1.8;
  color: #5c4a52;
}
.faq-more { margin: 30px auto 0; }
.faq-more a {
  color: var(--pink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .faq-item summary { font-size: 15px; padding: 18px 2px; }
  .faq-item p { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .spot, .faq-item summary::after { transition: none; }
}

/* Video sound toggle: icon + state label, pulses while muted (2026-10-02). */
.real-yes-video { cursor: pointer; }
.real-yes-sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.real-yes-sound svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.real-yes-sound .spk { fill: currentColor; }
.real-yes-sound .spk-on,
.real-yes-sound[aria-pressed="true"] .spk-off { display: none; }
.real-yes-sound[aria-pressed="true"] .spk-on { display: inline; }
.real-yes-sound[aria-pressed="false"] {
  background: var(--pink);
  border-color: var(--pink);
  animation: sound-pulse 2.2s ease-in-out infinite;
}
@keyframes sound-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #3fd1eb99; }
  50%      { box-shadow: 0 0 0 10px #3fd1eb00; }
}
@media (prefers-reduced-motion: reduce) {
  .real-yes-sound[aria-pressed="false"] { animation: none; }
}

/* Experience card galleries (2026-10-02): count badge + full-card open button. */
.photo-count {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0c1c2480;
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 11px/1 var(--sans);
  letter-spacing: .04em;
  pointer-events: none;
}
.photo-count svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.photo-open {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.experience-cards.is-dragging .photo-open { cursor: grabbing; }
.photo-open:focus-visible { outline: 3px solid var(--gold-light); outline-offset: -6px; border-radius: 22px; }
.story-lightbox figure img { user-select: none; touch-action: pan-y; }

/* Enquiry form: indicative quote summary (2026-10-02). */
.quote-summary {
  margin: 18px 0 20px;
  padding: 18px 18px 16px;
  border: 1px solid #d1ebf0;
  border-radius: 16px;
  background: linear-gradient(155deg, #fff 30%, #ebfbfe);
}
.quote-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.quote-head h3 {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--black);
}
.quote-badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: #fff8e6;
  color: #8a6d12;
  font: 600 10px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quote-lines { list-style: none; margin: 0; padding: 0; }
.quote-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed #cceaef;
  font-size: 13px;
}
.quote-lines li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote-lines b { font-weight: 600; color: var(--black); }
.quote-lines small { font-size: 11.5px; color: #7d6670; }
.quote-lines em { flex: none; font-style: normal; font-weight: 600; color: var(--pink-dark); white-space: nowrap; }
.quote-lines .quote-empty { display: block; border: 0; color: #7d6670; font-size: 13px; }
.quote-total {
  margin-top: 10px;
  font: 700 15px/1.4 var(--sans);
  color: var(--black);
}
.quote-total:empty { display: none; }
.quote-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  background: #fffaf0;
  font-size: 12px;
  line-height: 1.6;
  color: #5c4a52;
}
.quote-edit {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 19 extras: keep the odd last tile ("Something else") centred, never alone in a corner. */
.addons-grid > li:last-child { grid-column: 3 / span 2; }
@media (max-width: 850px) { .addons-grid > li:last-child { grid-column: auto; } }
@media (max-width: 700px) { .addons-grid > li:last-child { grid-column: 2 / span 1; } }

/* Footer on phones (2026-10-02): brand + socials full width, link columns in pairs. */
.socials a { white-space: nowrap; }
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .socials { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* Phone mockup follows the montage's own 720x1170 frame (2026-10-02). */
.real-yes-phone { aspect-ratio: 720 / 1170; }

/* Dark buttons follow the page's pink primary button (2026-10-02, client request). */
.btn.btn-dark {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
.btn.btn-dark:hover {
  background: var(--pink-dark);
  border-color: var(--pink-dark);
}
/* iOS draws ↗ as an emoji tile unless asked for text presentation (U+FE0E is in the markup). */
.btn > span, .yacht-detail-link, .footer-enquiry, .socials a { font-variant-emoji: text; }

/* Package cards on phones: wider and shorter (were 241x632 px). */
@media (max-width: 560px) {
  .package-track .package { flex-basis: 82%; }
  .package-track .package-photo { aspect-ratio: 16 / 9; }
  .package-track .package-body { padding: 16px 18px 18px; }
  .package-track .package-doodle { top: 12px; right: 12px; }
  .package-track .package h3 { font-size: 19px; }
  .package-track .package-duration { margin-top: 5px; }
  .package-track .charter-tagline { margin-top: 3px; }
  .package-track .package ul { margin: 10px 0 8px; }
  .package-track .package li { font-size: 11.5px; padding: 2px 0 2px 20px; }
  .package-track .package li:before { top: 4px; }
  .package-track .package-price > span { font-size: 9.5px; }
  .package-track .package-price strong { font-size: 26px; }
  .package-track .charter-extras-note { display: none; }
  .package-track .package-bottom .btn { min-height: 40px; margin-top: 10px; padding: 10px 16px; }
  .package-track .yacht-detail-link { margin-top: 8px; }
}

/* The "Pause icon animations" control is not shown (client request); the element
   stays because the shared bride.js binds to it. Reduced-motion users still get no motion. */
.perk-motion-control { display: none; }

/* Lightboxes: horizontal swipes are ours (JS), vertical scroll/zoom stays with the browser. */
.lightbox figure, .lightbox figure img { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; }

/* "She said yes!" seal: larger lettering (client request 2026-10-02). */
.closing-splat-text { font-size: 34px; line-height: 1.05; }
.closing-splat-text .is-lg { font-size: 1.6em; }
@media (max-width: 900px) { .closing-splat-text { font-size: 26px; } }
@media (max-width: 700px) { .closing-splat-text { font-size: 16px; } }

/* "She said yes!" seal on phones too (client request 2026-10-02): below the
   call to action, on the right, slightly tilted. */
@media (max-width: 700px) {
  .closing-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .closing-inner > div[data-reveal] { width: 100%; }
  .closing-splat {
    display: block;
    width: 140px;
    height: 140px;
    align-self: flex-end;
    margin: -6px 4px 0 0;
  }
  .closing-splat-text { font-size: 17px; }
}

/* Language switcher — a small dropdown since 2026-10-13 (was three links in a
   row, which pushed the menu words onto two lines and the button off the edge). */
.lang-switch { position: relative; margin-inline: 4px; }
.lang-current {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 6px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .08em;
}
.lang-current::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.lang-switch.is-open .lang-current::after { transform: translateY(3px) rotate(-135deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: -8px; z-index: 40;
  display: grid; min-width: 150px; padding: 6px; border-radius: 12px;
  background: rgba(10, 16, 28, .97); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.lang-switch:not(.is-open) .lang-menu { display: none; }
.lang-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 8px; color: #fff; opacity: .82;
  font: 600 12px/1 var(--sans); letter-spacing: .06em;
}
.lang-menu a span { font-weight: 400; letter-spacing: 0; opacity: .7; }
.lang-menu a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.lang-menu a[aria-current] { opacity: 1; color: var(--pink); }
@media (max-width: 700px) {
  /* in the mobile menu there is room: the three side by side, no button */
  .nav .lang-current { display: none; }
  .nav .lang-switch { margin: 6px 0 10px; }
  .nav .lang-switch .lang-menu {
    display: flex; position: static; gap: 8px; min-width: 0; padding: 0;
    background: none; box-shadow: none;
  }
  .nav .lang-menu a { font-size: 14px; padding: 8px 10px; }
  .nav .lang-menu a span { display: none; }
}
/* the menu words stay on one line; between tablet and wide screens the gaps
   and the button shrink so the button keeps its place at the right edge */
.nav > a, .nav .btn { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1280px) {
  .nav { gap: clamp(10px, 1.35vw, 22px); }
  .nav > a { letter-spacing: 0; }
  .nav .btn { padding-inline: 16px; }
}
/* tablet / small laptop: only the page's two main links, the language and the
   button; the in-page jumps (experience, gallery, contact) are a scroll away */
@media (min-width: 701px) and (max-width: 900px) {
  .nav > a:nth-of-type(n+3) { display: none; }
}
/* Russian: the script face needs Cyrillic letters (Parisienne has none). */
html[lang="ru"] { --script: "Great Vibes", "Sacramento", cursive; }

/* Lightboxes fill the screen (2026-10-03, client request): the photo takes all
   the room left after a slim caption line; controls float over it. */
.lightbox { padding: 12px 12px 34px; }
.lightbox figure { max-width: none; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.lightbox figure img { width: 100%; height: calc(100dvh - 70px); max-height: none; object-fit: contain; }
.lightbox figcaption { margin-top: 10px; font-size: 12px; opacity: .85; }
.lightbox-prev, .lightbox-next {
  z-index: 2;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
  background: #0d1722a6;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(6px);
}
.lightbox-prev:hover, .lightbox-next:hover { background: var(--pink); }
.lightbox .dialog-close {
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0d1722a6;
  backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
  .lightbox { padding: 0 0 30px; }
  .lightbox figure img { height: calc(100dvh - 44px); }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
  .lightbox .dialog-close { top: 10px; right: 10px; }
}

/* Phones: the photo covers the whole screen, edge to edge (client example
   2026-10-03); caption floats over the bottom on a soft shade. */
@media (max-width: 700px) {
  .lightbox { padding: 0; }
  .lightbox figure { position: relative; height: 100dvh; }
  .lightbox figure img { width: 100vw; height: 100dvh; object-fit: cover; }
  .lightbox figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 40px 18px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, #0d1722cc);
    text-align: left;
    font-size: 12px;
    pointer-events: none;
  }
  .lightbox .dialog-close { top: calc(10px + env(safe-area-inset-top)); }
}

/* German: "HEIRATEN?" is the longest word in the hero — on phones it is
   capped to the screen width so it never runs off the edge. */
@media (max-width: 700px) {
  html[lang="de"] .hero-display { font-size: min(74px, 15.2vw); }
}

/* Card galleries switched off (client request, 2026-10-03): the experience cards
   show their photo only. To bring the galleries back, remove the class
   `galleries-off` from <section id="experience"> in proposal.html. */
.galleries-off .photo-count,
.galleries-off .photo-open { display: none; }

/* Larger footer type (2026-10-03). Switchable: remove the class `footer-large`
   from <footer id="contact"> in proposal.html to restore the previous sizes. */
footer.footer-large .footer-brand > p { font-size: 14px; line-height: 1.7; }
footer.footer-large .socials a { font-size: 13px; }
footer.footer-large .footer-grid h2 { font-size: 13px; letter-spacing: 0.14em; margin-bottom: 16px; }
footer.footer-large .footer-grid > div > a:not(.brand) { font-size: 15px; line-height: 2; }
footer.footer-large .footer-enquiry { font-size: 14px; margin-top: 10px; }
footer.footer-large .footer-bottom p,
footer.footer-large .footer-bottom > a { font-size: 12px; }

/* Intro card (2026-10-15, client: "the text spills out, the button sticks to the frame"):
   the card was capped at the photo cards' height, so longer copy (RU/DE) pushed the
   button over its bottom edge. It now grows with its text and keeps air under the button. */
@media (min-width: 601px) {
  .experience-intro { height: auto; max-height: none; padding-bottom: 28px; }
  .experience-intro > p:not(.intro-script) { margin-bottom: 18px; }
  /* the intro card and the photo cards share one row and one height: whichever is taller
     (usually the card in Russian or German) sets it, the photos fill it; arrows below the photos */
  .experience-row { grid-template-rows: auto auto; align-items: stretch; row-gap: 0; }
  .experience-carousel { display: contents; }
  .experience-intro { grid-column: 1; grid-row: 1; }
  .experience-cards { grid-column: 2; grid-row: 1; min-width: 0; }
  .experience-controls { grid-column: 2; grid-row: 2; }
  .experience-cards .photo-frame { height: 100%; min-height: 320px; }
}
@media (min-width: 1500px) {
  .experience-cards .photo-frame { min-height: 355px; }
}

/* Round arrow buttons (2026-10-15, client: "the arrows are not in the middle of the circle"):
   the ← → characters sit off-centre in the font's own box. A drawn arrow, centred in the circle. */
.experience-controls button,
.lightbox-prev,
.lightbox-next {
  display: grid;
  place-items: center;
  font-size: 0 !important;
  line-height: 0;
}
.experience-controls button::before,
.lightbox-prev::before,
.lightbox-next::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M15 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M15 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.experience-controls > div > button:first-child::before,
.lightbox-prev::before { transform: scaleX(-1); }

/* Long words (German compounds) in card headings hyphenate instead of spilling out of the card. */
.spot h3, .experience-cards .photo-caption h3 { hyphens: auto; overflow-wrap: break-word; }

/* Hero titles on shorter screens (2026-10-15): on laptop-height windows (≈600–720 px) the two title
   lines pushed the copy under the header and the button under the curve (worst in German:
   "MICH HEIRATEN?"). The sizes now also follow the screen height; on tall screens nothing changes. The birthday page has its own hero. */
@media (min-width: 701px) {
  body:not([data-page="birthday"]) .hero-script { font-size: min(clamp(79px, 8.2vw, 120px), 13vh); }
  body:not([data-page="birthday"]) .hero-display { font-size: min(clamp(76px, 7.1vw, 102px), 11vh); }
  html[lang="de"] body:not([data-page="birthday"]) .hero-display { font-size: min(clamp(76px, 7.1vw, 102px), 9.6vh); }
  /* "Ты выйдешь" broke onto two lines at 120 px */
  html[lang="ru"] body:not([data-page="birthday"]) .hero-script { font-size: min(clamp(79px, 8.2vw, 112px), 13vh); }
}

/* Gold line under the hero (2026-10-15, client: "it does not run all the way"): the draw-on used
   stroke-dasharray with pathLength 1, but with vector-effect: non-scaling-stroke the dash is measured
   on screen — wider than ~1440 px the line stopped at about 1445 px. Same left-to-right draw, now
   revealed with a clip, so the whole line shows on every screen width. */
.hero-curve-line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  clip-path: inset(-20px 100% -20px -20px);
  animation: hero-line-reveal 2.4s cubic-bezier(.6, .1, .2, 1) .5s forwards;
}
@keyframes hero-line-reveal { to { clip-path: inset(-20px -20px -20px -20px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-curve-line { animation: none; clip-path: none; }
}

/* Section titles: long words ("UNVERWECHSELBAR.") hyphenate on the smallest phones instead of widening the page. */
.section-title { hyphens: auto; overflow-wrap: break-word; }

/* ===== family: brand fonts, palette and pieces ===== */
:root {
  --pink: #0f7f92;
  --pink-dark: #0a6373;
  --gold: #c8961f;
  --script: "Sacramento", cursive;
  --display: "Poppins", Arial, sans-serif;
}
h1, h2, h3, .section-title { letter-spacing: 0; }
/* Poppins has no Cyrillic letters: Russian headings use Montserrat (already loaded, with Cyrillic) */
html[lang="ru"] { --display: "Montserrat", Arial, sans-serif; }
/* the corner sun replaces the heart */
.hero-sun { color: #f3c64e; }
/* 12 extras: the last one sits in the normal grid */
.addons-grid > li:last-child { grid-column: auto; }
/* hero titles (2026-10-15, client: the title slid under the header and the button under the curve):
   Poppins and Sacramento run much larger than the proposal's faces at the same size, so both lines
   follow the screen's width AND height and always fit between the header and the curve */
@media (min-width: 701px) {
  .hero-script { font-size: min(clamp(60px, 6.3vw, 98px), 11.6vh) !important; line-height: 1.05; }   /* client: the handwriting a bit bigger */
  .hero-display { font-size: min(clamp(40px, 4.4vw, 68px), 8.4vh) !important; line-height: 1.04; }
  html[lang="ru"] .hero-script { font-size: min(clamp(54px, 5.5vw, 87px), 10.3vh) !important; }
}
/* phones: Poppins is wider than the proposal's display face — "EVERYONE" must fit the screen;
   the hero sub-line flows freely instead of breaking after "swim stops," */
@media (max-width: 700px) {
  .hero-display { font-size: calc((100vw - 40px) / 5.8); }
  .hero-sub br { display: none; }
}
/* planning guide: four cards, two to a row */
@media (min-width: 760px) {
  .fam-guide .spots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* icons: the shared line family in teal, two-tone, a small gold sparkle;
   the perk icons keep the proposal page's sway / bounce / pulse */
.perk-icon { width: 54px; height: 54px; margin: 0 auto 14px; overflow: visible; }
.extra-icon { width: 46px; height: 46px; overflow: visible; transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.perks .perk-icon g:not(.md-ic) { animation: none !important; transform-box: view-box; transform-origin: 0 0; }
.perks .perk-icon .md-ic { transform-box: view-box; transform-origin: 12px 12px; }
.md-ic { stroke: url(#fam-teal-i); stroke-width: .72; }
.md-ic .t { fill: url(#fam-teal-t); }
.md-ic .spark { fill: #d9a72c; stroke: none; }
.md-ic circle[r=".5"], .md-ic circle[r=".55"], .md-ic circle[r=".45"], .md-ic circle[r=".6"] { fill: #0f7f92; stroke: none; }
.addon:hover .extra-icon, .perks li:hover .perk-icon { filter: drop-shadow(0 3px 8px rgba(15, 127, 146, .25)); }
@media (max-width: 700px) {
  .perk-icon { width: 48px; height: 48px; margin-bottom: 10px; }
  .extra-icon { width: 40px; height: 40px; }
  .md-ic { stroke-width: .8; }
}