/* ============================================================
   ROYALTY PASTRIES LLC — Design System
   Palette: gold / pink / white / orange, ornate & warm
   Signature: piped-icing scallop dividers + crown emblem
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500&family=Meow+Script&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --cream:        #FFF8EF;
  --cream-deep:   #FBEEDD;
  --white:        #FFFFFF;
  --plum:         #4A2436;
  --plum-soft:    #6E4252;
  --gold:         #C6952C;
  --gold-light:   #E4BE6C;
  /* Darkened from #93691C: the old value only cleared ~4.9:1 on white and
     ~4.7:1 on cream, right at the WCAG AA line. This clears ~6.3:1 / ~6.0:1. */
  --gold-deep:    #7C5A18;
  --pink:         #E4638C;
  --pink-soft:    #F7D9E2;
  --pink-deep:    #C43E6C;
  /* Darker than --pink-deep specifically for small/regular text sitting on
     --pink-soft backgrounds (nav active/hover, radio chips, policy notices).
     --pink-deep only clears ~3.75:1 against --pink-soft, which fails WCAG AA
     (4.5:1) for regular text; this variant clears ~5.8:1. */
  --pink-deep-a11y: #9C2350;
  --price:        #B8395F;
  --orange:       #E8793A;
  --orange-deep:  #CC5E22;
  --status-open:  #6FBE8C;
  --status-closed: #C98A9B;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-script:  'Meow Script', cursive;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --radius: 12px;
  --shadow-soft: 0 12px 32px rgba(74, 36, 54, 0.10);
  --shadow-lift: 0 18px 44px rgba(74, 36, 54, 0.16);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 92px; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--plum);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--plum);
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.15;
}

.script{
  font-family: var(--font-script);
  color: var(--gold-deep);
  font-weight: 400;
}

