@font-face{font-family:"Adrenaline";src:url("/assets/fonts/adrenaline.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
/* ===================================================================
   Dream Beach Weddings — shared stylesheet (multi-page static site)
   Linked by every page. Palette lives in CSS variables below.
   =================================================================== */
:root {
  --ivory: #fbf4f1;
  --sand: #f0dcd4;
  --sand-deep: #e0c2ba;
  --blush: #d4687a;
  --blush-soft: #e69aa7;
  --rose: #b94e63;
  --rose-deep: #9a3d54;
  --coral: #dd8a86;
  /* LIGHT SAGE — the secondary co-dominant color (replaces the old wine/plum).
     Muted dusty gray-green; grounds the pink lead accent. Used on the
     testimonials band, locations band, footer, and feature package card. */
  --sage: #b9c7b0;        /* soft light sage — primary sage surface */
  --sage-soft: #d3ddcb;   /* paler sage — gradients / hovers */
  --sage-deep: #9aac90;   /* slightly deeper sage — borders / accents / hover */
  /* --sea / --sea-deep / --plum / --plum-soft retained as aliases so any stray
     reference still resolves into the pink+sage palette (NO wine/plum anywhere).
     They now point at light sage, not burgundy. */
  --sea: #b9c7b0;
  --sea-deep: #b9c7b0;
  --plum: #b9c7b0;
  --plum-soft: #d3ddcb;
  --ink: #2c2620;
  --ink-soft: #6b6157;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1320px;
  --radius: 3px;
  --shadow: 0 18px 50px -20px rgba(44, 38, 32, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; font-size: 18px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.12; }
h2 { font-size: clamp(2.5rem, 5.6vw, 4rem); letter-spacing: 0.5px; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blush);
  font-weight: 500;
  margin-bottom: 1rem;
}
.section { padding: clamp(2.5rem, 5vw, 4.5rem) 1rem; }
/* The first .section directly under the hero gets a touch less top padding so
   the hero → first-section gap isn't double-heavy (client called this out). */
.hero + .section, .hero--interior + .section { padding-top: clamp(2rem, 4vw, 3.5rem); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.center { text-align: center; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.05rem 2.3rem;
  border: 1px solid var(--rose);
  border-radius: 40px;
  background: var(--rose);
  color: var(--ivory);
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover { background: var(--rose-deep); border-color: var(--rose-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.75); }
.btn--ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
/* Ghost buttons living on the LIGHT SAGE bands (locations / testimonials) need
   dark ink + pink accent instead of white, or they'd vanish on light sage. */
.locations .btn--ghost, .testi .btn--ghost { color: var(--rose-deep); border-color: var(--rose); }
.locations .btn--ghost:hover, .testi .btn--ghost:hover { background: var(--rose); color: var(--white); border-color: var(--rose); }
.btn--blush { background: var(--blush); border-color: var(--blush); }
.btn--blush:hover { background: #c25569; border-color: #c25569; }
.btn--outline-dark { background: transparent; color: var(--rose); }
.btn--outline-dark:hover { background: var(--rose); color: var(--ivory); }

/* ---------- NAV ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.6rem);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
header.nav.scrolled {
  background: rgba(250, 245, 239, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(44,38,32,0.07);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
/* Interior pages have a light hero, so the nav needs dark text from the start. */
header.nav.nav--solid {
  background: rgba(250, 245, 239, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(44,38,32,0.07);
}
.brand { display: flex; align-items: center; }
/* Real Dream Beach Weddings logo lockup (312x85 vector). Height-driven, width
   auto so the ~3.67:1 aspect ratio is never distorted. */
.brand__logo {
  display: block; height: 50px; width: auto;
  transition: filter 0.4s ease;
}
/* Transparent nav over the dark video hero: whiten the whole lockup (pink +
   slate) so it reads crisply on the dark footage. Interior/solid + scrolled
   states drop the filter and show the natural pink+slate. */
.brand__logo { filter: brightness(0) invert(1); }
header.nav.scrolled .brand__logo,
header.nav.nav--solid .brand__logo { filter: none; }
/* 10-item nav: bigger, readable link text (bumped 0.94rem -> 1.02rem) while
   keeping the whole bar on one desktop row. Tighter gap + reduced letter-spacing
   than before absorb the two extra links; the header already spans the full
   viewport width (flex, edge-to-edge padding) so nothing overflows / scrolls. */
.nav__links { display: flex; align-items: center; gap: 1.35rem; }
.nav__links a {
  color: var(--white); font-size: 1.02rem; letter-spacing: 0.02em; font-weight: 400;
  white-space: nowrap;
  transition: color 0.4s ease, opacity 0.2s ease; opacity: 0.92;
}
/* On mid-width desktops, shrink the gap a touch more before the mobile menu
   kicks in at 768px, so all ten links stay comfortably on one line. */
@media (max-width: 1080px) and (min-width: 769px) {
  header.nav { padding-left: 1.1rem; padding-right: 1.1rem; }
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: 0.98rem; letter-spacing: 0; }
  .brand__logo { height: 44px; }
}
header.nav.scrolled .nav__links a, header.nav.nav--solid .nav__links a { color: var(--ink); }
.nav__links a:hover { opacity: 1; color: var(--blush-soft); }
header.nav.scrolled .nav__links a:hover, header.nav.nav--solid .nav__links a:hover { color: var(--blush); }
.nav__links a.active { color: var(--blush-soft); opacity: 1; }
header.nav.scrolled .nav__links a.active, header.nav.nav--solid .nav__links a.active { color: var(--blush); }
.nav__cta { border: 1px solid rgba(255,255,255,0.6); padding: 0.55rem 1.3rem !important; border-radius: 30px; }
header.nav.scrolled .nav__cta, header.nav.nav--solid .nav__cta { border-color: var(--rose); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--white); }
header.nav.scrolled .nav__toggle, header.nav.nav--solid .nav__toggle { color: var(--ink); }

/* ---------- HERO (home, video) ---------- */
.hero {
  position: relative; height: 100vh; min-height: 620px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--white); overflow: hidden;
}
.hero__video, .hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,30,28,0.28) 0%, rgba(20,30,28,0.12) 40%, rgba(30,20,22,0.5) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 780px; padding: 0 1.5rem; }
.hero__eyebrow { letter-spacing: 0.34em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 1.4rem; color: rgba(255,255,255,0.9); font-weight: 500; }
.hero h1 { font-size: clamp(2.9rem, 7.6vw, 5.6rem); font-weight: 400; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero h1 em { font-style: italic; color: var(--blush-soft); }
.hero__sub { margin: 1.7rem auto 2.6rem; font-size: clamp(1.15rem, 2.3vw, 1.4rem); font-weight: 300; max-width: 600px; opacity: 0.96; line-height: 1.65; }
.hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Understated "Serving …" credit line under the CTAs — small, letter-spaced,
   semi-transparent white so it never competes with the headline. Wraps
   gracefully; shrinks further on small screens but still lists every beach. */
.hero__serving {
  margin: 2.2rem auto 0; max-width: 920px;
  font-size: 0.74rem; line-height: 1.85; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 300;
  color: rgba(255,255,255,0.66);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.hero__serving-label { color: rgba(255,255,255,0.82); letter-spacing: 0.2em; }
/* Below the desktop hero width, keep the list from ever forcing horizontal
   scroll: cap at the viewport and let it wrap over more lines cleanly. */
@media (max-width: 960px) {
  .hero__serving { max-width: 92vw; }
}
@media (max-width: 600px) {
  .hero__serving { font-size: 0.64rem; letter-spacing: 0.1em; line-height: 1.8; max-width: 92vw; }
}
/* On phone/tablet-portrait the beach list is too crowded — hide it entirely so
   the CTAs sit cleanly. Still shown on desktop / tablet-landscape. */
@media (max-width: 768px) {
  .hero__serving { display: none; }
}
/* Scroll cue: a soft "hint" that plays a few gentle opacity pulses on load,
   then fades out and stays hidden (non-interactive). Shown on every hero
   (home + interior). The whole cue runs one finite `scroll-hint` animation so
   it ends at opacity 0 / pointer-events:none; the chevron keeps a subtle
   downward bob during the pulses. */
.hero__scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,0.85); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  /* Static default is HIDDEN + non-interactive: the animation reveals it, pulses,
     then returns it here. This also means reduced-motion users (whose global
     rule kills animation via `animation: none !important`) simply never see it. */
  opacity: 0; pointer-events: none;
  /* ~4 gentle blinks then fade to hidden over ~3.6s, staying gone (forwards). */
  animation: scroll-hint 3.6s ease-in-out forwards;
}
/* Once JS detects a scroll, snap it away immediately. */
.hero__scroll.is-gone { opacity: 0 !important; pointer-events: none !important; animation: none; transition: opacity 0.4s ease; }
.hero__scroll svg { display: block; margin: 0.5rem auto 0; animation: bob 1.2s ease-in-out 3; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Pulse opacity a few times, then fade fully out and stay hidden + non-interactive. */
@keyframes scroll-hint {
  0%   { opacity: 0; }
  8%   { opacity: 0.9; }
  20%  { opacity: 0.35; }
  32%  { opacity: 0.9; }
  44%  { opacity: 0.35; }
  56%  { opacity: 0.9; }
  70%  { opacity: 0.3; }
  100% { opacity: 0; pointer-events: none; }
}
/* Smaller cue on interior heroes (shorter heroes) — same behavior. */
.hero--interior .hero__scroll { bottom: 1.2rem; font-size: 0.58rem; letter-spacing: 0.22em; }
.hero--interior .hero__scroll svg { width: 15px; height: 15px; }
/* Reduced motion is handled by the site-wide `* { animation: none !important }`
   rule below (line ~653): it disables the pulse, so the cue keeps its static
   default (opacity 0 / non-interactive) and is simply never shown — no
   aggressive blinking for those users. */

/* ---------- INTERIOR HERO (package / location / static pages, photo not video) ---------- */
.hero--interior {
  position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden; padding: 0;
}
.hero--interior .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--interior::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,30,28,0.32) 0%, rgba(20,30,28,0.18) 45%, rgba(12,20,18,0.72) 100%);
}
.hero--interior .hero__inner { position: relative; z-index: 2; text-align: left; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 1.5rem clamp(2.5rem, 6vw, 4.5rem); }
.hero--interior .hero__eyebrow { color: var(--blush-soft); }
.hero--interior h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 400; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.hero--interior .hero__sub { margin: 1rem 0 0; max-width: 640px; }

