/* =========================================================
   WEDDING EVENTS PLANNER — Homepage
   Strict 4-color system: Black #0B0A08 · Gold #D4AF37 · White #FFFFFF · Ivory #F6F1E7
   ========================================================= */

:root{
  --black:#0B0A08;
  --gold:#D4AF37;
  --white:#FFFFFF;
  --ivory:#F6F1E7;
  --gold-soft: rgba(212,175,55,.35);

  --font-display:'Cormorant Garamond', serif;
  --font-wordmark:'Manrope', sans-serif; /* Italiana removed per direct request — was used for small uppercase/tracked-out labels (eyebrow, mega-menu headers, footer column titles) */
  --font-body:'Manrope', sans-serif;

  --section-pad: 8rem;
  --container-pad: 1.5rem;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:auto;
  overflow-x:hidden;
  /* IMPORTANT: this (not just body's) is what actually prevents horizontal
     scroll caused by off-screen `position:fixed` elements — like the mobile
     drawer, which sits at `right:0` and is pushed fully past the viewport
     edge via `transform:translateX(100%)` while closed. Fixed elements are
     positioned relative to the root element's containing block, not
     body's, so body-only overflow-x:hidden doesn't reliably suppress the
     scrollable area they create when translated off-screen. */
  width:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  width:100%;
  -webkit-font-smoothing:antialiased;
  /* Defensive, inherited by every element: guarantees text always wraps
     within its container's width, even if a real font (Cormorant Garamond
     italic in particular, used for the pullquotes) renders wider per-word
     than whatever fallback font this gets tested with — this sandbox can't
     load Google Fonts at all (network-blocked), so I can't fully verify
     exact per-word widths the way a real browser with real internet access
     can. This is the standard, no-downside fix for that class of problem:
     it makes text overflow from a too-wide word structurally impossible,
     regardless of which font actually ends up rendering it. */
  overflow-wrap:break-word;
  word-break:break-word;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.container{
  /* Bootstrap's own .container gutter is only ~12px each side by default —
     enough margin-for-error, especially once real (wider) fonts are
     involved, tends to be thin. Give it more generous, guaranteed breathing
     room ourselves rather than relying on Bootstrap's default alone. */
  padding-left:1.25rem !important;
  padding-right:1.25rem !important;
  /* IMPORTANT: width:100% must be guaranteed here ourselves. Bootstrap's
     own .container class normally sets this, but only once its CDN has
     actually loaded. .hero-grid also carries this "container" class and is
     a flex child of .wep-hero (display:flex) — a flex item without an
     explicit width shrinks to fit its own content instead of filling the
     row, which is exactly what happens if Bootstrap is ever slow/blocked/
     fails to load: the whole hero silently collapses to a narrow column.
     Same failure category as the earlier nav d-none/d-lg-flex bug — a
     critical layout property should never depend entirely on a 3rd-party
     CDN loading successfully. */
  width:100% !important;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.1; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Golden Thread scroll progress ---------- */
.golden-thread{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:rgba(11,10,8,.08); z-index:1090; pointer-events:none;
}
.golden-thread span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--gold), #F2D98A);
  box-shadow:0 0 8px var(--gold-soft);
  will-change:transform;
}

/* ---------- Nav (glass morphism, always on) ---------- */
.wep-nav{
  position:fixed; top:0; left:0; width:100%; z-index:1100;
  padding:1.1rem 0;
  transition:padding .4s ease;
  /* IMPORTANT: no `transform` here. The mobile drawer (.mobile-menu) and its
     backdrop are DOM descendants of this nav and use `position:fixed` to
     size themselves against the full viewport — but a `transform` on this
     ancestor would make IT the containing block for those fixed children
     instead of the viewport, squashing the drawer down into this ~90px-tall
     bar instead of sliding in full-height. That's exactly what was
     happening. If a GPU-layer hint is ever wanted here again, apply it to a
     new wrapper *inside* the nav that doesn't contain the drawer, not to
     .wep-nav itself. */
}
.wep-nav.scrolled{
  padding:.75rem 0;
}

/* Nav's own silhouette dips down around the logo, all the way to the
   logo's bottom edge — a real notch in the nav's own shape (not just a
   decorative line behind it). Built with a percentage-based clip-path
   polygon (many small segments approximating a smooth cosine curve) so it
   scales correctly with the nav's actual width at any viewport size. The
   div's own height (--nav-dip-depth) is set per breakpoint to match how
   far the logo badge extends below the nav at that size. */
.wep-nav-dip{
  position:absolute; top:0; left:0; width:100%;
  height:var(--nav-dip-depth, 112px);
  background:rgba(11,10,8,.4);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  clip-path:polygon(
    0% 0%, 100% 0%, 100% 54%, 70% 54%,
    70.0% 54.0%, 69.14% 54.58%, 68.29% 56.28%, 67.43% 59.02%,
    66.57% 62.66%, 65.71% 67.02%, 64.86% 71.88%, 64.0% 77.0%,
    63.14% 82.12%, 62.29% 86.98%, 61.43% 91.34%, 60.57% 94.98%,
    59.71% 97.72%, 58.86% 99.42%, 58.0% 100.0%, 42% 100%,
    42.0% 100.0%, 41.14% 99.42%, 40.29% 97.72%, 39.43% 94.98%,
    38.57% 91.34%, 37.71% 86.98%, 36.86% 82.12%, 36.0% 77.0%,
    35.14% 71.88%, 34.29% 67.02%, 33.43% 62.66%, 32.57% 59.02%,
    31.71% 56.28%, 30.86% 54.58%, 30.0% 54.0%, 0% 54%
  );
  z-index:0; pointer-events:none;
  transition:height .3s ease;
}
.wep-nav.scrolled .wep-nav-dip{ background:rgba(11,10,8,.7); }
.wep-nav-inner, .wep-logo-link{ position:relative; z-index:1; }

/* Nav layout: 4 links (left) — logo badge (true center, overflows below the
   nav edge) — 4 links + account + burger (right). The logo is absolutely
   positioned as a sibling of the row, independent of its height. */
.wep-nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.wep-logo-link{
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  z-index:1201; line-height:0;
}
.wep-logo-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.48) 0%, rgba(212,175,55,.12) 45%, rgba(212,175,55,0) 72%);
  animation:logoGlowPulse 3.2s ease-in-out infinite;
  z-index:-1;
}
.wep-logo-ring{
  position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(212,175,55,.5);
  animation:logoRingPulse 3.2s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes logoRingPulse{
  0%, 100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.06); }
}
@keyframes logoGlowPulse{
  0%, 100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
}
.wep-logo-badge{
  position:relative;
  display:block; width:104px; height:104px; border-radius:50%;
  overflow:hidden; background:var(--black);
  border:2px solid var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.55), 0 0 0 5px rgba(212,175,55,.08);
  transition:width .3s ease, height .3s ease;
}
.wep-nav.scrolled .wep-logo-badge{ width:80px; height:80px; }
.wep-nav.scrolled{ --nav-dip-depth:88px; }
.wep-logo-img{ width:100%; height:100%; object-fit:cover; }

.wep-logo{
  font-family:var(--font-wordmark); font-size:1.05rem; letter-spacing:.12em;
  color:var(--white); text-transform:uppercase;
}
.wep-logo span{ color:var(--gold); margin:0 .15em; }

.wep-nav-right{ display:flex; align-items:center; gap:1.2rem; }

.wep-nav-links{
  /* Authoritative visibility — does NOT depend on Bootstrap's d-none/
     d-lg-flex utility classes loading correctly from its CDN. If that CDN
     is ever slow/blocked/fails on a visitor's network, Bootstrap's classes
     silently do nothing, which would leave the full 9-link desktop nav
     trying to cram into a mobile-width row — exactly the kind of cramped,
     overlapping layout that's been reported. This rule is self-hosted
     (same file as the rest of the site's CSS) so it doesn't have that
     failure mode. */
  display:none;
  align-items:center; gap:1.4rem;
  position:relative; z-index:1;
}
@media (min-width:992px){
  .wep-nav-links{ display:flex; }
}
.nav-link, .mega-trigger{
  color:rgba(255,255,255,.85) !important; font-size:.86rem; letter-spacing:.03em;
  background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:.4rem;
  transition:color .25s ease; cursor:pointer; font-family:var(--font-body);
  position:relative;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold);
  transition:width .3s ease;
}
.nav-item{ position:relative; }
/* Single, unambiguous list of every state that should turn the text gold —
   consolidated here on purpose. There used to be a second, separate rule
   for .nav-item:hover .mega-trigger duplicating this, plus a leftover
   .mega-trigger i{font-size:.62rem} rule further down the file that
   silently overrode the icon-size rule below it (same specificity, later
   source order wins) — that's why icon-size changes never visibly took
   effect before. Both removed; everything for this element lives here now. */
.nav-link:hover, .nav-link.is-active, .nav-link:active, .nav-link:focus,
.mega-trigger:hover, .mega-trigger:active, .mega-trigger:focus,
.nav-item:hover .mega-trigger{
  color:var(--gold) !important;
}
.nav-link:hover::after, .nav-link.is-active::after{ width:100%; }