:root{
  --container-pad: 28px;
}
.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ============ VISUALLY HIDDEN (screen-reader only) ============ */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ SKIP LINK ============ */
.skip-link{
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1200;
  background: var(--plum);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top .2s ease;
}
.skip-link:focus{
  top: 12px;
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============ BRAND WORDMARK ============
   wordmark.svg replaces the old crown-mark icon + brand-text lockup in
   both the header and footer. Height-only sizing so the image scales by
   its own intrinsic aspect ratio regardless of exact SVG dimensions. */
.brand-wordmark{
  height: 44px;
  width: auto;
  display: block;
}
/* Royalty: bumped 2026-08-22 — sized up from 42px to 44px, the largest it
   can go without growing the header. The .btn-order pill (padding: 11px
   22px + ~22.7px line-height) is the tallest element in .nav-wrap at
   ~44.7px; the logo was the only thing not already at that ceiling, so this
   is the biggest increase possible before the wordmark itself becomes the
   tallest child and pushes .nav-wrap (and the whole sticky header) taller. */
.brand-wordmark-footer{
  height: 52px;
}
/* Royalty: bumped 2026-08-22 — footer has no competing fixed-height
   neighbors forcing a ceiling like the header does, so sized up more
   generously, from 34px to 52px, for real presence in the footer brand
   column. */

/* ============ SCALLOP DIVIDER (signature element) ============
   Repeating piped-icing scallop, used between every major section */
/* Royalty: fixed 2026-08-22 — old shared path used quadratic curves that
   only dipped to half the strip's height and pinched to sharp points where
   scallops met, so it read as separate hanging flags with gaps, and the
   bumps looked like they grew UP out of the lower section instead of
   dripping down from the upper one. Replaced with 5 full-depth semicircle
   arcs (radius 20) that reach the full height and meet smoothly, so it
   reads as one continuous rounded icing-drip trim, flush top and bottom. */
/* Royalty: fixed 2026-08-22 — previous version stretched a fixed 5-arc SVG
   path (viewBox 0 0 200 20) across the full page width using
   preserveAspectRatio="none". At real page widths (1400-1900px+) that
   distorts each ~40-unit-wide dome into a sliver 10-15x wider than tall,
   so the smooth semicircle drips read as thin flat spikes instead of
   rounded scallops. Switched to a small fixed-size (40x20) tile repeated
   with background-repeat-x, so every dome renders at the same true
   proportions (radius 20 = height 20) no matter how wide the section is.
   The inline <svg> markup in each page is now hidden and can be removed
   from markup later; kept harmless here via display:none for a clean
   drop-in fix without touching every HTML file's structure. */
.scallop{
  width: 100%;
  height: 22px;
  display: block;
  line-height: 0;
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 40px 22px;
}
.scallop svg{ display:none; }
/* Royalty: fixed 2026-08-22 — each .scallop-{color} class is named for the
   section it sits above in the markup (e.g. scallop-white always precedes
   section-white), but the icing drip should show the color of the section
   it's hanging FROM (above), not the one it's dripping INTO (below). Verified
   the above/below pairing is identical across all 15 pages: scallop-white is
   always preceded by cream, scallop-cream and scallop-pink are always
   preceded by white. So the fill values below are intentionally the OPPOSITE
   of what the class name would suggest at a glance — .scallop-white fills
   with cream, since cream is always what's actually above it, and so on. */
/* Royalty: fixed 2026-08-22 — .scallop-white and .scallop-cream fill colors
   (cream #FFF8EF / white #FFFFFF) sit against adjacent sections only ~7/255
   RGB units apart (cream hero -> cream dome -> white section, etc.), so the
   dome shape rendered correctly all along but was nearly invisible on
   screen. Added a thin low-opacity gold stroke (matches --gold, used for
   accents elsewhere) to each dome purely for edge definition — fill colors
   are unchanged so the intended "same color as the section above" look is
   preserved, the stroke just makes the scalloped edge legible regardless
   of how close two adjacent section colors are. */
/* Royalty: fixed 2026-08-22 — background-size was 44px wide against a 40-unit
   viewBox, stretching each dome ~10% horizontally. Narrowed to 40px to match
   exactly; height stays 22px (vs the 20-unit viewBox) so the tile still
   fully covers the strip's 22px height with no gap at the bottom. */
/* Royalty: fixed 2026-08-22 — two follow-up issues from the stroke above:
   1) Stroking the closed dome path (fill+stroke on one <path> with "Z")
      outlined the flat top edge too, drawing a hard gold seam exactly where
      the strip meets the section above — the opposite of the intended
      seamless merge. Split each dome into a fill-only <path> (no stroke)
      plus a second, stroke-only <path> tracing just the arc (no "Z", so no
      closing line) — the gold line now only follows the curved bottom edge.
   2) The negative-space gaps between domes were showing whatever sits
      behind the .scallop element (page/body background) rather than the
      color of the section the strip actually drips INTO. Added an explicit
      background-color equal to that section's color on each variant, so the
      gaps are always correct regardless of page background. */
.scallop-pink{
  background-color: var(--pink-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23FFFFFF'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}
.scallop-cream{
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23FFFFFF'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}
.scallop-white{
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23FFF8EF'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}

/* Royalty: added 2026-08-22 — the three classes above only ever cover
   (white above / cream below), (white above / pink below), and (cream above
   / white below), because that's the only set of transitions the original
   15 pages used. Adding scallops to newer transitions the site didn't have
   before — cream directly above pink (gallery pages, after "Other
   Galleries"), and pink directly above white (Venue, after the Wedding
   Packages section) — needs its own fill/background pairing rather than
   reusing one of the three above, or the scallop's background-color won't
   match the section actually above or below it and creates the same
   visible-seam bug as the hero/scallop gradient mismatch fixed earlier. */
.scallop-pink-from-cream{
  background-color: var(--pink-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23FFF8EF'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}
.scallop-white-from-pink{
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23F7D9E2'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}


/* Royalty: added 2026-08-22 — footer (var(--plum)) sits below the last section
   on every page, but no scallop existed for that transition anywhere on the
   site (only white/cream/pink-to-section transitions had one). Same pattern
   as the others: named for what's below (footer), filled with the color of
   whatever section sits above it on a given page (only white or pink ever
   directly precede the footer across the site). */
.scallop-footer-white{
  background-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23FFFFFF'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}
.scallop-footer-pink{
  background-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0 Z' fill='%23F7D9E2'/%3E%3Cpath d='M0,0 A20,20 0 0 0 40,0' fill='none' stroke='rgba(198,149,44,0.35)' stroke-width='0.6'/%3E%3C/svg%3E");
}

/* ============ TOP ANNOUNCEMENT BAR ============ */
.announce{
  background: var(--plum);
  color: var(--cream-deep);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  font-weight: 500;
}
.announce strong{ color: var(--gold-light); font-weight: 600; }

/* ============ HEADER / NAV ============ */
header.site-header{
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 18px rgba(74,36,54,0.06);
}
.nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: 1180px;
  margin: 0 auto;
  gap: 20px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
nav.main-nav{
  display: flex;
  align-items: center;
  gap: 6px;
}
nav.main-nav ul{
  display: flex;
  align-items: center;
  gap: 6px;
}
nav.main-nav > ul > li{ position: relative; }
nav.main-nav a.nav-link{
  display: inline-block;
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--plum-soft);
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
  white-space: nowrap;
}
nav.main-nav a.nav-link:hover,
nav.main-nav li.active > a.nav-link{
  color: var(--pink-deep-a11y);
  background: var(--pink-soft);
}
/* The Order Now button keeps its own solid pink/white styling even when its
   li is marked .active (i.e. on the Order page itself) — without this, the
   li.active rule above overrides the button's background with the much
   lighter --pink-soft, making it look washed out / "losing color". */
nav.main-nav a.nav-link:hover.btn-order,
nav.main-nav li.active > a.btn-order{
  background: var(--pink-deep);
  color: var(--white) !important;
}
/* Give the Order Now button visual separation from the plain nav links
   instead of sitting flush against Contact. */
nav.main-nav > ul > li:has(> .btn-order){ margin-left: 12px; }
.dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .18s ease;
}
li:hover > .dropdown, li:focus-within > .dropdown{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a{
  display: block;
  padding: 9px 14px;
  font-size: 0.85rem;
  border-radius: 8px;
  color: var(--plum-soft);
}
.dropdown a:hover{ background: var(--pink-soft); color: var(--pink-deep-a11y); }

.btn-order{
  /* Was a pink->pink-deep gradient; the lighter --pink end only cleared
     ~3.25:1 against white text (needs 4.5:1). Solid pink-deep clears ~4.9:1. */
  background: var(--pink-deep);
  color: var(--white) !important;
  padding: 11px 22px !important;
  border-radius: 999px;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(228,99,140,0.35);
}
.btn-order:hover{
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-deep) 100%) !important;
  color: var(--white) !important;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--plum);
  margin: 5px 0;
  border-radius: 2px;
}

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  /* Was a pink->pink-deep gradient; see .btn-order note above. */
  background: var(--pink-deep);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(74,36,54,0.22);
}
.btn-primary:hover{ box-shadow: 0 6px 16px rgba(74,36,54,0.28); }
.btn-outline{
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold-deep);
}
.btn-outline:hover{ background: var(--gold); color: var(--white); }

/* ============ HERO ============ */
.hero{
  position: relative;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(228,99,140,0.16), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(198,149,44,0.18), transparent 55%),
    var(--cream);
  overflow: hidden;
  padding: 88px 0 60px;
}
/* Royalty: fixed 2026-08-22 — the radial gradients above are still faintly
   tinted at the very bottom edge of the hero (they only reach fully
   "transparent" at 55% of the ellipse, and the gold gradient is centered at
   85%/80%, right near that bottom edge). The .scallop strip directly below
   is 100% flat --cream with no gradient, so two almost-but-not-quite-equal
   colors met at a hard boundary and read as a visible seam/line. This fades
   the last 40px of the hero to pure flat cream so the gradient has fully
   resolved to --cream by the time the scallop begins, matching exactly. */
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  pointer-events: none;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
}
.hero-crown{
  width: 62px; height: 62px;
  margin-bottom: 18px;
}
.hero-crown path{ fill: var(--gold); }
.hero h1{
  font-size: clamp(2.6rem, 5vw, 4rem);
  margin-bottom: 0.3em;
}
.hero h1 em{
  font-style: normal;
  font-family: var(--font-script);
  color: var(--pink-deep);
  font-size: 1.15em;
  display: block;
}
.hero-sub{
  font-size: 1.12rem;
  color: var(--plum-soft);
  max-width: 480px;
  margin-bottom: 30px;
}
.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-art{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--pink-soft), var(--cream-deep) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.hero-art .cake-badge{
  position: absolute;
  bottom: 22px; left: 22px;
  background: var(--white);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 240px;
}
.cake-badge .dot{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  flex-shrink: 0;
}
.cake-badge strong{ display:block; font-size: 0.85rem; color: var(--plum); }
.cake-badge span{ font-size: 0.75rem; color: var(--plum-soft); }

/* decorative cake illustration */
.cake-illustration{ width: 78%; height: auto; }

/* ============ SECTION SHELLS ============ */
section{ padding: 84px 0; }
.section-cream{ background: var(--cream); }
.section-white{ background: var(--white); }
.section-pink{ background: var(--pink-soft); }

.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.section-head h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-top: 12px;
}
.section-head p{ color: var(--plum-soft); font-size: 1.02rem; }
.section-head.left{ text-align: left; margin: 0 0 40px; }