/* ---------- INTRO ---------- */
/* Base intro (interior pages, e.g. About): centered single column, pink wash. */
.intro {
  position: relative;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(230,154,167,0.12) 0%, rgba(230,154,167,0) 55%),
    linear-gradient(180deg, var(--ivory) 0%, #f8ebe6 100%);
}
.intro .wrap { max-width: 760px; position: relative; z-index: 1; }
.intro h2 { margin: 0.5rem 0 1.6rem; }
.intro p { font-size: 1.28rem; color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
.intro .signoff { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--rose); margin-top: 2rem; line-height: 1.5; }
.intro .signoff::before {
  content: ""; display: block; width: 46px; height: 1px; margin: 0 auto 1.4rem;
  background: linear-gradient(90deg, transparent, var(--blush-soft), transparent);
}

/* HOME two-column editorial band: real couple photo LEFT, verbatim copy RIGHT.
   Stacks (image on top, text below) under 768px. */
.intro--home {
  text-align: left;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(230,154,167,0.16) 0%, rgba(230,154,167,0) 58%),
    linear-gradient(180deg, var(--ivory) 0%, #f8ebe6 100%);
}
.intro--home .wrap {
  max-width: var(--maxw); position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: center;
}
/* LEFT — couple photo, soft rose editorial frame + subtle offset accent behind it */
.intro__photo { position: relative; }
.intro__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(18px, 18px);
  border-radius: 220px 220px 14px 14px;
  background: linear-gradient(160deg, rgba(230,154,167,0.35), rgba(154,172,144,0.28));
}
.intro__photo img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 33% center;
  border-radius: 220px 220px 14px 14px;
  box-shadow: 0 24px 60px -26px rgba(44,38,32,0.42);
  border: 6px solid var(--white);
}
/* RIGHT — text, left-aligned, vertically centered */
.intro__text { text-align: left; }
.intro__text h2 { margin: 0.4rem 0 1.5rem; }
.intro--home .intro__text p { font-size: 1.18rem; color: var(--ink-soft); font-weight: 300; line-height: 1.72; margin-bottom: 1.2rem; }
.intro--home .intro__text p:last-child { margin-bottom: 0; }
.intro--home .signoff { text-align: left; font-size: 1.42rem; margin-top: 1.7rem; }
.intro--home .signoff::before { margin: 1.4rem 0; background: linear-gradient(90deg, var(--blush-soft), transparent); }
@media (max-width: 768px) {
  .intro--home .wrap { grid-template-columns: 1fr; gap: 2.4rem; }
  /* Shrink the couple photo on phones so the whole image + the heading
     below it fit in one viewport. Cap height, narrow the frame, and
     center it; keep object-fit: cover + arched frame intact. */
  .intro__photo { max-width: 420px; margin-inline: auto; }
  .intro__photo img {
    aspect-ratio: 4 / 3;
    max-height: 58vh;
    object-fit: cover;
  }
}