.nav-link > i, .mega-trigger > i{
  color:var(--gold); font-size:1.05em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
/* Only the trailing chevron is smaller and rotates open/closed — the
   leading category icon (diamond/palette/marker) must never rotate. The
   old rule here matched *every* <i> inside .mega-trigger indiscriminately,
   which was flipping the category icon upside-down on hover too. */
.mega-trigger > i:last-child{ font-size:.7em; transition:transform .3s ease; }
.mega-trigger:hover > i:last-child,
.nav-item:hover .mega-trigger > i:last-child{ transform:rotate(180deg); }

/* Mega menu panel */
.mega-menu{
  position:absolute; top:100%; left:0; transform:translateY(6px);
  padding-top:22px;
  width:640px; max-width:80vw;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  z-index:1101;
}
.mega-menu-panel{
  background:rgba(11,10,8,.88); backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(212,175,55,.22); border-radius:8px;
  padding:1.8rem; display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:1.8rem;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.nav-item:hover .mega-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega-col h5{
  font-family:var(--font-wordmark); font-weight:700; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.mega-col a{
  display:flex; align-items:center; gap:.6rem; color:rgba(246,241,231,.82); font-size:.86rem;
  padding:.45rem 0; transition:color .2s ease, padding-left .2s ease;
}
.mega-col a i{ color:var(--gold); width:16px; font-size:.8rem; }
.mega-col a:hover{ color:var(--gold); padding-left:.3rem; }
.mega-col-link{ color:var(--gold) !important; font-weight:600; margin-top:.3rem; }
.mega-feature{
  background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.18); border-radius:6px;
  padding:1rem; display:flex; flex-direction:column; overflow:hidden;
}
.mega-feature img{ border-radius:4px; aspect-ratio:4/3; object-fit:cover; margin-bottom:.8rem; }
.mega-feature .tier-tag{ margin-bottom:.4rem; font-size:.6rem; padding:.2rem .55rem; }
.mega-feature h6{ font-family:var(--font-display); font-size:1.1rem; color:var(--white); margin-bottom:.5rem; }
.mega-feature a{ color:var(--gold); font-size:.82rem; font-weight:600; }

/* ---------- Liquid / gooey nav-select effect ---------- */
/* A soft pill blob morphs (via the shared #goo-liquid SVG filter) to sit
   behind whichever nav item is hovered/focused — used for both the
   horizontal desktop nav and the vertical mobile drawer. The filter creates
   the "melting/liquid" edge as the blob resizes and moves between items. */
.liquid-nav{ position:relative; }
.liquid-goo-layer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter:url(#goo-liquid);
}
.liquid-blob{
  position:absolute; opacity:0;
  background:rgba(212,175,55,.22); border:1px solid rgba(212,175,55,.5);
  transition:top .5s cubic-bezier(.34,1.56,.64,1), left .5s cubic-bezier(.34,1.56,.64,1),
             width .5s cubic-bezier(.34,1.56,.64,1), height .5s cubic-bezier(.34,1.56,.64,1),
             opacity .25s ease;
}
.liquid-blob.is-visible{ opacity:1; }
.liquid-nav-h .liquid-blob{ top:0; border-radius:999px; }
.liquid-nav-v .liquid-blob{ left:0; border-radius:8px; }
.mobile-menu-items{ display:flex; flex-direction:column; }

/* ---------- Account dropdown ---------- */
.account-item{ position:relative; }
.account-trigger{ font-size:.86rem; }
.account-trigger i.fi-rr-user{ font-size:.9rem; color:var(--gold); }
.account-menu{
  width:230px; right:0; left:auto; padding-top:14px; transform:translateY(6px);
}
.account-menu-panel{
  background:rgba(11,10,8,.92); backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(212,175,55,.22); border-radius:8px;
  padding:.6rem; box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.nav-item:hover .account-menu, .account-item.open .account-menu{
  transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
}
.account-panel{ display:flex; flex-direction:column; }
.account-panel[hidden]{ display:none; }
.account-panel a{
  display:flex; align-items:center; gap:.6rem; color:rgba(246,241,231,.85);
  font-size:.85rem; padding:.6rem .7rem; border-radius:5px; transition:background .2s ease, color .2s ease;
}
.account-panel a:hover{ background:rgba(212,175,55,.1); color:var(--gold); }
.account-panel a i{ color:var(--gold); width:16px; text-align:center; }
.account-greeting{
  font-size:.72rem; letter-spacing:.05em; color:rgba(246,241,231,.55);
  padding:.4rem .7rem .2rem;
}
.account-greeting strong{ color:var(--gold); }

.wep-burger{
  /* Authoritative visibility, same reasoning as .wep-nav-links above —
     doesn't depend on Bootstrap's d-lg-none loading correctly. */
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--white);
  font-size:1.3rem; width:auto; height:auto; padding:.3rem; transition:color .25s ease;
}
@media (min-width:992px){
  .wep-burger{ display:none; }
}
.wep-burger:hover{ color:var(--gold); }

/* Mobile/tablet drawer menu — slides in from the right over a dimmed
   backdrop, rather than fading in full-screen. Active below 992px
   (wherever the burger button itself is shown). */
.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:1350;
  background:rgba(11,10,8,.6);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.mobile-menu-backdrop.open{ opacity:1; visibility:visible; }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:1400;
  width:min(86vw, 380px);
  background:rgba(11,10,8,.74);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-left:1px solid rgba(212,175,55,.25);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-inner{ padding:2rem 1.75rem 3rem; display:flex; flex-direction:column; position:relative; }
.mobile-menu-logo{ text-align:center; margin:0 auto 1.6rem; padding-top:.5rem; }
.mobile-menu-logo img{
  width:66px; height:66px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.14), 0 10px 24px rgba(0,0,0,.5);
}
.mobile-menu-close{
  position:absolute; top:1.5rem; right:1.5rem;
  width:auto; height:auto; background:none; border:none;
  color:var(--gold); font-size:1.4rem; transition:transform .25s ease, color .25s ease;
}
.mobile-menu-close:hover{ color:#F2D98A; transform:rotate(90deg); }

/* Staggered reveal — each item slides/fades in slightly after the last as
   the drawer opens, instead of all appearing at once (more "systematic"/
   deliberate feel matching the rest of the site's motion language). */
.mobile-link, .mobile-accordion-trigger{
  opacity:0; transform:translateX(26px);
  transition:opacity .4s ease, transform .4s ease;
}
.mobile-menu.open .mobile-link, .mobile-menu.open .mobile-accordion-trigger{
  opacity:1; transform:translateX(0);
}
.mobile-menu.open .mobile-menu-logo{ transition:opacity .4s ease .05s; }
.mobile-menu-inner > .mobile-link{ transition-delay:.08s; }
.mobile-menu-items > .mobile-accordion-trigger:nth-of-type(1),
.mobile-menu-items > .mobile-link:nth-of-type(1){ transition-delay:.14s; }
.mobile-menu-items > *:nth-child(3){ transition-delay:.2s; }
.mobile-menu-items > *:nth-child(5){ transition-delay:.26s; }
.mobile-menu-items > *:nth-child(7){ transition-delay:.32s; }
.mobile-menu-items > *:nth-child(8){ transition-delay:.36s; }
.mobile-menu-items > *:nth-child(9){ transition-delay:.4s; }
.mobile-menu-items > *:nth-child(10){ transition-delay:.44s; }
.mobile-menu-inner > .wep-btn{
  opacity:0; transform:translateY(16px);
  transition:opacity .4s ease .46s, transform .4s ease .46s;
}
.mobile-menu.open .mobile-menu-inner > .wep-btn{ opacity:1; transform:translateY(0); }
.mobile-link{
  color:var(--white); font-family:var(--font-display); font-size:1.4rem; padding:.9rem 0;
  border-bottom:1px solid rgba(212,175,55,.14);
  display:flex; align-items:center; gap:.7rem;
}
.mobile-link i{ color:var(--gold); font-size:1.05rem; width:22px; text-align:center; }
.mobile-accordion-trigger{
  background:none; border:none; color:var(--white); font-family:var(--font-display); font-size:1.4rem;
  text-align:left; padding:.9rem 0; border-bottom:1px solid rgba(212,175,55,.14);
  display:flex; justify-content:space-between; align-items:center; width:100%;
}
.mobile-accordion-trigger > span{ display:flex; align-items:center; gap:.7rem; }
.mobile-accordion-trigger > span i{ color:var(--gold); font-size:1.05rem; width:22px; text-align:center; }
.mobile-accordion-trigger > i{ font-size:.85rem; color:var(--gold); transition:transform .3s ease; }
.mobile-accordion-trigger.open > i{ transform:rotate(180deg); }
.mobile-accordion-panel{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  display:flex; flex-direction:column;
}
.mobile-accordion-panel a{
  color:rgba(246,241,231,.75); padding:.65rem 0 .65rem 1rem; font-size:.95rem;
  display:flex; align-items:center; gap:.6rem;
}
.mobile-accordion-panel a i{ color:var(--gold); font-size:.85em; width:16px; text-align:center; }

/* ---------- Buttons ---------- */
.wep-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 2.1rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:6px; border:1px solid #bc8b41; transition:color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  font-family:var(--font-body); font-weight:600;
  backdrop-filter:blur(8px) saturate(150%);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  box-shadow:rgb(0 0 0 / 21%) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.wep-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.wep-btn-sm{ padding:.55rem 1.3rem; font-size:.72rem; }

.wep-btn-gold{ background:rgba(188,139,65,.82); color:var(--black); }
.wep-btn-gold::before{ background:transparent; }
.wep-btn-gold:hover{ color:#bc8b41; box-shadow:0 8px 24px rgba(188,139,65,.25); transform:translateY(-2px); }
.wep-btn-gold:hover::before{ background:rgba(11,10,8,.9); transform:scaleX(1); }

.wep-btn-gold-outline{ background:rgba(188,139,65,.07); color:#bc8b41; }
.wep-btn-gold-outline::before{ background:rgba(188,139,65,.85); }
.wep-btn-gold-outline:hover{ color:var(--black); box-shadow:0 8px 24px rgba(188,139,65,.2); transform:translateY(-2px); }
.wep-btn-gold-outline:hover::before{ transform:scaleX(1); }

/* ---------- Layout helpers ---------- */
.wep-section{ padding:var(--section-pad) 0; position:relative; }
.bg-white{ background:var(--white); }
.bg-ivory{ background:var(--ivory); }
.bg-black{ background:var(--black); color:var(--ivory); }
.bg-black .section-copy{ color:rgba(246,241,231,.75); }

.eyebrow{
  font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  font-size:.78rem; color:var(--gold); margin-bottom:1.1rem;
}
.eyebrow-dark{ color:#604502; }

.section-title{
  font-size:clamp(2rem, 3.2vw, 2.9rem); margin-bottom:1.2rem; letter-spacing:.01em;
}
.section-title-light{ color:var(--white); }
.section-copy{ font-size:1.05rem; line-height:1.75; color:#3b382f; }
.section-copy-light{ color:rgba(246,241,231,.8); }

.wep-pullquote{
  font-family:var(--font-display); font-style:italic; font-size:1.4rem;
  border-left:2px solid var(--gold); padding-left:1.2rem; margin:1.6rem 0 0; color:var(--black);
}
.wep-pullquote::before{ content:'\201C'; color:var(--gold); font-style:normal; }
.wep-pullquote::after{ content:'\201D'; color:var(--gold); font-style:normal; }
/* Hero variant: lighter text for the dark background, smaller/tighter to
   match the hero's other left-column copy */
.hero-pullquote{
  color:rgba(246,241,231,.85); font-size:1.05rem; line-height:1.55;
  max-width:440px; margin:0 0 1.6rem;
}

.tier-tag{
  display:inline-block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); padding:.25rem .7rem; border-radius:20px; margin-bottom:.8rem;
  transition:background .4s ease, color .4s ease;
}
.service-card:hover .tier-tag{
  background:var(--gold); color:var(--black);
}

/* ---------- Reveal-on-scroll base state ---------- */
[data-reveal]{
  opacity:0; transform:translateY(36px);
  /* CRITICAL: an element at opacity:0 is still fully hit-testable by
     default — browsers only skip hit-testing for display:none,
     visibility:hidden, or pointer-events:none, NOT opacity. Without this,
     any not-yet-revealed element (or one that never reveals, e.g. if GSAP
     fails to load) sits in its pre-animation position — often overlapping
     adjacent content — and silently intercepts real clicks/hovers meant
     for whatever's actually visible there. */
  pointer-events:none;
}
.is-revealed{ pointer-events:auto; }

/* =========================================================
   HERO
   ========================================================= */
.wep-hero{
  min-height:100vh; display:flex; align-items:center;
  background:var(--black); color:var(--white); overflow:hidden; padding:9rem 0 4rem;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-bg-layer{
  position:absolute; inset:-5%; background-size:cover; background-position:center;
  filter:brightness(.34) saturate(1.05);
  opacity:0; transition:opacity 2.2s ease;
  animation:kenburns 22s ease-in-out infinite alternate;
}
.hero-bg-layer.active{ opacity:1; }
/* Pause the zoom while the page is actively being scrolled, so the
   background motion and the scroll motion never fight each other visually
   — resumes automatically once scrolling settles (see script.js). */
.wep-hero.is-scrolling .hero-bg-layer{ animation-play-state:paused; }
@keyframes kenburns{ from{ transform:scale(1) translate(0,0);} to{ transform:scale(1.12) translate(-1%,-1%);} }

#lanternCanvas{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; z-index:2; }
.hero-vignette{
  position:absolute; inset:0; z-index:3;
}

.hero-grid{
  /* Layout itself is now Bootstrap's row/col-lg-6 grid (see index.html) —
     this class only adds the stacking-context z-index needed to sit above
     the hero's absolutely-positioned background layers. Bootstrap's grid
     is what every other section on this page already uses successfully;
     the hero's previous custom CSS Grid was the one recurring source of
     responsive bugs, so it's been retired in favor of the proven pattern. */
  position:relative; z-index:4;
  /* Guaranteed, self-hosted fallback for display:flex and the mobile/tablet
     reorder below — Bootstrap's .row already sets display:flex and its
     order-* utility classes (on the HTML) already do this reordering, but
     both only work once Bootstrap's CDN has actually loaded. Same
     defensive reasoning as the earlier nav-visibility and container-width
     fixes: a property this visible shouldn't depend entirely on a 3rd-party
     CDN succeeding. */
  display:flex; flex-wrap:wrap;
}
.hero-copy{ max-width:520px; order:2; }
.hero-carousel-wrap{ order:1; }
@media (min-width:992px){
  .hero-copy{ order:1; }
  .hero-carousel-wrap{ order:2; }
  .hero-grid{ justify-content:space-between; }
}
.hero-title{ font-size:clamp(2rem, 3.1vw, 3.1rem); margin-bottom:1.1rem; overflow:hidden; }
.jump-line{ display:block; }
.jump-word{ display:inline-block; will-change:transform, opacity; }
.jump-gold{ color:var(--gold); }
.hero-sub{ font-size:.98rem; max-width:440px; margin:0 0 1.6rem; color:rgba(246,241,231,.85); line-height:1.65; }

.hero-ctas{ display:flex; gap:.85rem; flex-wrap:nowrap; }
.hero-ctas .wep-btn{
  padding:.85rem 1.5rem; font-size:.78rem; white-space:nowrap;
  height:48px; line-height:1;
}
.hero-ctas .wep-btn i{ margin-right:.5rem; }

/* Highlight the Package Builder CTA so it visually leads */
.hero-ctas .package-builder-cta{
  box-shadow:0 0 0 0 rgba(212,175,55,.55);
  animation:pbCtaGlow 2.4s ease-in-out infinite;
}
@keyframes pbCtaGlow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(212,175,55,.4), 0 8px 20px rgba(212,175,55,.15); }
  50%{ box-shadow:0 0 0 6px rgba(212,175,55,0), 0 8px 26px rgba(212,175,55,.4); }
}

/* Right-side coverflow image carousel (mirrors the reference: tilted,
   auto-rotating "folded" cards, also nudge-able via mouse wheel) */
.hero-carousel-wrap{ position:relative; }
.hero-coverflow-row{ display:flex; align-items:center; gap:16px; overflow:hidden; max-width:640px; }
.hero-coverflow{ flex:1 1 0%; min-width:0; width:auto; padding:1.5rem 0; overflow:hidden; }
.hero-coverflow .swiper-slide{
  position:relative; width:210px; height:300px; border-radius:5px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:box-shadow .4s ease;
}
.hero-coverflow .swiper-slide::after{
  content:''; position:absolute; inset:0; border-radius:5px;
  border:1px solid rgba(212,175,55,0); transition:border-color .4s ease; pointer-events:none;
}
.hero-coverflow .swiper-slide:hover::after{ border-color:rgba(212,175,55,.55); }
.hero-coverflow .swiper-slide:hover{ box-shadow:0 24px 54px rgba(0,0,0,.6); }
.hero-coverflow .swiper-slide img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.8,.25,1), filter .4s ease;
}
.hero-coverflow .swiper-slide .slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1rem 1.2rem;
  background:linear-gradient(0deg, rgba(11,10,8,.95) 20%, rgba(11,10,8,.35) 75%, transparent 100%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.slide-caption-rule{ width:28px; height:1px; background:var(--gold); }
.slide-caption-text{
  color:var(--gold); font-family:var(--font-display); font-style:italic; font-size:1.05rem; text-align:center;
}
.slide-caption-hint{
  display:flex; align-items:center; gap:.35rem;
  color:rgba(246,241,231,.6); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.hero-coverflow .swiper-slide:hover img{ transform:scale(1.08); filter:brightness(.5) saturate(1.1); }
.hero-coverflow .swiper-slide:hover .slide-caption{ opacity:1; transform:translateY(0); }

/* Vertical scroll-progress dots — a fixed-width flex sibling (not sized from
   its own content, not absolute-positioned), so it always reserves its own
   exact column at the right edge of the row, regardless of how Swiper
   internally measures/renders the coverflow next to it. */
.hero-coverflow-pagination{
  flex:0 0 12px; width:12px;
  display:flex; flex-direction:column; align-items:center; gap:11px;
}
.hero-coverflow-pagination .hcf-dot{
  width:6px; height:6px; border-radius:3px; background:rgba(246,241,231,.32);
  cursor:pointer; transition:height .4s ease, background .4s ease, box-shadow .4s ease;
  display:block;
}
.hero-coverflow-pagination .hcf-dot-active{
  height:26px; background:var(--gold); box-shadow:0 0 10px rgba(212,175,55,.65);
  animation:hcfPulse 1.8s ease-in-out infinite;
}
@keyframes hcfPulse{
  0%, 100%{ box-shadow:0 0 6px rgba(212,175,55,.5); }
  50%{ box-shadow:0 0 16px rgba(212,175,55,.9); }
}
.hero-coverflow-pagination .hcf-dot:hover{ background:rgba(212,175,55,.6); }
.carousel-hint{
  text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,241,231,.55); margin-top:.3rem;
}
.carousel-hint i{ color:var(--gold); margin-right:.4rem; }

.hero-scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  background:none; border:none; padding:.4rem; cursor:pointer;
}
.hero-scroll-cue .scroll-thread{
  width:1px; height:38px; background:linear-gradient(180deg, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.hero-scroll-cue .scroll-thread::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:#F2D98A; animation:threadDrop 2.2s ease-in-out infinite;
}
@keyframes threadDrop{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }
.hero-scroll-cue .scroll-arrow{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.4rem;
  animation:scrollArrowBounce 1.8s ease-in-out infinite;
  transition:transform .25s ease, color .25s ease;
}
.hero-scroll-cue:hover .scroll-arrow{ color:#F2D98A; transform:scale(1.1); }
@keyframes scrollArrowBounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}
.hero-scroll-cue small{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* =========================================================
   STATS
   ========================================================= */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.stat-card{
  position:relative;
  text-align:center; padding:1.6rem .8rem; border-radius:6px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(212,175,55,.22);
  box-shadow:rgb(0 0 0 / 2%) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.stat-card:nth-child(1){
  border-top-left-radius:70px;
  box-shadow:rgb(212 175 55) -18px -6px 30px -10px;
}
.stat-card:nth-child(2){
  border-top-right-radius:70px;
}
.stat-card:nth-child(3){
  border-bottom-left-radius:70px;
}
.stat-card:nth-child(4){
  border-bottom-right-radius:70px;
  box-shadow:rgb(212 175 55) 0px 20px 30px -10px;
}
.stat-grid-dark .stat-card{
  border-color:rgba(212,175,55,.25);
  background:rgba(255,255,255,.05);
}
.stat-num, .stat-suffix{ font-family:var(--font-display); font-size:2.6rem; color:var(--gold); }
.stat-card p{ margin:.4rem 0 0; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:inherit; opacity:.75; }

/* Animated rotating gold border on every stat-card — pure CSS, same
   masked conic-gradient ring technique used elsewhere on the site. */
@property --stat-border-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.stat-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--stat-border-angle),
    transparent 0%, var(--gold) 12%, rgba(212,175,55,.15) 28%, transparent 45%,
    transparent 55%, rgba(212,175,55,.15) 72%, var(--gold) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  animation:statBorderSpin 4.5s linear infinite;
}
@keyframes statBorderSpin{
  to{ --stat-border-angle:360deg; }
}
@media (prefers-reduced-motion: reduce){
  .stat-card::after{ animation:none; }
}

/* =========================================================
   WHY CHOOSE US — brand philosophy
   ========================================================= */
.why-philosophy{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center; background-attachment:fixed;
  padding:4.5rem 0;
}
.why-philosophy-scrim{
  position:absolute; inset:0; z-index:0;
  background:rgba(11,10,8,.82);
}

.why-showcase{
  display:grid; grid-template-columns:1.15fr 1fr; gap:2rem; align-items:center;
  max-width:900px; margin-left:auto; margin-right:auto;
}

.why-pillar-list{ display:flex; flex-direction:column; }
.why-pillar{
  display:flex; align-items:flex-start; gap:1.3rem; text-align:left;
  position:relative;
  background:transparent; border:none;
  border-top:1px solid rgba(255,255,255,.1);
  border-left:3px solid transparent;
  padding:1.1rem 1rem 1.1rem 1.2rem;
  cursor:pointer; transition:border-color .4s ease, padding-left .4s ease, background .4s ease;
}
.why-pillar:first-child{ border-top:1px solid rgba(255,255,255,.1); }
.why-pillar:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.why-pillar-num{
  flex:0 0 auto; font-family:var(--font-display); font-weight:300;
  font-size:2.1rem; line-height:1; color:rgba(255,255,255,.18);
  transition:color .4s ease;
}
.why-pillar h4{
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--white); font-size:.86rem; margin:.2rem 0 .3rem;
  transition:color .4s ease;
}
.why-pillar p{
  font-family:var(--font-display); font-style:italic; font-size:.82rem;
  color:rgba(246,241,231,.55); margin:0; line-height:1.35;
}
.why-pillar-icon-right{
  flex:0 0 auto; margin-left:auto; align-self:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(212,175,55,.3); color:rgba(212,175,55,.6);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  transition:background .4s ease, border-color .4s ease, color .4s ease;
}
.why-pillar.is-active .why-pillar-icon-right{
  background:var(--gold); border-color:var(--gold); color:var(--black);
}
.why-pillar.is-active{
  background:rgba(212,175,55,.05); border-left-color:var(--gold); padding-left:1.5rem;
  border-top-left-radius:20px; border-bottom-left-radius:20px;
}
.why-pillar.is-active .why-pillar-num{ color:var(--gold); }
.why-pillar.is-active h4{ color:var(--gold); }

.why-image-stack{
  position:relative; aspect-ratio:4/3.6;
  display:flex; align-items:center; justify-content:center;
}
.why-image-stack img{
  position:absolute; width:82%; height:90%; object-fit:cover;
  border-radius:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  transform:rotate(var(--r, 0deg));
  opacity:.4; z-index:1;
}
.why-image-stack img.is-active{
  transform:rotate(0deg);
  opacity:1; z-index:10;
  box-shadow:0 20px 44px rgba(0,0,0,.55);
}

.why-philosophy-statement{
  font-family:var(--font-display); font-size:clamp(1rem, 2vw, 1.3rem);
  letter-spacing:.08em; text-transform:uppercase; color:var(--white); margin:0;
}
.why-philosophy-statement span{ color:var(--gold); margin:0 .5rem; }

@media (max-width:767px){
  .why-showcase{ grid-template-columns:1fr; gap:1.5rem; }
  .why-image-stack{ order:-1; aspect-ratio:4/2.4; }
}

/* =========================================================
   OCCASIONS — "What We Celebrate" (compact) parallax card slider
   ========================================================= */
.occasions-section{
  overflow:hidden; padding:4.5rem 0;
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* native CSS parallax — image stays put while section scrolls over it */
}
.occasions-overlay{
  position:absolute; inset:0; z-index:0;
  background:rgba(11,10,8,.62); /* dark scrim for readability — image itself is never dimmed */
  pointer-events:none;
}
.occasions-header-wrap{ position:relative; z-index:1; }
.occasions-zoom{ transform-origin:center center; will-change:transform; }
.occasions-header-wrap .eyebrow-dark{ color:var(--gold); }
.occasions-header-wrap .section-title{ margin-bottom:0; color:var(--white); }
.occasions-header-wrap .section-title{ margin-bottom:0; }
.section-title em{ font-style:italic; color:var(--gold); font-weight:400; }

.occasions-slider-wrap{ position:relative; z-index:1; margin-top:1.5rem; }
.occasions-swiper{ padding:1rem 0 2.25rem; }
.occasions-swiper .swiper-slide{ width:230px; }

/* ---------- Card: thin animated gold border ---------- */
@property --border-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.occasion-card{
  position:relative; display:block; width:230px; height:320px;
  border-radius:10px; text-decoration:none; cursor:grab;
  padding:1.5px; /* this padding IS the border thickness */
  background:conic-gradient(from var(--border-angle),
    rgba(212,175,55,.15) 0%, var(--gold) 12%, rgba(212,175,55,.15) 30%, rgba(212,175,55,.15) 100%);
  animation:cardBorderSpin 5s linear infinite;
  box-shadow:rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
@keyframes cardBorderSpin{ to{ --border-angle:360deg; } }
.occasion-card:active{ cursor:grabbing; }

/* Fallback for browsers without @property support: a static thin gold
   border still shows (the conic-gradient renders, just doesn't animate). */
@supports not (background: paint(x)) and (not (color: oklch(0 0 0))) {
  .occasion-card{ background:var(--gold-soft); }
}

.occasion-card .card-inner{
  position:absolute; inset:1.5px; border-radius:8.5px; overflow:hidden; background:var(--black);
}
.card-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; transition:transform .8s ease;
}
.occasion-card:hover .card-img{ transform:scale(1.06); }

.occasion-card .card-icon{
  position:absolute; top:.85rem; left:.9rem; z-index:3;
  width:26px; height:26px; object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.occasion-card .card-arrow{
  position:absolute; top:.8rem; right:.9rem; z-index:3;
  font-size:1.4rem; font-weight:700; color:var(--gold);
  text-shadow:0 0 12px rgba(212,175,55,.9), 0 0 26px rgba(212,175,55,.55), 0 2px 6px rgba(0,0,0,.6);
  transition:transform .4s ease, text-shadow .3s ease;
}
.occasion-card:hover .card-arrow{
  transform:translateX(5px);
  text-shadow:0 0 16px rgba(212,175,55,1), 0 0 34px rgba(212,175,55,.75), 0 2px 6px rgba(0,0,0,.6);
}

/* Wavy polygon overlay: bottom-right dark zone holding the card text */
.card-wave{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none;
}
.wave-fill{ fill:rgba(11,10,8,.7); }
.wave-line{
  fill:none; stroke:var(--gold); stroke-width:2;
  filter:drop-shadow(0 0 3px rgba(212,175,55,.65));
}

.card-text{
  position:absolute; left:0; right:0; bottom:1rem; z-index:3;
  text-align:center; padding:0 1rem;
}
.card-name{
  font-family:var(--font-body); font-weight:700; font-size:1.05rem;
  letter-spacing:.14em; color:var(--gold); text-transform:uppercase;
}
.card-tagline{
  margin-top:.25rem; font-family:var(--font-display); font-style:italic;
  font-size:.76rem; color:rgba(246,241,231,.7);
}

.occasions-progress{
  position:relative; max-width:230px; margin:1.1rem auto 0; height:1px;
  background:rgba(255,255,255,.15);
}
.occasions-progress-fill{
  position:absolute; top:0; left:0; height:100%; width:2%;
  background:var(--gold); box-shadow:0 0 8px rgba(212,175,55,.6);
  transition:width .1s linear;
}
.occasions-hint{
  text-align:center; margin:.9rem 0 0; font-family:var(--font-body);
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  animation:hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

@media (max-width:767px){
  .occasion-card, .occasions-swiper .swiper-slide{ width:200px; }
  .occasion-card{ height:280px; }
}

/* =========================================================
   SERVICE / WHY / BLOG CARDS
   ========================================================= */
.craft-section{
  position:relative; overflow:hidden;
  padding:4.5rem 0;
  background-repeat:no-repeat; background-position:top left; background-size:cover;
}
.craft-section::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:rgb(200 159 97 / 43%);
}

.craft-header-row{ margin-bottom:1rem !important; }
.craft-slider-wrap{ margin-top:0; }
.craft-swiper{ padding:80px 4px 28px; }
.craft-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid rgba(212,175,55,.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.1rem; cursor:pointer; z-index:5;
  box-shadow:0 8px 20px rgba(11,10,8,.12);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.craft-nav:hover{ background:var(--gold); color:var(--black); }
.craft-nav.craft-prev{ left:-8px; }
.craft-nav.craft-next{ right:-8px; }
.craft-nav.swiper-button-disabled{ opacity:.35; pointer-events:none; }
@media (max-width:767px){
  .craft-nav{ display:none; }
}
.craft-swiper .swiper-slide{ height:auto; }
.craft-swiper .swiper-slide .service-card{ height:100%; }

.service-card{
  position:relative; overflow:visible; height:100%;
}
.service-card-body{
  position:relative; overflow:hidden;
  border-radius:8px; height:230px;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:rgb(0 0 0) 0px 6px 12px -2px, rgb(0 0 0 / 34%) 0px 3px 7px -3px;
  will-change:transform, box-shadow;
  transition:transform .75s cubic-bezier(.25,.46,.45,.94), box-shadow .75s cubic-bezier(.25,.46,.45,.94),
             border-color .5s ease;
}

/* The actual photo — full width/height of the card, any source size/aspect-ratio
   fits cleanly via object-fit:cover */
.service-card-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94);
}
.service-card:hover .service-card-bg{ transform:scale(1.07); }

/* Bottom-anchored overlay + text zone — the TOP edge of this zone stays soft/
   blurred as a gentle transition from the photo, but the gradient goes solid
   dark quickly so the title/description sit on a crisp, non-hazy background. */
.service-card-text{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.6rem 1.4rem 1.2rem;
  background:linear-gradient(
    180deg, transparent 0%, rgba(11, 10, 8, .5) 18%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, .88) 100%);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:padding-bottom .5s ease, backdrop-filter .5s ease, background .5s ease;
}
.service-card:hover .service-card-text{
  padding-bottom:1.5rem;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  background:linear-gradient(
    180deg, transparent 0%, rgba(11, 10, 8, .5) 18%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, .88) 100%);
}
.service-card-text h3{
  font-size:1.25rem; margin:0 0 .35rem; color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
  transition:color .4s ease;
}
.service-card-text p{
  color:#ffffff; font-size:.88rem; line-height:1.5; margin:0;
  text-shadow:0 2px 5px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}