/* ============ SERVICES GRID ============ */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.services-grid-3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px){
  .services-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .services-grid-3{ grid-template-columns: 1fr; }
}
.service-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--gold);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.service-card h3{ font-size: 1.12rem; margin-bottom: 8px; }
.service-card p{ font-size: 0.92rem; color: var(--plum-soft); margin: 0; }

/* Cards that are also links (gallery preview + services grid) */
.service-card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.service-card-link:hover{ border-top-color: var(--pink-deep); }
.service-card-link:hover h3{ color: var(--pink-deep); }
.service-card-link h3{ transition: color .2s ease; }
.service-card-img{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(198,149,44,0.07) 0 2px, transparent 2px 20px),
    linear-gradient(135deg, var(--cream), #FCEEF2);
  color: var(--gold-deep);
}
.service-card-img svg{ opacity: 0.85; }

/* ============ VENUE BANNER ============ */
.venue-banner{
  background:
    linear-gradient(135deg, rgba(74,36,54,0.88), rgba(74,36,54,0.78)),
    repeating-linear-gradient(45deg, rgba(198,149,44,0.12) 0 2px, transparent 2px 22px);
  border-radius: 20px;
  color: var(--cream);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.venue-banner::before{
  content:"";
  position: absolute; inset: 10px;
  border: 1px solid rgba(228,190,108,0.35);
  border-radius: 20px;
  pointer-events: none;
}
.venue-banner h2{ color: var(--white); }
.venue-banner p{ color: #E8D9DF; margin-bottom: 22px; }
.venue-banner .hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }
.btn svg{ flex-shrink: 0; }

.venue-stats{
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.venue-stat{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 14px;
  position: relative;
}
.venue-stat + .venue-stat::before{
  content: "";
  position: absolute;
  left: -4px; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(228,190,108,0.28);
}
.venue-stat-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(228,190,108,0.14);
  color: var(--gold-light);
}
.venue-stat strong{
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.15rem;
  line-height: 1;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.venue-stat-unit{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-left: 3px;
  color: var(--gold-light);
}
.venue-stat-label{
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: #D9C3CB;
  text-transform: uppercase;
  line-height: 1.3;
}

@media (max-width: 560px){
  .venue-stats{ flex-wrap: wrap; justify-content: center; row-gap: 22px; }
  .venue-stat{ flex: 0 0 45%; padding: 4px 10px; }
  .venue-stat + .venue-stat::before{ display: none; }
}

/* ============ CTA BAND ============ */
.cta-band{
  /* Was a pink-deep->pink gradient; text sitting over the lighter --pink end
     fell as low as ~2.8:1 against #FDE7ED and ~3.25:1 against white (both
     fail 4.5:1 for regular text). Solid pink-deep keeps contrast consistent
     everywhere in the band. */
  background: var(--pink-deep);
  border-radius: 20px;
  padding: 52px 40px;
  text-align: center;
  color: var(--white);
}
.cta-band h2{ color: var(--white); }
.cta-band p{ color: var(--cream); max-width: 520px; margin: 0 auto 26px; }
.cta-band .btn-primary{
  background: var(--white);
  color: var(--pink-deep);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.cta-band .btn-primary:hover{ background: var(--cream); }

/* ============ QUOTE BLOCK ============ */
.quote-block{
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
  position: relative;
  border-left: 5px solid var(--gold);
}
.quote-block p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--plum);
  margin: 0;
  line-height: 1.5;
}
.quote-block .mark{
  font-family: var(--font-script);
  font-size: 3rem;
  color: var(--pink-soft);
  position: absolute;
  top: 8px; left: 20px;
  line-height: 1;
}

/* ============ ABOUT PAGE ============ */
.about-hero{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 54px;
  align-items: center;
}
.about-portrait{
  aspect-ratio: 3/4;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--pink), var(--pink-soft));
  box-shadow: var(--shadow-lift);
  display: flex; align-items:center; justify-content:center;
  position: relative;
}
.about-portrait .ring{
  position:absolute; inset: 18px;
  border: 2px dashed rgba(255,255,255,0.55);
  border-radius: 14px;
}
.about-copy p{ margin-bottom: 1.1em; color: var(--plum-soft); }
.about-copy p:first-of-type::first-letter{
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--gold-deep);
  float: left;
  line-height: 0.8;
  padding: 6px 8px 0 0;
}