/* ==================================================================
   BAND ACCENTS — reusable visual vocabulary for plain centered bands.
   Used site-wide on section heads (.packages__head, .locations__head,
   .faq__head) and the intro / location prose bands so consecutive
   sections read as an editorial brand, not flat text blocks.

   Two primitives:
   1) .band-accents  -> understated CLASSIC CORNER ORNAMENTS (thin L-shaped
                        filigree brackets, like the flourishes on a classic
                        book cover / certificate) at the four corners of the
                        centered heading block. Low opacity, muted rose.
                        Hidden on narrow screens. Purely decorative
                        pseudo-elements — no markup/copy change.
   2) eyebrow flourish -> a small centered accent rule under the eyebrow.
   ================================================================== */

/* small centered accent rule under centered-section eyebrows */
.packages__head .eyebrow, .locations__head .eyebrow, .faq__head .eyebrow,
.intro .eyebrow, .prose .eyebrow, .testi .eyebrow, .contact .center .eyebrow {
  position: relative; display: inline-block;
}
.packages__head .eyebrow::after, .locations__head .eyebrow::after,
.faq__head .eyebrow::after, .intro .eyebrow::after,
.prose .eyebrow::after, .testi .eyebrow::after, .contact .center .eyebrow::after {
  content: ""; display: block; width: 54px; height: 1px; margin: 0.85rem auto 0;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.55;
}

/* Classic corner ornaments framing the centered heading block.
   ::before draws the TOP-LEFT + TOP-RIGHT corner filigree pair; ::after draws
   the BOTTOM-LEFT + BOTTOM-RIGHT pair. Each is one thin line-art SVG (a small
   L-bracket with a tiny curled flourish), muted rose, low opacity, so it reads
   as an understated vintage-frame corner — not a loud botanical. */
.band-accents { position: relative; padding: 1.6rem 2.4rem; }
.band-accents::before, .band-accents::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px;
  pointer-events: none; z-index: 0; opacity: 0.45;
  background-repeat: no-repeat; background-size: 34px 26px;
}
/* Each corner is drawn explicitly in its own coordinate space (no root
   transform flips, which some renderers ignore on data-URI backgrounds).
   Geometry: an L-bracket hugging the corner + a tiny inward curl + a dot. */