/* Refined lift: subtle scale + rise, richer layered shadow. */
.service-card:hover .service-card-body{
  transform:translateY(-8px) scale(1.008);
  box-shadow:
    -12px 30px 54px -16px rgba(11,10,8,.28),
    0 4px 14px rgba(11,10,8,.1);
  border-color:rgba(255,255,255,.65);
}

/* Animated rotating gold border — appears on hover. A conic-gradient masked
   down to just the border-width ring (layers over the existing card without
   restructuring it), spinning continuously while hovered. */
@property --craft-border-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.service-card-body::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:8px; padding:1.5px;
  background:conic-gradient(from var(--craft-border-angle),
    transparent 0%, var(--gold) 12%, rgba(212,175,55,.15) 28%, transparent 45%,
    transparent 55%, rgba(212,175,55,.15) 72%, var(--gold) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s ease;
}
.service-card:hover .service-card-body::after{
  opacity:1;
  animation:craftBorderSpin 3.5s linear infinite;
}
@keyframes craftBorderSpin{ to{ --craft-border-angle:360deg; } }
@media (prefers-reduced-motion: reduce){
  .service-card:hover .service-card-body::after{ animation:none; }
  .service-card:hover .service-card-bg{ transform:none; }
}

.craft-icon{
  position:absolute; top:-64px; left:50%; transform:translateX(-50%);
  width:92px; height:92px; object-fit:contain; z-index:2;
  border-radius:16px;
  border:1px solid rgb(205 178 134);
  background:rgb(255 255 255 / 0%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px 0 rgb(0 0 0 / 0%);
  padding:8px;
}

/* =========================================================
   OUR PROCESS — 6-step timeline
   ========================================================= */
.process-section{ padding:4.5rem 0 4rem; overflow:hidden; }

.process-eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem;
}