.timeline{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.timeline-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.timeline-card .yr{
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--pink-deep);
  margin-bottom: 6px;
}
.timeline-card p{ font-size: 0.88rem; color: var(--plum-soft); margin: 0; }

/* ============ VENUE PAGE ============ */
.two-col-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.room-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.room-card{
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--cream-deep);
}
.room-card .room-top{
  height: 130px;
  /* Was pink-soft->pink; white text over the pink-soft end measured ~1.5:1
     contrast (need 3:1 even at this large size). Solid pink-deep clears
     ~4.9:1 everywhere in the band. */
  background: var(--pink-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.room-card .room-body{ padding: 22px; }
.room-card h3{ font-size: 1.15rem; margin-bottom: 6px; }
.room-card .cap{
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  background: var(--cream-deep);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.room-card p{ font-size: 0.88rem; color: var(--plum-soft); margin: 0; }

.rental-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.rental-table th{
  background: var(--plum);
  color: var(--cream);
  text-align: left;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.rental-table td{
  padding: 14px 20px;
  border-bottom: 1px solid var(--cream-deep);
  font-size: 0.92rem;
}
.rental-table tr:last-child td{ border-bottom: none; }
.rental-table tr:nth-child(even) td{ background: var(--cream); }
.price-cell{ font-weight: 700; color: var(--price); }

/* Pricing photo grids (cakes: 4 columns, treats: 3 columns) */
.pricing-grid{
  display: grid;
  gap: 24px;
  margin-bottom: 8px;
}
.pricing-grid-4{ grid-template-columns: repeat(4, 1fr); }
.pricing-grid-3{ grid-template-columns: repeat(3, 1fr); }
.pricing-grid-card{
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--cream-deep);
  text-align: center;
  padding-bottom: 18px;
}
.pricing-grid-img{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  overflow: hidden;
}
.pricing-grid-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pricing-grid-card h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--plum);
  margin: 14px 16px 4px;
}
.pricing-grid-price{ font-weight: 700; color: var(--price); font-size: 0.98rem; }
.pricing-grid-card p{ font-size: 0.8rem; color: var(--plum-soft); margin: 4px 16px 0; }
@media (max-width: 760px){
  .pricing-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .pricing-grid-4, .pricing-grid-3{ grid-template-columns: 1fr; }
}

.package-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--cream-deep);
  position: relative;
}
.package-card::before{
  content: "";
  position: absolute;
  top: 0; left: 34px; right: 34px;
  height: 3px;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  border-radius: 0 0 6px 6px;
}
.package-card .price-tag{
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--price);
  margin: 6px 0 14px;
}
.package-card .price-tag small{ font-size: 0.9rem; color: var(--plum-soft); font-family: var(--font-body); }
.package-card ul{ margin-top: 16px; }
.package-card li{
  font-size: 0.92rem;
  color: var(--plum-soft);
  padding: 7px 0 7px 26px;
  position: relative;
  border-bottom: 1px dashed var(--cream-deep);
}
.package-card li:last-child{ border-bottom: none; }
.package-card li::before{
  content: "\2022";
  position: absolute;
  left: 0; top: 7px;
  color: var(--gold);
  font-size: 0.8rem;
}