/* top corners */
.band-accents::before {
  top: 0;
  background-position: left top, right top;
  background-image:
    /* top-left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23b94e63' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 26 L2 8 Q2 2 8 2 L34 2'/%3E%3Cpath d='M8 8 Q15 8 15 15' stroke-opacity='0.65'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23b94e63' stroke='none'/%3E%3C/svg%3E"),
    /* top-right (mirror of top-left) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23b94e63' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M32 26 L32 8 Q32 2 26 2 L0 2'/%3E%3Cpath d='M26 8 Q19 8 19 15' stroke-opacity='0.65'/%3E%3Ccircle cx='26' cy='8' r='1.4' fill='%23b94e63' stroke='none'/%3E%3C/svg%3E");
}
/* bottom corners */
.band-accents::after {
  bottom: 0;
  background-position: left bottom, right bottom;
  background-image:
    /* bottom-left (vertical mirror of top-left) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23b94e63' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 0 L2 18 Q2 24 8 24 L34 24'/%3E%3Cpath d='M8 18 Q15 18 15 11' stroke-opacity='0.65'/%3E%3Ccircle cx='8' cy='18' r='1.4' fill='%23b94e63' stroke='none'/%3E%3C/svg%3E"),
    /* bottom-right (both mirrors of top-left) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23b94e63' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M32 0 L32 18 Q32 24 26 24 L0 24'/%3E%3Cpath d='M26 18 Q19 18 19 11' stroke-opacity='0.65'/%3E%3Ccircle cx='26' cy='18' r='1.4' fill='%23b94e63' stroke='none'/%3E%3C/svg%3E");
}
/* keep heading text above the ornaments */
.band-accents > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .band-accents { padding: 0; }
  .band-accents::before, .band-accents::after { display: none; }
}

/* ---------- PACKAGES ---------- */
.packages { background: linear-gradient(180deg, var(--ivory) 0%, #f6e5df 100%); }
/* Wider + shorter header: widened cap (~1000px, roughly aligned with the 1280px
   package grid) so the paragraph flows on ~2 lines instead of looking pinched in
   the centre; tighter top/bottom spacing so there's less dead vertical gap before
   the cards. */
.packages__head { text-align: center; max-width: 1000px; margin: 0 auto 2rem; padding-top: 0; padding-bottom: 0; }
.packages__head p { color: var(--ink-soft); margin-top: 0.6rem; max-width: 860px; margin-left: auto; margin-right: auto; }
/* Guard against a word breaking mid-hyphen (e.g. "add-ons" splitting to "add-" / "ons"). */
.nowrap { white-space: nowrap; }
/* Exactly 2 cards per row (10 packages -> 5 clean rows of 2). SQUARE tiles, so the
   container is narrowed (vs the old wide landscape layout) to keep two squares a
   pleasant size — not screen-fillingly huge — still centered. Collapses to 1-up
   on mobile. */
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; max-width: 1300px; margin: 0 auto; padding: 0 0.5rem; }
/* "Other packages" cross-link block shows exactly 3 cards. In the default 2-up
   grid that would be 2 + a lonely 1. Use a perfect 3-up (3%3=0) here so the
   trailing row is never a single card. Widen the container to keep the three
   square tiles a pleasant size; collapses with the base grid on mobile. */
.pkg-grid--trio { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
/* Cross-sell strip at the bottom of a package page: 4 premium packages in a row. */
/* Compact 4-across cross-sell strip — deliberately smaller than the main grid. */
.pkg-grid--quad { grid-template-columns: repeat(4, 1fr); max-width: 1540px; gap: 1.7rem; }
.pkg-grid--quad .pkg__img { aspect-ratio: 4 / 3; }
.pkg-grid--quad .pkg__overlay { padding: 1.2rem; }
.pkg-grid--quad .pkg__name { font-size: 34px; text-underline-offset: 5px; }
.pkg-grid--quad .pkg__price { font-size: 1.75rem; }
.pkg-grid--quad .pkg__more { font-size: 0.82rem; }
@media (max-width: 980px) { .pkg-grid--quad { grid-template-columns: repeat(2, 1fr); max-width: 700px; } }
/* FAT LANDSCAPE IMAGE-TILE CARD — a short-and-wide package photo with NAME + PRICE
   centered in the MIDDLE of the tile over a full-tile scrim so text stays legible
   on every photo. Full inclusions/add-ons live on the package DETAIL page.
   The whole tile links to that detail route. */
.pkg {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 40px -28px rgba(44,38,32,0.4);
  border: 1px solid rgba(216, 196, 168, 0.4);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pkg__img {
  /* Full-bleed LANDSCAPE 3:2: the img fills the whole tile and crops overflow so
     there are never letterbox bars. The native package photos are ~3:2 full-arbor
     shots, so at 3/2 the WHOLE ARBOR shows with minimal cropping. height:100% +
     object-fit:cover is explicit so the photo covers even if the intrinsic aspect
     ratio differs (e.g. the portrait Magical Bliss shot center-crops top/bottom
     but object-position:center keeps its arch visible). */
  width: 100%; height: 100%; aspect-ratio: 6 / 5;
  object-fit: cover; object-position: center; display: block;
  background: var(--sand); transition: transform 0.6s ease;
}
.pkg:hover .pkg__img { transform: scale(1.1); }
/* Full-tile scrim (darker toward the centre) + centred text. Covers the whole
   photo so the middle-set name/price stay readable on all 10 photos regardless
   of their brightness; deepens slightly on hover. */
.pkg__overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.4rem; text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(12,9,11,0.52) 0%, rgba(12,9,11,0.30) 55%, rgba(12,9,11,0.22) 100%),
    linear-gradient(180deg, rgba(12,9,11,0.22) 0%, rgba(12,9,11,0.10) 50%, rgba(12,9,11,0.30) 100%);
  transition: background 0.35s ease;
}
/* Hover: lift the dark veil and wash it with a soft pink glow (lighter + pinker),
   so the card brightens and warms on hover instead of darkening. */
.pkg:hover .pkg__overlay {
  background:
    radial-gradient(ellipse at center, rgba(201,74,99,0.30) 0%, rgba(212,104,122,0.18) 55%, rgba(230,154,167,0.12) 100%),
    linear-gradient(180deg, rgba(230,154,167,0.12) 0%, rgba(212,104,122,0.08) 50%, rgba(180,78,99,0.22) 100%);
}
/* Elegant, readable handwriting/script font for the package NAME. Bumped size +
   weight so the script reads clearly over the scrim. Price stays clean serif. */
.pkg__name { font-family: "Adrenaline", var(--serif); font-weight: 500; font-size: 40px; line-height: 1.05; color: var(--white); margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,0.55); text-decoration: underline; text-underline-offset: 6px; }
.pkg__price { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: #ffd7dd; margin: 0.2rem 0 0; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
/* Small tasteful caption under the price on packages that bundle photography.
   Soft blush italic, legible over the scrim, deliberately subtle. */
.pkg__photonote {
  margin: 0.45rem 0 0; font-family: var(--sans); font-style: italic;
  font-size: 0.82rem; letter-spacing: 0.02em; font-weight: 400;
  color: rgba(255,225,230,0.95); text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.pkg__more {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,0.9);
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.pkg:hover .pkg__more, .pkg:focus-visible .pkg__more { opacity: 1; transform: none; }
/* Feature card keeps a subtle pink cue on its scrim so "Most loved" still reads special. */
.pkg--feature .pkg__overlay {
  background:
    radial-gradient(ellipse at center, rgba(120,40,60,0.55) 0%, rgba(90,25,45,0.34) 55%, rgba(60,18,32,0.26) 100%),
    linear-gradient(180deg, rgba(60,18,32,0.22) 0%, rgba(90,25,45,0.14) 50%, rgba(60,18,32,0.32) 100%);
}
.pkg--feature:hover .pkg__overlay {
  background:
    radial-gradient(ellipse at center, rgba(120,40,60,0.64) 0%, rgba(90,25,45,0.42) 55%, rgba(60,18,32,0.34) 100%),
    linear-gradient(180deg, rgba(60,18,32,0.28) 0%, rgba(90,25,45,0.20) 50%, rgba(60,18,32,0.38) 100%);
}
.pkg--feature .pkg__price { color: #ffe1e6; }

/* ---------- PACKAGE DETAIL PAGE ---------- */
.pkg-detail { background: var(--ivory); }
.pkg-detail__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; }
.pkg-detail__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.pkg-detail__price { font-family: var(--serif); font-size: 3rem; color: var(--rose); margin: 0.4rem 0 0.2rem; }
.pkg-detail__price small { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; }
.pkg-detail__cap { color: var(--ink-soft); margin-bottom: 1.6rem; }
.pkg-detail h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.pkg-detail h3 { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin: 2rem 0 0.9rem; }
.spec-list { list-style: none; }
.spec-list li { position: relative; padding-left: 1.5rem; font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.spec-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.spec-list.addons li::before { background: var(--blush-soft); }
.pkg-detail__note { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); margin-top: 1rem; }
.pkg-detail__cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- LOCATIONS ---------- */
/* Light sage band -> dark ink text (was white-on-wine). */
.locations { background: var(--sage); color: var(--ink); overflow: hidden; }
.locations__head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.locations__head .eyebrow { color: var(--rose-deep); }
.locations__head p { color: var(--ink); margin-top: 1rem; }
/* 16 beaches -> even grid, never a lone last card.
   Fixed column counts (not auto-fill/minmax, which could yield 3-up -> 16%3=1
   orphan): 4-up desktop (16%4=0, 4x4) -> 2-up tablet (16%2=0) -> 1-up mobile.
   No breakpoint yields 3 columns. Responsive steps live in the media queries. */
.loc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.loc-card { position: relative; flex: 0 1 300px; max-width: 340px; background: rgba(255,255,255,0.55); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sage-deep); transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex; flex-direction: column; box-shadow: 0 10px 34px -26px rgba(44,38,32,0.35); }
/* "Couple's favorite" heart badge, pinned to the top-left of the photo. */
.loc-fav { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--rose-deep, #b94e63); font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 3px 12px rgba(120,60,72,0.25); backdrop-filter: blur(2px); }
.loc-fav svg { color: var(--blush, #d4687a); flex: 0 0 auto; }
.loc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.loc-card img { height: 180px; width: 100%; object-fit: cover; }
.loc-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.loc-card__body h3 { font-size: 1.7rem; color: var(--ink); margin-bottom: 0.4rem; }
.loc-card__body p { font-size: 0.98rem; color: var(--ink-soft); font-weight: 300; line-height: 1.6; margin-bottom: 1rem; }
.loc-card__link { margin-top: auto; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.loc-card__link:hover { color: var(--rose-deep); }

/* ---------- LOCATION DETAIL BODY (rich per-beach info, under the hero) ----------
   Alternating image/text rows: image-left/text-right, then flipped. Photos are
   real DW library originals, object-fit cover, rounded, lazy, lightbox-clickable.
   Stacks to a single column on mobile (no whole-page horizontal scroll). */
.loc-body { background: var(--ivory); }
.loc-body .wrap { max-width: 1040px; }
.loc-body__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.loc-body__row:last-child { margin-bottom: 0; }
.loc-body__row--flip .loc-body__media { order: 2; }
.loc-body__row--flip .loc-body__text  { order: 1; }
.loc-body__row--full { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.loc-body__media { margin: 0; }
.loc-body__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: none; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); line-height: 0;
}
.loc-body__btn img {
  width: 100%; height: clamp(280px, 34vw, 420px);
  object-fit: cover; border-radius: var(--radius);
  transition: transform 0.7s ease;
}
.loc-body__btn:hover img { transform: scale(1.05); }
.loc-body__btn:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; }
.loc-body__text h3 { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.2rem); color: var(--ink); margin-bottom: 0.9rem; line-height: 1.15; }
.loc-body__text p { font-size: 1.08rem; color: var(--ink-soft); font-weight: 300; line-height: 1.72; margin-bottom: 1rem; }
.loc-body__text p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .loc-body__row { grid-template-columns: 1fr; gap: 1.4rem; }
  /* keep image ABOVE text on mobile regardless of flip */
  .loc-body__row--flip .loc-body__media { order: 1; }
  .loc-body__row--flip .loc-body__text  { order: 2; }
  .loc-body__btn img { height: clamp(240px, 60vw, 320px); }
}

/* soft sand→ivory wash band (used on location detail prose) so consecutive
   ivory sections gain vertical rhythm instead of reading as one flat block.
   Adds a faint radial sea glow behind the centered prose for depth. */
.section--washed {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(185,78,99,0.08) 0%, rgba(185,78,99,0) 60%),
    linear-gradient(180deg, #f8ebe6 0%, var(--ivory) 100%);
}

/* location detail body copy */
.prose { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.prose p { font-size: 1.2rem; color: var(--ink-soft); font-weight: 300; line-height: 1.75; margin-bottom: 1.4rem; }
.prose .btn { margin-top: 1rem; }

/* ---------- GALLERY ---------- */
.gallery { background: var(--ivory); }
.gallery__head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }
.gallery__head p { color: var(--ink-soft); margin-top: 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 0.9rem; }
.gallery-grid figure { overflow: hidden; border-radius: var(--radius); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gallery-grid figure:hover img { transform: scale(1.06); }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }

/* ---------- TESTIMONIALS ---------- */
/* Light sage band -> dark ink text (was white-on-wine gradient). */
.testi { background: linear-gradient(160deg, var(--sage-soft) 0%, var(--sage) 100%); color: var(--ink); text-align: center; }
.testi .eyebrow { color: var(--rose-deep); }
.testi__stage { max-width: 760px; margin: 2rem auto 0; position: relative; min-height: 240px; }
.testi__slide { display: none; animation: fade 0.6s ease; }
.testi__slide.active { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.testi__quote { font-family: var(--serif); font-size: clamp(1.5rem, 3.1vw, 2.05rem); font-style: italic; line-height: 1.5; color: var(--ink); }
.testi__stars { color: var(--rose); letter-spacing: 0.2em; margin: 1.4rem 0 0.8rem; font-size: 1.15rem; }
.testi__name { font-size: 0.88rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.testi__dots { display: flex; gap: 0.6rem; justify-content: center; margin-top: 2.2rem; }
.testi__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(44,38,32,0.22); cursor: pointer; transition: background 0.3s ease; padding: 0; }
.testi__dots button.active { background: var(--rose); }

/* Static reviews grid (reviews page) — sits on the sage .testi band */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; max-width: var(--maxw); margin: 0 auto; }
.review-card { background: rgba(255,255,255,0.55); border: 1px solid var(--sage-deep); border-radius: var(--radius); padding: 2rem 2.1rem; text-align: left; box-shadow: 0 10px 34px -26px rgba(44,38,32,0.35); }
.review-card__stars { color: var(--rose); letter-spacing: 0.2em; margin-bottom: 1rem; }
.review-card__quote { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.1rem; }
.review-card__name { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- ADD-ONS ---------- */
.addons-sec { background: #f4ece1; }
.addons-sec__head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }
.addons-sec__head p { color: var(--ink-soft); margin-top: 1rem; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; }
.addon { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 34px -26px rgba(44,38,32,0.4); }
.addon img { height: 170px; width: 100%; object-fit: cover; }
.addon__body { padding: 1.2rem 1.3rem 1.4rem; }
.addon__name { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.addon__price { color: var(--blush); font-weight: 600; font-size: 1rem; margin: 0.2rem 0 0.6rem; }
.addon__desc { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq { background: var(--ivory); }
.faq .wrap { max-width: 820px; }
.faq__head { text-align: center; margin-bottom: 2rem; }
.faq-item { border-bottom: 1px solid rgba(216,196,168,0.7); }
.faq-item__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.5rem 0; font-family: var(--serif); font-size: 1.55rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item__q span.icon { font-family: var(--sans); font-size: 1.6rem; color: var(--blush); transition: transform 0.3s ease; flex-shrink: 0; }
.faq-item.open .faq-item__q span.icon { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item__a p { padding: 0 0 1.5rem; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.7; }

/* ---------- CONTACT ---------- */
.contact { background: linear-gradient(180deg, #f4ece1 0%, var(--sand) 100%); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.contact__intro .eyebrow { color: var(--blush); }
.contact__intro h2 { margin: 0.5rem 0 1.3rem; }
.contact__intro p { color: var(--ink-soft); max-width: 420px; margin-bottom: 2rem; }
.contact__detail { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; font-size: 1.08rem; }
.contact__detail svg { color: var(--rose); flex-shrink: 0; }
.contact__detail a:hover { color: var(--blush); }
form.lead { background: var(--white); padding: 2.4rem; border-radius: var(--radius); box-shadow: var(--shadow); }
form.lead label { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem; font-weight: 500; }
form.lead input, form.lead textarea, form.lead select {
  width: 100%; padding: 0.8rem 0.9rem; margin-bottom: 1.1rem; border: 1px solid var(--sand-deep);
  border-radius: var(--radius); font-family: var(--sans); font-size: 0.95rem; color: var(--ink); background: var(--ivory);
}
form.lead input:focus, form.lead textarea:focus, form.lead select:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(185, 78, 99, 0.18);
}
/* Custom-styled dropdown: strip native chrome and draw a pink chevron so the
   select matches the text inputs (same height, padding, border, radius). */
form.lead select.lead__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; line-height: 1.3; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b94e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 16px 16px;
}
form.lead select.lead__select option { color: var(--ink); }
form.lead textarea { resize: vertical; min-height: 90px; }
form.lead .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form.lead .btn { width: 100%; margin-top: 0.4rem; }

/* ---------- FOOTER ---------- */
/* Light sage footer -> dark ink text (was white-on-wine). */
footer { background: var(--sage); color: var(--ink-soft); padding: 2.5rem 1.5rem 1.75rem; }
.footer__grid { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.footer__brand { color: var(--ink); }
/* Footer sits on light sage -> show the logo in its natural pink+slate. */
.footer__logo { display: block; height: 58px; width: auto; }
.footer__brand p { font-size: 0.85rem; margin-top: 0.8rem; max-width: 260px; color: var(--ink-soft); }
.footer__nav { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer__col h5 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; font-weight: 600; }
.footer__col a { display: block; font-size: 0.98rem; margin-bottom: 0.55rem; color: var(--ink-soft); }
.footer__col a:hover { color: var(--rose); }
.footer__bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(44,38,32,0.18); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--ink-soft); }
.footer__bottom a:hover { color: var(--rose); }

/* ---------- REVEAL ANIM ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem; }
.notfound h1 { font-size: clamp(3rem, 9vw, 6rem); color: var(--rose); }
.notfound p { color: var(--ink-soft); font-size: 1.2rem; margin: 1rem 0 2rem; max-width: 480px; }

/* ---------- RECEPTION ---------- */
/* pricing tiers grid */
/* 6 pricing tiers -> even grid, never a lone last tier: 3-up desktop (6%3=0,
   2x3) -> 2-up tablet (6%2=0, 3x2) -> 1-up mobile. Fixed counts (not auto-fit). */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 960px; margin: 0 auto; }
.price-tier {
  background: var(--white); border: 1px solid rgba(216,196,168,0.5); border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center; box-shadow: 0 10px 34px -28px rgba(44,38,32,0.4);
}
.price-tier__amt { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--rose); line-height: 1; }
.price-tier__cap { display: block; margin-top: 0.5rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* reception photo strip */
/* 3 reception photos -> perfect 3-up (3%3=0). Fixed count (not auto-fit, which
   could break to 2+1 orphan at some widths); 1-up on mobile. */
.reception-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.reception-gallery figure { overflow: hidden; border-radius: var(--radius); box-shadow: 0 10px 34px -26px rgba(44,38,32,0.35); }
.reception-gallery img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.7s ease; }
.reception-gallery figure:hover img { transform: scale(1.05); }
/* "why couples love us" cards (sit on the sage locations band) */
/* 4 "why" cards -> even grid: 4-up desktop (4x1) -> 2-up tablet (2x2, 4%2=0)
   -> 1-up mobile. Fixed counts (not auto-fit, which could yield 3+1 orphan). */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.why-card { background: rgba(255,255,255,0.55); border: 1px solid var(--sage-deep); border-radius: var(--radius); padding: 1.8rem 1.6rem; box-shadow: 0 10px 34px -26px rgba(44,38,32,0.35); }
.why-card h3 { font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }
.why-card p { font-size: 0.98rem; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }

/* ---------- BOUQUETS ---------- */
/* 5 bouquets -> 5 is prime, so no column count divides evenly (2->3+2 ok, but
   2-up would give 2+2+1 orphan; 4-up -> 4+1 orphan). Use a CENTERED flex row
   with fixed-width cards: desktop shows 3 per row (3 + a centered trailing row
   of 2 -> remainder 2, centered, never a lonely single) and it wraps down to
   2 then 1 as the viewport narrows, ALWAYS centering the last (short) row so no
   card is ever left singled-out on the left. */
.bouquet-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.4rem; max-width: 820px; margin: 0 auto;
}
.bouquet-grid .bouquet-card {
  flex: 0 1 240px; max-width: 260px;
}
.bouquet-card { overflow: hidden; border-radius: var(--radius); box-shadow: 0 10px 34px -26px rgba(44,38,32,0.4); background: var(--white); border: 1px solid rgba(216,196,168,0.4); position: relative; }
.bouquet-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.6s ease; }
.bouquet-card:hover img { transform: scale(1.05); }
.bouquet-card figcaption { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); text-align: center; padding: 0.9rem 0.6rem 1.1rem; }
/* The bouquet image is a clickable button opening the lightbox. Strip native
   button chrome so it looks identical to the old <img>, but keep it obviously
   interactive (pointer + a soft focus ring for keyboard users). */