.process-title{
  font-family:var(--font-display); font-size:clamp(2rem, 4vw, 3.1rem);
  color:var(--black); margin-bottom:1.4rem;
}
.process-title em{ font-style:italic; color:var(--gold); font-weight:400; }

.process-subtitle{
  font-family:var(--font-body); font-size:1.02rem; line-height:1.7;
  color:#5c5548; max-width:560px; margin:0 auto 2.4rem;
}
.process-subtitle em{
  font-family:var(--font-display); font-style:italic; color:var(--gold);
  font-size:1.2rem;
}

/* Timeline row */
.process-timeline{
  display:flex; align-items:flex-start; gap:0;
  position:relative;
}
.process-step{
  flex:1; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:0 .6rem;
}

/* Connecting line (dashed static track) + animated dashed-gold progress fill + hollow dot */
.process-step::before{
  content:''; position:absolute; top:78px;
  left:calc(-50% + 38px); width:calc(100% - 76px); height:0;
  border-top:2px dashed rgba(212,175,55,.5);
  z-index:0;
}
.process-connector-fill{
  position:absolute; top:78px;
  left:calc(-50% + 38px); width:0; height:0;
  border-top:2px dashed var(--gold); z-index:0;
  transition:width .5s cubic-bezier(.25,.46,.45,.94);
}
.process-step::after{
  content:''; position:absolute; top:75px; left:0; margin-left:-4px;
  width:8px; height:8px; border-radius:50%;
  background:rgba(212,175,55,.5); border:none;
  z-index:0; transition:background .3s ease, box-shadow .3s ease;
}
.process-step:first-child::before,
.process-step:first-child .process-connector-fill,
.process-step:first-child::after{ display:none; }
.process-step.is-passed::after{
  background:var(--gold); box-shadow:0 0 8px rgba(212,175,55,.6);
}