/* ============ PACKAGES PAGE ============ */
.packages-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.packages-subhead{
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--pink-deep);
  margin: 0 0 22px;
}
.packages-subhead:not(:first-of-type){ margin-top: 12px; }
.package-card .note{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--cream-deep);
  font-size: 0.85rem;
  color: var(--plum-soft);
}

/* ============ PRICING TABS ============ */
.pricing-tabs{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 44px;
}
.pricing-tabs a{
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  border: 2px solid var(--gold);
  color: var(--gold-deep);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pricing-tabs a:hover{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }
.pricing-tabs a.active{
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(147,105,28,0.32);
}
.table-note{
  font-size: 0.86rem;
  color: var(--plum-soft);
  margin-top: 14px;
}
.table-block{ margin-bottom: 46px; }
.table-block:last-child{ margin-bottom: 0; }

/* ============ GALLERY — CATEGORY CARDS (main gallery page) ============ */
.gallery-cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.gallery-cat-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/3;
  display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-cat-card:hover, .gallery-cat-card:focus-visible{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.gallery-cat-card img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-cat-card .cat-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(74,36,54,0.82) 0%, rgba(74,36,54,0.05) 55%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.gallery-cat-card h3{
  color: var(--white);
  margin: 0;
  font-size: 1.3rem;
}
.gallery-cat-card .count{
  display: block;
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============ GALLERY — MASONRY GRID (subgallery pages) ============ */
.masonry-grid{
  column-count: 1;
  column-gap: 18px;
}
@media (min-width: 560px){ .masonry-grid{ column-count: 2; } }
@media (min-width: 860px){ .masonry-grid{ column-count: 3; } }
@media (min-width: 1180px){ .masonry-grid{ column-count: 4; } }

.masonry-item{
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--white);
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.masonry-item:hover, .masonry-item:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.masonry-item img{
  width: 100%;
  height: auto;
  display: block;
}

.gallery-empty{
  text-align: center;
  padding: 60px 24px;
  color: var(--plum-soft);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(30, 14, 21, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.lightbox.open{ display: flex; }
.lightbox-figure{
  max-width: min(900px, 92vw);
  max-height: 86vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-figure img{
  max-width: 100%;
  max-height: 74vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-figure figcaption{
  color: var(--cream);
  font-size: 0.9rem;
  margin-top: 14px;
  text-align: center;
  max-width: 640px;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--white);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,0.24); }
.lightbox-close{ top: 20px; right: 20px; }
.lightbox-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter{
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #D9C3CB;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
@media (max-width: 640px){
  .lightbox-prev{ left: 8px; width: 44px; height: 44px; }
  .lightbox-next{ right: 8px; width: 44px; height: 44px; }
  .lightbox-close{ top: 10px; right: 10px; width: 44px; height: 44px; }
}

/* ============ POLICIES PAGE ============ */
.policy-notice{
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  border-radius: 16px;
  padding: 20px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.policy-notice strong{ color: var(--pink-deep-a11y); }
.policy-notice p{ margin: 4px 0 0; font-size: 0.92rem; color: var(--plum); }
.policy-notice.packages-note{
  background: var(--cream);
  border-color: var(--gold-light);
  margin-top: 40px;
  margin-bottom: 0;
}
.policy-notice.packages-note strong{ color: var(--gold-deep); }
.policy-notice.packages-note p + p{ margin-top: 2px; }

.policy-accordion{ display: flex; flex-direction: column; gap: 14px; }
.policy-item{
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  border: 1px solid var(--cream-deep);
}
.policy-item summary{
  cursor: pointer;
  padding: 20px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.policy-item summary::-webkit-details-marker{ display: none; }
.policy-item summary::after{
  content: "+";
  font-size: 1.4rem;
  color: var(--gold);
  font-family: var(--font-body);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: 14px;
}
.policy-item[open] summary::after{ transform: rotate(45deg); }
.policy-item .policy-body{
  padding: 0 26px 24px;
  color: var(--plum-soft);
  font-size: 0.94rem;
}
.policy-item .policy-body ul{ margin: 10px 0; padding-left: 4px; }
.policy-item .policy-body li{
  padding: 6px 0 6px 22px;
  position: relative;
}
.policy-item .policy-body li::before{
  content: "•";
  color: var(--pink-deep);
  position: absolute;
  left: 4px;
}
.policy-item .policy-body p{ margin: 0 0 10px; }
.pay-methods{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
  gap: 10px;
  margin-top: 12px;
}
.pay-methods div{
  background: var(--cream);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.86rem;
}
.pay-methods strong{ display:block; color: var(--plum); font-size: 0.86rem; }
.pay-methods span{ color: var(--plum-soft); font-size: 0.82rem; }

/* ============ CONTACT PAGE ============ */
.contact-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
}
.contact-info-card{
  background: var(--plum);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 36px 30px;
  box-shadow: var(--shadow-lift);
}
.contact-info-card h3{ color: var(--gold-light); font-size: 1.2rem; }
.contact-info-card p{ color: #E5D3D9; font-size: 0.92rem; }
.contact-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(228,190,108,0.2);
}
.contact-row:last-child{ border-bottom: none; }
.contact-row .ico{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(228,190,108,0.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold-light);
  font-size: 1rem;
}
.contact-row strong{ display: block; font-size: 0.92rem; color: var(--cream); }
.contact-row span, .contact-row a{ font-size: 0.86rem; color: #D9C3CB; }
.contact-row a:hover{ color: var(--gold-light); }

.form-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 38px;
  box-shadow: var(--shadow-soft);
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field{ margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.02em;
}
.field input, .field textarea, .field select{
  border: 1.5px solid var(--cream-deep);
  background: var(--cream);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--plum);
  transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--gold);
  background: var(--white);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field .hint{ font-size: 0.76rem; color: var(--plum-soft); }
.form-msg{
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  display: none;
}
.form-msg.show{ display: block; }
.form-msg.success{ background: #E5F3E4; color: #2C6B2F; }
.form-msg.error{ background: #FBE3E3; color: #A3312F; }

/* ============ Order Form ============ */
.order-layout{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.order-step{
  display: none;
  border: none;
  border-top: none;
  padding: 0 0 32px;
  margin: 0;
  animation: order-step-in .28s ease;
}
.order-step.active{ display: block; }
@keyframes order-step-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .order-step{ animation: none; } }
.order-step:first-of-type{ padding-top: 0; border-top: none; }

/* ---- Step progress bar ---- */
.order-progress{
  position: sticky;
  top: 78px;
  z-index: 20;
  background: var(--white);
  padding: 14px 0 18px;
  margin-bottom: 12px;
}
.order-progress-track{
  height: 4px;
  border-radius: 2px;
  background: var(--cream-deep);
  overflow: hidden;
  margin-bottom: 14px;
}
.order-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--pink-deep);
  border-radius: 2px;
  transition: width .3s ease;
}
.order-progress-list{
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.order-progress-list li{ flex: 1; display: flex; }
.progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  width: 100%;
  font-family: var(--font-body);
  color: var(--plum-soft);
}
.progress-step:disabled{ cursor: default; }
.progress-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--cream-deep);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--plum-soft);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.progress-dot-check{ display: none; }
.progress-step.is-done .progress-dot-num{ display: none; }
.progress-step.is-done .progress-dot-check{ display: block; }
.progress-label{
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.progress-step.is-current .progress-dot{
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--white);
}
.progress-step.is-current .progress-label{ color: var(--pink-deep); }
.progress-step.is-done .progress-dot{
  background: var(--pink-soft);
  border-color: var(--pink-deep);
  color: var(--pink-deep-a11y);
}
.progress-step.is-done{ cursor: pointer; }

@media (max-width: 640px){
  .order-progress{ top: 64px; padding: 10px 0 14px; }
  .progress-label{ display: none; }
  .progress-dot{ width: 22px; height: 22px; font-size: 0.72rem; }
}

/* ---- Step nav buttons ---- */
.order-step-nav{
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.order-step-nav .btn{ flex: 1; justify-content: center; }
.step-btn-back{ display: none; }
.step-btn-back:only-child{ flex: none; }

@media (max-width: 900px){
  .order-step-nav{
    position: sticky;
    bottom: 0;
    background: var(--white);
    padding: 12px 0;
    margin: 0 calc(var(--container-pad) * -1) calc(var(--container-pad) * -1);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    border-top: 1px solid var(--cream-deep);
    box-shadow: 0 -6px 16px rgba(0,0,0,0.06);
    z-index: 15;
  }
}
.order-step legend{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--plum);
  padding: 0;
  margin-bottom: 20px;
  width: 100%;
}
.step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pink-soft);
  color: var(--pink-deep-a11y);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.step-intro{ font-size: 0.88rem; color: var(--plum-soft); margin: 0 0 18px; }

.radio-label-heading{
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 8px;
}
.radio-pair, .payment-options{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.radio-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--cream-deep);
  background: var(--cream);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--plum);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.radio-chip:has(input:checked){
  border-color: var(--pink-deep);
  background: var(--pink-soft);
  color: var(--pink-deep-a11y);
  font-weight: 600;
}
.radio-chip input{ accent-color: var(--pink-deep); }
.chip-icon{ flex-shrink: 0; color: var(--plum-soft); transition: color .2s ease; }
.radio-chip:has(input:checked) .chip-icon{ color: var(--pink-deep); }

.delivery-fields{ margin-top: 18px; }

.treat-grid{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.treat-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--cream-deep);
}
.treat-row-info{ display: flex; flex-direction: column; gap: 2px; }
.treat-row-name{ font-weight: 600; font-size: 0.92rem; color: var(--plum); }
.treat-row-note{ font-size: 0.78rem; color: var(--plum-soft); }
.treat-row-qty{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.treat-row-qty input{
  width: 68px;
  border: 1.5px solid var(--cream-deep);
  background: var(--cream);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--plum);
  text-align: center;
}
.treat-row-qty input:focus{ border-color: var(--gold); outline: none; background: var(--white); }
.treat-row-qty span{ font-size: 0.8rem; color: var(--plum-soft); }

.treat-row-controls{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.treat-qty-chips{ display: flex; gap: 6px; }
.treat-qty-chip{
  border: 1.5px solid var(--cream-deep);
  background: var(--cream);
  color: var(--plum);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.treat-qty-chip:hover, .treat-qty-chip:focus-visible{ background: var(--pink-soft); border-color: var(--pink-deep); outline: none; }

/* Treat category accordions reuse the .policy-item look but nest inside
   a form step rather than the standalone Policies page, so give them a
   touch less side padding and no page-level top margin. */
.treat-category{ margin-bottom: 12px; }
.treat-category summary{ padding: 16px 20px; font-size: 0.98rem; }
.treat-category .policy-body{ padding: 0 20px 18px; }
.treat-category .treat-grid{ margin-top: 4px; }

.checkbox-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--plum);
  cursor: pointer;
  margin-top: 8px;
}
.checkbox-row input{ margin-top: 3px; accent-color: var(--pink-deep); flex-shrink: 0; }
.checkbox-row.is-disabled{ opacity: 0.5; cursor: not-allowed; }
.checkbox-row.is-disabled input{ cursor: not-allowed; }

/* ============ ORDER FORM: PACKAGE PICKER ============ */
.package-picker-group{ margin-top: 26px; }
.package-picker-group:first-of-type{ margin-top: 22px; }
.package-picker-groupname{
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--pink-deep);
  margin: 0 0 12px;
}
.package-options{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.package-option{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--cream-deep);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.package-option:hover{ border-color: var(--pink); }
.package-option.is-selected{
  border-color: var(--pink-deep);
  background: var(--pink-soft);
  box-shadow: 0 0 0 1px var(--pink-deep);
}
.package-option input[type="radio"]{
  margin-top: 3px;
  accent-color: var(--pink-deep);
  flex-shrink: 0;
}
.package-option-body{ display: flex; flex-direction: column; gap: 4px; }
.package-option-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.package-option-name{ font-weight: 700; font-size: 0.94rem; color: var(--plum); }
.package-option-name small{ font-weight: 500; color: var(--plum-soft); font-size: 0.82em; }
.package-option-price{ font-family: var(--font-display); font-size: 1.05rem; color: var(--price); flex-shrink: 0; white-space: nowrap; }
.package-option-price small{ font-size: 0.7rem; color: var(--plum-soft); font-family: var(--font-body); }
.package-option-desc{ font-size: 0.8rem; color: var(--plum-soft); line-height: 1.45; }
.package-option-none{
  border-style: dashed;
  margin-bottom: 22px;
  max-width: 420px;
}
.package-option-none .package-option-name{ font-size: 0.94rem; }
.package-option-none .package-option-desc{ font-size: 0.82rem; }

.policy-summary{
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--plum-soft);
  line-height: 1.7;
}
.policy-summary li{ margin-bottom: 6px; }

.order-summary{
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 12px;
  padding: 24px;
  position: sticky;
  top: 108px;
}
.order-summary h3{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--plum);
  margin: 0 0 14px;
}
.order-summary-toggle{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--plum);
  cursor: pointer;
}
.order-summary-toggle-total{
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--pink-deep);
  margin-right: auto;
  margin-left: 10px;
}
.order-summary-caret{ transition: transform .2s ease; flex-shrink: 0; }
.order-summary-toggle[aria-expanded="true"] .order-summary-caret{ transform: rotate(180deg); }
.order-summary-lines{ min-height: 24px; margin-bottom: 14px; }
.order-summary-empty{ font-size: 0.82rem; color: var(--plum-soft); margin: 0; }
.order-summary-line{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--plum);
  padding: 6px 0;
  border-bottom: 1px solid var(--cream-deep);
}
.order-summary-totals{ border-top: 1.5px solid var(--gold-light); padding-top: 12px; }
.order-summary-totals .row{
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--plum-soft);
  padding: 4px 0;
}
.order-summary-totals .row.total{
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pink-deep);
  border-top: 1px solid var(--cream-deep);
  margin-top: 6px;
  padding-top: 10px;
}
.order-summary-note{
  font-size: 0.74rem;
  color: var(--plum-soft);
  margin: 14px 0 0;
}