.bouquet-card__btn,
.reception-gallery__btn {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; overflow: hidden; line-height: 0;
}
.bouquet-card__btn:focus-visible,
.reception-gallery__btn:focus-visible { outline: 3px solid var(--blush); outline-offset: 2px; }

/* ---------- BLOG ---------- */
/* 6 posts -> even grid, never a lone last card. Fixed counts (not auto-fill):
   3-up desktop (6%3=0, 2x3) -> 2-up tablet (6%2=0, 3x2) -> 1-up mobile. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: var(--maxw); margin: 0 auto; }
.blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(216,196,168,0.4); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 40px -28px rgba(44,38,32,0.4); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.blog-card__media { overflow: hidden; height: 220px; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__date { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blush); font-weight: 500; margin-bottom: 0.7rem; }
.blog-card__title { font-family: var(--serif); font-size: 1.55rem; line-height: 1.2; color: var(--ink); margin-bottom: 0.7rem; }
.blog-card__excerpt { font-size: 0.98rem; color: var(--ink-soft); font-weight: 300; line-height: 1.6; margin-bottom: 1.1rem; }
.blog-card__link { margin-top: auto; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); font-weight: 600; }
.blog-card:hover .blog-card__link { color: var(--rose-deep); }
/* blog post detail body */
.post h2 { color: var(--ink); }
.post .spec-list li { font-size: 1.1rem; }
.post p { font-size: 1.18rem; color: var(--ink-soft); font-weight: 300; line-height: 1.75; margin-bottom: 1.3rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .pkg-detail__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  /* EVEN-GRID tablet step: no count that leaves a lone last card.
     beaches 16 -> 2-up (16%2=0); blog 6 -> 2-up (6%2=0); "why" 4 -> 2-up
     (4%2=0); pricing 6 -> 2-up (6%2=0); reviews stay 2-up (10%2=0). */
  .loc-grid,
  .blog-grid,
  .why-grid,
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__links.mobile-open {
    display: flex; flex-direction: column; position: absolute; top: 100%; right: 0; left: 0;
    background: var(--ivory); padding: 1.4rem 2rem 1.8rem; gap: 1rem; box-shadow: var(--shadow);
    align-items: flex-start; max-height: calc(100vh - 64px); overflow-y: auto;
  }
  /* All ten links stacked, readable; slightly larger than body nav for touch. */
  .nav__links.mobile-open a { color: var(--ink); font-size: 1.08rem; letter-spacing: 0.02em; }
  .nav__links.mobile-open .nav__cta { border-color: var(--rose); }
  .nav__toggle { display: block; }
  /* Scale the logo down on mobile so it sits comfortably beside the hamburger
     and the bar never overflows / triggers horizontal scroll. */
  .brand__logo { height: 40px; }
  header.nav { background: rgba(250,245,239,0.0); }
  header.nav.scrolled, header.nav.nav--solid { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .g-wide { grid-column: span 2; }
  .pkg-grid { grid-template-columns: 1fr; max-width: 480px; }
  /* EVEN-GRID mobile step: single column everywhere -> a 1-wide column can
     never leave an orphaned last row. beaches / blog / "why" / pricing all
     collapse to 1-up; reception photos to 1-up; reviews grid handled at 600px. */
  .loc-grid,
  .blog-grid,
  .why-grid,
  .price-grid,
  .reception-gallery { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  form.lead .row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { flex-direction: column; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .pkg-detail__cta { flex-direction: column; }
  .pkg-detail__cta .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   GOOGLE REVIEWS — self-contained, data-driven component.
   Renders on beach detail pages and /reviews/. Gold/amber stars (authentic
   review convention) framed by the site's pink + light-sage styling.
   No external widget script.
   =================================================================== */
.google-reviews {
  background:
    linear-gradient(180deg, rgba(211,221,203,0.35) 0%, rgba(251,244,241,0.6) 55%, var(--ivory) 100%);
  border-top: 1px solid var(--sage-soft);
}
/* gold/amber review stars (kept gold on purpose vs the pink palette) */
.stars { color: #f4b400; letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; white-space: nowrap; }
.g-logo { vertical-align: middle; flex: 0 0 auto; }

/* summary header */
.gr-summary { text-align: center; max-width: 560px; margin: 0 auto 2rem; }
.gr-summary__label {
  font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--rose); margin-bottom: 0.4rem;
}
.gr-summary__rating { display: inline-flex; align-items: center; gap: 0.7rem; }
.gr-summary__score { font-family: var(--serif); font-weight: 600; font-size: 2.6rem; color: var(--ink); line-height: 1; }
.gr-summary__rating .stars { font-size: 1.5rem; }
.gr-summary__count {
  display: inline-flex; align-items: center; gap: 0.45rem; justify-content: center;
  margin-top: 0.7rem; font-size: 0.95rem; color: var(--ink-soft); letter-spacing: 0.02em;
}

/* cards grid — reflows to 1 column on mobile, no horizontal scroll.
   align-items:start so an expanded (taller) card grows on its own and does NOT
   stretch its row-neighbors; grid rows reflow naturally around it. */
/* 10 reviews -> even grid, never a lone last card. Fixed 2-up (10%2=0, 5x2)
   rather than auto-fill/minmax (which could yield 3-up -> 10%3=1 orphan).
   Drops to 1-up on mobile. align-items:start so an expanded card doesn't
   stretch its row-neighbor. */
.gr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content; align-items: start;
  gap: 1.6rem; max-width: var(--maxw); margin: 0 auto;
}
.gr-card {
  background: var(--white); border: 1px solid var(--sage-soft); border-radius: 12px;
  padding: 1.6rem 1.7rem; box-shadow: 0 12px 34px -24px rgba(44,38,32,0.4);
  display: flex; flex-direction: column; gap: 0.85rem; text-align: left;
  /* Floor height so a short (e.g. one-line) collapsed review fills out to match
     a typical collapsed card (avatar + name/date + stars + ~5-7 clamped lines)
     instead of looking stubby. This is a FLOOR only: .gr-card--open keeps
     height:auto and no max-height, so "Read more" still grows the card past it. */
  min-height: 300px;
}
.gr-card__head { display: flex; align-items: center; gap: 0.8rem; }
.gr-card__avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
}
.gr-card__id { flex: 1 1 auto; min-width: 0; }
.gr-card__name { font-weight: 600; font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.gr-card__date { font-size: 0.82rem; color: var(--ink-soft); }
.gr-card__head .g-logo { width: 22px; height: 22px; }

.gr-card__body { display: flex; flex-direction: column; }
.gr-card__text {
  font-size: 1rem; line-height: 1.6; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Expanded: release the clamp AND any height cap so the CARD grows to fit the
   full text — text stays inside the card's rounded background, never clipped. */
.gr-card--open { max-height: none; }
.gr-card--open .gr-card__text {
  display: block; -webkit-line-clamp: unset; line-clamp: unset;
  max-height: none; overflow: visible;
}
.gr-card__more {
  align-self: flex-start; margin-top: 0.5rem; padding: 0; background: none; border: none;
  cursor: pointer; font-family: var(--sans); font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--blush); text-decoration: underline;
}
.gr-card__more:hover { color: var(--rose-deep); }

/* -------------------------------------------------------------------
   ROW VARIANT (home page): centered summary on top, then ONE horizontal
   row of cards that scrolls sideways. The overflow-x lives ONLY on the
   scroll track (.gr-row-track), so it never triggers whole-page horizontal
   scroll (the body keeps its overflow-x: hidden guard). Beach/reviews pages
   are unaffected — they use .gr-grid above.
   ------------------------------------------------------------------- */
/* Carousel wrapper: holds the scroll track between two arrow buttons. */
.gr-carousel {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 0.4rem;
}
.gr-carousel .gr-row-track { flex: 1 1 auto; min-width: 0; margin: 0; }
/* Left/right scroll arrows — circular, indicate the row scrolls sideways. */
.gr-arrow {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(185,78,99,0.35); background: #fff;
  color: var(--rose-deep, #b94e63); font-size: 1.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(120,60,72,0.14);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}
.gr-arrow:hover { background: var(--rose, #b94e63); color: #fff; transform: scale(1.06); }
.gr-arrow:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.gr-arrow[hidden] { display: none; }
@media (max-width: 900px) {
  /* On touch screens swiping is natural; overlay slimmer arrows on the edges. */
  .gr-arrow { width: 38px; height: 38px; font-size: 1.4rem; position: absolute; top: 50%; transform: translateY(-50%); }
  .gr-arrow:hover { transform: translateY(-50%) scale(1.06); }
  .gr-arrow--prev { left: 2px; }
  .gr-arrow--next { right: 2px; }
}

.gr-row-track {
  max-width: var(--maxw); margin: 0 auto;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--rose) transparent;
  /* fade room + so card shadows aren't clipped by the scroll box */
  padding: 0.6rem 0.2rem 1.4rem;
}
.gr-row-track:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 12px; }
/* subtle scrollbar (WebKit) */
.gr-row-track::-webkit-scrollbar { height: 8px; }
.gr-row-track::-webkit-scrollbar-track { background: transparent; }
.gr-row-track::-webkit-scrollbar-thumb { background: rgba(196,138,151,0.5); border-radius: 999px; }
.gr-row-track::-webkit-scrollbar-thumb:hover { background: var(--rose); }

.gr-row {
  display: flex; flex-wrap: nowrap; gap: 1.6rem;
  width: max-content; /* row grows past the viewport -> horizontal scroll */
  /* flex-start (not stretch): collapsed cards keep their natural even height,
     but an expanded card can grow taller than its neighbors WITHOUT forcing
     them all tall. Its own height auto-grows to fit the full text. */
  align-items: flex-start;
}
/* Fixed-width cards so the single row reads cleanly. ~3–4 across on desktop. */
.google-reviews--row .gr-card {
  flex: 0 0 340px; width: 340px;
  scroll-snap-align: start;
}
/* Even height in the row: clamp text to a consistent line count so collapsed
   cards line up. On expand, .gr-card--open (above) releases the clamp and the
   card grows on its own thanks to align-items:flex-start on the row. */
.google-reviews--row .gr-card__text { -webkit-line-clamp: 7; }
.google-reviews--row.google-reviews { padding-bottom: 1rem; }

@media (max-width: 900px) {
  /* one-and-a-bit cards visible to signal there's more to swipe */
  .google-reviews--row .gr-card { flex-basis: 78vw; width: 78vw; max-width: 340px; }
}

@media (max-width: 600px) {
  .gr-grid { grid-template-columns: 1fr; }
  .gr-summary__score { font-size: 2.2rem; }
  .google-reviews--row .gr-card { flex-basis: 82vw; width: 82vw; }
  /* On small screens a full 300px floor wastes vertical space on short reviews;
     relax it so collapsed cards aren't awkwardly tall. Still a floor, so
     expansion (min-height + height:auto) continues to work. */
  .gr-card { min-height: 250px; }
}

/* ===================================================================
   LIGHTBOX — shared image popup for the bouquets + reception galleries.
   Vanilla; markup injected by LIGHTBOX_JS. Pink+sage accents, rounded, soft
   shadow; image scales to fit the viewport (object-fit: contain, never
   cropped). Its own fixed overlay, so it doesn't affect the page overflow-x
   guard. Body scroll is locked via body.lightbox-open while it's open.
   =================================================================== */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute; inset: 0; z-index: 0; cursor: zoom-out;
  background: rgba(28, 20, 24, 0.78);
  backdrop-filter: blur(4px);
  animation: lb-fade 0.25s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__dialog {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(0.4rem, 2vw, 1.2rem);
  max-width: 96vw; max-height: 94vh;
  animation: lb-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes lb-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.lightbox__figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  background: var(--ivory);
  border: 6px solid var(--white);
  border-radius: 16px;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6);
  padding: 0.5rem 0.5rem 0;
  max-width: 90vw; max-height: 90vh; overflow: hidden;
}
.lightbox__img {
  display: block;
  max-width: 88vw; max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;               /* never crop the real photo */
  border-radius: 10px;
}
.lightbox__cap {
  font-family: var(--serif); font-size: 1.35rem; color: var(--rose);
  text-align: center; padding: 0.7rem 1rem 0.9rem; line-height: 1.2;
}
/* close (x) — pink accent pill, top-right of the dialog */
.lightbox__close {
  position: absolute; top: -0.6rem; right: -0.6rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--white); background: var(--blush); color: var(--white);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
}
.lightbox__close:hover { background: var(--rose); transform: scale(1.06); }
/* prev / next arrows — sage-tinted round controls flanking the image */
.lightbox__nav {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14); color: var(--white);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.lightbox__nav:hover { background: var(--blush); border-color: var(--blush); transform: scale(1.06); }
.lightbox__nav[hidden] { display: none; }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }

/* On phones, move the arrows to overlay the bottom corners so the image keeps
   the full width, and shrink the caption a touch. */
@media (max-width: 640px) {
  .lightbox__dialog { gap: 0; }
  .lightbox__nav {
    position: absolute; bottom: 0.6rem; z-index: 3;
    background: rgba(28, 20, 24, 0.55);
  }
  .lightbox__nav--prev { left: 0.4rem; }
  .lightbox__nav--next { right: 0.4rem; }
  .lightbox__img { max-width: 92vw; max-height: 74vh; }
  .lightbox__cap { font-size: 1.15rem; }
}

/* ---- Reception: intro lead, why-table, menu card, masonry gallery ---- */
.rec-intro__lead { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.4; color: var(--ink); max-width: 820px; margin: 0 auto; }
/* Why-table — quiet & editorial (no filled header, no maroon) */
.why-table__wrap { max-width: 800px; margin: 2.2rem auto 0; overflow-x: auto; }
.why-table { width: 100%; border-collapse: collapse; font-family: var(--serif); }
.why-table th { text-align: left; padding: 0 1.4rem 0.7rem; font-family: "DM Sans", sans-serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--sage-deep); border-bottom: 2px solid var(--blush-soft); }
.why-table td { padding: 1.2rem 1.4rem; border-bottom: 1px solid rgba(185,199,176,0.45); color: var(--ink-soft); vertical-align: top; font-size: 1.4rem; line-height: 1.4; }
.why-table td:first-child { font-weight: 500; color: var(--ink); white-space: nowrap; }
.why-table tbody tr:last-child td { border-bottom: none; }

/* Menu — fancy Italian-restaurant card: cream paper, framed border, script type */
.menu-card { max-width: 760px; margin: 0 auto; background: #fbf6ee; border: 1px solid var(--sand-deep); padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.5rem, 5vw, 3.4rem); box-shadow: 0 16px 46px -28px rgba(44,38,32,0.42); position: relative; }
.menu-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(185,158,120,0.55); pointer-events: none; }
.menu-card__head { text-align: center; margin-bottom: 2.4rem; position: relative; }
.menu-card__head h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: 0.03em; color: var(--rose-deep); line-height: 1.1; }
.menu-card__head h2::after { content: ""; display: block; width: 68px; height: 2px; margin: 0.9rem auto 0; background: linear-gradient(90deg, transparent, var(--blush) 30%, var(--blush) 70%, transparent); }
.menu-list { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu-list li { padding: 1.15rem 0; border-bottom: 1px solid rgba(216,196,168,0.5); }
.menu-list li:last-child { border-bottom: none; }
.menu-list__name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); line-height: 1.3; }
.menu-list__desc { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06rem; color: var(--ink-soft); margin: 0.35rem auto 0; max-width: 460px; line-height: 1.5; }

/* Reception gallery — seamless 2-column puzzle: same width, natural heights, no gaps */
.rec-masonry { display: flex; gap: 12px; max-width: 1080px; margin: 0 auto; align-items: flex-start; }
.rec-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rec-masonry__item { margin: 0; line-height: 0; }
.rec-masonry__item button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rec-masonry__item img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: none; }
.bouquet-card__btn { position: relative; display: block; }
.bouquet-card__btn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(to bottom, rgba(20,14,16,0.5), transparent); pointer-events: none; z-index: 1; }
.bouquet-card__price { position: absolute; right: 0.95rem; top: 0.7rem; font-family: var(--serif); font-weight: 600; font-size: 1.9rem; color: #ffd7dd; text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 14px rgba(0,0,0,0.6); z-index: 2; }
.bouquet-note { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--rose-deep); margin-top: 0.9rem; }