.process-number{
  font-family:var(--font-display); font-size:2.9rem; font-weight:300;
  color:rgba(11,10,8,.1); margin-bottom:.2rem; line-height:1;
}

.process-icon{
  position:relative; z-index:1;
  width:76px; height:76px; border-radius:50%;
  background:var(--white); border:1.5px solid rgba(212,175,55,.45);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(11,10,8,.12), 0 2px 6px rgba(11,10,8,.06);
  margin-bottom:1.1rem;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), border-color .4s ease, box-shadow .4s ease;
}
.process-icon img{
  width:70%; height:70%; object-fit:contain;
}
.process-step:last-child .process-icon img{
  width:88%; height:88%;
}
/* Circular progress ring — fills clockwise via --ring-progress (0-100),
   driven from script.js as each step's turn comes up. Sits just outside
   the icon's own border via a masked conic-gradient (same ring technique
   used elsewhere on the site, e.g. The Craft's hover border). */
.process-icon::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--ring-progress, 0) * 3.6deg), transparent 0deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.process-step.is-active .process-icon::after,
.process-step.is-passed .process-icon::after{ opacity:1; }
.process-step.is-active .process-icon{
  border-color:var(--gold);
  box-shadow:rgb(0 0 0 / 48%) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transform:scale(1.1);
}

/* Card — a speech/comment bubble: hidden until its step's turn, then pops in
   with a small tail pointing up to the circle above it. */
.process-card{
  position:relative;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(212,175,55,.22);
  border-radius:16px 16px 24px 24px;
  box-shadow:rgb(0 0 0 / 48%) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  padding:.6rem .7rem .7rem; text-align:center; width:100%;
  opacity:0; transform:scale(.8) translateY(-14px);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .5s cubic-bezier(.25,.46,.45,.94),
             opacity .4s ease;
}
.process-card::before{
  content:''; position:absolute; top:-8px; left:50%; margin-left:-8px;
  width:16px; height:16px; background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-left:1px solid rgba(212,175,55,.22); border-top:1px solid rgba(212,175,55,.22);
  transform:rotate(45deg);
}
.process-step.is-shown .process-card{
  opacity:1; transform:scale(1) translateY(0);
}
.process-step:hover .process-card{
  transform:translateY(-6px);
  box-shadow:0 22px 40px rgba(11,10,8,.1);
}
.process-step.is-shown:hover .process-card{ transform:scale(1) translateY(-6px); }
.process-card h3{
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.15rem;
}
.process-script{
  font-family:var(--font-display); font-style:italic; font-size:.9rem;
  color:#3a352c; line-height:1.22; margin-bottom:.3rem;
}
.process-hr{
  display:block; width:24px; height:1px; background:rgba(212,175,55,.5);
  margin:0 auto .3rem;
}
.process-desc{
  font-family:var(--font-body); font-size:.85rem; line-height:1.65;
  color:#726b5c; margin:0;
}

/* Quote banner */
.process-quote-banner{
  position:relative;
  margin-top:2.6rem; text-align:center;
  border-radius:20px;
  padding:1.8rem 1.5rem;
  background:linear-gradient(135deg, rgba(212,175,55,.06), rgba(212,175,55,.015) 60%);
}
.process-quote-banner::before,
.process-quote-banner::after{
  content:'❖'; position:absolute; top:50%; transform:translateY(-50%);
  font-size:1.1rem; color:rgba(212,175,55,.35);
}
.process-quote-banner::before{ left:1.6rem; }
.process-quote-banner::after{ right:1.6rem; }
.process-quote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing:.01em; text-transform:none; color:var(--black);
  margin-bottom:.8rem;
}
.process-quote span{ color:var(--gold); font-style:italic; }
.process-tagline{
  font-family:var(--font-display); font-style:italic; font-size:1.1rem;
  color:var(--gold); display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:0;
}
.process-tagline span{ width:60px; height:1px; background:rgba(212,175,55,.4); }

@media (max-width:991px){
  .process-timeline{ flex-wrap:wrap; row-gap:2.5rem; }
  .process-step{ flex:0 0 33.333%; }
  .process-step:nth-child(3n+1)::before,
  .process-step:nth-child(3n+1)::after{ display:none; }
}
@media (max-width:575px){
  .process-step{ flex:0 0 50%; }
  .process-step::before,
  .process-step::after{ display:none; }
  .process-quote-banner::before,
  .process-quote-banner::after{ display:none; }
}