@media (max-width: 900px){
  .order-layout{ grid-template-columns: 1fr; }
  .order-summary{ position: static; order: -1; padding: 16px 20px; }
  .order-summary h3{ display: none; }
  .order-summary-toggle{ display: flex; }
  .order-summary-body{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease;
  }
  .order-summary.expanded .order-summary-body{
    max-height: 600px;
    opacity: 1;
    margin-top: 16px;
  }
}

/* ============ FOOTER ============ */
footer.site-footer{
  background: var(--plum);
  color: #D9C3CB;
  padding: 60px 0 26px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid p{ font-size: 0.88rem; line-height: 1.7; }
.footer-col h4{
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col li{ margin-bottom: 10px; font-size: 0.88rem; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-social{ display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.footer-social a{ font-size: 0.85rem; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer-social a:hover{ color: var(--gold-light); }
.live-status{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  font-weight: 600;
}
.live-status .status-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status-closed);
  flex-shrink: 0;
}
.live-status.is-open .status-dot{ background: var(--status-open); }
.live-status.is-open [data-status-text]{ color: var(--status-open); }
.live-status.is-closed [data-status-text]{ color: var(--status-closed); }
.contact-row .live-status{ margin-top: 4px; margin-right: 0; font-size: 0.8rem; }
.footer-bottom{
  border-top: 1px solid rgba(228,190,108,0.18);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: #B899A3;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-grid, .about-hero, .contact-grid, .venue-banner, .two-col-grid{ grid-template-columns: 1fr; }
  .about-hero{ text-align: left; }
  .about-portrait{ max-width: 340px; }
  .room-grid, .timeline{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  nav.main-nav{ display: none; }
  .nav-toggle{ display: flex; }
  nav.main-nav.open{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 10px 20px 20px;
    box-shadow: var(--shadow-soft);
  }
  nav.main-nav.open ul{ flex-direction: column; align-items: stretch; width: 100%; }
  nav.main-nav.open .dropdown{
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding-left: 14px; display: none;
  }
  nav.main-nav.open li.dd-open .dropdown{ display: block; }
  .hero{ padding: 60px 0 40px; }
  .room-grid, .timeline, .form-grid, .two-col-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  section{ padding: 56px 0; }
  .venue-banner, .cta-band{ padding: 34px 24px; }
}