.why-item{
  text-align:center; padding:1.6rem 1.2rem; border-radius:8px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(212,175,55,.18); box-shadow:0 8px 24px rgba(11,10,8,.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
.why-item:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(11,10,8,.09); }
.why-item i{ font-size:1.5rem; color:var(--gold); margin-bottom:.9rem; }
.why-item h4{ font-size:1.2rem; margin-bottom:.5rem; }
.why-item p{ font-size:.88rem; color:#4a4638; line-height:1.6; }

/* =========================================================
   BLOG — mixed grid (1 featured + 3 list + 2 overlay-feature)
   ========================================================= */
.blog-grid .tier-tag{ display:inline-block; }
.blog-meta{
  font-family:var(--font-body); font-size:.78rem; color:rgba(11,10,8,.5);
  margin:.4rem 0 0; display:flex; align-items:center; gap:1.1rem;
}
.blog-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.blog-meta i{ color:var(--gold); font-size:.85rem; }

/* Large featured card (left) — text now overlays the photo, so the
   card's height is exactly the image height, matching the right stack. */
.blog-featured{ position:relative; overflow:hidden; border-radius:8px; height:340px; box-shadow:rgb(0 0 0) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
.blog-featured img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.blog-featured::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,10,8,0) 35%, rgba(11,10,8,.9) 100%);
}
.blog-featured-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.6rem 1.8rem;
}
.blog-featured .tier-tag{
  font-size:.85rem; padding:.5rem 1.4rem; margin-bottom:1.1rem;
  background:rgba(11,10,8,.4); backdrop-filter:blur(2px);
}
.blog-featured h3{ color:var(--white); font-size:1.6rem; line-height:1.25; margin:0 0 .6rem; }
.blog-featured .blog-meta{ color:rgba(246,241,231,.75); }
.blog-featured .blog-meta i{ color:var(--gold); }

/* Middle: stacked small list items */
.blog-list{ display:flex; flex-direction:column; justify-content:space-between; height:340px; }
.blog-list-item{ display:flex; align-items:center; gap:.9rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(11,10,8,.08); }
.blog-list-item:last-child{ padding-bottom:0; border-bottom:none; }
.blog-list-item img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:6px;
  box-shadow:rgb(0 0 0) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.blog-list-item .tier-tag{ font-size:.62rem; padding:.2rem .55rem; margin-bottom:.3rem; }
.blog-list-item h4{ font-size:.92rem; line-height:1.3; margin:0; }

/* Right: 2 stacked large photo cards with overlay title —
   each card's height + the 1rem gap between them sums to exactly
   340px, matching the featured image's height on the left. */
.blog-feature-stack{ display:flex; flex-direction:column; gap:1rem; }
.blog-feature-card{
  position:relative; overflow:hidden; border-radius:8px;
  height:calc((340px - 1rem) / 2); display:flex; align-items:flex-end;
  box-shadow:rgb(0 0 0) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.blog-feature-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.blog-feature-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,10,8,0) 30%, rgba(11,10,8,.85) 100%);
}
.blog-feature-card .tier-tag,
.blog-feature-card h4{ position:relative; z-index:2; }
.blog-feature-card{ padding:1.1rem 1.2rem; }
.blog-feature-card .tier-tag{
  position:absolute; top:1rem; left:1.2rem; margin-bottom:0;
  background:rgba(11,10,8,.4); backdrop-filter:blur(2px);
}
.blog-feature-card h4{
  color:var(--white); font-size:1.05rem; line-height:1.3; margin:0;
}

@media (max-width:991px){
  .blog-featured{ margin-bottom:1.5rem; height:300px; }
  .blog-feature-card{ height:calc((300px - 1rem) / 2); }
  .blog-list{ margin-bottom:1.5rem; height:auto; }
}
@media (max-width:575px){
  .blog-featured{ height:240px; }
  .blog-feature-card{ height:calc((240px - 1rem) / 2); }
}

/* Blog cards — same rotating gold border technique as The Craft, on hover */
.blog-featured::after,
.blog-feature-card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:8px; padding:1.5px;
  background:conic-gradient(from var(--craft-border-angle),
    transparent 0%, var(--gold) 12%, rgba(212,175,55,.15) 28%, transparent 45%,
    transparent 55%, rgba(212,175,55,.15) 72%, var(--gold) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s ease;
}
.blog-featured:hover::after,
.blog-feature-card:hover::after{
  opacity:1;
  animation:craftBorderSpin 3.5s linear infinite;
}
.blog-list-thumb{ position:relative; display:block; flex:0 0 auto; width:80px; height:80px; }
.blog-list-thumb::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:6px; padding:1.5px;
  background:conic-gradient(from var(--craft-border-angle),
    transparent 0%, var(--gold) 12%, rgba(212,175,55,.15) 28%, transparent 45%,
    transparent 55%, rgba(212,175,55,.15) 72%, var(--gold) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s ease;
}
.blog-list-item:hover .blog-list-thumb::before{
  opacity:1;
  animation:craftBorderSpin 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .blog-featured::after, .blog-feature-card::after, .blog-list-thumb::before{ transition:none !important; animation:none !important; }
}

/* =========================================================
   VENUE ACCORDION CAROUSEL + STORY SWIPER
   ========================================================= */

/* ---------- Desktop: horizontal expanding-panel accordion, drag-scrollable ---------- */
.venues-section{
  position:relative; overflow:hidden;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  background-attachment:fixed;
}
.venues-section::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:rgb(200 159 97 / 43%);
}

.venues-header-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap;
}
.venues-view-all{ gap:.6rem; margin-bottom:1rem; }
@media (max-width:575px){
  .venues-view-all span{ display:none; }
}

.venues-accordion-scroll{
  overflow-x:auto; overflow-y:hidden; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px 2px 26px;
}
.venues-accordion-scroll::-webkit-scrollbar{ display:none; }
.venues-accordion-scroll.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
.venues-accordion-scroll:not(.is-dragging){ scroll-behavior:smooth; }

.venues-accordion{
  display:flex; gap:.6rem; height:460px; width:max-content;
  border-radius:10px;
}
.venue-panel{
  position:relative; overflow:hidden; cursor:pointer;
  flex:0 0 80px; width:80px; height:100%;
  background-size:cover; background-position:center;
  border-radius:8px;
  border:1px solid #d0ab36;
  transition:flex-basis .75s cubic-bezier(.22,.61,.36,1), width .75s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease, border-color .3s ease;
  box-shadow:rgb(0 0 0) 0px 6px 12px -2px, rgb(0 0 0 / 34%) 0px 3px 7px -3px;
}
.venue-panel.is-active{ flex:0 0 460px; width:460px; border-color:transparent; }

/* Rotating gold glow ring on the active panel — same technique used
   elsewhere on the site, for a consistent "featuristic" signature. */
@property --venue-ring-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.venue-panel::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:8px; padding:2px;
  background:conic-gradient(from var(--venue-ring-angle),
    transparent 0%, #bc8b41 15%, transparent 32%, transparent 68%, #bc8b41 85%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s ease;
}
.venue-panel.is-active::after{ opacity:1; animation:venueRingSpin 5s linear infinite; }
@keyframes venueRingSpin{ to{ --venue-ring-angle:360deg; } }

.venue-panel-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(11 10 8 / 0%) 0%, rgba(11, 10, 8, .15) 55%, rgb(0 0 0) 100%);
  transition:background .5s ease;
}

.venue-panel-number{
  position:absolute; top:1rem; left:1rem; z-index:1;
  color:rgba(255,255,255,.55); font-family:var(--font-display); font-size:.85rem;
  letter-spacing:.05em; pointer-events:none;
}

/* Collapsed-state label: icon badge at the TOP, title at the BOTTOM —
   opposite ends of the panel, not stacked together. */
.venue-panel-label{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:3.2rem 0 1.6rem;
  opacity:1; transition:opacity .35s ease;
}
.venue-panel-label i{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#bc8b41; font-size:1.05rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(188,139,65,.4);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.venue-panel-label-text{
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:var(--white); font-family:var(--font-display); font-size:1rem;
  letter-spacing:.04em; white-space:nowrap;
}
.venue-panel.is-active .venue-panel-label{ opacity:0; }

/* Expanded-state content: full card copy, hidden while collapsed */
.venue-panel-content{
  position:absolute; left:0; bottom:0; width:100%; z-index:1;
  padding:2rem 2.2rem 2.2rem; color:var(--white);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.venue-panel.is-active .venue-panel-content{ opacity:1; transform:translateY(0); }
.venue-panel-content h3{ font-size:1.7rem; margin:.3rem 0 .5rem; }
.venue-panel-content p{ font-size:.92rem; color:rgba(255,255,255,.82); max-width:340px; margin-bottom:1rem; }
.venue-panel-link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#bc8b41; font-family:var(--font-body); font-weight:600;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid rgba(188,139,65,.4); padding-bottom:.2rem;
  transition:gap .3s ease;
}
.venue-panel-link:hover{ gap:.8rem; color:#bc8b41; }

.venues-drag-hint{
  text-align:center; margin:.6rem 0 0; font-family:var(--font-body);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgb(76 51 0);
}

/* ---------- Tablet + mobile: vertical stacked accordion (no drag needed) ---------- */
@media (max-width:991px){
  .venues-accordion-scroll{ overflow-x:visible; cursor:default; padding:0; }
  .venues-accordion{ flex-direction:column; height:auto; width:auto; gap:.5rem; }
  .venue-panel{
    flex:0 0 64px; width:auto; height:64px;
    transition:flex-basis .6s cubic-bezier(.25,.46,.45,.94), height .6s cubic-bezier(.25,.46,.45,.94);
  }
  .venue-panel.is-active{ flex:0 0 340px; width:auto; height:340px; }

  .venue-panel-label{
    flex-direction:row; justify-content:flex-start; align-items:center; gap:.8rem;
    padding:0 1.2rem;
  }
  .venue-panel-label i{ width:32px; height:32px; font-size:.9rem; }
  .venue-panel-label-text{ writing-mode:horizontal-tb; transform:none; font-size:1.05rem; }
  .venue-panel.is-active .venue-panel-label{ opacity:0; }

  .venue-panel-content{ padding:1.4rem 1.4rem 1.6rem; }
  .venue-panel-content h3{ font-size:1.35rem; }
  .venue-panel-content p{ max-width:none; font-size:.86rem; }
  .venues-drag-hint{ display:none; }
}
@media (max-width:480px){
  .venue-panel{ height:56px; }
  .venue-panel.is-active{ height:300px; }
}

/* =========================================================
   REAL COUPLES — featured testimonial + numbered avatar selector
   ========================================================= */
.stories-section{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
  border-top:1px solid rgba(212,175,55,.25); border-bottom:1px solid rgba(212,175,55,.25);
}
.stories-section::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:rgba(255,255,255,.55);
}
.stories-section .container{ position:relative; z-index:1; }

.stories-showcase{ max-width:820px; margin-left:auto; margin-right:auto; }

.stories-featured{
  position:relative; background:var(--ivory); border-radius:16px;
  padding:2.4rem 2.6rem; overflow:hidden;
  text-align:center; border:1px solid rgba(212,175,55,.25);
}

.stories-featured-name{
  font-family:var(--font-body); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem;
  color:var(--gold); margin:1.2rem 0 0;
}

.stories-video-frame{
  position:relative; aspect-ratio:32/9; border-radius:10px; overflow:hidden;
  box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; background:var(--black);
}
.stories-video-frame img.stories-video-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7;
}
.stories-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:none;
  background:var(--gold); color:var(--black); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.35); transition:transform .3s ease;
}
.stories-video-play:hover{ transform:translate(-50%,-50%) scale(1.08); }
.stories-video-caption{
  font-family:var(--font-display); font-style:italic; font-size:.92rem;
  color:#5c5548; margin:.3rem 0 0;
}

.stories-selector-wrap{
  display:flex; align-items:center; justify-content:center; margin-top:1.5rem;
}
.stories-selector-scroll{
  overflow-x:auto; overflow-y:hidden; max-width:100%;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:1.4rem 1rem 2.4rem;
}
.stories-selector-scroll::-webkit-scrollbar{ display:none; }
.stories-selector{
  display:flex; gap:1.3rem; width:max-content; margin-left:auto; margin-right:auto;
  justify-content:center;
}
.stories-avatar{
  position:relative; width:58px; height:58px; border-radius:50%;
  border:none; padding:0; cursor:pointer; overflow:visible; background:none;
}
.stories-avatar-ring{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(212,175,55,.4); pointer-events:none;
}
.stories-avatar img{
  display:block; width:100%; height:100%; border-radius:50%; object-fit:cover;
}
.stories-avatar-play{
  position:absolute; top:-4px; right:-2px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  background:var(--white); border:1px solid rgba(212,175,55,.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.58rem;
  box-shadow:0 4px 10px rgba(11,10,8,.15);
}
.stories-avatar-num{
  position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  z-index:2; padding:.12rem .5rem; border-radius:999px;
  background:rgba(11,10,8,.65); backdrop-filter:blur(2px);
  font-family:var(--font-body); font-size:.58rem; font-weight:700; color:var(--white);
  white-space:nowrap;
}
.stories-avatar.is-active .stories-avatar-ring{ border-color:var(--gold); }
.stories-avatar.is-active .stories-avatar-play{ background:var(--gold); border-color:var(--gold); color:var(--black); }
.stories-avatar.is-active .stories-avatar-num{ background:var(--gold); color:var(--black); }

/* Video modal */
.stories-modal{
  display:none; position:fixed; inset:0; z-index:2000;
  align-items:center; justify-content:center; padding:1.5rem;
}
.stories-modal.is-open{ display:flex; }
.stories-modal-backdrop{
  position:absolute; inset:0; background:rgba(11,10,8,.88);
}
.stories-modal-dialog{
  position:relative; z-index:1; width:100%; max-width:920px;
}
.stories-modal-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:var(--black); box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.stories-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.stories-modal-close{
  position:absolute; top:-46px; right:0; z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(212,175,55,.5);
  background:transparent; color:var(--white); font-size:1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.stories-modal-close:hover{ background:var(--gold); color:var(--black); }

@media (max-width:991px){
  .stories-featured{ padding:2.2rem 1.8rem; }
}
@media (max-width:767px){
  .stories-featured{ padding:1.8rem 1.2rem; border-radius:12px; }
  .stories-featured-name{ font-size:.78rem; }
  .stories-video-caption{ font-size:.85rem; }
  .stories-video-play{ width:52px; height:52px; font-size:1.1rem; }
  .stories-selector-wrap{ margin-top:1.8rem; }
  .stories-selector{ gap:1rem; }
  .stories-avatar{ width:50px; height:50px; }
  .stories-avatar-play{ width:19px; height:19px; font-size:.5rem; }
  .stories-avatar-num{ font-size:.52rem; padding:.1rem .42rem; }
  .stories-modal-close{ top:-40px; width:32px; height:32px; }
}
@media (max-width:480px){
  .stories-showcase{ max-width:100%; }
  .stories-avatar{ width:44px; height:44px; }
  .stories-selector{ gap:.8rem; }
}

/* =========================================================
   GALLERY
   ========================================================= */
/* ---------- Elastic mesh distortion (localized "water" hover) ---------- */
/* The frame's own <img> stays in the layout (for sizing/alt-text/SEO) but
   is visually hidden once the mesh grid is built on top of it — the mesh
   is what's actually visible and interactive during hover. */
.elastic-mesh-frame{ position:relative; }
.elastic-mesh-frame > img{ position:relative; }
.elastic-mesh-frame:hover > img{ opacity:0; }
.elastic-mesh{ position:absolute; z-index:2; }
.elastic-mesh-cell{
  position:absolute; background-repeat:no-repeat;
  /* No transition here on purpose — while actively hovering/moving, cells
     must snap immediately to the cursor-driven position for a tight,
     responsive feel. The bouncy settle-back transition only applies via
     .settling below, once the cursor leaves. */
}
.elastic-mesh.settling .elastic-mesh-cell{
  transition:transform .6s cubic-bezier(.17,.67,.3,1.35);
}

/* =========================================================
   PACKAGE CTA
   ========================================================= */
@font-face{
  font-family:'Great Vibes';
  src:url('../fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================================================
   PACKAGE BUILDER CTA — "Design It / Your Way"
   ========================================================= */
.package-cta{ padding:7rem 0 2.5rem; }

.package-cta-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover;
}
.package-cta-bg canvas{
  pointer-events:none;
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
}

.package-cta-scrim{
  position:absolute; inset:0; z-index:0;
}

.package-cta-hero{ max-width:560px; padding-bottom:3.5rem; margin-top:0; }
.package-cta-hero .eyebrow{ color:var(--white); font-size:2.2rem; font-family:var(--font-display);
  font-weight:400; letter-spacing:0; text-transform:none; margin-bottom:0; line-height:1.1; }
.package-cta-title{
  font-family:'Great Vibes', cursive; font-weight:400; font-style:normal; letter-spacing:0;
  font-size:clamp(2.8rem, 5.5vw, 4.2rem); line-height:1.5; margin-top:-15px;
  background:linear-gradient(100deg, #8a6a35 15%, #bc8b41 35%, #f6dfa8 50%, #bc8b41 65%, #8a6a35 85%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:packageCtaShine 5s linear infinite;
}
@keyframes packageCtaShine{
  0%{ background-position:200% center; }
  100%{ background-position:-20% center; }
}
@media (prefers-reduced-motion: reduce){
  .package-cta-title{ animation:none; background-position:20% center; }
}
.package-cta-subtitle{
  font-family:var(--font-body); font-weight:600; color:var(--gold);
  font-size:1rem; letter-spacing:.02em; margin-bottom:.1rem;
}
.package-cta .section-copy-light{ color:rgba(246,241,231,.78); margin-bottom:1.3rem; font-size:.9rem; }
.package-cta-hero .wep-btn{ gap:.7rem; }

.package-cta-features{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:.8rem;
}
.package-cta-feature{
  display:flex; align-items:center; gap:.7rem;
  border-radius:10px;
  padding:.5rem;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.package-cta-feature-icon{
  flex:0 0 auto; width:54px; height:54px; border-radius:8px;
  border:1px solid rgba(212,175,55,.5);
  display:flex; align-items:center; justify-content:center;
}
.package-cta-feature-icon img{ width:50px; height:50px; object-fit:contain; }
.package-cta-feature h4{
  font-family:var(--font-body); font-weight:700; color:var(--gold);
  font-size:.82rem; margin:0 0 .2rem;
}
.package-cta-feature p{
  font-family:var(--font-body); font-size:.72rem; line-height:1.3;
  color:rgba(246,241,231,.7); margin:0;
}

@media (max-width:991px){
  .package-cta-features{ grid-template-columns:repeat(3, 1fr); row-gap:.8rem; }
}
@media (max-width:767px){
  .package-cta{ padding:3.5rem 0 2.2rem; }
  .package-cta-hero{ max-width:none; text-align:center; padding-bottom:1.8rem; }
  .package-cta-hero .section-copy-light{ margin-left:auto; margin-right:auto; }
  .package-cta-hero .wep-btn{ margin-left:auto; margin-right:auto; }
  .package-cta-features{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .package-cta-features{ grid-template-columns:1fr; gap:.7rem; }
  .package-cta-feature{ justify-content:flex-start; text-align:left; }
}

/* =========================================================
   SOCIAL
   ========================================================= */
.social-grid > div{ overflow:hidden; border-radius:3px; }
.social-grid img{ aspect-ratio:1/1; object-fit:cover; border-radius:3px; }
.wep-link-gold{ color:var(--gold); font-weight:600; letter-spacing:.04em; }
.wep-link-gold i{ margin-right:.4rem; }

/* =========================================================
   FOOTER
   ========================================================= */
/* =========================================================
   FOOTER — modern, systematic, background image + overlay
   ========================================================= */
.wep-footer{ position:relative; color:var(--ivory); overflow:hidden; }
.wep-footer-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.46) saturate(1.1); z-index:0;
  /* Fallback in case the background image fails to load for any reason
     (e.g. the file wasn't included in a deployment) — background-color is
     a genuinely separate property from background-image, so it still
     shows through if the image 404s, rather than leaving flat black/
     transparent. (A CSS background-image fallback here wouldn't work —
     the inline background-image set in the HTML always wins over this
     stylesheet's, even when that inline url() fails to load.) */
  background-color:#241d12;
}
.wep-footer-bg canvas{
  pointer-events:none;
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
}
.wep-footer-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Darker than the previous round per direct request, but re-verified
     with the same real-plugin test methodology first — this depth still
     leaves the ripple distortion clearly visible, just more subtle. Going
     back toward the original (.92/.85/.97) crushed it to nothing again. */
  background:linear-gradient(180deg, rgba(11,10,8,.8) 0%, rgba(11,10,8,.7) 40%, rgba(11,10,8,.88) 100%);
}
.wep-footer-cta, .wep-footer-main, .wep-footer-bottom-bar{ position:relative; z-index:2; }

.wep-footer-cta{ padding:3rem 0 2.5rem; border-bottom:1px solid rgba(212,175,55,.16); }
.footer-cta-title{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.footer-cta-note{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.85rem; line-height:1.5; color:rgba(246,241,231,.68);
  max-width:440px;
}
.footer-cta-note i{ color:var(--gold); margin-top:.15rem; flex-shrink:0; }

.wep-footer-main{ padding:4rem 0 3rem; }
.footer-brand{ max-width:340px; }
.footer-logo{ display:inline-block; margin-bottom:1.2rem; }
.footer-logo img{ height:88px; width:auto; display:block; }
.footer-brand-text{ font-size:.9rem; line-height:1.7; color:rgba(246,241,231,.7); margin-bottom:1.4rem; }
.footer-social{ display:flex; gap:.9rem; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.05rem;
  transition:color .25s ease, transform .25s ease;
}
.footer-social a:hover{ color:#F2D98A; transform:translateY(-3px); }

.footer-col-title{
  font-family:var(--font-wordmark); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.3rem;
  display:flex; align-items:center; gap:.55rem;
}
.footer-col-title::before{ content:''; width:16px; height:1px; background:var(--gold); flex-shrink:0; }

.footer-links-col{ display:flex; flex-direction:column; gap:.7rem; }
.footer-links-col a{ display:flex; align-items:center; gap:.7rem; }
.footer-links-col a{ color:rgba(246,241,231,.72); font-size:.92rem; transition:color .25s ease, transform .25s ease; }
.footer-links-col a:hover{ color:var(--gold); transform:translateX(3px); }

.contact-rows{ display:flex; flex-direction:column; gap:.85rem; margin-top:1rem; }
.contact-rows a{ color:var(--ivory); font-size:.95rem; display:flex; align-items:center; gap:.7rem; transition:color .25s ease, transform .25s ease; }
.contact-rows a:hover{ color:var(--gold); transform:translateX(3px); }

/* Systematic icon badges — shared by both footer link columns and the
   contact rows, so every icon on this side of the page sits in the same
   small bordered box instead of floating loose next to the text. */
.footer-links-col a i, .contact-rows a i{
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,175,55,.22); background:rgba(212,175,55,.05);
  color:var(--gold); font-size:.78rem;
  transition:background .25s ease, border-color .25s ease;
}
.footer-links-col a:hover i, .contact-rows a:hover i{
  background:rgba(212,175,55,.16); border-color:var(--gold);
}

/* Vertical dividers between the four footer-main columns at desktop —
   turns four separate blocks into one clearly gridded row. */
@media (min-width:992px){
  .wep-footer-main .row > [class*="col-"]{ border-left:1px solid rgba(212,175,55,.1); }
  .wep-footer-main .row > [class*="col-"]:first-child{ border-left:none; }
}

.wep-footer-bottom-bar{ padding-bottom:2rem; }
.wep-footer-rule{ border-color:rgba(212,175,55,.18); margin:0 0 1.6rem; }
.wep-copyright{ font-size:.78rem; opacity:.6; }
.footer-credit{ font-size:.78rem; opacity:.75; }
.footer-credit a{ color:var(--gold); font-weight:600; }
.footer-credit a:hover{ text-decoration:underline; }

/* =========================================================
   Sticky mobile CTA bar
   ========================================================= */
.mobile-cta-bar{
  /* Authoritative visibility, same reasoning as .wep-nav-links above. */
  position:fixed; bottom:0; left:0; width:100%; z-index:1150;
  background:var(--black); border-top:1px solid rgba(212,175,55,.25);
  display:flex; padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
}
@media (min-width:992px){
  .mobile-cta-bar{ display:none; }
}
.mobile-cta-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  color:var(--ivory); font-size:.62rem; letter-spacing:.03em; padding:.35rem 0;
}
.mobile-cta-bar i{ font-size:1.05rem; color:var(--gold); }
.mobile-cta-primary{ background:var(--gold); color:var(--black); border-radius:4px; }
.mobile-cta-primary i{ color:var(--black); }

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width:1439px){
  :root{ --section-pad:6.5rem; }
  .mega-menu{ width:560px; }
}
@media (max-width:1199px){
  :root{ --section-pad:5.5rem; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .wep-nav-links{ gap:1.3rem; }
  .mega-menu{ width:480px; grid-template-columns:1fr 1fr; }
  .mega-menu .mega-feature{ display:none; }
  .wep-logo-badge{ width:86px; height:86px; top:1px; }
  .wep-logo-glow{ width:130px; height:130px; }
  .wep-nav{ --nav-dip-depth:94px; }
}
@media (max-width:991px){
  :root{ --section-pad:4.5rem; }
  .hero-grid{ text-align:center; }
  .hero-copy, .hero-title, .hero-sub, .hero-pullquote{ text-align:center; }
  .hero-coverflow-row{ margin:0 auto; max-width:100%; }
  .hero-copy{ max-width:640px; margin:0 auto; }
  .hero-pullquote{ margin-left:auto; margin-right:auto; border-left:none; padding-left:0; }
  .hero-ctas{ justify-content:center; flex-wrap:wrap; }
  .hero-coverflow .swiper-slide{ width:175px; height:250px; }
  /* Was min-height:100vh (inherited from the base rule) all the way up to
     991px — once hero-sub was removed and content got shorter here, that
     forced a lot of empty black space to fill out the remaining viewport
     height, landing right after the scroll-cue (exactly the gap reported).
     A narrower fix at only ≤575px missed the whole tablet range. */
  .wep-hero{ min-height:auto; padding-top:7.5rem; padding-bottom:2.5rem; }
  .wep-nav, .wep-nav.scrolled{ padding:.35rem 0; }
  .wep-logo-badge{ width:64px; height:64px; top:0; border-width:1.5px; }
  .wep-logo-glow{ width:100px; height:100px; }
  .wep-nav{ --nav-dip-depth:70px; }
  .wep-nav-right{ gap:.6rem; align-items:center; }
  #accountLabel{ display:none; } /* icon-only account trigger once space is tight */
  .wep-burger, .account-trigger{
    height:38px; width:38px; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .account-trigger i.fi-rr-angle-small-down{ display:none; }

  /* Hero sub-copy removed entirely on mobile/tablet per latest direction —
     eyebrow + title + pullquote carry the hero on smaller screens. */
  .hero-sub{ display:none; }

  /* Scroll cue: was absolutely positioned at a fixed distance from the
     hero's bottom edge, which — once hero-sub was removed and other
     mobile spacing changed — ended up overlapping/pressed into the
     "Build Your Package" button below it. Moved into normal document flow
     instead of floating, so it always sits cleanly after the CTAs with no
     risk of overlapping them regardless of exact content height. */
  .wep-hero{ flex-direction:column; }
  .hero-scroll-cue{ position:static; transform:none; margin:2rem 0 0; }
}
@media (max-width:767px){
  :root{ --section-pad:3.6rem; }
  .hero-title{ font-size:2.4rem; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  body{ padding-bottom:70px; } /* room for sticky mobile bar */
  .hero-coverflow .swiper-slide{ width:150px; height:215px; }
  .hero-coverflow-row{ gap:10px; max-width:340px; margin:0 auto; }
  .hero-carousel-wrap{ display:flex; flex-direction:column; align-items:center; }

  /* Proportionally smaller text/buttons across every section, not just the hero */
  .section-title{ font-size:clamp(1.6rem, 6vw, 2.1rem); }
  .section-copy{ font-size:.92rem; }
  .eyebrow{ font-size:.68rem; }
  .stat-num, .stat-suffix{ font-size:2rem; }
  .service-card{ padding:1.6rem; }
  .service-card h3{ font-size:1.2rem; }
  .why-item h4{ font-size:1.05rem; }
  .why-item p{ font-size:.82rem; }
  .wep-btn{ padding:.7rem 1.5rem; font-size:.76rem; }
  .wep-pullquote{ font-size:1.2rem; }

  /* Bigger + more "highlighted" logo on mobile — was shrinking, now stands out more */
  .wep-logo-badge{
    width:78px; height:78px; border-width:2px;
    box-shadow:0 0 0 4px rgba(212,175,55,.18), 0 10px 26px rgba(0,0,0,.6);
  }
  .wep-logo-glow{ width:115px; height:115px; }
  .wep-nav{ --nav-dip-depth:84px; }
}
@media (max-width:575px){
  .wep-hero{ min-height:auto; }
  .hero-ctas{ flex-direction:column; width:100%; }
  .hero-ctas .wep-btn{ width:100%; }
  .hero-coverflow .swiper-slide{ width:130px; height:185px; }
  .hero-coverflow-row{ gap:8px; }
  .hero-carousel-wrap{ padding-right:0; }

  .section-title{ font-size:clamp(1.4rem, 7vw, 1.8rem); }
  .section-copy{ font-size:.88rem; }
  .stat-num, .stat-suffix{ font-size:1.7rem; }
  .stat-card{ padding:1.1rem .5rem; }
  .wep-btn{ padding:.65rem 1.2rem; font-size:.72rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}